@ucloud-fe/react-components 1.5.17 → 1.5.18

package/lib/components/Compact/style/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.controllerPrefix = exports.prefixCls = void 0;
+
+var _config = _interopRequireDefault(require("../../../config"));
+
+var _prefixCls = _config.default.prefixCls;
+var prefixCls = _prefixCls + '-compact';
+exports.prefixCls = prefixCls;
+var controllerPrefix = prefixCls + '-controller';
+exports.controllerPrefix = controllerPrefix;

package/lib/components/ConfigProvider/ConfigContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ConfigProviderProps } from './ConfigProvider';
+export declare const defaultConfig: {
+    forwardPopupContainer: boolean;
+    preventFormDefaultAction: boolean;
+};
+export declare type ConfigContextType = Pick<ConfigProviderProps, 'forwardPopupContainer' | 'popover' | 'preventFormDefaultAction' | 'iconDefaultPrefix' | 'actionListAutoAdjustment'>;
+declare const _default: import("react").Context<ConfigContextType>;
+export default _default;

package/lib/components/ConfigProvider/ConfigContext.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.defaultConfig = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var defaultConfig = {
+  forwardPopupContainer: true,
+  preventFormDefaultAction: true
+};
+exports.defaultConfig = defaultConfig;
+
+var _default = /*#__PURE__*/(0, _react.createContext)(defaultConfig);
+
+exports.default = _default;

package/lib/components/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { AllLocaleMap } from '../../components/LocaleProvider/LocaleContext';
+export interface ConfigProviderProps {
+    /** @ignore */
+    children: ReactNode;
+    /**
+     * @deprecated 使用 popover 替换
+     * 默认为 true。
+     * 控制全局的 forwardPopupContainer 属性，默认为 true，为 false 时默认关闭 datepicker、select、actionList 等内部的 forwardPopupContainer
+     */
+    forwardPopupContainer?: boolean;
+    /** 全局控制 popover 类组件行为，datepicker、select、actionList  */
+    popover?: {
+        /** 控制弹出层默认容器 */
+        getPopupContainer?: (triggerNode: Element) => Element;
+        /** 滚动时是否重新定位 */
+        forceAlignWhenScroll?: boolean;
+        /** 控制默认的 forwardPopupContainer */
+        forwardPopupContainer?: boolean | ((triggerNode: Element) => Element);
+        /** 配置不影响 Popover 组件 */
+        ignorePopover?: boolean;
+    };
+    /**
+     * 默认为 true。
+     * 阻止 Form 组件的默认事件，避免在回车时触发页面提交，原生 form 在某些情况下会触发原生的提交，由于现在基本 SPA，页面提交概率不大，故默认屏蔽 Form 组件该行文，如需开启，可设置为 false
+     */
+    preventFormDefaultAction?: boolean;
+    /**
+     * 设置 Icon 组件的默认 prefix，默认为 icon__，
+     */
+    iconDefaultPrefix?: string;
+    /** 提供时会使用 ThemeProvider 包裹 */
+    theme?: any;
+    /** 提供时会使用 LocaleProvider 包裹 */
+    locale?: AllLocaleMap;
+    /** 是否默认启用 ActionList 的 autoAdJustment 参数 */
+    actionListAutoAdjustment?: boolean;
+}
+declare const ConfigProvider: ({ children, theme, locale, ...rest }: ConfigProviderProps) => JSX.Element;
+export default ConfigProvider;

