How to use dom-lib - 10 common examples

let data = {
            modals: [modal],
            //right now only the first modal of a container will have its classes applied
            classes: className ? className.split(/\s+/) : [],
            //we are only interested in the actual `style` here becasue we will override it
            style: {
                overflow: container.style.overflow,
                paddingRight: container.style.paddingRight
            }
        };

        let style = {
            overflow: 'hidden'
        };

        data.overflowing = isOverflowing(container);

        if (data.overflowing) {
            // use computed style, here to get the real padding
            // to add our scrollbar width
            style.paddingRight = parseInt(addStyle(container, 'paddingRight') || 0, 10) + getScrollbarSize() + 'px';
        }

        addStyle(container, style);

        data.classes.forEach(addClass.bind(null, container));

        this.containers.push(container);
        this.data.push(data);

        return modalIdx;
    }

const bodyStyles: React.CSSProperties = {
      overflow: 'auto'
    };

    if (node) {
      // default margin
      let headerHeight = 46;
      let footerHeight = 46;
      let contentHeight = 30;

      const headerDOM = node.querySelector(`.${this.addPrefix('header')}`);
      const footerDOM = node.querySelector(`.${this.addPrefix('footer')}`);
      const contentDOM = node.querySelector(`.${this.addPrefix('content')}`);

      headerHeight = headerDOM ? getHeight(headerDOM) + headerHeight : headerHeight;
      footerHeight = footerDOM ? getHeight(footerDOM) + headerHeight : headerHeight;
      contentHeight = contentDOM ? getHeight(contentDOM) + contentHeight : contentHeight;

      if (drawer) {
        bodyStyles.height = contentHeight - (headerHeight + footerHeight);
      } else {
        /**
         * Header height + Footer height + Dialog margin
         */
        const excludeHeight = headerHeight + footerHeight + 60;
        const bodyHeight = getHeight(window) - excludeHeight;
        const maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
        bodyStyles.maxHeight = maxHeight;
      }
    }

overflow: 'auto'
    };

    if (node) {
      // default margin
      let headerHeight = 46;
      let footerHeight = 46;
      let contentHeight = 30;

      const headerDOM = node.querySelector(`.${this.addPrefix('header')}`);
      const footerDOM = node.querySelector(`.${this.addPrefix('footer')}`);
      const contentDOM = node.querySelector(`.${this.addPrefix('content')}`);

      headerHeight = headerDOM ? getHeight(headerDOM) + headerHeight : headerHeight;
      footerHeight = footerDOM ? getHeight(footerDOM) + headerHeight : headerHeight;
      contentHeight = contentDOM ? getHeight(contentDOM) + contentHeight : contentHeight;

      if (drawer) {
        bodyStyles.height = contentHeight - (headerHeight + footerHeight);
      } else {
        /**
         * Header height + Footer height + Dialog margin
         */
        const excludeHeight = headerHeight + footerHeight + 60;
        const bodyHeight = getHeight(window) - excludeHeight;
        const maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
        bodyStyles.maxHeight = maxHeight;
      }
    }

    styles.bodyStyles = bodyStyles;

const bodyStyles: React.CSSProperties = {
      overflow: 'auto'
    };

    if (node) {
      // default margin
      let headerHeight = 46;
      let footerHeight = 46;
      let contentHeight = 30;

      const headerDOM = node.querySelector(`.${this.addPrefix('header')}`);
      const footerDOM = node.querySelector(`.${this.addPrefix('footer')}`);
      const contentDOM = node.querySelector(`.${this.addPrefix('content')}`);

      headerHeight = headerDOM ? getHeight(headerDOM) + headerHeight : headerHeight;
      footerHeight = footerDOM ? getHeight(footerDOM) + headerHeight : headerHeight;
      contentHeight = contentDOM ? getHeight(contentDOM) + contentHeight : contentHeight;

      if (drawer) {
        bodyStyles.height = contentHeight - (headerHeight + footerHeight);
      } else {
        /**
         * Header height + Footer height + Dialog margin
         */
        const excludeHeight = headerHeight + footerHeight + 60;
        const bodyHeight = getHeight(window) - excludeHeight;
        const maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
        bodyStyles.maxHeight = maxHeight;
      }
    }

    styles.bodyStyles = bodyStyles;

