@widergy/mobile-ui 2.16.0 → 2.17.1

package/lib/components/UTDatePicker/layout.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { array, bool, func, object, string } from 'prop-types';
+
+import UTBaseInputField from '../UTBaseInputField';
+import UTBottomSheet from '../UTBottomSheet';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+import UTValidation from '../UTValidation';
+import { TEST_IDS } from '../../constants/testIds';
+
+import Calendar from './components/Calendar';
+import { VARIANTS } from './constants';
+import styles from './styles';
+
+const { UTDatePicker: datePickerTestIds } = TEST_IDS;
+
+const UTDatePickerLayout = ({
+  disabled,
+  displayPlaceholder,
+  displayValue,
+  errorMessage,
+  handleClose,
+  handleDaySelect,
+  hasError,
+  helpText,
+  inputStyle,
+  isOpen,
+  maxDate,
+  minDate,
+  modalProps,
+  onPress,
+  pickedDate,
+  readOnly,
+  required,
+  rightAdornments,
+  style,
+  title,
+  variant
+}) => (
+  <View style={[styles.root, style?.root]} testID={datePickerTestIds.root}>
+    {!!title && <UTFieldLabel required={required}>{title}</UTFieldLabel>}
+
+    <Pressable onPress={onPress} style={styles.pressable}>
+      <UTBaseInputField
+        alwaysShowPlaceholder
+        dataTestId={datePickerTestIds.input}
+        disabled={disabled}
+        editable={false}
+        error={hasError}
+        placeholder={displayPlaceholder}
+        readOnly={readOnly}
+        rightAdornments={rightAdornments}
+        style={inputStyle}
+        value={displayValue}
+      />
+    </Pressable>
+
+    {!!helpText && (
+      <UTLabel colorTheme="gray" variant="small">
+        {helpText}
+      </UTLabel>
+    )}
+
+    {variant === VARIANTS.select && !!errorMessage && (
+      <UTValidation
+        dataTestId={datePickerTestIds.errorMessage}
+        validationData={[{ items: [{ status: 'error', text: errorMessage }] }]}
+      />
+    )}
+
+    <UTBottomSheet
+      adjustableHeight
+      onClose={handleClose}
+      visible={isOpen}
+      withBodyPadding={false}
+      {...modalProps}
+    >
+      <Calendar maxDate={maxDate} minDate={minDate} onDaySelect={handleDaySelect} pickedDate={pickedDate} />
+    </UTBottomSheet>
+  </View>
+);
+
+UTDatePickerLayout.propTypes = {
+  disabled: bool,
+  displayPlaceholder: string,
+  displayValue: string,
+  errorMessage: string,
+  handleClose: func,
+  handleDaySelect: func,
+  hasError: bool,
+  helpText: string,
+  inputStyle: object,
+  isOpen: bool,
+  maxDate: string,
+  minDate: string,
+  modalProps: object,
+  onPress: func,
+  pickedDate: object,
+  readOnly: bool,
+  required: bool,
+  rightAdornments: array,
+  style: object,
+  title: string,
+  variant: string
+};
+
+export default UTDatePickerLayout;

package/lib/components/UTDatePicker/proptypes.js

@@ -0,0 +1,20 @@
+import { bool, elementType, func, object, oneOf, shape, string } from 'prop-types';
+
+export const propTypes = {
+  clearable: bool,
+  CustomIcon: elementType,
+  disabled: bool,
+  error: string,
+  helpText: string,
+  modalProps: object,
+  onChange: func,
+  placeholder: string,
+  range: shape({ maxDate: string, minDate: string }),
+  readOnly: bool,
+  required: bool,
+  size: oneOf(['sm', 'md']),
+  style: shape({ root: object }),
+  title: string,
+  value: string,
+  variant: oneOf(['select', 'picker'])
+};

package/lib/components/UTDatePicker/styles.js

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  calendarRoot: {
+    paddingHorizontal: 24,
+    paddingTop: 16
+  },
+  dayCell: {
+    flex: 1,
+    paddingVertical: 2,
+    textAlign: 'center'
+  },
+  month: {
+    gap: 2,
+    minHeight: 260
+  },
+  nav: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 24
+  },
+  navLabel: {
+    flex: 1,
+    textAlign: 'center'
+  },
+  navSpacer: {
+    width: 36
+  },
+  pickerColumn: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  pickerContainer: {
+    flexDirection: 'row',
+    gap: 8,
+    height: 260
+  },
+  pickerScroll: {
+    height: 260
+  },
+  pickerScrollContent: {
+    paddingBottom: 220
+  },
+  pressable: {
+    width: '100%'
+  },
+  root: {
+    gap: 8
+  },
+  week: {
+    flexDirection: 'row'
+  },
+  yearItem: {
+    alignItems: 'center',
+    borderRadius: 8,
+    height: 40,
+    justifyContent: 'center',
+    width: '100%'
+  }
+});
+
+export default styles;

package/lib/components/UTDatePicker/theme.js

