@bigbinary/neetoui-rn 0.0.141 → 0.0.142
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 +1 -1
- package/package.json +1 -1
- package/src/components/Input.js +19 -5
package/lib/components/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});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 _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _excluded=["label","value","onChangeText","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.js";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(props){var _rest$inputProps;var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,rest=(0,_objectWithoutProperties2.default)(props,_excluded);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
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});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 _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _excluded=["label","value","onChangeText","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.js";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(props){var _rest$inputProps;var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$noBorder=props.noBorder,noBorder=_props$noBorder===void 0?false:_props$noBorder,rest=(0,_objectWithoutProperties2.default)(props,_excluded);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(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();inputRef.current&&inputRef.current.setNativeProps({style:{top:isFocused?10:0}});};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?1.5:1});},[]);var labelStyles={fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[17,13]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[16,6]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(!value)handleLabelAnimation(isFocused);if(!noBorder)handleStyles(isFocused);};return _react.default.createElement(View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:5}},_react.default.createElement(View,(0,_extends2.default)({ref:containerRef,borderRadius:8,borderWidth:noBorder?0:1,borderColor:errorMessage?"border.danger":"border.grey400",alignItems:"center",flexDirection:"row",justifyContent:"space-between"},!(rest!=null&&(_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline)&&{height:58},{__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:7}}),!!PrefixIcon&&_react.default.createElement(View,{pl:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:11}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:13}})),_react.default.createElement(View,{flex:1,left:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:181,columnNumber:9}},_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",zIndex:1,style:labelStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:11}},label),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:value,onChangeText:onChangeText,autoFocus:autoFocus,editable:!disabled,onFocus:function onFocus(){handleFocusBlur(true);},onBlur:function onBlur(){handleFocusBlur(false);},color:disabled?"font.grey500":"font.primary",fontSize:17,py:3,pr:3,top:0,zIndex:2,autoCapitalize:"none"},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:190,columnNumber:11}}))),!!SuffixIcon&&_react.default.createElement(View,{px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:213,columnNumber:11}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:214,columnNumber:13}}))),!!errorMessage&&_react.default.createElement(Typography,{py:2,color:"font.danger",__self:_this,__source:{fileName:_jsxFileName,lineNumber:219,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType,noBorder:_propTypes.default.bool};
|
package/package.json
CHANGED
package/src/components/Input.js
CHANGED
|
@@ -90,6 +90,7 @@ export const Input = props => {
|
|
|
90
90
|
SuffixIcon,
|
|
91
91
|
autoFocus = false,
|
|
92
92
|
disabled = false,
|
|
93
|
+
noBorder = false,
|
|
93
94
|
...rest
|
|
94
95
|
} = props;
|
|
95
96
|
|
|
@@ -99,13 +100,22 @@ export const Input = props => {
|
|
|
99
100
|
const animatedController = useRef(new Animated.Value(0)).current;
|
|
100
101
|
|
|
101
102
|
useEffect(() => {
|
|
102
|
-
if (autoFocus
|
|
103
|
+
if (autoFocus) {
|
|
103
104
|
handleLabelAnimation(true);
|
|
104
105
|
} else {
|
|
105
106
|
handleLabelAnimation(false);
|
|
106
107
|
}
|
|
107
|
-
|
|
108
|
-
|
|
108
|
+
}, [autoFocus]);
|
|
109
|
+
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
if (value) {
|
|
112
|
+
if (animatedController._value === 0) {
|
|
113
|
+
handleLabelAnimation(true);
|
|
114
|
+
}
|
|
115
|
+
} else {
|
|
116
|
+
handleLabelAnimation(false);
|
|
117
|
+
}
|
|
118
|
+
}, [value]);
|
|
109
119
|
|
|
110
120
|
const handleLabelAnimation = isFocused => {
|
|
111
121
|
Animated.timing(animatedController, {
|
|
@@ -148,7 +158,7 @@ export const Input = props => {
|
|
|
148
158
|
|
|
149
159
|
const handleFocusBlur = isFocused => {
|
|
150
160
|
if (!value) handleLabelAnimation(isFocused);
|
|
151
|
-
handleStyles(isFocused);
|
|
161
|
+
if (!noBorder) handleStyles(isFocused);
|
|
152
162
|
};
|
|
153
163
|
|
|
154
164
|
return (
|
|
@@ -156,7 +166,7 @@ export const Input = props => {
|
|
|
156
166
|
<View
|
|
157
167
|
ref={containerRef}
|
|
158
168
|
borderRadius={8}
|
|
159
|
-
borderWidth={1}
|
|
169
|
+
borderWidth={noBorder ? 0 : 1}
|
|
160
170
|
borderColor={errorMessage ? "border.danger" : "border.grey400"}
|
|
161
171
|
alignItems="center"
|
|
162
172
|
flexDirection="row"
|
|
@@ -247,4 +257,8 @@ Input.propTypes = {
|
|
|
247
257
|
* Display Icon component to the Right of input.
|
|
248
258
|
*/
|
|
249
259
|
SuffixIcon: PropTypes.elementType,
|
|
260
|
+
/**
|
|
261
|
+
* Takes a boolean value based on which border is hidden/shown.
|
|
262
|
+
*/
|
|
263
|
+
noBorder: PropTypes.bool,
|
|
250
264
|
};
|