@aloudata/aloudata-design 1.5.3 → 1.6.0

package/dist/Button/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["type", "size", "shape", "loading", "disabled", "icon", "className"];
+var _excluded = ["type", "size", "shape", "loading", "disabled", "icon", "className", "prefixCls"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -14,10 +14,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import { LoadingLine } from '@aloudata/icons-react';
 import { Button as AntdButton } from 'antd';
+import { useCompactItemContext } from 'antd/lib/space/Compact';
 import classNames from 'classnames';
 import React, { useContext } from 'react';
+import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
-var iconPrefixCls = 'aldicon';
 var ICON_LARGE = 20;
 var ICON_MIDDLE = 16;
 var ICON_SMALL = 14;
@@ -73,7 +74,6 @@ export var setIcon = function setIcon(iconNode, size, loading) {
       fill: 'currentColor'
     }, iconNode.props);
 
-    p.className = classNames("".concat(iconPrefixCls, "-icon-left"), p.className, iconPrefixCls);
     p.size = getIconSize(size);
     return /*#__PURE__*/React.cloneElement(iconNode, p);
   }
@@ -82,7 +82,6 @@ export var setIcon = function setIcon(iconNode, size, loading) {
     return /*#__PURE__*/React.createElement(LoadingLine, {
       spin: true,
       size: getIconSize(size),
-      className: classNames("".concat(iconPrefixCls, "-icon-left"), iconPrefixCls),
       fill: "currentColor"
     });
   }
@@ -101,15 +100,27 @@ function Button(props) {
       disabled = props.disabled,
       icon = props.icon,
       className = props.className,
+      customizePrefixCls = props.prefixCls,
       rest = _objectWithoutProperties(props, _excluded);
 
   var contentSize = useContext(SizeContext);
-  var size = customSize || contentSize || 'middle';
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var prefixCls = getPrefixCls('btn', customizePrefixCls); // ===================== Compact Item =====================
+
+  var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex.compactSize,
+      compactItemClassnames = _useCompactItemContex.compactItemClassnames;
+
+  var size = compactSize || customSize || contentSize || 'middle';
   return /*#__PURE__*/React.createElement(AntdButton, _extends({}, rest, {
     disabled: loading ? true : disabled,
     icon: setIcon(icon, size, loading),
     type: getButtonType(type),
-    className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size)),
+    className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size), compactItemClassnames),
     danger: getDangerStatus(type),
     shape: getShape(shape)
   }), props.children);

package/dist/Button/style/index.less

@@ -1,7 +1,7 @@
 @import '../../style/index.less';
 @import './variables.less';
 
-.ald-btn.ant-btn {
+.ant-btn.ald-btn {
   &.ald-btn {
     // &-loading::before{
     //   // display: none !important;
@@ -20,6 +20,7 @@
       text-shadow: none;
       text-decoration: none;
 
+      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
       &:focus-visible {
         outline: none;
       }
@@ -236,139 +237,84 @@
       padding: 0;
       vertical-align: baseline;
     }
+  }
+
+  &-large {
+    min-width: auto;
+    height: @button-height-large;
+    padding: @button-border-padding-large;
+    font-size: @button-text-size-large;
+    line-height: 24px;
+    border-radius: @button-border-radius-large;
 
-    &-large {
-      min-width: auto;
+    &.ant-btn-icon-only {
+      min-width: @button-height-large;
       height: @button-height-large;
-      padding: @button-border-padding-large;
-      font-size: @button-text-size-large;
-      line-height: 24px;
       border-radius: @button-border-radius-large;
+    }
 
-      &.ant-btn-icon-only {
-        min-width: @button-height-large;
-        height: @button-height-large;
-        border-radius: @button-border-radius-large;
-      }
+    &.ant-btn-circle {
+      min-width: @button-height-large;
+      height: @button-height-large;
+      border-radius: 50%;
+    }
 
-      &.ant-btn-circle {
-        min-width: @button-height-large;
-        height: @button-height-large;
-        border-radius: 50%;
-      }
+    gap: @button-left-icon-margin-right-large;
 
-      // .aldicon-icon-left {
-      //   svg {
-      //     vertical-align: -4px;
-      //   }
-      // }
-
-      gap: @button-left-icon-margin-right-large;
-      // .aldicon-icon-left + span {
-      //   margin-left: @button-left-icon-margin-right-large;
-      // }
-      &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
-        min-width: @button-text-min-width-large;
-      }
+    &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
+      min-width: @button-text-min-width-large;
     }
+  }
 
