@ttk/component/es/columnsSetting/index.js

ttk组件库

import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import { _ as _asyncToGenerator, r as regenerator } from '../index-8cf76f53.js';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default, { PureComponent } from 'react';
import classNames from 'classnames';
import isequal from 'lodash.isequal';
import clonedeep from 'lodash.clonedeep';
import Button from '../button';
import Tabs from '../tabs';
import Checkbox from '../checkbox';
import Icon from '../icon';
import Input from '../input';
import '../_commonjsHelpers-471920d6.js';

function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var ItemOption = /*#__PURE__*/function (_React$Component) {
  _inherits(ItemOption, _React$Component);

  var _super = _createSuper$1(ItemOption);

  function ItemOption(props) {
    var _this;

    _classCallCheck(this, ItemOption);

    _this = _super.call(this, props);

    _this.checkAllChecked = function (option, checkedKey) {
      if (!option) {
        return false;
      }

      var flag = true;
      option.forEach(function (item) {
        if (!item[checkedKey]) {
          flag = false;
        }
      });
      return flag;
    };

    _this.checkIndeterminate = function () {
      var _this$state = _this.state,
          option = _this$state.option,
          checkAll = _this$state.checkAll;
      var checkedKey = _this.props.checkedKey;

      if (checkAll || !option) {
        return false;
      }

      var flag = false;
      option.forEach(function (item) {
        if (item[checkedKey]) {
          flag = true;
        }
      });
      return flag;
    };

    _this.componentWillUnmount = function () {
      if (window.removeEventListener) {
        window.removeEventListener('click', _this.winClick, false);
      } else if (window.detachEvent) {
        window.detachEvent('click', _this.winClick);
      } else {
        window.onclick = undefined;
      }
    };

    _this.componentDidMount = function () {
      if (window.addEventListener) {
        window.addEventListener('click', _this.winClick, false);
      } else if (window.attachEvent) {
        window.attachEvent('click', _this.winClick);
      } else {
        window.onclick = _this.winClick;
      }
    };

    _this.checkInputHidden = function (className) {
      if (!className) {
        return true;
      } else {
        return !className.includes('ttk-ColumnsSetting-item-input') && !className.includes('ttk-ColumnsSetting-item-action-edit');
      }
    };

    _this.winClick = function (e) {
      if (e && e.target && _this.state.editingKey && _this.checkInputHidden(e.target.className)) {
        _this.setState({
          editingKey: null
        });
      }
    };

    _this.itemClick = function (key, e) {
      var _this$props = _this.props,
          singleKey = _this$props.singleKey,
          checkedKey = _this$props.checkedKey,
          itemClick = _this$props.itemClick;
      var option = _this.state.option;
      var index = option.findIndex(function (item) {
        return item[singleKey] == key;
      });

      if (index > -1) {
        option[index][checkedKey] = e.target.checked;

        _this.setState({
          option: option,
          checkAll: _this.checkAllChecked(option, checkedKey)
        });

        itemClick && itemClick(option, option[index]);
      }
    };

    _this.exchangeArritemPosition = function (arr, x, y) {
      var a = arr[x],
          b = arr[y];
      arr[y] = a;
      arr[x] = b;
      return arr;
    };

    _this.arrowUp = function (key) {
      var singleKey = _this.props.singleKey;
      var option = _this.state.option;
      var index = option.findIndex(function (item) {
        return item[singleKey] == key;
      });

      if (index > 0) {
        _this.setState({
          option: _this.exchangeArritemPosition(option, index, index - 1)
        });
      }
    };

    _this.arrowDown = function (key) {
      var singleKey = _this.props.singleKey;
      var option = _this.state.option;
      var index = option.findIndex(function (item) {
        return item[singleKey] == key;
      });

      if (index < option.length - 1) {
        _this.setState({
          option: _this.exchangeArritemPosition(option, index, index + 1)
        });
      }
    };

    _this.editClick = function (key) {
      _this.setState({
        editingKey: key
      });
    };

    _this.inputEdit = function (key, e) {
      var _this$props2 = _this.props,
          singleKey = _this$props2.singleKey,
          labelKey = _this$props2.labelKey;
      var option = _this.state.option;
      var index = option.findIndex(function (item) {
        return item[singleKey] == key;
      });
      option[index][labelKey] = e.target.value;

      _this.setState({
        option: option
      });
    };

    _this.renderItem = function (arr) {
      var _this$props3 = _this.props,
          itemClassName = _this$props3.itemClassName,
          labelKey = _this$props3.labelKey,
          checkedKey = _this$props3.checkedKey,
          singleKey = _this$props3.singleKey,
          sort = _this$props3.sort,
          editName = _this$props3.editName;
      var editingKey = _this.state.editingKey;
      var className = classNames(_defineProperty({
        'ttk-ColumnsSetting-item': true
      }, itemClassName, !!itemClassName));
      return arr.map(function (item) {
        return /*#__PURE__*/React__default.createElement("div", {
          className: className,
          key: item[singleKey]
        }, /*#__PURE__*/React__default.createElement("div", {
          className: "ttk-ColumnsSetting-item-container"
        }, editingKey == item[singleKey] ? /*#__PURE__*/React__default.createElement(Input, {
          className: "ttk-ColumnsSetting-item-input",
          value: item[labelKey],
          onChange: function onChange(e) {
            return _this.inputEdit(item[singleKey], e);
          }
        }) : /*#__PURE__*/React__default.createElement(Checkbox, {
          checked: item[checkedKey],
          disabled: item.isMustSelect == true ? true : false,
          onChange: function onChange(e) {
            return _this.itemClick(item[singleKey], e);
          }
        }, item[labelKey])), /*#__PURE__*/React__default.createElement("div", {
          className: "ttk-ColumnsSetting-item-action",
          style: {
            textAlign: "right"
          }
        }, sort ? /*#__PURE__*/React__default.createElement(Icon, {
          type: "arrow-up",
          title: "\u4E0A\u79FB",
          onClick: function onClick() {
            return _this.arrowUp(item[singleKey]);
          }
        }) : null, sort ? /*#__PURE__*/React__default.createElement(Icon, {
          type: "arrow-down",
          title: "\u4E0B\u79FB",
          onClick: function onClick() {
            return _this.arrowDown(item[singleKey]);
          }
        }) : null, editName ? /*#__PURE__*/React__default.createElement(Icon, {
          className: "ttk-ColumnsSetting-item-action-edit",
          fontFamily: "edficon",
          type: "bianji",
          title: "\u7F16\u8F91",
          onClick: function onClick() {
            return _this.editClick(item[singleKey]);
          }
        }) : null));
      });
    };

    _this.getValue = function () {
      return clonedeep(_this.state.option);
    };

    _this.onCheckAllChange = function (e) {
      var option = _this.state.option;
      var checkedKey = _this.props.checkedKey;
      var flag = false;

      if (!option) {
        option = [];
      }

      option.forEach(function (item) {
        if (!item[checkedKey]) {
          flag = true;
        }
      });
      var value;

      if (flag) {
        value = option.map(function (item) {
          return _objectSpread$1(_objectSpread$1({}, item), {}, _defineProperty({}, checkedKey, true));
        });
      } else {
        value = option.map(function (item) {
          return _objectSpread$1(_objectSpread$1({}, item), {}, _defineProperty({}, checkedKey, false));
        });
      }

      _this.setState({
        option: value,
        checkAll: flag
      });
    };

    _this.state = {
      option: clonedeep(props.option) || [],
      label: '',
      editingKey: null,
      checkAll: _this.checkAllChecked(props.option, props.checkedKey)
    };
    return _this;
  }

  _createClass(ItemOption, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (!isequal(nextProps, this.props)) {
        this.setState({
          option: clonedeep(nextProps.option) || [],
          checkAll: this.checkAllChecked(nextProps.option, nextProps.checkedKey)
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var props = this.props;
      var option = this.state.option;
      classNames(_defineProperty({
        'ttk-ColumnsSetting': true
      }, props.className, !!props.className));
      return /*#__PURE__*/React__default.createElement("div", {
        className: "ttk-ColumnsSetting-container"
      }, /*#__PURE__*/React__default.createElement(Checkbox, {
        indeterminate: this.checkIndeterminate(),
        onChange: this.onCheckAllChange,
        checked: this.state.checkAll
      }, "\u5168\u9009"), this.renderItem(option));
    }
  }]);

  return ItemOption;
}(React__default.Component);

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
Tabs.TabPane;

