feat: multiple single picker show placeholder (#798)

* feat: add multiple placeholder

* test: add test case

Author: zombieJ

assets/index.less

@@ -109,7 +109,9 @@
       border: none;
       outline: none;
       cursor: pointer;
-      transition: background 0.3s, border 0.3s;
+      transition:
+        background 0.3s,
+        border 0.3s;
 
       &:hover {
         background: fade(blue, 30%);
@@ -547,6 +549,7 @@
     box-sizing: border-box;
     width: 100%;
     border: 1px solid green;
+    min-height: 1em;
 
     &-item {
       flex: none;
@@ -558,6 +561,13 @@
     border: 1px solid blue;
   }
 
+  &-selection-placeholder {
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
   &-multiple-input {
     width: 10px;
     opacity: 0.1;

docs/examples/debug.tsx

@@ -11,6 +11,7 @@ import 'dayjs/locale/zh-cn';
 import buddhistEra from 'dayjs/plugin/buddhistEra';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import dayjsGenerateConfig from '../../src/generate/dayjs';
+import dateFnsGenerateConfig from '../../src/generate/dateFns';
 import zhCN from '../../src/locale/zh_CN';
 
 dayjs.locale('zh-cn');
@@ -36,19 +37,18 @@ const sharedLocale = {
   generateConfig: dayjsGenerateConfig,
 };
 
+const dateFnsSharedLocale = {
+  locale: myLocale,
+  generateConfig: dateFnsGenerateConfig,
+};
+
 export default () => {
   return (
     <div>
       {/* <RangePicker {...sharedLocale} style={{ width: 400 }} showTime />
       <RangePicker {...sharedLocale} style={{ width: 400 }} showTime showMinute={false} /> */}
-      <SinglePicker
-        {...sharedLocale}
-        style={{ width: 400 }}
-        showTime
-        showHour
-        showMinute
-        // showSecond={false}
-      />
+      <SinglePicker {...dateFnsSharedLocale} style={{ width: 400 }} multiple placeholder="good" />
+      <SinglePicker {...dateFnsSharedLocale} style={{ width: 400 }} placeholder="good" />
     </div>
   );
 };

src/PickerInput/Selector/SingleSelector/index.tsx

@@ -171,6 +171,7 @@ function SingleSelector<DateType extends object = any>(
         disabled={disabled}
         removeIcon={removeIcon}
       />
+      {!value.length && <span className={`${prefixCls}-selection-placeholder`}>{placeholder}</span>}
       <input
         className={`${prefixCls}-multiple-input`}
         value={value.map(getText).join(',')}

tests/multiple.spec.tsx

@@ -137,4 +137,22 @@ describe('Picker.Multiple', () => {
 
     expect(container.querySelector('.custom-remove')).toBeTruthy();
   });
+
+  describe('placeholder', () => {
+    it('show placeholder', () => {
+      const { container } = render(<DayPicker multiple placeholder="bamboo" />);
+      expect(
+        container.querySelector<HTMLSpanElement>('.rc-picker-selection-placeholder').textContent,
+      ).toBe('bamboo');
+    });
+
+    it('hide if has value', () => {
+      const { container } = render(
+        <DayPicker multiple defaultValue={[getDay('2000-01-01')]} placeholder="bamboo" />,
+      );
+      expect(
+        container.querySelector<HTMLSpanElement>('.rc-picker-selection-placeholder'),
+      ).toBeFalsy();
+    });
+  });
 });