@douyinfe/semi-ui 2.17.1 → 2.18.1-alpha.0

package/lib/es/tree/index.js

@@ -2,6 +2,7 @@ import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import _isEqual from "lodash/isEqual";
 import _isEmpty from "lodash/isEmpty";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -40,6 +41,25 @@ class Tree extends BaseComponent {
       this.foundation.handleInputChange(value);
     };
 
+    this.scrollTo = scrollData => {
+      var _a;
+
+      const {
+        key,
+        align = 'center'
+      } = scrollData;
+      const {
+        flattenNodes
+      } = this.state;
+
+      if (key) {
+        const index = flattenNodes === null || flattenNodes === void 0 ? void 0 : _findIndexInstanceProperty(flattenNodes).call(flattenNodes, node => {
+          return node.key === key;
+        });
+        index >= 0 && ((_a = this.virtualizedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align));
+      }
+    };
+
     this.renderEmpty = () => {
       const {
         emptyContent
@@ -201,6 +221,7 @@ class Tree extends BaseComponent {
     this.optionsRef = /*#__PURE__*/React.createRef();
     this.foundation = new TreeFoundation(this.adapter);
     this.dragNode = null;
+    this.virtualizedListRef = /*#__PURE__*/React.createRef();
   }
   /**
    * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -573,6 +594,7 @@ class Tree extends BaseComponent {
         width
       } = _ref4;
       return /*#__PURE__*/React.createElement(VirtualList, {
+        ref: this.virtualizedListRef,
         itemCount: flattenNodes.length,
         itemSize: virtualize.itemSize,
         height: height,

package/lib/es/tree/interface.d.ts

@@ -118,3 +118,7 @@ export interface NodeListState {
     cachedMotionKeys?: Set<string>;
     cachedData?: FlattenNode[];
 }
+export interface ScrollData {
+    key: string;
+    align?: 'center' | 'start' | 'end' | 'smart' | 'auto';
+}

package/lib/es/typography/base.d.ts

@@ -64,7 +64,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         spacing: PropTypes.Requireable<"normal" | "extended">;
         strong: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<"small" | "normal">;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/es/typography/paragraph.d.ts

@@ -29,7 +29,7 @@ export default class Paragraph extends PureComponent<ParagraphProps> {
         link: PropTypes.Requireable<boolean | object>;
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
         size: PropTypes.Requireable<"small" | "normal">;
         spacing: PropTypes.Requireable<"normal" | "extended">;
         style: PropTypes.Requireable<object>;

package/lib/es/typography/text.d.ts

@@ -32,7 +32,7 @@ export default class Text extends PureComponent<TextProps> {
         underline: PropTypes.Requireable<boolean>;
         link: PropTypes.Requireable<boolean | object>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
         size: PropTypes.Requireable<"small" | "normal">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

package/lib/es/typography/title.d.ts

@@ -36,8 +36,8 @@ export default class Title extends PureComponent<TitleProps> {
         link: PropTypes.Requireable<boolean | object>;
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/upload/index.d.ts

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/locale/interface.ts

@@ -149,4 +149,7 @@ export interface Locale {
         total: string;
         selected: string;
     };
+    Form: {
+        optional: string;
+    }
 }

package/locale/source/ar.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'مجموع ${total} العناصر',
         selected: '${total} العناصر المحدد',
     },
+    Form: {
+        optional: '(اختياري)',
+    },
 };
 
 // [i18n-Arabic]

package/locale/source/de.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Gesamt ${total} Artikel',
         selected: '${total} ausgewählte Artikel',
     },
+    Form: {
+        optional: '(Optional)',
+    },
 };
 
 // [i18n-German]

package/locale/source/en_GB.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Total ${total} items',
         selected: '${total} items selected',
     },
+    Form: {
+        optional: '(optional)',
+    },
 };
 
 // [i18n-English(GB)]

package/locale/source/en_US.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Total ${total} items',
         selected: '${total} items selected',
     },
+    Form: {
+        optional: '(optional)',
+    },
 };
 
 // [i18n-English(US)]

package/locale/source/es.ts

