@bigbinary/neetoui-rn 0.0.232 → 0.0.234
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/components/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireWildcard(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _theme=require("../theme");var _utils=require("../utils/utils");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder","showInputAccessoryView","textAlignVertical","containerProps"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(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;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(_ref){var _rest$inputProps,_rest$inputProps2;var label=_ref.label,_ref$value=_ref.value,value=_ref$value===void 0?"":_ref$value,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onBlur=_ref.onBlur,_onBlur=_ref$onBlur===void 0?function(){}:_ref$onBlur,_ref$errorMessage=_ref.errorMessage,errorMessage=_ref$errorMessage===void 0?null:_ref$errorMessage,PrefixIcon=_ref.PrefixIcon,SuffixIcon=_ref.SuffixIcon,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$noBorder=_ref.noBorder,noBorder=_ref$noBorder===void 0?false:_ref$noBorder,_ref$showInputAccesso=_ref.showInputAccessoryView,showInputAccessoryView=_ref$showInputAccesso===void 0?true:_ref$showInputAccesso,_ref$textAlignVertica=_ref.textAlignVertical,textAlignVertical=_ref$textAlignVertica===void 0?"top":_ref$textAlignVertica,containerProps=_ref.containerProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(Math.floor(animatedController._value)===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple500:colors.border.grey400,borderWidth:errorMessage||isFocused?(0,_reactNativeSizeMatters.moderateScale)(1.5):(0,_reactNativeSizeMatters.moderateScale)(1)});},[]);var labelStyles={paddingLeft:(0,_utils.isAndroid)()?(0,_reactNativeSizeMatters.moderateScale)(4):0,fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[(0,_reactNativeSizeMatters.moderateScale)(17),(0,_reactNativeSizeMatters.moderateScale)(13)]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[(0,_reactNativeSizeMatters.moderateScale)(16),(0,_reactNativeSizeMatters.moderateScale)(6)]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(label){if(!value)handleLabelAnimation(isFocused);if(!noBorder)handleStyles(isFocused);}};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:7}},_react.default.createElement(View,(0,_extends2.default)({alignItems:"center",borderColor:errorMessage?"border.danger":"border.grey400",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:noBorder?0:(0,_reactNativeSizeMatters.moderateScale)(1),flexDirection:"row",justifyContent:"space-between",overflow:"hidden",ref:containerRef},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:9}}),!!PrefixIcon&&_react.default.createElement(View,{pl:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:13}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:204,columnNumber:15}})),_react.default.createElement(View,{flex:1,left:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:11}},!!label&&_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",style:labelStyles,zIndex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:15}},label),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"sentences",autoFocus:autoFocus,color:disabled?"font.grey500":"font.primary",editable:!disabled,fontSize:(0,_reactNativeSizeMatters.moderateScale)(17),inputAccessoryViewID:label,paddingVertical:0,pb:(0,_reactNativeSizeMatters.moderateScale)(8),pt:label?(0,_reactNativeSizeMatters.moderateScale)(22):(0,_reactNativeSizeMatters.moderateScale)(12),ref:inputRef,returnKeyType:(_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline?"default":"done",textAlignVertical:textAlignVertical,top:0,value:value,zIndex:2,onChangeText:onChangeText,onBlur:function onBlur(){_onBlur();handleFocusBlur(false);},onFocus:function onFocus(){handleFocusBlur(true);}},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:13}})),((_rest$inputProps2=rest.inputProps)==null?void 0:_rest$inputProps2.multiline)&&showInputAccessoryView&&_reactNative.Platform.OS==="ios"&&_react.default.createElement(_reactNative.InputAccessoryView,{nativeID:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:247,columnNumber:17}},_react.default.createElement(_.Container,{alignItems:"center",bg:"background.white",flexDirection:"row",justifyContent:"flex-end",p:(0,_reactNativeSizeMatters.moderateScale)(2),pr:(0,_reactNativeSizeMatters.moderateScale)(20),width:width,__self:_this,__source:{fileName:_jsxFileName,lineNumber:248,columnNumber:19}},_react.default.createElement(_.Button,{height:(0,_reactNativeSizeMatters.moderateScale)(30),label:"Done",labelStyle:styles.doneButtonStyle,left:(0,_reactNativeSizeMatters.moderateScale)(10),variant:"text",onPress:function onPress(){_reactNative.Keyboard.dismiss();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:257,columnNumber:21}})))),!!SuffixIcon&&_react.default.createElement(View,{px:(0,_reactNativeSizeMatters.moderateScale)(2),__self:_this,__source:{fileName:_jsxFileName,lineNumber:272,columnNumber:13}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:273,columnNumber:15}})))),!!errorMessage&&_react.default.createElement(Typography,{color:"font.danger",pt:(0,_reactNativeSizeMatters.moderateScale)(2),__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,onBlur:_propTypes.default.func,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType,noBorder:_propTypes.default.bool,containerProps:_propTypes.default.object,textAlignVertical:_propTypes.default.oneOf(["auto","top","bottom","center"]),showInputAccessoryView:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireWildcard(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _theme=require("../theme");var _utils=require("../utils/utils");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder","showInputAccessoryView","textAlignVertical","containerProps"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(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;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(_ref){var _rest$inputProps,_rest$inputProps2,_rest$inputProps3;var label=_ref.label,_ref$value=_ref.value,value=_ref$value===void 0?"":_ref$value,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onBlur=_ref.onBlur,_onBlur=_ref$onBlur===void 0?function(){}:_ref$onBlur,_ref$errorMessage=_ref.errorMessage,errorMessage=_ref$errorMessage===void 0?null:_ref$errorMessage,PrefixIcon=_ref.PrefixIcon,SuffixIcon=_ref.SuffixIcon,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$noBorder=_ref.noBorder,noBorder=_ref$noBorder===void 0?false:_ref$noBorder,_ref$showInputAccesso=_ref.showInputAccessoryView,showInputAccessoryView=_ref$showInputAccesso===void 0?true:_ref$showInputAccesso,_ref$textAlignVertica=_ref.textAlignVertical,textAlignVertical=_ref$textAlignVertica===void 0?"top":_ref$textAlignVertica,containerProps=_ref.containerProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(Math.floor(animatedController._value)===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();};var moderateScale=function moderateScale(scaleFactor){return Math.floor((0,_reactNativeSizeMatters.moderateScale)(scaleFactor));};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple500:colors.border.grey400,borderWidth:errorMessage||isFocused?moderateScale(1.5):moderateScale(1)});},[]);var labelStyles={zIndex:100,paddingLeft:(0,_utils.isAndroid)()?moderateScale(4):0,fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[moderateScale(17),moderateScale(13)]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[moderateScale(15),moderateScale(6)]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(label){if(!value)handleLabelAnimation(isFocused);if(!noBorder)handleStyles(isFocused);}};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:187,columnNumber:7}},_react.default.createElement(View,(0,_extends2.default)({alignItems:"center",borderColor:errorMessage?"border.danger":"border.grey400",borderRadius:moderateScale(8),borderWidth:noBorder?0:moderateScale(1),flexDirection:"row",justifyContent:"space-between",overflow:"hidden",ref:containerRef},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:194,columnNumber:9}}),!!PrefixIcon&&_react.default.createElement(View,{pl:moderateScale(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:206,columnNumber:13}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:15}})),_react.default.createElement(View,{flex:1,left:moderateScale(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:11}},!!label&&_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",style:labelStyles,zIndex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:15}},label),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"sentences",autoFocus:autoFocus,color:disabled?"font.grey500":"font.primary",editable:!disabled,fontSize:moderateScale(17),inputAccessoryViewID:label,paddingRight:moderateScale(20),paddingVertical:0,pb:moderateScale(4),pt:!label?moderateScale(5):0,ref:inputRef,returnKeyType:(_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline?"default":"done",textAlignVertical:textAlignVertical,top:0,value:value,zIndex:2,style:{marginTop:label?moderateScale(22):0,marginBottom:(_rest$inputProps2=rest.inputProps)!=null&&_rest$inputProps2.multiline?moderateScale(10):0},onChangeText:onChangeText,onBlur:function onBlur(){_onBlur();handleFocusBlur(false);},onFocus:function onFocus(){handleFocusBlur(true);}},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:13}})),((_rest$inputProps3=rest.inputProps)==null?void 0:_rest$inputProps3.multiline)&&showInputAccessoryView&&_reactNative.Platform.OS==="ios"&&_react.default.createElement(_reactNative.InputAccessoryView,{nativeID:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:257,columnNumber:17}},_react.default.createElement(_.Container,{alignItems:"center",bg:"background.white",flexDirection:"row",justifyContent:"flex-end",p:moderateScale(2),pr:moderateScale(20),width:width,__self:_this,__source:{fileName:_jsxFileName,lineNumber:258,columnNumber:19}},_react.default.createElement(_.Button,{height:moderateScale(30),label:"Done",labelStyle:styles.doneButtonStyle,left:moderateScale(10),variant:"text",onPress:function onPress(){_reactNative.Keyboard.dismiss();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:21}})))),!!SuffixIcon&&_react.default.createElement(View,{pr:moderateScale(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:282,columnNumber:13}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:283,columnNumber:15}})))),!!errorMessage&&_react.default.createElement(Typography,{color:"font.danger",pt:moderateScale(2),__self:_this,__source:{fileName:_jsxFileName,lineNumber:289,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,onBlur:_propTypes.default.func,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType,noBorder:_propTypes.default.bool,containerProps:_propTypes.default.object,textAlignVertical:_propTypes.default.oneOf(["auto","top","bottom","center"]),showInputAccessoryView:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(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;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var SearchBar=function SearchBar(_ref){var _ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?"Search":_ref$placeholder,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onCancel=_ref.onCancel,onCancel=_ref$onCancel===void 0?function(){}:_ref$onCancel,_ref$debounceDelay=_ref.debounceDelay,debounceDelay=_ref$debounceDelay===void 0?1000:_ref$debounceDelay,_ref$showCancelButton=_ref.showCancelButton,showCancelButton=_ref$showCancelButton===void 0?true:_ref$showCancelButton,containerProps=_ref.containerProps,searchbarProps=_ref.searchbarProps;var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText.trim(),Number(debounceDelay));var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(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;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var _Dimensions$get=_reactNative.Dimensions.get("window"),screenWidth=_Dimensions$get.width;var buttonSize=(0,_reactNativeSizeMatters.moderateScale)(screenWidth*0.19);var SearchBar=function SearchBar(_ref){var _ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?"Search":_ref$placeholder,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onCancel=_ref.onCancel,onCancel=_ref$onCancel===void 0?function(){}:_ref$onCancel,_ref$debounceDelay=_ref.debounceDelay,debounceDelay=_ref$debounceDelay===void 0?1000:_ref$debounceDelay,_ref$showCancelButton=_ref.showCancelButton,showCancelButton=_ref$showCancelButton===void 0?true:_ref$showCancelButton,containerProps=_ref.containerProps,searchbarProps=_ref.searchbarProps;var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText.trim(),Number(debounceDelay));var buttonWidth=(0,_reactNativeReanimated.useSharedValue)(0);var buttonOpacity=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){buttonWidth.value=(0,_reactNativeReanimated.withTiming)(val,{easing:_reactNativeReanimated.Easing.linear,duration:200});buttonOpacity.value=(0,_reactNativeReanimated.withTiming)(val,{easing:_reactNativeReanimated.Easing.linear,duration:100});};var cancelButtonStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{width:(0,_reactNativeReanimated.interpolate)(buttonWidth.value,[0,1],[0,buttonSize]),opacity:buttonOpacity.value};};_f._closure={interpolate:_reactNativeReanimated.interpolate,buttonWidth:buttonWidth,buttonSize:buttonSize,buttonOpacity:buttonOpacity};_f.asString="function _f(){const{interpolate,buttonWidth,buttonSize,buttonOpacity}=jsThis._closure;{return{width:interpolate(buttonWidth.value,[0,1],[0,buttonSize]),opacity:buttonOpacity.value};}}";_f.__workletHash=14021668969407;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.jsx (96:45)";_f.__optimalization=3;return _f;}());var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:5}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",borderColor:_theme.theme.colors.border.grey400,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),flex:1,flexDirection:"row",height:(0,_reactNativeSizeMatters.moderateScale)(42)},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:9}}),_react.default.createElement(_.Container,{px:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{color:_theme.theme.colors.font.grey600,name:"ri-search-line",size:(0,_reactNativeSizeMatters.moderateScale)(20),__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:13}})),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"none",color:"font.primary",flex:1,fontSize:(0,_reactNativeSizeMatters.moderateScale)(16),padding:0,placeholder:placeholder,placeholderTextColor:_theme.theme.colors.font.grey600,ref:inputRef,returnKeyType:"search",value:searchText,onChangeText:setSearchText,onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},onFocus:function onFocus(){animateSearchInput(1);}},searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}})))),showCancelButton&&_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.cancelButtonWrapper,cancelButtonStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:9}},_react.default.createElement(_.Touchable,{flexGrow:1,height:(0,_reactNativeSizeMatters.moderateScale)(42),justifyContent:"center",px:(0,_reactNativeSizeMatters.moderateScale)(8),onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:11}},_react.default.createElement(_.Typography,{fontFamily:_theme.theme.fonts.sf500,numberOfLines:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:13}},"Cancel"))));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({cancelButtonWrapper:{alignItems:"flex-end",justifyContent:"center"}});SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object,onCancel:_propTypes.default.func,showCancelButton:_propTypes.default.bool,containerProps:_propTypes.default.object};
|
package/package.json
CHANGED
package/src/components/Input.jsx
CHANGED
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "react-native";
|
|
11
11
|
|
|
12
12
|
import PropTypes from "prop-types";
|
|
13
|
-
import { moderateScale } from "react-native-size-matters";
|
|
13
|
+
import { moderateScale as scaleItem } from "react-native-size-matters";
|
|
14
14
|
import styled, { ThemeContext } from "styled-components/native";
|
|
15
15
|
import {
|
|
16
16
|
flexbox,
|
|
@@ -146,6 +146,8 @@ export const Input = ({
|
|
|
146
146
|
}).start();
|
|
147
147
|
};
|
|
148
148
|
|
|
149
|
+
const moderateScale = scaleFactor => Math.floor(scaleItem(scaleFactor));
|
|
150
|
+
|
|
149
151
|
const handleStyles = useCallback(isFocused => {
|
|
150
152
|
containerRef.current &&
|
|
151
153
|
containerRef.current.setNativeProps({
|
|
@@ -160,6 +162,7 @@ export const Input = ({
|
|
|
160
162
|
}, []);
|
|
161
163
|
|
|
162
164
|
const labelStyles = {
|
|
165
|
+
zIndex: 100,
|
|
163
166
|
paddingLeft: isAndroid() ? moderateScale(4) : 0,
|
|
164
167
|
fontSize: animatedController.interpolate({
|
|
165
168
|
inputRange: [0, 1],
|
|
@@ -167,7 +170,7 @@ export const Input = ({
|
|
|
167
170
|
}),
|
|
168
171
|
top: animatedController.interpolate({
|
|
169
172
|
inputRange: [0, 1],
|
|
170
|
-
outputRange: [moderateScale(
|
|
173
|
+
outputRange: [moderateScale(15), moderateScale(6)],
|
|
171
174
|
}),
|
|
172
175
|
};
|
|
173
176
|
|
|
@@ -200,7 +203,7 @@ export const Input = ({
|
|
|
200
203
|
{...containerProps}
|
|
201
204
|
>
|
|
202
205
|
{!!PrefixIcon && (
|
|
203
|
-
<View pl={moderateScale(
|
|
206
|
+
<View pl={moderateScale(10)}>
|
|
204
207
|
<PrefixIcon />
|
|
205
208
|
</View>
|
|
206
209
|
)}
|
|
@@ -222,15 +225,22 @@ export const Input = ({
|
|
|
222
225
|
editable={!disabled}
|
|
223
226
|
fontSize={moderateScale(17)}
|
|
224
227
|
inputAccessoryViewID={label}
|
|
228
|
+
paddingRight={moderateScale(20)}
|
|
225
229
|
paddingVertical={0}
|
|
226
|
-
pb={moderateScale(
|
|
227
|
-
pt={label ? moderateScale(
|
|
230
|
+
pb={moderateScale(4)}
|
|
231
|
+
pt={!label ? moderateScale(5) : 0}
|
|
228
232
|
ref={inputRef}
|
|
229
233
|
returnKeyType={rest.inputProps?.multiline ? "default" : "done"}
|
|
230
234
|
textAlignVertical={textAlignVertical}
|
|
231
235
|
top={0}
|
|
232
236
|
value={value}
|
|
233
237
|
zIndex={2}
|
|
238
|
+
style={{
|
|
239
|
+
marginTop: label ? moderateScale(22) : 0,
|
|
240
|
+
marginBottom: rest.inputProps?.multiline
|
|
241
|
+
? moderateScale(10)
|
|
242
|
+
: 0,
|
|
243
|
+
}}
|
|
234
244
|
onChangeText={onChangeText}
|
|
235
245
|
onBlur={() => {
|
|
236
246
|
onBlur();
|
|
@@ -269,7 +279,7 @@ export const Input = ({
|
|
|
269
279
|
)}
|
|
270
280
|
</View>
|
|
271
281
|
{!!SuffixIcon && (
|
|
272
|
-
<View
|
|
282
|
+
<View pr={moderateScale(10)}>
|
|
273
283
|
<SuffixIcon />
|
|
274
284
|
</View>
|
|
275
285
|
)}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Dimensions, TouchableWithoutFeedback, StyleSheet } from "react-native";
|
|
3
3
|
|
|
4
4
|
import PropTypes from "prop-types";
|
|
5
|
+
import Animated, {
|
|
6
|
+
Easing,
|
|
7
|
+
interpolate,
|
|
8
|
+
useAnimatedStyle,
|
|
9
|
+
useSharedValue,
|
|
10
|
+
withTiming,
|
|
11
|
+
} from "react-native-reanimated";
|
|
5
12
|
import Icon from "react-native-remix-icon";
|
|
6
13
|
import { moderateScale } from "react-native-size-matters";
|
|
7
14
|
import styled from "styled-components/native";
|
|
@@ -14,7 +21,7 @@ import {
|
|
|
14
21
|
color,
|
|
15
22
|
} from "styled-system";
|
|
16
23
|
|
|
17
|
-
import { Container,
|
|
24
|
+
import { Container, Touchable, Typography } from "@components";
|
|
18
25
|
import { useDebounce } from "@hooks";
|
|
19
26
|
import { theme } from "@theme";
|
|
20
27
|
|
|
@@ -49,6 +56,9 @@ const TextInput = styled.TextInput`
|
|
|
49
56
|
* ```
|
|
50
57
|
*/
|
|
51
58
|
|
|
59
|
+
const { width: screenWidth } = Dimensions.get("window");
|
|
60
|
+
const buttonSize = moderateScale(screenWidth * 0.19);
|
|
61
|
+
|
|
52
62
|
export const SearchBar = ({
|
|
53
63
|
placeholder = "Search",
|
|
54
64
|
onChangeText = () => {},
|
|
@@ -64,32 +74,29 @@ export const SearchBar = ({
|
|
|
64
74
|
searchText.trim(),
|
|
65
75
|
Number(debounceDelay)
|
|
66
76
|
);
|
|
67
|
-
const
|
|
68
|
-
const
|
|
77
|
+
const buttonWidth = useSharedValue(0);
|
|
78
|
+
const buttonOpacity = useSharedValue(0);
|
|
69
79
|
|
|
70
80
|
useEffect(() => {
|
|
71
81
|
onChangeText(debouncedSearchTextValue);
|
|
72
82
|
}, [debouncedSearchTextValue, onChangeText]);
|
|
73
83
|
|
|
74
84
|
const animateSearchInput = val => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
useNativeDriver: false,
|
|
85
|
-
}),
|
|
86
|
-
]).start();
|
|
85
|
+
buttonWidth.value = withTiming(val, {
|
|
86
|
+
easing: Easing.linear,
|
|
87
|
+
duration: 200,
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
buttonOpacity.value = withTiming(val, {
|
|
91
|
+
easing: Easing.linear,
|
|
92
|
+
duration: 100,
|
|
93
|
+
});
|
|
87
94
|
};
|
|
88
95
|
|
|
89
|
-
const
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
});
|
|
96
|
+
const cancelButtonStyle = useAnimatedStyle(() => ({
|
|
97
|
+
width: interpolate(buttonWidth.value, [0, 1], [0, buttonSize]),
|
|
98
|
+
opacity: buttonOpacity.value,
|
|
99
|
+
}));
|
|
93
100
|
|
|
94
101
|
const onCancelHandle = () => {
|
|
95
102
|
animateSearchInput(0);
|
|
@@ -117,7 +124,7 @@ export const SearchBar = ({
|
|
|
117
124
|
height={moderateScale(42)}
|
|
118
125
|
{...containerProps}
|
|
119
126
|
>
|
|
120
|
-
<Container px={moderateScale(
|
|
127
|
+
<Container px={moderateScale(8)}>
|
|
121
128
|
<Icon
|
|
122
129
|
color={theme.colors.font.grey600}
|
|
123
130
|
name="ri-search-line"
|
|
@@ -129,6 +136,7 @@ export const SearchBar = ({
|
|
|
129
136
|
color="font.primary"
|
|
130
137
|
flex={1}
|
|
131
138
|
fontSize={moderateScale(16)}
|
|
139
|
+
padding={0}
|
|
132
140
|
placeholder={placeholder}
|
|
133
141
|
placeholderTextColor={theme.colors.font.grey600}
|
|
134
142
|
ref={inputRef}
|
|
@@ -146,27 +154,31 @@ export const SearchBar = ({
|
|
|
146
154
|
</Container>
|
|
147
155
|
</TouchableWithoutFeedback>
|
|
148
156
|
{showCancelButton && (
|
|
149
|
-
<Animated.View
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}}
|
|
156
|
-
>
|
|
157
|
-
<Button
|
|
158
|
-
height={moderateScale(20)}
|
|
159
|
-
label="Cancel"
|
|
160
|
-
labelStyle={{ mx: 0 }}
|
|
161
|
-
variant="text"
|
|
157
|
+
<Animated.View style={[styles.cancelButtonWrapper, cancelButtonStyle]}>
|
|
158
|
+
<Touchable
|
|
159
|
+
flexGrow={1}
|
|
160
|
+
height={moderateScale(42)}
|
|
161
|
+
justifyContent="center"
|
|
162
|
+
px={moderateScale(8)}
|
|
162
163
|
onPress={onCancelHandle}
|
|
163
|
-
|
|
164
|
+
>
|
|
165
|
+
<Typography fontFamily={theme.fonts.sf500} numberOfLines={1}>
|
|
166
|
+
Cancel
|
|
167
|
+
</Typography>
|
|
168
|
+
</Touchable>
|
|
164
169
|
</Animated.View>
|
|
165
170
|
)}
|
|
166
171
|
</Container>
|
|
167
172
|
);
|
|
168
173
|
};
|
|
169
174
|
|
|
175
|
+
const styles = StyleSheet.create({
|
|
176
|
+
cancelButtonWrapper: {
|
|
177
|
+
alignItems: "flex-end",
|
|
178
|
+
justifyContent: "center",
|
|
179
|
+
},
|
|
180
|
+
});
|
|
181
|
+
|
|
170
182
|
SearchBar.propTypes = {
|
|
171
183
|
/**
|
|
172
184
|
* Set the placeholder text
|