@hero-design/rn 8.94.0 → 8.97.0

package/locales/en_AU.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_AU.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+export { locale as default };

package/locales/en_CA.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_CA.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+export { locale as default };

package/locales/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var locales_en_AU = require('./en_AU.js');
+var locales_en_CA = require('./en_CA.js');
+
+var index = {
+    'en-AU': locales_en_AU,
+    'en-CA': locales_en_CA,
+};
+
+module.exports = index;

package/locales/index.mjs

@@ -0,0 +1,9 @@
+import locale from './en_AU.mjs';
+import locale$1 from './en_CA.mjs';
+
+var index = {
+    'en-AU': locale,
+    'en-CA': locale$1,
+};
+
+export { index as default };

package/locales/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/locales/types.mjs

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.94.0",
+  "version": "8.97.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.46.0",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.30.0",
     "hero-editor": "^1.15.5",
     "nanoid": "^5.0.9"
   },
@@ -64,6 +64,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^9.1.0",
     "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
@@ -81,7 +82,7 @@
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "^0.74.5",
+    "react-native": "0.74.5",
     "react-native-gesture-handler": "^2.15.0",
     "react-native-linear-gradient": "2.8.3",
     "react-native-pager-view": "^6.2.1",

package/rollup.config.mjs

@@ -7,7 +7,8 @@ import replace from '@rollup/plugin-replace';
 import copy from 'rollup-plugin-copy';
 import flow from 'rollup-plugin-flow';
 import { visualizer } from 'rollup-plugin-visualizer';
-
+import glob from 'glob';
+import { fileURLToPath } from 'node:url';
 import pkg from './package.json' assert { type: 'json' };
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
@@ -16,60 +17,98 @@ const generateBuildStats = process.env.GENERATE_BUILD_STATS === 'true';
 const bundleTemplate = process.env.BUNDLE_TEMPLATE || 'treemap';
 const fileName = process.env.FILE_NAME || `stats/${pkg.version}/rn-stats.html`;
 
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-      interop: 'compat',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-      interop: 'compat',
-    },
-  ],
-  external: [
-    'react',
-    'react-native',
-    'react-native-safe-area-context',
-    'react-native-svg',
-    '@react-native-community/datetimepicker',
-    '@react-native-community/slider',
-    'react-native-gesture-handler',
-    'react-native-webview',
-    'react-native-pager-view',
-    'react-native-vector-icons',
-    'react-native-linear-gradient',
-    '@hero-design/react-native-month-year-picker',
-    '@ptomasroos/react-native-multi-slider',
-  ],
-  plugins: [
-    replace({
-      'process.env.NODE_ENV': JSON.stringify('production'),
-    }),
-    nodeResolve({ extensions, browser: true }),
-    flow(),
-    commonjs(),
-    json(),
-    typescript({ tsconfig: './tsconfig.rollup.json' }),
-    babel({ extensions, babelHelpers: 'bundled' }),
-    copy({
-      targets: [
-        {
-          src: 'assets/fonts/hero-icons-mobile.ttf',
-          dest: 'lib/assets/fonts',
-        },
-      ],
-    }),
-    ...(generateBuildStats
-      ? [
-          visualizer({
-            filename: fileName,
-            template: bundleTemplate,
-          }),
-        ]
-      : []),
-  ],
-};
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+        interop: 'compat',
+      },
+      {
+        file: pkg.module,
+        format: 'es',
+        interop: 'compat',
+      },
+    ],
+    external: [
+      'react',
+      'react-native',
+      'react-native-safe-area-context',
+      'react-native-svg',
+      '@react-native-community/datetimepicker',
+      '@react-native-community/slider',
+      'react-native-gesture-handler',
+      'react-native-webview',
+      'react-native-pager-view',
+      'react-native-vector-icons',
+      'react-native-linear-gradient',
+      '@hero-design/react-native-month-year-picker',
+      '@ptomasroos/react-native-multi-slider',
+    ],
+    plugins: [
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
+      nodeResolve({ extensions, browser: true }),
+      flow(),
+      commonjs(),
+      json(),
+      typescript({ tsconfig: './tsconfig.rollup.json' }),
+      babel({ extensions, babelHelpers: 'bundled' }),
+      copy({
+        targets: [
+          {
+            src: 'assets/fonts/hero-icons-mobile.ttf',
+            dest: 'lib/assets/fonts',
+          },
+        ],
+      }),
+      ...(generateBuildStats
+        ? [
+            visualizer({
+              filename: fileName,
+              template: bundleTemplate,
+            }),
+          ]
+        : []),
+    ],
+  },
+  {
+    input: Object.fromEntries(
+      glob.sync('src/locales/*.ts').map((file) => [
+        // This remove `src/` as well as the file extension from each
+        // file, so e.g. src/nested/foo.js becomes locales/foo
+        `locales/${file.split('/').pop().split('.')[0]}`,
+        // This expands the relative paths to absolute paths, so e.g.
+        // src/nested/foo becomes /project/src/nested/foo.js
+        fileURLToPath(new URL(file, import.meta.url)),
+      ])
+    ),
+    output: [
+      {
+        format: 'es',
+        interop: 'auto',
+        dir: '.',
+        entryFileNames: '[name].mjs',
+      },
+      {
+        format: 'cjs',
+        interop: 'auto',
+        dir: '.',
+        entryFileNames: '[name].js',
+      },
+    ],
+    plugins: [
+      typescript({
+        tsconfig: './tsconfig.rollup.json',
+        declaration: false,
+        exclude: ['src/**/*.spec.ts', 'src/**/*.spec.tsx'],
+      }),
+      copy({
+        targets: [{ src: 'types/locales/*.ts', dest: 'locales' }],
+      }),
+    ],
+  },
+];

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,13 +1,11 @@
-import DateTimePicker from '@react-native-community/datetimepicker';
-import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
-import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import TextInput from '../TextInput';
+import AndroidDatePickerDialog from './Dialog/AndroidDialog';
+import useCalculateDate from './hooks/useCalculateDate';
+import useFormatDate from './hooks/useFormatDate';
 import type { DatePickerProps } from './types';