@@ -155,6 +155,9 @@ const locale: Locale = {
         total: 'Total ${total} objetos',
         selected: '${total} objetos seleccionados',
     },
+    Form: {
+        optional: '(opcional)',
+    },
 };
 
 export default locale;

package/locale/source/fr.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Totale ${total} articles',
         selected: '${total} articles sélectionnés',
     },
+    Form: {
+        optional: '(optionnel)',
+    },
 };
 
 // [i18n-French]

package/locale/source/id_ID.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Total ${total} proyek',
         selected: '${total} item dipilih',
     },
+    Form: {
+        optional: '(opsional)',
+    },
 };
 
 // [i18n-Indonesia(ID)]

package/locale/source/it.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Totale ${total} elementi',
         selected: '${total} elementi selezionati',
     },
+    Form: {
+        optional: '(opzionale)',
+    },
 };
 
 // [i18n-Italian]

package/locale/source/ja_JP.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '合計 ${total} アイテム',
         selected: '選択済み ${total} アイテム',
     },
+    Form: {
+        optional: '(オプション)',
+    },
 };
 
 // [i18n-Japan]

package/locale/source/ko_KR.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '총 {total} 개 항목',
         selected: '선택된 {Total} 개 항목',
     },
+    Form: {
+        optional: '(선택 과목)',
+    },
 };
 
 // [i18n-Korea]

package/locale/source/ms_MY.ts

@@ -150,6 +150,9 @@ const local: Locale = {
         total: 'Jumlah ${total} item',
         selected: '${total} projek dipilih',
     },
+    Form: {
+        optional: '(pilihan)',
+    },
 };
 
 // [i18n-Malaysia(MY)]

package/locale/source/pt_BR.ts

@@ -158,6 +158,9 @@ const local: Locale = {
         total: 'Total de ${total} itens',
         selected: '${total} itens selecionados',
     },
+    Form: {
+        optional: '(opcional)',
+    },
 };
 
 // 葡萄牙语

package/locale/source/ru_RU.ts

@@ -153,6 +153,9 @@ const local: Locale = {
         total: 'Всего ${total} элементов',
         selected: 'Выбрано ${total} элементов',
     },
+    Form: {
+        optional: '(по желанию)',
+    },
 };
 
 // [i18n-Russia] 俄罗斯语

package/locale/source/th_TH.ts

@@ -154,6 +154,9 @@ const local: Locale = {
         total: 'รวม ${total} รายการ',
         selected: 'เลือก ${total} รายการ',
     },
+    Form: {
+        optional: '(ไม่จำเป็น)',
+    },
 };
 
 // [i18n-Thai]

package/locale/source/tr_TR.ts

@@ -149,7 +149,10 @@ const local: Locale = {
         clearSelectAll: 'Tümünün seçimini kaldır',
         total: 'Toplam ${total} öğe',
         selected: '${total} öğe seçildi'
-    }
+    },
+    Form: {
+        optional: '(isteğe bağlı)',
+    },
 };
 
 // [i18n-Turkish] 

package/locale/source/vi_VN.ts

@@ -153,6 +153,9 @@ const local: Locale = {
         total: 'Tổng số ${total} mặt hàng',
         selected: '${total} mục được chọn',
     },
+    Form: {
+        optional: '(không bắt buộc)',
+    },
 };
 
 // [i18n-Vietnam] 越南语

package/locale/source/zh_CN.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '共 ${total} 项',
         selected: '已选 ${total} 项',
     },
+    Form: {
+        optional: '（可选）',
+    },
 };
 
 // 中文

package/locale/source/zh_TW.ts

@@ -151,6 +151,9 @@ const local: Locale = {
         total: '共 ${total} 項',
         selected: '已選 ${total} 項',
     },
+    Form: {
+        optional: '（可選）',
+    },
 };
 
 // 中文

package/modal/Modal.tsx

@@ -347,12 +347,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         let style = styleFromProps;
         const maskStyle = maskStyleFromProps;
         const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
