@aliretail/cuckoo-official-retailforce-form-combo/es/index-bak.js

official-retailforce-form-combo

'use strict';

import _Dialog from "@alifd/next/es/dialog";
import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["left", "top"],
    _excluded2 = ["x", "y"],
    _excluded3 = ["x", "y", "width", "height"];
import React from 'react';
import { isEqual, find } from 'lodash';
import Editor from './components/Editor';
import Setter from './components/Setter';
import { modeData } from './config';
import './index.scss';

var ImageCombo = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(ImageCombo, _React$Component);

  function ImageCombo(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    var defaultData = _this.format(props.moduleData[props.dataName] || props.extension.defaultValue) || [];
    console.log('defaultData', defaultData);
    _this.state = {
      visible: false,
      value: defaultData,
      cacheItemList: defaultData,
      imgUrl: props.extension.imgUrl,
      dataName: props.dataName,
      mode: '1-2'
    };
    return _this;
  }

  var _proto = ImageCombo.prototype;

  _proto.format = function format(dataList) {
    var newMap = [];
    dataList.map(function (item) {
      var left = item.left,
          top = item.top,
          other = _objectWithoutPropertiesLoose(item, _excluded);

      newMap.push(_extends({
        x: left,
        y: top
      }, other));
    }); // console.log('newmap', newMap);

    return newMap;
  };

  _proto.rFormat = function rFormat(dataList) {
    var newMap = [];
    dataList.map(function (item) {
      var x = item.x,
          y = item.y,
          other = _objectWithoutPropertiesLoose(item, _excluded2);

      newMap.push(_extends({
        left: item.x,
        top: item.y
      }, other));
    }); // console.log('r-newmap', newMap);

    return newMap;
  };

  _proto.save = function save(data, silence) {
    var newData = this.rFormat(data);
    var change = this.props.change;
    change && change(newData);
    !silence && this.refresh(newData);
  };

  _proto.refresh = function refresh(data) {
    var allData = this.clone(this.props.moduleData); // console.log('mobi.setter.refresh', allData, this.props.dataName, data);

    var componentId = VisualEngine.Exchange.selectedNode.id;
    allData[this.props.dataName] = data;
    allData.__currentDataName__ = this.props.dataName;
    window.mobiEmit && window.mobiEmit.emit("mobi.setter.update[" + componentId + "]", allData);
  };

  _proto.watch = function watch(data) {
    var _this2 = this;

    var _this$props = this.props,
        extension = _this$props.extension,
        moduleData = _this$props.moduleData;
    var rules = extension.__rules__ || {};
    var _rules$watch = rules.watch,
        watch = _rules$watch === void 0 ? {} : _rules$watch;
    var observer = watch.observer;

    if (!observer) {
      console.log('!observer', observer);
      return;
    }

    var changeFn = function changeFn(data) {
      var mode = data.value;
      var cacheItemList = _this2.state.cacheItemList;
      console.log('combo.on', data, cacheItemList);
      var newItems = [];
      var defaultData = modeData[mode] || [];
      defaultData.map(function (item, index) {
        var originData = cacheItemList[index] || {};

        var x = originData.x,
            y = originData.y,
            width = originData.width,
            height = originData.height,
            other = _objectWithoutPropertiesLoose(originData, _excluded3);

        console.log('originData', other);
        newItems.push(_extends({}, other, {
          x: item.x,
          y: item.y,
          width: item.width,
          height: item.height
        }));
      });
      console.log('newItems', newItems);

      _this2.setState({
        mode: mode,
        cacheItemList: newItems
      });
    }; // 初始化执行一次


    changeFn(data);
    window.mobiEmit.on(observer, changeFn);
  };

  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    console.log('combo.receive: ', nextProps);
    var dataName = this.state.dataName;
    var oValue = this.props.moduleData[dataName];
    var nValue = nextProps.moduleData[dataName]; // 当前组件值发生改变

    if (!isEqual(nValue, oValue)) {
      this.setState({
        value: this.clone(nValue)
      });
    }
  };

  _proto.componentDidMount = function componentDidMount() {
    this.watch({
      value: '1-2'
    });
  };

  _proto.clone = function clone(data) {
    if (!data) return data;
    return JSON.parse(JSON.stringify(data));
  };

  _proto.addOne = function addOne() {
    var value = this.state.value;
    var itemList = value || [];
    itemList.push({
      id: uuidv1().substr(0, 8),
      imgUrl: '',
      imgUrlMeta: {},
      itemName: '',
      itemDesc: '',
      itemTips: '',
      actionLink: '',
      actionLinkType: '',
      actionLinkMeta: {},
      isActive: false
    });
    this.save(itemList);
  };

  _proto["delete"] = function _delete(index) {
    var value = this.state.value;
    var itemList = value || [];
    itemList.splice(index, 1);
    this.save(itemList);
  };

  _proto.onOpen = function onOpen() {
    this.setState({
      visible: true
    });
  };

  _proto.onClose = function onClose() {
    this.setState({
      visible: false
    });
  };

  _proto.onChange = function onChange(data) {
    // console.log('onChange======', data);
    this.setState({
      cacheItemList: this.clone(data)
    });
    this.forceUpdate();
  };

  _proto.handleOk = function handleOk() {
    var cacheItemList = this.state.cacheItemList;
    console.log('cacheItemList', cacheItemList);
    var itemList = this.clone(cacheItemList);
    this.setState({
      value: itemList,
      visible: false
    });
    console.log('itemList', itemList);
    this.save(itemList);
  };

  _proto.render = function render() {
    var _this3 = this;

    var _this$state = this.state,
        value = _this$state.value,
        materialProps = _this$state.materialProps,
        linkProps = _this$state.linkProps,
        cacheItemList = _this$state.cacheItemList;
    var _this$props2 = this.props,
        _this$props2$extensio = _this$props2.extension,
        extension = _this$props2$extensio === void 0 ? {} : _this$props2$extensio,
        style = _this$props2.style;
    var label = extension.label,
        _extension$setterProp = extension.setterProps,
        setterProps = _extension$setterProp === void 0 ? {} : _extension$setterProp;
    return /*#__PURE__*/React.createElement("div", {
      className: "combo-box",
      style: style
    }, /*#__PURE__*/React.createElement(_Button, {
      type: "normal",
      className: "group-btn",
      onClick: function onClick() {
        return _this3.onOpen();
      }
    }, label), /*#__PURE__*/React.createElement(_Dialog, {
      title: "\u914D\u7F6E\u62FC\u56FE",
      className: "combo-wraper",
      visible: this.state.visible,
      onOk: function onOk() {
        _this3.handleOk();
      },
      onCancel: function onCancel() {
        _this3.onClose();
      },
      onClose: function onClose() {
        _this3.onClose();
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "box"
    }, /*#__PURE__*/React.createElement(Editor, {
      onChange: function onChange(data) {
        return _this3.onChange(data);
      },
      cacheItemList: cacheItemList
    }), /*#__PURE__*/React.createElement(Setter, {
      setterProps: setterProps,
      onChange: function onChange(data) {
        return _this3.onChange(data);
      },
      cacheItemList: cacheItemList
    }))));
  };

  return ImageCombo;
}(React.Component);

export default ImageCombo;