-import useCalculateDate from './useCalculateDate';
-import { useTheme } from '../../theme';
 
 type DatePickerAndroidProps = Omit<
   DatePickerProps,
@@ -22,7 +20,7 @@ const DatePickerAndroid = ({
   label,
   placeholder,
   onChange,
-  displayFormat = 'dd/MM/yyyy',
+  displayFormat,
   disabled = false,
   required,
   error,
@@ -30,13 +28,18 @@ const DatePickerAndroid = ({
   style,
   testID,
   variant = 'default',
+  renderSelectedValue,
+  locale,
 }: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
-  const displayValue = value ? formatDate(displayFormat, value) : '';
-  const pickerInitValue = value || new Date();
+
+  const { displayValue, format } = useFormatDate({
+    displayFormat,
+    locale,
+    value,
+  });
 
   useCalculateDate({ minDate, maxDate, onChange, value });
-  const theme = useTheme();
 
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
@@ -45,45 +48,36 @@ const DatePickerAndroid = ({
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
-          placeholder={placeholder || displayFormat}
+          placeholder={placeholder || format}
           disabled={disabled}
           error={error}
           required={required}
           helpText={helpText}
           style={style}
           testID={testID}
+          renderInputValue={
+            renderSelectedValue !== undefined && !!value
+              ? (props) =>
+                  renderSelectedValue(
+                    {
+                      date: value,
+                      formattedDateString: displayValue,
+                    },
+                    props
+                  )
+              : undefined
+          }
         />
       </View>
-      {open && variant === 'month-year' ? (
-        <MonthYearPickerDialogueAndroid
-          themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
-          value={value}
-          minimumDate={minDate}
-          maximumDate={maxDate}
-          onChange={(action, date) => {
-            setOpen(false);
-            if (action === 'dateSetAction' && !!date) {
-              onChange(date);
-            }
-          }}
-        />
-      ) : null}
-      {open && variant === 'default' ? (
-        <DateTimePicker
-          testID="datePickerAndroid"
-          mode="date"
-          value={pickerInitValue}
-          minimumDate={minDate}
-          maximumDate={maxDate}
-          display="default"
-          onChange={(_: any, date: Date | undefined) => {
-            setOpen(false);
-            if (date) {
-              onChange(date);
-            }
-          }}
-        />
-      ) : null}
+      <AndroidDatePickerDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        value={value}
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={onChange}
+        variant={variant}
+      />
     </TouchableOpacity>
   );
 };

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,4 +1,3 @@
-import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { Platform, ScrollView, TouchableOpacity, View } from 'react-native';
 
@@ -6,8 +5,9 @@ import BottomSheet from '../BottomSheet';
 import Button from '../Button';
 import Calendar, { CalendarProps } from '../Calendar';
 import TextInput from '../TextInput';
+import useCalculateDate from './hooks/useCalculateDate';
+import useFormatDate from './hooks/useFormatDate';
 import type { DatePickerProps } from './types';
-import useCalculateDate from './useCalculateDate';
 
 const InternalCalendar = ({
   minDate,
@@ -68,7 +68,7 @@ const DatePickerCalendar = ({
   placeholder,
   onChange,
   confirmLabel,
-  displayFormat = 'dd/MM/yyyy',
+  displayFormat,
   disabled = false,
   required,
   error,
@@ -78,13 +78,20 @@ const DatePickerCalendar = ({
   monthPickerConfirmLabel,
   monthPickerCancelLabel,
   supportedOrientations = ['portrait'],
+  renderSelectedValue,
+  locale,
 }: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
   const [monthPickerVisible, setMonthPickerVisible] = useState(false);
   const shouldHideToolbar = Platform.OS === 'ios' && monthPickerVisible;
 
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
-  const displayValue = value ? formatDate(displayFormat, value) : '';
+
+  const { displayValue } = useFormatDate({
+    value,
+    displayFormat,
+    locale,
+  });
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
@@ -102,6 +109,18 @@ const DatePickerCalendar = ({
           helpText={helpText}
           testID={testID}
           style={style}
+          renderInputValue={
+            renderSelectedValue !== undefined && !!value
+              ? (props) =>
+                  renderSelectedValue(
+                    {
+                      date: value,
+                      formattedDateString: displayValue,
+                    },
+                    props
+                  )
+              : undefined
+          }
         />
       </View>
       <BottomSheet

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,16 +1,12 @@
-import DateTimePicker from '@react-native-community/datetimepicker';
-import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
-import { MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-picker';
-import { useTheme } from '../../theme';
-import BottomSheet from '../BottomSheet';
-import Button from '../Button';
+import { useLocale } from '../LocaleProvider/hooks';
 import TextInput from '../TextInput';
-import { StyledPickerWrapper } from './StyledDatePicker';
+import IOSDatePickerDialog from './Dialog/IOSDialog';
+import useCalculateDate from './hooks/useCalculateDate';
+import useFormatDate from './hooks/useFormatDate';
 import type { DatePickerProps } from './types';
-import useCalculateDate, { getDateValue } from './useCalculateDate';
 
 type DatePickerIOSProps = Omit<
   DatePickerProps,
@@ -26,7 +22,7 @@ const DatePickerIOS = ({
   placeholder,
   onChange,
   confirmLabel,
-  displayFormat = 'dd/MM/yyyy',
+  displayFormat,
   disabled = false,
   required,
   error,
@@ -36,13 +32,15 @@ const DatePickerIOS = ({
   supportedOrientations = ['portrait'],
   variant = 'default',
   locale,
+  renderSelectedValue,
 }: DatePickerIOSProps) => {
-  const [selectingDate, setSelectingDate] = useState<Date>(
-    getDateValue(value || new Date(), minDate, maxDate)
-  );
   const [open, setOpen] = useState(false);
-  const displayValue = value ? formatDate(displayFormat, value) : '';
-  const theme = useTheme();
+  const { lang: defaultLocale } = useLocale();
+  const { displayValue, format } = useFormatDate({
+    displayFormat,
+    locale,
+    value,
+  });
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
@@ -53,69 +51,40 @@ const DatePickerIOS = ({
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
-          placeholder={placeholder || displayFormat}
+          placeholder={placeholder || format}
           disabled={disabled}
           error={error}
           required={required}
           helpText={helpText}
           testID={testID}
           style={style}
+          renderInputValue={
+            renderSelectedValue !== undefined && !!value
+              ? (props) =>
+                  renderSelectedValue(
+                    {
+                      date: value,
+                      formattedDateString: displayValue,
+                    },
+                    props
+                  )
+              : undefined
+          }
         />
       </View>
-      <BottomSheet
+      <IOSDatePickerDialog
+        value={value}
+        onChange={onChange}
         open={open}
-        onRequestClose={() => setOpen(false)}
-        header={label}
-        footer={
-          <Button
-            variant="text"
-            text={confirmLabel}
-            onPress={() => {
-              if (selectingDate) {
-                onChange(selectingDate);
-              }
-              setOpen(false);
-            }}
-          />
-        }
+        onClose={() => setOpen(false)}
+        confirmLabel={confirmLabel}
+        locale={locale || defaultLocale}
         supportedOrientations={supportedOrientations}
-      >
-        <StyledPickerWrapper>
-          {variant === 'month-year' ? (
-            <MonthYearPickerViewIOS
-              value={value}
-              locale={locale}
-              minimumDate={minDate}
-              textColor={theme.colors.onDefaultGlobalSurface}
-              maximumDate={maxDate}
-              onChange={(date: Date | undefined) => {
-                if (date) {
-                  setSelectingDate(date);
-                }
-              }}
-              style={{ flex: 1 }}
-            />
-          ) : null}
-          {variant === 'default' ? (
-            <DateTimePicker
-              locale={locale}
-              testID="datePickerIOS"
-              value={selectingDate}
-              minimumDate={minDate}
-              maximumDate={maxDate}
-              mode="date"
-              onChange={(_: any, date: Date | undefined) => {
-                if (date) {
-                  setSelectingDate(date);
-                }
-              }}
-              display="spinner"
-              style={{ flex: 1 }}
-              textColor={theme.colors.onDefaultGlobalSurface}
-            />
-          ) : null}
-        </StyledPickerWrapper>
-      </BottomSheet>
+        variant={variant}
+        label={label}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
     </TouchableOpacity>
   );
 };

package/src/components/DatePicker/Dialog/AndroidDialog.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from '@react-native-community/datetimepicker';
+import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
+import { DatePickerDialogProps } from './type';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+
+export type AndroidDatePickerDialogProps = Omit<
+  DatePickerDialogProps,
+  'supportedOrientations' | 'confirmLabel' | 'label' | 'locale'
+>;
+
+const AndroidDatePickerDialog = ({
+  open,
+  onClose,
+  value,
+  minDate,
+  maxDate,
+  onChange,
+  testID,
+  variant = 'default',
+}: AndroidDatePickerDialogProps) => {
+  const theme = useTheme();
+  if (!open) return null;
+
+  const pickerInitValue = value || new Date();
+
+  return (
+    <Box testID={testID}>
+      {open && variant === 'month-year' ? (
+        <Box testID={testID}>
+          <MonthYearPickerDialogueAndroid
+            themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
+            value={value}
+            minimumDate={minDate}
+            maximumDate={maxDate}
+            onChange={(action, date) => {
+              onClose();
+              if (action === 'dateSetAction' && !!date) {
+                onChange(date);
+              }
+            }}
+          />
+        </Box>
+      ) : null}
+      {open && variant === 'default' ? (
+        <DateTimePicker
+          testID="datePickerAndroid"
+          mode="date"
+          value={pickerInitValue}
+          minimumDate={minDate}
+          maximumDate={maxDate}
+          display="default"
+          onChange={(_: DateTimePickerEvent, date: Date | undefined) => {
+            onClose();
+            if (date) {
+              onChange(date);
+            }
+          }}
+        />
+      ) : null}
+    </Box>
+  );
+};
+
+export default AndroidDatePickerDialog;