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

package/lib/es/navigation/index.js

@@ -1,7 +1,6 @@
 import _isEqual from "lodash/isEqual";
 import _get from "lodash/get";
 import _noop from "lodash/noop";
-
 /* eslint-disable max-lines-per-function */
 import BaseComponent from '../_base/baseComponent';
 import React, { Children } from 'react';
@@ -16,49 +15,39 @@ import Header from './Header';
 import NavContext from './nav-context';
 import LocaleConsumer from '../locale/localeConsumer';
 import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
-
 function createAddKeysFn(context, keyName) {
   return function addKeys() {
     const handleKeys = new Set(context.state[keyName]);
-
     for (var _len = arguments.length, keys = new Array(_len), _key = 0; _key < _len; _key++) {
       keys[_key] = arguments[_key];
     }
-
     keys.forEach(key => key && handleKeys.add(key));
     context.setState({
       [keyName]: Array.from(handleKeys)
     });
   };
 }
-
 function createRemoveKeysFn(context, keyName) {
   return function removeKeys() {
     const handleKeys = new Set(context.state[keyName]);
-
     for (var _len2 = arguments.length, keys = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       keys[_key2] = arguments[_key2];
     }
-
     keys.forEach(key => key && handleKeys.delete(key));
     context.setState({
       [keyName]: Array.from(handleKeys)
     });
   };
 }
-
 const {
   hasOwnProperty
 } = Object.prototype;
-
 class Nav extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.onCollapseChange = () => {
       this.foundation.handleCollapseChange();
     };
-
     this.foundation = new NavigationFoundation(this.adapter);
     this.itemsChanged = true;
     const {
@@ -76,26 +65,21 @@ class Nav extends BaseComponent {
       selectedKeys: []
     };
     this.state = Object.assign({}, initState);
-
     if (items && items.length || children) {
       const calcState = this.foundation.init('constructor');
       this.state = Object.assign(Object.assign({}, initState), calcState);
     }
   }
-
   static getDerivedStateFromProps(props, state) {
     const willUpdateState = {};
-
     if (hasOwnProperty.call(props, 'isCollapsed') && props.isCollapsed !== state.isCollapsed) {
       willUpdateState.isCollapsed = props.isCollapsed;
     }
-
     return willUpdateState;
   }
-
-  componentDidMount() {// override BaseComponent
+  componentDidMount() {
+    // override BaseComponent
   }
-
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.items !== this.props.items || prevProps.children !== this.props.children) {
       this.foundation.init();
@@ -104,25 +88,20 @@ class Nav extends BaseComponent {
       const {
         selectedKeys
       } = this.state;
-
       if (this.props.selectedKeys && !_isEqual(prevProps.selectedKeys, this.props.selectedKeys)) {
         this.adapter.updateSelectedKeys(this.props.selectedKeys);
       }
-
       if (this.props.openKeys && !_isEqual(prevProps.openKeys, this.props.openKeys)) {
         this.adapter.updateOpenKeys(this.props.openKeys);
       }
-
       if (!_isEqual(selectedKeys, prevState.selectedKeys)) {
         const parentSelectKeys = this.foundation.selectLevelZeroParentKeys(null, ...selectedKeys);
         this.adapter.addSelectedKeys(...parentSelectKeys);
       }
     }
   }
