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

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

import _Box from "@alifd/next/es/box";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Select from "@alifd/next/es/select";
import _NumberPicker from "@alifd/next/es/number-picker";
import _Dialog from "@alifd/next/es/dialog";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import './ColEdit.scss';

var ColEdit = function ColEdit(props) {
  var onChange = props.onChange,
      value = props.value,
      validator = props.validator,
      other = _objectWithoutPropertiesLoose(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 _extends({}, 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.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 _extends({}, 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 _extends({}, item, {
            span: 4
          });
        } else {
          return _extends({}, item, {
            span: 5
          });
        }
      });
    } else {
      return val.map(function (item) {
        return _extends({}, item, {
          span: 24 / len
        });
      });
    }
  };

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

export default ColEdit;