-        if (this.props.centered) {
-            style = {
-                transform: 'translateY(-50%)',
-                top: '50%', ...style,
-            };
-        }
         let wrapperStyle: {
             zIndex?: CSSProperties['zIndex'];
             position?: CSSProperties['position'];

package/modal/ModalContent.tsx

@@ -318,7 +318,10 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
                 <div
                     role="none"
                     tabIndex={-1}
-                    className={`${cssClasses.DIALOG}-wrap`}
+                    className={cls({
+                        [`${cssClasses.DIALOG}-wrap`]:true,
+                        [`${cssClasses.DIALOG}-wrap-center`]:this.props.centered
+                    })}
                     onClick={maskClosable ? this.onMaskClick : null}
                     onMouseUp={maskClosable ? this.onMaskMouseUp : null}
                 >

package/modal/__test__/modal.test.js

@@ -287,7 +287,7 @@ describe('modal', () => {
     it('centered without motion', () => {
         let com = getModal({ centered: true, visible: true, motion: false });
         let modal = mount(com, { attachTo: document.getElementById('container') });
-        expect(modal.find(`div.${BASE_CLASS_PREFIX}-modal`)).toHaveStyle({ transform: 'translateY(-50%)', top: '50%' });
+        expect(modal.find(`div.${BASE_CLASS_PREFIX}-modal-wrap`)).toHaveClassName(`${BASE_CLASS_PREFIX}-modal-wrap-center`)
     });
 
     it('keepDOM', () => {

package/modal/_story/__snapshots__/modal.stories.tsx.snap

@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`模态框-点击遮罩层不可关闭 1`] = `
+<DialogComponent
+  maskClosable={false}
+>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          show dialog
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          静态调用
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Modal
+    afterClose={[Function]}
+    cancelLoading={false}
+    centered={false}
+    closable={true}
+    closeOnEsc={true}
+    confirmLoading={false}
+    fullScreen={false}
+    hasCancel={true}
+    keepDOM={false}
+    lazyRender={true}
+    mask={true}
+    maskClosable={false}
+    maskFixed={false}
+    motion={true}
+    okType="primary"
+    onCancel={[Function]}
+    onOk={[Function]}
+    size="small"
+    title="对话框标题"
+    visible={false}
+    zIndex={1000}
+  />
+</DialogComponent>
+`;
+
+exports[`模态框默认 1`] = `
+<DialogComponent>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          show dialog
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          静态调用
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Modal
+    afterClose={[Function]}
+    cancelLoading={false}
+    centered={false}
+    closable={true}
+    closeOnEsc={true}
+    confirmLoading={false}
+    fullScreen={false}
+    hasCancel={true}
+    keepDOM={false}
+    lazyRender={true}
+    mask={true}
+    maskClosable={true}
+    maskFixed={false}
+    motion={true}
+    okType="primary"
+    onCancel={[Function]}
+    onOk={[Function]}
+    size="small"
+    title="对话框标题"
+    visible={false}
+    zIndex={1000}
+  />
+</DialogComponent>
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.17.1",
+    "version": "2.18.1-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.17.1",
-        "@douyinfe/semi-foundation": "2.17.1",
-        "@douyinfe/semi-icons": "2.17.1",
+        "@douyinfe/semi-animation-react": "2.18.1-alpha.0",
+        "@douyinfe/semi-foundation": "2.18.1-alpha.0",
+        "@douyinfe/semi-icons": "2.18.1-alpha.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.17.1",
+        "@douyinfe/semi-theme-default": "2.18.1-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "e2dfadcc7f24b9af6cab08b64ac0ead052219961",
+    "gitHead": "14883ac99b2f3c772b267d6d6ae5d5412cd3f9de",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.17.1",
+        "@douyinfe/semi-scss-compile": "2.18.1-alpha.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/radio/_story/radio.stories.js

@@ -196,7 +196,7 @@ const RadioGroup1 = () => {
     </div>
   );
 };
-class RadioWithControled extends React.Component {
+class RadioWithControlled extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -240,7 +240,7 @@ export const _RadioGroup = () => {
       </RadioGroup>
       <br />
       value+onchange
-      <RadioWithControled />
+      <RadioWithControlled />
       <br />
       联动
       <RadioGroup1 />