-    &-middle {
-      min-width: auto;
+  &-middle {
+    min-width: auto;
+    height: @button-height-middle;
+    padding: @button-border-padding-middle;
+    font-size: @button-text-size-middle;
+    border-radius: @button-border-radius-middle;
+
+    &.ant-btn-icon-only {
+      min-width: @button-height-middle;
       height: @button-height-middle;
-      padding: @button-border-padding-middle;
-      font-size: @button-text-size-middle;
       border-radius: @button-border-radius-middle;
+    }
 
-      &.ant-btn-icon-only {
-        min-width: @button-height-middle;
-        height: @button-height-middle;
-        border-radius: @button-border-radius-middle;
-      }
+    &.ant-btn-circle {
+      min-width: @button-height-middle;
+      height: @button-height-middle;
+      border-radius: 50%;
+    }
 
-      &.ant-btn-circle {
-        min-width: @button-height-middle;
-        height: @button-height-middle;
-        border-radius: 50%;
-      }
+    gap: @button-left-icon-margin-right-middle;
 
-      // .aldicon-icon-left {
-      //   svg {
-      //     vertical-align: -3px;
-      //   }
-      // }
-
-      gap: @button-left-icon-margin-right-middle;
-      // .aldicon-icon-left + span {
-      //   margin-left: @button-left-icon-margin-right-middle;
-      // }
-      &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
-        min-width: @button-text-min-width-middle;
-      }
+    &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
+      min-width: @button-text-min-width-middle;
     }
+  }
 
-    &-small {
+  &-small {
+    height: @button-height-small;
+    padding: @button-border-padding-small;
+    font-size: @button-text-size-small;
+    line-height: 22px;
+    border-radius: @button-border-radius-small;
+
+    &.ant-btn-icon-only {
+      min-width: @button-height-small;
       height: @button-height-small;
-      padding: @button-border-padding-small;
-      font-size: @button-text-size-small;
-      line-height: 22px;
       border-radius: @button-border-radius-small;
+    }
 
-      &.ant-btn-icon-only {
-        min-width: @button-height-small;
-        height: @button-height-small;
-        border-radius: @button-border-radius-small;
-      }
+    &.ant-btn-circle {
+      min-width: @button-height-small;
+      height: @button-height-small;
+      border-radius: 50%;
+    }
 
-      &.ant-btn-circle {
-        min-width: @button-height-small;
-        height: @button-height-small;
-        border-radius: 50%;
-      }
+    gap: @button-left-icon-margin-right-small;
 
-      // .aldicon-icon-left {
-      //   svg {
-      //     vertical-align: -2px;
-      //   }
-      // }
-
-      gap: @button-left-icon-margin-right-small;
-      // .aldicon-icon-left + span {
-      //   margin-left: @button-left-icon-margin-right-small;
-      // }
-      &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
-        min-width: @button-text-min-width-small;
-      }
+    &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
+      min-width: @button-text-min-width-small;
     }
-
-    // &-mini {
-    //   height: @button-height-mini;
-    //   padding: @button-border-padding-mini;
-    //   font-size: @button-text-size-mini;
-    //   line-height: 22px;
-    //   border-radius: @button-border-radius-mini;
-
-    //   &.ant-btn-icon-only {
-    //     min-width: @button-height-mini;
-    //     height: @button-height-mini;
-    //     border-radius: @button-border-radius-mini;
-    //   }
-
-    //   &.ant-btn-circle {
-    //     min-width: @button-height-mini;
-    //     height: @button-height-mini;
-    //     border-radius: 50%;
-    //   }
-
-    //   .aldicon-icon-left {
-    //     svg {
-    //       vertical-align: -2px;
-    //     }
-    //   }
-
-    //   gap:@button-left-icon-margin-right-mini;
-    //   // .aldicon-icon-left + span {
-    //   //   margin-left: @button-left-icon-margin-right-mini;
-    //   // }
-    // }
   }
 }

package/dist/Button/style/variables.less

@@ -1,5 +1,4 @@
 @ald-prefix: ald;
-@ald-iconfont-css-prefix: aldicon;
 
 @button-padding: 0 12px;
 

package/dist/ColorPicker/style/index.less

@@ -50,8 +50,8 @@
   background: #fff;
   border: 1px solid #dbdbdb;
   box-sizing: border-box;
-  box-shadow: 0 4px 6px -2px rgb(16 24 40 / 3%),
-    0 12px 16px -4px rgb(16 24 40 / 8%);
+  box-shadow: 0 4px 6px -2px rgb(16 24 40 / 0.03),
+    0 12px 16px -4px rgb(16 24 40 / 0.08);
   border-radius: 2px;
   padding: 8px 7px;
 

