fix: components should work

Author: zombieJ

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'default-case': 0,
     'no-confusing-arrow': 0,
     'jsx-a11y/no-autofocus': 0,
+    'jsx-a11y/heading-has-content': 0,
     'import/no-extraneous-dependencies': [
       'error',
       { devDependencies: ['**/tests/**'] },

examples/range.tsx

@@ -74,6 +74,16 @@ export default () => {
               console.log('OK!!!', dates);
             }}
           />
+          <RangePicker<Moment>
+            {...sharedProps}
+            value={undefined}
+            locale={zhCN}
+            allowClear
+            picker="time"
+            ranges={{
+              test: [moment(), moment().add(1, 'hour')],
+            }}
+          />
         </div>
 
         <div style={{ margin: '0 8px' }}>

src/Picker.tsx

@@ -161,6 +161,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     onClick,
     onSelect,
     onOk,
+    components,
   } = props as MergedPickerProps<DateType>;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -363,6 +364,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   const rangesNode = getRanges({
     prefixCls,
+    components,
     needConfirmButton,
     okDisabled: !selectedValue,
     locale,

src/PickerPanel.tsx

@@ -142,6 +142,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     onMouseDown,
     onPickerValueChange,
     onOk,
+    components,
   } = props as MergedPickerPanelProps<DateType>;
 
   const needConfirmButton: boolean =
@@ -422,6 +423,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     extraFooter = getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
     rangesNode = getRanges({
       prefixCls,
+      components,
       needConfirmButton,
       okDisabled: !mergedValue,
       locale,

src/RangePicker.tsx

@@ -202,6 +202,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     onFocus,
     onBlur,
     onOk,
+    components,
   } = props as MergedRangePickerProps<DateType>;
 
   const needConfirmButton: boolean =
@@ -764,6 +765,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
     const rangesNode = getRanges({
       prefixCls,
+      components,
       needConfirmButton,
       okDisabled: !getValue(selectedValue, activePickerIndex),
       locale,
@@ -819,7 +821,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         }}
       >
         <div className={`${prefixCls}-panels`}>{panels}</div>
-        <div className={`${prefixCls}-picker-footer`}>
+        <div className={`${prefixCls}-footer`}>
           {extraNode}
           {rangesNode}
         </div>

tests/components.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import MockDate from 'mockdate';
+import {
+  mount,
+  getMoment,
+  MomentRangePicker,
+  MomentPicker,
+  MomentPickerPanel,
+} from './util/commonUtil';
+
+describe('Picker.Components', () => {
+  beforeAll(() => {
+    MockDate.set(getMoment('1990-09-03 00:00:00').toDate());
+  });
+
+  afterAll(() => {
+    MockDate.reset();
+  });
+
+  [
+    { name: 'RangePicker', component: MomentRangePicker, ranges: true },
+    { name: 'Picker', component: MomentPicker },
+    { name: 'PickerPanel', component: MomentPickerPanel },
+  ].forEach(({ name, component, ranges }) => {
+    it(name, () => {
+      const Component = component as any;
+      const Button: React.FC<any> = props => <h1 {...props} />;
+      const Item: React.FC<any> = props => <h2 {...props} />;
+
+      const wrapper = mount(
+        <Component
+          ranges={{
+            good: [null, null],
+          }}
+          components={{
+            button: Button,
+            rangeItem: Item,
+          }}
+          picker="time"
+          open
+        />,
+      );
+
+      expect(wrapper.find('.rc-picker-footer').find('h1')).toHaveLength(1);
+      if (ranges) {
+        expect(wrapper.find('.rc-picker-footer').find('h2')).toHaveLength(1);
+      }
+    });
+  });
+});