@bigbinary/neetoui-rn 0.0.98 → 0.0.101
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/CheckBox.js +1 -0
- package/lib/components/Input.js +1 -1
- package/lib/components/RadioButton.js +1 -0
- package/lib/components/RichTextEditor.js +1 -1
- package/lib/components/index.js +1 -1
- package/package.json +1 -1
- package/src/components/CheckBox.js +156 -0
- package/src/components/Input.js +13 -2
- package/src/components/RadioButton.js +174 -0
- package/src/components/RichTextEditor.js +9 -14
- package/src/components/index.js +2 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CheckBox=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["selected","onSelect","checkedComponent","checkedItemProp","disabled","label","labelComponent","labelProp","labelPosition","checkboxContainerProp"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/CheckBox.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var CheckBox=function CheckBox(_ref2){var _ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?false:_ref2$selected,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$checkedComponen=_ref2.checkedComponent,checkedComponent=_ref2$checkedComponen===void 0?null:_ref2$checkedComponen,_ref2$checkedItemProp=_ref2.checkedItemProp,checkedItemProp=_ref2$checkedItemProp===void 0?{}:_ref2$checkedItemProp,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$checkboxContain=_ref2.checkboxContainerProp,checkboxContainerProp=_ref2$checkboxContain===void 0?{}:_ref2$checkboxContain,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,onPress:onSelect,opacity:disabled?0.5:1,flexDirection:"row",alignItems:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}):null,_react.default.createElement(_.Container,(0,_extends2.default)({borderColor:"background.base",borderWidth:1,borderRadius:5,justifyContent:"center",alignItems:"center",width:20,height:20},checkboxContainerProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}}),selected&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:11}},checkedComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},checkedItemProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:15}}),"\u2713"))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:9}}):null);};exports.CheckBox=CheckBox;CheckBox.propTypes={selected:_propTypes.default.bool.isRequired,onSelect:_propTypes.default.func.isRequired,disabled:_propTypes.default.bool,checkedComponent:_propTypes.default.element,checkedItemProp:_propTypes.default.object,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),checkboxContainerProp:_propTypes.default.object};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};
|
package/lib/components/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","labelStyles","containerStyles","message","error","onFocus","onBlur","inline","LeftIcon","RightIcon","brandRight","brandLeft","brandColor","brandBackground","disabled","secureTextEntry","textAlignVertical","enableFocusStyle"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/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);exports.TextInput=TextInput;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 Input=_react.default.forwardRef(function(props,ref){var _props$label=props.label,label=_props$label===void 0?"":_props$label,labelStyles=props.labelStyles,containerStyles=props.containerStyles,_props$message=props.message,message=_props$message===void 0?"":_props$message,_props$error=props.error,error=_props$error===void 0?false:_props$error,onFocus=props.onFocus,onBlur=props.onBlur,_props$inline=props.inline,inline=_props$inline===void 0?false:_props$inline,LeftIcon=props.LeftIcon,RightIcon=props.RightIcon,brandRight=props.brandRight,brandLeft=props.brandLeft,_props$brandColor=props.brandColor,brandColor=_props$brandColor===void 0?"font.grey600":_props$brandColor,_props$brandBackgroun=props.brandBackground,brandBackground=_props$brandBackgroun===void 0?"background.menubackground":_props$brandBackgroun,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$secureTextEntr=props.secureTextEntry,secureTextEntry=_props$secureTextEntr===void 0?false:_props$secureTextEntr,_props$textAlignVerti=props.textAlignVertical,textAlignVertical=_props$textAlignVerti===void 0?"top":_props$textAlignVerti,_props$enableFocusSty=props.enableFocusStyle,enableFocusStyle=_props$enableFocusSty===void 0?false:_props$enableFocusSty,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isPasswordVisible=_useState2[0],setIsPasswordVisible=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),isFocus=_useState4[0],setIsFocus=_useState4[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=enableFocusStyle&&isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=enableFocusStyle&&isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:5}},!inline&&!!label&&_react.default.createElement(LabelText,{labelStyles:labelStyles,inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:9}}),_react.default.createElement(_.Container,(0,_extends2.default)({border:!inline?"1px":"0",borderColor:borderColor,borderRadius:2},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,position:"relative"},containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:129,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:11}},_react.default.createElement(LabelText,{labelStyles:labelStyles,inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:143,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:150,columnNumber:9}},LeftIcon&&_react.default.createElement(_.Container,{alignSelf:"center",mx:"4px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:13}},_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:15}})),brandLeft&&_react.default.createElement(InputText,{text:brandLeft,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:13}}),_react.default.createElement(TextInput,(0,_extends2.default)({ref:ref,height:40,flex:1,textStyle:"subtext",editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,secureTextEntry:secureTextEntry&&!isPasswordVisible,textAlignVertical:textAlignVertical},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{text:brandRight,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:13}}),RightIcon&&_react.default.createElement(_.Container,{alignSelf:"center",mx:"4px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:13}},_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:185,columnNumber:15}})),secureTextEntry&&_react.default.createElement(_.Container,{justifyContent:"center",mx:"4px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:190,columnNumber:13}},_react.default.createElement(_reactNativeRemixIcon.default,{name:isPasswordVisible?"eye-line":"eye-off-line",color:theme.colors.background.grey500,onPress:function onPress(){return setIsPasswordVisible(!isPasswordVisible);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:15}})))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:7}}));});exports.Input=Input;var InputText=function InputText(_ref){var text=_ref.text,brandColor=_ref.brandColor,brandBackground=_ref.brandBackground;return _react.default.createElement(_.Container,{bg:brandBackground,justifyContent:"center",px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:213,columnNumber:3}},text&&_react.default.createElement(_.Typography,{color:brandColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:214,columnNumber:14}},text));};var LabelText=function LabelText(_ref2){var inline=_ref2.inline,label=_ref2.label,labelStyles=_ref2.labelStyles;return _react.default.createElement(_.Typography,(0,_extends2.default)({numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px"},labelStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:219,columnNumber:3}}),label);};var ErrorMessage=function ErrorMessage(_ref3){var error=_ref3.error,message=_ref3.message,theme=_ref3.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:7}},message);}return null;};Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string,labelStyles:_propTypes2.default.object,containerStyles:_propTypes2.default.object,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string,secureTextEntry:_propTypes2.default.bool,enableFocusStyle:_propTypes2.default.bool,LeftIcon:_propTypes2.default.func,RightIcon:_propTypes2.default.func,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string,borderColor:_propTypes2.default.string,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string,labelStyles:_propTypes2.default.object};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,px:2,fontFamily:"inter400",fontSize:"16px"};
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","labelStyles","containerStyles","message","error","onFocus","onBlur","inline","LeftIcon","RightIcon","brandRight","brandLeft","brandColor","brandBackground","disabled","secureTextEntry","textAlignVertical","enableFocusStyle"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/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);exports.TextInput=TextInput;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 Input=_react.default.forwardRef(function(props,ref){var _props$label=props.label,label=_props$label===void 0?"":_props$label,labelStyles=props.labelStyles,containerStyles=props.containerStyles,_props$message=props.message,message=_props$message===void 0?"":_props$message,_props$error=props.error,error=_props$error===void 0?false:_props$error,onFocus=props.onFocus,onBlur=props.onBlur,_props$inline=props.inline,inline=_props$inline===void 0?false:_props$inline,LeftIcon=props.LeftIcon,RightIcon=props.RightIcon,brandRight=props.brandRight,brandLeft=props.brandLeft,_props$brandColor=props.brandColor,brandColor=_props$brandColor===void 0?"font.grey600":_props$brandColor,_props$brandBackgroun=props.brandBackground,brandBackground=_props$brandBackgroun===void 0?"background.menubackground":_props$brandBackgroun,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$secureTextEntr=props.secureTextEntry,secureTextEntry=_props$secureTextEntr===void 0?false:_props$secureTextEntr,_props$textAlignVerti=props.textAlignVertical,textAlignVertical=_props$textAlignVerti===void 0?"top":_props$textAlignVerti,_props$enableFocusSty=props.enableFocusStyle,enableFocusStyle=_props$enableFocusSty===void 0?false:_props$enableFocusSty,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isPasswordVisible=_useState2[0],setIsPasswordVisible=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),height=_useState4[0],setHeight=_useState4[1];var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isFocus=_useState6[0],setIsFocus=_useState6[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=enableFocusStyle&&isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=enableFocusStyle&&isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:5}},!inline&&!!label&&_react.default.createElement(LabelText,{labelStyles:labelStyles,inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:130,columnNumber:9}}),_react.default.createElement(_.Container,(0,_extends2.default)({border:!inline?"1px":"0",borderColor:borderColor,borderRadius:2},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,position:"relative"},containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:11}},_react.default.createElement(LabelText,{labelStyles:labelStyles,inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:146,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:9}},LeftIcon&&_react.default.createElement(_.Container,{alignSelf:"center",mx:"4px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:13}},_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:15}})),brandLeft&&_react.default.createElement(InputText,{text:brandLeft,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:13}}),_react.default.createElement(TextInput,(0,_extends2.default)({ref:ref,flex:1},_reactNative.Platform.select({ios:{},android:{height:height,onContentSizeChange:function onContentSizeChange(event){setHeight(event.nativeEvent.contentSize.height);}}}),{textStyle:"subtext",editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,secureTextEntry:secureTextEntry&&!isPasswordVisible,textAlignVertical:textAlignVertical},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{text:brandRight,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:187,columnNumber:13}}),RightIcon&&_react.default.createElement(_.Container,{alignSelf:"center",mx:"4px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}},_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:15}})),secureTextEntry&&_react.default.createElement(_.Container,{justifyContent:"center",mx:"4px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:13}},_react.default.createElement(_reactNativeRemixIcon.default,{name:isPasswordVisible?"eye-line":"eye-off-line",color:theme.colors.background.grey500,onPress:function onPress(){return setIsPasswordVisible(!isPasswordVisible);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:202,columnNumber:15}})))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:7}}));});exports.Input=Input;var InputText=function InputText(_ref){var text=_ref.text,brandColor=_ref.brandColor,brandBackground=_ref.brandBackground;return _react.default.createElement(_.Container,{bg:brandBackground,justifyContent:"center",px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:3}},text&&_react.default.createElement(_.Typography,{color:brandColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:225,columnNumber:14}},text));};var LabelText=function LabelText(_ref2){var inline=_ref2.inline,label=_ref2.label,labelStyles=_ref2.labelStyles;return _react.default.createElement(_.Typography,(0,_extends2.default)({numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px"},labelStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:230,columnNumber:3}}),label);};var ErrorMessage=function ErrorMessage(_ref3){var error=_ref3.error,message=_ref3.message,theme=_ref3.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:243,columnNumber:7}},message);}return null;};Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string,labelStyles:_propTypes2.default.object,containerStyles:_propTypes2.default.object,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string,secureTextEntry:_propTypes2.default.bool,enableFocusStyle:_propTypes2.default.bool,LeftIcon:_propTypes2.default.func,RightIcon:_propTypes2.default.func,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string,borderColor:_propTypes2.default.string,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string,labelStyles:_propTypes2.default.object};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={px:2,minHeight:45,fontFamily:"inter400",fontSize:"16px"};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.RadioButton=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["radioButtonWidth","radioButtonSelectedWidth","containerBg","innerActiveBg","innerInActiveBg","onSelect","selected","density","label","labelComponent","labelProp","labelPosition","disabled"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RadioButton.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var RadioButton=function RadioButton(_ref2){var _ref2$radioButtonWidt=_ref2.radioButtonWidth,radioButtonWidth=_ref2$radioButtonWidt===void 0?20:_ref2$radioButtonWidt,_ref2$radioButtonSele=_ref2.radioButtonSelectedWidth,radioButtonSelectedWidth=_ref2$radioButtonSele===void 0?10:_ref2$radioButtonSele,_ref2$containerBg=_ref2.containerBg,containerBg=_ref2$containerBg===void 0?"background.grey":_ref2$containerBg,_ref2$innerActiveBg=_ref2.innerActiveBg,innerActiveBg=_ref2$innerActiveBg===void 0?"background.base":_ref2$innerActiveBg,_ref2$innerInActiveBg=_ref2.innerInActiveBg,innerInActiveBg=_ref2$innerInActiveBg===void 0?"background.secondary":_ref2$innerInActiveBg,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?null:_ref2$selected,_ref2$density=_ref2.density,density=_ref2$density===void 0?5:_ref2$density,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,opacity:disabled?0.5:1,onPress:onSelect,flexDirection:"row",alignItems:"center",py:1},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:9}}):null,_react.default.createElement(_.Container,{bg:containerBg,height:radioButtonWidth,width:radioButtonWidth,borderRadius:radioButtonWidth/2,justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:7}},_react.default.createElement(_.Container,{height:radioButtonSelectedWidth+density,width:radioButtonSelectedWidth+density,borderRadius:(radioButtonSelectedWidth+density)/2,bg:"background.white",justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:9}},_react.default.createElement(_.Container,{bg:selected?innerActiveBg:innerInActiveBg,height:radioButtonSelectedWidth,width:radioButtonSelectedWidth,borderRadius:radioButtonSelectedWidth/2,m:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:11}}))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:9}}):null);};exports.RadioButton=RadioButton;RadioButton.propTypes={onSelect:_propTypes.default.func.isRequired,selected:_propTypes.default.any.isRequired,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),disabled:_propTypes.default.bool,radioButtonWidth:_propTypes.default.number,radioButtonSelectedWidth:_propTypes.default.number,containerBg:_propTypes.default.string,innerActiveBg:_propTypes.default.string,innerInActiveBg:_propTypes.default.string,density:_propTypes.default.number};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:7}}),_react.default.createElement(
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:7}}),showToolbar&&_react.default.createElement(_.Container,(0,_extends2.default)({width:"100%"},rest==null?void 0:rest.toolbarWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:11}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:13}}))),_react.default.createElement(_reactNativePellRichEditor.RichEditor,(0,_extends2.default)({placeholder:placeholderText,ref:richTextRef,onChange:onChange,useContainer:false,onFocus:function onFocus(){setToolbar(true);editorProps==null?void 0:editorProps.onFocusFn();},onBlur:function onBlur(){setToolbar(false);editorProps==null?void 0:editorProps.onBlurFn();}},editorProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:9}})),children));};exports.RichTextEditor=RichTextEditor;RichTextEditor.defaultProps={editorProps:{},toolBarProps:{},toolbarWrapperStyle:{},placeholderText:"Type here..."};RichTextEditor.propTypes={onChange:_propTypes.default.func.isRequired,children:_propTypes.default.node,placeholderText:_propTypes.default.string,toolbarActions:_propTypes.default.array.isRequired,editorProps:_propTypes.default.object,toolBarProps:_propTypes.default.object};
|
package/lib/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");
|
package/package.json
CHANGED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Proptypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Container, Typography, Touchable } from "@components";
|
|
5
|
+
const LABEL_POSITIONS = ["left", "right"];
|
|
6
|
+
|
|
7
|
+
const LabelComponent = ({ label, labelComponent, labelProp }) => {
|
|
8
|
+
return labelComponent || <Typography {...labelProp}>{label}</Typography>;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
*
|
|
13
|
+
* This component supports below props categories from [styled-system ](/styled-system).
|
|
14
|
+
* <ul>
|
|
15
|
+
* <li>flexbox</li>
|
|
16
|
+
* <li>space</li>
|
|
17
|
+
* <li>border</li>
|
|
18
|
+
* <li>layout</li>
|
|
19
|
+
* <li>color</li>
|
|
20
|
+
* <li>buttonStyle</li>
|
|
21
|
+
* </ul>
|
|
22
|
+
*
|
|
23
|
+
* ## Usage
|
|
24
|
+
* ```js
|
|
25
|
+
* import * as React from "react";
|
|
26
|
+
* import { Container, CheckBox, Typography } from "@bigbinary/neetoui-rn";
|
|
27
|
+
*
|
|
28
|
+
* export default function Main() {
|
|
29
|
+
* const [selected, setSelected] = React.useState(false);
|
|
30
|
+
*
|
|
31
|
+
*
|
|
32
|
+
* return (
|
|
33
|
+
* <Container>
|
|
34
|
+
* <Container flexDirection="row" my={2}>
|
|
35
|
+
* <CheckBox
|
|
36
|
+
* selected={selected}
|
|
37
|
+
* onSelect={() => setSelected(!selected)}
|
|
38
|
+
* checkedComponent={
|
|
39
|
+
* <Container width={10} height={10} bg="background.base" />
|
|
40
|
+
* }
|
|
41
|
+
* label="Agree"
|
|
42
|
+
* />
|
|
43
|
+
* </Container>
|
|
44
|
+
* </Container>
|
|
45
|
+
* );
|
|
46
|
+
* }
|
|
47
|
+
* ```
|
|
48
|
+
*
|
|
49
|
+
*/
|
|
50
|
+
|
|
51
|
+
export const CheckBox = ({
|
|
52
|
+
selected = false,
|
|
53
|
+
onSelect = () => {},
|
|
54
|
+
checkedComponent = null,
|
|
55
|
+
checkedItemProp = {},
|
|
56
|
+
disabled = false,
|
|
57
|
+
label = "Option",
|
|
58
|
+
labelComponent = null,
|
|
59
|
+
labelProp = {},
|
|
60
|
+
labelPosition = "right",
|
|
61
|
+
checkboxContainerProp = {},
|
|
62
|
+
...rest
|
|
63
|
+
}) => {
|
|
64
|
+
return (
|
|
65
|
+
<Touchable
|
|
66
|
+
disabled={disabled}
|
|
67
|
+
onPress={onSelect}
|
|
68
|
+
opacity={disabled ? 0.5 : 1}
|
|
69
|
+
flexDirection="row"
|
|
70
|
+
alignItems="center"
|
|
71
|
+
{...rest}
|
|
72
|
+
>
|
|
73
|
+
{labelPosition === LABEL_POSITIONS[0] ? (
|
|
74
|
+
<LabelComponent
|
|
75
|
+
label={label}
|
|
76
|
+
labelComponent={labelComponent}
|
|
77
|
+
labelProp={{ mr: 2, ...labelProp }}
|
|
78
|
+
/>
|
|
79
|
+
) : null}
|
|
80
|
+
<Container
|
|
81
|
+
borderColor="background.base"
|
|
82
|
+
borderWidth={1}
|
|
83
|
+
borderRadius={5}
|
|
84
|
+
justifyContent="center"
|
|
85
|
+
alignItems="center"
|
|
86
|
+
width={20}
|
|
87
|
+
height={20}
|
|
88
|
+
{...checkboxContainerProp}
|
|
89
|
+
>
|
|
90
|
+
{selected && (
|
|
91
|
+
<Container>
|
|
92
|
+
{checkedComponent || (
|
|
93
|
+
<Typography {...checkedItemProp}>✓</Typography>
|
|
94
|
+
)}
|
|
95
|
+
</Container>
|
|
96
|
+
)}
|
|
97
|
+
</Container>
|
|
98
|
+
{labelPosition === LABEL_POSITIONS[1] ? (
|
|
99
|
+
<LabelComponent
|
|
100
|
+
label={label}
|
|
101
|
+
labelComponent={labelComponent}
|
|
102
|
+
labelProp={{ ml: 2, ...labelProp }}
|
|
103
|
+
/>
|
|
104
|
+
) : null}
|
|
105
|
+
</Touchable>
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
CheckBox.propTypes = {
|
|
110
|
+
/**
|
|
111
|
+
* Whether checkbox is selected.
|
|
112
|
+
*/
|
|
113
|
+
selected: Proptypes.bool.isRequired,
|
|
114
|
+
/**
|
|
115
|
+
* Function to execute on press.
|
|
116
|
+
*/
|
|
117
|
+
onSelect: Proptypes.func.isRequired,
|
|
118
|
+
/**
|
|
119
|
+
* To disable the component.
|
|
120
|
+
*/
|
|
121
|
+
disabled: Proptypes.bool,
|
|
122
|
+
/**
|
|
123
|
+
* Render custom checked component.
|
|
124
|
+
*/
|
|
125
|
+
checkedComponent: Proptypes.element,
|
|
126
|
+
/**
|
|
127
|
+
* Check mark style.
|
|
128
|
+
*/
|
|
129
|
+
checkedItemProp: Proptypes.object,
|
|
130
|
+
/**
|
|
131
|
+
* Text label to be shown with radio button.
|
|
132
|
+
*/
|
|
133
|
+
label: Proptypes.string,
|
|
134
|
+
/**
|
|
135
|
+
* Props for the label.
|
|
136
|
+
*/
|
|
137
|
+
labelProp: Proptypes.object,
|
|
138
|
+
/**
|
|
139
|
+
* Label can passed as a component as well.
|
|
140
|
+
*/
|
|
141
|
+
labelComponent: Proptypes.element,
|
|
142
|
+
/**
|
|
143
|
+
* Position of label relative to the radio button. It can be either `left` or `right`
|
|
144
|
+
*/
|
|
145
|
+
labelPosition: Proptypes.oneOf(LABEL_POSITIONS),
|
|
146
|
+
/**
|
|
147
|
+
* Extra param to customize checkbox container
|
|
148
|
+
*/
|
|
149
|
+
checkboxContainerProp: Proptypes.object,
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
LabelComponent.propTypes = {
|
|
153
|
+
label: Proptypes.string,
|
|
154
|
+
labelComponent: Proptypes.element,
|
|
155
|
+
labelProp: Proptypes.object,
|
|
156
|
+
};
|
package/src/components/Input.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable react/display-name */
|
|
1
2
|
import React, { useContext, useState } from "react";
|
|
2
3
|
import {
|
|
3
4
|
flexbox,
|
|
@@ -9,6 +10,7 @@ import {
|
|
|
9
10
|
layout,
|
|
10
11
|
} from "styled-system";
|
|
11
12
|
import Icon from "react-native-remix-icon";
|
|
13
|
+
import { Platform } from "react-native";
|
|
12
14
|
import styled, { ThemeContext } from "styled-components/native";
|
|
13
15
|
import propTypes from "@styled-system/prop-types";
|
|
14
16
|
import PropTypes from "prop-types";
|
|
@@ -84,6 +86,7 @@ export const Input = React.forwardRef((props, ref) => {
|
|
|
84
86
|
|
|
85
87
|
const theme = useContext(ThemeContext);
|
|
86
88
|
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
|
|
89
|
+
const [height, setHeight] = useState(0);
|
|
87
90
|
const [isFocus, setIsFocus] = useState(false);
|
|
88
91
|
const borderColor = error
|
|
89
92
|
? theme.colors.border.danger
|
|
@@ -162,8 +165,16 @@ export const Input = React.forwardRef((props, ref) => {
|
|
|
162
165
|
)}
|
|
163
166
|
<TextInput
|
|
164
167
|
ref={ref}
|
|
165
|
-
height={40}
|
|
166
168
|
flex={1}
|
|
169
|
+
{...Platform.select({
|
|
170
|
+
ios: {},
|
|
171
|
+
android: {
|
|
172
|
+
height,
|
|
173
|
+
onContentSizeChange: event => {
|
|
174
|
+
setHeight(event.nativeEvent.contentSize.height);
|
|
175
|
+
},
|
|
176
|
+
},
|
|
177
|
+
})}
|
|
167
178
|
textStyle="subtext"
|
|
168
179
|
editable={!disabled}
|
|
169
180
|
color={error ? theme.colors.font.danger : theme.colors.font.primary}
|
|
@@ -324,8 +335,8 @@ ErrorMessage.propTypes = {
|
|
|
324
335
|
};
|
|
325
336
|
|
|
326
337
|
TextInput.defaultProps = {
|
|
327
|
-
height: 40,
|
|
328
338
|
px: 2,
|
|
339
|
+
minHeight: 45,
|
|
329
340
|
fontFamily: "inter400",
|
|
330
341
|
fontSize: "16px",
|
|
331
342
|
};
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Container, Touchable, Typography } from "@components";
|
|
5
|
+
const LABEL_POSITIONS = ["left", "right"];
|
|
6
|
+
|
|
7
|
+
const LabelComponent = ({ label, labelComponent, labelProp }) => {
|
|
8
|
+
return labelComponent || <Typography {...labelProp}>{label}</Typography>;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
*
|
|
13
|
+
* This component supports below props categories from [styled-system ](/styled-system).
|
|
14
|
+
* <ul>
|
|
15
|
+
* <li>flexbox</li>
|
|
16
|
+
* <li>space</li>
|
|
17
|
+
* <li>border</li>
|
|
18
|
+
* <li>layout</li>
|
|
19
|
+
* <li>color</li>
|
|
20
|
+
* <li>buttonStyle</li>
|
|
21
|
+
* </ul>
|
|
22
|
+
*
|
|
23
|
+
* ## Usage
|
|
24
|
+
* ```js
|
|
25
|
+
* import * as React from "react";
|
|
26
|
+
* import { Container, RadioButton } from "@bigbinary/neetoui-rn";
|
|
27
|
+
*
|
|
28
|
+
* export default function Main() {
|
|
29
|
+
* const [selected, setSelected] = useState(false);
|
|
30
|
+
*
|
|
31
|
+
* return (
|
|
32
|
+
* <Container>
|
|
33
|
+
* <RadioButton
|
|
34
|
+
* selected={selected}
|
|
35
|
+
* onSelect={() => setSelected(!selected)}
|
|
36
|
+
* label="option label 1"
|
|
37
|
+
* labelPosition="left"
|
|
38
|
+
* />
|
|
39
|
+
* </Container>
|
|
40
|
+
* );
|
|
41
|
+
* }
|
|
42
|
+
* ```
|
|
43
|
+
*
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
export const RadioButton = ({
|
|
47
|
+
radioButtonWidth = 20,
|
|
48
|
+
radioButtonSelectedWidth = 10,
|
|
49
|
+
containerBg = "background.grey",
|
|
50
|
+
innerActiveBg = "background.base",
|
|
51
|
+
innerInActiveBg = "background.secondary",
|
|
52
|
+
onSelect = () => {},
|
|
53
|
+
selected = null,
|
|
54
|
+
density = 5,
|
|
55
|
+
label = "Option",
|
|
56
|
+
labelComponent = null,
|
|
57
|
+
labelProp = {},
|
|
58
|
+
labelPosition = "right",
|
|
59
|
+
disabled = false,
|
|
60
|
+
...rest
|
|
61
|
+
}) => {
|
|
62
|
+
return (
|
|
63
|
+
<Touchable
|
|
64
|
+
disabled={disabled}
|
|
65
|
+
opacity={disabled ? 0.5 : 1}
|
|
66
|
+
onPress={onSelect}
|
|
67
|
+
flexDirection="row"
|
|
68
|
+
alignItems="center"
|
|
69
|
+
py={1}
|
|
70
|
+
{...rest}
|
|
71
|
+
>
|
|
72
|
+
{labelPosition === LABEL_POSITIONS[0] ? (
|
|
73
|
+
<LabelComponent
|
|
74
|
+
label={label}
|
|
75
|
+
labelComponent={labelComponent}
|
|
76
|
+
labelProp={{ mr: 2, ...labelProp }}
|
|
77
|
+
/>
|
|
78
|
+
) : null}
|
|
79
|
+
<Container
|
|
80
|
+
bg={containerBg}
|
|
81
|
+
height={radioButtonWidth}
|
|
82
|
+
width={radioButtonWidth}
|
|
83
|
+
borderRadius={radioButtonWidth / 2}
|
|
84
|
+
justifyContent="center"
|
|
85
|
+
alignItems="center"
|
|
86
|
+
>
|
|
87
|
+
<Container
|
|
88
|
+
height={radioButtonSelectedWidth + density}
|
|
89
|
+
width={radioButtonSelectedWidth + density}
|
|
90
|
+
borderRadius={(radioButtonSelectedWidth + density) / 2}
|
|
91
|
+
bg="background.white"
|
|
92
|
+
justifyContent="center"
|
|
93
|
+
alignItems="center"
|
|
94
|
+
>
|
|
95
|
+
<Container
|
|
96
|
+
bg={selected ? innerActiveBg : innerInActiveBg}
|
|
97
|
+
height={radioButtonSelectedWidth}
|
|
98
|
+
width={radioButtonSelectedWidth}
|
|
99
|
+
borderRadius={radioButtonSelectedWidth / 2}
|
|
100
|
+
m={1}
|
|
101
|
+
/>
|
|
102
|
+
</Container>
|
|
103
|
+
</Container>
|
|
104
|
+
{labelPosition === LABEL_POSITIONS[1] ? (
|
|
105
|
+
<LabelComponent
|
|
106
|
+
label={label}
|
|
107
|
+
labelComponent={labelComponent}
|
|
108
|
+
labelProp={{ ml: 2, ...labelProp }}
|
|
109
|
+
/>
|
|
110
|
+
) : null}
|
|
111
|
+
</Touchable>
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
RadioButton.propTypes = {
|
|
116
|
+
/**
|
|
117
|
+
* Function to execute on press.
|
|
118
|
+
*/
|
|
119
|
+
onSelect: PropTypes.func.isRequired,
|
|
120
|
+
/**
|
|
121
|
+
* Whether radio is selected.
|
|
122
|
+
*/
|
|
123
|
+
selected: PropTypes.any.isRequired,
|
|
124
|
+
/**
|
|
125
|
+
* Text label to be shown with radio button.
|
|
126
|
+
*/
|
|
127
|
+
label: PropTypes.string,
|
|
128
|
+
/**
|
|
129
|
+
* Props for the label.
|
|
130
|
+
*/
|
|
131
|
+
labelProp: PropTypes.object,
|
|
132
|
+
/**
|
|
133
|
+
* Label can passed as a component as well.
|
|
134
|
+
*/
|
|
135
|
+
labelComponent: PropTypes.element,
|
|
136
|
+
/**
|
|
137
|
+
* Position of label relative to the radio button. It can be either `left` or `right`
|
|
138
|
+
*/
|
|
139
|
+
labelPosition: PropTypes.oneOf(LABEL_POSITIONS),
|
|
140
|
+
/**
|
|
141
|
+
* Whether radio is disabled.
|
|
142
|
+
*/
|
|
143
|
+
disabled: PropTypes.bool,
|
|
144
|
+
/**
|
|
145
|
+
* Size of radio button.
|
|
146
|
+
*/
|
|
147
|
+
radioButtonWidth: PropTypes.number,
|
|
148
|
+
/**
|
|
149
|
+
* Size of radio button when selected.
|
|
150
|
+
*/
|
|
151
|
+
radioButtonSelectedWidth: PropTypes.number,
|
|
152
|
+
/**
|
|
153
|
+
* Background color of radio button.
|
|
154
|
+
*/
|
|
155
|
+
containerBg: PropTypes.string,
|
|
156
|
+
/**
|
|
157
|
+
* Color of radio button when selected.
|
|
158
|
+
*/
|
|
159
|
+
innerActiveBg: PropTypes.string,
|
|
160
|
+
/**
|
|
161
|
+
* Color of radio button when not selected.
|
|
162
|
+
*/
|
|
163
|
+
innerInActiveBg: PropTypes.string,
|
|
164
|
+
/**
|
|
165
|
+
* Thickness of radio button container component.
|
|
166
|
+
*/
|
|
167
|
+
density: PropTypes.number,
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
LabelComponent.propTypes = {
|
|
171
|
+
label: PropTypes.string,
|
|
172
|
+
labelComponent: PropTypes.element,
|
|
173
|
+
labelProp: PropTypes.object,
|
|
174
|
+
};
|
|
@@ -92,6 +92,15 @@ export const RichTextEditor = ({
|
|
|
92
92
|
return (
|
|
93
93
|
<>
|
|
94
94
|
<ScrollView {...rest?.editorWrapperStyle}>
|
|
95
|
+
{showToolbar && (
|
|
96
|
+
<Container width="100%" {...rest?.toolbarWrapperStyle}>
|
|
97
|
+
<RichToolbar
|
|
98
|
+
editor={richTextRef}
|
|
99
|
+
actions={computeToolbarActions()}
|
|
100
|
+
{...toolBarProps}
|
|
101
|
+
/>
|
|
102
|
+
</Container>
|
|
103
|
+
)}
|
|
95
104
|
<RichEditor
|
|
96
105
|
placeholder={placeholderText}
|
|
97
106
|
ref={richTextRef}
|
|
@@ -110,20 +119,6 @@ export const RichTextEditor = ({
|
|
|
110
119
|
|
|
111
120
|
{children}
|
|
112
121
|
</ScrollView>
|
|
113
|
-
{showToolbar && (
|
|
114
|
-
<Container
|
|
115
|
-
bottom={keyboardHeight}
|
|
116
|
-
position="absolute"
|
|
117
|
-
width="100%"
|
|
118
|
-
{...rest?.toolbarWrapperStyle}
|
|
119
|
-
>
|
|
120
|
-
<RichToolbar
|
|
121
|
-
editor={richTextRef}
|
|
122
|
-
actions={computeToolbarActions()}
|
|
123
|
-
{...toolBarProps}
|
|
124
|
-
/>
|
|
125
|
-
</Container>
|
|
126
|
-
)}
|
|
127
122
|
</>
|
|
128
123
|
);
|
|
129
124
|
};
|
package/src/components/index.js
CHANGED