shineout/es/Table/resizable.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import React from 'react';
import immer from 'immer';
export default (function (Table) {
  return (
    /*#__PURE__*/
    function (_React$Component) {
      _inheritsLoose(_class, _React$Component);

      function _class(props) {
        var _this;

        _this = _React$Component.call(this, props) || this;
        _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_assertThisInitialized(_this)));
        _this.state = {
          columns: props.columns,
          delta: 0
        };
        return _this;
      }

      var _proto = _class.prototype;

      _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
        var _this2 = this;

        var prevColumns = prevProps.columns;
        var _this$props = this.props,
            columns = _this$props.columns,
            onColumnResize = _this$props.onColumnResize;

        if (prevColumns !== columns) {
          if (prevColumns.length !== columns.length) {
            // eslint-disable-next-line react/no-did-update-set-state
            this.setState({
              columns: columns
            });
          } else {
            var widthed = onColumnResize ? columns : immer(columns, function (draft) {
              draft.forEach(function (column, index) {
                column.width = _this2.state.columns[index].width;
              });
            }); // eslint-disable-next-line react/no-did-update-set-state

            this.setState({
              columns: widthed
            });
          }
        }
      };

      _proto.getWidth = function getWidth() {
        var width = this.props.width;
        var columns = this.state.columns;

        if (typeof width === 'number') {
          var sum = columns.reduce(function (s, col) {
            return s + (col.width || 0);
          }, 0);
          var w = width + this.state.delta;
          return w > sum ? w : sum;
        }

        return width;
      };

      _proto.handleResize = function handleResize(index, width, colgroup) {
        if (colgroup === undefined) return;
        var onColumnResize = this.props.onColumnResize;
        var changed = immer(this.state, function (draft) {
          var column = draft.columns[index]; // @ts-ignore

          draft.delta += parseFloat(width - (column.width || colgroup[index] || 0));
          colgroup[index] = width;
          draft.columns.forEach(function (col, i) {
            var w = colgroup[i];
            if (w) col.width = w;
          });
        });

        if (onColumnResize) {
          onColumnResize(changed.columns);
          return;
        }

        this.setState(changed);
      };

      _proto.render = function render() {
        var columns = this.state.columns;

        var _this$props2 = this.props,
            onColumnResize = _this$props2.onColumnResize,
            other = _objectWithoutPropertiesLoose(_this$props2, ["onColumnResize"]);

        var width = this.getWidth();
        return React.createElement(Table, _extends({}, other, {
          width: width,
          columns: columns,
          onResize: this.handleResize
        }));
      };

      return _class;
    }(React.Component)
  );
});