package/dist/ConfigProvider/index.d.ts

@@ -4,7 +4,8 @@ import React from 'react';
 import { getUsersByIdsType, getUsersByKeywordsType } from './getUserList';
 import useGetUserList from './hooks/useGetUserList';
 import SizeContext from './sizeContext';
-export type { ConfigConsumer, ConfigConsumerProps, configConsumerProps, ConfigContext, CSPConfig, DirectionType, globalConfig, RenderEmptyHandler, } from 'antd/lib/config-provider/';
+export { ConfigContext } from 'antd/lib/config-provider';
+export type { ConfigConsumer, ConfigConsumerProps, configConsumerProps, CSPConfig, DirectionType, globalConfig, RenderEmptyHandler, } from 'antd/lib/config-provider/';
 interface AldCustomConfigProviderProps extends ConfigProviderProps {
     children?: React.ReactNode;
     getUsersByIds?: getUsersByIdsType;

package/dist/ConfigProvider/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import getUserListContext from "./getUserList";
 import useGetUserList from "./hooks/useGetUserList";
 import SizeContext from "./sizeContext";
+export { ConfigContext } from 'antd/lib/config-provider';
 
 var AldCustomConfigProvider = function AldCustomConfigProvider(props) {
   var children = props.children,

package/dist/DatePicker/index.d.ts

@@ -1,35 +1,34 @@
-import { DatePickerProps } from 'antd';
-export type { MonthPickerProps, RangePickerProps, WeekPickerProps, } from 'antd/lib/date-picker';
-export type { DatePickerProps };
-declare const _default: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").PickerProps<import("dayjs").Dayjs> & {
+import { DatePicker as AntdDatePicker, DatePickerProps as AntdDatePickerProps } from 'antd';
+import { Dayjs } from 'dayjs';
+declare const DatePicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
     status?: "" | "warning" | "error" | undefined;
     hashId?: string | undefined;
     popupClassName?: string | undefined;
     rootClassName?: string | undefined;
 }, unknown> & {
-    WeekPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<import("dayjs").Dayjs> & {
+    WeekPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
         status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
     }, "picker">, unknown>;
-    MonthPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<import("dayjs").Dayjs> & {
+    MonthPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
         status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
     }, "picker">, unknown>;
-    YearPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<import("dayjs").Dayjs> & {
+    YearPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs> & {
         status?: "" | "warning" | "error" | undefined;
         hashId?: string | undefined;
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
     }, "picker">, unknown>;
-    RangePicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").RangePickerProps<import("dayjs").Dayjs> & {
+    RangePicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").RangePickerProps<Dayjs> & {
         dropdownClassName?: string | undefined;
         popupClassName?: string | undefined;
     }, unknown>;
-    TimePicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<Omit<import("rc-picker/lib/Picker").PickerTimeProps<import("dayjs").Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components"> & {
+    TimePicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<Omit<import("rc-picker/lib/Picker").PickerTimeProps<Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components"> & {
         locale?: import("antd/es/date-picker/generatePicker").PickerLocale | undefined;
         size?: import("antd/es/button").ButtonSize;
         placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
@@ -41,7 +40,7 @@ declare const _default: import("antd/es/date-picker/generatePicker/interface").P
         popupClassName?: string | undefined;
         rootClassName?: string | undefined;
     }, "picker">, unknown>;
-    QuarterPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<Omit<import("rc-picker/lib/Picker").PickerTimeProps<import("dayjs").Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components"> & {
+    QuarterPicker: import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<Omit<Omit<import("rc-picker/lib/Picker").PickerTimeProps<Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components"> & {
         locale?: import("antd/es/date-picker/generatePicker").PickerLocale | undefined;
         size?: import("antd/es/button").ButtonSize;
         placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
@@ -56,5 +55,15 @@ declare const _default: import("antd/es/date-picker/generatePicker/interface").P
 } & {
     _InternalPanelDoNotUseOrYouWillBeFired: any;
     _InternalRangePanelDoNotUseOrYouWillBeFired: any;
+} & {
+    WeekPicker: typeof AntdDatePicker.WeekPicker;
+    MonthPicker: typeof AntdDatePicker.MonthPicker;
+    YearPicker: typeof AntdDatePicker.YearPicker;
+    RangePicker: typeof AntdDatePicker.RangePicker;
+    TimePicker: typeof AntdDatePicker.TimePicker;
+    QuarterPicker: typeof AntdDatePicker.QuarterPicker;
 };
