@bigbinary/neetoui-rn 0.0.244 → 0.0.246

package/index.d.ts

@@ -349,6 +349,9 @@ interface NotificationPreferenceListProps extends ViewProps {
   itemContainerProps?: ViewProps;
   labelContainerProps?: ViewProps;
   labelProps?: TypographyProps;
+  title?: string;
+  titleProps?: TypographyProps;
+  isLoading?: boolean;
 }
 
 interface MultiSelectConfirmationAlertObjProps {

package/lib/components/NotificationPreferenceList.js

@@ -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 _reactNativeSizeMatters=require("react-native-size-matters");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.jsx";var NotificationPreferenceList=function NotificationPreferenceList(_ref){var data=_ref.data,itemWrapperProps=_ref.itemWrapperProps,itemContainerProps=_ref.itemContainerProps,labelContainerProps=_ref.labelContainerProps,labelProps=_ref.labelProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8)},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:3}}),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:(0,_reactNativeSizeMatters.moderateScale)(12)},itemWrapperProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:9}}),_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",flexDirection:"row",justifyContent:"space-between",py:(0,_reactNativeSizeMatters.moderateScale)(15)},itemContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:11}}),_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",flexDirection:"row",pr:(0,_reactNativeSizeMatters.moderateScale)(15),width:"85%"},labelContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:13}}),LeftIcon&&_react.default.createElement(_.Container,{mr:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:17}},_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:19}})),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey800",fontFamily:"sf400",fontSize:"l"},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:15}}),label)),_react.default.createElement(_.ToggleSwitch,{mt:(0,_reactNativeSizeMatters.moderateScale)(4),value:enabled,onValueChange:function onValueChange(){return onSwitch(item,index);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:13}})),!isLastItem&&_react.default.createElement(_.Divider,{bg:"background.grey300",__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:27}}));}));};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};
+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 _reactNativeSizeMatters=require("react-native-size-matters");var _=require("./");var _excluded=["isLoading","data","itemWrapperProps","itemContainerProps","labelContainerProps","labelProps","title","titleProps"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/NotificationPreferenceList.jsx";var lineHeight=(0,_reactNativeSizeMatters.moderateScale)(22);var NotificationPreferenceList=function NotificationPreferenceList(_ref){var isLoading=_ref.isLoading,data=_ref.data,itemWrapperProps=_ref.itemWrapperProps,itemContainerProps=_ref.itemContainerProps,labelContainerProps=_ref.labelContainerProps,labelProps=_ref.labelProps,title=_ref.title,titleProps=_ref.titleProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return _react.default.createElement(_.Container,{width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:3}},_react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",pb:(0,_reactNativeSizeMatters.moderateScale)(8),pt:(0,_reactNativeSizeMatters.moderateScale)(16),__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:5}},!!title&&_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey600",fontSize:"m",lineHeight:lineHeight+"px"},titleProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:9}}),title),isLoading&&_react.default.createElement(_.Container,{height:lineHeight,justifyContent:"center",mx:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:115,columnNumber:9}},_react.default.createElement(_.Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8)},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,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:(0,_reactNativeSizeMatters.moderateScale)(16)},itemWrapperProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}}),_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",flexDirection:"row",justifyContent:"space-between",py:(0,_reactNativeSizeMatters.moderateScale)(12)},itemContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:13}}),_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",flexDirection:"row"},labelContainerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:15}}),LeftIcon&&_react.default.createElement(_.Container,{mr:(0,_reactNativeSizeMatters.moderateScale)(10),__self:_this,__source:{fileName:_jsxFileName,lineNumber:148,columnNumber:19}},_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:149,columnNumber:21}})),_react.default.createElement(_.Typography,(0,_extends2.default)({fontSize:"l",mr:(0,_reactNativeSizeMatters.moderateScale)(10)},labelProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:17}}),label)),_react.default.createElement(_.ToggleSwitch,{value:enabled,onValueChange:function onValueChange(){return onSwitch(item,index);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:15}})),!isLastItem&&_react.default.createElement(_.Divider,{bg:"background.grey300",__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,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,title:_propTypes.default.string,titleProps:_propTypes.default.string,isLoading:_propTypes.default.bool};