@@ -0,0 +1,18 @@
+export const getDayCellButtonStyle = (selected, theme) => ({
+  root: {
+    alignItems: 'center',
+    flex: 1,
+    height: 36,
+    justifyContent: 'center',
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    ...(selected && {
+      backgroundColor: theme.Palette.accent['04'],
+      borderRadius: 18
+    })
+  }
+});
+
+export const getYearItemStyle = (selected, theme) => ({
+  backgroundColor: selected ? theme.Palette.accent['04'] : undefined
+});

package/lib/components/UTDatePicker/utils.js

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import { DAY_UNIT, MONTH_UNIT, OUTPUT_LABEL_MASK, YEAR_RANGE_AFTER, YEAR_RANGE_BEFORE } from './constants';
+
+dayjs.extend(customParseFormat);
+
+export const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, DAY_UNIT);
+
+export const dateMatchesFormat = (date, targetFormat) => dayjs(date, targetFormat, true).isValid();
+
+export const getFinalDate = ({ date, maxDate, minDate }) => {
+  const formattedDate = dayjs(date);
+  if (maxDate && formattedDate?.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK)))
+    return dayjs(maxDate, OUTPUT_LABEL_MASK);
+  if (minDate && formattedDate?.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK)))
+    return dayjs(minDate, OUTPUT_LABEL_MASK);
+  return formattedDate;
+};
+
+export const getWeeks = month => {
+  const firstDay = month.startOf(MONTH_UNIT);
+  const lastDay = month.endOf(MONTH_UNIT);
+  const startDate = firstDay.subtract(firstDay.day(), DAY_UNIT);
+
+  const weeks = [];
+  let current = startDate;
+
+  do {
+    const weekStart = current;
+    weeks.push(Array.from({ length: 7 }, (_, i) => weekStart.add(i, DAY_UNIT)));
+    current = current.add(7, DAY_UNIT);
+  } while (current.isBefore(lastDay) || current.isSame(lastDay, DAY_UNIT));
+
+  return weeks;
+};
+
+export const getYearRange = (minDateStr, maxDateStr) => {
+  const currentYear = dayjs().year();
+  const minYear = minDateStr ? dayjs(minDateStr, OUTPUT_LABEL_MASK).year() : currentYear - YEAR_RANGE_BEFORE;
+  const maxYear = maxDateStr ? dayjs(maxDateStr, OUTPUT_LABEL_MASK).year() : currentYear + YEAR_RANGE_AFTER;
+  const years = [];
+  for (let y = maxYear; y >= minYear; y--) years.push(y);
+  return years;
+};
+
+export const autoFormatDate = val => {
+  const digits = val.replace(/\D/g, '').slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+};

package/lib/constants/testIds.js

@@ -44,6 +44,19 @@ export const TEST_ID_CONSTANTS = {
 
 export const TEST_IDS = {
   modal: 'modal',
+  UTDatePicker: {
+    calendar: 'UTDatePicker.calendar',
+    calendarMonthYear: 'UTDatePicker.calendar.monthYear',
+    calendarNextBtn: 'UTDatePicker.calendar.nextBtn',
+    calendarPrevBtn: 'UTDatePicker.calendar.prevBtn',
+    errorMessage: 'UTDatePicker.errorMessage',
+    input: 'UTDatePicker.input',
+    monthItem: 'UTDatePicker.monthItem',
+    monthView: 'UTDatePicker.monthView',
+    root: 'UTDatePicker.root',
+    yearItem: 'UTDatePicker.yearItem',
+    yearView: 'UTDatePicker.yearView'
+  },
   roundView: 'roundView',
   skeletonLoader: 'skeletonLoader',
   topbar: {

package/lib/index.js

@@ -49,6 +49,7 @@ export { default as UTCuit } from './components/UTCuit';
 export { default as UTCheckList } from './components/UTCheckList';
 export { default as UTDataCategory } from './components/UTDataCategory';
 export { default as UTDataElement } from './components/UTDataElement';
+export { default as UTDatePicker } from './components/UTDatePicker';
 export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTIcon } from './components/UTIcon';
 export { default as UTImage } from './components/UTImage';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "2.16.0",
+  "version": "2.17.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -43,6 +43,7 @@
     "@tabler/icons-react-native": "^3.34.1",
     "@widergy/web-utils": "^2.0.0",
     "core-js": "3",
+    "dayjs": "^1.11.10",
     "deprecated-react-native-prop-types": "^5.0.0",
     "expo-document-picker": "^13.1.6",
     "expo-image-manipulator": "^13.1.7",
@@ -73,12 +74,12 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.3.0",
-    "@widergy/semantic-release-package-config": "^1.0.0",
-    "@widergy/eslint-config": "^1.0.0",
     "@react-native/babel-preset": "0.73.0",
+    "@widergy/eslint-config": "^1.0.0",
+    "@widergy/semantic-release-package-config": "^1.0.0",
+    "babel-jest": "^29.6.2",
     "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-jest": "^29.6.2",
     "babel-preset-minify": "^0.5.2",
     "eslint": "^9.38.0",
     "eslint-config-airbnb": "^19.0.4",