@tra-tech/react-native-kitra
Version:
UI kit for React Native
236 lines (234 loc) • 11.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _utilities = require("../../utilities");
var _KitraProvider = require("../../core/KitraProvider");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const AnimatedTextInput = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.TextInput);
const TextInput = _ref => {
let {
theme,
typography,
inputStyle,
editable = true,
size = 'medium',
helperText = '',
variant = 'filled',
labelContainerStyle,
containerStyle,
count = false,
onChangeText,
label,
inputContainerStyle,
labelStyle,
helperTextStyle,
error = false,
errorMessage,
left,
right,
labelColor = {
focus: theme === null || theme === void 0 ? void 0 : theme.primary,
default: theme === null || theme === void 0 ? void 0 : theme.primary
},
onFocus,
onEndEditing,
...props
} = _ref;
const inputRef = (0, _react.useRef)(null);
const [counts, setCounts] = (0, _react.useState)(0);
const textInputOffset = (0, _reactNativeReanimated.useSharedValue)(props.defaultValue || props.placeholder || props.value ? 0 : 1);
const fontStyles = {
large: typography === null || typography === void 0 ? void 0 : typography.body.regular,
medium: typography === null || typography === void 0 ? void 0 : typography.body.sregular,
small: typography === null || typography === void 0 ? void 0 : typography.body.xsregular
};
const sizeStyles = {
large: {
padding: 15,
height: 51
},
medium: {
padding: 12,
height: 42
},
small: {
padding: 10,
height: 36
}
};
const labelStyles = {
large: {
focused: typography === null || typography === void 0 ? void 0 : typography.body.regular,
default: typography === null || typography === void 0 ? void 0 : typography.body.sregular
},
medium: {
focused: typography === null || typography === void 0 ? void 0 : typography.body.sregular,
default: typography === null || typography === void 0 ? void 0 : typography.body.xsregular
},
small: {
focused: typography === null || typography === void 0 ? void 0 : typography.body.xsregular,
default: typography === null || typography === void 0 ? void 0 : typography.body.xxsregular
}
};
// label'ın konum ve fontsize animasyonu
const labelPositionAnimation = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const topInterpolate = (0, _reactNativeReanimated.interpolate)(textInputOffset.value, [0, 1], [variant === 'filled' ? 2 : -labelStyles[size].focused.lineHeight + labelStyles[size].focused.lineHeight / 2, sizeStyles[size].padding]);
return {
top: topInterpolate
};
});
const borderAnimation = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const topInterpolate = (0, _reactNativeReanimated.interpolateColor)(textInputOffset.value, [0, 1], [(theme === null || theme === void 0 ? void 0 : theme.primary) || '#000000', (theme === null || theme === void 0 ? void 0 : theme.grey) || '#FFFFFF']);
return {
borderColor: topInterpolate
};
});
const labelFontAnimation = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const fontSize = (0, _reactNativeReanimated.interpolate)(textInputOffset.value, [0, 1], [labelStyles[size].default.fontSize, labelStyles[size].focused.fontSize]);
const lineHeight = (0, _reactNativeReanimated.interpolate)(textInputOffset.value, [0, 1], [labelStyles[size].default.lineHeight, labelStyles[size].focused.lineHeight]);
const color = (0, _reactNativeReanimated.interpolateColor)(textInputOffset.value, [0, 1],
// @ts-ignore
[error ? theme === null || theme === void 0 ? void 0 : theme.error : labelColor.focus || '#000000', error ? theme === null || theme === void 0 ? void 0 : theme.error : labelColor.default || '#FFFFFF']);
return {
fontSize,
lineHeight,
color
};
});
(0, _react.useEffect)(() => {
var _props$defaultValue2;
if (props.value) {
var _props$value, _props$value2, _props$value3, _props$defaultValue;
setCounts((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.length ? (_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.length : 0);
textInputOffset.value = (_props$value3 = props.value) !== null && _props$value3 !== void 0 && _props$value3.length || (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 && _props$defaultValue.length ? (0, _reactNativeReanimated.withTiming)(0) : (0, _reactNativeReanimated.withTiming)(1);
} else if (!((_props$defaultValue2 = props.defaultValue) !== null && _props$defaultValue2 !== void 0 && _props$defaultValue2.length)) {
textInputOffset.value = (0, _reactNativeReanimated.withTiming)(1);
}
}, [props.value]);
(0, _react.useEffect)(() => {
setCounts(props.defaultValue ? props.defaultValue.length : 0);
}, []);
const onFocusInput = () => {
textInputOffset.value = (0, _reactNativeReanimated.withTiming)(0);
};
const onEndEditingInput = () => {
textInputOffset.value = counts === 0 ? (0, _reactNativeReanimated.withTiming)(1) : (0, _reactNativeReanimated.withTiming)(0);
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [{
flexGrow: 1,
maxHeight: sizeStyles[size].height
}, containerStyle]
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [{
opacity: editable ? 1 : 0.5,
borderRadius: 5,
borderWidth: 1,
height: sizeStyles[size].height,
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white
},
// @ts-ignore
borderAnimation, inputContainerStyle, error && {
backgroundColor: (0, _utilities.opacity)(theme === null || theme === void 0 ? void 0 : theme.error, 15)
}]
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flex: 1,
flexDirection: 'row',
height: sizeStyles[size].height
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
alignSelf: 'center',
marginLeft: sizeStyles[size].padding,
marginRight: 5
}
}, left && left), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flex: 1,
flexDirection: 'row'
}
}, /*#__PURE__*/_react.default.createElement(AnimatedTextInput, _extends({
ref: inputRef,
editable: editable,
style: [{
marginTop: fontStyles[size].lineHeight / 2,
fontSize: fontStyles[size].fontSize,
fontFamily: labelStyles[size].default.fontFamily,
lineHeight: fontStyles[size].lineHeight,
flexDirection: 'row',
flex: 1
}, inputStyle],
onChangeText: event => {
setCounts((event === null || event === void 0 ? void 0 : event.length) || 0);
onChangeText && onChangeText(event);
},
onFocus: x => {
onFocusInput();
onFocus === null || onFocus === void 0 ? void 0 : onFocus(x);
},
onEndEditing: x => {
onEndEditingInput();
onEndEditing === null || onEndEditing === void 0 ? void 0 : onEndEditing(x);
}
}, props)), label ? /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [{
position: 'absolute',
paddingHorizontal: 4,
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white
}, labelContainerStyle, error && {
backgroundColor: (0, _utilities.opacity)((theme === null || theme === void 0 ? void 0 : theme.error) || 'transparent', 0)
}, labelPositionAnimation]
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => {
var _inputRef$current;
return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
},
activeOpacity: 0.9
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Text, {
style: [{
color: theme === null || theme === void 0 ? void 0 : theme.primary,
fontFamily: labelStyles[size].default.fontFamily
}, labelStyle, labelFontAnimation]
}, label))) : null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
alignSelf: 'center',
marginRight: sizeStyles[size].padding,
marginLeft: 5
}
}, right && right))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.helperContainer, {
flexDirection: 'row',
display: error || !!helperText || count ? 'flex' : 'none',
alignSelf: 'stretch'
}]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: [labelStyles[size].default, helperTextStyle, {
color: error ? theme === null || theme === void 0 ? void 0 : theme.error : (helperTextStyle === null || helperTextStyle === void 0 ? void 0 : helperTextStyle.color) || (theme === null || theme === void 0 ? void 0 : theme.grey)
}]
}, error ? `${errorMessage || ''}` : `${helperText}`), count ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: [labelStyles[size].default, helperTextStyle, {
color: error ? theme === null || theme === void 0 ? void 0 : theme.error : (helperTextStyle === null || helperTextStyle === void 0 ? void 0 : helperTextStyle.color) || (theme === null || theme === void 0 ? void 0 : theme.grey)
}]
}, `${counts}/${props.maxLength}`) : null));
};
const styles = _reactNative.StyleSheet.create({
inputContainer: {
alignItems: 'center'
},
helperContainer: {
flexDirection: 'row',
paddingHorizontal: 5,
justifyContent: 'space-between'
}
});
var _default = (0, _KitraProvider.applyDefaults)(TextInput);
exports.default = _default;
//# sourceMappingURL=TextInput.js.map