@riil-frontend/component-page-creater/lib/components/uicbb-container/ColEdit.js

page creater components,include components list,component attribute panel and page canvas

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _box = _interopRequireDefault(require("@alifd/next/lib/box"));

var _button = _interopRequireDefault(require("@alifd/next/lib/button"));

var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));

var _select = _interopRequireDefault(require("@alifd/next/lib/select"));

var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));

var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

require("./ColEdit.scss");

var ColEdit = function ColEdit(props) {
  var onChange = props.onChange,
      value = props.value,
      validator = props.validator,
      other = (0, _objectWithoutPropertiesLoose2["default"])(props, ["onChange", "value", "validator"]);

  var onChangeInner = function onChangeInner(newValue) {
    onChange(newValue);
  };

  var onInputChange = function onInputChange(val, index) {
    var newValue = value.map(function (item, idx) {
      if (index === idx) {
        return (0, _extends2["default"])({}, item, {
          span: val
        });
      } else {
        return item;
      }
    });
    onChangeInner(newValue);
  };

  var addOne = function addOne() {
    var newOne = {
      span: 6,
      direction: 'row',
      widgets: []
    };
    onChangeInner(averageCol([].concat(value, [newOne])));
  };

  var deleteOne = function deleteOne(index) {
    _dialog["default"].confirm({
      content: '删除列会同时删除内部组件，是否继续？',
      onOk: function onOk() {
        onChangeInner(averageCol(value.filter(function (item, idx) {
          return idx != index;
        })));
      }
    });
  };

  var onSelectChange = function onSelectChange(val, index) {
    var newValue = value.map(function (item, idx) {
      if (index === idx) {
        return (0, _extends2["default"])({}, item, {
          direction: val
        });
      } else {
        return item;
      }
    });
    onChangeInner(newValue);
  };
  /**
   * 均分栅格方法
   * @param {array} val
   * @returns
   */


  var averageCol = function averageCol(val) {
    var len = val.length;

    if (len === 5) {
      return val.map(function (item, index) {
        if (index === 4) {
          return (0, _extends2["default"])({}, item, {
            span: 4
          });
        } else {
          return (0, _extends2["default"])({}, item, {
            span: 5
          });
        }
      });
    } else {
      return val.map(function (item) {
        return (0, _extends2["default"])({}, item, {
          span: 24 / len
        });
      });
    }
  };

  var addBtnDisabled = value.length >= 6;
  var delBtnDisabled = value.length === 1;
  return /*#__PURE__*/_react["default"].createElement(_box["default"], {
    direction: "column",
    spacing: 12,
    className: "col-edit-wrap"
  }, value.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_box["default"], {
      key: 'form-' + index,
      direction: "column",
      spacing: 8
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        lineHeight: '24px'
      }
    }, "\u5217" + (index + 1)), /*#__PURE__*/_react["default"].createElement(_box["default"], {
      direction: "row",
      spacing: 8,
      align: "center",
      justify: "flex-start"
    }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
      className: "col-edit-number-picker",
      max: 24,
      min: 1,
      value: item.span,
      onChange: function onChange(val) {
        return onInputChange(val, index);
      }
    }), /*#__PURE__*/_react["default"].createElement(_select["default"], {
      value: item.direction,
      onChange: function onChange(val) {
        onSelectChange(val, index);
      },
      autoWidth: false
    }, /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
      value: "row"
    }, "\u5DE6\u53F3\u5C55\u793A\u591A\u7EC4\u4EF6"), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
      value: "column"
    }, "\u4E0A\u4E0B\u663E\u793A\u591A\u7EC4\u4EF6")), /*#__PURE__*/_react["default"].createElement(_button["default"], {
      text: true,
      onClick: function onClick() {
        deleteOne(index);
      },
      style: {
        lineHeight: 0
      },
      disabled: delBtnDisabled
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "ashbin"
    }))));
  }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
    onClick: addOne,
    style: {
      padding: '0 8px'
    },
    disabled: addBtnDisabled
  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    type: "add"
  }))));
};

var _default = ColEdit;
exports["default"] = _default;