Merge pull request #2 from react-component/master

update

Author: duuliy

examples/basic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import moment, { Moment } from 'moment';
+import type { Moment } from 'moment';
+import moment from 'moment';
 import Picker from '../src/Picker';
 import momentGenerateConfig from '../src/generate/moment';
 import zhCN from '../src/locale/zh_CN';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-picker",
-  "version": "2.5.5",
+  "version": "2.5.12",
   "description": "React date & time picker",
   "keywords": [
     "react",

src/Picker.tsx

@@ -98,9 +98,11 @@ type OmitPanelProps<Props> = Omit<
   'onChange' | 'hideHeader' | 'pickerValue' | 'onPickerValueChange'
 >;
 
-export type PickerBaseProps<DateType> = {} & PickerSharedProps<DateType> & OmitPanelProps<PickerPanelBaseProps<DateType>>;
+export type PickerBaseProps<DateType> = {} & PickerSharedProps<DateType> &
+  OmitPanelProps<PickerPanelBaseProps<DateType>>;
 
-export type PickerDateProps<DateType> = {} & PickerSharedProps<DateType> & OmitPanelProps<PickerPanelDateProps<DateType>>;
+export type PickerDateProps<DateType> = {} & PickerSharedProps<DateType> &
+  OmitPanelProps<PickerPanelDateProps<DateType>>;
 
 export type PickerTimeProps<DateType> = {
   picker: 'time';
@@ -109,7 +111,8 @@ export type PickerTimeProps<DateType> = {
    * since `defaultOpenValue` will confuse user of current value status
    */
   defaultOpenValue?: DateType;
-} & PickerSharedProps<DateType> & Omit<OmitPanelProps<PickerPanelTimeProps<DateType>>, 'format'>;
+} & PickerSharedProps<DateType> &
+  Omit<OmitPanelProps<PickerPanelTimeProps<DateType>>, 'format'>;
 
 export type PickerProps<DateType> =
   | PickerBaseProps<DateType>
@@ -194,9 +197,8 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   const [selectedValue, setSelectedValue] = React.useState<DateType | null>(mergedValue);
 
   // Operation ref
-  const operationRef: React.MutableRefObject<ContextOperationRefProps | null> = React.useRef<ContextOperationRefProps>(
-    null,
-  );
+  const operationRef: React.MutableRefObject<ContextOperationRefProps | null> =
+    React.useRef<ContextOperationRefProps>(null);
 
   // Open
   const [mergedOpen, triggerInnerOpen] = useMergedState(false, {
@@ -433,6 +435,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
           triggerOpen(false);
         }}
         className={`${prefixCls}-clear`}
+        role="button"
       >
         {clearIcon || <span className={`${prefixCls}-clear-btn`} />}
       </span>

src/PickerPanel.tsx

@@ -37,7 +37,7 @@ import type { MonthCellRender } from './panels/MonthPanel/MonthBody';
 import RangeContext from './RangeContext';
 import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
-import { getLowerBoundTime, setTime } from './utils/timeUtil';
+import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil';
 
 export type PickerPanelSharedProps<DateType> = {
   prefixCls?: string;
@@ -202,7 +202,21 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   const [viewDate, setInnerViewDate] = useMergedState<DateType | null, DateType>(null, {
     value: pickerValue,
     defaultValue: defaultPickerValue || mergedValue,
-    postState: (date) => date || generateConfig.getNow(),
+    postState: (date) => {
+      const now = generateConfig.getNow();
+      if (!date) return now;
+      // When value is null and set showTime
+      if (!mergedValue && showTime) {
+        if (typeof showTime === 'object') {
+          return setDateTime(generateConfig, date, showTime.defaultValue || now);
+        }
+        if (defaultValue) {
+          return setDateTime(generateConfig, date, defaultValue);
+        }
+        return setDateTime(generateConfig, date, now);
+      }
+      return date;
+    },
   });
 
   const setViewDate = (date: DateType) => {

src/RangePicker.tsx

@@ -102,6 +102,8 @@ export type RangePickerSharedProps<DateType> = {
   onPanelChange?: (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   onOk?: (dates: RangeValue<DateType>) => void;
   direction?: 'ltr' | 'rtl';
   autoComplete?: string;
@@ -204,6 +206,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     onCalendarChange,
     onFocus,
     onBlur,
+    onMouseEnter,
+    onMouseLeave,
     onOk,
     onKeyDown,
     components,
@@ -1086,6 +1090,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           })}
           style={style}
           onClick={onPickerClick}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
           onMouseDown={onPickerMouseDown}
           {...getDataOrAriaProps(props)}
         >

src/hooks/usePickerInput.ts

@@ -112,7 +112,12 @@ export default function usePickerInput({
 
       if (blurToCancel) {
         setTimeout(() => {
-          if (isClickOutside(document.activeElement)) {
+          let { activeElement } = document;
+          while (activeElement && activeElement.shadowRoot) {
+            activeElement = activeElement.shadowRoot.activeElement;
+          }
+
+          if (isClickOutside(activeElement)) {
             onCancel();
           }
         }, 0);

src/locale/fr_CA.ts

@@ -0,0 +1,32 @@
+import type { Locale } from '../interface';
+
+const locale: Locale = {
+  locale: 'fr_CA',
+  today: "Aujourd'hui",
+  now: 'Maintenant',
+  backToToday: "Aujourd'hui",
+  ok: 'Ok',
+  clear: 'Rétablir',
+  month: 'Mois',
+  year: 'Année',
+  timeSelect: "Sélectionner l'heure",
+  dateSelect: 'Sélectionner la date',
+  monthSelect: 'Choisissez un mois',
+  yearSelect: 'Choisissez une année',
+  decadeSelect: 'Choisissez une décennie',
+  yearFormat: 'YYYY',
+  dateFormat: 'DD/MM/YYYY',
+  dayFormat: 'DD',
+  dateTimeFormat: 'DD/MM/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Mois précédent (PageUp)',
+  nextMonth: 'Mois suivant (PageDown)',
+  previousYear: 'Année précédente (Ctrl + gauche)',
+  nextYear: 'Année prochaine (Ctrl + droite)',
+  previousDecade: 'Décennie précédente',
+  nextDecade: 'Décennie suivante',
+  previousCentury: 'Siècle précédent',
+  nextCentury: 'Siècle suivant',
+};
+
+export default locale;

src/locale/km_KH.ts

@@ -0,0 +1,32 @@
+import type { Locale } from '../interface';
+
+const locale: Locale = {
+  locale: 'km',
+  today: 'ថ្ងៃនេះ',
+  now: 'ឥឡូវ​នេះ',
+  backToToday: 'ត្រលប់ទៅថ្ងៃនេះ',
+  ok: 'កំណត់',
+  timeSelect: 'រយៈពេលជ្រើសរើស',
+  dateSelect: 'ជ្រើសរើសកាលបរិច្ឆេទ',
+  weekSelect: 'ជ្រើសរើសសប្តាហ៍',
+  clear: 'ច្បាស់',
+  month: 'ខែ',
+  year: 'ឆ្នាំ',
+  previousMonth: 'ខែមុន (ឡើងទំព័រ)',
+  nextMonth: 'ខែបន្ទាប់ (ប៊ូតុងចុះទំព័រ)',
+  monthSelect: 'ជ្រើសរើសខែ',
+  yearSelect: 'ជ្រើសរើសឆ្នាំ',
+  decadeSelect: 'ជ្រើសរើសអាយុ',
+  yearFormat: 'YYYY',
+  dayFormat: 'D',
+  dateFormat: 'YYYY-M-D',
+  dateTimeFormat: 'YYYY-M-D HH:mm:ss',
+  previousYear: 'ឆ្នាំមុន (Controlគ្រាប់ចុចបូកព្រួញខាងឆ្វេង)',
+  nextYear: 'ឆ្នាំក្រោយ (Control គ្រាប់ចុចបូកព្រួញស្ដាំ)',
+  previousDecade: 'ជំនាន់ចុងក្រោយ',
+  nextDecade: 'ជំនាន់​ក្រោយ',
+  previousCentury: 'សតវត្សចុងក្រោយ',
+  nextCentury: 'សតវត្សរ៍បន្ទាប់',
+};
+
+export default locale;

src/locale/ml_IN.ts

@@ -0,0 +1,33 @@
+import type { Locale } from '../interface';
+
+const locale: Locale = {
+  locale: 'ml_IN',
+  today: 'ഇന്ന്',
+  now: 'ഇപ്പോൾ',
+  backToToday: 'ഇന്നത്തെ ദിവസത്തിലേക്ക് തിരിച്ചു പോകുക',
+  ok: 'ശരിയാണ്',
+  clear: 'നീക്കം ചെയ്യുക',
+  month: 'മാസം',
+  year: 'വർഷം',
+  timeSelect: 'സമയം തിരഞ്ഞെടുക്കുക',
+  dateSelect: 'ദിവസം തിരഞ്ഞെടുക്കുക',
+  weekSelect: 'വാരം തിരഞ്ഞെടുക്കുക',
+  monthSelect: 'മാസം തിരഞ്ഞെടുക്കുക',
+  yearSelect: 'വർഷം തിരഞ്ഞെടുക്കുക',
+  decadeSelect: 'ദശാബ്ദം തിരഞ്ഞെടുക്കുക',
+  yearFormat: 'YYYY',
+  dateFormat: 'M/D/YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'M/D/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'കഴിഞ്ഞ മാസം (PageUp)',
+  nextMonth: 'അടുത്ത മാസം (PageDown)',
+  previousYear: 'കഴിഞ്ഞ വർഷം (Control + left)',
+  nextYear: 'അടുത്ത വർഷം (Control + right)',
+  previousDecade: 'കഴിഞ്ഞ ദശാബ്ദം',
+  nextDecade: 'അടുത്ത ദശാബ്ദം',
+  previousCentury: 'കഴിഞ്ഞ നൂറ്റാണ്ട്',
+  nextCentury: 'അടുത്ത നൂറ്റാണ്ട്',
+};
+
+export default locale;

src/locale/pt_BR.ts

@@ -27,6 +27,21 @@ const locale: Locale = {
   nextDecade: 'Próxima década',
   previousCentury: 'Século anterior',
   nextCentury: 'Próximo século',
+  shortWeekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
+    shortMonths: [
+      'Jan',
+      'Fev',
+      'Mar',
+      'Abr',
+      'Mai',
+      'Jun',
+      'Jul',
+      'Ago',
+      'Set',
+      'Out',
+      'Nov',
+      'Dez',
+    ],
 };
 
 export default locale;

src/panels/DatetimePanel/index.tsx

@@ -6,33 +6,8 @@ import DatePanel from '../DatePanel';
 import type { SharedTimeProps } from '../TimePanel';
 import TimePanel from '../TimePanel';
 import { tuple } from '../../utils/miscUtil';
-import type { PanelRefProps, DisabledTime, NullableDateType } from '../../interface';
-import type { GenerateConfig } from '../../generate';
-
-function setTime<DateType>(
-  generateConfig: GenerateConfig<DateType>,
-  date: DateType,
-  defaultDate: NullableDateType<DateType>,
-) {
-  if (!defaultDate) {
-    return date;
-  }
-
-  let newDate = date;
-  newDate = generateConfig.setHour(
-    newDate,
-    generateConfig.getHour(defaultDate),
-  );
-  newDate = generateConfig.setMinute(
-    newDate,
-    generateConfig.getMinute(defaultDate),
-  );
-  newDate = generateConfig.setSecond(
-    newDate,
-    generateConfig.getSecond(defaultDate),
-  );
-  return newDate;
-}
+import { setDateTime as setTime } from '../../utils/timeUtil';
+import type { PanelRefProps, DisabledTime } from '../../interface';
 
 export type DatetimePanelProps<DateType> = {
   disabledTime?: DisabledTime<DateType>;

src/utils/timeUtil.ts

@@ -1,3 +1,4 @@
+import type { NullableDateType } from '../interface';
 import type { GenerateConfig } from '../generate';
 
 export function setTime<DateType>(
@@ -13,6 +14,32 @@ export function setTime<DateType>(
   return nextTime;
 }
 
+export function setDateTime<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  date: DateType,
+  defaultDate: NullableDateType<DateType>,
+) {
+  if (!defaultDate) {
+    return date;
+  }
+
+  let newDate = date;
+  newDate = generateConfig.setHour(
+    newDate,
+    generateConfig.getHour(defaultDate),
+  );
+  newDate = generateConfig.setMinute(
+    newDate,
+    generateConfig.getMinute(defaultDate),
+  );
+  newDate = generateConfig.setSecond(
+    newDate,
+    generateConfig.getSecond(defaultDate),
+  );
+  return newDate;
+}
+
+
 export function getLowerBoundTime(
   hour: number,
   minute: number,

tests/__snapshots__/picker.spec.tsx.snap

@@ -20,6 +20,7 @@ exports[`Picker.Basic icon 1`] = `
   </span>
   <span
     class="rc-picker-clear"
+    role="button"
   >
     <span
       class="suffix-icon"