@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/cascader/item.js

@@ -13,58 +13,46 @@ const prefixcls = cssClasses.PREFIX_OPTION;
 export default class Item extends PureComponent {
   constructor() {
     super(...arguments);
-
     this.onClick = (e, item) => {
       const {
         onItemClick
       } = this.props;
-
       if (item.data.disabled || 'disabled' in item && item.disabled) {
         return;
       }
-
       onItemClick(e, item);
     };
     /**
      * A11y: simulate item click
      */
-
-
     this.handleItemEnterPress = (keyboardEvent, item) => {
       if (isEnterPress(keyboardEvent)) {
         this.onClick(keyboardEvent, item);
       }
     };
-
     this.onHover = (e, item) => {
       const {
         showNext,
         onItemHover
       } = this.props;
-
       if (item.data.disabled) {
         return;
       }
-
       if (showNext === strings.SHOW_NEXT_BY_HOVER) {
         onItemHover(e, item);
       }
     };
-
     this.onCheckboxChange = (e, item) => {
       const {
         onItemCheckboxClick
-      } = this.props; // Prevent Checkbox's click event bubbling to trigger the li click event
-
+      } = this.props;
+      // Prevent Checkbox's click event bubbling to trigger the li click event
       e.stopPropagation();
-
       if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
         e.nativeEvent.stopImmediatePropagation();
       }
-
       onItemCheckboxClick(item);
     };
