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

package/lib/cjs/grid/row.js

@@ -4,26 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RowContext = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/grid/constants");
-
 require("@douyinfe/semi-foundation/lib/cjs/grid/grid.css");
-
 var _utils = require("../_utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__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]];
   }
@@ -33,11 +23,8 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
  * Implementation reference from: https://github.com/ant-design/ant-design/blob/master/components/grid/row.tsx
  */
 
-
 const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-
 const RowContext = /*#__PURE__*/_react.default.createContext(null);
-
 exports.RowContext = RowContext;
 const responsiveMap = {
   xs: '(max-width: 575px)',
@@ -47,7 +34,6 @@ const responsiveMap = {
   xl: '(min-width: 1200px)',
   xxl: '(min-width: 1600px)'
 };
-
 class Row extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -63,14 +49,12 @@ class Row extends _react.default.Component {
     };
     this.unRegisters = [];
   }
-
   componentDidMount() {
     this.unRegisters = Object.keys(responsiveMap).map(screen => (0, _utils.registerMediaQuery)(responsiveMap[screen], {
       match: () => {
         if (typeof this.props.gutter !== 'object') {
           return;
         }
-
         this.setState(prevState => ({
           screens: Object.assign(Object.assign({}, prevState.screens), {
             [screen]: true
@@ -81,7 +65,6 @@ class Row extends _react.default.Component {
         if (typeof this.props.gutter !== 'object') {
           return;
         }
-
         this.setState(prevState => ({
           screens: Object.assign(Object.assign({}, prevState.screens), {
             [screen]: false
@@ -90,11 +73,9 @@ class Row extends _react.default.Component {
       }
     }));
   }
-
   componentWillUnmount() {
     this.unRegisters.forEach(unRegister => unRegister());
   }
-
   getGutter() {
     const {
       gutter = 0
@@ -105,7 +86,6 @@ class Row extends _react.default.Component {
       if (typeof g === 'object') {
         for (let i = 0; i < responsiveArray.length; i++) {
           const breakpoint = responsiveArray[i];
-
           if (this.state.screens[breakpoint] && g[breakpoint] !== undefined) {
             results[index] = g[breakpoint];
             break;
@@ -117,20 +97,18 @@ class Row extends _react.default.Component {
     });
     return results;
   }
-
   render() {
     const _a = this.props,
-          {
-      prefixCls,
-      type,
-      justify,
-      align,
-      className,
-      style,
-      children
-    } = _a,
-          others = __rest(_a, ["prefixCls", "type", "justify", "align", "className", "style", "children"]);
-
+      {
+        prefixCls,
+        type,
+        justify,
+        align,
+        className,
+        style,
+        children
+      } = _a,
+      others = __rest(_a, ["prefixCls", "type", "justify", "align", "className", "style", "children"]);
     const gutters = this.getGutter();
     const prefix = `${prefixCls}-row`;
     const classes = (0, _classnames.default)({
@@ -158,9 +136,7 @@ class Row extends _react.default.Component {
       "x-semi-prop": "children"
     }), children));
   }
-
 }
-
 Row.propTypes = {
   type: _propTypes.default.oneOf(['flex']),
   align: _propTypes.default.oneOf(['top', 'middle', 'bottom']),

package/lib/cjs/highlight/index.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/highlight/constants");
-
 var _index = require("../_utils/index");
-
 require("@douyinfe/semi-foundation/lib/cjs/highlight/highlight.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const prefixCls = _constants.cssClasses.PREFIX;
-
 class Highlight extends _react.PureComponent {
   render() {
     const {
@@ -48,9 +39,7 @@ class Highlight extends _react.PureComponent {
       option
     });
   }
-
 }
-
 Highlight.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,

package/lib/cjs/iconButton/index.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Theme, ButtonProps } from '../button/Button';
 import { IconSize } from '@douyinfe/semi-icons';
 import '@douyinfe/semi-foundation/lib/cjs/button/iconButton.css';
-export declare type HorizontalPaddingType = 'left' | 'right';
+export type HorizontalPaddingType = 'left' | 'right';
 export interface IconButtonProps extends ButtonProps {
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';

package/lib/cjs/iconButton/index.js

@@ -4,36 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/button/constants");
-
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/icons/constants");
-
 var _Button = _interopRequireDefault(require("../button/Button"));
-
 var _icon = _interopRequireDefault(require("../spin/icon"));
-
 require("@douyinfe/semi-foundation/lib/cjs/button/iconButton.css");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__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]];
   }
@@ -41,30 +26,28 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 /* eslint-disable eqeqeq */
 
-
-const iconSizes = _constants2.strings.SIZE; // TODO: add a buttonGroup component
+const iconSizes = _constants2.strings.SIZE;
+// TODO: add a buttonGroup component
 // TODO: icon configuration
-
 class IconButton extends _react.PureComponent {
   render() {
     const _a = this.props,
-          {
-      children: originChildren,
-      iconPosition,
-      iconSize,
-      iconStyle,
-      style: originStyle,
-      icon,
-      noHorizontalPadding,
-      theme,
-      className,
-      prefixCls,
-      loading
-    } = _a,
-          otherProps = __rest(_a, ["children", "iconPosition", "iconSize", "iconStyle", "style", "icon", "noHorizontalPadding", "theme", "className", "prefixCls", "loading"]);
-
-    const style = Object.assign({}, originStyle); // TODO: review check
-
+      {
+        children: originChildren,
+        iconPosition,
+        iconSize,
+        iconStyle,
+        style: originStyle,
+        icon,
+        noHorizontalPadding,
+        theme,
+        className,
+        prefixCls,
+        loading
+      } = _a,
+      otherProps = __rest(_a, ["children", "iconPosition", "iconSize", "iconStyle", "style", "icon", "noHorizontalPadding", "theme", "className", "prefixCls", "loading"]);
+    const style = Object.assign({}, originStyle);
+    // TODO: review check
     if (Array.isArray(noHorizontalPadding)) {
       noHorizontalPadding.includes('left') && (style.paddingLeft = 0);
       noHorizontalPadding.includes('right') && (style.paddingRight = 0);
@@ -75,16 +58,13 @@ class IconButton extends _react.PureComponent {
       noHorizontalPadding === 'left' && (style.paddingLeft = 0);
       noHorizontalPadding === 'right' && (style.paddingRight = 0);
     }
-
     let finalChildren = null;
     let IconElem = null;
-
     if (loading && !otherProps.disabled) {
       IconElem = /*#__PURE__*/_react.default.createElement(_icon.default, null);
     } else if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
       IconElem = icon;
     }
-
     const btnTextCls = (0, _classnames.default)({
       [`${prefixCls}-content-left`]: iconPosition === 'right',
       [`${prefixCls}-content-right`]: iconPosition === 'left'
@@ -94,13 +74,11 @@ class IconButton extends _react.PureComponent {
       className: btnTextCls,
       "x-semi-prop": xSemiProp
     }, originChildren) : null;
-
     if (iconPosition === 'left') {
       finalChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, IconElem, children);
     } else {
       finalChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, IconElem);
     }
-
     const iconBtnCls = (0, _classnames.default)(className, `${prefixCls}-with-icon`, {
       [`${prefixCls}-with-icon-only`]: children == null || children === '',
       [`${prefixCls}-loading`]: loading
@@ -111,9 +89,7 @@ class IconButton extends _react.PureComponent {
       style: style
     }), finalChildren);
   }
-
 }
-
 IconButton.defaultProps = {
   iconPosition: _constants.strings.DEFAULT_ICON_POSITION,
   prefixCls: _constants.cssClasses.PREFIX,

package/lib/cjs/icons/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _semiIcons = _interopRequireDefault(require("@douyinfe/semi-icons"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _semiIcons.default;
 exports.default = _default;

package/lib/cjs/image/image.d.ts

@@ -32,9 +32,6 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
     imgRef: React.RefObject<HTMLImageElement>;
     constructor(props: ImageProps);
     static getDerivedStateFromProps(props: ImageProps, state: ImageStates): Partial<ImageStates>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ImageProps, prevState: ImageStates): void;
-    observeImage(): void;
     isInGroup(): boolean;
     isLazyLoad(): boolean;
     handleClick: (e: any) => void;

package/lib/cjs/image/image.js

@@ -4,76 +4,53 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
-
 var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 var _previewInner = _interopRequireDefault(require("./previewInner"));
-
 var _previewContext = require("./previewContext");
-
 var _imageFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/imageFoundation"));
-
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
 var _skeleton = _interopRequireDefault(require("../skeleton"));
-
 require("@douyinfe/semi-foundation/lib/cjs/image/image.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__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 jsx-a11y/click-events-have-key-events */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-
 const prefixCls = _constants.cssClasses.PREFIX;
-
 class Image extends _baseComponent.default {
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      getIsInGroup: () => this.isInGroup()
+    });
+  }
   constructor(props) {
     super(props);
-
     this.handleClick = e => {
       this.foundation.handleClick(e);
     };
-
     this.handleLoaded = e => {
       this.foundation.handleLoaded(e);
     };
-
     this.handleError = e => {
       this.foundation.handleError(e);
     };
-
     this.handlePreviewVisibleChange = visible => {
       this.foundation.handlePreviewVisibleChange(visible);
     };
-
     this.renderDefaultLoading = () => {
       const {
         width,
@@ -86,7 +63,6 @@ class Image extends _baseComponent.default {
         }
       });
     };
-
     this.renderDefaultError = () => {
       const prefixClsName = `${prefixCls}-status`;
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -95,7 +71,6 @@ class Image extends _baseComponent.default {
         size: "extra-large"
       }));
     };
-
     this.renderLoad = () => {
       const prefixClsName = `${prefixCls}-status`;
       const {
@@ -105,7 +80,6 @@ class Image extends _baseComponent.default {
         className: prefixClsName
       }, placeholder) : this.renderDefaultLoading();
     };
-
     this.renderError = () => {
       const {
         fallback
@@ -123,7 +97,6 @@ class Image extends _baseComponent.default {
         className: prefixClsName
       }, fallbackNode) : this.renderDefaultError();
     };
-
     this.renderExtra = () => {
       const {
         loadStatus
@@ -132,11 +105,9 @@ class Image extends _baseComponent.default {
         className: `${prefixCls}-overlay`
       }, loadStatus === "error" && this.renderError(), loadStatus === "loading" && this.renderLoad());
     };
-
     this.getLocalTextByKey = key => /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Image"
     }, locale => locale[key]);
-
     this.renderMask = () => /*#__PURE__*/_react.default.createElement("div", {
       className: `${prefixCls}-mask`
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -146,7 +117,6 @@ class Image extends _baseComponent.default {
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: `${prefixCls}-mask-info-text`
     }, this.getLocalTextByKey("preview"))));
-
     this.state = {
       src: "",
       loadStatus: "loading",
@@ -155,90 +125,53 @@ class Image extends _baseComponent.default {
     this.foundation = new _imageFoundation.default(this.adapter);
     this.imgRef = /*#__PURE__*/_react.default.createRef();
   }
-
-  get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      getIsInGroup: () => this.isInGroup()
-    });
-  }
-
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-
     if (props.src !== state.src) {
       willUpdateStates.src = props.src;
       willUpdateStates.loadStatus = "loading";
     }
-
     if ((0, _isObject2.default)(props.preview)) {
       const {
         visible
       } = props.preview;
-
       if ((0, _isBoolean2.default)(visible)) {
         willUpdateStates.previewVisible = visible;
       }
     }
-
     return willUpdateStates;
   }
-
-  componentDidMount() {
-    this.observeImage();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    prevProps.src !== this.props.src && this.observeImage();
-  }
-
-  observeImage() {
-    if (!this.isLazyLoad()) {
-      return;
-    }
-
-    const {
-      previewObserver
-    } = this.context;
-    previewObserver.observe(this.imgRef.current);
-  }
-
   isInGroup() {
     return Boolean(this.context && this.context.isGroup);
   }
-
   isLazyLoad() {
     if (this.context) {
       return this.context.lazyLoad;
     }
-
     return false;
   }
-
   render() {
     var _a;
-
     const {
       src,
       loadStatus,
       previewVisible
     } = this.state;
-
     const _b = this.props,
-          {
-      src: picSrc,
-      width,
-      height,
-      alt,
-      style,
-      className,
-      crossOrigin,
-      preview,
-      fallback,
-      placeholder,
-      imageID
-    } = _b,
-          restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID"]);
-
+      {
+        src: picSrc,
+        width,
+        height,
+        alt,
+        style,
+        className,
+        crossOrigin,
+        preview,
+        fallback,
+        placeholder,
+        imageID
+      } = _b,
+      restProps = __rest(_b, ["src", "width", "height", "alt", "style", "className", "crossOrigin", "preview", "fallback", "placeholder", "imageID"]);
     const outerStyle = Object.assign({
       width,
       height
@@ -279,9 +212,7 @@ class Image extends _baseComponent.default {
       })))
     );
   }
-
 }
-
 exports.default = Image;
 Image.isSemiImage = true;
 Image.contextType = _previewContext.PreviewContext;

package/lib/cjs/image/index.js

@@ -16,16 +16,10 @@ Object.defineProperty(exports, "PreviewInner", {
   }
 });
 exports.default = void 0;
-
 var _image = _interopRequireDefault(require("./image"));
-
 var _previewInner = _interopRequireDefault(require("./previewInner"));
-
 var _preview = _interopRequireDefault(require("./preview"));
-
 require("@douyinfe/semi-foundation/lib/cjs/image/image.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _image.default;
 exports.default = _default;

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

@@ -84,7 +84,7 @@ export interface MenuProps {
     onRotateLeft?: () => void;
     onRotateRight?: () => void;
 }
-export declare type RatioType = "adaptation" | "realSize";
+export type RatioType = "adaptation" | "realSize";
 export interface PreviewInnerStates {
     imgSrc?: string[];
     imgLoadStatus?: Map<string, boolean>;

package/lib/cjs/image/preview.d.ts

@@ -71,7 +71,11 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
     previewRef: React.RefObject<PreviewInner>;
     previewObserver: IntersectionObserver;
     constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    observerImages: () => void;
     static getDerivedStateFromProps(props: PreviewProps, state: PreviewState): Partial<PreviewState>;
+    componentWillUnmount(): void;
     handleVisibleChange: (newVisible: boolean) => void;
     handleCurrentIndexChange: (index: number) => void;
     loopImageIndex: () => {