@qn-pandora/pandora-component 3.0.2 → 4.0.0

package/es/components/Selector/index.js

@@ -43,7 +43,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { isArray, concat } from 'lodash';
+import { isArray, concat, isNumber, toString } from 'lodash';
 import classnames from 'classnames';
 import { Checkbox, Select } from 'antd';
 import PropTypes from 'prop-types';
@@ -74,7 +74,7 @@ var formatOptions = function (options) {
 var getOptionComponent = function (options) {
     return options.map(function (option) {
         var key = option.key, value = option.value, disabled = option.disabled, text = option.text;
-        return (React.createElement(Select.Option, { key: key || value, value: value, disabled: disabled }, text));
+        return (React.createElement(Select.Option, { key: key || value, value: value, disabled: disabled }, isNumber(text) ? toString(text) : text));
     });
 };
 var getGroupComponent = function (options, groupOptions) {

package/es/components/Selector/style.css

@@ -379,11 +379,11 @@
   cursor: auto;
 }
 .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
   color: rgba(0, 0, 0, 0.25);
@@ -408,6 +408,7 @@
 }
 .ant-select:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input::-webkit-search-cancel-button {
   display: none;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: none;
 }
 .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
@@ -419,6 +420,7 @@
       -ms-flex: 1;
           flex: 1;
   overflow: hidden;
