@neko-os/ui 0.0.6 → 0.0.7

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.
Files changed (3) hide show
  1. package/dist/components/calendar/DayPicker.js +1 -1
  2. package/package.json +5 -4
  3. package/src/components/calendar/DayPicker.js +10 -7
package/dist/components/calendar/DayPicker.js CHANGED
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/calendar/DayPicker.js";var _excluded=["initialValue","value","onChange"];import React from'react';import dayjs from'dayjs';import{Col}from"../structure/Col";import{Grid}from"../structure/Row";import{Icon}from"../presentation/Icon";import{Link}from"../actions/Link";import{Text}from"../text/Text";import{View}from"../structure/View";import{useCalendarDays}from"./_helpers/calendarDays";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function DayPicker(_ref){var _this=this;var initialValue=_ref.initialValue,value=_ref.value,onChange=_ref.onChange,props=_objectWithoutProperties(_ref,_excluded);var _React$useState=React.useState(dayjs(initialValue)),_React$useState2=_slicedToArray(_React$useState,2),localValue=_React$useState2[0],setLocalValue=_React$useState2[1];value=value===undefined?localValue:value;var handleChange=function handleChange(v){setLocalValue(v);onChange==null?void 0:onChange(v);};var _React$useState3=React.useState(function(){return initialValue?dayjs(initialValue).startOf('month'):dayjs().startOf('month');}),_React$useState4=_slicedToArray(_React$useState3,2),currentMonth=_React$useState4[0],setCurrentMonth=_React$useState4[1];var prevMonth=function prevMonth(){return setCurrentMonth(function(m){return m.subtract(1,'month');});};var nextMonth=function nextMonth(){return setCurrentMonth(function(m){return m.add(1,'month');});};var prevYear=function prevYear(){return setCurrentMonth(function(m){return m.subtract(1,'year');});};var nextYear=function nextYear(){return setCurrentMonth(function(m){return m.add(1,'year');});};var _useCalendarDays=useCalendarDays(currentMonth),weekdayLabels=_useCalendarDays.weekdayLabels,cells=_useCalendarDays.cells;return _jsxs(View,Object.assign({className:"neko-day-picker",width:250},props,{children:[_jsxs(View,{className:"neko-date-picker-header",row:true,centerV:true,gap:"xxs",height:30,children:[_jsx(Link,{onPress:prevYear,"aria-label":"Previous year",padding:"xxs",paddingL:0,children:_jsx(Icon,{name:"arrow-left-double-line"})}),_jsx(Link,{onPress:prevMonth,"aria-label":"Previous month",padding:"xxs",children:_jsx(Icon,{name:"arrow-left-s-line"})}),_jsx(Text,{center:true,flex:true,children:currentMonth.format('MMM YYYY')}),_jsx(Link,{onPress:nextMonth,"aria-label":"Next month",padding:"xxs",children:_jsx(Icon,{name:"arrow-right-s-line"})}),_jsx(Link,{onPress:nextYear,"aria-label":"Next year",padding:"xxs",paddingR:0,children:_jsx(Icon,{name:"arrow-right-double-line"})})]}),_jsx(View,{className:"neko-day-picker-week",row:true,center:true,gap:"sm",children:weekdayLabels.map(function(w){return _jsx(View,{flex:true,height:30,center:true,children:_jsx(Text,{center:true,sm:true,text4:true,children:w})},w);})}),_jsx(Grid,{className:"neko-day-picker-days",colSpan:24/7,gap:"sm",children:cells.map(function(val,idx){var dateVal=currentMonth.date(val);var isActive=dateVal.isSame(value,'day');return _jsx(Col,{className:"day-cell",center:true,children:_jsx(Link,{ratio:1,width:30,center:true,br:"md",onPress:function onPress(){return!!val&&handleChange(dateVal);},bg:isActive&&'primary',children:_jsx(Text,{sm:true,text2:true,center:true,strong:isActive,children:val!=null?val:''})})},idx);})})]}));}
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/calendar/DayPicker.js";var _excluded=["initialValue","value","onChange","min","max","onCheckDisabled"];import React from'react';import dayjs from'dayjs';import{Col}from"../structure/Col";import{Grid}from"../structure/Row";import{Icon}from"../presentation/Icon";import{Link}from"../actions/Link";import{Text}from"../text/Text";import{View}from"../structure/View";import{useCalendarDays}from"./_helpers/calendarDays";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function DayPicker(_ref){var _this=this;var initialValue=_ref.initialValue,value=_ref.value,onChange=_ref.onChange,min=_ref.min,max=_ref.max,onCheckDisabled=_ref.onCheckDisabled,props=_objectWithoutProperties(_ref,_excluded);var _React$useState=React.useState(dayjs(initialValue)),_React$useState2=_slicedToArray(_React$useState,2),localValue=_React$useState2[0],setLocalValue=_React$useState2[1];value=value===undefined?localValue:value;var handleChange=function handleChange(v){setLocalValue(v);onChange==null?void 0:onChange(v);};var _React$useState3=React.useState(function(){return initialValue?dayjs(initialValue).startOf('month'):dayjs().startOf('month');}),_React$useState4=_slicedToArray(_React$useState3,2),currentMonth=_React$useState4[0],setCurrentMonth=_React$useState4[1];var prevMonth=function prevMonth(){return setCurrentMonth(function(m){return m.subtract(1,'month');});};var nextMonth=function nextMonth(){return setCurrentMonth(function(m){return m.add(1,'month');});};var prevYear=function prevYear(){return setCurrentMonth(function(m){return m.subtract(1,'year');});};var nextYear=function nextYear(){return setCurrentMonth(function(m){return m.add(1,'year');});};var _useCalendarDays=useCalendarDays(currentMonth),weekdayLabels=_useCalendarDays.weekdayLabels,cells=_useCalendarDays.cells;return _jsxs(View,Object.assign({className:"neko-day-picker",width:250},props,{children:[_jsxs(View,{className:"neko-date-picker-header",row:true,centerV:true,gap:"xxs",height:30,children:[_jsx(Link,{onPress:prevYear,"aria-label":"Previous year",padding:"xxs",paddingL:0,children:_jsx(Icon,{name:"arrow-left-double-line"})}),_jsx(Link,{onPress:prevMonth,"aria-label":"Previous month",padding:"xxs",children:_jsx(Icon,{name:"arrow-left-s-line"})}),_jsx(Text,{center:true,flex:true,children:currentMonth.format('MMM YYYY')}),_jsx(Link,{onPress:nextMonth,"aria-label":"Next month",padding:"xxs",children:_jsx(Icon,{name:"arrow-right-s-line"})}),_jsx(Link,{onPress:nextYear,"aria-label":"Next year",padding:"xxs",paddingR:0,children:_jsx(Icon,{name:"arrow-right-double-line"})})]}),_jsx(View,{className:"neko-day-picker-week",row:true,center:true,gap:"sm",children:weekdayLabels.map(function(w){return _jsx(View,{flex:true,height:30,center:true,children:_jsx(Text,{center:true,sm:true,text4:true,children:w})},w);})}),_jsx(Grid,{className:"neko-day-picker-days",colSpan:24/7,gap:"sm",children:cells.map(function(day,i){var dateVal=currentMonth.date(day);var isActive=!!day&&dateVal.isSame(value,'day');var disabled=!!min&&dateVal.isBefore(min)||!!max&&dateVal.isAfter(max)||(onCheckDisabled==null?void 0:onCheckDisabled(dateVal));return _jsx(Col,{className:"day-cell",center:true,children:_jsx(Link,{ratio:1,width:30,center:true,br:"md",onPress:function onPress(){return!!day&&handleChange(dateVal);},bg:isActive&&'primary',disabled:disabled,children:_jsx(Text,{sm:true,text2:true,center:true,strong:isActive,children:day||''})})},day?dateVal.format('YYYYMMDD'):i);})})]}));}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neko-os/ui",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "author": "Christian Storch <ccstorch@gmail.com>",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -22,17 +22,18 @@
22
22
  },