-export default _default;
+export declare type DatePickerProps = AntdDatePickerProps;
+export declare type YearPickerProps = typeof AntdDatePicker.YearPicker;
+export declare type QuarterPickerProps = typeof AntdDatePicker.QuarterPicker;
+export default DatePicker;

package/dist/DatePicker/index.js

@@ -1,4 +1,10 @@
-var _excluded = ["size", "disabled"];
+var _excluded = ["size", "disabled", "prefixCls", "className"],
+    _excluded2 = ["size", "disabled", "prefixCls", "className"],
+    _excluded3 = ["size", "disabled", "prefixCls", "className"],
+    _excluded4 = ["size", "disabled", "prefixCls", "className"],
+    _excluded5 = ["size", "disabled", "prefixCls", "className"],
+    _excluded6 = ["size", "disabled", "prefixCls", "className"],
+    _excluded7 = ["size", "disabled", "prefixCls", "className"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -7,31 +13,228 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import { DatePicker as AntdDatePicker } from 'antd';
+import { ConfigContext } from 'antd/lib/config-provider';
 import DisabledContext from 'antd/lib/config-provider/DisabledContext';
-import React, { useContext } from 'react';
-import SizeContext from "../ConfigProvider/sizeContext";
+import { useCompactItemContext } from 'antd/lib/space/Compact';
+import classNames from 'classnames';
+import React, { forwardRef, useContext } from 'react';
+import SizeContext from "../ConfigProvider/sizeContext"; // export type {
+//   MonthPickerProps,
+//   RangePickerProps,
+//   WeekPickerProps,
+// } from 'antd/lib/date-picker';
+// export type { DatePickerProps };
 
-var DatePicker = function DatePicker(props) {
+var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var customSize = props.size,
       customDisabled = props.disabled,
-      restProps = _objectWithoutProperties(props, _excluded);
+      customizePrefixCls = props.prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded); // ===================== Compact Item =====================
+
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+  var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex.compactSize,
+      compactItemClassnames = _useCompactItemContex.compactItemClassnames;
 
   var contentSize = useContext(SizeContext);
-  var size = customSize || contentSize || 'middle'; // ===================== Disabled =====================
+  var size = compactSize || customSize || contentSize || 'middle'; // ===================== Disabled =====================
 
   var disabled = useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   return /*#__PURE__*/React.createElement(AntdDatePicker, _extends({
+    ref: ref,
+    size: size,
+    className: classNames(compactItemClassnames, className),
+    disabled: mergedDisabled
+  }, restProps));
+});
+DatePicker.RangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customSize = props.size,
+      customDisabled = props.disabled,
+      customizePrefixCls = props.prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded2); // ===================== Compact Item =====================
+
+
+  var _React$useContext2 = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext2.getPrefixCls,
+      direction = _React$useContext2.direction;
+
+  var prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+  var _useCompactItemContex2 = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex2.compactSize,
+      compactItemClassnames = _useCompactItemContex2.compactItemClassnames;
+
+  var contentSize = useContext(SizeContext);
+  var size = compactSize || customSize || contentSize || 'middle'; // ===================== Disabled =====================
+
+  var disabled = useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  return /*#__PURE__*/React.createElement(AntdDatePicker.RangePicker, _extends({
+    ref: ref,
+    size: size,
+    className: classNames(compactItemClassnames, className),
+    disabled: mergedDisabled
+  }, restProps));
+});
+DatePicker.WeekPicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customSize = props.size,
+      customDisabled = props.disabled,
+      customizePrefixCls = props.prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded3); // ===================== Compact Item =====================
+
+
+  var _React$useContext3 = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext3.getPrefixCls,
+      direction = _React$useContext3.direction;
+
+  var prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+  var _useCompactItemContex3 = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex3.compactSize,
+      compactItemClassnames = _useCompactItemContex3.compactItemClassnames;
+
+  var contentSize = useContext(SizeContext);
+  var size = compactSize || customSize || contentSize || 'middle'; // ===================== Disabled =====================
+
+  var disabled = useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  return /*#__PURE__*/React.createElement(AntdDatePicker.WeekPicker, _extends({
+    ref: ref,
+    size: size,
+    className: classNames(compactItemClassnames, className),
+    disabled: mergedDisabled
+  }, restProps));
+});
+DatePicker.MonthPicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customSize = props.size,
+      customDisabled = props.disabled,
+      customizePrefixCls = props.prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded4); // ===================== Compact Item =====================
+
+
+  var _React$useContext4 = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext4.getPrefixCls,
+      direction = _React$useContext4.direction;
+
+  var prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+  var _useCompactItemContex4 = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex4.compactSize,
+      compactItemClassnames = _useCompactItemContex4.compactItemClassnames;
+
+  var contentSize = useContext(SizeContext);
+  var size = compactSize || customSize || contentSize || 'middle'; // ===================== Disabled =====================
+
+  var disabled = useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  return /*#__PURE__*/React.createElement(AntdDatePicker.MonthPicker, _extends({
+    ref: ref,
+    size: size,
+    className: classNames(compactItemClassnames, className),
+    disabled: mergedDisabled
+  }, restProps));
+});
+DatePicker.YearPicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customSize = props.size,
+      customDisabled = props.disabled,
+      customizePrefixCls = props.prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded5); // ===================== Compact Item =====================
+
+
+  var _React$useContext5 = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext5.getPrefixCls,
+      direction = _React$useContext5.direction;
+
+  var prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+  var _useCompactItemContex5 = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex5.compactSize,
+      compactItemClassnames = _useCompactItemContex5.compactItemClassnames;
+
+  var contentSize = useContext(SizeContext);
+  var size = compactSize || customSize || contentSize || 'middle'; // ===================== Disabled =====================
+
+  var disabled = useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  return /*#__PURE__*/React.createElement(AntdDatePicker.YearPicker, _extends({
+    ref: ref,
     size: size,
+    className: classNames(compactItemClassnames, className),
     disabled: mergedDisabled
   }, restProps));