+  font-weight: normal;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -803,7 +805,7 @@
 .ant-checkbox-inner::after {
   position: absolute;
   top: 50%;
-  left: 22%;
+  left: 21.5%;
   display: table;
   width: 5.71428571px;
   height: 9.14285714px;
@@ -984,16 +986,13 @@
 .pandora-sdk-selector .ant-select-selection:hover .ant-select-selection__clear + .ant-select-arrow {
   opacity: 0;
 }
-.pandora-sdk-selector .ant-select-selection__choice {
-  color: #666 !important;
-  background: #f5f5f5 !important;
+.pandora-sdk-selector.ant-select-multiple .ant-select-selection-item {
+  color: #666;
+  background: #f5f5f5;
   border: none;
 }
-.pandora-sdk-selector .ant-select-selection__choice__remove {
-  color: #d9d9d9 !important;
-}
-.pandora-sdk-selector .ant-select-selection__choice__remove i {
-  font-size: 12px;
+.pandora-sdk-selector .ant-select-selection-item-remove {
+  color: #d9d9d9;
 }
 .pandora-sdk-selector .ant-select-selection--single {
   height: 32px;
@@ -1008,17 +1007,6 @@
 .pandora-sdk-selector .ant-select-selection__clear i {
   color: inherit;
 }
-.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option {
-  color: #2c6dd2 !important;
-  cursor: default !important;
-}
-.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option::before,
-.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option::after {
-  content: none !important;
-}
-.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option a {
-  color: #2c6dd2;
-}
 .pandora-sdk-selector-dropdown .ant-select-dropdown-menu {
   margin: 0;
 }
@@ -1046,15 +1034,12 @@
   background: transparent;
 }
 .pandora-sdk-selector-dropdown .ant-select-item-option-disabled {
-  color: #d9d9d9 !important;
+  color: #d9d9d9;
 }
 .pandora-sdk-selector-dropdown .ant-select-item-option-selected {
   color: #2c6dd2;
   font-weight: 400;
 }
-.pandora-sdk-selector-dropdown .ant-select-item-option-selected::after {
-  color: #2c6dd2 !important;
-}
 .pandora-sdk-selector-dropdown .ant-select-item-option:hover {
   color: #2c6dd2;
 }
@@ -1069,8 +1054,19 @@
   overflow: unset;
   text-overflow: unset;
 }
-.pandora-sdk-selector-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon {
-  color: inherit !important;
+.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option {
+  color: #2c6dd2;
+  cursor: default;
+}
+.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option::before,
+.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option::after {
+  content: none;
+}
+.pandora-sdk-selector-dropdown .pandora-sdk-selector-create-option a {
+  color: #2c6dd2;
+}
+.pandora-sdk-selector-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state .anticon-check.anticon {
+  color: #2c6dd2;
 }
 .pandora-sdk-selector-create-lint {
   display: block;

package/es/components/Selector/style.less

@@ -14,17 +14,16 @@
       }
     }
   }
-  .@{ant-prefix}-select-selection__choice {
-    color: @font-color-6!important;
-    background: @select-selection-bg!important;
-    border: none;
-  }
-  .@{ant-prefix}-select-selection__choice__remove {
-    color: @font-disable-color !important;
-    i {
-      font-size: 12px;
+  &.@{ant-prefix}-select-multiple {
+    .@{ant-prefix}-select-selection-item {
+      color: @font-color-6;
+      background: @select-selection-bg;
+      border: none;
     }
   }
+  .@{ant-prefix}-select-selection-item-remove {
+    color: @font-disable-color;
+  }
   .@{ant-prefix}-select-selection--single {
     height: 32px;
   }
@@ -41,30 +40,16 @@
 }
 
 .@{sdk-prefix}-selector-dropdown {
-  .@{sdk-prefix}-selector-create-option {
-    color: @theme-color!important;
-    cursor: default !important;
-    &::before,
-    &::after {
-      content: none !important;
-    }
-    a {
-      color: @theme-color;
-    }
-  }
   .@{ant-prefix}-select-dropdown-menu {
     margin: 0;
     .scrollbar();
   }
   .@{ant-prefix}-select-item-option-disabled {
-    color: @font-disable-color!important;
+    color: @font-disable-color;
   }
   .@{ant-prefix}-select-item-option-selected {
     color: @theme-color;
     font-weight: 400;
-    &::after {
-      color: @theme-color!important;
-    }
   }
   .@{ant-prefix}-select-item-option:hover {
     color: @theme-color;
@@ -84,10 +69,24 @@
     }
   }
 
-  &.@{ant-prefix}-select-dropdown--multiple
-    .@{ant-prefix}-select-dropdown-menu-item-selected
-    .@{ant-prefix}-select-selected-icon {
-    color: inherit !important;
+  .@{sdk-prefix}-selector-create-option {
+    color: @theme-color;
+    cursor: default;
+    &::before,
+    &::after {
+      content: none;
+    }
+    a {
+      color: @theme-color;
+    }
+  }
+  .@{ant-prefix}-select-item-option-selected:not(.@{ant-prefix}-select-item-option-disabled)
+    .@{ant-prefix}-select-item-option-state {
+    .anticon-check {
+      &.anticon {
+        color: @theme-color;
+      }
+    }
   }
 }
 

package/es/components/SolidRadioGroup/index.d.ts

@@ -1,49 +1,7 @@
 import * as React from 'react';
-declare type BasicType = string | number | boolean;
-export interface IOption<T = BasicType> {
-    /**
-     * 选项的值
-     */
-    value: T;
-    /**
-     * 选项的展示形式：string类型或者React组件
-     */
-    item: string | React.ReactNode;
-    /**
-     * 禁用选项
-     */
-    disabled?: boolean;
-}
-export interface ISolidRadioGroupProps<T = BasicType> {
-    /**
-     * 当前值
-     */
-    value?: T;
-    /**
-     * 选中变化回调
-     */
-    onChange?: (value: any) => void;
-    /**
-     * 容器样式
-     */
-    className?: string;
-    /**
-     * 按钮样式
-     */
-    buttonClassName?: string;
-    /**
-     * 按钮大小
-     */
-    size?: 'small' | 'middle' | 'large';
-    /**
-     * 禁用
-     */
-    disabled?: boolean;
-    /**
-     * 可选线列表
-     */
-    options?: Array<IOption<T>> | IKeyValues<string | React.ReactNode>;
-    children?: any;
+import { IRadioGroupProps, IOption } from '../RadioGroup';
+export { IOption };
+export interface ISolidRadioGroupProps<T = any> extends Omit<IRadioGroupProps<T>, 'optionType'> {
 }
 declare function SolidRadioGroup(props: ISolidRadioGroupProps): JSX.Element;
 declare namespace SolidRadioGroup {

package/es/components/SolidRadioGroup/index.js

@@ -1,30 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import * as React from 'react';
-import { isArray, isUndefined } from 'lodash';
 import Radio from 'antd/es/radio';
-import classnames from 'classnames';
-import { SDK_PREFIX } from '../../constants/style';
-var useCallback = React.useCallback, useMemo = React.useMemo;
+import { default as RadioGroup } from '../RadioGroup';
 export default function SolidRadioGroup(props) {
-    var className = props.className, buttonClassName = props.buttonClassName, value = props.value, size = props.size, onChange = props.onChange, children = props.children, disabled = props.disabled, _a = props.options, options = _a === void 0 ? {} : _a;
-    var handleChange = useCallback(function (e) {
-        if (onChange) {
-            onChange(e.target.value);
-        }
-    }, [onChange]);
-    var radioOptions = useMemo(function () {
-        return isArray(options)
-            ? options
-            : Object.keys(options).map(function (key) { return ({ value: key, item: options[key] }); });
-    }, [options]);
-    return (React.createElement(Radio.Group, { className: classnames(SDK_PREFIX + "-solid-radio-group", className), value: value, onChange: handleChange, size: size },
-        radioOptions.map(function (option) {
-            var _a;
-            var value = option.value, item = option.item;
-            var disableRealVal = isUndefined(option.disabled)
-                ? disabled
-                : option.disabled;
-            return (React.createElement(Radio.Button, { key: value.toString(), value: value, disabled: disableRealVal, className: classnames((_a = {}, _a[SDK_PREFIX + "-solid-radio-item"] = !disableRealVal, _a), buttonClassName) }, item));
-        }),
-        children));
+    return React.createElement(RadioGroup, __assign({ optionType: "button" }, props));
 }
 SolidRadioGroup.Button = Radio.Button;

package/es/components/Spin/style.css

@@ -101,7 +101,6 @@
 }
 .ant-spin-blur {
   clear: both;
-  overflow: hidden;
   opacity: 0.5;
   -webkit-user-select: none;
      -moz-user-select: none;

package/es/components/Steps/ControlButton/index.js

@@ -1,10 +1,14 @@
 import * as React from 'react';
+import { ConfigContext } from 'antd/es/config-provider';
 import Button from '../../Button';
+import { formatString } from '../../../utils/language';
 import { SDK_PREFIX } from '../../../constants/style';
+import { StepsLocale } from '../../../constants/language/steps/type';
 import { StepsContext } from '../context';
 function ControlButton(props) {
     var lastStepText = props.lastStepText, nextDisabled = props.nextDisabled, onStepChange = props.onStepChange, onStepLast = props.onStepLast;
     var _a = React.useContext(StepsContext), stepCount = _a.count, current = _a.current;
+    var locale = React.useContext(ConfigContext).locale;
     var isLastStep = current === stepCount - 1;
     var handlePreStep = function () {
         if (current > 0 && onStepChange) {
@@ -20,7 +24,9 @@ function ControlButton(props) {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { className: SDK_PREFIX + "-prev-button", onClick: handlePreStep, disabled: current === 0 }, "\u4E0A\u4E00\u6B65"),
-        React.createElement(Button, { className: SDK_PREFIX + "-next-button", type: "primary", onClick: handleNextStep, disabled: nextDisabled || (isLastStep && !lastStepText) }, isLastStep && lastStepText ? lastStepText : '下一步')));
+        React.createElement(Button, { className: SDK_PREFIX + "-prev-button", onClick: handlePreStep, disabled: current === 0 }, formatString(StepsLocale.previous_step, locale)),
+        React.createElement(Button, { className: SDK_PREFIX + "-next-button", type: "primary", onClick: handleNextStep, disabled: nextDisabled || (isLastStep && !lastStepText) }, isLastStep && lastStepText
+            ? lastStepText
+            : formatString(StepsLocale.next_step, locale))));
 }
 export default React.memo(ControlButton);

package/es/components/Steps/style.css

@@ -479,12 +479,12 @@
   left: 0;
 }
 .ant-steps-vertical.ant-steps-dot .ant-steps-item-icon {
-  margin-top: 8px;
+  margin-top: 13px;
   margin-left: 0;
   background: none;
 }
 .ant-steps-vertical.ant-steps-dot .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
-  top: 2px;
+  top: 6.5px;
   left: -9px;
   margin: 0;
   padding: 22px 0 4px;
@@ -496,7 +496,8 @@
   width: inherit;
 }
 .ant-steps-vertical.ant-steps-dot .ant-steps-item-process .ant-steps-item-container .ant-steps-item-icon .ant-steps-icon-dot {
-  left: -2px;
+  top: -1px;
+  left: -1px;
 }
 .ant-steps-navigation {
   padding-top: 12px;
@@ -767,9 +768,8 @@
 .pandora-sdk-steps .ant-steps-item-icon {
   width: 24px;
   height: 24px;
-  line-height: 28px;
-  margin-top: 2px;
   font-size: 12px;
+  line-height: 24px;
 }
 .pandora-sdk-steps .ant-steps-item-icon .ant-steps-icon {
   font-size: 10px;
@@ -785,18 +785,15 @@
   background: #2c6dd2;
   border: none;
 }
-.pandora-sdk-steps .ant-steps-item .ant-steps-item-icon .ant-steps-icon {
-  top: -1px;
-}
 .pandora-sdk-steps .ant-steps-item.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {
   color: #ffffff;
 }
-.pandora-sdk-steps .ant-steps-item.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon .antion {
-  color: #ffffff !important;
+.pandora-sdk-steps .ant-steps-item.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon span.anticon.anticon-check.ant-steps-finish-icon {
+  color: #ffffff;
 }
 .pandora-sdk-steps .ant-steps-item.ant-steps-item-wait .ant-steps-item-icon {
   background: #eee;
 }
 .pandora-sdk-steps .ant-steps-item.ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon {
-  color: #bfbfbf !important;
+  color: #bfbfbf;
 }

package/es/components/Steps/style.less

@@ -5,9 +5,8 @@
   .@{ant-prefix}-steps-item-icon {
     width: 24px;
     height: 24px;
-    line-height: 28px;
-    margin-top: 2px;
     font-size: 12px;
+    line-height: 24px;
     .@{ant-prefix}-steps-icon {
       font-size: 10px;
     }
@@ -27,16 +26,14 @@
       border-radius: 2px;
       background: @theme-color;
       border: none;
-      .@{ant-prefix}-steps-icon {
-        top: -1px;
-      }
     }
-
-    &.@{ant-prefix}-steps-item-finish .@{ant-prefix}-steps-item-icon {
-      .@{ant-prefix}-steps-icon {
-        color: @normal-color;
-        .antion {
-          color: @normal-color !important;
+    &.@{ant-prefix}-steps-item-finish {
+      .@{ant-prefix}-steps-item-icon {
+        .@{ant-prefix}-steps-icon {
+          color: @normal-color;
+          span.anticon.anticon-check.@{ant-prefix}-steps-finish-icon {
+            color: @normal-color;
+          }
         }
       }
     }
@@ -44,7 +41,7 @@
     &.@{ant-prefix}-steps-item-wait .@{ant-prefix}-steps-item-icon {
       background: @button-disabled-bg;
       .@{ant-prefix}-steps-icon {
-        color: @icon-color !important;
+        color: @icon-color;
       }
     }
   }

package/es/components/Table/index.d.ts

@@ -40,6 +40,7 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
         title?: string | undefined;
         tagClassName?: string | undefined;
     }) => JSX.Element;
+    static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     indeterminate: boolean;
     checkAll: boolean;
     UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;

package/es/components/Table/index.js

@@ -63,13 +63,17 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 import * as React from 'react';
-import { Table as AntTable, Checkbox } from 'antd';
 import classnames from 'classnames';
+import { observer } from 'mobx-react';
 import { observable, action, computed } from 'mobx';
 import { size, xor, union, unionBy, differenceBy, get } from 'lodash';
-import { observer } from 'mobx-react';
+import { Table as AntTable, Checkbox } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
+import { EmptyIcon } from '@qn-pandora/pandora-component-icons';
 import bind from '../../utils/bind';
+import { formatString } from '../../utils/language';
 import { SDK_PREFIX } from '../../constants/style';
+import { TableLocale } from '../../constants/language/table/type';
 import { ColumnTag } from './ColumnTag/ColumnTag';
 /**
  * pandora2.0风格的表格
@@ -228,9 +232,12 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
-        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, restProps = __rest(_c, ["className", "batchOptions", "scroll"]);
+        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale"]);
         return (React.createElement("div", null,
-            React.createElement(AntTable, __assign({ scroll: scroll }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
+            React.createElement(AntTable, __assign({ scroll: scroll, locale: __assign({ emptyText: (React.createElement("div", { className: SDK_PREFIX + "-table-empty" },
+                        React.createElement("div", { className: SDK_PREFIX + "-table-empty-icon" },
+                            React.createElement(EmptyIcon, null)),
+                        React.createElement("div", { className: SDK_PREFIX + "-table-empty-text" }, formatString(TableLocale.empty, this.context.locale)))) }, locale) }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
                 // 涉及到权限
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
@@ -242,7 +249,8 @@ var Table = /** @class */ (function (_super) {
                 this.props.dataSource.length > 0 ? (React.createElement("div", { className: SDK_PREFIX + "-table-batch-opt" },
                 React.createElement(Checkbox, { indeterminate: this.indeterminate, onChange: this.handleCheckAllChange, checked: this.checkAll, disabled: size(this.undisabledData) === 0 }),
                 React.createElement("span", { className: SDK_PREFIX + "-table-batch-opt-label" },
-                    "\u5DF2\u9009 ",
+                    formatString(TableLocale.selected, this.context.locale),
+                    ' ',
                     this.selectedRowKeys.length),
                 React.createElement("span", null, (batchOptions || []).map(function (option, index) {
                     var _a;
@@ -254,6 +262,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.Column = AntTable.Column;
     Table.ColumnTag = ColumnTag;
+    Table.contextType = ConfigContext;
     __decorate([
         observable,
         __metadata("design:type", Object)