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

动态表单组件库

import _Col from "antd/es/col";
import _Input from "antd/es/input";
import _extends from "@babel/runtime/helpers/extends";
import React, { useState, useEffect } from 'react';
import SiteSelect from '@fle-ui/plus-address-selection';
import { isNotNullValue } from './tools';
import './index.less';
var AddressSelection = function AddressSelection(_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$value = _ref.value,
    value = _ref$value === void 0 ? isNotNullValue(schema.data) ? schema.data : '' : _ref$value,
    _ref$showSubTitle = _ref.showSubTitle,
    showSubTitle = _ref$showSubTitle === void 0 ? true : _ref$showSubTitle;
  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$allowClear = schema.allowClear,
    allowClear = _schema$allowClear === void 0 ? false : _schema$allowClear,
    _schema$addressLevel = schema.addressLevel,
    addressLevel = _schema$addressLevel === void 0 ? 4 : _schema$addressLevel,
    _schema$changeOnSelec = schema.changeOnSelect,
    changeOnSelect = _schema$changeOnSelec === void 0 ? false : _schema$changeOnSelec;
  var _ref2 = value || [],
    addressValue = _ref2[0],
    input = _ref2[1];
  var _useState = useState(''),
    inputValue = _useState[0],
    setInputValue = _useState[1];
  var _useState2 = useState([]),
    addresses = _useState2[0],
    setAddresses = _useState2[1];

  // 如果value发生改变进行渲染
  useEffect(function () {
    setInputValue(input);
  }, [input]);
  useEffect(function () {
    if (typeof addressValue === 'string' && addressValue) {
      setAddresses(addressValue.split('_').map(function (item) {
        return Number(item);
      }));
    } else {
      setAddresses(addressValue);
    }
  }, [addressValue]);

  // 默认值
  var defaultOptions = {};
  if (schema['ui_options']) {
    Object.keys(schema['ui_options']).forEach(function (key) {
      defaultOptions[key] = schema['ui_options'][key][0];
    });
  }
  var baseOptions = _extends({
    disabled: readonly,
    required: required,
    placeholder: '请选择地址',
    allowClear: allowClear,
    changeOnSelect: changeOnSelect
  }, defaultOptions);
  var siteSelectOptions = _extends({}, baseOptions, {
    // 由于目前地址仅支持4级如果大于四级就按四级处理(省/市/区/街道)
    level: addressLevel > 4 ? 4 : addressLevel
  });
  var onSiteSelectChange = function onSiteSelectChange(value) {
    emitAllChange(value, inputValue);
  };
  var onInputChange = function onInputChange(e) {
    setInputValue(e.target.value);
    emitAllChange(addresses, e.target.value);
  };
  var emitAllChange = function emitAllChange(addresses, inputValue) {
    if (!addresses) {
      return;
    }
    var arrs = addressLevel === 5 ? [addresses.join('_'), inputValue] : [addresses.join('_')];
    onChange(arrs);
  };
  var renderInput = function renderInput(addressLevel) {
    if (!showSubTitle) {
      return null;
    }
    if (addressLevel === 5) {
      return /*#__PURE__*/React.createElement("div", {
        className: "address-input-wrap"
      }, /*#__PURE__*/React.createElement(_Input, {
        allowClear: true,
        placeholder: "\u8BF7\u8F93\u5165\u8BE6\u7EC6\u5730\u5740",
        value: inputValue,
        onChange: onInputChange
      }));
    }
    return null;
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "address-selection"
  }, /*#__PURE__*/React.createElement(_Col, null, /*#__PURE__*/React.createElement(SiteSelect, _extends({
    style: {
      width: '100%'
    }
  }, siteSelectOptions, {
    valueDivision: "",
    onChange: onSiteSelectChange,
    value: addresses || []
  })), renderInput(addressLevel)));
};
var Ss = function Ss(props) {
  var _props$schema;
  return /*#__PURE__*/React.createElement(AddressSelection, _extends({
    key: props === null || props === void 0 ? void 0 : (_props$schema = props.schema) === null || _props$schema === void 0 ? void 0 : _props$schema.addressLevel
  }, props));
};
export default Ss;