fx-form-widget/es/packages/multiSelect/index.js

动态表单组件库

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _Select from "antd/es/select";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import * as React from 'react';
import { useState, useEffect } from 'react';
import { getUrlData } from './request';
import { parseQueryString, isNotNullValue } from './tools';
var Option = _Select.Option;
var MultiSelect = function MultiSelect(_ref) {
  var _ref$schema = _ref.schema,
    schema = _ref$schema === void 0 ? {} : _ref$schema,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    _ref$isInit = _ref.isInit,
    isInit = _ref$isInit === void 0 ? false : _ref$isInit,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? isNotNullValue(schema.data) ? schema.data : undefined : _ref$value;
  var _schema$readonly = schema.readonly,
    readonly = _schema$readonly === void 0 ? false : _schema$readonly,
    _schema$required = schema.required,
    required = _schema$required === void 0 ? false : _schema$required,
    _schema$enumKeys = schema.enumKeys,
    enumKeys = _schema$enumKeys === void 0 ? [] : _schema$enumKeys,
    _schema$enumNames = schema.enumNames,
    enumNames = _schema$enumNames === void 0 ? [] : _schema$enumNames,
    _schema$placeholder = schema.placeholder,
    placeholder = _schema$placeholder === void 0 ? '请选择' : _schema$placeholder,
    _schema$allowClear = schema.allowClear,
    allowClear = _schema$allowClear === void 0 ? false : _schema$allowClear,
    _schema$dataUrl = schema.dataUrl,
    dataUrl = _schema$dataUrl === void 0 ? undefined : _schema$dataUrl,
    _schema$fieldName = schema.fieldName,
    fieldName = _schema$fieldName === void 0 ? undefined : _schema$fieldName;
  var _useState = useState(enumKeys),
    keys = _useState[0],
    setKeys = _useState[1];
  var _useState2 = useState(enumNames),
    values = _useState2[0],
    setValues = _useState2[1];
  useEffect(function () {
    if (isInit && dataUrl && fieldName) {
      // 请求参数
      fetchData();
    }
  }, [isInit, dataUrl, fieldName]);
  useEffect(function () {
    if (!(dataUrl && fieldName)) {
      try {
        if (JSON.stringify(enumKeys) !== JSON.stringify(keys)) {
          setKeys(enumKeys);
        }
        if (JSON.stringify(enumNames) !== JSON.stringify(values)) {
          setValues(enumNames);
        }
      } catch (_) {}
    }
  }, [dataUrl, fieldName, enumKeys, enumNames]);
  var fetchData = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var queryObj, data, tempKeys, tempValues;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            queryObj = parseQueryString(dataUrl);
            if (!queryObj) {
              _context.next = 6;
              break;
            }
            _context.next = 4;
            return getUrlData(dataUrl, queryObj);
          case 4:
            data = _context.sent;
            if (data.success) {
              tempKeys = [];
              tempValues = [];
              if (data.data.length) {
                data.data.forEach(function (optionItem) {
                  tempKeys.push(optionItem.id);
                  tempValues.push(optionItem.name);
                });
              }
              setKeys(tempKeys);
              setValues(tempValues);
            }
          case 6:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function fetchData() {
      return _ref2.apply(this, arguments);
    };
  }();
  var handleChange = function handleChange(value) {
    return onChange(value);
  };
  var defaultOption = {};
  if (schema['ui_options']) {
    Object.keys(schema['ui_options']).forEach(function (key) {
      defaultOption[key] = schema['ui_options'][key];
    });
  }
  var options = _extends({
    disabled: readonly,
    required: required,
    placeholder: placeholder,
    allowClear: allowClear
  }, defaultOption);
  return /*#__PURE__*/React.createElement(_Select, _extends({
    // strictMatch
    showArrow: true,
    style: {
      width: '100%'
    },
    mode: "multiple"
  }, options, {
    value: isNotNullValue(value) ? value : undefined,
    onChange: handleChange,
    optionFilterProp: "children",
    filterOption: function filterOption(input, option) {
      return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
  }), (keys || []).map(function (keyValue, index) {
    var option = values ? values[index] : keyValue;
    return /*#__PURE__*/React.createElement(Option, {
      value: keyValue,
      key: keyValue
    }, option);
  }));
};
export default MultiSelect;