package/lib/components/ToggleSwitch.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ToggleSwitch=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ToggleSwitch.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ToggleSwitch=function ToggleSwitch(_ref){var value=_ref.value,onValueChange=_ref.onValueChange,disabled=_ref.disabled;var theme=(0,_react.useContext)(_native.ThemeContext);var animatedPosition=(0,_react.useRef)(new _reactNative.Animated.Value(value?(0,_reactNativeSizeMatters.moderateScale)(1):0)).current;(0,_react.useEffect)(function(){startAnimation();},[value]);var startAnimation=function startAnimation(){_reactNative.Animated.timing(animatedPosition,{toValue:value?(0,_reactNativeSizeMatters.moderateScale)(18):0,duration:300,useNativeDriver:false}).start();};var containerBg=value?theme.colors.background.purple500:"background.grey300";var iconColor=value?theme.colors.background.purple500:theme.colors.font.grey500;return _react.default.createElement(_.Touchable,{bg:containerBg,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(70),disabled:disabled,height:(0,_reactNativeSizeMatters.moderateScale)(24),justifyContent:"center",opacity:disabled?0.5:1,px:(0,_reactNativeSizeMatters.moderateScale)(5),width:(0,_reactNativeSizeMatters.moderateScale)(44),onPress:function onPress(){return onValueChange(!value);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}},_react.default.createElement(_reactNative.Animated.View,{style:{transform:[{translateX:animatedPosition}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:7}},_react.default.createElement(_.Container,{alignItems:"center",bg:"background.white",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),height:(0,_reactNativeSizeMatters.moderateScale)(16),justifyContent:"center",width:(0,_reactNativeSizeMatters.moderateScale)(16),__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{color:iconColor,name:"ri-"+(value?"check":"close")+"-line",size:(0,_reactNativeSizeMatters.moderateScale)(12),__self:_this,__source:{fileName:_jsxFileName,lineNumber:85,columnNumber:11}}))));};exports.ToggleSwitch=ToggleSwitch;ToggleSwitch.propTypes={value:_propTypes.default.bool.isRequired,onValueChange:_propTypes.default.func,disabled:_propTypes.default.bool};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ToggleSwitch=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ToggleSwitch.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ToggleSwitch=function ToggleSwitch(_ref){var value=_ref.value,onValueChange=_ref.onValueChange,disabled=_ref.disabled;var theme=(0,_react.useContext)(_native.ThemeContext);var animatedPosition=(0,_react.useRef)(new _reactNative.Animated.Value(value?(0,_reactNativeSizeMatters.moderateScale)(1):0)).current;(0,_react.useEffect)(function(){startAnimation();},[value]);var startAnimation=function startAnimation(){_reactNative.Animated.timing(animatedPosition,{toValue:value?(0,_reactNativeSizeMatters.moderateScale)(18):0,duration:300,useNativeDriver:false}).start();};var containerBg=value?theme.colors.background.purple500:"background.grey300";var iconColor=value?theme.colors.background.purple500:theme.colors.font.grey500;return _react.default.createElement(_.Touchable,{bg:containerBg,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(70),disabled:disabled,height:(0,_reactNativeSizeMatters.moderateScale)(24),hitSlop:10,justifyContent:"center",opacity:disabled?0.5:1,px:(0,_reactNativeSizeMatters.moderateScale)(5),width:(0,_reactNativeSizeMatters.moderateScale)(44),onPress:function onPress(){return onValueChange(!value);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}},_react.default.createElement(_reactNative.Animated.View,{style:{transform:[{translateX:animatedPosition}]},__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:7}},_react.default.createElement(_.Container,{alignItems:"center",bg:"background.white",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),height:(0,_reactNativeSizeMatters.moderateScale)(16),justifyContent:"center",width:(0,_reactNativeSizeMatters.moderateScale)(16),__self:_this,__source:{fileName:_jsxFileName,lineNumber:78,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{color:iconColor,name:"ri-"+(value?"check":"close")+"-line",size:(0,_reactNativeSizeMatters.moderateScale)(12),__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:11}}))));};exports.ToggleSwitch=ToggleSwitch;ToggleSwitch.propTypes={value:_propTypes.default.bool.isRequired,onValueChange:_propTypes.default.func,disabled:_propTypes.default.bool};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.244",
+  "version": "0.0.246",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/NotificationPreferenceList.jsx

@@ -3,7 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { moderateScale } from "react-native-size-matters";
 