23
23
  "peerDependencies": {
24
24
  "@remixicon/react": "^4.6.0",
25
- "dayjs": "^1.11.13",
25
+ "dayjs": "*",
26
26
  "ramda": "^0.31.3",
27
27
  "react": "*",
28
28
  "react-native": "*",
29
29
  "react-native-gesture-handler": "^2.28.0",
30
30
  "react-native-reanimated": "^4.1.0",
31
31
  "react-native-remix-icon": "^4.6.3",
32
- "react-native-web": "*"
32
+ "react-native-web": "*",
33
+ "react-native-safe-area-context": "*"
33
34
  },
34
35
  "dependencies": {
35
- "dayjs": "^1.11.13",
36
+ "dayjs": "^1.11.18",
36
37
  "prop-types": "^15.8.1",
37
38
  "react-native-safe-area-context": "^5.6.1",
38
39
  "react-native-web": "^0.21.0",
package/src/components/calendar/DayPicker.js CHANGED
@@ -9,7 +9,7 @@ import { Text } from '../text/Text'
9
9
  import { View } from '../structure/View'
10
10
  import { useCalendarDays } from './_helpers/calendarDays'
11
11
 
12
- export function DayPicker({ initialValue, value, onChange, ...props }) {
12
+ export function DayPicker({ initialValue, value, onChange, min, max, onCheckDisabled, ...props }) {
13
13
  const [localValue, setLocalValue] = React.useState(dayjs(initialValue))
14
14
  value = value === undefined ? localValue : value
15
15
  const handleChange = (v) => {
@@ -64,22 +64,25 @@ export function DayPicker({ initialValue, value, onChange, ...props }) {
64
64
  </View>
65
65
 
66
66
  <Grid className="neko-day-picker-days" colSpan={24 / 7} gap="sm">
67
- {cells.map((val, idx) => {
68
- const dateVal = currentMonth.date(val)
69
- const isActive = dateVal.isSame(value, 'day')
67
+ {cells.map((day, i) => {
68
+ const dateVal = currentMonth.date(day)
69
+ const isActive = !!day && dateVal.isSame(value, 'day')
70
+ const disabled =
71
+ (!!min && dateVal.isBefore(min)) || (!!max && dateVal.isAfter(max)) || onCheckDisabled?.(dateVal)
70
72
 
71
73
  return (
72
- <Col key={idx} className="day-cell" center>
74
+ <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center>
73
75
  <Link
74
76
  ratio={1}
75
77
  width={30}
76
78
  center
77
79
  br="md"
78
- onPress={() => !!val && handleChange(dateVal)}
80
+ onPress={() => !!day && handleChange(dateVal)}
79
81
  bg={isActive && 'primary'}
82
+ disabled={disabled}
80
83
  >
81
84
  <Text sm text2 center strong={isActive}>
82
- {val != null ? val : ''}
85
+ {day || ''}
83
86
  </Text>
84
87
  </Link>
85
88
  </Col>