-
     this.getItemStatus = key => {
       const {
         activeKeys,
@@ -77,56 +65,44 @@ export default class Item extends PureComponent {
         selected: false,
         loading: false
       };
-
       if (activeKeys.has(key)) {
         state.active = true;
       }
-
       if (selectedKeys.has(key)) {
         state.selected = true;
       }
-
       if (loadingKeys.has(key) && !loadedKeys.has(key)) {
         state.loading = true;
       }
-
       return state;
     };
-
     this.renderIcon = function (type) {
       let haveMarginLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
       const finalCls = style => {
         return style + (haveMarginLeft ? ` ${prefixcls}-icon-left` : '');
       };
-
       switch (type) {
         case 'child':
           return /*#__PURE__*/React.createElement(IconChevronRight, {
             className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-expand`)
           });
-
         case 'tick':
           return /*#__PURE__*/React.createElement(IconTick, {
             className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-active`)
           });
-
         case 'loading':
           return /*#__PURE__*/React.createElement(Spin, {
             wrapperClassName: finalCls(`${prefixcls}-spin-icon`)
           });
-
         case 'empty':
           return /*#__PURE__*/React.createElement("span", {
             "aria-hidden": true,
             className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-empty`)
           });
-
         default:
           return null;
       }
     };
-
     this.highlight = searchText => {
       const content = [];
       const {
@@ -142,20 +118,17 @@ export default class Item extends PureComponent {
                 key: `${index}-${idx}`
               }, keyword));
             }
-
             content.push(node);
           });
         } else {
           content.push(item);
         }
-
         if (idx !== searchText.length - 1) {
           content.push(separator);
         }
       });
       return content;
     };
-
     this.renderFlattenOption = data => {
       const {
         multiple,
@@ -181,15 +154,11 @@ export default class Item extends PureComponent {
           [`${prefixcls}-disabled`]: disabled,
           [`${prefixcls}-select`]: selected && !multiple
         });
-
         const onClick = e => {
           this.onClick(e, item);
         };
-
         const onKeyPress = e => this.handleItemEnterPress(e, item);
-
         const onCheck = e => this.onCheckboxChange(e, item);
-
         if (filterRender) {
           const props = {
             className,
@@ -208,7 +177,6 @@ export default class Item extends PureComponent {
             key
           });
         }
-
         return /*#__PURE__*/React.createElement("li", {
           role: 'menuitem',
           className: className,
@@ -228,7 +196,6 @@ export default class Item extends PureComponent {
       return content;
     };
   }
-
   renderItem(renderData) {
     let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     const {
@@ -262,11 +229,9 @@ export default class Item extends PureComponent {
       } = this.getItemStatus(key);
       const hasChild = Boolean(children) && children.length;
       const showExpand = hasChild || this.props.loadData && !isLeaf;
-
       if (active && hasChild) {
         showChildItem = item;
       }
-
       const className = cls(prefixcls, {
         [`${prefixcls}-active`]: active && !selected,
         [`${prefixcls}-select`]: selected && !multiple,
@@ -301,14 +266,11 @@ export default class Item extends PureComponent {
         className: `${prefixcls}-label-checkbox`
       }), /*#__PURE__*/React.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
     })));
-
     if (showChildItem) {
       content.concat(this.renderItem(showChildItem.children, content));
     }
-
     return content;
   }
-
   renderEmpty() {
     const {
       emptyContent
@@ -323,7 +285,6 @@ export default class Item extends PureComponent {
       "x-semi-prop": "emptyContent"
     }, emptyContent || locale.emptyText)));
   }
-
   render() {
     const {
       data,
@@ -339,18 +300,15 @@ export default class Item extends PureComponent {
       [`${prefixcls}-lists-rtl`]: direction === 'rtl',
       [`${prefixcls}-lists-empty`]: isEmpty
     });
-
     if (isEmpty) {
       content = this.renderEmpty();
     } else {
       content = searchable ? this.renderFlattenOption(data) : this.renderItem(data);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: listsCls
     }, content);
   }
-
 }
 Item.contextType = ConfigContext;
 Item.propTypes = {

package/lib/es/checkbox/checkbox.d.ts

@@ -11,7 +11,7 @@ export interface CheckboxEvent extends BasicCheckboxEvent {
         stopImmediatePropagation: () => void;
     };
 }
-export declare type TargetObject = BasicTargetObject;
+export type TargetObject = BasicTargetObject;
 export interface CheckboxProps extends BaseCheckboxProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];

package/lib/es/checkbox/checkbox.js

@@ -1,7 +1,6 @@
 import _noop from "lodash/noop";
 import _isBoolean from "lodash/isBoolean";
 import _isUndefined from "lodash/isUndefined";
-
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -13,34 +12,7 @@ import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/checkbox/checkbox.css';
 import { Context } from './context';
 import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
-
 class Checkbox extends BaseComponent {
-  constructor(props) {
-    super(props);
-
-    this.handleChange = e => this.foundation.handleChange(e);
-
-    this.handleEnterPress = e => this.foundation.handleEnterPress(e);
-
-    this.handleFocusVisible = event => {
-      this.foundation.handleFocusVisible(event);
-    };
-
-    this.handleBlur = event => {
-      this.foundation.handleBlur();
-    };
-
-    const checked = false;
-    this.state = {
-      checked: props.checked || props.defaultChecked || checked,
-      addonId: props.addonId,
-      extraId: props.extraId,
-      focusVisible: false
-    };
-    this.checkboxEntity = null;
-    this.foundation = new CheckboxFoundation(this.adapter);
-  }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       setNativeControlChecked: checked => {
@@ -108,7 +80,26 @@ class Checkbox extends BaseComponent {
       }
     });
   }
-
+  constructor(props) {
+    super(props);
+    this.handleChange = e => this.foundation.handleChange(e);
+    this.handleEnterPress = e => this.foundation.handleEnterPress(e);
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+    const checked = false;
+    this.state = {
+      checked: props.checked || props.defaultChecked || checked,
+      addonId: props.addonId,
+      extraId: props.extraId,
+      focusVisible: false
+    };
+    this.checkboxEntity = null;
+    this.foundation = new CheckboxFoundation(this.adapter);
+  }
   componentDidUpdate(prevProps) {
     if (this.props.checked !== prevProps.checked) {
       if (_isUndefined(this.props.checked)) {
@@ -118,22 +109,18 @@ class Checkbox extends BaseComponent {
       }
     }
   }
-
   isInGroup() {
     // Why do we need to determine whether there is a value in props?
     // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
     // it will be considered not to belong to the checkboxGroup。
     return Boolean(this.context && this.context.checkboxGroup && 'value' in this.props);
   }
-
   focus() {
     this.checkboxEntity && this.checkboxEntity.focus();
   }
-
   blur() {
     this.checkboxEntity && this.checkboxEntity.blur();
   }
-
   render() {
     const {
       disabled,
@@ -162,17 +149,14 @@ class Checkbox extends BaseComponent {
       disabled
     };
     const inGroup = this.isInGroup();
-
     if (inGroup) {
       if (this.context.checkboxGroup.value) {
         const realChecked = (this.context.checkboxGroup.value || []).includes(value);
         props.checked = realChecked;
       }
-
       if (this.context.checkboxGroup.disabled) {
         props.disabled = this.context.checkboxGroup.disabled || this.props.disabled;
       }
-
       const {
         isCardType,
         isPureCardType
@@ -184,7 +168,6 @@ class Checkbox extends BaseComponent {
       props.isPureCardType = type === strings.TYPE_PURECARD;
       props.isCardType = type === strings.TYPE_CARD || props.isPureCardType;
     }
-
     const prefix = prefixCls || css.PREFIX;
     const focusOuter = props.isCardType || props.isPureCardType;
     const wrapper = classnames(prefix, {
@@ -205,12 +188,10 @@ class Checkbox extends BaseComponent {
     });
     const name = inGroup && this.context.checkboxGroup.name;
     const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
-
     const renderContent = () => {
       if (!children && !extra) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement("div", {
         className: `${prefix}-content`
       }, children ? /*#__PURE__*/React.createElement("span", {
@@ -223,7 +204,6 @@ class Checkbox extends BaseComponent {
         "x-semi-prop": "extra"
       }, extra) : null);
     };
-
     return (
       /*#__PURE__*/
       // label is better than span, however span is here which is to solve gitlab issue #364
@@ -251,9 +231,7 @@ class Checkbox extends BaseComponent {
       })), renderContent())
     );
   }
-
 }
-
 Checkbox.contextType = Context;
 Checkbox.propTypes = {
   'aria-describedby': PropTypes.string,

package/lib/es/checkbox/checkboxGroup.d.ts

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import CheckboxGroupFoundation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxGroupFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { CheckboxEvent } from './checkbox';
-export declare type CheckboxDirection = 'horizontal' | 'vertical';
-export declare type CheckboxType = 'default' | 'card' | 'pureCard';
-export declare type CheckboxGroupProps = {
+export type CheckboxDirection = 'horizontal' | 'vertical';
+export type CheckboxType = 'default' | 'card' | 'pureCard';
+export type CheckboxGroupProps = {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
@@ -26,7 +26,7 @@ export declare type CheckboxGroupProps = {
     id?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
 };
-export declare type CheckboxGroupState = {
+export type CheckboxGroupState = {
     value?: any[];
 };
 declare class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState> {

package/lib/es/checkbox/checkboxGroup.js

@@ -1,5 +1,4 @@
 import _isEqual from "lodash/isEqual";
-
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -9,17 +8,7 @@ import CheckboxGroupFoundation from '@douyinfe/semi-foundation/lib/es/checkbox/c
 import BaseComponent from '../_base/baseComponent';
 import { Context } from './context';
 import Checkbox from './checkbox';
-
 class CheckboxGroup extends BaseComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: props.value || props.defaultValue
-    };
-    this.foundation = new CheckboxGroupFoundation(this.adapter);
-    this.onChange = this.onChange.bind(this);
-  }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       updateGroupValue: value => {
@@ -32,25 +21,28 @@ class CheckboxGroup extends BaseComponent {
       }
     });
   }
-
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value || props.defaultValue
+    };
+    this.foundation = new CheckboxGroupFoundation(this.adapter);
+    this.onChange = this.onChange.bind(this);
+  }
   componentDidMount() {
     this.foundation.init();
   }
-
   componentDidUpdate(prevProps) {
     if (!_isEqual(prevProps.value, this.props.value)) {
       this.foundation.handlePropValueChange(this.props.value);
     }
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   onChange(evt) {
     this.foundation.handleChange(evt);
   }
-
   render() {
     const {
       children,
@@ -75,7 +67,6 @@ class CheckboxGroup extends BaseComponent {
     }, className);
     const realValue = this.state.value.slice();
     let inner;
-
     if (options) {
       inner = (options || []).map((option, index) => {
         if (typeof option === 'string') {
@@ -106,7 +97,6 @@ class CheckboxGroup extends BaseComponent {
         role: 'listitem'
       }));
     }
-
     return /*#__PURE__*/React.createElement("div", {
       id: id,
       role: "list",
@@ -128,9 +118,7 @@ class CheckboxGroup extends BaseComponent {
       }
     }, inner));
   }
-
 }
-
 CheckboxGroup.propTypes = {
   'aria-describedby': PropTypes.string,
   'aria-errormessage': PropTypes.string,

package/lib/es/checkbox/checkboxInner.js

@@ -1,5 +1,4 @@
 import _noop from "lodash/noop";
-
 /* eslint-disable no-nested-ternary */
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
@@ -7,12 +6,10 @@ import PropTypes from 'prop-types';
 import { checkboxClasses as css } from '@douyinfe/semi-foundation/lib/es/checkbox/constants';
 import { Context } from './context';
 import { IconCheckboxTick, IconCheckboxIndeterminate } from '@douyinfe/semi-icons';
-
 class CheckboxInner extends PureComponent {
   blur() {
     this.inputEntity.blur();
   }
-
   focus() {
     const {
       preventScroll
@@ -21,7 +18,6 @@ class CheckboxInner extends PureComponent {
       preventScroll
     });
   }
-
   render() {
     const {
       indeterminate,
@@ -76,9 +72,7 @@ class CheckboxInner extends PureComponent {
       className: inner
     }, icon));
   }
-
 }
-
 CheckboxInner.contextType = Context;
 CheckboxInner.propTypes = {
   'aria-describedby': PropTypes.string,

package/lib/es/checkbox/context.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type CheckboxContextType = {
+type CheckboxContextType = {
     checkboxGroup?: {
         onChange: (evt: any) => void;
         value: any[];

package/lib/es/checkbox/index.js

@@ -1,8 +1,6 @@
 import Checkbox from './checkbox';
 import Group from './checkboxGroup';
-
 class CheckboxWithGroup extends Checkbox {}
-
 CheckboxWithGroup.Group = Group;
 export { CheckboxWithGroup, Checkbox };
 export default CheckboxWithGroup;

package/lib/es/collapse/index.js

@@ -1,16 +1,12 @@
 import _isEqual from "lodash/isEqual";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -21,15 +17,12 @@ import CollapsePanel from './item';
 import '@douyinfe/semi-foundation/lib/es/collapse/collapse.css';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import CollapseContext from './collapse-context';
-
 class Collapse extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.onChange = (activeKey, e) => {
       this.foundation.handleChange(activeKey, e);
     };
-
     this.foundation = new CollapseFoundation(this.adapter);
     const initKeys = this.foundation.initActiveKey();
     this.state = {
@@ -37,7 +30,6 @@ class Collapse extends BaseComponent {
     };
     this.onChange = this.onChange.bind(this);
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       handleChange: (activeKey, e) => this.props.onChange(activeKey, e),
@@ -46,46 +38,39 @@ class Collapse extends BaseComponent {
       })
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     if (props.activeKey) {
       const keys = Array.isArray(props.activeKey) ? props.activeKey : [props.activeKey];
       const newSet = new Set(keys);
-
       if (!_isEqual(newSet, state.activeSet)) {
         return Object.assign(Object.assign({}, state), {
           activeSet: newSet
         });
       }
-
       return state;
     }
-
     return state;
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   render() {
     // eslint-disable-next-line max-len
     const _a = this.props,
-          {
-      defaultActiveKey,
-      accordion,
-      style,
-      motion,
-      className,
-      keepDOM,
-      expandIconPosition,
-      expandIcon,
-      collapseIcon,
-      children,
-      clickHeaderToExpand
-    } = _a,
-          rest = __rest(_a, ["defaultActiveKey", "accordion", "style", "motion", "className", "keepDOM", "expandIconPosition", "expandIcon", "collapseIcon", "children", "clickHeaderToExpand"]);
-
+      {
+        defaultActiveKey,
+        accordion,
+        style,
+        motion,
+        className,
+        keepDOM,
+        expandIconPosition,
+        expandIcon,
+        collapseIcon,
+        children,
+        clickHeaderToExpand
+      } = _a,
+      rest = __rest(_a, ["defaultActiveKey", "accordion", "style", "motion", "className", "keepDOM", "expandIconPosition", "expandIcon", "collapseIcon", "children", "clickHeaderToExpand"]);
     const clsPrefix = cls(cssClasses.PREFIX, className);
     const {
       activeSet
@@ -106,9 +91,7 @@ class Collapse extends BaseComponent {
       }
     }, children));
   }
-
 }
-
 Collapse.Panel = CollapsePanel;
 Collapse.propTypes = {
   activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),