@bigbinary/neetoui-rn 0.0.130 → 0.0.131

package/lib/components/Calendar.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Calendar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _dayjs=_interopRequireDefault(require("dayjs"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNativeCalendars=require("react-native-calendars");var _excluded=["selectedDate"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Calendar.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 Calendar=function Calendar(props){var selectedDate=props.selectedDate,rest=(0,_objectWithoutProperties2.default)(props,_excluded);delete rest.markedDates;var theme=(0,_react.useContext)(_native.ThemeContext);var isCurrentDay=(0,_dayjs.default)(selectedDate).isSame((0,_dayjs.default)(),"D");return _react.default.createElement(_reactNativeCalendars.Calendar,(0,_extends2.default)({key:""+isCurrentDay,firstDay:1,markedDates:(0,_defineProperty2.default)({},(0,_dayjs.default)(selectedDate).format("YYYY-MM-DD"),{selected:true}),theme:{arrowColor:theme.colors.font.primary,dotStyle:{height:0,width:0,marginTop:0},"stylesheet.calendar.header":{week:{marginVertical:10,flexDirection:"row",justifyContent:"space-around",alignItems:"center",fontFamily:theme.fonts.sf600},dayHeader:{flex:1,textAlign:"center",fontFamily:theme.fonts.sf600,fontSize:theme.fontSizes.xs,color:theme.colors.font.grey500,textTransform:"uppercase"},monthText:{fontFamily:theme.fonts.sf400,fontSize:theme.fontSizes.l,color:theme.colors.font.primary}},"stylesheet.day.basic":{base:{alignItems:"center",justifyContent:"center",height:26,width:26,borderRadius:5,borderWidth:1,borderColor:"transparent"},today:{borderColor:isCurrentDay?"transparent":theme.colors.border.base},selected:{backgroundColor:"#5E5CE61A"},text:{fontFamily:theme.fonts.sf400,fontSize:theme.fontSizes.xs,color:theme.colors.font.primary,margin:0,padding:0},todayText:{color:theme.colors.font.base},selectedText:{fontFamily:theme.fonts.sf600,color:theme.colors.font.base},disabledText:{color:theme.colors.font.grey400}}}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:5}}));};exports.Calendar=Calendar;Calendar.propTypes={selectedDate:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.instanceOf(_dayjs.default)])};

package/lib/components/index.js

@@ -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,"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,"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,"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,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});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 _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");
+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,"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,"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,"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,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});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 _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.130",
+  "version": "0.0.131",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -48,6 +48,8 @@
   "dependencies": {
     "@react-native-community/hooks": "^2.8.1",
     "@styled-system/prop-types": "^5.1.5",
+    "dayjs": "^1.11.4",
+    "react-native-calendars": "^1.1285.0",
     "react-native-gesture-handler": "^2.4.0",
     "react-native-material-ripple": "^0.9.1",
     "react-native-modal": "^13.0.0",

package/src/components/Calendar.js

@@ -0,0 +1,124 @@
+import React, { useContext, useState } from "react";
+import dayjs from "dayjs";
+import PropTypes from "prop-types";
+import { ThemeContext } from "styled-components/native";
+import { Calendar as RNCalender } from "react-native-calendars";
+
+/**
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/calendar/calendar.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import dayjs from "dayjs";
+ * import { Calendar } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  const [selectedDate, setSelectedDate] = useState(dayjs());
+ *  return (
+ *    <Calendar
+ *      selectedDate={selectedDate}
+ *      onDayPress={({ dateString }) => setSelectedDate(dateString)}
+ *    />
+ *  );
+ * }
+ * ```
+ *
+ * Checkout <a href=" https://www.npmjs.com/package/react-native-calendars">react-native-calendars</a> package for all the available props
+ */
+
+export const Calendar = props => {
+  const { selectedDate, ...rest } = props;
+  delete rest.markedDates;
+  const theme = useContext(ThemeContext);
+  const isCurrentDay = dayjs(selectedDate).isSame(dayjs(), "D");
+
+  return (
+    <RNCalender
+      key={`${isCurrentDay}`}
+      firstDay={1}
+      markedDates={{
+        [dayjs(selectedDate).format("YYYY-MM-DD")]: {
+          selected: true,
+        },
+      }}
+      theme={{
+        arrowColor: theme.colors.font.primary,
+        dotStyle: {
+          height: 0,
+          width: 0,
+          marginTop: 0,
+        },
+        "stylesheet.calendar.header": {
+          week: {
+            marginVertical: 10,
+            flexDirection: "row",
+            justifyContent: "space-around",
+            alignItems: "center",
+            fontFamily: theme.fonts.sf600,
+          },
+          dayHeader: {
+            flex: 1,
+            textAlign: "center",
+            fontFamily: theme.fonts.sf600,
+            fontSize: theme.fontSizes.xs,
+            color: theme.colors.font.grey500,
+            textTransform: "uppercase",
+          },
+          monthText: {
+            fontFamily: theme.fonts.sf400,
+            fontSize: theme.fontSizes.l,
+            color: theme.colors.font.primary,
+          },
+        },
+        "stylesheet.day.basic": {
+          base: {
+            alignItems: "center",
+            justifyContent: "center",
+            height: 26,
+            width: 26,
+            borderRadius: 5,
+            borderWidth: 1,
+            borderColor: "transparent",
+          },
+          today: {
+            borderColor: isCurrentDay
+              ? "transparent"
+              : theme.colors.border.base,
+          },
+          selected: {
+            backgroundColor: "#5E5CE61A",
+          },
+          text: {
+            fontFamily: theme.fonts.sf400,
+            fontSize: theme.fontSizes.xs,
+            color: theme.colors.font.primary,
+            margin: 0,
+            padding: 0,
+          },
+          todayText: {
+            color: theme.colors.font.base,
+          },
+          selectedText: {
+            fontFamily: theme.fonts.sf600,
+            color: theme.colors.font.base,
+          },
+          disabledText: {
+            color: theme.colors.font.grey400,
+          },
+        },
+      }}
+      {...rest}
+    />
+  );
+};
+
+Calendar.propTypes = {
+  selectedDate: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.instanceOf(dayjs),
+  ]),
+};

package/src/components/index.js

@@ -32,3 +32,4 @@ export { Carousel } from "./Carousel";
 export { OnBoarding } from "./OnBoarding";
 export { SearchBar } from "./SearchBar";
 export { Accordion } from "./Accordion";
+export { Calendar } from "./Calendar";