-
   get adapter() {
     var _this = this;
-
     return Object.assign(Object.assign({}, super.adapter), {
       notifySelect: function () {
         return _this.props.onSelect(...arguments);
@@ -163,8 +142,6 @@ class Nav extends BaseComponent {
    * @param {NavItem[]} items
    * @returns {JSX.Element}
    */
-
-
   renderItems() {
     let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -189,7 +166,6 @@ class Nav extends BaseComponent {
     }));
     return finalDom;
   }
-
   render() {
     const {
       children: originChildren,
@@ -231,7 +207,6 @@ class Nav extends BaseComponent {
     let children = Children.toArray(originChildren);
     const footers = [];
     const headers = [];
-
     if ( /*#__PURE__*/React.isValidElement(footer)) {
       footers.push( /*#__PURE__*/React.createElement(Footer, {
         key: 0
@@ -241,7 +216,6 @@ class Nav extends BaseComponent {
         key: 0
       }, footer)));
     }
-
     if ( /*#__PURE__*/React.isValidElement(header)) {
       headers.push( /*#__PURE__*/React.createElement(Header, {
         key: 0
@@ -251,14 +225,11 @@ class Nav extends BaseComponent {
         key: 0
       }, header)));
     }
-
     if (Array.isArray(children) && children.length) {
       children = [...children];
       let childrenLength = children.length;
-
       for (let i = 0; i < childrenLength; i++) {
         const child = children[i];
-
         if (child.type === Footer || _get(child, 'type.elementType') === 'NavFooter') {
           footers.push(child);
           children.splice(i, 1);
@@ -272,7 +243,6 @@ class Nav extends BaseComponent {
         }
       }
     }
-
     const finalCls = cls(prefixCls, className, {
       [`${prefixCls}-collapsed`]: isCollapsed,
       [`${prefixCls}-horizontal`]: mode === 'horizontal',
@@ -281,11 +251,9 @@ class Nav extends BaseComponent {
     const headerListOuterCls = cls(`${prefixCls}-header-list-outer`, {
       [`${prefixCls}-header-list-outer-collapsed`]: isCollapsed
     });
-
     if (this.itemsChanged) {
       this.adapter.setCache('itemElems', this.renderItems(items));
     }
-
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Navigation"
     }, locale => /*#__PURE__*/React.createElement(NavContext.Provider, {
@@ -336,9 +304,7 @@ class Nav extends BaseComponent {
       className: `${prefixCls}-list`
     }, this.adapter.getCache('itemElems'), children))), footers))));
   }
-
 }
-
 Nav.Sub = SubNav;
 Nav.Item = Item;
 Nav.Header = Header;
@@ -398,9 +364,10 @@ Nav.defaultProps = {
   prefixCls: cssClasses.PREFIX,
   subNavMotion: true,
   // isOpen: false,
-  mode: strings.MODE_VERTICAL // defaultOpenKeys: [],
+  mode: strings.MODE_VERTICAL
+  // defaultOpenKeys: [],
   // defaultSelectedKeys: [],
   // items: [],
-
 };
+
 export default Nav;

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

@@ -10,7 +10,7 @@ export interface NoticeReactProps extends NoticeProps {
     style?: CSSProperties;
 }
 export type { NoticeState, NotificationListProps, NotificationListState, ConfigProps };
-export declare type NoticesInPosition = {
+export type NoticesInPosition = {
     top: NoticeInstance[];
     topLeft: NoticeInstance[];
     topRight: NoticeInstance[];

package/lib/es/notification/index.js

@@ -20,29 +20,22 @@ const defaultConfig = {
   title: '',
   zIndex: 1010
 };
-
 class NotificationList extends BaseComponent {
   constructor(props) {
     var _this;
-
     super(props);
     _this = this;
-
     this.add = noticeOpts => this.foundation.addNotice(noticeOpts);
-
     this.remove = id => {
       this.foundation.removeNotice(String(id));
     };
-
     this.destroyAll = () => this.foundation.destroyAll();
-
     this.renderNoticeInPosition = function (notices, position) {
       let removedItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-      const className = cls(cssClasses.LIST); // TODO notifyOnClose
-
+      const className = cls(cssClasses.LIST);
+      // TODO notifyOnClose
       if (notices.length) {
         const style = _this.setPosInStyle(notices[0]);
-
         return (
           /*#__PURE__*/
           // @ts-ignore
@@ -76,10 +69,8 @@ class NotificationList extends BaseComponent {
           }))
         );
       }
-
       return null;
     };
-
     this.state = {
       notices: [],
       removedItems: []
@@ -88,16 +79,14 @@ class NotificationList extends BaseComponent {
     this.removeItemStorage = [];
     this.foundation = new NotificationListFoundation(this.adapter);
   }
-
   get adapter() {
     var _this2 = this;
-
     return Object.assign(Object.assign({}, super.adapter), {
       updateNotices: function (notices) {
         let removedItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
         _this2.noticeStorage = [...notices];
-        _this2.removeItemStorage = [...removedItems]; // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
-
+        _this2.removeItemStorage = [...removedItems];
+        // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
         _this2.setState({
           notices,
           removedItems
@@ -106,31 +95,25 @@ class NotificationList extends BaseComponent {
       getNotices: () => this.noticeStorage
     });
   }
-
   static addNotice(notice) {
     const id = getUuid('notification');
-
     if (!ref) {
       const {
         getPopupContainer
       } = notice;
       const div = document.createElement('div');
-
       if (!this.wrapperId) {
         this.wrapperId = getUuid('notification-wrapper').slice(0, 32);
       }
-
       div.className = cssClasses.WRAPPER;
       div.id = this.wrapperId;
       div.style.zIndex = String(typeof notice.zIndex === 'number' ? notice.zIndex : defaultConfig.zIndex);
-
       if (getPopupContainer) {
         const container = getPopupContainer();
         container.appendChild(div);
       } else {
         document.body.appendChild(div);
       }
-
       ReactDOM.render( /*#__PURE__*/React.createElement(NotificationList, {
         ref: instance => ref = instance
       }), div, () => {
@@ -143,52 +126,42 @@ class NotificationList extends BaseComponent {
         id
       }));
     }
-
     return id;
   }
-
   static removeNotice(id) {
     if (ref) {
       ref.remove(id);
     }
-
     return id;
   }
-
   static info(opts) {
     return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
       type: 'info'
     }));
   }
-
   static success(opts) {
     return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
       type: 'success'
     }));
   }
-
   static error(opts) {
     return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
       type: 'error'
     }));
   }