package/lib/components/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ThemeProvider = _interopRequireDefault(require("../../components/ThemeProvider"));
+
+var _LocaleProvider = _interopRequireDefault(require("../../components/LocaleProvider"));
+
+var _ConfigContext = _interopRequireWildcard(require("./ConfigContext"));
+
+var _excluded = ["children", "theme", "locale"];
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var ConfigProvider = function ConfigProvider(_ref) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var children = _ref.children,
+      theme = _ref.theme,
+      locale = _ref.locale,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var provider = /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Provider, {
+    value: _objectSpread(_objectSpread({}, _ConfigContext.defaultConfig), rest)
+  }, children);
+
+  if (theme) provider = /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
+    theme: theme
+  }, provider);
+  if (locale) provider = /*#__PURE__*/_react.default.createElement(_LocaleProvider.default, {
+    locale: locale
+  }, provider);
+  return provider;
+}.bind(void 0);
+
+ConfigProvider.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  forwardPopupContainer: _propTypes.default.bool,
+  popover: _propTypes.default.shape({
+    getPopupContainer: _propTypes.default.func,
+    forceAlignWhenScroll: _propTypes.default.bool,
+    forwardPopupContainer: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
+    ignorePopover: _propTypes.default.bool
+  }),
+  preventFormDefaultAction: _propTypes.default.bool,
+  iconDefaultPrefix: _propTypes.default.string,
+  theme: _propTypes.default.any,
+  actionListAutoAdjustment: _propTypes.default.bool
+};
+var _default = ConfigProvider;
+exports.default = _default;

package/lib/components/ConfigProvider/index.d.ts

@@ -0,0 +1,4 @@
+declare const ExportConfigProvider: (({ children, theme, locale, ...rest }: import("./ConfigProvider").ConfigProviderProps) => JSX.Element) & {
+    setConfig: (_config: any) => void;
+};
+export default ExportConfigProvider;

package/lib/components/ConfigProvider/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _config = require("../../config");
+
+var _type = require("../../type");
+
+var _ConfigProvider = _interopRequireDefault(require("./ConfigProvider"));
+
+var ExportConfigProvider = (0, _type.ExportComponent)(_ConfigProvider.default, {
+  setConfig: _config.setConfig
+});
+var _default = ExportConfigProvider;
+exports.default = _default;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Moment } from 'moment';
+import { TDate } from '@ucloud-fe/calendar';
+import Time from '../../components/TimePicker/Time';
+import { Size } from '../../type';
+import LOCALE from './locale/zh_CN';
+import { TShortcut } from './Footer';
+export declare type DatePickerProps = {
+    /** 值，受控 */
+    value?: TDate | null;
+    /** 默认值，非受控 */
+    defaultValue?: TDate | null;
+    /** 修改回调 */
+    onChange?: (v: Moment | null) => void;
+    /** 自定义规则 */
+    rules?: any;
+    /** 尺寸 */
+    size?: Size;
+    /** 输入和展示的字符串格式，为数组时，第一个用作展示，并影响时间面板 */
+    format?: string | string[];
+    /** 是否可为空，为空时不传或传入空值会默认为当前时刻 */
+    nullable?: boolean;
+    /**
+     *  @deprecated 使用 format 替换
+     * 设置操作面板，时分秒
+     */
+    display?: {
+        date?: {
+            /** @deprecated 设置日期展示格式，使用 format 替换 */
+            format?: string;
+            /** @deprecated 是否展示日期选择，仅时间选择需求使用 TimePicker 替换 */
+            show?: boolean;
+        };
+        /** 设置为 false，隐藏时 */
+        hour?: boolean;
+        /** 设置为 false，隐藏分 */
+        minute?: boolean;
+        /** 设置为 false，隐藏秒 */
+        second?: boolean;
+    };
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 状态 */
+    status?: 'default' | 'error';
+    /** placeholder */
+    placeholder?: string;
+    /**
+     * @deprecated 新版交互已移除相关展示
+     * @ignore
+     * 面板快捷内容
+     */
+    shortcuts?: TShortcut[] | null;
+    /** 自定义 popover，参考 popover */
+    popoverProps?: any;
+    /** 类型 */
+    type?: 'date' | 'month';
+    /** 自定义语言 */
+    locale?: typeof LOCALE;
+    /**
+     * @deprecated 使用 popoverProps 替换
+     * 弹出层的 z-index
+     */
+    zIndex?: number;
+    /**
+     * @deprecated 使用 popoverProps 替换
+     * 弹出层容器，参考 popover.getPopupContainer
+     */
+    getCalendarContainer?: (triggerNode: Element) => Element;
+};
+declare type Time = 'HH' | 'mm' | 'ss';
+export declare const displayToFormatAndTimeMode: (display: DatePickerProps['display']) => [string[], Time[]];
+declare const _default: React.MemoExoticComponent<(props: DatePickerProps) => JSX.Element>;
+export default _default;

