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

B 端物料组件库

"use strict";

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

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

var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));

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

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

var _input = _interopRequireDefault(require("@alifd/next/lib/input"));

var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));

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

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

var React = _interopRequireWildcard(require("react"));

var _lodash = require("lodash");

var _ahooks = require("ahooks");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* eslint-disable react/prop-types */
var uniqueKey = function uniqueKey() {
  return (0, _lodash.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 = (0, _ahooks.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 (0, _extends2["default"])({}, v, payload);
      }

      return (0, _extends2["default"])({}, 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["default"].Row, {
      className: "logistic-form-item-wrap",
      key: v.key,
      gutter: 8
    }, /*#__PURE__*/React.createElement(_grid["default"].Col, {
      span: 10
    }, /*#__PURE__*/React.createElement(_select["default"], {
      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["default"].Option, {
        key: c.code,
        value: c.code
      }, c.name);
    }))), /*#__PURE__*/React.createElement(_grid["default"].Col, {
      span: 14
    }, /*#__PURE__*/React.createElement(_input["default"], {
      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["default"], {
      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["default"], {
      disabled: disabled,
      type: "primary",
      size: "small",
      text: true,
      onClick: handleAdd
    }, /*#__PURE__*/React.createElement(_icon["default"], {
      type: "add"
    }), "\u6DFB\u52A0\u7269\u6D41\u4FE1\u606F");

    if (disabled) {
      return /*#__PURE__*/React.createElement(_balloon["default"].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();
};

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