var ColumnsSetting = /*#__PURE__*/function (_PureComponent) {
  _inherits(ColumnsSetting, _PureComponent);

  var _super = _createSuper(ColumnsSetting);

  function ColumnsSetting(_props) {
    var _this;

    _classCallCheck(this, ColumnsSetting);

    _this = _super.call(this, _props);
    _this.onOk = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
      var option, value;
      return regenerator.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              // const { confirmClick } =  this.props
              option = _this.state.option;
              value = option.map(function (item) {
                if (_this.childRef[item.key]) {
                  return _objectSpread(_objectSpread({}, item), {}, {
                    option: _this.childRef[item.key].getValue()
                  });
                }

                return item;
              });

              _this.setState({
                option: value
              });

              return _context.abrupt("return", {
                type: 'confirm',
                option: clonedeep(value)
              });

            case 4:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
    _this.onCancel = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
      return regenerator.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    _this.getProps = function (props) {
      var option = props.option,
          singleKey = props.singleKey,
          checkedKey = props.checkedKey,
          labelKey = props.labelKey,
          sort = props.sort,
          editName = props.editName,
          itemClassName = props.itemClassName;
      return {
        option: option,
        singleKey: singleKey,
        checkedKey: checkedKey,
        labelKey: labelKey,
        sort: sort,
        editName: editName,
        itemClassName: itemClassName
      };
    };

    _this.renderItem = function (arr) {
      var _this$props = _this.props,
          itemClassName = _this$props.itemClassName,
          labelKey = _this$props.labelKey,
          checkedKey = _this$props.checkedKey,
          singleKey = _this$props.singleKey,
          sort = _this$props.sort,
          editName = _this$props.editName;
      _this.state.editingKey;
      classNames(_defineProperty({
        'ttk-ColumnsSetting-item': true
      }, itemClassName, !!itemClassName));
      var width = 100 / arr.length;
      var childArr = arr.map(function (item) {
        var key = item.key ? item.key : item.name;
        return /*#__PURE__*/React__default.createElement("div", {
          key: key,
          style: {
            width: "".concat(width, "%")
          },
          className: "ttk-ColumnsSetting-modal-item"
        }, /*#__PURE__*/React__default.createElement("div", {
          className: "ttk-ColumnsSetting-modal-item-tit"
        }, item.name), /*#__PURE__*/React__default.createElement(ItemOption, {
          num: _this.state.num,
          ref: function ref(child) {
            return _this.childRef[key] = child;
          },
          option: item.option,
          labelKey: labelKey,
          checkedKey: checkedKey,
          singleKey: singleKey,
          sort: sort,
          editName: editName,
          itemClassName: itemClassName
        }));
      });
      return /*#__PURE__*/React__default.createElement("div", {
        className: "ttk-ColumnsSetting-modal"
      }, /*#__PURE__*/React__default.createElement("span", {
        className: "ttk-ColumnsSetting-modal-line"
      }), childArr);
    };

    _this.resetClick = function () {
      var _this$props2 = _this.props,
          option = _this$props2.option,
          resetClick = _this$props2.resetClick;

      _this.setState({
        option: clonedeep(option)
      });

      if (_this.props.closeModal) {
        return _this.props.closeModal({
          type: 'reset',
          option: clonedeep(_this.props.option)
        });
      }

      return resetClick && resetClick();
    };

    _this.confirmClick = function () {
      var confirmClick = _this.props.confirmClick;
      var option = _this.state.option;
      var value = option.map(function (item) {
        var key = item.key ? item.key : item.name;

        if (_this.childRef[key]) {
          return _objectSpread(_objectSpread({}, item), {}, {
            option: _this.childRef[key].getValue()
          });
        }

        return item;
      });

      _this.setState({
        option: value
      });

      if (_this.props.closeModal) {
        return _this.props.closeModal({
          type: 'confirm',
          option: clonedeep(value)
        });
      }

      return confirmClick && confirmClick(value);
    };

    _this.cancelClick = function () {
      var _this$props3 = _this.props,
          cancelClick = _this$props3.cancelClick,
          option = _this$props3.option;

      _this.setState({
        option: clonedeep(option),
        num: Math.random()
      });

      if (_this.props.closeModal) {
        return _this.props.closeModal({
          type: 'cancel',
          option: clonedeep(_this.props.option)
        });
      }

      return cancelClick && cancelClick();
    };

    _this.state = {
      option: clonedeep(_props.option) || [],
      num: 0 //该字段的作用是itemoption组件重新实例（）。

    };
    _this.childRef = {};

    if (_props.setOkListener) {
      _props.setOkListener(_this.onOk);
    }

    if (_props.setCancelLister) {
      _props.setCancelLister(_this.onCancel);
    }

    return _this;
  }

  _createClass(ColumnsSetting, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var nextOption = this.getProps(nextProps);
      var preOption = this.getProps(this.props);

      if (!isequal(nextOption, preOption)) {
        this.setState({
          option: clonedeep(nextProps.option) || []
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var props = this.props;
      var option = this.state.option;
      var className = classNames(_defineProperty({
        'ttk-ColumnsSetting': true
      }, props.className, !!props.className));
      return /*#__PURE__*/React__default.createElement("div", {
        className: className,
        style: {
          paddingBottom: 0,
          paddingTop: 0
        }
      }, /*#__PURE__*/React__default.createElement("div", {
        className: "ttk-ColumnsSetting-container"
      }, this.renderItem(option)), /*#__PURE__*/React__default.createElement("div", {
        className: "ttk-ColumnsSetting-footer",
        style: {
          marginTop: 12
        }
      }, /*#__PURE__*/React__default.createElement("span", {
        className: "ttk-ColumnsSetting-footer-line"
      }), /*#__PURE__*/React__default.createElement(Button, {
        style: {
          width: 60
        },
        onClick: this.cancelClick
      }, "\u53D6\u6D88"), /*#__PURE__*/React__default.createElement(Button, {
        style: {
          width: 60
        },
        onClick: this.resetClick
      }, "\u91CD\u7F6E"), /*#__PURE__*/React__default.createElement(Button, {
        style: {
          width: 60
        },
        type: "primary",
        onClick: this.confirmClick
      }, "\u786E\u5B9A")) );
    }
  }]);

  return ColumnsSetting;
}(PureComponent);

export { ColumnsSetting as default };