@douyinfe/semi-ui 2.17.1 → 2.19.0-alpha.1

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

@@ -10,6 +10,7 @@ export default class Tag extends Component<TagProps, TagState> {
     static defaultProps: TagProps;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tagKey: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<number>>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
@@ -28,7 +29,7 @@ export default class Tag extends Component<TagProps, TagState> {
         visible: boolean;
     };
     setVisible(visible: boolean): void;
-    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode): void;
+    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode, tagKey: string | number): void;
     handleKeyDown(event: any): void;
     renderAvatar(): JSX.Element;
     render(): JSX.Element;

package/lib/es/tag/index.js

@@ -63,13 +63,13 @@ export default class Tag extends Component {
     }
   }
 
-  close(e, value) {
+  close(e, value, tagKey) {
     const {
       onClose
     } = this.props;
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    onClose && onClose(value, e); // when user call e.preventDefault() in onClick callback, tag will not hidden
+    onClose && onClose(value, e, tagKey); // when user call e.preventDefault() in onClick callback, tag will not hidden
 
     if (e.defaultPrevented) {
       return;
@@ -88,7 +88,7 @@ export default class Tag extends Component {
     switch (event.key) {
       case "Backspace":
       case "Delete":
-        closable && this.close(event, this.props.children);
+        closable && this.close(event, this.props.children, this.props.tagKey);
         handlePrevent(event);
         break;
 
@@ -125,6 +125,7 @@ export default class Tag extends Component {
 
     const _a = this.props,
           {
+      tagKey,
       children,
       size,
       color,
@@ -138,7 +139,7 @@ export default class Tag extends Component {
       avatarShape,
       tabIndex
     } = _a,
-          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
+          attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape", "tabIndex"]);
 
     const {
       visible: isVisible
@@ -171,7 +172,7 @@ export default class Tag extends Component {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     React.createElement("div", {
       className: "".concat(prefixCls, "-close"),
-      onClick: e => this.close(e, children)
+      onClick: e => this.close(e, children, tagKey)
     }, /*#__PURE__*/React.createElement(IconClose, {
       size: "small"
     })) : null;
@@ -197,6 +198,7 @@ Tag.defaultProps = {
 };
 Tag.propTypes = {
   children: PropTypes.node,
+  tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
   size: PropTypes.oneOf(tagSize),
   color: PropTypes.oneOf(tagColors),
   type: PropTypes.oneOf(tagType),

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

@@ -5,12 +5,13 @@ export declare type TagSize = 'default' | 'small' | 'large';
 export declare type AvatarShape = 'circle' | 'square';
 export interface TagProps {
     children?: React.ReactNode;
+    tagKey?: string | number;
     size?: TagSize;
     color?: TagColor;
     type?: TagType;
     closable?: boolean;
     visible?: boolean;
-    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     style?: React.CSSProperties;
     className?: string;

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

@@ -6,7 +6,7 @@ import BaseComponent from '../_base/baseComponent';
 import Input from '../input/index';
 import TreeNode from './treeNode';
 import '@douyinfe/semi-foundation/lib/es/tree/tree.css';
-import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity } from './interface';
+import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity, ScrollData } from './interface';
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
 declare class Tree extends BaseComponent<TreeProps, TreeState> {
@@ -102,6 +102,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     onNodeClick: any;
     onMotionEnd: any;
     context: ContextValue;
+    virtualizedListRef: React.RefObject<any>;
     constructor(props: TreeProps);
     /**
      * Process of getDerivedStateFromProps was inspired by rc-tree
@@ -110,6 +111,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
     static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState>;
     get adapter(): TreeAdapter;
     search: (value: string) => void;
+    scrollTo: (scrollData: ScrollData) => void;
     renderInput(): JSX.Element;
     renderEmpty: () => JSX.Element;
     onNodeSelect: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;

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/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         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>;
+        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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>
+`;