-
   static warning(opts) {
     return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
       type: 'warning'
     }));
   }
-
   static open(opts) {
     return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
       type: 'default'
     }));
   }
-
   static close(id) {
     return this.removeNotice(id);
   }
-
   static destroyAll() {
     if (ref) {
       ref.destroyAll();
@@ -199,27 +172,22 @@ class NotificationList extends BaseComponent {
       this.wrapperId = null;
     }
   }
-
   static config(opts) {
     ['top', 'left', 'bottom', 'right'].map(pos => {
       if (pos in opts) {
         defaultConfig[pos] = opts[pos];
       }
     });
-
     if (typeof opts.zIndex === 'number') {
       defaultConfig.zIndex = opts.zIndex;
     }
-
     if (typeof opts.duration === 'number') {
       defaultConfig.duration = opts.duration;
     }
-
     if (typeof opts.position === 'string') {
       defaultConfig.position = opts.position;
     }
   }
-
   setPosInStyle(noticeInstance) {
     const style = {};
     ['top', 'left', 'bottom', 'right'].forEach(pos => {
@@ -230,7 +198,6 @@ class NotificationList extends BaseComponent {
     });
     return style;
   }
-
   render() {
     let {
       notices
@@ -260,9 +227,7 @@ class NotificationList extends BaseComponent {
     });
     return /*#__PURE__*/React.createElement(React.Fragment, null, noticesList);
   }
-
 }
-
 NotificationList.contextType = ConfigContext;
 NotificationList.propTypes = {
   style: PropTypes.object,

package/lib/es/notification/notice.js

@@ -1,18 +1,13 @@
 import _noop from "lodash/noop";
-
 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;
 };
 /* eslint-disable no-unreachable */
-
-
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -33,50 +28,41 @@ const {
   themes,
   directions
 } = strings;
-
 class Notice extends BaseComponent {
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      notifyWrapperToRemove: id => {
+        this.props.close(id);
+      },
+      notifyClose: () => {
+        this.props.onClose();
+        this.props.onHookClose && this.props.onHookClose();
+      }
+    });
+  }
   constructor(props) {
     super(props);
-
     this.clearCloseTimer = () => {
       this.foundation._clearCloseTimer();
     };
-
     this.startCloseTimer = () => {
       this.foundation._startCloseTimer();
     };
-
     this.close = e => {
       this.props.onCloseClick(this.props.id);
       this.foundation.close(e);
     };
-
     this.notifyClick = e => {
       this.props.onClick(e);
     };
-
     this.state = {
       visible: true
     };
     this.foundation = new NotificationFoundation(this.adapter);
   }
-
-  get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      notifyWrapperToRemove: id => {
-        this.props.close(id);
-      },
-      notifyClose: () => {
-        this.props.onClose();
-        this.props.onHookClose && this.props.onHookClose();
-      }
-    });
-  }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   renderTypeIcon() {
     const {
       type,
@@ -101,11 +87,9 @@ class Notice extends BaseComponent {
       [`${prefixCls}-icon`]: true,
       [`${prefixCls}-${type}`]: true
     });
-
     if (icon) {
       iconType = icon;
     }
-
     if (iconType) {
       return /*#__PURE__*/React.createElement("div", {
         className: iconCls,
@@ -114,29 +98,25 @@ class Notice extends BaseComponent {
         size: iconType.props.size || 'large'
       }) : iconType);
     }
-
     return null;
   }