style: {
                overflow: container.style.overflow,
                paddingRight: container.style.paddingRight
            }
        };

        let style = {
            overflow: 'hidden'
        };

        data.overflowing = isOverflowing(container);

        if (data.overflowing) {
            // use computed style, here to get the real padding
            // to add our scrollbar width
            style.paddingRight = parseInt(addStyle(container, 'paddingRight') || 0, 10) + getScrollbarSize() + 'px';
        }

        addStyle(container, style);

        data.classes.forEach(addClass.bind(null, container));

        this.containers.push(container);
        this.data.push(data);

        return modalIdx;
    }

}
        };

        let style = {
            overflow: 'hidden'
        };

        data.overflowing = isOverflowing(container);

        if (data.overflowing) {
            // use computed style, here to get the real padding
            // to add our scrollbar width
            style.paddingRight = parseInt(addStyle(container, 'paddingRight') || 0, 10) + getScrollbarSize() + 'px';
        }

        addStyle(container, style);

        data.classes.forEach(addClass.bind(null, container));

        this.containers.push(container);
        this.data.push(data);

        return modalIdx;
    }

calculateTableContentWidth(prevProps: Props) {
    const table = this.table;
    const row = table.querySelector(`.${this.addPrefix('row')}:not(.virtualized)`);
    const contentWidth = row ? getWidth(row) : 0;

    this.setState({ contentWidth });
    // 这里 -SCROLLBAR_WIDTH 是为了让滚动条不挡住内容部分
    this.minScrollX = -(contentWidth - this.state.width) - SCROLLBAR_WIDTH;

    /**
     * 1.判断 Table 列数是否发生变化
     * 2.判断 Table 内容区域是否宽度有变化
     *
     *
     * 满足 1 和 2 则更新横向滚动条位置
     */

    if (
      _.flatten(this.props.children).length !== _.flatten(prevProps.children).length &&
      this.state.contentWidth !== contentWidth

getStyles(dialogElement?: HTMLElement) {
    const { container, overflow, drawer } = this.props;
    const node: any = dialogElement || this.dialogRef.current;
    const doc: any = ownerDocument(node);
    const scrollHeight = node ? node.scrollHeight : 0;

    const bodyIsOverflowing = isOverflowing(container || doc.body);
    const modalIsOverflowing = scrollHeight > doc.documentElement.clientHeight;

    const styles: {
      modalStyles: React.CSSProperties;
      bodyStyles: React.CSSProperties;
    } = {
      modalStyles: {
        [isRTL() ? 'paddingLeft' : 'paddingRight']:
          bodyIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : 0,
        [isRTL() ? 'paddingRight' : 'paddingLeft']:
          !bodyIsOverflowing && modalIsOverflowing ? getScrollbarSize() : 0
      },
      bodyStyles: {}
    };

    if (!overflow) {
      return styles;
    }

    const bodyStyles: React.CSSProperties = {
      overflow: 'auto'
    };

    if (node) {
      // default margin

const node: any = dialogElement || this.dialogRef.current;
    const doc: any = ownerDocument(node);
    const scrollHeight = node ? node.scrollHeight : 0;

    const bodyIsOverflowing = isOverflowing(container || doc.body);
    const modalIsOverflowing = scrollHeight > doc.documentElement.clientHeight;

    const styles: {
      modalStyles: React.CSSProperties;
      bodyStyles: React.CSSProperties;
    } = {
      modalStyles: {
        [isRTL() ? 'paddingLeft' : 'paddingRight']:
          bodyIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : 0,
        [isRTL() ? 'paddingRight' : 'paddingLeft']:
          !bodyIsOverflowing && modalIsOverflowing ? getScrollbarSize() : 0
      },
      bodyStyles: {}
    };

    if (!overflow) {
      return styles;
    }

    const bodyStyles: React.CSSProperties = {
      overflow: 'auto'
    };

    if (node) {
      // default margin
      let headerHeight = 46;
      let footerHeight = 46;

classPrefix,
      onSelect,
      layer,
      disabled,
      uncheckable,
      nodeData,
      checkState
    } = this.props;

    if (disabled || uncheckable) {
      return;
    }

    // 如果点击的是展开 icon 就 return
    if (event.target instanceof HTMLElement) {
      if (hasClass(event.target.parentNode, `${classPrefix}-node-expand-icon-wrapper`)) {
        return;
      }
    }

    let isChecked = false;
    if (checkState === CHECK_STATE.UNCHECK || checkState === CHECK_STATE.INDETERMINATE) {
      isChecked = true;
    }

    if (checkState === CHECK_STATE.CHECK) {
      isChecked = false;
    }
    nodeData.check = isChecked;
    onSelect && onSelect(nodeData, layer, event);
  };