reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
145 lines (140 loc) • 4.29 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', {
value: true,
});
exports.default = WidgetTextInput;
var _react = _interopRequireWildcard(require('react'));
var _reactNative = require('react-native');
var _reactNativeReanimated = _interopRequireWildcard(require('react-native-reanimated'));
var _styles = require('../../../styles');
var _utils = require('../../../utils');
function _interopRequireWildcard(e, t) {
if ('function' == typeof WeakMap)
var r = new WeakMap(),
n = new WeakMap();
return (_interopRequireWildcard = function (e, t) {
if (!t && e && e.__esModule) return e;
var o,
i,
f = { __proto__: null, default: e };
if (null === e || ('object' != typeof e && 'function' != typeof e)) return f;
if ((o = t ? n : r)) {
if (o.has(e)) return o.get(e);
o.set(e, f);
}
for (const t in e)
'default' !== t &&
{}.hasOwnProperty.call(e, t) &&
((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set)
? o(f, t, i)
: (f[t] = e[t]));
return f;
})(e, t);
}
function _extends() {
return (
(_extends = Object.assign
? Object.assign.bind()
: function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}),
_extends.apply(null, arguments)
);
}
_reactNativeReanimated.default.addWhitelistedNativeProps({
text: true,
});
const AnimatedTextInput = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.TextInput);
function WidgetTextInput(props) {
const {
textValue,
decimal = false,
textKeyboard = false,
title,
label,
inputStyle,
textStyle,
inputProps,
onEndEditing,
} = props;
const inputRef = (0, _reactNativeReanimated.useAnimatedRef)();
const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(
() => ({
text: textValue.value,
defaultValue: textValue.value,
}),
[textValue],
);
const submit = e => {
// @ts-expect-error `text` doesn't exist on BlurEvent (It does)
const text = e.nativeEvent.text;
// number input mode
if (decimal || !textKeyboard) {
const number = parseFloat(text);
if (typeof number !== 'number' || isNaN(number) || !isFinite(number)) {
textValue.value = '';
return;
}
}
onEndEditing(text);
};
(0, _react.useEffect)(() => {
const hideSubscription = _reactNative.Keyboard.addListener('keyboardDidHide', () => {
if (inputRef.current) {
inputRef.current.blur();
}
});
return () => {
hideSubscription.remove();
};
}, []);
// For web platform only
(0, _reactNativeReanimated.useDerivedValue)(() => {
if (!_utils.isWeb || !inputRef.current) return;
// @ts-expect-error value doesn't exist
inputRef.current.value = textValue.value;
}, [textValue]);
return /*#__PURE__*/ _react.default.createElement(
_reactNative.View,
{
style: _styles.styles.inputsContainer,
},
/*#__PURE__*/ _react.default.createElement(
AnimatedTextInput,
_extends(
{
ref: inputRef,
style: [_styles.styles.input, inputStyle],
maxLength: decimal ? 4 : textKeyboard ? 9 : 3, // length example: Alpha (1.55), RGB (255), Hue (360), Brightness (100), hex (#00000000)
onEndEditing: submit,
onBlur: _utils.isWeb ? submit : undefined,
enterKeyHint: 'enter',
returnKeyType: 'done',
keyboardType: decimal ? 'decimal-pad' : textKeyboard ? 'default' : 'number-pad',
inputMode: decimal ? 'decimal' : textKeyboard ? 'text' : 'numeric',
autoComplete: 'off',
autoCorrect: false,
autoFocus: false,
accessibilityLabel: label,
},
inputProps,
{
selectTextOnFocus: !textKeyboard,
animatedProps: animatedProps,
},
),
),
/*#__PURE__*/ _react.default.createElement(
_reactNative.Text,
{
style: [_styles.styles.inputTitle, textStyle],
accessibilityLabel: label,
},
title,
),
);
}