-};
+});
+DatePicker.TimePicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customSize = props.size,
+      customDisabled = props.disabled,
+      customizePrefixCls = props.prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded6); // ===================== Compact Item =====================
+
+
+  var _React$useContext6 = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext6.getPrefixCls,
+      direction = _React$useContext6.direction;
+
+  var prefixCls = getPrefixCls('picker', customizePrefixCls);
 
-DatePicker.WeekPicker = AntdDatePicker.WeekPicker;
-DatePicker.MonthPicker = AntdDatePicker.MonthPicker;
-DatePicker.YearPicker = AntdDatePicker.YearPicker;
-DatePicker.RangePicker = AntdDatePicker.RangePicker;
-DatePicker.TimePicker = AntdDatePicker.TimePicker;
-DatePicker.QuarterPicker = AntdDatePicker.QuarterPicker; // 基于DatePicker的组件，prop都一样，类型保持一致
+  var _useCompactItemContex6 = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex6.compactSize,
+      compactItemClassnames = _useCompactItemContex6.compactItemClassnames;
 
+  var contentSize = useContext(SizeContext);
+  var size = compactSize || customSize || contentSize || 'middle'; // ===================== Disabled =====================
+
+  var disabled = useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  return /*#__PURE__*/React.createElement(AntdDatePicker.TimePicker, _extends({
+    // @ts-ignore
+    ref: ref,
+    size: size,
+    className: classNames(compactItemClassnames, className),
+    disabled: mergedDisabled
+  }, restProps));
+});
+DatePicker.QuarterPicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customSize = props.size,
+      customDisabled = props.disabled,
+      customizePrefixCls = props.prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded7); // ===================== Compact Item =====================
+
+
+  var _React$useContext7 = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext7.getPrefixCls,
+      direction = _React$useContext7.direction;
+
+  var prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+  var _useCompactItemContex7 = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex7.compactSize,
+      compactItemClassnames = _useCompactItemContex7.compactItemClassnames;
+
+  var contentSize = useContext(SizeContext);
+  var size = compactSize || customSize || contentSize || 'middle'; // ===================== Disabled =====================
+
+  var disabled = useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  return /*#__PURE__*/React.createElement(AntdDatePicker.QuarterPicker, _extends({
+    // @ts-ignore
+    ref: ref,
+    size: size,
+    className: classNames(compactItemClassnames, className),
+    disabled: mergedDisabled
+  }, restProps));
+});
 export default DatePicker;

package/dist/DatePicker/style/index.less

@@ -1 +1,14 @@
 @import '../../style/index.less';
+
+.ant-picker.ant-picker {
+  border-color: #dbdbdb;
+
+  &:hover {
+    border-color: #dbdbdb;
+  }
+
+  &.ant-picker-focused {
+    border-color: #3271c9;
+    box-shadow: none;
+  }
+}