@cainiaofe/cn-ui-layout/lib/common/setter/column-select-setter/index.js

- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
require("./index.scss");
var _window$CNUI;
var CnTooltip = (_window$CNUI = window.CNUI) === null || _window$CNUI === void 0 ? void 0 : _window$CNUI.CnTooltip;
/**
 * 自由布局中选择有几列的setter
 * @param props
 * @constructor
 */
var ColumnSelectSetter = exports["default"] = /*#__PURE__*/function (_React$Component) {
  function ColumnSelectSetter(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.originValue = void 0;
    _this.select = function (index) {
      var onChange = _this.props.onChange;
      if (typeof index === 'number') {
        _this.originValue = index;
        onChange === null || onChange === void 0 ? void 0 : onChange(index);
      }
    };
    _this.mouseenter = function (index) {
      var onChange = _this.props.onChange;
      _this.setState({
        column: index
      });
      onChange === null || onChange === void 0 ? void 0 : onChange(index);
    };
    _this.mouseleave = function () {
      var onChange = _this.props.onChange;
      if (typeof _this.originValue === 'number') {
        onChange === null || onChange === void 0 ? void 0 : onChange(_this.originValue);
      }
    };
    var realValue = Number(_this.props.value);
    _this.state = {
      column: realValue
    };
    _this.originValue = realValue;
    return _this;
  }
  (0, _inheritsLoose2["default"])(ColumnSelectSetter, _React$Component);
  ColumnSelectSetter.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
    if (Number(nextProps.value) !== prevState.column) {
      return {
        column: Number(nextProps.value)
      };
    }
    return null; // 不需要更新 state
  };
  var _proto = ColumnSelectSetter.prototype;
  _proto.render = function render() {
    var _this2 = this;
    var column = this.state.column;
    return /*#__PURE__*/_react["default"].createElement("div", {
      onMouseLeave: this.mouseleave,
      className: "cn-column-select-setter"
    }, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(function (item, index) {
      var style = {};
      if (column > index) {
        style.backgroundColor = '#005be5';
      }
      var dom = /*#__PURE__*/_react["default"].createElement("div", {
        onMouseEnter: _this2.mouseenter.bind(_this2, index + 1),
        onClick: _this2.select.bind(_this2, index + 1),
        className: "cn-column-select-setter-item",
        style: style
      });
      if (CnTooltip) {
        return /*#__PURE__*/_react["default"].createElement(CnTooltip, {
          trigger: dom
        }, index + 1);
      } else {
        return dom;
      }
    }));
  };
  return ColumnSelectSetter;
}(_react["default"].Component);
ColumnSelectSetter.displayName = 'ColumnSelectSetter';
module.exports = exports.default;
module.exports.default = exports.default;