mobile-more/es/components/BizForm/ItemPicker/index.js

基于 antd-mobile v5 扩展移动端 UI 组件

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["placeholder", "mapKeys", "renderCurrentValue", "separator", "columns", "title", "pickerProps", "names", "name", "readOnly", "required", "disabled", "onClick", "transform"];
import React from 'react';
import { isArray, isUndefined } from 'ut2';
import useCompatId from "../../../hooks/useCompatId";
import BizFormItem from "../FormItem";
import { transformValueToNames } from "../utils/transform";
import SuperPicker from "./SuperPicker";
import { useConfig } from "../../BizConfigProvider";
import getDefaultPopupTitle from "../utils/getDefaultPopupTitle";
var BizFormItemPicker = function BizFormItemPicker(props) {
  var _useConfig = useConfig(),
    locale = _useConfig.locale;
  var _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? locale.form.common.selectPlaceholder : _props$placeholder,
    mapKeys = props.mapKeys,
    renderCurrentValue = props.renderCurrentValue,
    separator = props.separator,
    _props$columns = props.columns,
    columns = _props$columns === void 0 ? [] : _props$columns,
    _props$title = props.title,
    title = _props$title === void 0 ? getDefaultPopupTitle(props, locale) : _props$title,
    pickerProps = props.pickerProps,
    names = props.names,
    name = props.name,
    readOnly = props.readOnly,
    required = props.required,
    disabled = props.disabled,
    onClick = props.onClick,
    outTransform = props.transform,
    restProps = _objectWithoutProperties(props, _excluded);
  var id = useCompatId('__item_picker');
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    visible = _React$useState2[0],
    setVisible = _React$useState2[1];
  var currentName = name || (isArray(names) && names.length > 0 ? id : name);
  var handleClick = React.useCallback(function (e, widgetRef) {
    if (!disabled && !readOnly) {
      setVisible(true);
    }
    onClick === null || onClick === void 0 || onClick(e, widgetRef);
  }, [disabled, onClick, readOnly]);
  var transform = React.useCallback(function (value, currentLevelValues) {
    if (typeof outTransform === 'function') {
      return outTransform(value);
    }
    return transformValueToNames(value, currentLevelValues, names);
  }, [names, outTransform]);
  return /*#__PURE__*/React.createElement(BizFormItem, _extends({
    name: currentName,
    rules: [{
      validator: function validator(rule, value) {
        if (required) {
          if (isUndefined(value) || isArray(value) && value.length <= 0) {
            return Promise.reject(locale.form.common.selectRequired);
          }
        }
        return Promise.resolve();
      }
    }],
    required: required,
    disabled: disabled,
    onClick: handleClick,
    transform: transform
  }, restProps, {
    trigger: "onConfirm",
    validateTrigger: "onConfirm"
  }), /*#__PURE__*/React.createElement(SuperPicker, _extends({
    title: title,
    visible: visible,
    onClose: function onClose() {
      return setVisible(false);
    },
    placeholder: placeholder,
    mapKeys: mapKeys,
    renderCurrentValue: renderCurrentValue,
    separator: separator,
    columns: columns
  }, pickerProps)));
};
export default BizFormItemPicker;