fix(pickers): clean button overlapping with value (#1984)

* fix(date-picker): add missing cleanable class

* fix(daterange-picker): add missing cleanable class

* fix(pickers): add missing cleanable class

Author: SevenOutman

src/Cascader/Cascader.tsx

@@ -551,7 +551,8 @@ const Cascader: PickerComponent<CascaderProps> = React.forwardRef((props: Cascad
     ...props,
     classPrefix,
     hasValue,
-    name: 'cascader'
+    name: 'cascader',
+    cleanable
   });
 
   // TODO: bad api design

src/DatePicker/DatePicker.tsx

@@ -519,7 +519,8 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
       ...props,
       classPrefix,
       name: 'date',
-      hasValue
+      hasValue,
+      cleanable
     });
 
     const renderDate = useCallback(() => {

src/DatePicker/test/DatePickerSpec.js

@@ -11,6 +11,12 @@ describe('DatePicker ', () => {
     assert.ok(instance.className.match(/\brs-picker-date\b/));
   });
 
+  it('Should be cleanable by default', () => {
+    const instance = getDOMNode(<DatePicker value={new Date()} />);
+
+    expect(instance).to.have.class('rs-picker-cleanable');
+  });
+
   it('Should be disabled', () => {
     const instance = getDOMNode(<DatePicker disabled />);
     assert.ok(instance.className.match(/\bdisabled\b/));

src/DateRangePicker/DateRangePicker.tsx

@@ -698,7 +698,8 @@ const DateRangePicker: DateRangePicker = React.forwardRef((props: DateRangePicke
     ...props,
     classPrefix,
     name: 'daterange',
-    hasValue
+    hasValue,
+    cleanable
   });
 
   return (

src/DateRangePicker/test/DateRangePickerSpec.js

@@ -40,6 +40,12 @@ describe('DateRangePicker', () => {
     assert.ok(instance.className.match(/\brs-picker-daterange\b/));
   });
 
+  it('Should be cleanable by default', () => {
+    const instance = getDOMNode(<DateRangePicker value={[new Date(), new Date()]} />);
+
+    expect(instance).to.have.class('rs-picker-cleanable');
+  });
+
   it('Should be disabled', () => {
     const instance = getDOMNode(<DateRangePicker disabled />);
     assert.ok(instance.className.match(/\bdisabled\b/));

src/InputPicker/InputPicker.tsx

@@ -721,7 +721,8 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
       classPrefix,
       appearance,
       hasValue,
-      name: 'input'
+      name: 'input',
+      cleanable
     });
 
     const classes = merge(pickerClasses, {

src/MultiCascader/MultiCascader.tsx

@@ -536,7 +536,8 @@ const MultiCascader: PickerComponent<MultiCascaderProps> = React.forwardRef(
       ...props,
       classPrefix,
       hasValue,
-      name: 'cascader'
+      name: 'cascader',
+      cleanable
     });
 
     if (inline) {

src/Picker/utils.ts

@@ -97,6 +97,9 @@ export function usePickerClassName(props: PickerClassNameProps): [string, string
       [`placement-${kebabCase(placementPolyfill(placement))}`]: placement,
       'read-only': readOnly,
       'has-value': hasValue,
+      // fixme Bad implementation.
+      //       Should implement by modifying `.cleanable` styles according to `.has-value` class,
+      //       not by removing `.cleanable` class.
       cleanable: hasValue && cleanable,
       block,
       disabled,

src/SelectPicker/SelectPicker.tsx

@@ -368,7 +368,8 @@ const SelectPicker: PickerComponent<SelectPickerProps> = React.forwardRef(
       classPrefix,
       appearance,
       hasValue,
-      name: 'select'
+      name: 'select',
+      cleanable
     });
 
     return (

src/TreePicker/TreePicker.tsx

@@ -859,7 +859,8 @@ const TreePicker: PickerComponent<TreePickerProps> = React.forwardRef((props, re
     classPrefix,
     appearance,
     hasValue: hasValidValue,
-    name: 'tree'
+    name: 'tree',
+    cleanable
   });
 
   if (inline) {