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

package/lib/cjs/form/group.js

@@ -99,7 +99,7 @@ class FormInputGroup extends _react.Component {
           rest = __rest(_a, ["children", "label", "extraText", "extraTextPosition"]);
 
     const updater = this.context;
-    const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol']);
+    const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol', 'disabled']);
     const labelPosition = this.props.labelPosition || formProps.labelPosition;
     const groupFieldSet = [];
 
@@ -126,7 +126,9 @@ class FormInputGroup extends _react.Component {
     const labelColCls = labelCol ? `${prefix}-col-${labelAlign}` : '';
     const labelContent = this.renderLabel(label, formProps);
 
-    const inputGroupContent = /*#__PURE__*/_react.default.createElement(_inputGroup.default, Object.assign({}, rest), inner);
+    const inputGroupContent = /*#__PURE__*/_react.default.createElement(_inputGroup.default, Object.assign({
+      disabled: formProps.disabled
+    }, rest), inner);
 
     const groupErrorContent = /*#__PURE__*/_react.default.createElement(GroupError, {
       fieldSet: groupFieldSet,

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

@@ -29,8 +29,12 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
     get adapter(): ImageAdapter<ImageProps, ImageStates>;
     context: PreviewContextProps;
     foundation: ImageFoundation;
+    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

@@ -153,6 +153,7 @@ class Image extends _baseComponent.default {
       previewVisible: false
     };
     this.foundation = new _imageFoundation.default(this.adapter);
+    this.imgRef = /*#__PURE__*/_react.default.createRef();
   }
 
   get adapter() {
@@ -182,6 +183,25 @@ class Image extends _baseComponent.default {
     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);
   }
@@ -236,7 +256,9 @@ class Image extends _baseComponent.default {
         style: outerStyle,
         className: outerCls,
         onClick: this.handleClick
-      }, /*#__PURE__*/_react.default.createElement("img", Object.assign({}, restProps, {
+      }, /*#__PURE__*/_react.default.createElement("img", Object.assign({
+        ref: this.imgRef
+      }, restProps, {
         src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
         "data-src": src,
         alt: alt,

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

@@ -69,8 +69,8 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
     foundation: PreviewFoundation;
     previewGroupId: string;
     previewRef: React.RefObject<PreviewInner>;
+    previewObserver: IntersectionObserver;
     constructor(props: any);
-    componentDidMount(): void;
     static getDerivedStateFromProps(props: PreviewProps, state: PreviewState): Partial<PreviewState>;
     handleVisibleChange: (newVisible: boolean) => void;
     handleCurrentIndexChange: (index: number) => void;

package/lib/cjs/image/preview.js

@@ -112,19 +112,7 @@ class Preview extends _baseComponent.default {
       length: 4
     });
     this.previewRef = /*#__PURE__*/_react.default.createRef();
-  }
-
-  get adapter() {
-    return Object.assign({}, super.adapter);
-  }
-
-  componentDidMount() {
-    const {
-      lazyLoadMargin
-    } = this.props;
-    const allElement = document.querySelectorAll(`.${prefixCls}-img`); // use IntersectionObserver to lazy load image
-
-    const observer = new IntersectionObserver(entries => {
+    this.previewObserver = new IntersectionObserver(entries => {
       entries.forEach(item => {
         var _a;
 
@@ -132,14 +120,18 @@ class Preview extends _baseComponent.default {
 
         if (item.isIntersecting && src) {
           item.target.src = src;
-          observer.unobserve(item.target);
+          item.target.removeAttribute("data-src");
+          this.previewObserver.unobserve(item.target);
         }
       });
     }, {
       root: document.querySelector(`#${this.previewGroupId}`),
-      rootMargin: lazyLoadMargin
+      rootMargin: props.lazyLoadMargin
     });
-    allElement.forEach(item => observer.observe(item));
+  }
+
+  get adapter() {
+    return Object.assign({}, super.adapter);
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -184,6 +176,7 @@ class Preview extends _baseComponent.default {
         currentIndex,
         visible,
         lazyLoad,
+        previewObserver: this.previewObserver,
         setCurrentIndex: this.handleCurrentIndexChange,
         handleVisibleChange: this.handleVisibleChange
       }

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

@@ -6,6 +6,7 @@ export interface PreviewContextProps {
     titles: ReactNode[];
     currentIndex: number;
     visible: boolean;
+    previewObserver: IntersectionObserver;
     setCurrentIndex: (current: number) => void;
     handleVisibleChange: (visible: boolean, preVisible?: boolean) => void;
 }

package/lib/cjs/table/Table.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
+
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _difference2 = _interopRequireDefault(require("lodash/difference"));
 
-var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
-
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
 
 var _each2 = _interopRequireDefault(require("lodash/each"));
@@ -881,6 +881,9 @@ class Table extends _baseComponent.default {
 
     const queries = _foundation.default.initColumnsFilteredValueAndSorterOrder((0, _utils2.cloneDeep)(cachedflattenColumns));
 
+    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
+    const newPagination = (0, _isPlainObject2.default)(this.props.pagination) ? this.props.pagination : {};
+    const pageData = this.foundation.getCurrentPageData(filteredSortedDataSource, newPagination, queries);
     this.state = {
       /**
        * Cached props
@@ -894,11 +897,11 @@ class Table extends _baseComponent.default {
        * State calculated based on prop
        */
       queries,
-      dataSource: [],
+      dataSource: pageData.dataSource,
       flattenData: [],
       expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
       rowSelection: props.rowSelection ? (0, _isObject2.default)(props.rowSelection) ? Object.assign({}, props.rowSelection) : {} : null,
-      pagination: props.pagination && typeof props.pagination === 'object' ? Object.assign({}, props.pagination) : props.pagination || false,
+      pagination: pageData.pagination,
 
       /**
        * Internal state
@@ -1479,12 +1482,11 @@ class Table extends _baseComponent.default {
      * TODO: After merging issue 1007, you can place it in the constructor to complete
      * The reason is that #1007 exposes the parameters required by getCurrentPageData in the constructor
      */
-
-    if ((0, _isNull2.default)(dataSource)) {
-      const pageData = this.foundation.getCurrentPageData(this.props.dataSource);
-      dataSource = pageData.dataSource;
-      pagination = pageData.pagination;
-    }
+    // if (isNull(dataSource)) {
+    //     const pageData: BasePageData<RecordType> = this.foundation.getCurrentPageData(this.props.dataSource);
+    //     dataSource = pageData.dataSource;
+    //     pagination = pageData.pagination;
+    // }
 
     const props = Object.assign(Object.assign(Object.assign({}, rest), this.state), {
       // props not in rest

package/lib/cjs/typography/util.js

@@ -62,6 +62,7 @@ const getRenderText = function (originEle, rows) {
   const lineHeight = pxToNumber(originStyle.lineHeight);
   const maxHeight = Math.round(lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom)); // Set shadow
 
+  const maxWidth = parseInt(originStyle.width);
   ellipsisContainer.setAttribute('style', originCSS);
   ellipsisContainer.style.position = 'fixed';
   ellipsisContainer.style.left = '0';
@@ -76,7 +77,10 @@ const getRenderText = function (originEle, rows) {
 
 
   function inRange() {
-    // console.log('inrange?', ellipsisContainer.scrollHeight, ellipsisContainer.scrollHeight < maxHeight);
+    if (originStyle.whiteSpace === 'nowrap') {
+      return ellipsisContainer.scrollWidth <= maxWidth;
+    }
+
     return ellipsisContainer.scrollHeight < maxHeight;
   } // ========================= Find match ellipsis content =========================
   // Create origin content holder

package/lib/es/form/group.js

@@ -75,7 +75,7 @@ class FormInputGroup extends Component {
           rest = __rest(_a, ["children", "label", "extraText", "extraTextPosition"]);
 
     const updater = this.context;
-    const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol']);
+    const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol', 'disabled']);
     const labelPosition = this.props.labelPosition || formProps.labelPosition;
     const groupFieldSet = [];
     const inner = React.Children.map(children, child => {
@@ -99,7 +99,9 @@ class FormInputGroup extends Component {
     const appendCol = labelCol && wrapperCol;
     const labelColCls = labelCol ? `${prefix}-col-${labelAlign}` : '';
     const labelContent = this.renderLabel(label, formProps);
-    const inputGroupContent = /*#__PURE__*/React.createElement(InputGroup, Object.assign({}, rest), inner);
+    const inputGroupContent = /*#__PURE__*/React.createElement(InputGroup, Object.assign({
+      disabled: formProps.disabled
+    }, rest), inner);
     const groupErrorContent = /*#__PURE__*/React.createElement(GroupError, {
       fieldSet: groupFieldSet,
       showValidateIcon: formProps.showValidateIcon,

package/lib/es/image/image.d.ts

@@ -29,8 +29,12 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
     get adapter(): ImageAdapter<ImageProps, ImageStates>;
     context: PreviewContextProps;
     foundation: ImageFoundation;
+    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/es/image/image.js

@@ -129,6 +129,7 @@ export default class Image extends BaseComponent {
       previewVisible: false
     };
     this.foundation = new ImageFoundation(this.adapter);
+    this.imgRef = /*#__PURE__*/React.createRef();
   }
 
   get adapter() {
@@ -158,6 +159,25 @@ export default class Image extends BaseComponent {
     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);
   }
@@ -212,7 +232,9 @@ export default class Image extends BaseComponent {
         style: outerStyle,
         className: outerCls,
         onClick: this.handleClick
-      }, /*#__PURE__*/React.createElement("img", Object.assign({}, restProps, {
+      }, /*#__PURE__*/React.createElement("img", Object.assign({
+        ref: this.imgRef
+      }, restProps, {
         src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
         "data-src": src,
         alt: alt,

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

@@ -69,8 +69,8 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
     foundation: PreviewFoundation;
     previewGroupId: string;
     previewRef: React.RefObject<PreviewInner>;
+    previewObserver: IntersectionObserver;
     constructor(props: any);
-    componentDidMount(): void;
     static getDerivedStateFromProps(props: PreviewProps, state: PreviewState): Partial<PreviewState>;
     handleVisibleChange: (newVisible: boolean) => void;
     handleCurrentIndexChange: (index: number) => void;

package/lib/es/image/preview.js

@@ -93,19 +93,7 @@ export default class Preview extends BaseComponent {
       length: 4
     });
     this.previewRef = /*#__PURE__*/React.createRef();
-  }
-
-  get adapter() {
-    return Object.assign({}, super.adapter);
-  }
-
-  componentDidMount() {
-    const {
-      lazyLoadMargin
-    } = this.props;
-    const allElement = document.querySelectorAll(`.${prefixCls}-img`); // use IntersectionObserver to lazy load image
-
-    const observer = new IntersectionObserver(entries => {
+    this.previewObserver = new IntersectionObserver(entries => {
       entries.forEach(item => {
         var _a;
 
@@ -113,14 +101,18 @@ export default class Preview extends BaseComponent {
 
         if (item.isIntersecting && src) {
           item.target.src = src;
-          observer.unobserve(item.target);
+          item.target.removeAttribute("data-src");
+          this.previewObserver.unobserve(item.target);
         }
       });
     }, {
       root: document.querySelector(`#${this.previewGroupId}`),
-      rootMargin: lazyLoadMargin
+      rootMargin: props.lazyLoadMargin
     });
-    allElement.forEach(item => observer.observe(item));
+  }
+
+  get adapter() {
+    return Object.assign({}, super.adapter);
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -165,6 +157,7 @@ export default class Preview extends BaseComponent {
         currentIndex,
         visible,
         lazyLoad,
+        previewObserver: this.previewObserver,
         setCurrentIndex: this.handleCurrentIndexChange,
         handleVisibleChange: this.handleVisibleChange
       }

package/lib/es/image/previewContext.d.ts

@@ -6,6 +6,7 @@ export interface PreviewContextProps {
     titles: ReactNode[];
     currentIndex: number;
     visible: boolean;
+    previewObserver: IntersectionObserver;
     setCurrentIndex: (current: number) => void;
     handleVisibleChange: (visible: boolean, preVisible?: boolean) => void;
 }

package/lib/es/table/Table.js

@@ -1,7 +1,7 @@
+import _isPlainObject from "lodash/isPlainObject";
 import _isObject from "lodash/isObject";
 import _isFunction from "lodash/isFunction";
 import _difference from "lodash/difference";
-import _isNull from "lodash/isNull";
 import _omit from "lodash/omit";
 import _each from "lodash/each";
 import _flattenDeep from "lodash/flattenDeep";
@@ -835,6 +835,9 @@ class Table extends BaseComponent {
     const columns = this.getColumns(props.columns, props.children);
     const cachedflattenColumns = flattenColumns(columns);
     const queries = TableFoundation.initColumnsFilteredValueAndSorterOrder(cloneDeep(cachedflattenColumns));
+    const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(this.props.dataSource, queries);
+    const newPagination = _isPlainObject(this.props.pagination) ? this.props.pagination : {};
+    const pageData = this.foundation.getCurrentPageData(filteredSortedDataSource, newPagination, queries);
     this.state = {
       /**
        * Cached props
@@ -848,11 +851,11 @@ class Table extends BaseComponent {
        * State calculated based on prop
        */
       queries,
-      dataSource: [],
+      dataSource: pageData.dataSource,
       flattenData: [],
       expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
       rowSelection: props.rowSelection ? _isObject(props.rowSelection) ? Object.assign({}, props.rowSelection) : {} : null,
-      pagination: props.pagination && typeof props.pagination === 'object' ? Object.assign({}, props.pagination) : props.pagination || false,
+      pagination: pageData.pagination,
 
       /**
        * Internal state
@@ -1436,12 +1439,11 @@ class Table extends BaseComponent {
      * TODO: After merging issue 1007, you can place it in the constructor to complete
      * The reason is that #1007 exposes the parameters required by getCurrentPageData in the constructor
      */
-
-    if (_isNull(dataSource)) {
-      const pageData = this.foundation.getCurrentPageData(this.props.dataSource);
-      dataSource = pageData.dataSource;
-      pagination = pageData.pagination;
-    }
+    // if (isNull(dataSource)) {
+    //     const pageData: BasePageData<RecordType> = this.foundation.getCurrentPageData(this.props.dataSource);
+    //     dataSource = pageData.dataSource;
+    //     pagination = pageData.pagination;
+    // }
 
     const props = Object.assign(Object.assign(Object.assign({}, rest), this.state), {
       // props not in rest

package/lib/es/typography/util.js

@@ -51,6 +51,7 @@ const getRenderText = function (originEle, rows) {
   const lineHeight = pxToNumber(originStyle.lineHeight);
   const maxHeight = Math.round(lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom)); // Set shadow
 
+  const maxWidth = parseInt(originStyle.width);
   ellipsisContainer.setAttribute('style', originCSS);
   ellipsisContainer.style.position = 'fixed';
   ellipsisContainer.style.left = '0';
@@ -64,7 +65,10 @@ const getRenderText = function (originEle, rows) {
   ReactDOM.render( /*#__PURE__*/React.createElement(React.Fragment, null), ellipsisContainer); // Check if ellipsis in measure div is height enough for content
 
   function inRange() {
-    // console.log('inrange?', ellipsisContainer.scrollHeight, ellipsisContainer.scrollHeight < maxHeight);
+    if (originStyle.whiteSpace === 'nowrap') {
+      return ellipsisContainer.scrollWidth <= maxWidth;
+    }
+
     return ellipsisContainer.scrollHeight < maxHeight;
   } // ========================= Find match ellipsis content =========================
   // Create origin content holder

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.34.0-beta.0",
+    "version": "2.34.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.34.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.34.0-beta.0",
-        "@douyinfe/semi-foundation": "2.34.0-beta.0",
-        "@douyinfe/semi-icons": "2.34.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.34.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.34.0-beta.0",
+        "@douyinfe/semi-animation": "2.34.0",
+        "@douyinfe/semi-animation-react": "2.34.0",
+        "@douyinfe/semi-foundation": "2.34.0",
+        "@douyinfe/semi-icons": "2.34.0",
+        "@douyinfe/semi-illustrations": "2.34.0",
+        "@douyinfe/semi-theme-default": "2.34.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "66e287fcec3fff41839dfe30529b746ceee76aa5",
+    "gitHead": "2b01016b32a9da9a7e50424235dd5fc5c5fae3c2",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",