@hero-design/rn-work-uikit 1.6.2-alpha.0 → 1.6.2-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn-work-uikit
 
+## 1.6.2-alpha.1
+
+### Patch Changes
+
+- [#4123](https://github.com/Thinkei/hero-design/pull/4123) [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89) Thanks [@truongnguyen-eh](https://github.com/truongnguyen-eh)! - [ANG-3740] Resolve conflict between alpha and master-react-18
+
+- Updated dependencies [[`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083), [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89)]:
+  - @hero-design/rn@8.104.1-alpha.3
+
 ## 1.6.2-alpha.0
 
 ### Patch Changes

package/lib/index.js

@@ -7325,7 +7325,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
-    muted: theme.colors.mutedOnDefaultGlobalSurface
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface
   };
   var fontSizes = {
     xsmall: theme.fontSizes.xsmall,
@@ -13810,6 +13811,16 @@ var CalendarRowItem = function CalendarRowItem(_ref) {
   }) : null));
 };
 
+var DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+// Sunday first column => 0
+// Sunday last column  => 1
+var WEEK_INDEX_OFFSET = 1;
+var SUNDAY_INDEX = 6;
+
+// Always render 7 rows x 6 items for consistent layout
+var TOTAL_DATES_ITEMS = 7 * 6;
+
 var initArray = function initArray(length, func) {
   return Array.from(Array(length)).map(function (_, index) {
     return func(index);
@@ -13886,6 +13897,74 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
     endDate: undefined
   };
 };
+var shouldUseMonthPicker = function shouldUseMonthPicker(onMonthChange) {
+  return onMonthChange !== noop$2;
+};
+var getCalendarDate = function getCalendarDate(_ref3) {
+  var visibleDate = _ref3.visibleDate,
+    _ref3$markedDates = _ref3.markedDates,
+    markedDates = _ref3$markedDates === void 0 ? [] : _ref3$markedDates,
+    minDate = _ref3.minDate,
+    maxDate = _ref3.maxDate;
+  var currentMonth = visibleDate.getMonth();
+  var currentYear = visibleDate.getFullYear();
+  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
+    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
+  }, {});
+  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
+    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    var count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
+  });
+  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
+    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
+  });
+  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
+    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
+  });
+  return {
+    firstDateOfMonth: firstDateOfMonth,
+    lastDateOfMonth: lastDateOfMonth,
+    parsedMaskedDate: parsedMaskedDate,
+    daysOfPreviousMonth: daysOfPreviousMonth,
+    daysOfCurrentMonth: daysOfCurrentMonth,
+    daysOfNextMonth: daysOfNextMonth
+  };
+};
+var getCalendarButtonState = function getCalendarButtonState(_ref4) {
+  var visibleDate = _ref4.visibleDate,
+    markedDates = _ref4.markedDates,
+    minDate = _ref4.minDate,
+    maxDate = _ref4.maxDate;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth,
+    firstDateOfMonth = _getCalendarDate.firstDateOfMonth,
+    lastDateOfMonth = _getCalendarDate.lastDateOfMonth;
+  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
+    return date !== undefined;
+  }) && minDate >= firstDateOfMonth;
+  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
+    return date !== undefined;
+  }) || maxDate <= lastDateOfMonth;
+  return {
+    disablePrevButton: disablePrevButton,
+    disableNextButton: disableNextButton
+  };
+};
 
 var SelectedDate = function SelectedDate(_ref) {
   var date = _ref.date,
@@ -13921,14 +14000,36 @@ var SelectedDate = function SelectedDate(_ref) {
   }) : null));
 };
 
-var DAYS_OF_WEEK$1 = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-var WEEK_INDEX_OFFSET$1 = 1;
-var SUNDAY_INDEX$1 = 6;
+var useCalendarLayout = function useCalendarLayout() {
+  var theme = useTheme();
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentHeight = _useState2[0],
+    setContentHeight = _useState2[1];
+  var calendarItemHeight = contentHeight - theme.__hd__.calendar.space.iosPickerMarginVertical * 2;
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentWidth = _useState4[0],
+    setContentWidth = _useState4[1];
+  var calendarItemWidth = React.useMemo(function () {
+    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
+  }, [contentWidth, theme]);
+  var onLayout = React.useCallback(function (e) {
+    var _e$nativeEvent$layout = e.nativeEvent.layout,
+      width = _e$nativeEvent$layout.width,
+      height = _e$nativeEvent$layout.height;
+    setContentHeight(height);
+    setContentWidth(width);
+  }, []);
+  return {
+    onLayout: onLayout,
+    contentHeight: contentHeight,
+    calendarItemHeight: calendarItemHeight,
+    contentWidth: contentWidth,
+    calendarItemWidth: calendarItemWidth
+  };
+};
 
-// Always render 7 rows x 6 items for consistent layout
-var TOTAL_DATES_ITEMS$1 = 7 * 6;
 var CalendarRange = function CalendarRange(_ref) {
   var value = _ref.value,
     visibleDate = _ref.visibleDate,
@@ -13951,53 +14052,35 @@ var CalendarRange = function CalendarRange(_ref) {
     monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
     monthPickerCancelLabel = _ref.monthPickerCancelLabel;
   var theme = useTheme();
-  var currentMonth = visibleDate.getMonth();
-  var currentYear = visibleDate.getFullYear();
-  var now = new Date();
-  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
-    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
-  }, {});
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    contentHeight = _useState4[0],
-    setContentHeight = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    contentWidth = _useState6[0],
-    setContentWidth = _useState6[1];
-  var calendarItemWidth = React.useMemo(function () {
-    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
-  }, [contentWidth, theme]);
-  var useMonthPicker = onMonthChange !== noop$2;
-  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
-  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX$1 : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET$1;
-  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
-  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
-    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    var count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
-  });
-  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
-    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
-  });
-  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS$1 - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
-    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
-  });
-  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
-    return date !== undefined;
-  }) && minDate >= firstDateOfMonth;
-  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
-    return date !== undefined;
-  }) || maxDate <= lastDateOfMonth;
+  var _useCalendarLayout = useCalendarLayout(),
+    onLayout = _useCalendarLayout.onLayout,
+    contentHeight = _useCalendarLayout.contentHeight,
+    contentWidth = _useCalendarLayout.contentWidth,
+    calendarItemWidth = _useCalendarLayout.calendarItemWidth;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthChange: onMonthChange
+    }),
+    parsedMaskedDate = _getCalendarDate.parsedMaskedDate,
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfCurrentMonth = _getCalendarDate.daysOfCurrentMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth;
+  var _getCalendarButtonSta = getCalendarButtonState({
+      visibleDate: visibleDate,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    disablePrevButton = _getCalendarButtonSta.disablePrevButton,
+    disableNextButton = _getCalendarButtonSta.disableNextButton;
+  var shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
+  var now = new Date();
   var onDateChange = function onDateChange(date) {
     var newDateRange = setStartOrEndDate({
       date: date,
@@ -14045,17 +14128,10 @@ var CalendarRange = function CalendarRange(_ref) {
       textIntent: isCurrentMonth ? undefined : 'subdued'
     });
   };
-  var onLayout = function onLayout(e) {
-    var _e$nativeEvent$layout = e.nativeEvent.layout,
-      width = _e$nativeEvent$layout.width,
-      height = _e$nativeEvent$layout.height;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__namespace.default.createElement(ContentNavigator, {
-    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
+    value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
       testID: "calendar-month-picker",
       onPress: function onPress() {
         onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(!monthPickerVisible);
@@ -14077,7 +14153,7 @@ var CalendarRange = function CalendarRange(_ref) {
     }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: useMonthPicker ? undefined : onTitlePress,
+    onPress: shouldShowMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"
@@ -14097,7 +14173,7 @@ var CalendarRange = function CalendarRange(_ref) {
     }
   })) : /*#__PURE__*/React__namespace.default.createElement(Box, {
     onLayout: onLayout
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarRow, null, DAYS_OF_WEEK$1.map(function (day) {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
     return /*#__PURE__*/React__namespace.default.createElement(StyledCalendarRowItem, {
       key: day
     }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarDayNameCell, {
@@ -14137,14 +14213,6 @@ var CalendarRange = function CalendarRange(_ref) {
   })));
 };
 
-var DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-var WEEK_INDEX_OFFSET = 1;
-var SUNDAY_INDEX = 6;
-
-// Always render 7 rows x 6 items for consistent layout
-var TOTAL_DATES_ITEMS = 7 * 6;
 var Calendar = function Calendar(_ref) {
   var value = _ref.value,
     visibleDate = _ref.visibleDate,
@@ -14167,64 +14235,39 @@ var Calendar = function Calendar(_ref) {
     monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
     monthPickerCancelLabel = _ref.monthPickerCancelLabel;
   var theme = useTheme();
-  var currentMonth = visibleDate.getMonth();
-  var currentYear = visibleDate.getFullYear();
-  var now = new Date();
-  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
-    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
-  }, {});
+  var _useCalendarLayout = useCalendarLayout(),
+    onLayout = _useCalendarLayout.onLayout,
+    contentHeight = _useCalendarLayout.contentHeight,
+    contentWidth = _useCalendarLayout.contentWidth,
+    calendarItemWidth = _useCalendarLayout.calendarItemWidth;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthChange: onMonthChange
+    }),
+    parsedMaskedDate = _getCalendarDate.parsedMaskedDate,
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfCurrentMonth = _getCalendarDate.daysOfCurrentMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth;
+  var _getCalendarButtonSta = getCalendarButtonState({
+      visibleDate: visibleDate,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    disablePrevButton = _getCalendarButtonSta.disablePrevButton,
+    disableNextButton = _getCalendarButtonSta.disableNextButton;
+  var shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    contentHeight = _useState4[0],
-    setContentHeight = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    contentWidth = _useState6[0],
-    setContentWidth = _useState6[1];
-  var calendarItemWidth = React.useMemo(function () {
-    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
-  }, [contentWidth, theme]);
-  var useMonthPicker = onMonthChange !== noop$2;
-  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
-  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
-  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
-  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
-    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    var count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
-  });
-  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
-    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
-  });
-  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
-    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
-  });
-  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
-    return date !== undefined;
-  }) && minDate >= firstDateOfMonth;
-  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
-    return date !== undefined;
-  }) || maxDate <= lastDateOfMonth;
-  var onLayout = function onLayout(e) {
-    var _e$nativeEvent$layout = e.nativeEvent.layout,
-      width = _e$nativeEvent$layout.width,
-      height = _e$nativeEvent$layout.height;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
+  var now = new Date();
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__namespace.default.createElement(ContentNavigator, {
-    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
+    value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
       testID: "calendar-month-picker",
       onPress: function onPress() {
         onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(!monthPickerVisible);
@@ -14246,7 +14289,7 @@ var Calendar = function Calendar(_ref) {
     }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: useMonthPicker ? undefined : onTitlePress,
+    onPress: shouldShowMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.6.2-alpha.0",
+  "version": "1.6.2-alpha.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.104.1-alpha.0",
+    "@hero-design/rn": "^8.104.1-alpha.3",
     "hero-editor": "^1.15.5"
   },
   "peerDependencies": {

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1583,6 +1583,7 @@ exports[`theme returns correct theme object 1`] = `
         "body": "#001f23",
         "danger": "#f46363",
         "disabled": "#bfc1c5",
+        "inactive": "#808f91",
         "info": "#355bfb",
         "inverted": "#ffffff",
         "muted": "#4d6265",