package/lib/components/DatePicker/DatePicker.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.displayToFormatAndTimeMode = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Input = _interopRequireDefault(require("../../components/Input"));
+
+var _Calendar = _interopRequireDefault(require("../../components/Calendar"));
+
+var _Popover = _interopRequireDefault(require("../../components/Popover"));
+
+var _Time = _interopRequireDefault(require("../../components/TimePicker/Time"));
+
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
+var _style = require("./style");
+
+var _Footer = _interopRequireDefault(require("./Footer"));
+
+var _usePicker3 = _interopRequireDefault(require("./usePicker"));
+
+var _utils = require("./utils");
+
+var _Month = _interopRequireDefault(require("./Month"));
+
+var _this = void 0;
+
+var displayToFormatAndTimeMode = function displayToFormatAndTimeMode(display) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var format = 'YYYY-MM-DD HH:mm:ss';
+  var timeFormatA = ['HH', 'mm', 'ss'];
+
+  if (display) {
+    var dateFormat = 'YYYY-MM-DD';
+
+    if (display.date && display.date.format) {
+      dateFormat = display.date.format;
+    }
+
+    timeFormatA = [];
+
+    if (display.hour !== false) {
+      timeFormatA.push('HH');
+    }
+
+    if (display.minute !== false) {
+      timeFormatA.push('mm');
+    }
+
+    if (display.second !== false) {
+      timeFormatA.push('ss');
+    }
+
+    format = timeFormatA.length ? dateFormat + ' ' + timeFormatA.join(':') : dateFormat;
+  }
+
+  return [[format, (0, _utils.formatToShort)(format)], timeFormatA];
+}.bind(void 0);
+
+exports.displayToFormatAndTimeMode = displayToFormatAndTimeMode;
+
+var DatePickerForDate = function DatePickerForDate(props) {
+  var _timeProps$mode;
+
+  (0, _newArrowCheck2.default)(this, _this);
+
+  var _usePicker = (0, _usePicker3.default)(props, displayToFormatAndTimeMode, 'date'),
+      _usePicker2 = (0, _slicedToArray2.default)(_usePicker, 8),
+      inputProps = _usePicker2[0],
+      containerProps = _usePicker2[1],
+      popoverProps = _usePicker2[2],
+      popupProps = _usePicker2[3],
+      calendarProps = _usePicker2[4],
+      timeProps = _usePicker2[5],
+      footerProps = _usePicker2[6],
+      error = _usePicker2[7].error;
+
+  var hasTime = !!((_timeProps$mode = timeProps.mode) !== null && _timeProps$mode !== void 0 && _timeProps$mode.length);
+  return /*#__PURE__*/_react.default.createElement(_style.PickerContainer, (0, _extends2.default)({}, containerProps, {
+    hasTime: hasTime
+  }), /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({}, popoverProps, {
+    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_style.Arrow, null), /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({}, calendarProps, {
+      sidebar: hasTime ? /*#__PURE__*/_react.default.createElement(_Time.default, timeProps) : null
+    })), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerProps, {
+      tip: error,
+      isError: !!error
+    })))
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, inputProps, {
+    prefix: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      type: "calendar"
+    }),
+    block: true
+  }))));
+}.bind(void 0);
+
+DatePickerForDate.propTypes = {
+  onChange: _propTypes.default.func,
+  rules: _propTypes.default.any,
+  format: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  nullable: _propTypes.default.bool,
+  display: _propTypes.default.shape({
+    date: _propTypes.default.shape({
+      format: _propTypes.default.string,
+      show: _propTypes.default.bool
+    }),
+    hour: _propTypes.default.bool,
+    minute: _propTypes.default.bool,
+    second: _propTypes.default.bool
+  }),
+  disabled: _propTypes.default.bool,
+  status: _propTypes.default.oneOf(['default', 'error']),
+  placeholder: _propTypes.default.string,
+  shortcuts: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf([null])]),
+  popoverProps: _propTypes.default.any,
+  type: _propTypes.default.oneOf(['date', 'month']),
+  locale: _propTypes.default.any,
+  zIndex: _propTypes.default.number,
+  getCalendarContainer: _propTypes.default.func
+};
+
+var DatePicker = function DatePicker(props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var type = props.type;
+  return type === 'month' ? /*#__PURE__*/_react.default.createElement(_Month.default, props) : /*#__PURE__*/_react.default.createElement(DatePickerForDate, props);
+}.bind(void 0);
+
+DatePicker.propTypes = {
+  onChange: _propTypes.default.func,
+  rules: _propTypes.default.any,
+  format: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  nullable: _propTypes.default.bool,
+  display: _propTypes.default.shape({
+    date: _propTypes.default.shape({
+      format: _propTypes.default.string,
+      show: _propTypes.default.bool
+    }),
+    hour: _propTypes.default.bool,
+    minute: _propTypes.default.bool,
+    second: _propTypes.default.bool
+  }),
+  disabled: _propTypes.default.bool,
+  status: _propTypes.default.oneOf(['default', 'error']),
+  placeholder: _propTypes.default.string,
+  shortcuts: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf([null])]),
+  popoverProps: _propTypes.default.any,
+  type: _propTypes.default.oneOf(['date', 'month']),
+  locale: _propTypes.default.any,
+  zIndex: _propTypes.default.number,
+  getCalendarContainer: _propTypes.default.func
+};
+
+var _default = /*#__PURE__*/_react.default.memo(DatePicker);
+
+exports.default = _default;

