@aliretail/react-materials-components/es/LogicalEditor/SelectCondition.js

B 端物料组件库

import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Grid from "@alifd/next/es/grid";
import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";

/* eslint-disable react/prop-types */
import * as React from 'react';
import { decodeValue, encodeValue, uniqueConditionKey } from "./utils";
import { getConditionComponent } from "./map";
import { useContext } from "./context";
var DEFAULT_VALUE = '__logical_editor_preset_value__';
var SelectWithRules = getConditionComponent('Select');

var SelectCondition = function SelectCondition(props) {
  var _config$find;

  var last = props.last,
      index = props.index,
      condition = props.condition,
      removable = props.removable,
      onAdd = props.onAdd,
      onRemove = props.onRemove,
      onUpdate = props.onUpdate,
      onClear = props.onClear,
      useCompact = props.useCompact;

  var _useContext = useContext(),
      config = _useContext.config,
      disabled = _useContext.disabled;

  var id = condition.id,
      key = condition.key,
      keyCalcType = condition.keyCalcType,
      value = condition.value; // 选出当前组件的信息

  var getComponent = function getComponent(firKey, secKey) {
    var _componentProps;

    var currentConfig = config.find(function (c) {
      return c.key === firKey;
    }) || {};
    var relations = currentConfig.relation || [];
    var isEmptyComponent = false;
    var componentName = '';
    var componentProps = {};
    var submitProps = {}; // 第一层选了

    if (firKey) {
      componentName = currentConfig.component;
      componentProps = currentConfig.componentProps;
      submitProps = currentConfig.submitProps;
      isEmptyComponent = componentName === 'Empty';
    } // 第二层选了，覆盖第一层


    if (secKey) {
      var currentRelation = relations.find(function (r) {
        return r.value === secKey;
      });

      if (currentRelation !== null && currentRelation !== void 0 && currentRelation.component) {
        isEmptyComponent = (currentRelation === null || currentRelation === void 0 ? void 0 : currentRelation.component) === 'Empty';
        componentName = currentRelation.component;
        componentProps = currentRelation.componentProps || {};
      }

      if (currentRelation !== null && currentRelation !== void 0 && currentRelation.submitProps) {
        submitProps = currentRelation.submitProps;
      }
    }

    return {
      isEmptyComponent: isEmptyComponent,
      componentName: componentName,
      componentProps: componentProps,
      submitProps: submitProps,
      defaultValue: (_componentProps = componentProps) === null || _componentProps === void 0 ? void 0 : _componentProps.defaultValue
    };
  };

  var _getComponent = getComponent(key, keyCalcType),
      componentName = _getComponent.componentName,
      componentProps = _getComponent.componentProps;
  /** 类型改变 */


  var handleTypeChange = function handleTypeChange(v) {
    if (v === undefined) {
      onClear(id); // 清空数据

      return;
    }

    var curConfig = config.find(function (c) {
      return c.key === v;
    });
    var type = curConfig.relation[0].value;

    var _getComponent2 = getComponent(v, type),
        isEmptyComponent = _getComponent2.isEmptyComponent,
        submitProps = _getComponent2.submitProps,
        defaultValue = _getComponent2.defaultValue;

    onUpdate(id, _extends({}, submitProps, condition, {
      key: v,
      keyCalcType: type,
      value: isEmptyComponent ? DEFAULT_VALUE : defaultValue
    }));
  };
  /** 条件关系改变 */


  var handleRelationChange = function handleRelationChange(v) {
    var _getComponent3 = getComponent(key, v),
        isEmptyComponent = _getComponent3.isEmptyComponent,
        submitProps = _getComponent3.submitProps,
        defaultValue = _getComponent3.defaultValue;

    onUpdate(id, _extends({}, submitProps, condition, {
      keyCalcType: v,
      value: isEmptyComponent ? DEFAULT_VALUE : defaultValue
    }));
  };
  /** 值改变 */


  var handleValueChange = function handleValueChange(v) {
    var encoded = encodeValue(v);

    var _getComponent4 = getComponent(key, keyCalcType),
        submitProps = _getComponent4.submitProps;

    onUpdate(id, _extends({}, submitProps, condition, {
      value: encoded
    }));
  };

  var Component = getConditionComponent(componentName);
  var relations = ((_config$find = config.find(function (c) {
    return c.key === key;
  })) === null || _config$find === void 0 ? void 0 : _config$find.relation) || [];
  return /*#__PURE__*/React.createElement(_Grid.Row, {
    gutter: useCompact ? 10 : 16,
    style: last ? {} : {
      marginBottom: 20
    },
    align: "center"
  }, /*#__PURE__*/React.createElement(_Grid.Col, {
    span: 5
  }, /*#__PURE__*/React.createElement(SelectWithRules, {
    style: {
      width: '100%'
    },
    value: key,
    onChange: handleTypeChange,
    disabled: disabled,
    autoWidth: false,
    hasClear: true,
    rules: [{
      required: true,
      message: '不能为空'
    }]
  }, config === null || config === void 0 ? void 0 : config.map(function (t) {
    return /*#__PURE__*/React.createElement(_Select.Option, {
      key: t.key,
      value: t.key
    }, t.name);
  }))), /*#__PURE__*/React.createElement(_Grid.Col, {
    span: 5
  }, /*#__PURE__*/React.createElement(SelectWithRules, {
    autoWidth: false,
    style: {
      width: '100%'
    },
    value: keyCalcType,
    onChange: handleRelationChange,
    disabled: disabled,
    rules: [{
      required: true,
      message: '不能为空'
    }]
  }, relations === null || relations === void 0 ? void 0 : relations.map(function (r) {
    return /*#__PURE__*/React.createElement(_Select.Option, {
      key: r.label,
      value: r.value
    }, r.label);
  }))), /*#__PURE__*/React.createElement(_Grid.Col, {
    span: 11
  }, /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.createElement(Component, null), _extends({
    style: {
      maxWidth: '100%'
    },
    value: React.useMemo(function () {
      return decodeValue(value);
    }, [value]),
    onChange: handleValueChange,
    disabled: disabled
  }, componentProps))), /*#__PURE__*/React.createElement(_Grid.Col, {
    span: 3
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      whiteSpace: 'nowrap'
    }
  }, !disabled && /*#__PURE__*/React.createElement(_Button, {
    className: "aliretail-logic-editor-btn",
    onClick: function onClick() {
      return onAdd({
        id: uniqueConditionKey()
      }, index + 1);
    }
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: "add"
  })), !disabled && /*#__PURE__*/React.createElement(_Button, {
    className: "aliretail-logic-editor-btn",
    onClick: function onClick() {
      return onRemove(id);
    },
    disabled: !removable
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: "ashbin"
  })))));
};

export default SelectCondition;