@qn-pandora/pandora-component 3.0.0 → 3.1.0

package/lib/components/Collapse/style.css

@@ -0,0 +1,210 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-collapse {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  background-color: #fafafa;
+  border: 1px solid #e5e5e5;
+  border-bottom: 0;
+  border-radius: 2px;
+}
+.ant-collapse > .ant-collapse-item {
+  border-bottom: 1px solid #e5e5e5;
+}
+.ant-collapse > .ant-collapse-item:last-child,
+.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+  border-radius: 0 0 2px 2px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  position: relative;
+  padding: 12px 16px;
+  color: #333;
+  line-height: 1.5715;
+  cursor: pointer;
+  -webkit-transition: all 0.3s, visibility 0s;
+  transition: all 0.3s, visibility 0s;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header::before {
+  display: table;
+  content: '';
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
+  display: inline-block;
+  margin-right: 12px;
+  font-size: 12px;
+  vertical-align: -1px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
+  -webkit-transition: -webkit-transform 0.24s;
+  transition: -webkit-transform 0.24s;
+  transition: transform 0.24s;
+  transition: transform 0.24s, -webkit-transform 0.24s;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-extra {
+  float: right;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header:focus {
+  outline: none;
+}
+.ant-collapse > .ant-collapse-item .ant-collapse-header-collapsible-only {
+  cursor: default;
+}
+.ant-collapse > .ant-collapse-item .ant-collapse-header-collapsible-only .ant-collapse-header-text {
+  cursor: pointer;
+}
+.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header {
+  padding-left: 12px;
+}
+.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header {
+  padding: 12px 16px;
+  padding-right: 40px;
+}
+.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  left: auto;
+  margin: 0;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.ant-collapse-content {
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #ffffff;
+  border-top: 1px solid #e5e5e5;
+}
+.ant-collapse-content > .ant-collapse-content-box {
+  padding: 16px;
+}
+.ant-collapse-content-hidden {
+  display: none;
+}
+.ant-collapse-item:last-child > .ant-collapse-content {
+  border-radius: 0 0 2px 2px;
+}
+.ant-collapse-borderless {
+  background-color: #fafafa;
+  border: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item {
+  border-bottom: 1px solid #e5e5e5;
+}
+.ant-collapse-borderless > .ant-collapse-item:last-child,
+.ant-collapse-borderless > .ant-collapse-item:last-child .ant-collapse-header {
+  border-radius: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content {
+  background-color: transparent;
+  border-top: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding-top: 4px;
+}
+.ant-collapse-ghost {
+  background-color: transparent;
+  border: 0;
+}
+.ant-collapse-ghost > .ant-collapse-item {
+  border-bottom: 0;
+}
+.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content {
+  background-color: transparent;
+  border-top: 0;
+}
+.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-collapse-rtl {
+  direction: rtl;
+}
+.ant-collapse-rtl .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 12px 16px;
+  padding-right: 40px;
+}
+.ant-collapse-rtl.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.ant-collapse-rtl.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-extra {
+  float: left;
+}
+.ant-collapse-rtl.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header {
+  padding-right: 12px;
+  padding-left: 0;
+}
+.ant-btn {
+  padding: 4px 15px;
+}
+.ant-btn-sm {
+  padding: 0 7px;
+}
+.pandora-sdk-collapse-simple {
+  border-width: 0px;
+  color: #333;
+}
+.pandora-sdk-collapse-simple > .ant-collapse-item > .ant-collapse-header {
+  background-color: #ffffff;
+}
+.pandora-sdk-collapse-simple > .ant-collapse-item > .ant-collapse-header > .ant-collapse-arrow {
+  color: #333;
+}
+.pandora-sdk-collapse-simple > .ant-collapse-item > .ant-collapse-content {
+  color: heading-color;
+  border-top-width: 0px;
+}
+.pandora-sdk-collapse-primary,
+.pandora-sdk-collapse-dashed {
+  border: none;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item {
+  border: none;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-header {
+  padding: 5px 16px;
+  border-bottom-width: 0px;
+  background-color: #fafafa;
+  font-weight: 500;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-header .pandora-sdk-header-line {
+  width: 2px;
+  height: 16px;
+  position: absolute;
+  top: 8px;
+  left: 0px;
+  background-color: #2c6dd2;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-content {
+  border: none;
+}
+.pandora-sdk-collapse-dashed > .ant-collapse-item {
+  border: 1px dashed #d9d9d9;
+  margin-bottom: 12px;
+}
+.pandora-sdk-collapse-dashed > .ant-collapse-item > .ant-collapse-header {
+  background-color: #ffffff;
+}
+.pandora-sdk-collapse-dashed > .ant-collapse-item > .ant-collapse-content {
+  border: none;
+}

package/lib/components/Collapse/style.less

@@ -0,0 +1,57 @@
+@import 'antd/lib/collapse/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-collapse-simple {
+  border-width: 0px;
+  color: @heading-color;
+}
+
+.@{sdk-prefix}-collapse-simple > .@{ant-prefix}-collapse-item {
+  > .@{ant-prefix}-collapse-header {
+    background-color: @normal-color;
+    > .@{ant-prefix}-collapse-arrow {
+      color: @heading-color;
+    }
+  }
+  > .@{ant-prefix}-collapse-content {
+    color: heading-color;
+    border-top-width: 0px;
+  }
+}
+
+.@{sdk-prefix}-collapse-primary,
+.@{sdk-prefix}-collapse-dashed {
+  border: none;
+}
+
+.@{sdk-prefix}-collapse-primary > .@{ant-prefix}-collapse-item {
+  border: none;
+  > .@{ant-prefix}-collapse-header {
+    padding: 5px 16px;
+    border-bottom-width: 0px;
+    background-color: @table-thead-bg;
+    font-weight: 500;
+    .@{sdk-prefix}-header-line {
+      width: 2px;
+      height: 16px;
+      position: absolute;
+      top: 8px;
+      left: 0px;
+      background-color: @theme-color;
+    }
+  }
+  > .@{ant-prefix}-collapse-content {
+    border: none;
+  }
+}
+
+.@{sdk-prefix}-collapse-dashed > .@{ant-prefix}-collapse-item {
+  border: 1px dashed @border-color-1;
+  margin-bottom: 12px;
+  > .@{ant-prefix}-collapse-header {
+    background-color: @normal-color;
+  }
+  > .@{ant-prefix}-collapse-content {
+    border: none;
+  }
+}

package/lib/components/DateTimePicker/Base/index.d.ts

@@ -25,6 +25,7 @@ export default class Base extends React.Component<IBaseProps, any> {
         placement: string;
         showTimeType: TimeType[];
     };
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     range: RangePickerValue;
     rangePreset: RangePreset;
     relative: IRelativeTime;

package/lib/components/DateTimePicker/Base/index.js

@@ -50,11 +50,14 @@ var _ = __importStar(require("lodash"));
 var mobx_1 = require("mobx");
 var mobx_react_1 = require("mobx-react");
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
 var bind_1 = __importDefault(require("../../../utils/bind"));
+var language_1 = require("../../../utils/language");
 var style_1 = require("../../../constants/style");
 var time_1 = require("../../../constants/time");
+var type_1 = require("../../../constants/language/datetime/type");
 var Button_1 = __importDefault(require("../../Button"));
-var Collapse_1 = __importDefault(require("../../Collapse"));
+var Collapse_1 = __importDefault(require("../Collapse"));
 var Selector_1 = __importDefault(require("../../Selector"));
 var NameLimiter_1 = __importDefault(require("../../NameLimiter"));
 var relativeTimePicker_1 = __importDefault(require("./relativeTimePicker"));
@@ -250,6 +253,7 @@ var Base = /** @class */ (function (_super) {
     Base.prototype.getAllPresetItems = function () {
         var _this = this;
         var _a = this.props, presets = _a.presets, presetMode = _a.presetMode, value = _a.value;
+        var locale = this.context.locale;
         var allPresets = presetMode === constants_1.EPresetMode.COVER
             ? _.concat(presets || [])
             : _.concat(constants_1.defaultPresets, presets || []);
@@ -258,7 +262,7 @@ var Base = /** @class */ (function (_super) {
             return (React.createElement("div", { key: preset.value, className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-item", (_a = {},
                     _a['active'] = value && preset.value === value.preset,
                     _a)), onClick: function () { return _this.handlePresetClick(preset); } },
-                React.createElement(NameLimiter_1.default, { name: preset.text })));
+                React.createElement(NameLimiter_1.default, { name: language_1.formatString(type_1.DateTimeLocale.preset[preset.value], locale) })));
         });
     };
     Base.prototype.handlePresetClick = function (preset) {
@@ -336,6 +340,7 @@ var Base = /** @class */ (function (_super) {
     };
     Base.prototype.renderRelativeContent = function () {
         var _a;
+        var locale = this.context.locale;
         var fromNum = _.get(this.relative, 'from.num', exports.RELATIVE_DEFAULT_VALUE.FROM_NUM);
         var fromUnit = _.get(this.relative, 'from.unit', exports.RELATIVE_DEFAULT_VALUE.FROM_UNIT);
         var toNum = _.get(this.relative, 'to.num', exports.RELATIVE_DEFAULT_VALUE.TO_NUM);
@@ -344,20 +349,20 @@ var Base = /** @class */ (function (_super) {
             return (React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-content" },
                 React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-container" },
                     React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: this.props.relativeTimeUnits }),
-                    React.createElement(Button_1.default, { disabled: !this.isRelativeTimeValid, className: style_1.SDK_PREFIX + "-datetime-pick-relative-confirm", onClick: this.handleRelativeChange }, "\u786E\u8BA4"))));
+                    React.createElement(Button_1.default, { disabled: !this.isRelativeTimeValid, className: style_1.SDK_PREFIX + "-datetime-pick-relative-confirm", onClick: this.handleRelativeChange }, language_1.formatString(type_1.DateTimeLocale.confirm, locale)))));
         }
         return (React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-content" },
             React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-container" },
                 React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative-timepicker", num: fromNum, unit: fromUnit, onChange: this.handleRetiveTimeFromChange, relativeTimeUnits: this.props.relativeTimeUnits, withoutNow: true }),
-                React.createElement("span", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-container-to" }, "\u81F3"),
+                React.createElement("span", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-container-to" }, language_1.formatString(type_1.DateTimeLocale.to, locale)),
                 React.createElement(relativeTimePicker_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-relative-timepicker", num: toNum, unit: toUnit, onChange: this.handleRetiveTimeToChange, relativeTimeUnits: this.props.relativeTimeUnits })),
             React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-relative-footer", (_a = {},
                     _a[style_1.SDK_PREFIX + "-datetime-pick-relative-footer-witNow"] = toUnit === constants_1.RelativeUnitValue.NowStatic,
                     _a)) },
                 React.createElement("span", { className: classnames_1.default(style_1.SDK_PREFIX + "-error") }, this.relativeTimeInValid !== RelativeInvalid.Valid
-                    ? '起始时间不能大于终止时间'
+                    ? language_1.formatString(type_1.DateTimeLocale.error, locale)
                     : ''),
-                React.createElement(Button_1.default, { disabled: !this.isRelativeTimeValid, onClick: this.handleRelativeChange }, "\u786E\u8BA4"))));
+                React.createElement(Button_1.default, { disabled: !this.isRelativeTimeValid, onClick: this.handleRelativeChange }, language_1.formatString(type_1.DateTimeLocale.confirm, locale)))));
     };
     Base.prototype.render = function () {
         var _this = this;
@@ -371,17 +376,27 @@ var Base = /** @class */ (function (_super) {
             showTimeType = [constants_1.TimeType.Absolute, constants_1.TimeType.Relative, constants_1.TimeType.Preset];
         }
         var _c = this.props, quarterTitle = _c.quarterTitle, presetTitle = _c.presetTitle, relativeTitle = _c.relativeTitle, absoluteTitle = _c.absoluteTitle;
+        var locale = this.context.locale;
+        var rangeOptions = constants_1.rangePresetOptions.map(function (option) {
+            return {
+                value: option.value,
+                text: language_1.formatString(option.text, locale)
+            };
+        });
         return (React.createElement("div", { className: this.props.className },
             React.createElement(Collapse_1.default, { defaultActiveKey: this.activeKeys },
-                showTimeType.indexOf(constants_1.TimeType.Preset) > -1 && (React.createElement(Panel, { title: presetTitle || '预设', key: constants_1.TimeType.Preset, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: style_1.SDK_PREFIX + "-datetime-pick-panel", disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle },
+                showTimeType.indexOf(constants_1.TimeType.Preset) > -1 && (React.createElement(Panel, { title: presetTitle || language_1.formatString(type_1.DateTimeLocale.preset.title, locale), key: constants_1.TimeType.Preset, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: style_1.SDK_PREFIX + "-datetime-pick-panel", disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle },
                     React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-preset" }, this.getAllPresetItems()))),
-                showTimeType.indexOf(constants_1.TimeType.Relative) > -1 && (React.createElement(Panel, { title: relativeTitle || '相对时间', key: constants_1.TimeType.Relative, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: style_1.SDK_PREFIX + "-datetime-pick-panel", disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle }, this.renderRelativeContent())),
-                showTimeType.indexOf(constants_1.TimeType.Absolute) > -1 && (React.createElement(Panel, { title: absoluteTitle || '绝对时间', key: constants_1.TimeType.Absolute, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: style_1.SDK_PREFIX + "-datetime-pick-panel", disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle },
+                showTimeType.indexOf(constants_1.TimeType.Relative) > -1 && (React.createElement(Panel, { title: relativeTitle ||
+                        language_1.formatString(type_1.DateTimeLocale.relative.title, locale), key: constants_1.TimeType.Relative, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: style_1.SDK_PREFIX + "-datetime-pick-panel", disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle }, this.renderRelativeContent())),
+                showTimeType.indexOf(constants_1.TimeType.Absolute) > -1 && (React.createElement(Panel, { title: absoluteTitle ||
+                        language_1.formatString(type_1.DateTimeLocale.range.title, locale), key: constants_1.TimeType.Absolute, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: style_1.SDK_PREFIX + "-datetime-pick-panel", disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle },
                     React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-content", style_1.SDK_PREFIX + "-datetime-pick-absolute-content"), ref: function (ref) { return (_this.containerRef = ref); } },
-                        React.createElement(Selector_1.default, { getPopupContainer: this.getPopupContainer, options: constants_1.rangePresetOptions, value: this.rangePreset, onChange: this.setRangePreset, className: style_1.SDK_PREFIX + "-datetime-pick-absolute-selector" }),
+                        React.createElement(Selector_1.default, { getPopupContainer: this.getPopupContainer, options: rangeOptions, value: this.rangePreset, onChange: this.setRangePreset, className: style_1.SDK_PREFIX + "-datetime-pick-absolute-selector" }),
                         React.createElement(DatePickerComponent, { className: classnames_1.default('range-picker', style_1.SDK_PREFIX + "-datetime-pick-absolute-date-picker"), showTime: this.props.showTime, format: this.props.timeFormat, onChange: isRangePick ? this.handleRangeChange : this.setValue, value: this.rangePickerValue, getCalendarContainer: this.getCalendarContainer, getPopupContainer: this.getPopupContainer }),
-                        React.createElement(Button_1.default, { onClick: this.handlePickerOk }, "\u786E\u8BA4")))),
-                showTimeType.indexOf(constants_1.TimeType.Quarter) > -1 && (React.createElement(Panel, { title: quarterTitle || '季度', key: constants_1.TimeType.Quarter, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-panel", style_1.SDK_PREFIX + "-quarter-datetime-pick-panel"), disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle },
+                        React.createElement(Button_1.default, { onClick: this.handlePickerOk }, language_1.formatString(type_1.DateTimeLocale.confirm, locale))))),
+                showTimeType.indexOf(constants_1.TimeType.Quarter) > -1 && (React.createElement(Panel, { title: quarterTitle ||
+                        language_1.formatString(type_1.DateTimeLocale.quarter.title, locale), key: constants_1.TimeType.Quarter, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-panel", style_1.SDK_PREFIX + "-quarter-datetime-pick-panel"), disableToggle: this.props.disableToggle, onToggle: this.panelOnToggle },
                     React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-quarter-content "), ref: function (ref) { return (_this.containerRef = ref); } },
                         React.createElement(Selector_1.default, { getPopupContainer: this.getPopupContainer, options: this.props.yearOptions || this.getYears(), value: (_a = this.quarterTime) === null || _a === void 0 ? void 0 : _a.year, className: style_1.SDK_PREFIX + "-selector", onChange: function (value) {
                                 _this.handleQuqrterlyTimeChange('year', value);
@@ -390,7 +405,7 @@ var Base = /** @class */ (function (_super) {
                                 _this.handleQuqrterlyTimeChange('quarter', value);
                             } })),
                     React.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-pick-footer" },
-                        React.createElement(Button_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-footer-botton", onClick: this.handleQuarterlyOk, type: "primary" }, "\u786E\u8BA4")))),
+                        React.createElement(Button_1.default, { className: style_1.SDK_PREFIX + "-datetime-pick-footer-botton", onClick: this.handleQuarterlyOk, type: "primary" }, language_1.formatString(type_1.DateTimeLocale.confirm, locale))))),
                 (this.props.customTimeContents || []).map(function (content) {
                     return (React.createElement(Panel, { title: content.title, key: content.title, titleClassName: style_1.SDK_PREFIX + "-datetime-pick-title", contentClassName: style_1.SDK_PREFIX + "-datetime-pick-panel-content", className: style_1.SDK_PREFIX + "-datetime-pick-panel", disableToggle: _this.props.disableToggle, onToggle: _this.panelOnToggle }, content.Component));
                 }))));
@@ -402,6 +417,7 @@ var Base = /** @class */ (function (_super) {
         placement: 'bottom',
         showTimeType: [constants_1.TimeType.Absolute, constants_1.TimeType.Preset, constants_1.TimeType.Relative]
     };
+    Base.contextType = config_provider_1.ConfigContext;
     __decorate([
         mobx_1.observable.ref,
         __metadata("design:type", Object)

package/lib/components/DateTimePicker/Base/relativeTimePicker.d.ts

@@ -17,6 +17,7 @@ interface IRetiveTimePickerProps extends ICompositedTime {
     withoutNow?: boolean;
 }
 export default class RetiveTimePicker extends React.Component<IRetiveTimePickerProps, {}> {
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     containerRef: React.RefObject<HTMLDivElement>;
     handleNumChange: (value: string | number | undefined) => void;
     handleUnitChange: (value: any) => void;

package/lib/components/DateTimePicker/Base/relativeTimePicker.js

@@ -25,9 +25,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
 var lodash_1 = require("lodash");
 var classnames_1 = __importDefault(require("classnames"));
+var language_1 = require("../../../utils/language");
 var style_1 = require("../../../constants/style");
+var type_1 = require("../../../constants/language/datetime/type");
 var time_1 = require("../../../utils/time");
 var Selector_1 = __importDefault(require("../../Selector"));
 var constants_1 = require("../constants");
@@ -76,7 +79,16 @@ var RetiveTimePicker = /** @class */ (function (_super) {
     }
     RetiveTimePicker.prototype.render = function () {
         var _a = this.props, num = _a.num, unit = _a.unit, className = _a.className, withoutNow = _a.withoutNow;
-        var options = this.props.relativeTimeUnits || constants_1.relativeTimeUnits || [];
+        var locale = this.context.locale;
+        var options = this.props.relativeTimeUnits ||
+            constants_1.relativeTimeUnits.map(function (option) {
+                return {
+                    text: language_1.formatString(option.text, locale),
+                    value: option.value,
+                    time: option.time
+                };
+            }) ||
+            [];
         if (withoutNow) {
             options = options.filter(function (option) {
                 return option.value !== constants_1.RelativeUnitValue.Now &&
@@ -89,9 +101,10 @@ var RetiveTimePicker = /** @class */ (function (_super) {
                 React.createElement(Selector_1.default, { options: options, value: unit, showSearch: true, getPopupContainer: this.getPopupContainer, onChange: this.handleUnitChange, className: style_1.SDK_PREFIX + "-datetime-pick-unit-selector", dropdownMatchSelectWidth: false })),
             unit === constants_1.RelativeUnitValue.NowStatic && (React.createElement("p", { className: style_1.SDK_PREFIX + "-datetime-pick-relative-tip" },
                 time_1.toFormatTime(num),
-                " ",
-                React.createElement("a", { onClick: this.handleNowChange }, "\u6539\u53D8\u65F6\u95F4")))));
+                ' ',
+                React.createElement("a", { onClick: this.handleNowChange }, language_1.formatString(type_1.DateTimeLocale.relative.change_time, locale))))));
     };
+    RetiveTimePicker.contextType = config_provider_1.ConfigContext;
     return RetiveTimePicker;
 }(React.Component));
 exports.default = RetiveTimePicker;

package/lib/components/DateTimePicker/Base/style.css

@@ -113,6 +113,7 @@ textarea.ant-input-number {
   font-weight: bold;
   line-height: 0;
   text-align: center;
+  border-left: 1px solid #e5e5e5;
   -webkit-transition: all 0.1s linear;
   transition: all 0.1s linear;
 }
@@ -255,7 +256,6 @@ textarea.ant-input-number {
   width: 22px;
   height: 100%;
   background: #ffffff;
-  border-left: 1px solid #e5e5e5;
   border-radius: 0 2px 2px 0;
   opacity: 0;
   -webkit-transition: opacity 0.24s linear 0.1s;
@@ -742,6 +742,10 @@ textarea.ant-picker-input > input {
   border-width: 0 0 1px 0;
   border-radius: 0;
 }
+.ant-picker-panel-container .ant-picker-panel .ant-picker-content,
+.ant-picker-panel-container .ant-picker-panel table {
+  text-align: center;
+}
 .ant-picker-panel-container .ant-picker-panel-focused {
   border-color: #e5e5e5;
 }
@@ -894,9 +898,6 @@ textarea.ant-picker-input > input {
 .ant-picker-cell-in-view {
   color: rgba(0, 0, 0, 0.65);
 }
-.ant-picker-cell-disabled {
-  cursor: not-allowed;
-}
 .ant-picker-cell::before {
   position: absolute;
   top: 50%;
@@ -1038,14 +1039,14 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   border-bottom-right-radius: 2px;
 }
 .ant-picker-cell-disabled {
+  color: rgba(0, 0, 0, 0.25);
   pointer-events: none;
 }
 .ant-picker-cell-disabled .ant-picker-cell-inner {
-  color: rgba(0, 0, 0, 0.25);
   background: transparent;
 }
 .ant-picker-cell-disabled::before {
-  background: #f5f5f5;
+  background: rgba(0, 0, 0, 0.04);
 }
 .ant-picker-cell-disabled.ant-picker-cell-today .ant-picker-cell-inner::before {
   border-color: rgba(0, 0, 0, 0.25);
@@ -1062,12 +1063,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .ant-picker-month-panel .ant-picker-cell-inner {
   padding: 0 8px;
 }
-.ant-picker-decade-panel .ant-picker-cell-disabled .ant-picker-cell-inner,
-.ant-picker-year-panel .ant-picker-cell-disabled .ant-picker-cell-inner,
-.ant-picker-quarter-panel .ant-picker-cell-disabled .ant-picker-cell-inner,
-.ant-picker-month-panel .ant-picker-cell-disabled .ant-picker-cell-inner {
-  background: #f5f5f5;
-}
 .ant-picker-quarter-panel .ant-picker-content {
   height: 56px;
 }

package/lib/components/DateTimePicker/BaseMobile/Absolute/index.d.ts

@@ -20,6 +20,7 @@ interface IAbsoluteProps {
     onChancle: () => void;
 }
 export default class Absolute extends React.Component<IAbsoluteProps, any> {
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     containerRef: HTMLElement | null;
     rangePreset: RangePreset;
     range: RangePickerValue;

package/lib/components/DateTimePicker/BaseMobile/Absolute/index.js

@@ -29,11 +29,14 @@ var react_1 = __importDefault(require("react"));
 var mobx_1 = require("mobx");
 var mobx_react_1 = require("mobx-react");
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
 var moment_1 = __importDefault(require("moment"));
 var lodash_1 = require("lodash");
 var date_picker_view_1 = __importDefault(require("antd-mobile/es/date-picker-view"));
 var Selector_1 = __importDefault(require("../../../../components/Selector"));
+var language_1 = require("../../../../utils/language");
 var style_1 = require("../../../../constants/style");
+var type_1 = require("../../../../constants/language/datetime/type");
 var constants_1 = require("../../../../components/DateTimePicker/constants");
 var bind_1 = __importDefault(require("../../../../utils/bind"));
 var Button_1 = __importDefault(require("../../../../components/Button"));
@@ -129,18 +132,19 @@ var Absolute = /** @class */ (function (_super) {
     };
     Absolute.prototype.render = function () {
         var _this = this;
+        var locale = this.context.locale;
         return (react_1.default.createElement("div", { ref: function (ref) { return (_this.containerRef = ref); } },
             react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-div-containter" },
                 react_1.default.createElement(antd_1.Divider, { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-div" })),
             react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head" },
                 react_1.default.createElement(Selector_1.default, { getPopupContainer: this.getPopupContainer, options: constants_1.rangePresetOptions, value: this.rangePreset, onChange: this.setRangePreset, className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-selector" }),
-                react_1.default.createElement(Button_1.default, { onClick: this.handleAbsoluteOk, className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-button" }, "\u786E\u8BA4")),
+                react_1.default.createElement(Button_1.default, { onClick: this.handleAbsoluteOk, className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-preset-head-button" }, language_1.formatString(type_1.DateTimeLocale.confirm, locale))),
             this.isBetweenTime && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, "\u5F00\u59CB\u65F6\u95F4"),
+                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, language_1.formatString(type_1.DateTimeLocale.mobile.start_time, locale)),
                 react_1.default.createElement(date_picker_view_1.default, { value: this.range[0], minDate: constants_2.minDate, onChange: function (date) {
                         _this.handleAbsoluteChange(date, 0);
                     } }),
-                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, "\u7ED3\u675F\u65F6\u95F4"),
+                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-pick-range-sub-title" }, language_1.formatString(type_1.DateTimeLocale.mobile.end_time)),
                 react_1.default.createElement(date_picker_view_1.default, { value: this.range[1], minDate: constants_2.minDate, onChange: function (date) {
                         _this.handleAbsoluteChange(date, 1);
                     } }))),
@@ -151,6 +155,7 @@ var Absolute = /** @class */ (function (_super) {
                     _this.handleAbsoluteChange(date, 1);
                 } }))));
     };
+    Absolute.contextType = config_provider_1.ConfigContext;
     __decorate([
         mobx_1.observable,
         __metadata("design:type", String)

package/lib/components/DateTimePicker/BaseMobile/index.d.ts

@@ -20,6 +20,7 @@ declare type IGetData = Array<{
     label: string;
 }>> | undefined;
 interface IBaseMobileProps extends IBaseProps {
+    locale?: string;
     buttonType: EButtonType;
     contentClassName?: string;
 }
@@ -30,6 +31,7 @@ export default class BaseMobile extends React.Component<IBaseMobileProps, any> {
         presetMode: EPresetMode;
         buttonType: EButtonType;
     };
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     containerRef: HTMLElement | null;
     showModal: boolean;
     setShowModal(showModal: boolean): void;

package/lib/components/DateTimePicker/BaseMobile/index.js

@@ -52,9 +52,12 @@ var modal_1 = __importDefault(require("antd-mobile/es/modal"));
 var mobx_react_1 = require("mobx-react");
 var icons_1 = require("@ant-design/icons");
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
 var mobx_1 = require("mobx");
 var bind_1 = __importDefault(require("../../../utils/bind"));
+var language_1 = require("../../../utils/language");
 var style_1 = require("../../../constants/style");
+var type_1 = require("../../../constants/language/datetime/type");
 var constants_1 = require("../constants");
 var CustomButton_1 = __importDefault(require("./CustomButton"));
 var constants_2 = require("./constants");
@@ -158,16 +161,17 @@ var BaseMobile = /** @class */ (function (_super) {
     };
     BaseMobile.prototype.render = function () {
         var _a = this.props, showTimeType = _a.showTimeType, buttonType = _a.buttonType, contentClassName = _a.contentClassName;
+        var locale = this.context.locale;
         var title = (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-picker-title" },
             react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-datetime-mobile-picker-title-div-containter" },
                 react_1.default.createElement(antd_1.Divider, { className: style_1.SDK_PREFIX + "-datetime-mobile-picker-title-div" })),
-            react_1.default.createElement("div", null, "\u65E5\u671F\u9009\u62E9")));
+            react_1.default.createElement("div", null, language_1.formatString(type_1.DateTimeLocale.mobile.title, locale))));
         var showPicker = showTimeType &&
             (showTimeType.indexOf(constants_1.TimeType.Preset) > -1 ||
                 showTimeType.indexOf(constants_1.TimeType.Quarter) > -1);
         var _b = this.props, onChange = _b.onChange, value = _b.value, defaultValue = _b.defaultValue;
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            showPicker && (react_1.default.createElement(picker_1.default, { data: this.getData() || [], title: title, extra: "\u65E5\u671F\u9009\u62E9", cascade: showTimeType && showTimeType.indexOf(constants_1.TimeType.Preset) > -1, cols: this.getCols(), value: this.getValue(), onOk: this.handleOk, className: style_1.SDK_PREFIX + "-datetime-mobile-picker" },
+            showPicker && (react_1.default.createElement(picker_1.default, { data: this.getData() || [], title: title, extra: language_1.formatString(type_1.DateTimeLocale.mobile.title, locale), cascade: showTimeType && showTimeType.indexOf(constants_1.TimeType.Preset) > -1, cols: this.getCols(), value: this.getValue(), onOk: this.handleOk, className: style_1.SDK_PREFIX + "-datetime-mobile-picker" },
                 react_1.default.createElement(CustomButton_1.default, { type: buttonType, className: contentClassName }))),
             !showPicker && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(icons_1.CalendarOutlined, { onClick: this.handleShow }),
@@ -179,6 +183,7 @@ var BaseMobile = /** @class */ (function (_super) {
         presetMode: constants_1.EPresetMode.EXTRA,
         buttonType: constants_2.EButtonType.Normal
     };
+    BaseMobile.contextType = config_provider_1.ConfigContext;
     __decorate([
         mobx_1.observable,
         __metadata("design:type", Boolean)