@douyinfe/semi-ui 2.27.1 → 2.27.2

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

@@ -27,12 +27,13 @@ declare class Portal extends PureComponent<PortalProps, PortalState> {
     };
     el: HTMLElement;
     context: ContextValue;
-    constructor(props: PortalProps);
+    constructor(props: PortalProps, context: ContextValue);
     componentDidMount(): void;
+    initContainer: (context: ContextValue, catchError?: boolean) => HTMLElement;
     componentDidUpdate(prevProps: PortalProps): void;
     componentWillUnmount(): void;
     addStyle: (style?: {}) => void;
-    addClass: (prefixCls: string, ...classNames: string[]) => void;
+    addClass: (prefixCls: string, context?: ContextValue, ...classNames: string[]) => void;
     render(): React.ReactPortal;
 }
 export default Portal;

package/lib/cjs/_portal/index.js

@@ -24,12 +24,46 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const defaultGetContainer = () => document.body;
 
 class Portal extends _react.PureComponent {
-  constructor(props) {
+  constructor(props, context) {
     var _this;
 
     super(props);
     _this = this;
 
+    this.initContainer = function (context) {
+      let catchError = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      var _a, _b;
+
+      try {
+        let container = undefined;
+
+        if (!_this.el) {
+          _this.el = document.createElement('div');
+        }
+
+        if (!((_a = _this.state) === null || _a === void 0 ? void 0 : _a.container)) {
+          _this.el = document.createElement('div');
+          const getContainer = _this.props.getPopupContainer || context.getPopupContainer || defaultGetContainer;
+          const portalContainer = getContainer();
+          portalContainer.appendChild(_this.el);
+
+          _this.addStyle(_this.props.style);
+
+          _this.addClass(_this.props.prefixCls, context, _this.props.className);
+
+          container = portalContainer;
+          return container;
+        }
+      } catch (e) {
+        if (!catchError) {
+          throw e;
+        }
+      }
+
+      return (_b = _this.state) === null || _b === void 0 ? void 0 : _b.container;
+    };
+
     this.addStyle = function () {
       let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -41,12 +75,13 @@ class Portal extends _react.PureComponent {
     };
 
     this.addClass = function (prefixCls) {
+      let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.context;
       const {
         direction
-      } = _this.context;
+      } = context;
 
-      for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        classNames[_key - 1] = arguments[_key];
+      for (var _len = arguments.length, classNames = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        classNames[_key - 2] = arguments[_key];
       }
 
       const cls = (0, _classnames.default)(prefixCls, ...classNames, {
@@ -58,36 +93,15 @@ class Portal extends _react.PureComponent {
       }
     };
 
-    try {
-      this.el = document.createElement('div');
-    } catch (e) {}
-
     this.state = {
-      container: undefined
+      container: this.initContainer(context, true)
     };
   }
 
   componentDidMount() {
-    if (!this.el) {
-      this.el = document.createElement('div');
-    }
+    const container = this.initContainer(this.context);
 
-    const {
-      state,
-      props,
-      context
-    } = this;
-    const getContainer = props.getPopupContainer || context.getPopupContainer || defaultGetContainer;
-    const container = getContainer();
-
-    if (container !== state.container) {
-      // const computedStyle = window.getComputedStyle(container);
-      // if (computedStyle.position !== 'relative') {
-      //    container.style.position = 'relative';
-      // }
-      container.appendChild(this.el);
-      this.addStyle(props.style);
-      this.addClass(props.prefixCls, props.className);
+    if (container !== this.state.container) {
       this.setState({
         container
       });

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

@@ -27,12 +27,13 @@ declare class Portal extends PureComponent<PortalProps, PortalState> {
     };
     el: HTMLElement;
     context: ContextValue;
-    constructor(props: PortalProps);
+    constructor(props: PortalProps, context: ContextValue);
     componentDidMount(): void;
+    initContainer: (context: ContextValue, catchError?: boolean) => HTMLElement;
     componentDidUpdate(prevProps: PortalProps): void;
     componentWillUnmount(): void;
     addStyle: (style?: {}) => void;
-    addClass: (prefixCls: string, ...classNames: string[]) => void;
+    addClass: (prefixCls: string, context?: ContextValue, ...classNames: string[]) => void;
     render(): React.ReactPortal;
 }
 export default Portal;

package/lib/es/_portal/index.js

@@ -9,12 +9,46 @@ import '@douyinfe/semi-foundation/lib/es/_portal/portal.css';
 const defaultGetContainer = () => document.body;
 
 class Portal extends PureComponent {
-  constructor(props) {
+  constructor(props, context) {
     var _this;
 
     super(props);
     _this = this;
 
+    this.initContainer = function (context) {
+      let catchError = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      var _a, _b;
+
+      try {
+        let container = undefined;
+
+        if (!_this.el) {
+          _this.el = document.createElement('div');
+        }
+
+        if (!((_a = _this.state) === null || _a === void 0 ? void 0 : _a.container)) {
+          _this.el = document.createElement('div');
+          const getContainer = _this.props.getPopupContainer || context.getPopupContainer || defaultGetContainer;
+          const portalContainer = getContainer();
+          portalContainer.appendChild(_this.el);
+
+          _this.addStyle(_this.props.style);
+
+          _this.addClass(_this.props.prefixCls, context, _this.props.className);
+
+          container = portalContainer;
+          return container;
+        }
+      } catch (e) {
+        if (!catchError) {
+          throw e;
+        }
+      }
+
+      return (_b = _this.state) === null || _b === void 0 ? void 0 : _b.container;
+    };
+
     this.addStyle = function () {
       let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -26,12 +60,13 @@ class Portal extends PureComponent {
     };
 
     this.addClass = function (prefixCls) {
+      let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.context;
       const {
         direction
-      } = _this.context;
+      } = context;
 
-      for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        classNames[_key - 1] = arguments[_key];
+      for (var _len = arguments.length, classNames = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        classNames[_key - 2] = arguments[_key];
       }
 
       const cls = classnames(prefixCls, ...classNames, {
@@ -43,36 +78,15 @@ class Portal extends PureComponent {
       }
     };
 
-    try {
-      this.el = document.createElement('div');
-    } catch (e) {}
-
     this.state = {
-      container: undefined
+      container: this.initContainer(context, true)
     };
   }
 
   componentDidMount() {
-    if (!this.el) {
-      this.el = document.createElement('div');
-    }
+    const container = this.initContainer(this.context);
 
-    const {
-      state,
-      props,
-      context
-    } = this;
-    const getContainer = props.getPopupContainer || context.getPopupContainer || defaultGetContainer;
-    const container = getContainer();
-
-    if (container !== state.container) {
-      // const computedStyle = window.getComputedStyle(container);
-      // if (computedStyle.position !== 'relative') {
-      //    container.style.position = 'relative';
-      // }
-      container.appendChild(this.el);
-      this.addStyle(props.style);
-      this.addClass(props.prefixCls, props.className);
+    if (container !== this.state.container) {
       this.setState({
         container
       });

package/package.json

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