-
   render() {
     const direction = this.props.direction || this.context.direction;
     const defaultPosition = direction === 'rtl' ? 'topLeft' : 'topRight';
-
     const _a = this.props,
-          {
-      content,
-      title,
-      theme,
-      position = defaultPosition,
-      type,
-      id,
-      onCloseClick,
-      className,
-      showClose,
-      style
-    } = _a,
-          attr = __rest(_a, ["content", "title", "theme", "position", "type", "id", "onCloseClick", "className", "showClose", "style"]);
-
+      {
+        content,
+        title,
+        theme,
+        position = defaultPosition,
+        type,
+        id,
+        onCloseClick,
+        className,
+        showClose,
+        style
+      } = _a,
+      attr = __rest(_a, ["content", "title", "theme", "position", "type", "id", "onCloseClick", "className", "showClose", "style"]);
     const {
       visible
     } = this.state;
@@ -182,9 +162,7 @@ class Notice extends BaseComponent {
       })))
     );
   }
-
 }
-
 Notice.contextType = ConfigContext;
 Notice.propTypes = {
   duration: PropTypes.number,

package/lib/es/notification/useNotification/HookNotice.js

@@ -1,29 +1,22 @@
 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, { useState, useEffect } from 'react';
 import Notice from '../notice';
-
 const HookNotice = (_a, ref) => {
   var {
-    afterClose
-  } = _a,
-      config = __rest(_a, ["afterClose"]);
-
+      afterClose
+    } = _a,
+    config = __rest(_a, ["afterClose"]);
   const [visible, setVisible] = useState(true);
-
   const close = () => {
     setVisible(false);
   };
-
   React.useImperativeHandle(ref, () => ({
     close: () => {
       setVisible(false);
@@ -38,5 +31,4 @@ const HookNotice = (_a, ref) => {
     onHookClose: close
   })) : null;
 };
-
 export default /*#__PURE__*/React.forwardRef(HookNotice);

package/lib/es/notification/useNotification/index.js

@@ -3,8 +3,8 @@ import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/notification/constants';
 import HookNotice from './HookNotice';
 import '@douyinfe/semi-foundation/lib/es/notification/notification.css';
-import getUuid from '@douyinfe/semi-foundation/lib/es/utils/uuid'; // TODO: Automatic folding + unfolding function when there are more than N
-
+import getUuid from '@douyinfe/semi-foundation/lib/es/utils/uuid';
+// TODO: Automatic folding + unfolding function when there are more than N
 const defaultConfig = {
   duration: 3,
   position: 'topRight',
@@ -13,10 +13,8 @@ const defaultConfig = {
   title: '',
   zIndex: 1010
 };
-
 function usePatchElement() {
   const [elements, setElements] = useState([]);
-
   function patchElement(element, config) {
     setElements(originElements => [{
       element,
@@ -31,7 +29,6 @@ function usePatchElement() {
       }));
     };
   }
-
   function renderList() {
     const noticesInPosition = {
       top: [],
@@ -53,8 +50,8 @@ function usePatchElement() {
     });
     return Object.entries(noticesInPosition).map(obj => {
       const pos = obj[0];
-      const notices = obj[1]; // @ts-ignore
-
+      const notices = obj[1];
+      // @ts-ignore
       return Array.isArray(notices) && notices.length ? /*#__PURE__*/React.createElement("div", {
         key: pos,
         className: cls(cssClasses.LIST),
@@ -62,26 +59,21 @@ function usePatchElement() {
       }, notices) : null;
     });
   }
-
   return [renderList(), patchElement];
 }
-
 export default function useNotification() {
   const [elements, patchElement] = usePatchElement();
   const noticeRef = new Map();
-
   const addNotice = config => {
     const id = getUuid('semi_notice_');
     const mergeConfig = Object.assign(Object.assign({}, config), {
       id
-    }); // eslint-disable-next-line prefer-const
-
+    });
+    // eslint-disable-next-line prefer-const
     let closeFunc;
-
     const ref = ele => {
       noticeRef.set(id, ele);
     };
-
     const notice = /*#__PURE__*/React.createElement(HookNotice, Object.assign({
       key: id
     }, mergeConfig, {
@@ -91,12 +83,10 @@ export default function useNotification() {
     closeFunc = patchElement(notice, Object.assign({}, mergeConfig));
     return id;
   };
-
   const removeElement = instanceID => {
     const ele = noticeRef.get(instanceID);
     ele && ele.close();
   };
-
   return [{
     success: config => addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), config), {
       type: 'success'