From ae03b20f76dec102160258ee41f2903b232ad68a Mon Sep 17 00:00:00 2001 From: cheton Date: Sat, 21 Dec 2024 21:01:57 +0800 Subject: [PATCH] feat(react/date-pickers)!: replace `Calendar` with `DateCalendar` BREAKING CHANGE: The `Calendar` component has been deprecated. Use `DateCalendar` component instead. --- packages/react-docs/config/sidebar-routes.js | 2 +- .../index.page.mdx | 10 +-- .../{calendar => date-calendar}/usage.js | 16 ++--- .../date-pickers/date-picker/usage.js | 10 +-- packages/react/__tests__/index.test.js | 3 +- .../src/date-pickers/Calendar/context.js | 10 --- .../react/src/date-pickers/Calendar/index.js | 3 - .../DateCalendar.js} | 71 ++++++++++++++----- .../MonthDate/Day.js | 6 +- .../MonthDate/DaysOfWeek.js | 6 +- .../MonthDate/MonthDate.js | 0 .../MonthDate/Week.js | 0 .../MonthDate/Weeks.js | 6 +- .../MonthDate/index.js | 0 .../YearMonthPicker/YearMonthPicker.js | 6 +- .../YearMonthPicker/index.js | 0 .../src/date-pickers/DateCalendar/context.js | 10 +++ .../src/date-pickers/DateCalendar/index.js | 3 + .../{Calendar => DateCalendar}/styles.js | 4 +- .../useDateCalendar.js} | 8 +-- .../src/date-pickers/DatePicker/DatePicker.js | 14 ++-- packages/react/src/date-pickers/index.js | 4 +- packages/react/src/deprecated/Calendar.js | 26 +++++++ packages/react/src/index.js | 1 + 24 files changed, 137 insertions(+), 82 deletions(-) rename packages/react-docs/pages/components/date-pickers/{calendar => date-calendar}/index.page.mdx (91%) rename packages/react-docs/pages/components/date-pickers/{calendar => date-calendar}/usage.js (95%) delete mode 100644 packages/react/src/date-pickers/Calendar/context.js delete mode 100644 packages/react/src/date-pickers/Calendar/index.js rename packages/react/src/date-pickers/{Calendar/Calendar.js => DateCalendar/DateCalendar.js} (90%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/MonthDate/Day.js (94%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/MonthDate/DaysOfWeek.js (88%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/MonthDate/MonthDate.js (100%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/MonthDate/Week.js (100%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/MonthDate/Weeks.js (90%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/MonthDate/index.js (100%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/YearMonthPicker/YearMonthPicker.js (97%) rename packages/react/src/date-pickers/{Calendar => DateCalendar}/YearMonthPicker/index.js (100%) create mode 100644 packages/react/src/date-pickers/DateCalendar/context.js create mode 100644 packages/react/src/date-pickers/DateCalendar/index.js rename packages/react/src/date-pickers/{Calendar => DateCalendar}/styles.js (98%) rename packages/react/src/date-pickers/{Calendar/useCalendar.js => DateCalendar/useDateCalendar.js} (51%) create mode 100644 packages/react/src/deprecated/Calendar.js diff --git a/packages/react-docs/config/sidebar-routes.js b/packages/react-docs/config/sidebar-routes.js index 2e706cd90c..e35b0efdd2 100644 --- a/packages/react-docs/config/sidebar-routes.js +++ b/packages/react-docs/config/sidebar-routes.js @@ -139,7 +139,7 @@ export const routes = [ { title: 'DATE PICKERS', heading: true }, { title: 'Overview', path: 'components/date-pickers' }, - { title: 'Calendar', path: 'components/date-pickers/calendar' }, + { title: 'DateCalendar', path: 'components/date-pickers/date-calendar' }, { title: 'DatePicker', path: 'components/date-pickers/date-picker' }, { title: 'FEEDBACK', heading: true }, diff --git a/packages/react-docs/pages/components/date-pickers/calendar/index.page.mdx b/packages/react-docs/pages/components/date-pickers/date-calendar/index.page.mdx similarity index 91% rename from packages/react-docs/pages/components/date-pickers/calendar/index.page.mdx rename to packages/react-docs/pages/components/date-pickers/date-calendar/index.page.mdx index 2f8fd68df0..ecd411bf96 100644 --- a/packages/react-docs/pages/components/date-pickers/calendar/index.page.mdx +++ b/packages/react-docs/pages/components/date-pickers/date-calendar/index.page.mdx @@ -1,10 +1,10 @@ -# Calendar +# DateCalendar ## Import ```js import { - Calendar, + DateCalendar, } from '@tonic-ui/react'; ``` @@ -14,12 +14,11 @@ import { ## Props -### Calendar +### DateCalendar | Name | Type | Default | Description | | :--- | :--- | :------ | :---------- | -| date | Date | | The selected date. | -| defaultDate | Date | | The default selected date. | +| defaultValue | Date | | The default selected date. | | firstDayOfWeek | number | 0 | The first day of the week.
0 = Sunday
1 = Monday
2 = Tuesday
3 = Wednesday
4 = Thursday
5 = Friday
6 = Saturday | | formatDate | function | | A callback called to return the formatted date string in the given format.

Signature
`function(date, format, options) => void`
_date_: The original date.
_format_: The string of [format tokens](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
_options_: An object with options. | | minDate | Date | | The minimum date that can be selected. | @@ -27,3 +26,4 @@ import { | onChange | function | | A callback called when the value (the selected date) changes.

Signature:
`function(value) => void`
_value_: The selected date. | | onError | function | | An error-first callback called when the date validation returns an error (or the date is valid after error).

Signature
`function(error, value) => void`
_error_: The error message. It will be `undefined` if the date is valid after error.
_value_: The selected date. | | shouldDisableDate | function | | Disable specific date.

Signature:
`function(date) => boolean`
_date_: The date to check.
_returns (boolean)_: Return `true` if the date will be disabled. | +| value | Date | | The selected date. | diff --git a/packages/react-docs/pages/components/date-pickers/calendar/usage.js b/packages/react-docs/pages/components/date-pickers/date-calendar/usage.js similarity index 95% rename from packages/react-docs/pages/components/date-pickers/calendar/usage.js rename to packages/react-docs/pages/components/date-pickers/date-calendar/usage.js index 405f8afc66..84c244804c 100644 --- a/packages/react-docs/pages/components/date-pickers/calendar/usage.js +++ b/packages/react-docs/pages/components/date-pickers/date-calendar/usage.js @@ -2,8 +2,8 @@ import { Box, Button, ButtonGroup, - Calendar, Code, + DateCalendar, Divider, Flex, Input, @@ -90,8 +90,8 @@ const App = () => { )} - { const options = { @@ -102,11 +102,9 @@ const App = () => { maxDate={maxDate ? new Date(maxDate) : undefined} minDate={minDate ? new Date(minDate) : undefined} onChange={(nextDate) => { - console.log('onChange:', nextDate); setDate(nextDate); }} onError={(error, value) => { - console.log('onError:', error); setError(error); }} shouldDisableDate={(date) => { @@ -139,8 +137,8 @@ const App = () => { { - const value = event.target.getAttribute('value'); - setLocale(value); + const localeValue = event.target.getAttribute('value'); + setLocale(localeValue); }} maxHeight={240} minWidth={100} @@ -170,13 +168,13 @@ const App = () => { {`// format\nimport format from 'date-fns/format';\n\n// locale\nimport enLocale from 'date-fns/locale/en-US'; // English (United States)\nimport deLocale from 'date-fns/locale/de'; // Deutsch\nimport esLocale from 'date-fns/locale/es'; // Español\nimport frLocale from 'date-fns/locale/fr'; // Français\nimport itLocale from 'date-fns/locale/it'; // Italiano\nimport jaLocale from 'date-fns/locale/ja'; // 日本語\nimport koLocale from 'date-fns/locale/ko'; // 한국어\nimport zhCNLocale from 'date-fns/locale/zh-CN'; // 简体中文\nimport zhTWLocale from 'date-fns/locale/zh-TW'; // 繁體中文`} - {`// Calendar component\nformatDate={(date, format, options) => {\n return format(date, format, { locale: enLocale });\n}}`} + {`// DateCalendar component\nformatDate={(date, format, options) => {\n return format(date, format, { locale: enLocale });\n}}`} - Calendar props + DateCalendar props diff --git a/packages/react-docs/pages/components/date-pickers/date-picker/usage.js b/packages/react-docs/pages/components/date-pickers/date-picker/usage.js index 4904ab4a08..877f71f21f 100644 --- a/packages/react-docs/pages/components/date-pickers/date-picker/usage.js +++ b/packages/react-docs/pages/components/date-pickers/date-picker/usage.js @@ -94,7 +94,7 @@ const disableWeekends = (date) => { const App = () => { const [maxDate, setMaxDate] = useState(''); const [minDate, setMinDate] = useState(''); - const [closeOnSelect, toggleCloseOnSelect] = useToggle(false); + const [closeOnSelect, toggleCloseOnSelect] = useToggle(true); const [dateOption, changeDateOptionBy] = useSelection('none'); const [firstDayOfWeek, changeFirstDayOfWeekBy] = useSelection(0); const [inputFormat, changeInputFormatBy] = useSelection(inputFormats[0]); @@ -139,15 +139,12 @@ const App = () => { maxDate={maxDate ? new Date(maxDate) : undefined} minDate={minDate ? new Date(minDate) : undefined} onChange={(nextValue) => { - console.log('onChange:', nextValue); setValue(nextValue); }} onError={(error, value) => { - console.log('onError:', error, value); setError(error); }} shouldDisableDate={(date) => { - console.log('shouldDisableDate:', date, shouldDisableDateOption); if (shouldDisableDateOption === 'weekdays') { return disableWeekdays(date); } @@ -159,7 +156,6 @@ const App = () => { value={value} inputFormat={inputFormat} renderInput={({ error: inputError, inputProps }) => { - console.log('renderInput:', inputError, inputProps); return ( { { - const value = event.target.getAttribute('value'); - setLocale(value); + const localeValue = event.target.getAttribute('value'); + setLocale(localeValue); }} maxHeight={240} minWidth={100} diff --git a/packages/react/__tests__/index.test.js b/packages/react/__tests__/index.test.js index 1221a4e6de..8ad2e2bf7d 100644 --- a/packages/react/__tests__/index.test.js +++ b/packages/react/__tests__/index.test.js @@ -4,6 +4,7 @@ test('should match expected exports', () => { const expectedExports = [ // deprecated 'AccordionCollapse', + 'Calendar', 'ToastProvider', 'useToast', @@ -61,7 +62,7 @@ test('should match expected exports', () => { 'CSSBaseline', // date-pickers - 'Calendar', + 'DateCalendar', 'DatePicker', // default-props diff --git a/packages/react/src/date-pickers/Calendar/context.js b/packages/react/src/date-pickers/Calendar/context.js deleted file mode 100644 index 993350d8fa..0000000000 --- a/packages/react/src/date-pickers/Calendar/context.js +++ /dev/null @@ -1,10 +0,0 @@ -import { createContext } from 'react'; - -const CalendarContext = createContext(); - -const CalendarProvider = CalendarContext.Provider; - -export { - CalendarContext, - CalendarProvider, -}; diff --git a/packages/react/src/date-pickers/Calendar/index.js b/packages/react/src/date-pickers/Calendar/index.js deleted file mode 100644 index abd4428bf5..0000000000 --- a/packages/react/src/date-pickers/Calendar/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Calendar from './Calendar'; - -export default Calendar; diff --git a/packages/react/src/date-pickers/Calendar/Calendar.js b/packages/react/src/date-pickers/DateCalendar/DateCalendar.js similarity index 90% rename from packages/react/src/date-pickers/Calendar/Calendar.js rename to packages/react/src/date-pickers/DateCalendar/DateCalendar.js index 95930f807a..51e0255008 100644 --- a/packages/react/src/date-pickers/Calendar/Calendar.js +++ b/packages/react/src/date-pickers/DateCalendar/DateCalendar.js @@ -1,8 +1,13 @@ -import { useConst, usePrevious } from '@tonic-ui/react-hooks'; +import { + useConst, + useOnceWhen, + usePrevious, +} from '@tonic-ui/react-hooks'; import { getActiveElement, getAllFocusable, isNullOrUndefined, + warnDeprecatedProps, } from '@tonic-ui/utils'; import differenceInCalendarDays from 'date-fns/differenceInCalendarDays'; import addMonths from 'date-fns/addMonths'; @@ -21,10 +26,10 @@ import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'rea import { Box } from '../../box'; import { useDefaultProps } from '../../default-props'; import { validateDate } from '../validation'; -import { CalendarProvider } from './context'; +import { DateCalendarProvider } from './context'; import MonthDate from './MonthDate'; import YearMonthPicker from './YearMonthPicker'; -import { useCalendarStyle } from './styles'; +import { useDateCalendarStyle } from './styles'; const getMemoizedState = memoize(state => ({ ...state })); @@ -46,11 +51,13 @@ const mapValueToEndOfDay = (value) => { return (isDate(date) && isValid(date)) ? endOfDay(date) : null; }; -const Calendar = forwardRef((inProps, ref) => { - const { +const DateCalendar = forwardRef((inProps, ref) => { + let { + date: dateProp, // deprecated + defaultDate: defaultDateProp, // deprecated + children, // eslint-disable-line no-unused-vars - date: dateProp, - defaultDate: defaultDateProp, + defaultValue: defaultValueProp, firstDayOfWeek = 0, // 0 = Sunday, 1 = Monday, ... formatDate: formatDateProp, maxDate: maxDateProp, @@ -58,10 +65,36 @@ const Calendar = forwardRef((inProps, ref) => { onChange: onChangeProp, onError: onErrorProp, shouldDisableDate, + value: valueProp, ...rest - } = useDefaultProps({ props: inProps, name: 'Calendar' }); + } = useDefaultProps({ props: inProps, name: 'DateCalendar' }); + + { // deprecation warning + const prefix = `${DateCalendar.displayName}:`; + + useOnceWhen(() => { + warnDeprecatedProps('date', { + prefix, + alternative: 'value', + willRemove: true, + }); + }, (dateProp !== undefined)); + + useOnceWhen(() => { + warnDeprecatedProps('defaultDate', { + prefix, + alternative: 'defaultValue', + willRemove: true, + }); + }, (defaultDateProp !== undefined)); + + // TODO: remove `date` and `defaultDate` props in next major version + valueProp = valueProp ?? dateProp; + defaultValueProp = defaultValueProp ?? defaultDateProp; + } + const initialDate = useConst(() => { - const value = dateProp ?? defaultDateProp; + const value = valueProp ?? defaultValueProp; return mapValueToDate(value); }); const initialActiveDate = useConst(() => { @@ -117,12 +150,12 @@ const Calendar = forwardRef((inProps, ref) => { }, [date, onErrorProp, previousValidationError, validationError]); useEffect(() => { - const isControlled = (dateProp !== undefined); + const isControlled = (valueProp !== undefined); if (isControlled) { - const nextDate = dateProp; + const nextDate = valueProp; setDate(nextDate); } - }, [dateProp]); + }, [valueProp]); useEffect(() => { const isDateChanged = !!date && (date !== previousDate); @@ -155,13 +188,13 @@ const Calendar = forwardRef((inProps, ref) => { }, [activeDate]); // Re-run effect when activeDate changes const onChange = useCallback((nextDate) => { - const isControlled = (dateProp !== undefined); + const isControlled = (valueProp !== undefined); if (!isControlled) { setDate(nextDate); } onChangeProp?.(nextDate); - }, [dateProp, onChangeProp]); + }, [valueProp, onChangeProp]); const calendarMonthDateEventHandler = {}; @@ -428,10 +461,10 @@ const Calendar = forwardRef((inProps, ref) => { }); const tabIndex = -1; - const styleProps = useCalendarStyle({ tabIndex }); + const styleProps = useDateCalendarStyle({ tabIndex }); return ( - + { {...calendarMonthDateEventHandler} /> - + ); }); -Calendar.displayName = 'Calendar'; +DateCalendar.displayName = 'DateCalendar'; -export default Calendar; +export default DateCalendar; diff --git a/packages/react/src/date-pickers/Calendar/MonthDate/Day.js b/packages/react/src/date-pickers/DateCalendar/MonthDate/Day.js similarity index 94% rename from packages/react/src/date-pickers/Calendar/MonthDate/Day.js rename to packages/react/src/date-pickers/DateCalendar/MonthDate/Day.js index 128587e08a..26c963dc2e 100644 --- a/packages/react/src/date-pickers/Calendar/MonthDate/Day.js +++ b/packages/react/src/date-pickers/DateCalendar/MonthDate/Day.js @@ -8,7 +8,7 @@ import isSameMonth from 'date-fns/isSameMonth'; import React, { forwardRef } from 'react'; import { Box } from '../../../box'; import { useDayStyle } from '../styles'; -import useCalendar from '../useCalendar'; +import useDateCalendar from '../useDateCalendar'; const Day = forwardRef(( { @@ -17,7 +17,7 @@ const Day = forwardRef(( }, ref, ) => { - const calendarContext = useCalendar(); + const dateCalendarContext = useDateCalendar(); const { activeDate, date: selectedDate, @@ -27,7 +27,7 @@ const Day = forwardRef(( onChange, setActiveDate, shouldDisableDate, - } = { ...calendarContext }; + } = { ...dateCalendarContext }; const isSelectable = (() => { if (minDate && isBefore(date, minDate)) { return false; diff --git a/packages/react/src/date-pickers/Calendar/MonthDate/DaysOfWeek.js b/packages/react/src/date-pickers/DateCalendar/MonthDate/DaysOfWeek.js similarity index 88% rename from packages/react/src/date-pickers/Calendar/MonthDate/DaysOfWeek.js rename to packages/react/src/date-pickers/DateCalendar/MonthDate/DaysOfWeek.js index e3bc271d22..76f77bb1b3 100644 --- a/packages/react/src/date-pickers/Calendar/MonthDate/DaysOfWeek.js +++ b/packages/react/src/date-pickers/DateCalendar/MonthDate/DaysOfWeek.js @@ -3,16 +3,16 @@ import startOfWeek from 'date-fns/startOfWeek'; import React, { forwardRef } from 'react'; import { Box } from '../../../box'; import { Grid } from '../../../grid'; -import useCalendar from '../useCalendar'; +import useDateCalendar from '../useDateCalendar'; import { useDaysOfWeekStyle } from '../styles'; const DaysOfWeek = forwardRef((props, ref) => { - const calendarContext = useCalendar(); + const dateCalendarContext = useDateCalendar(); const { activeDate, firstDayOfWeek, formatDate, - } = { ...calendarContext }; + } = { ...dateCalendarContext }; const startDateOfWeek = startOfWeek(activeDate, { weekStartsOn: firstDayOfWeek, }); diff --git a/packages/react/src/date-pickers/Calendar/MonthDate/MonthDate.js b/packages/react/src/date-pickers/DateCalendar/MonthDate/MonthDate.js similarity index 100% rename from packages/react/src/date-pickers/Calendar/MonthDate/MonthDate.js rename to packages/react/src/date-pickers/DateCalendar/MonthDate/MonthDate.js diff --git a/packages/react/src/date-pickers/Calendar/MonthDate/Week.js b/packages/react/src/date-pickers/DateCalendar/MonthDate/Week.js similarity index 100% rename from packages/react/src/date-pickers/Calendar/MonthDate/Week.js rename to packages/react/src/date-pickers/DateCalendar/MonthDate/Week.js diff --git a/packages/react/src/date-pickers/Calendar/MonthDate/Weeks.js b/packages/react/src/date-pickers/DateCalendar/MonthDate/Weeks.js similarity index 90% rename from packages/react/src/date-pickers/Calendar/MonthDate/Weeks.js rename to packages/react/src/date-pickers/DateCalendar/MonthDate/Weeks.js index 2eb8e36ab2..2b7d45c162 100644 --- a/packages/react/src/date-pickers/Calendar/MonthDate/Weeks.js +++ b/packages/react/src/date-pickers/DateCalendar/MonthDate/Weeks.js @@ -5,7 +5,7 @@ import startOfMonth from 'date-fns/startOfMonth'; import startOfWeek from 'date-fns/startOfWeek'; import React, { forwardRef } from 'react'; import { Grid } from '../../../grid'; -import useCalendar from '../useCalendar'; +import useDateCalendar from '../useDateCalendar'; import Week from './Week'; const isWeekInMonth = (startDateOfWeek, activeDate) => { @@ -17,11 +17,11 @@ const Weeks = forwardRef(( props, ref, ) => { - const calendarContext = useCalendar(); + const dateCalendarContext = useDateCalendar(); const { activeDate, firstDayOfWeek, - } = { ...calendarContext }; + } = { ...dateCalendarContext }; const weeks = []; let startDateOfWeek = startOfWeek(startOfMonth(activeDate), { weekStartsOn: firstDayOfWeek, diff --git a/packages/react/src/date-pickers/Calendar/MonthDate/index.js b/packages/react/src/date-pickers/DateCalendar/MonthDate/index.js similarity index 100% rename from packages/react/src/date-pickers/Calendar/MonthDate/index.js rename to packages/react/src/date-pickers/DateCalendar/MonthDate/index.js diff --git a/packages/react/src/date-pickers/Calendar/YearMonthPicker/YearMonthPicker.js b/packages/react/src/date-pickers/DateCalendar/YearMonthPicker/YearMonthPicker.js similarity index 97% rename from packages/react/src/date-pickers/Calendar/YearMonthPicker/YearMonthPicker.js rename to packages/react/src/date-pickers/DateCalendar/YearMonthPicker/YearMonthPicker.js index 08f092f487..1a5db297d6 100644 --- a/packages/react/src/date-pickers/Calendar/YearMonthPicker/YearMonthPicker.js +++ b/packages/react/src/date-pickers/DateCalendar/YearMonthPicker/YearMonthPicker.js @@ -14,7 +14,7 @@ import React, { forwardRef, useCallback, useRef } from 'react'; import { Box } from '../../../box'; import { Button } from '../../../button'; import { Text } from '../../../text'; -import useCalendar from '../useCalendar'; +import useDateCalendar from '../useDateCalendar'; import { useYearMonthPickerStyle, useYearMonthPickerMonthButtonStyle, @@ -24,12 +24,12 @@ import { } from '../styles'; const YearMonthPicker = forwardRef((props, ref) => { - const calendarContext = useCalendar(); + const dateCalendarContext = useDateCalendar(); const { activeDate, formatDate, setActiveDate, - } = { ...calendarContext }; + } = { ...dateCalendarContext }; const onClickPreviousYear = useEventCallback((event) => { const nextActiveDate = subYears(activeDate, 1); diff --git a/packages/react/src/date-pickers/Calendar/YearMonthPicker/index.js b/packages/react/src/date-pickers/DateCalendar/YearMonthPicker/index.js similarity index 100% rename from packages/react/src/date-pickers/Calendar/YearMonthPicker/index.js rename to packages/react/src/date-pickers/DateCalendar/YearMonthPicker/index.js diff --git a/packages/react/src/date-pickers/DateCalendar/context.js b/packages/react/src/date-pickers/DateCalendar/context.js new file mode 100644 index 0000000000..0d6e0f993e --- /dev/null +++ b/packages/react/src/date-pickers/DateCalendar/context.js @@ -0,0 +1,10 @@ +import { createContext } from 'react'; + +const DateCalendarContext = createContext(); + +const DateCalendarProvider = DateCalendarContext.Provider; + +export { + DateCalendarContext, + DateCalendarProvider, +}; diff --git a/packages/react/src/date-pickers/DateCalendar/index.js b/packages/react/src/date-pickers/DateCalendar/index.js new file mode 100644 index 0000000000..0f05e08981 --- /dev/null +++ b/packages/react/src/date-pickers/DateCalendar/index.js @@ -0,0 +1,3 @@ +import DateCalendar from './DateCalendar'; + +export default DateCalendar; diff --git a/packages/react/src/date-pickers/Calendar/styles.js b/packages/react/src/date-pickers/DateCalendar/styles.js similarity index 98% rename from packages/react/src/date-pickers/Calendar/styles.js rename to packages/react/src/date-pickers/DateCalendar/styles.js index 2910ba7980..ca5960a554 100644 --- a/packages/react/src/date-pickers/Calendar/styles.js +++ b/packages/react/src/date-pickers/DateCalendar/styles.js @@ -1,7 +1,7 @@ import { useColorMode } from '../../color-mode'; import { useColorStyle } from '../../color-style'; -const useCalendarStyle = ({ tabIndex }) => { +const useDateCalendarStyle = ({ tabIndex }) => { const [colorMode] = useColorMode(); const [colorStyle] = useColorStyle({ colorMode }); const borderColor = { @@ -205,7 +205,7 @@ const useDaysOfWeekStyle = () => { }; export { - useCalendarStyle, + useDateCalendarStyle, useYearMonthPickerStyle, useYearMonthPickerMonthButtonStyle, useYearMonthPickerYearStyle, diff --git a/packages/react/src/date-pickers/Calendar/useCalendar.js b/packages/react/src/date-pickers/DateCalendar/useDateCalendar.js similarity index 51% rename from packages/react/src/date-pickers/Calendar/useCalendar.js rename to packages/react/src/date-pickers/DateCalendar/useDateCalendar.js index 9314115c9f..a12543cc44 100644 --- a/packages/react/src/date-pickers/Calendar/useCalendar.js +++ b/packages/react/src/date-pickers/DateCalendar/useDateCalendar.js @@ -1,13 +1,13 @@ import { useContext } from 'react'; -import { CalendarContext } from './context'; +import { DateCalendarContext } from './context'; -const useCalendar = () => { +const useDateCalendar = () => { if (!useContext) { throw new Error('The `useContext` hook is not available with your React version.'); } - const context = useContext(CalendarContext); + const context = useContext(DateCalendarContext); return context; }; -export default useCalendar; +export default useDateCalendar; diff --git a/packages/react/src/date-pickers/DatePicker/DatePicker.js b/packages/react/src/date-pickers/DatePicker/DatePicker.js index c61abb91b2..545098951c 100644 --- a/packages/react/src/date-pickers/DatePicker/DatePicker.js +++ b/packages/react/src/date-pickers/DatePicker/DatePicker.js @@ -12,7 +12,7 @@ import { Box } from '../../box'; import { useDefaultProps } from '../../default-props'; import config from '../../shared/config'; import useAutoId from '../../utils/useAutoId'; -import Calendar from '../Calendar'; +import DateCalendar from '../DateCalendar'; import { validateDate } from '../validation'; import DatePickerContent from './DatePickerContent'; import DatePickerToggle from './DatePickerToggle'; @@ -141,7 +141,7 @@ const DatePicker = forwardRef((inProps, ref) => { } }, [error, value, minDate, maxDate, shouldDisableDate, onErrorProp]); - const onCalendarChange = useCallback((nextDate) => { + const onDateCalendarChange = useCallback((nextDate) => { const isControlled = (valueProp !== undefined); if (!isControlled) { setValue(nextDate); @@ -160,7 +160,7 @@ const DatePicker = forwardRef((inProps, ref) => { } }, [valueProp, inputFormat, onChangeProp, closeOnSelect, onClose]); - const onCalendarError = useCallback((error, value) => { + const onDateCalendarError = useCallback((error, value) => { setError(error); if (typeof onErrorProp === 'function') { onErrorProp(error, value); @@ -238,14 +238,14 @@ const DatePicker = forwardRef((inProps, ref) => { }} - diff --git a/packages/react/src/date-pickers/index.js b/packages/react/src/date-pickers/index.js index 0c80beb7c7..6811a8e8eb 100644 --- a/packages/react/src/date-pickers/index.js +++ b/packages/react/src/date-pickers/index.js @@ -1,7 +1,7 @@ -import Calendar from './Calendar'; +import DateCalendar from './DateCalendar'; import DatePicker from './DatePicker'; export { - Calendar, + DateCalendar, DatePicker, }; diff --git a/packages/react/src/deprecated/Calendar.js b/packages/react/src/deprecated/Calendar.js new file mode 100644 index 0000000000..412a082716 --- /dev/null +++ b/packages/react/src/deprecated/Calendar.js @@ -0,0 +1,26 @@ +import { useOnce } from '@tonic-ui/react-hooks'; +import React, { forwardRef } from 'react'; +import { useDefaultProps } from '../default-props'; +import { DateCalendar } from '../date-pickers'; + +const Calendar = forwardRef((inProps, ref) => { + useOnce(() => { + console.error('Warning: The `Calendar` component is deprecated and will be removed in the next major release. Use the `DateCalendar` component instead.'); + }); + + const { + date: valueProp, + defaultDate: defaultValueProp, + ...rest + } = useDefaultProps({ props: inProps, name: 'Calendar' }); + + return ( + + ); +}); + +export default Calendar; diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 7eb2ed63bd..0eb6d5c9e7 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -52,5 +52,6 @@ export * from './visually-hidden'; // deprecated export { default as AccordionCollapse } from './deprecated/AccordionCollapse'; +export { default as Calendar } from './deprecated/Calendar'; export { default as ToastProvider } from './deprecated/ToastProvider'; export { default as useToast } from './deprecated/useToast';