package/lib/components/DatePicker/Footer.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { TDate } from '@ucloud-fe/calendar';
+import LOCALE from './locale/zh_CN';
+export interface TShortcut {
+    handle: () => TDate;
+    locale?: keyof typeof LOCALE;
+    label?: ReactNode;
+}
+declare type Mode = 'date' | 'month';
+export declare const TipIcon: React.NamedExoticComponent<object>;
+interface FooterProps {
+    mode: Mode;
+    confirmAble: boolean;
+    onConfirm: () => void;
+    shortcuts?: TShortcut[] | null;
+    onShortcut: (d: TDate) => void;
+    isError?: boolean;
+    tip?: ReactNode;
+    locale?: typeof LOCALE;
+    showConfirm?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ isError, confirmAble, onConfirm, shortcuts, onShortcut, tip, showConfirm, locale: _locale }: FooterProps) => JSX.Element | null>;
+export default _default;

package/lib/components/DatePicker/Footer.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TipIcon = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../../components/Button"));
+
+var _Box = _interopRequireDefault(require("../../components/Box"));
+
+var _useLocale = _interopRequireDefault(require("../../components/LocaleProvider/useLocale"));
+
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
+var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
+
+var _style = require("./style");
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TipIcon = /*#__PURE__*/_react.default.memo(function TipIcon() {
+  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+    type: "exclamation-circle-filled",
+    className: _style.tipIconCls
+  });
+});
+
+exports.TipIcon = TipIcon;
+
+var Footer = function Footer(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var isError = _ref.isError,
+      confirmAble = _ref.confirmAble,
+      onConfirm = _ref.onConfirm,
+      shortcuts = _ref.shortcuts,
+      onShortcut = _ref.onShortcut,
+      tip = _ref.tip,
+      showConfirm = _ref.showConfirm,
+      _locale = _ref.locale;
+  var handleConfirm = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    return onConfirm();
+  }.bind(this), [onConfirm]);
+  var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
+  return !tip && !showConfirm ? null : /*#__PURE__*/_react.default.createElement(_Box.default, {
+    className: _style.footerCls,
+    container: true,
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, tip ? /*#__PURE__*/_react.default.createElement("span", {
+    className: isError ? _style.errorTipCls : _style.tipCls,
+    title: typeof tip === 'string' ? tip : ''
+  }, /*#__PURE__*/_react.default.createElement(TipIcon, null), /*#__PURE__*/_react.default.createElement("span", null, tip)) : /*#__PURE__*/_react.default.createElement("span", null), showConfirm && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    styleType: "primary",
+    size: "sm",
+    disabled: !confirmAble,
+    onClick: handleConfirm
+  }, locale.confirm));
+}.bind(void 0);
+
+Footer.propTypes = {
+  mode: _propTypes.default.oneOf(['date', 'month']).isRequired,
+  confirmAble: _propTypes.default.bool.isRequired,
+  onConfirm: _propTypes.default.func.isRequired,
+  shortcuts: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
+    handle: _propTypes.default.func.isRequired,
+    locale: _propTypes.default.any,
+    label: _propTypes.default.node
+  })), _propTypes.default.oneOf([null])]),
+  onShortcut: _propTypes.default.func.isRequired,
+  isError: _propTypes.default.bool,
+  tip: _propTypes.default.node,
+  locale: _propTypes.default.any,
+  showConfirm: _propTypes.default.bool
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(Footer);
+
+exports.default = _default;