-import { Container, Typography, Divider, ToggleSwitch } from "@components";
+import {
+  Container,
+  Typography,
+  Divider,
+  ToggleSwitch,
+  Loader,
+} from "@components";
 
 /**
  *
@@ -76,63 +82,87 @@ import { Container, Typography, Divider, ToggleSwitch } from "@components";
  *
  */
 
+const lineHeight = moderateScale(22);
 export const NotificationPreferenceList = ({
+  isLoading,
   data,
   itemWrapperProps,
   itemContainerProps,
   labelContainerProps,
   labelProps,
+  title,
+  titleProps,
   ...rest
 }) => (
-  <Container
-    bg="background.secondary"
-    borderRadius={moderateScale(8)}
-    {...rest}
-  >
-    {data?.map((item, index) => {
-      const { label, enabled, onSwitch, LeftIcon } = item;
-      const isLastItem = index === data.length - 1;
+  <Container width="100%">
+    <Container
+      alignItems="center"
+      flexDirection="row"
+      pb={moderateScale(8)}
+      pt={moderateScale(16)}
+    >
+      {!!title && (
+        <Typography
+          color="font.grey600"
+          fontSize="m"
+          lineHeight={`${lineHeight}px`}
+          {...titleProps}
+        >
+          {title}
+        </Typography>
+      )}
+      {isLoading && (
+        <Container
+          height={lineHeight}
+          justifyContent="center"
+          mx={moderateScale(8)}
+        >
+          <Loader />
+        </Container>
+      )}
+    </Container>
+    <Container
+      bg="background.secondary"
+      borderRadius={moderateScale(8)}
+      {...rest}
+    >
+      {data?.map((item, index) => {
+        const { label, enabled, onSwitch, LeftIcon } = item;
+        const isLastItem = index === data.length - 1;
 
-      return (
-        <Container key={index} px={moderateScale(12)} {...itemWrapperProps}>
-          <Container
-            alignItems="center"
-            flexDirection="row"
-            justifyContent="space-between"
-            py={moderateScale(15)}
-            {...itemContainerProps}
-          >
+        return (
+          <Container key={index} px={moderateScale(16)} {...itemWrapperProps}>
             <Container
               alignItems="center"
               flexDirection="row"
-              pr={moderateScale(15)}
-              width="85%"
-              {...labelContainerProps}
+              justifyContent="space-between"
+              py={moderateScale(12)}
+              {...itemContainerProps}
             >
-              {LeftIcon && (
-                <Container mr={moderateScale(10)}>
-                  <LeftIcon />
-                </Container>
-              )}
-              <Typography
-                color="font.grey800"
-                fontFamily="sf400"
-                fontSize="l"
-                {...labelProps}
+              <Container
+                alignItems="center"
+                flexDirection="row"
+                {...labelContainerProps}
               >
-                {label}
-              </Typography>
+                {LeftIcon && (
+                  <Container mr={moderateScale(10)}>
+                    <LeftIcon />
+                  </Container>
+                )}
+                <Typography fontSize="l" mr={moderateScale(10)} {...labelProps}>
+                  {label}
+                </Typography>
+              </Container>
+              <ToggleSwitch
+                value={enabled}
+                onValueChange={() => onSwitch(item, index)}
+              />
             </Container>
-            <ToggleSwitch
-              mt={moderateScale(4)}
-              value={enabled}
-              onValueChange={() => onSwitch(item, index)}
-            />
+            {!isLastItem && <Divider bg="background.grey300" />}
           </Container>
-          {!isLastItem && <Divider bg="background.grey300" />}
-        </Container>
-      );
-    })}
+        );
+      })}
+    </Container>
   </Container>
 );
 
@@ -157,4 +187,16 @@ NotificationPreferenceList.propTypes = {
    * Customize item label
    */
   labelProps: PropTypes.object,
+  /**
+   * Title value.
+   */
+  title: PropTypes.string,
+  /**
+   * Customize title style.
+   */
+  titleProps: PropTypes.string,
+  /**
+   * Show loader
+   */
+  isLoading: PropTypes.bool,
 };

package/src/components/ToggleSwitch.jsx

@@ -67,6 +67,7 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
       borderRadius={moderateScale(70)}
       disabled={disabled}
       height={moderateScale(24)}
+      hitSlop={10}
       justifyContent="center"
       opacity={disabled ? 0.5 : 1}
       px={moderateScale(5)}