feat: showNow on datetime & time panel (#87)

Author: 07akioni

src/PickerPanel.tsx

@@ -92,6 +92,7 @@ export interface PickerPanelBaseProps<DateType> extends PickerPanelSharedProps<D
 export interface PickerPanelDateProps<DateType> extends PickerPanelSharedProps<DateType> {
   picker?: 'date';
   showToday?: boolean;
+  showNow?: boolean;
 
   // Time
   showTime?: boolean | SharedTimeProps<DateType>;
@@ -132,6 +133,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     mode,
     picker = 'date',
     tabIndex = 0,
+    showNow,
     showTime,
     showToday,
     renderExtraFooter,
@@ -440,6 +442,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
       needConfirmButton,
       okDisabled: !mergedValue || (disabledDate && disabledDate(mergedValue)),
       locale,
+      showNow,
       onNow:
         needConfirmButton &&
         (() => {

src/panels/TimePanel/index.tsx

@@ -7,6 +7,7 @@ import { createKeyDownHandler } from '../../utils/uiUtil';
 
 export interface SharedTimeProps<DateType> extends DisabledTimes {
   format?: string;
+  showNow?: boolean;
   showHour?: boolean;
   showMinute?: boolean;
   showSecond?: boolean;
@@ -47,20 +48,13 @@ function TimePanel<DateType>(props: TimePanelProps<DateType>) {
 
   // ======================= Keyboard =======================
   const [activeColumnIndex, setActiveColumnIndex] = React.useState(-1);
-  const columnsCount = countBoolean([
-    showHour,
-    showMinute,
-    showSecond,
-    use12Hours,
-  ]);
+  const columnsCount = countBoolean([showHour, showMinute, showSecond, use12Hours]);
 
   operationRef.current = {
     onKeyDown: event =>
       createKeyDownHandler(event, {
         onLeftRight: diff => {
-          setActiveColumnIndex(
-            (activeColumnIndex + diff + columnsCount) % columnsCount,
-          );
+          setActiveColumnIndex((activeColumnIndex + diff + columnsCount) % columnsCount);
         },
         onUpDown: diff => {
           if (activeColumnIndex === -1) {

src/utils/getRanges.tsx

@@ -9,6 +9,7 @@ export interface RangesProps {
   onNow?: null | (() => void) | false;
   onOk?: null | (() => void) | false;
   okDisabled?: boolean;
+  showNow?: boolean;
   locale: Locale;
 }
 
@@ -20,6 +21,7 @@ export default function getRanges({
   onNow,
   onOk,
   okDisabled,
+  showNow,
   locale,
 }: RangesProps) {
   let presetNode: React.ReactNode;
@@ -32,11 +34,7 @@ export default function getRanges({
       <>
         {rangeList.map(({ label, onClick, onMouseEnter, onMouseLeave }) => (
           <li key={label} className={`${prefixCls}-preset`}>
-            <Item
-              onClick={onClick}
-              onMouseEnter={onMouseEnter}
-              onMouseLeave={onMouseLeave}
-            >
+            <Item onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
               {label}
             </Item>
           </li>
@@ -48,7 +46,7 @@ export default function getRanges({
   if (needConfirmButton) {
     const Button = (components.button || 'button') as any;
 
-    if (onNow && !presetNode) {
+    if (onNow && !presetNode && showNow !== false) {
       presetNode = (
         <li className={`${prefixCls}-now`}>
           <a className={`${prefixCls}-now-btn`} onClick={onNow}>

tests/picker.spec.tsx

@@ -502,13 +502,45 @@ describe('Picker.Basic', () => {
     expect(wrapper.find('.rc-picker-input').render()).toMatchSnapshot();
   });
 
-  it('datetime should display now', () => {
-    const onSelect = jest.fn();
-    const wrapper = mount(<MomentPicker onSelect={onSelect} showTime />);
-    wrapper.openPicker();
-    wrapper.find('.rc-picker-now > a').simulate('click');
+  describe('showNow', () => {
+    it('datetime should display now', () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(<MomentPicker onSelect={onSelect} showTime />);
+      wrapper.openPicker();
+      wrapper.find('.rc-picker-now > a').simulate('click');
 
-    expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second')).toBeTruthy();
+      expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second')).toBeTruthy();
+    });
+
+    it("date shouldn't display now", () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(<MomentPicker onSelect={onSelect} />);
+      wrapper.openPicker();
+      expect(wrapper.find('.rc-picker-now > a').length).toEqual(0);
+    });
+
+    it("datetime shouldn't display now when showNow is false", () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(<MomentPicker onSelect={onSelect} showTime showNow={false} />);
+      wrapper.openPicker();
+      expect(wrapper.find('.rc-picker-now > a').length).toEqual(0);
+    });
+
+    it('time should display now', () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(<MomentPicker onSelect={onSelect} picker="time" />);
+      wrapper.openPicker();
+      wrapper.find('.rc-picker-now > a').simulate('click');
+
+      expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:00', 'second')).toBeTruthy();
+    });
+
+    it("time shouldn't display now when showNow is false", () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(<MomentPicker onSelect={onSelect} picker="time" showNow={false} />);
+      wrapper.openPicker();
+      expect(wrapper.find('.rc-picker-now > a').length).toEqual(0);
+    });
   });
 
   it('pass data- & aria- & role', () => {