package/lib/components/DatePicker/Month.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DatePickerProps } from './DatePicker';
+export declare const displayToFormatAndTimeMode: (display: DatePickerProps['display']) => [string[]];
+declare const _default: React.MemoExoticComponent<(props: DatePickerProps) => JSX.Element>;
+export default _default;

package/lib/components/DatePicker/Month.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.displayToFormatAndTimeMode = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Input = _interopRequireDefault(require("../../components/Input"));
+
+var _Calendar = _interopRequireDefault(require("../../components/Calendar"));
+
+var _Popover = _interopRequireDefault(require("../../components/Popover"));
+
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
+var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
+
+var _style = require("./style");
+
+var _Footer = _interopRequireDefault(require("./Footer"));
+
+var _usePicker3 = _interopRequireDefault(require("./usePicker"));
+
+var _utils = require("./utils");
+
+var _this = void 0;
+
+var displayToFormatAndTimeMode = function displayToFormatAndTimeMode(display) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var format = 'YYYY-MM';
+
+  if (display) {
+    if (display.date && display.date.format) {
+      format = display.date.format;
+    }
+  }
+
+  return [[format, (0, _utils.formatToShort)(format)]];
+}.bind(void 0);
+/**
+ * @deprecated 请使用 ```<DatePicker type='month' />``` 替换
+ */
+
+
+exports.displayToFormatAndTimeMode = displayToFormatAndTimeMode;
+
+var Month = function Month(props) {
+  (0, _newArrowCheck2.default)(this, _this);
+
+  var _usePicker = (0, _usePicker3.default)(props, displayToFormatAndTimeMode, 'month'),
+      _usePicker2 = (0, _slicedToArray2.default)(_usePicker, 8),
+      inputProps = _usePicker2[0],
+      containerProps = _usePicker2[1],
+      popoverProps = _usePicker2[2],
+      popupProps = _usePicker2[3],
+      calendarProps = _usePicker2[4],
+      footerProps = _usePicker2[6],
+      error = _usePicker2[7].error;
+
+  var popoverConfigProps = (0, _usePopoverConfig.default)();
+  return /*#__PURE__*/_react.default.createElement(_style.PickerContainer, (0, _extends2.default)({
+    isMonth: true
+  }, containerProps), /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
+    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_style.Arrow, null), /*#__PURE__*/_react.default.createElement(_Calendar.default.Month, calendarProps), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerProps, {
+      tip: error,
+      isError: !!error
+    })))
+  }, popoverConfigProps, popoverProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, inputProps, {
+    prefix: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      type: "calendar"
+    }),
+    block: true
+  }))));
+}.bind(void 0);
+
+var _default = /*#__PURE__*/_react.default.memo(Month);
+
+exports.default = _default;