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

package/lib/cjs/upload/index.js

@@ -4,42 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/upload/foundation"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/upload/constants");
-
 var _fileCard = _interopRequireDefault(require("./fileCard"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 require("@douyinfe/semi-foundation/lib/cjs/upload/upload.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable max-len */
-const prefixCls = _constants.cssClasses.PREFIX;
 
+const prefixCls = _constants.cssClasses.PREFIX;
 class Upload extends _baseComponent.default {
   constructor(props) {
     super(props);
     this.inputRef = null;
     this.replaceInputRef = null;
-
     this.onClick = () => {
       const {
         inputRef,
@@ -49,25 +34,20 @@ class Upload extends _baseComponent.default {
         onOpenFileDialog
       } = props;
       const isDisabled = Boolean(this.props.disabled);
-
       if (isDisabled || !inputRef || !inputRef.current) {
         return;
       }
-
       inputRef.current.click();
-
       if (onOpenFileDialog && typeof onOpenFileDialog) {
         onOpenFileDialog();
       }
     };
-
     this.onChange = e => {
       const {
         files
       } = e.target;
       this.foundation.handleChange(files);
     };
-
     this.replace = index => {
       this.setState({
         replaceIdx: index
@@ -75,18 +55,15 @@ class Upload extends _baseComponent.default {
         this.replaceInputRef.current.click();
       });
     };
-
     this.onReplaceChange = e => {
       const {
         files
       } = e.target;
       this.foundation.handleReplaceChange(files);
     };
-
     this.clear = () => {
       this.foundation.handleClear();
     };
-
     this.remove = fileItem => {
       this.foundation.handleRemove(fileItem);
     };
@@ -97,8 +74,6 @@ class Upload extends _baseComponent.default {
      * @param index number
      * @returns
      */
-
-
     this.insert = (files, index) => {
       return this.foundation.insertFileToList(files, index);
     };
@@ -106,8 +81,6 @@ class Upload extends _baseComponent.default {
      * ref method
      * manual upload by user
      */
-
-
     this.upload = () => {
       const {
         fileList
@@ -118,12 +91,9 @@ class Upload extends _baseComponent.default {
      * ref method
      * manual open file select dialog
      */
-
-
     this.openFileDialog = () => {
       this.onClick();
     };
-
     this.renderFile = (file, index, locale) => {
       const {
         name,
@@ -145,17 +115,13 @@ class Upload extends _baseComponent.default {
         disabled,
         onPreviewClick
       } = this.props;
-
       const onRemove = () => this.remove(file);
-
       const onRetry = () => {
         this.foundation.retry(file);
       };
-
       const onReplace = () => {
         this.replace(index);
       };
-
       const fileCardProps = Object.assign(Object.assign(Object.assign({}, (0, _pick2.default)(this.props, ['showRetry', 'showReplace', ''])), file), {
         previewFile,
         listType,
@@ -173,38 +139,30 @@ class Upload extends _baseComponent.default {
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
       });
-
       if (status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && !validateMessage) {
         fileCardProps.validateMessage = locale.fail;
       }
-
       if (_sizeInvalid && !validateMessage) {
         fileCardProps.validateMessage = locale.illegalSize;
       }
-
       if (typeof renderFileItem === 'undefined') {
         return /*#__PURE__*/_react.default.createElement(_fileCard.default, Object.assign({}, fileCardProps));
       } else {
         return renderFileItem(fileCardProps);
       }
     };
-
     this.renderFileList = () => {
       const {
         listType
       } = this.props;
-
       if (listType === _constants.strings.FILE_LIST_PIC) {
         return this.renderFileListPic();
       }
-
       if (listType === _constants.strings.FILE_LIST_DEFAULT) {
         return this.renderFileListDefault();
       }
-
       return null;
     };
-
     this.renderFileListPic = () => {
       const {
         showUploadList,
@@ -247,25 +205,20 @@ class Upload extends _baseComponent.default {
         onDragLeave: this.onDragLeave,
         onDragEnter: this.onDragEnter
       };
-
       if (draggable) {
         Object.assign(addContentProps, draggableProps, {
           className: (0, _classnames.default)(uploadAddCls, dragAreaCls)
         });
       }
-
       const addContent = /*#__PURE__*/_react.default.createElement("div", Object.assign({}, addContentProps, {
         "x-semi-prop": "children"
       }), children);
-
       if (!showUploadList || !fileList.length) {
         if (showAddTriggerInList) {
           return addContent;
         }
-
         return null;
       }
-
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/_react.default.createElement("div", Object.assign({}, containerProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -274,7 +227,6 @@ class Upload extends _baseComponent.default {
         "aria-label": "picture list"
       }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, fileList.map((file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
     };
-
     this.renderFileListDefault = () => {
       const {
         showUploadList,
@@ -293,11 +245,9 @@ class Upload extends _baseComponent.default {
       const containerProps = {
         className: fileListCls
       };
-
       if (!showUploadList || !fileList.length) {
         return null;
       }
-
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/_react.default.createElement("div", Object.assign({}, containerProps), showTitle ? /*#__PURE__*/_react.default.createElement("div", {
@@ -315,24 +265,19 @@ class Upload extends _baseComponent.default {
         "aria-label": "file list"
       }, fileList.map((file, index) => this.renderFile(file, index, locale)))));
     };
-
     this.onDrop = e => {
       this.foundation.handleDrop(e);
     };
-
     this.onDragOver = e => {
       // When a drag element moves within the target element
       this.foundation.handleDragOver(e);
     };
-
     this.onDragLeave = e => {
       this.foundation.handleDragLeave(e);
     };
-
     this.onDragEnter = e => {
       this.foundation.handleDragEnter(e);
     };
-
     this.renderAddContent = () => {
       const {
         draggable,
@@ -341,15 +286,12 @@ class Upload extends _baseComponent.default {
         disabled
       } = this.props;
       const uploadAddCls = (0, _classnames.default)(`${prefixCls}-add`);
-
       if (listType === _constants.strings.FILE_LIST_PIC) {
         return null;
       }
-
       if (draggable) {
         return this.renderDragArea();
       }
-
       return /*#__PURE__*/_react.default.createElement("div", {
         role: "button",
         tabIndex: 0,
@@ -358,7 +300,6 @@ class Upload extends _baseComponent.default {
         onClick: this.onClick
       }, children);
     };
-
     this.renderDragArea = () => {
       const {
         dragAreaStatus
@@ -409,7 +350,6 @@ class Upload extends _baseComponent.default {
         className: `${dragAreaBaseCls}-tips-illegal`
       }, locale.illegalTips))))));
     };
-
     this.state = {
       fileList: props.defaultFileList || [],
       replaceIdx: -1,
@@ -430,22 +370,17 @@ class Upload extends _baseComponent.default {
          The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
    *   which seems to be a bug, remove props type declare here
    */
-
-
   static getDerivedStateFromProps(props) {
     const {
       fileList
     } = props;
-
     if ('fileList' in props) {
       return {
         fileList: fileList || []
       };
     }
-
     return null;
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       notifyFileSelect: files => this.props.onFileChange(files),
@@ -522,11 +457,9 @@ class Upload extends _baseComponent.default {
       notifyBeforeClear: fileList => this.props.beforeClear(fileList)
     });
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   render() {
     const {
       style,
@@ -593,9 +526,7 @@ class Upload extends _baseComponent.default {
       "x-semi-prop": "validateMessage"
     }, validateMessage) : null, this.renderFileList());
   }
-
 }
-
 Upload.propTypes = {
   accept: _propTypes.default.string,
   action: _propTypes.default.string.isRequired,

package/lib/cjs/upload/interface.d.ts

@@ -2,8 +2,8 @@ import { ReactNode, CSSProperties } from 'react';
 import { BaseFileItem } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/upload/constants';
 import { ArrayElement } from '../_base/base';
-export declare type PromptPositionType = ArrayElement<typeof strings.PROMPT_POSITION>;
-export declare type UploadListType = ArrayElement<typeof strings.LIST_TYPE>;
+export type PromptPositionType = ArrayElement<typeof strings.PROMPT_POSITION>;
+export type UploadListType = ArrayElement<typeof strings.LIST_TYPE>;
 export interface BeforeUploadProps {
     file: FileItem;
     fileList: Array<FileItem>;
@@ -22,14 +22,14 @@ export interface customRequestArgs {
     data: Record<string, any>;
     file: FileItem;
     fileInstance: File;
-    onProgress: (event: {
+    onProgress: (e?: {
         total: number;
         loaded: number;
     }) => any;
     onError: (userXhr: {
         status?: number;
-    }, e: Event) => any;
-    onSuccess: (response: any, e: Event) => any;
+    }, e?: Event) => any;
+    onSuccess: (response: any, e?: Event) => any;
     withCredentials: boolean;
     action: string;
 }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-export declare type Motion<P extends Record<string, any> = any> = boolean | MotionObject | MotionFunction<P>;
-export declare type MotionFunction<P> = (props: P) => MotionObject;
+export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+export type Motion<P extends Record<string, any> = any> = boolean | MotionObject | MotionFunction<P>;
+export type MotionFunction<P> = (props: P) => MotionObject;
 export interface MotionObject {
     [x: string]: any;
     children?: React.ReactNode | ((props: MotionChildrenProps) => React.ReactNode);

package/lib/es/_base/baseComponent.d.ts

@@ -6,7 +6,7 @@ import React, { Component, ReactNode } from 'react';
 import { DefaultAdapter } from '@douyinfe/semi-foundation/lib/es/base/foundation';
 import { VALIDATE_STATUS } from '@douyinfe/semi-foundation/lib/es/base/constants';
 import { ArrayElement } from './base';
-export declare type ValidateStatus = ArrayElement<typeof VALIDATE_STATUS>;
+export type ValidateStatus = ArrayElement<typeof VALIDATE_STATUS>;
 export interface BaseProps {
     style?: React.CSSProperties;
     className?: string;

package/lib/es/_base/baseComponent.js

@@ -6,27 +6,23 @@ import { Component } from 'react';
 import log from '@douyinfe/semi-foundation/lib/es/utils/log';
 const {
   hasOwnProperty
-} = Object.prototype; // eslint-disable-next-line
-
+} = Object.prototype;
+// eslint-disable-next-line
 export default class BaseComponent extends Component {
   constructor(props) {
-    super(props); // eslint-disable-next-line
-
+    super(props);
+    // eslint-disable-next-line
     this.isControlled = key => Boolean(key && this.props && typeof this.props === 'object' && hasOwnProperty.call(this.props, key));
-
     this.cache = {};
     this.foundation = null;
   }
-
   componentDidMount() {
     this.foundation && typeof this.foundation.init === 'function' && this.foundation.init();
   }
-
   componentWillUnmount() {
     this.foundation && typeof this.foundation.destroy === 'function' && this.foundation.destroy();
     this.cache = {};
   }
-
   get adapter() {
     return {
       getContext: key => {
@@ -55,15 +51,12 @@ export default class BaseComponent extends Component {
       }
     };
   }
-
   log(text) {
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       rest[_key - 1] = arguments[_key];
     }
-
     return log(text, ...rest);
   }
-
 }
 BaseComponent.propTypes = {};
 BaseComponent.defaultProps = {};

package/lib/es/_base/reactUtils.js

@@ -1,13 +1,12 @@
 // https://stackoverflow.com/questions/33199959/how-to-detect-a-react-component-vs-a-react-element
 import React from 'react';
 import { isHTMLElement } from '@douyinfe/semi-foundation/lib/es/utils/dom';
-
 function isClassComponent(component) {
   return typeof component === 'function' && Boolean(component.prototype.isReactComponent);
 }
-
 function isFunctionalComponent(Component) {
-  return typeof Component === 'function' && // can be various things
+  return typeof Component === 'function' &&
+  // can be various things
   !(Component.prototype && Component.prototype.isReactComponent // native arrows don't have prototypes
   );
 }
@@ -15,18 +14,15 @@ function isFunctionalComponent(Component) {
 function isReactComponent(component) {
   return isClassComponent(component) || isFunctionalComponent(component);
 }
-
 function isElement(element) {
   return /*#__PURE__*/React.isValidElement(element);
 }
-
 function isCompositeTypeElement(element) {
   return isElement(element) && typeof element.type === 'function';
 }
-
 function isEmptyChildren(children) {
   return React.Children.count(children) === 0;
 }
-
-export { isClassComponent, isFunctionalComponent, isReactComponent, isElement, // isDOMTypeElement,
+export { isClassComponent, isFunctionalComponent, isReactComponent, isElement,
+// isDOMTypeElement,
 isHTMLElement, isCompositeTypeElement, isEmptyChildren };

package/lib/es/_cssAnimation/index.js

@@ -1,16 +1,12 @@
 import _isEqual from "lodash/isEqual";
 import React from 'react';
-
 class CSSAnimation extends React.Component {
   constructor(props) {
     super(props);
-
     this.handleAnimationStart = () => {
       var _a, _b;
-
       (_b = (_a = this.props).onAnimationStart) === null || _b === void 0 ? void 0 : _b.call(_a);
     };
-
     this.handleAnimationEnd = () => {
       this.setState({
         currentClassName: this.props.endClassName,
@@ -20,11 +16,9 @@ class CSSAnimation extends React.Component {
         isAnimating: false
       }, () => {
         var _a, _b;
-
         (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a, false);
       });
     };
-
     this.state = {
       currentClassName: this.props.startClassName,
       extraStyle: {
@@ -33,15 +27,12 @@ class CSSAnimation extends React.Component {
       isAnimating: true
     };
   }
-
   componentDidMount() {
-    var _a, _b, _c, _d; // The purpose is to shield the impact of the presence or absence of animation on the other semi component life cycle.
+    var _a, _b, _c, _d;
+    // The purpose is to shield the impact of the presence or absence of animation on the other semi component life cycle.
     // In order to make the component side do not need to manually call the next life cycle function when there is no animation,
     // so when there is no animation , it is logically (and only logically) regarded as an animation with a duration of 0.
-
-
     (_b = (_a = this.props).onAnimationStart) === null || _b === void 0 ? void 0 : _b.call(_a);
-
     if (!this.props.motion) {
       (_d = (_c = this.props).onAnimationEnd) === null || _d === void 0 ? void 0 : _d.call(_c, false);
       this.setState({
@@ -49,12 +40,9 @@ class CSSAnimation extends React.Component {
       });
     }
   }
-
   componentDidUpdate(prevProps, prevState, snapshot) {
     const changedKeys = Object.keys(this.props).filter(key => !_isEqual(this.props[key], prevProps[key]));
-
     if (changedKeys.includes("animationState")) {}
-
     if (changedKeys.includes("startClassName") || changedKeys.includes('replayKey') || changedKeys.includes("motion")) {
       this.setState({
         currentClassName: this.props.startClassName,
@@ -64,9 +52,7 @@ class CSSAnimation extends React.Component {
         isAnimating: true
       }, () => {
         var _a, _b, _c, _d;
-
         (_b = (_a = this.props).onAnimationStart) === null || _b === void 0 ? void 0 : _b.call(_a);
-
         if (!this.props.motion) {
           (_d = (_c = this.props).onAnimationEnd) === null || _d === void 0 ? void 0 : _d.call(_c, this.state.isAnimating);
           this.setState({
@@ -76,10 +62,8 @@ class CSSAnimation extends React.Component {
       });
     }
   }
-
   render() {
     var _a;
-
     if (this.props.motion) {
       return this.props.children({
         animationClassName: (_a = this.state.currentClassName) !== null && _a !== void 0 ? _a : "",
@@ -99,13 +83,12 @@ class CSSAnimation extends React.Component {
       });
     }
   }
-
 }
-
 CSSAnimation.defaultProps = {
   motion: true,
   replayKey: ""
-}; // const mergeAnimationFunction = (eventHandleFunctions: AnimationEventsNeedBind[]) => {
+};
+// const mergeAnimationFunction = (eventHandleFunctions: AnimationEventsNeedBind[]) => {
 //     //merge function in objects
 //     const mergedFunction = {};
 //     eventHandleFunctions.forEach(eventHandleFunction => {
@@ -124,5 +107,4 @@ CSSAnimation.defaultProps = {
 //     return mergedFunction;
 // };
 // export { mergeAnimationFunction };
-
 export default CSSAnimation;

package/lib/es/_portal/index.js

@@ -5,58 +5,45 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ConfigContext from '../configProvider/context';
 import '@douyinfe/semi-foundation/lib/es/_portal/portal.css';
-
 const defaultGetContainer = () => document.body;
-
 class Portal extends PureComponent {
   constructor(props) {
     var _this;
-
     super(props);
     _this = this;
-
     this.addStyle = function () {
       let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
       if (_this.el) {
         for (const key of Object.keys(style)) {
           _this.el.style[key] = style[key];
         }
       }
     };
-
     this.addClass = function (prefixCls) {
       const {
         direction
       } = _this.context;
-
       for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         classNames[_key - 1] = arguments[_key];
       }
-
       const cls = classnames(prefixCls, ...classNames, {
         [`${prefixCls}-rtl`]: direction === 'rtl'
       });
-
       if (_this.el) {
         _this.el.className = cls;
       }
     };
-
     try {
       this.el = document.createElement('div');
     } catch (e) {}
-
     this.state = {
       container: undefined
     };
   }
-
   componentDidMount() {
     if (!this.el) {
       this.el = document.createElement('div');
     }
-
     const {
       state,
       props,
@@ -64,7 +51,6 @@ class Portal extends PureComponent {
     } = this;
     const getContainer = props.getPopupContainer || context.getPopupContainer || defaultGetContainer;
     const container = getContainer();
-
     if (container !== state.container) {
       // const computedStyle = window.getComputedStyle(container);
       // if (computedStyle.position !== 'relative') {
@@ -78,43 +64,34 @@ class Portal extends PureComponent {
       });
     }
   }
-
   componentDidUpdate(prevProps) {
     // visible callback
     const {
       didUpdate
     } = this.props;
-
     if (didUpdate) {
       didUpdate(prevProps);
     }
   }
-
   componentWillUnmount() {
     const {
       container
     } = this.state;
-
     if (container) {
       container.removeChild(this.el);
     }
   }
-
   render() {
     const {
       state,
       props
     } = this;
-
     if (state.container) {
       return /*#__PURE__*/createPortal(props.children, this.el);
     }
-
     return null;
   }
-
 }
-
 Portal.contextType = ConfigContext;
 Portal.defaultProps = {
   // getPopupContainer: () => document.body,

package/lib/es/_utils/hooks/usePrevFocus.js

@@ -2,14 +2,12 @@ import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import { useState, useEffect } from 'react';
 import { getActiveElement } from '../index';
-
 /* istanbul ignore next */
 export function usePrevFocus() {
   const [prevFocusElement, setPrevFocus] = useState(getActiveElement());
   useEffect(() => {
     return function cleanup() {
       const blur = _get(prevFocusElement, 'blur');
-
       _isFunction(blur) && blur();
     };
   }, [prevFocusElement]);