create-expo-cljs-app
Version:
Create a react native application with Expo and Shadow-CLJS!
407 lines (342 loc) • 15.4 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _createElement = _interopRequireDefault(require("../createElement"));
var _css = _interopRequireDefault(require("../StyleSheet/css"));
var forwardedProps = _interopRequireWildcard(require("../../modules/forwardedProps"));
var _pick = _interopRequireDefault(require("../../modules/pick"));
var _useElementLayout = _interopRequireDefault(require("../../modules/useElementLayout"));
var _useLayoutEffect = _interopRequireDefault(require("../../modules/useLayoutEffect"));
var _useMergeRefs = _interopRequireDefault(require("../../modules/useMergeRefs"));
var _usePlatformMethods = _interopRequireDefault(require("../../modules/usePlatformMethods"));
var _useResponderEvents = _interopRequireDefault(require("../../modules/useResponderEvents"));
var _StyleSheet = _interopRequireDefault(require("../StyleSheet"));
var _TextInputState = _interopRequireDefault(require("../../modules/TextInputState"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/**
* Determines whether a 'selection' prop differs from a node's existing
* selection state.
*/
var isSelectionStale = function isSelectionStale(node, selection) {
var selectionEnd = node.selectionEnd,
selectionStart = node.selectionStart;
var start = selection.start,
end = selection.end;
return start !== selectionStart || end !== selectionEnd;
};
/**
* Certain input types do no support 'selectSelectionRange' and will throw an
* error.
*/
var setSelection = function setSelection(node, selection) {
if (isSelectionStale(node, selection)) {
var start = selection.start,
end = selection.end;
try {
node.setSelectionRange(start, end || start);
} catch (e) {}
}
};
var forwardPropsList = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, forwardedProps.defaultProps), forwardedProps.accessibilityProps), forwardedProps.clickProps), forwardedProps.focusProps), forwardedProps.keyboardProps), forwardedProps.mouseProps), forwardedProps.touchProps), forwardedProps.styleProps), {}, {
autoCapitalize: true,
autoComplete: true,
autoCorrect: true,
autoFocus: true,
defaultValue: true,
disabled: true,
lang: true,
maxLength: true,
onChange: true,
onScroll: true,
placeholder: true,
pointerEvents: true,
readOnly: true,
rows: true,
spellCheck: true,
value: true,
type: true
});
var pickProps = function pickProps(props) {
return (0, _pick.default)(props, forwardPropsList);
}; // If an Input Method Editor is processing key input, the 'keyCode' is 229.
// https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
function isEventComposing(nativeEvent) {
return nativeEvent.isComposing || nativeEvent.keyCode === 229;
}
var TextInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
var _props$autoCapitalize = props.autoCapitalize,
autoCapitalize = _props$autoCapitalize === void 0 ? 'sentences' : _props$autoCapitalize,
autoComplete = props.autoComplete,
autoCompleteType = props.autoCompleteType,
_props$autoCorrect = props.autoCorrect,
autoCorrect = _props$autoCorrect === void 0 ? true : _props$autoCorrect,
blurOnSubmit = props.blurOnSubmit,
clearTextOnFocus = props.clearTextOnFocus,
dir = props.dir,
_props$editable = props.editable,
editable = _props$editable === void 0 ? true : _props$editable,
_props$keyboardType = props.keyboardType,
keyboardType = _props$keyboardType === void 0 ? 'default' : _props$keyboardType,
_props$multiline = props.multiline,
multiline = _props$multiline === void 0 ? false : _props$multiline,
_props$numberOfLines = props.numberOfLines,
numberOfLines = _props$numberOfLines === void 0 ? 1 : _props$numberOfLines,
onBlur = props.onBlur,
onChange = props.onChange,
onChangeText = props.onChangeText,
onContentSizeChange = props.onContentSizeChange,
onFocus = props.onFocus,
onKeyPress = props.onKeyPress,
onLayout = props.onLayout,
onMoveShouldSetResponder = props.onMoveShouldSetResponder,
onMoveShouldSetResponderCapture = props.onMoveShouldSetResponderCapture,
onResponderEnd = props.onResponderEnd,
onResponderGrant = props.onResponderGrant,
onResponderMove = props.onResponderMove,
onResponderReject = props.onResponderReject,
onResponderRelease = props.onResponderRelease,
onResponderStart = props.onResponderStart,
onResponderTerminate = props.onResponderTerminate,
onResponderTerminationRequest = props.onResponderTerminationRequest,
onScrollShouldSetResponder = props.onScrollShouldSetResponder,
onScrollShouldSetResponderCapture = props.onScrollShouldSetResponderCapture,
onSelectionChange = props.onSelectionChange,
onSelectionChangeShouldSetResponder = props.onSelectionChangeShouldSetResponder,
onSelectionChangeShouldSetResponderCapture = props.onSelectionChangeShouldSetResponderCapture,
onStartShouldSetResponder = props.onStartShouldSetResponder,
onStartShouldSetResponderCapture = props.onStartShouldSetResponderCapture,
onSubmitEditing = props.onSubmitEditing,
placeholderTextColor = props.placeholderTextColor,
returnKeyType = props.returnKeyType,
_props$secureTextEntr = props.secureTextEntry,
secureTextEntry = _props$secureTextEntr === void 0 ? false : _props$secureTextEntr,
selection = props.selection,
selectTextOnFocus = props.selectTextOnFocus,
spellCheck = props.spellCheck;
var type;
var inputMode;
switch (keyboardType) {
case 'email-address':
type = 'email';
break;
case 'number-pad':
case 'numeric':
inputMode = 'numeric';
break;
case 'decimal-pad':
inputMode = 'decimal';
break;
case 'phone-pad':
type = 'tel';
break;
case 'search':
case 'web-search':
type = 'search';
break;
case 'url':
type = 'url';
break;
default:
type = 'text';
}
if (secureTextEntry) {
type = 'password';
}
var dimensions = React.useRef({
height: null,
width: null
});
var hostRef = React.useRef(null);
var handleContentSizeChange = React.useCallback(function (hostNode) {
if (multiline && onContentSizeChange && hostNode != null) {
var newHeight = hostNode.scrollHeight;
var newWidth = hostNode.scrollWidth;
if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
dimensions.current.height = newHeight;
dimensions.current.width = newWidth;
onContentSizeChange({
nativeEvent: {
contentSize: {
height: dimensions.current.height,
width: dimensions.current.width
}
}
});
}
}
}, [multiline, onContentSizeChange]);
var imperativeRef = React.useMemo(function () {
return function (hostNode) {
// TextInput needs to add more methods to the hostNode in addition to those
// added by `usePlatformMethods`. This is temporarily until an API like
// `TextInput.clear(hostRef)` is added to React Native.
if (hostNode != null) {
hostNode.clear = function () {
if (hostNode != null) {
hostNode.value = '';
}
};
hostNode.isFocused = function () {
return hostNode != null && _TextInputState.default.currentlyFocusedField() === hostNode;
};
handleContentSizeChange(hostNode);
}
};
}, [handleContentSizeChange]);
function handleBlur(e) {
_TextInputState.default._currentlyFocusedNode = null;
if (onBlur) {
e.nativeEvent.text = e.target.value;
onBlur(e);
}
}
function handleChange(e) {
var hostNode = e.target;
var text = hostNode.value;
e.nativeEvent.text = text;
handleContentSizeChange(hostNode);
if (onChange) {
onChange(e);
}
if (onChangeText) {
onChangeText(text);
}
}
function handleFocus(e) {
var hostNode = e.target;
if (onFocus) {
e.nativeEvent.text = hostNode.value;
onFocus(e);
}
if (hostNode != null) {
_TextInputState.default._currentlyFocusedNode = hostNode;
if (clearTextOnFocus) {
hostNode.value = '';
}
if (selectTextOnFocus) {
// Safari requires selection to occur in a setTimeout
setTimeout(function () {
hostNode.select();
}, 0);
}
}
}
function handleKeyDown(e) {
var hostNode = e.target; // Prevent key events bubbling (see #612)
e.stopPropagation();
var blurOnSubmitDefault = !multiline;
var shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
var nativeEvent = e.nativeEvent;
var isComposing = isEventComposing(nativeEvent);
if (onKeyPress) {
onKeyPress(e);
}
if (e.key === 'Enter' && !e.shiftKey && // Do not call submit if composition is occuring.
!isComposing && !e.isDefaultPrevented()) {
if ((blurOnSubmit || !multiline) && onSubmitEditing) {
// prevent "Enter" from inserting a newline or submitting a form
e.preventDefault();
nativeEvent.text = e.target.value;
onSubmitEditing(e);
}
if (shouldBlurOnSubmit && hostNode != null) {
hostNode.blur();
}
}
}
function handleSelectionChange(e) {
if (onSelectionChange) {
try {
var node = e.target;
var selectionStart = node.selectionStart,
selectionEnd = node.selectionEnd;
e.nativeEvent.selection = {
start: selectionStart,
end: selectionEnd
};
e.nativeEvent.text = e.target.value;
onSelectionChange(e);
} catch (e) {}
}
}
(0, _useLayoutEffect.default)(function () {
var node = hostRef.current;
if (node != null && selection != null) {
setSelection(node, selection);
}
if (document.activeElement === node) {
_TextInputState.default._currentlyFocusedNode = node;
}
}, [hostRef, selection]);
var component = multiline ? 'textarea' : 'input';
var classList = [classes.textinput];
var style = _StyleSheet.default.compose(props.style, placeholderTextColor && {
placeholderTextColor: placeholderTextColor
});
(0, _useElementLayout.default)(hostRef, onLayout);
(0, _useResponderEvents.default)(hostRef, {
onMoveShouldSetResponder: onMoveShouldSetResponder,
onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture,
onResponderEnd: onResponderEnd,
onResponderGrant: onResponderGrant,
onResponderMove: onResponderMove,
onResponderReject: onResponderReject,
onResponderRelease: onResponderRelease,
onResponderStart: onResponderStart,
onResponderTerminate: onResponderTerminate,
onResponderTerminationRequest: onResponderTerminationRequest,
onScrollShouldSetResponder: onScrollShouldSetResponder,
onScrollShouldSetResponderCapture: onScrollShouldSetResponderCapture,
onSelectionChangeShouldSetResponder: onSelectionChangeShouldSetResponder,
onSelectionChangeShouldSetResponderCapture: onSelectionChangeShouldSetResponderCapture,
onStartShouldSetResponder: onStartShouldSetResponder,
onStartShouldSetResponderCapture: onStartShouldSetResponderCapture
});
var supportedProps = pickProps(props);
supportedProps.autoCapitalize = autoCapitalize;
supportedProps.autoComplete = autoComplete || autoCompleteType || 'on';
supportedProps.autoCorrect = autoCorrect ? 'on' : 'off';
supportedProps.classList = classList; // 'auto' by default allows browsers to infer writing direction
supportedProps.dir = dir !== undefined ? dir : 'auto';
supportedProps.enterKeyHint = returnKeyType;
supportedProps.onBlur = handleBlur;
supportedProps.onChange = handleChange;
supportedProps.onFocus = handleFocus;
supportedProps.onKeyDown = handleKeyDown;
supportedProps.onSelect = handleSelectionChange;
supportedProps.readOnly = !editable;
supportedProps.rows = multiline ? numberOfLines : undefined;
supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
supportedProps.style = style;
supportedProps.type = multiline ? undefined : type;
supportedProps.inputMode = inputMode;
var platformMethodsRef = (0, _usePlatformMethods.default)(supportedProps);
var setRef = (0, _useMergeRefs.default)(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
supportedProps.ref = setRef;
return (0, _createElement.default)(component, supportedProps);
});
TextInput.displayName = 'TextInput'; // $FlowFixMe
TextInput.State = _TextInputState.default;
var classes = _css.default.create({
textinput: {
MozAppearance: 'textfield',
WebkitAppearance: 'none',
backgroundColor: 'transparent',
border: '0 solid black',
borderRadius: 0,
boxSizing: 'border-box',
font: '14px System',
margin: 0,
padding: 0,
resize: 'none'
}
});
var _default = TextInput;
exports.default = _default;
module.exports = exports.default;