chore(hoverPlaceholder): optmize logic when value is not empty (#109)

kerm1it · web-flow · commit ca9e814ccd82 · 2020-07-27T13:48:16.000+08:00
* chore(hoverPlaceholder): optmize logic when value is not empty

* refactor: useHoverPlaceholder to useHoverValue

* test: add case for RangePicker

* chore(hoverValue): optimize onChange for input
diff --git a/assets/index.less b/assets/index.less
@@ -2,6 +2,23 @@
 
 @background-color: rgb(255, 240, 255);
 
+@input-placeholder-color: hsv(0, 0, 75%);
+
+.placeholder(@color: @input-placeholder-color) {
+  // Firefox
+  &::-moz-placeholder {
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
+
+  &::placeholder {
+    color: @color;
+  }
+
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+}
+
 .@{prefix-cls} {
   display: inline-flex;
 
@@ -292,6 +309,13 @@
 
     > input {
       width: 100%;
+      .placeholder();
+    }
+
+    &-placeholder {
+      > input {
+        color: @input-placeholder-color;
+      }
     }
   }
 
diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -30,7 +30,7 @@ import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil
 import usePickerInput from './hooks/usePickerInput';
 import useTextValueMapping from './hooks/useTextValueMapping';
 import useValueTexts from './hooks/useValueTexts';
-import useHoverPlaceholder from './hooks/useHoverPlaceholder';
+import useHoverValue from './hooks/useHoverValue';
 
 export interface PickerRefConfig {
   focus: () => void;
@@ -436,7 +436,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   };
   const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
 
-  const [hoverPlaceholder, onEnter, onLeave] = useHoverPlaceholder(placeholder, text, {
+  const [hoverValue, onEnter, onLeave] = useHoverValue(text, {
     formatList,
     generateConfig,
     locale,
@@ -481,18 +481,23 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
           onContextMenu={onContextMenu}
           onClick={onClick}
         >
-          <div className={`${prefixCls}-input`} ref={inputDivRef}>
+          <div
+            className={classNames(`${prefixCls}-input`, {
+              [`${prefixCls}-input-placeholder`]: !!hoverValue,
+            })}
+            ref={inputDivRef}
+          >
             <input
               id={id}
               tabIndex={tabIndex}
               disabled={disabled}
               readOnly={inputReadOnly || !typing}
-              value={text}
+              value={hoverValue || text}
               onChange={e => {
                 triggerTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
-              placeholder={hoverPlaceholder}
+              placeholder={placeholder}
               ref={inputRef}
               title={text}
               {...inputProps}
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
@@ -29,7 +29,7 @@ import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import useRangeViewDates from './hooks/useRangeViewDates';
 import { DateRender } from './panels/DatePanel/DateBody';
-import useHoverPlaceholder from './hooks/useHoverPlaceholder';
+import useHoverValue from './hooks/useHoverValue';
 
 function reorderValues<DateType>(
   values: RangeValue<DateType>,
@@ -540,25 +540,17 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   // ========================== Hover Range ==========================
   const [hoverRangedValue, setHoverRangedValue] = useState<RangeValue<DateType>>(null);
 
-  const [startPlaceholder, onStartEnter, onStartLeave] = useHoverPlaceholder(
-    getValue(placeholder, 0) || '',
-    startText,
-    {
-      formatList,
-      generateConfig,
-      locale,
-    },
-  );
+  const [startHoverValue, onStartEnter, onStartLeave] = useHoverValue(startText, {
+    formatList,
+    generateConfig,
+    locale,
+  });
 
-  const [endPlaceholder, onEndEnter, onEndLeave] = useHoverPlaceholder(
-    getValue(placeholder, 1) || '',
-    endText,
-    {
-      formatList,
-      generateConfig,
-      locale,
-    },
-  );
+  const [endHoverValue, onEndEnter, onEndLeave] = useHoverValue(endText, {
+    formatList,
+    generateConfig,
+    locale,
+  });
 
   const onDateMouseEnter = (date: DateType) => {
     setHoverRangedValue(updateValues(selectedValue, date, mergedActivePickerIndex));
@@ -1062,19 +1054,20 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           <div
             className={classNames(`${prefixCls}-input`, {
               [`${prefixCls}-input-active`]: mergedActivePickerIndex === 0,
+              [`${prefixCls}-input-placeholder`]: !!startHoverValue,
             })}
             ref={startInputDivRef}
           >
             <input
               id={id}
               disabled={mergedDisabled[0]}
               readOnly={inputReadOnly || !startTyping}
-              value={startText}
+              value={startHoverValue || startText}
               onChange={e => {
                 triggerStartTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
-              placeholder={startPlaceholder}
+              placeholder={getValue(placeholder, 0) || ''}
               ref={startInputRef}
               {...startInputProps}
               {...inputSharedProps}
@@ -1087,17 +1080,18 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           <div
             className={classNames(`${prefixCls}-input`, {
               [`${prefixCls}-input-active`]: mergedActivePickerIndex === 1,
+              [`${prefixCls}-input-placeholder`]: !!endHoverValue,
             })}
             ref={endInputDivRef}
           >
             <input
               disabled={mergedDisabled[1]}
               readOnly={inputReadOnly || !endTyping}
-              value={endText}
+              value={endHoverValue || endText}
               onChange={e => {
                 triggerEndTextChange(e.target.value);
               }}
-              placeholder={endPlaceholder}
+              placeholder={getValue(placeholder, 1) || ''}
               ref={endInputRef}
               {...endInputProps}
               {...inputSharedProps}
diff --git a/src/hooks/useHoverValue.ts b/src/hooks/useHoverValue.ts
@@ -1,28 +1,29 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import useValueTexts, { ValueTextConfig } from './useValueTexts';
 
-export default function useHoverPlaceholder<DateType>(
-  placeholder: string,
-  text: string,
+export default function useHoverValue<DateType>(
+  valueText: string,
   { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
 ): [string, (date: DateType) => void, (date: DateType) => void] {
   const [value, setValue] = useState(null);
 
-  const [valueTexts] = useValueTexts(value, {
+  const [, firstText] = useValueTexts(value, {
     formatList,
     generateConfig,
     locale,
   });
 
   function onEnter(date: DateType) {
-    if (!text) {
-      setValue(date);
-    }
+    setValue(date);
   }
 
   function onLeave() {
     setValue(null);
   }
 
-  return [(valueTexts && valueTexts[0]) || placeholder, onEnter, onLeave];
+  useEffect(() => {
+    onLeave();
+  }, [valueText]);
+
+  return [firstText, onEnter, onLeave];
 }
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
@@ -730,33 +730,52 @@ describe('Picker.Basic', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  describe('hover placeholder', () => {
-    const placeholder = 'custom placeholder';
-    it('placeholder should be origin value when input value is not empty', () => {
-      const wrapper = mount(
-        <MomentPicker placeholder={placeholder} open defaultValue={getMoment('2020-07-22')} />,
-      );
+  describe('hover value', () => {
+    it('should restore when leave', () => {
+      const wrapper = mount(<MomentPicker open defaultValue={getMoment('2020-07-22')} />);
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
-      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
+
+      cell.simulate('mouseLeave');
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-22');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
     });
 
-    it('placeholder should be target date when input value is empty', () => {
-      const wrapper = mount(
-        <MomentPicker placeholder={placeholder} defaultValue={getMoment('2020-07-22')} />,
-      );
+    it('should restore after selecting cell', () => {
+      const wrapper = mount(<MomentPicker defaultValue={getMoment('2020-07-22')} />);
+      wrapper.openPicker();
+      const cell = wrapper.findCell(24);
+      cell.simulate('mouseEnter');
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
+
+      wrapper.selectCell(24);
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
+    });
+
+    it('change value when hovering', () => {
+      const wrapper = mount(<MomentPicker defaultValue={getMoment('2020-07-22')} />);
       wrapper.openPicker();
+      const cell = wrapper.findCell(24);
+      cell.simulate('mouseEnter');
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
+
       wrapper.find('input').simulate('change', {
         target: {
-          value: '',
+          value: '2020-07-23',
         },
       });
-      const cell = wrapper.findCell(24);
-      cell.simulate('mouseEnter');
-      expect(wrapper.find('input').prop('placeholder')).toBe('2020-07-24');
-      cell.simulate('mouseLeave');
-      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
+
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-23');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
+
       wrapper.closePicker();
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-23');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
     });
   });
 });
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
