@bigbinary/neetoui-rn 0.0.208 → 0.0.210
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/index.d.ts +44 -13
- package/lib/components/NotificationPreferenceList.js +1 -0
- package/lib/components/OrganizationItem.js +1 -0
- package/lib/components/Popover.js +1 -1
- package/lib/components/index.js +1 -1
- package/package.json +1 -1
- package/src/components/NotificationPreferenceList.js +157 -0
- package/src/components/OrganizationItem.js +124 -0
- package/src/components/Popover.js +2 -1
- package/src/components/index.js +2 -0
package/index.d.ts
CHANGED
|
@@ -67,11 +67,11 @@ const theme: {
|
|
|
67
67
|
|
|
68
68
|
interface StyleProps
|
|
69
69
|
extends FlexboxProps,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
SpaceProps,
|
|
71
|
+
BorderProps,
|
|
72
|
+
ColorProps,
|
|
73
|
+
LayoutProps,
|
|
74
|
+
PositionProps {
|
|
75
75
|
borderColor?: typeof theme.colors.border;
|
|
76
76
|
borderTopColor?: typeof theme.colors.border;
|
|
77
77
|
borderBottomColor?: typeof theme.colors.border;
|
|
@@ -95,11 +95,11 @@ interface TextProps extends RNTextProps, StyleProps, TypographyProps {
|
|
|
95
95
|
}
|
|
96
96
|
interface TextInputProps
|
|
97
97
|
extends RNTextInputAndroidProps,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
interface FlatListProps extends RNFlatListProps, StyleProps {}
|
|
102
|
-
interface ScrollViewProps extends RNScrollViewProps, StyleProps {}
|
|
98
|
+
RNTextInputIOSProps,
|
|
99
|
+
StyleProps,
|
|
100
|
+
TypographyProps { }
|
|
101
|
+
interface FlatListProps extends RNFlatListProps, StyleProps { }
|
|
102
|
+
interface ScrollViewProps extends RNScrollViewProps, StyleProps { }
|
|
103
103
|
interface TouchableProps extends RippleProps, StyleProps, ButtonStyleProps {
|
|
104
104
|
children?: React.ReactNode;
|
|
105
105
|
}
|
|
@@ -219,7 +219,7 @@ type CarouselProps = {
|
|
|
219
219
|
renderItem: () => React.ReactNode;
|
|
220
220
|
carouselRef?: React.RefObject<Carousel>;
|
|
221
221
|
onSnapToItem?: (index: number) => void;
|
|
222
|
-
containerStyle: ViewProps
|
|
222
|
+
containerStyle: ViewProps;
|
|
223
223
|
};
|
|
224
224
|
|
|
225
225
|
interface CheckBoxProps extends TouchableProps {
|
|
@@ -294,6 +294,20 @@ interface ListItemProps extends ViewProps {
|
|
|
294
294
|
RightComponent: React.FC;
|
|
295
295
|
}
|
|
296
296
|
|
|
297
|
+
type NotificationPreferenceListItem = {
|
|
298
|
+
label: string;
|
|
299
|
+
enabled: boolean;
|
|
300
|
+
onSwitch: (item: any, index: number) => void;
|
|
301
|
+
LeftIcon?: React.FC;
|
|
302
|
+
};
|
|
303
|
+
interface NotificationPreferenceListProps extends ViewProps {
|
|
304
|
+
data: Array<NotificationPreferenceListItem>;
|
|
305
|
+
itemWrapperProps?: ViewProps;
|
|
306
|
+
itemContainerProps?: ViewProps;
|
|
307
|
+
labelContainerProps?: ViewProps;
|
|
308
|
+
labelProps?: TypographyProps;
|
|
309
|
+
}
|
|
310
|
+
|
|
297
311
|
interface MultiSelectProps extends ViewProps {
|
|
298
312
|
options?: Array<any>;
|
|
299
313
|
label?: string;
|
|
@@ -336,6 +350,17 @@ type OnBoardingProps = {
|
|
|
336
350
|
logoWidth?: number;
|
|
337
351
|
};
|
|
338
352
|
|
|
353
|
+
interface OrganizationItemProps extends ViewProps {
|
|
354
|
+
label?: string;
|
|
355
|
+
name: string;
|
|
356
|
+
containerProps?: ViewProps;
|
|
357
|
+
iconContainerProps?: ViewProps;
|
|
358
|
+
iconProps?: { size: number; color: typeof theme.colors.font; name: string };
|
|
359
|
+
textContainerProps?: ViewProps;
|
|
360
|
+
labelProps?: TypographyProps;
|
|
361
|
+
nameProps?: TypographyProps;
|
|
362
|
+
}
|
|
363
|
+
|
|
339
364
|
type OtpInputsProps = {
|
|
340
365
|
handleChange: (value: string) => void;
|
|
341
366
|
numberOfInputs: number;
|
|
@@ -353,11 +378,15 @@ interface ParentViewProps extends ViewProps {
|
|
|
353
378
|
bottomInset?: boolean;
|
|
354
379
|
shouldDismissKeyboardOnTap?: boolean;
|
|
355
380
|
}
|
|
356
|
-
|
|
381
|
+
interface PopoverItemProps {
|
|
382
|
+
Icon?: React.FC;
|
|
383
|
+
label?: string;
|
|
384
|
+
labelProps?: TypographyProps
|
|
385
|
+
}
|
|
357
386
|
type RNPopoverProps = typeof RNPopover.propTypes;
|
|
358
387
|
interface PopoverProps extends RNPopoverProps {
|
|
359
388
|
children?: React.ReactNode;
|
|
360
|
-
data?: Array<
|
|
389
|
+
data?: Array<PopoverItemProps>;
|
|
361
390
|
fontFamily?: typeof theme.fonts;
|
|
362
391
|
fontSize?: typeof theme.fontSizes;
|
|
363
392
|
}
|
|
@@ -454,8 +483,10 @@ export const FlashList: React.FC<FlashListProps>;
|
|
|
454
483
|
export const FlatList: React.FC<FlatListProps>;
|
|
455
484
|
export const Input: React.FC<InputProps>;
|
|
456
485
|
export const ListItem: React.FC<ListItemProps>;
|
|
486
|
+
export const NotificationPreferenceList: React.FC<NotificationPreferenceListProps>;
|
|
457
487
|
export const MultiSelect: React.FC<MultiSelectProps>;
|
|
458
488
|
export const OnBoarding: React.FC<OnBoardingProps>;
|
|
489
|
+
export const OrganizationItem: React.FC<OrganizationItemProps>;
|
|
459
490
|
export const OtpInputs: React.FC<OtpInputsProps>;
|
|
460
491
|
export const ParentView: React.FC<ParentViewProps>;
|
|
461
492
|
export const Popover: React.FC<PopoverProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.NotificationPreferenceList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["data","itemWrapperProps","itemContainerProps","labelContainerProps","labelProps"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/NotificationPreferenceList.js";var NotificationPreferenceList=function NotificationPreferenceList(props){var data=props.data,itemWrapperProps=props.itemWrapperProps,itemContainerProps=props.itemContainerProps,labelContainerProps=props.labelContainerProps,labelProps=props.labelProps,rest=(0,_objectWithoutProperties2.default)(props,_excluded);return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:8},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:5}}),data==null?void 0:data.map(function(item,index){var label=item.label,enabled=item.enabled,onSwitch=item.onSwitch,LeftIcon=item.LeftIcon;var isLastItem=index===data.length-1;return _react.default.createElement(_.Container,(0,_extends2.default)({key:index,px:12},itemWrapperProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:11}}),_react.default.createElement(_.Container,(0,_extends2.default)({py:15,flexDirection:"row",alignItems:"center",justifyContent:"space-between"},itemContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:13}}),_react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center",width:"85%",pr:15},labelContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:101,columnNumber:15}}),LeftIcon&&_react.default.createElement(_.Container,{mr:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:19}},_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:21}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey800",fontSize:"l",fontFamily:"sf400"},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:17}}),label)),_react.default.createElement(_.ToggleSwitch,{value:enabled,onValueChange:function onValueChange(){return onSwitch(item,index);},mt:4,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:15}})),!isLastItem&&_react.default.createElement(_.Divider,{bg:"background.grey300",__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:29}}));}));};exports.NotificationPreferenceList=NotificationPreferenceList;NotificationPreferenceList.propTypes={data:_propTypes.default.array.isRequired,itemWrapperProps:_propTypes.default.object,itemContainerProps:_propTypes.default.object,labelContainerProps:_propTypes.default.object,labelProps:_propTypes.default.object};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OrganizationItem=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _native=require("styled-components/native");var _excluded=["label","name","containerProps","iconContainerProps","iconProps","textContainerProps","labelProps","nameProps"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OrganizationItem.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 OrganizationItem=function OrganizationItem(props){var label=props.label,name=props.name,containerProps=props.containerProps,iconContainerProps=props.iconContainerProps,iconProps=props.iconProps,textContainerProps=props.textContainerProps,labelProps=props.labelProps,nameProps=props.nameProps,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",width:"100%",px:16,py:12,borderRadius:6,alignItems:"center",justifyContent:"space-between"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"flex-start"},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:7}}),_react.default.createElement(_.Container,(0,_extends2.default)({mr:9},iconContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:9}}),_react.default.createElement(_reactNativeRemixIcon.default,(0,_extends2.default)({size:20,color:theme.colors.font.grey800,name:"building-line"},iconProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1},textContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:9}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey800",fontSize:"l",fontFamily:"sf500"},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:11}}),label||"Organization"),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey",fontSize:"m",fontFamily:"sf500",mt:"8px"},nameProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:11}}),name))));};exports.OrganizationItem=OrganizationItem;OrganizationItem.propTypes={label:_propTypes.default.string,name:_propTypes.default.string.isRequired,containerProps:_propTypes.default.object,iconContainerProps:_propTypes.default.object,iconProps:_propTypes.default.object,textContainerProps:_propTypes.default.object,labelProps:_propTypes.default.object,nameProps:_propTypes.default.object};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TouchableOpacity=exports.Popover=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePopoverView=_interopRequireDefault(require("react-native-popover-view"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _=require("./");var _excluded=["children","data","fontFamily","fontSize"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Popover.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 TouchableOpacity=_native.default.TouchableOpacity(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.flexbox,_styledSystem.layout);exports.TouchableOpacity=TouchableOpacity;var PopOverItem=function PopOverItem(_ref){var item=_ref.item,onPress=_ref.onPress,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize;var Icon=item.Icon,label=item.label,labelProps=item.labelProps;return _react.default.createElement(TouchableOpacity,{onPress:onPress,flexDirection:"row",p:2,px:3,alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}},_react.default.createElement(Icon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:29,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({px:2,fontSize:fontSize,fontColor:"font.primary",fontFamily:fontFamily},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),label));};PopOverItem.propTypes={item:_propTypes.default.object,onPress:_propTypes.default.func,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["3xs","2xs","xs","s","m","l","xl","2xl","3xl","4xl","5xl"])])};var Popover=function Popover(_ref2){var children=_ref2.children,data=_ref2.data,_ref2$fontFamily=_ref2.fontFamily,fontFamily=_ref2$fontFamily===void 0?null:_ref2$fontFamily,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?"l":_ref2$fontSize,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var popoverRef=(0,_react.useRef)();var onPressItemRef=(0,_react.useRef)(function(){});return _react.default.createElement(_reactNativePopoverView.default,(0,_extends2.default)({ref:popoverRef,popoverStyle:styles.popoverStyle,onOpenStart:function onOpenStart(){onPressItemRef.current=function(){};},onCloseComplete:function onCloseComplete(){return onPressItemRef.current();}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:5}}),data==null?void 0:data.map(function(item,index){return _react.default.createElement(PopOverItem,{key:index,item:item,fontFamily:fontFamily,fontSize:fontSize,onPress:function onPress(){var _popoverRef$current;popoverRef==null?void 0:(_popoverRef$current=popoverRef.current)==null?void 0:_popoverRef$current.setState({isVisible:false});onPressItemRef.current=item.onPress;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:11}});}),children);};exports.Popover=Popover;Popover.propTypes={children:_propTypes.default.node,data:_propTypes.default.array,fontFamily:_propTypes.default.string,fontSize:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.oneOf(["xs","s","m","l","xl","xxl"])])};var styles=_reactNative.StyleSheet.create({popoverStyle:{borderRadius:15,padding:5}});
|
package/lib/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"AnimatedImage",{enumerable:true,get:function get(){return _AnimatedImage.AnimatedImage;}});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,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});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,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});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,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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 _SocialButton=require("./SocialButton");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");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");var _AnimatedImage=require("./AnimatedImage");
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"AnimatedImage",{enumerable:true,get:function get(){return _AnimatedImage.AnimatedImage;}});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,"BottomTabBar",{enumerable:true,get:function get(){return _BottomTabBar.BottomTabBar;}});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,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlashList",{enumerable:true,get:function get(){return _FlashList.FlashList;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"NotificationPreferenceList",{enumerable:true,get:function get(){return _NotificationPreferenceList.NotificationPreferenceList;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});Object.defineProperty(exports,"OrganizationItem",{enumerable:true,get:function get(){return _OrganizationItem.OrganizationItem;}});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,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentedTopBar",{enumerable:true,get:function get(){return _SegmentedTopBar.SegmentedTopBar;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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 _SocialButton=require("./SocialButton");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");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentedTopBar=require("./SegmentedTopBar");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");var _FlashList=require("./FlashList");var _BottomTabBar=require("./BottomTabBar");var _AnimatedImage=require("./AnimatedImage");var _NotificationPreferenceList=require("./NotificationPreferenceList");var _OrganizationItem=require("./OrganizationItem");
|
package/package.json
CHANGED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
|
|
4
|
+
import { Container, Typography, Divider, ToggleSwitch } from "@components";
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
*
|
|
8
|
+
* Buttons are touchable elements used to interact with the screen and to trigger an action.
|
|
9
|
+
*
|
|
10
|
+
* <div class="screenshots">
|
|
11
|
+
* <img src="screenshots/notificationPreferenceList/notificationPreferenceList.png" />
|
|
12
|
+
* </div>
|
|
13
|
+
*
|
|
14
|
+
* ## Usage
|
|
15
|
+
* ```js
|
|
16
|
+
* import * as React from 'react';
|
|
17
|
+
* import { Container, NotificationPreferenceList } from '@bigbinary/neetoui-rn';
|
|
18
|
+
*
|
|
19
|
+
* export default function Main() {
|
|
20
|
+
* const [data, setData] = useState([]);
|
|
21
|
+
*
|
|
22
|
+
* const handleSwitch = (item, index) => {
|
|
23
|
+
* setData(prevData => {
|
|
24
|
+
* const newData = [...prevData];
|
|
25
|
+
* newData[index].enabled = !newData[index].enabled;
|
|
26
|
+
* return newData;
|
|
27
|
+
* });
|
|
28
|
+
* };
|
|
29
|
+
|
|
30
|
+
* useEffect(() => {
|
|
31
|
+
* setData([
|
|
32
|
+
* {
|
|
33
|
+
* label: "Preference 1",
|
|
34
|
+
* enabled: true,
|
|
35
|
+
* onSwitch: handleSwitch,
|
|
36
|
+
* },
|
|
37
|
+
* {
|
|
38
|
+
* label: "Preference 2",
|
|
39
|
+
* enabled: true,
|
|
40
|
+
* onSwitch: handleSwitch,
|
|
41
|
+
* },
|
|
42
|
+
* {
|
|
43
|
+
* label: "Preference 3",
|
|
44
|
+
* enabled: false,
|
|
45
|
+
* onSwitch: handleSwitch,
|
|
46
|
+
* },
|
|
47
|
+
* {
|
|
48
|
+
* label: "Preference 4",
|
|
49
|
+
* enabled: false,
|
|
50
|
+
* onSwitch: handleSwitch,
|
|
51
|
+
* },
|
|
52
|
+
* {
|
|
53
|
+
* label: "Preference 5",
|
|
54
|
+
* enabled: false,
|
|
55
|
+
* onSwitch: handleSwitch,
|
|
56
|
+
* LeftIcon: () => (
|
|
57
|
+
* <Icon
|
|
58
|
+
* name="ri-notification-2-line"
|
|
59
|
+
* size={20}
|
|
60
|
+
* color={theme.colors.font.secondary}
|
|
61
|
+
* />
|
|
62
|
+
* ),
|
|
63
|
+
* },
|
|
64
|
+
* ]);
|
|
65
|
+
* }, []);
|
|
66
|
+
|
|
67
|
+
* return (
|
|
68
|
+
* <Container flex={1} alignItems="center" justifyContent="center">
|
|
69
|
+
* {data && <NotificationPreferenceList data={data} />}
|
|
70
|
+
* </Container>
|
|
71
|
+
* );
|
|
72
|
+
* }
|
|
73
|
+
* ```
|
|
74
|
+
*
|
|
75
|
+
*/
|
|
76
|
+
|
|
77
|
+
export const NotificationPreferenceList = props => {
|
|
78
|
+
const {
|
|
79
|
+
data,
|
|
80
|
+
itemWrapperProps,
|
|
81
|
+
itemContainerProps,
|
|
82
|
+
labelContainerProps,
|
|
83
|
+
labelProps,
|
|
84
|
+
...rest
|
|
85
|
+
} = props;
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<Container bg="background.secondary" borderRadius={8} {...rest}>
|
|
89
|
+
{data?.map((item, index) => {
|
|
90
|
+
const { label, enabled, onSwitch, LeftIcon } = item;
|
|
91
|
+
const isLastItem = index === data.length - 1;
|
|
92
|
+
return (
|
|
93
|
+
<Container key={index} px={12} {...itemWrapperProps}>
|
|
94
|
+
<Container
|
|
95
|
+
py={15}
|
|
96
|
+
flexDirection="row"
|
|
97
|
+
alignItems="center"
|
|
98
|
+
justifyContent="space-between"
|
|
99
|
+
{...itemContainerProps}
|
|
100
|
+
>
|
|
101
|
+
<Container
|
|
102
|
+
flexDirection="row"
|
|
103
|
+
alignItems="center"
|
|
104
|
+
width="85%"
|
|
105
|
+
pr={15}
|
|
106
|
+
{...labelContainerProps}
|
|
107
|
+
>
|
|
108
|
+
{LeftIcon && (
|
|
109
|
+
<Container mr={10}>
|
|
110
|
+
<LeftIcon />
|
|
111
|
+
</Container>
|
|
112
|
+
)}
|
|
113
|
+
<Typography
|
|
114
|
+
color="font.grey800"
|
|
115
|
+
fontSize="l"
|
|
116
|
+
fontFamily="sf400"
|
|
117
|
+
{...labelProps}
|
|
118
|
+
>
|
|
119
|
+
{label}
|
|
120
|
+
</Typography>
|
|
121
|
+
</Container>
|
|
122
|
+
<ToggleSwitch
|
|
123
|
+
value={enabled}
|
|
124
|
+
onValueChange={() => onSwitch(item, index)}
|
|
125
|
+
mt={4}
|
|
126
|
+
/>
|
|
127
|
+
</Container>
|
|
128
|
+
{!isLastItem && <Divider bg="background.grey300" />}
|
|
129
|
+
</Container>
|
|
130
|
+
);
|
|
131
|
+
})}
|
|
132
|
+
</Container>
|
|
133
|
+
);
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
NotificationPreferenceList.propTypes = {
|
|
137
|
+
/**
|
|
138
|
+
* Array of preference list
|
|
139
|
+
*/
|
|
140
|
+
data: PropTypes.array.isRequired,
|
|
141
|
+
/**
|
|
142
|
+
* Customize outer container for each item
|
|
143
|
+
*/
|
|
144
|
+
itemWrapperProps: PropTypes.object,
|
|
145
|
+
/**
|
|
146
|
+
* Customize inner container for each item
|
|
147
|
+
*/
|
|
148
|
+
itemContainerProps: PropTypes.object,
|
|
149
|
+
/**
|
|
150
|
+
* Customize container for each item label
|
|
151
|
+
*/
|
|
152
|
+
labelContainerProps: PropTypes.object,
|
|
153
|
+
/**
|
|
154
|
+
* Customize item label
|
|
155
|
+
*/
|
|
156
|
+
labelProps: PropTypes.object,
|
|
157
|
+
};
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import React, { useContext } from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import Icon from "react-native-remix-icon";
|
|
4
|
+
|
|
5
|
+
import { Container, Typography } from "@components";
|
|
6
|
+
import { ThemeContext } from "styled-components/native";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
*
|
|
10
|
+
* Buttons are touchable elements used to interact with the screen and to trigger an action.
|
|
11
|
+
*
|
|
12
|
+
* <div class="screenshots">
|
|
13
|
+
* <img src="screenshots/organizationItem/organizationItem.png" />
|
|
14
|
+
* </div>
|
|
15
|
+
*
|
|
16
|
+
* ## Usage
|
|
17
|
+
* ```js
|
|
18
|
+
* import * as React from 'react';
|
|
19
|
+
* import { OrganizationItem } from '@bigbinary/neetoui-rn';
|
|
20
|
+
*
|
|
21
|
+
* export default function Main() {
|
|
22
|
+
* return (
|
|
23
|
+
* <OrganizationItem name="BigBinary Solutions Pvt. Ltd." />
|
|
24
|
+
* );
|
|
25
|
+
* }
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
export const OrganizationItem = props => {
|
|
31
|
+
const {
|
|
32
|
+
label,
|
|
33
|
+
name,
|
|
34
|
+
containerProps,
|
|
35
|
+
iconContainerProps,
|
|
36
|
+
iconProps,
|
|
37
|
+
textContainerProps,
|
|
38
|
+
labelProps,
|
|
39
|
+
nameProps,
|
|
40
|
+
...rest
|
|
41
|
+
} = props;
|
|
42
|
+
const theme = useContext(ThemeContext);
|
|
43
|
+
return (
|
|
44
|
+
<Container
|
|
45
|
+
bg="background.secondary"
|
|
46
|
+
width="100%"
|
|
47
|
+
px={16}
|
|
48
|
+
py={12}
|
|
49
|
+
borderRadius={6}
|
|
50
|
+
alignItems="center"
|
|
51
|
+
justifyContent="space-between"
|
|
52
|
+
{...rest}
|
|
53
|
+
>
|
|
54
|
+
<Container
|
|
55
|
+
flexDirection="row"
|
|
56
|
+
alignItems="flex-start"
|
|
57
|
+
{...containerProps}
|
|
58
|
+
>
|
|
59
|
+
<Container mr={9} {...iconContainerProps}>
|
|
60
|
+
<Icon
|
|
61
|
+
size={20}
|
|
62
|
+
color={theme.colors.font.grey800}
|
|
63
|
+
name="building-line"
|
|
64
|
+
{...iconProps}
|
|
65
|
+
/>
|
|
66
|
+
</Container>
|
|
67
|
+
<Container flex={1} {...textContainerProps}>
|
|
68
|
+
<Typography
|
|
69
|
+
color="font.grey800"
|
|
70
|
+
fontSize="l"
|
|
71
|
+
fontFamily="sf500"
|
|
72
|
+
{...labelProps}
|
|
73
|
+
>
|
|
74
|
+
{label || "Organization"}
|
|
75
|
+
</Typography>
|
|
76
|
+
<Typography
|
|
77
|
+
color="font.grey"
|
|
78
|
+
fontSize="m"
|
|
79
|
+
fontFamily="sf500"
|
|
80
|
+
mt="8px"
|
|
81
|
+
{...nameProps}
|
|
82
|
+
>
|
|
83
|
+
{name}
|
|
84
|
+
</Typography>
|
|
85
|
+
</Container>
|
|
86
|
+
</Container>
|
|
87
|
+
</Container>
|
|
88
|
+
);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
OrganizationItem.propTypes = {
|
|
92
|
+
/**
|
|
93
|
+
* Organization label
|
|
94
|
+
*/
|
|
95
|
+
label: PropTypes.string,
|
|
96
|
+
/**
|
|
97
|
+
* Organization name
|
|
98
|
+
*/
|
|
99
|
+
name: PropTypes.string.isRequired,
|
|
100
|
+
/**
|
|
101
|
+
* Customize inner container
|
|
102
|
+
*/
|
|
103
|
+
containerProps: PropTypes.object,
|
|
104
|
+
/**
|
|
105
|
+
* Customize icon container
|
|
106
|
+
*/
|
|
107
|
+
iconContainerProps: PropTypes.object,
|
|
108
|
+
/**
|
|
109
|
+
* Customize icon
|
|
110
|
+
*/
|
|
111
|
+
iconProps: PropTypes.object,
|
|
112
|
+
/**
|
|
113
|
+
* Customize label and name container
|
|
114
|
+
*/
|
|
115
|
+
textContainerProps: PropTypes.object,
|
|
116
|
+
/**
|
|
117
|
+
* Customize label
|
|
118
|
+
*/
|
|
119
|
+
labelProps: PropTypes.object,
|
|
120
|
+
/**
|
|
121
|
+
* Customize name
|
|
122
|
+
*/
|
|
123
|
+
nameProps: PropTypes.object,
|
|
124
|
+
};
|
|
@@ -16,7 +16,7 @@ export const TouchableOpacity = styled.TouchableOpacity`
|
|
|
16
16
|
`;
|
|
17
17
|
|
|
18
18
|
const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
|
|
19
|
-
const { Icon, label } = item;
|
|
19
|
+
const { Icon, label, labelProps } = item;
|
|
20
20
|
|
|
21
21
|
return (
|
|
22
22
|
<TouchableOpacity
|
|
@@ -32,6 +32,7 @@ const PopOverItem = ({ item, onPress, fontFamily, fontSize }) => {
|
|
|
32
32
|
fontSize={fontSize}
|
|
33
33
|
fontColor="font.primary"
|
|
34
34
|
fontFamily={fontFamily}
|
|
35
|
+
{...labelProps}
|
|
35
36
|
>
|
|
36
37
|
{label}
|
|
37
38
|
</Typography>
|
package/src/components/index.js
CHANGED
|
@@ -36,3 +36,5 @@ export { Calendar } from "./Calendar";
|
|
|
36
36
|
export { FlashList } from "./FlashList";
|
|
37
37
|
export { BottomTabBar } from "./BottomTabBar";
|
|
38
38
|
export { AnimatedImage } from "./AnimatedImage";
|
|
39
|
+
export { NotificationPreferenceList } from "./NotificationPreferenceList";
|
|
40
|
+
export { OrganizationItem } from "./OrganizationItem";
|