@aliretail/react-materials-components/es/MultipleLogisticFormItem/index.js

B 端物料组件库

import _Balloon from "@alifd/next/es/balloon";
import _Icon from "@alifd/next/es/icon";
import _Button from "@alifd/next/es/button";
import _Input from "@alifd/next/es/input";
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 { uniqueId } from 'lodash';
import { usePersistFn } from 'ahooks';

var uniqueKey = function uniqueKey() {
  return uniqueId('logistic-form-item');
};

var MultipleLogisticFormItem = /*#__PURE__*/React.forwardRef(function (props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? [{}] : _props$value,
      onChange = props.onChange,
      onFetchLogisticCompany = props.onFetchLogisticCompany,
      disabledReason = props.disabledReason,
      _props$maxCount = props.maxCount,
      maxCount = _props$maxCount === void 0 ? Infinity : _props$maxCount;
  var fetchLogisticCompany = usePersistFn(onFetchLogisticCompany);

  var _React$useState = React.useState([]),
      companyList = _React$useState[0],
      setCompanyList = _React$useState[1];

  React.useEffect(function () {
    fetchLogisticCompany().then(function (res) {
      setCompanyList(res);
    })["catch"](function () {})["finally"](function () {}); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  var disabledByReason = !!disabledReason;
  var disabledByLength = value.length >= maxCount;

  var handleRemove = function handleRemove(key) {
    var newValue = value.filter(function (v) {
      return v.key !== key;
    });
    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
  };

  var handleAdd = function handleAdd() {
    var newValue = value.concat({
      key: uniqueKey()
    });
    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
  };

  var handleEdit = function handleEdit(key, payload) {
    var newValue = value.map(function (v) {
      if (v.key === key) {
        return _extends({}, v, payload);
      }

      return _extends({}, v);
    });
    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, value === null || value === void 0 ? void 0 : value.map(function (v) {
    // 添加前端id
    if (!v.key) {
      // eslint-disable-next-line no-param-reassign
      v.key = uniqueKey();
    }

    return /*#__PURE__*/React.createElement(_Grid.Row, {
      className: "logistic-form-item-wrap",
      key: v.key,
      gutter: 8
    }, /*#__PURE__*/React.createElement(_Grid.Col, {
      span: 10
    }, /*#__PURE__*/React.createElement(_Select, {
      value: v === null || v === void 0 ? void 0 : v.type,
      style: {
        width: '100%'
      },
      placeholder: "\u8BF7\u9009\u62E9\u516C\u53F8",
      onChange: function onChange(sv, _, item) {
        return handleEdit(v.key, {
          type: sv,
          name: item.label
        });
      }
    }, companyList.map(function (c) {
      return /*#__PURE__*/React.createElement(_Select.Option, {
        key: c.code,
        value: c.code
      }, c.name);
    }))), /*#__PURE__*/React.createElement(_Grid.Col, {
      span: 14
    }, /*#__PURE__*/React.createElement(_Input, {
      value: v === null || v === void 0 ? void 0 : v.code,
      style: {
        width: '100%'
      },
      placeholder: "\u7269\u6D41\u5355\u53F7",
      onChange: function onChange(iv) {
        return handleEdit(v.key, {
          code: iv
        });
      }
    })), /*#__PURE__*/React.createElement(_Button, {
      className: "logistic-form-item-remove",
      onClick: function onClick() {
        return handleRemove(v.key);
      },
      text: true,
      type: "primary",
      disabled: value.length === 1 || disabledByReason
    }, "\u5220\u9664"));
  }), function () {
    var disabled = disabledByReason || disabledByLength;
    var addButton = /*#__PURE__*/React.createElement(_Button, {
      disabled: disabled,
      type: "primary",
      size: "small",
      text: true,
      onClick: handleAdd
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "add"
    }), "\u6DFB\u52A0\u7269\u6D41\u4FE1\u606F");

    if (disabled) {
      return /*#__PURE__*/React.createElement(_Balloon.Tooltip, {
        align: "t",
        trigger: addButton
      }, disabledReason || '达到最大添加数');
    }

    return addButton;
  }());
}); // 以下是往组件上挂属性的逻辑

var EnhancedLogisticFormItem = MultipleLogisticFormItem;

EnhancedLogisticFormItem.validator = function (_, value) {
  if (!value) {
    return Promise.reject(new Error('请输入物流公司'));
  }

  if (value.some(function (v) {
    return !v.type;
  })) {
    return Promise.reject(new Error('请输入物流公司'));
  }

  if (value.some(function (v) {
    return !v.code;
  })) {
    return Promise.reject(new Error('请输入物流编号'));
  }

  return Promise.resolve();
};

export default EnhancedLogisticFormItem;