@fruits-chain/react-native-xiaoshu/lib/module/selector/selector.js

🌈 React Native UI library

"use strict";

import omit from 'lodash/omit';
import pick from 'lodash/pick';
import React, { memo, useState } from 'react';
import Button from "../button/index.js";
import ButtonBar from "../button-bar/index.js";
import { useSafeHeight, usePersistFn, useUpdateEffect } from "../hooks/index.js";
import Locale from "../locale/index.js";
import Popup from "../popup/popup.js";
import PopupHeader from "../popup/popup-header.js";
import PopupPage from "../popup/popup-page.js";
import Tree from "../tree/index.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const treePropsField = ['multiple', 'multipleMode', 'value', 'defaultValue', 'onChange', 'options', 'renderSwitcherIcon', 'indent', 'activeColor', 'defaultExpandedValues', 'defaultExpandAll', 'search', 'onSearch', 'placeholder', 'minHeight', 'cancellable'];

/**
 * Selector 弹出层式 Select
 * @description 类似 Web 端的 Select 组件，可以多选、单选。
 */
const Selector = ({
  title,
  onChangeImmediate,
  safeAreaInsetTop,
  confirmButtonText,
  // popup 组件相关属性
  visible,
  closeOnPressOverlay = true,
  onClose,
  ...restProps
}) => {
  const treeProps = pick(restProps, treePropsField);
  const popupProps = omit(restProps, treePropsField);
  const isMultiple = treeProps.multiple;
  const safeHeight = useSafeHeight({
    top: safeAreaInsetTop,
    bottom: false
  });
  const locale = Locale.useLocale().Selector;
  // const [valueMultiple, onChangeMultiple] = useControllableValue<
  //   SelectorValue[]
  // >(omit(restProps, 'onChange'), {
  //   defaultValue: Array.isArray(treeProps.value)
  //     ? treeProps.value
  //     : Array.isArray(treeProps.defaultValue)
  //     ? treeProps.defaultValue
  //     : [],
  // })
  const [valueMultiple, setValueMultiple] = useState(Array.isArray(treeProps.value) ? treeProps.value : Array.isArray(treeProps.defaultValue) ? treeProps.defaultValue : []);

  // 同步外面的数据
  useUpdateEffect(() => {
    if (treeProps.multiple) {
      setValueMultiple(treeProps.value);
    }
  }, [treeProps.multiple, treeProps.value]);
  const onChangeMultiplePersistFn = usePersistFn(v => {
    if (onChangeImmediate) {
      setValueMultiple(onChangeImmediate(v));
    } else {
      setValueMultiple(v);
    }
  });

  /**
   * 点击确定按钮
   */
  const onPressOk = usePersistFn(() => {
    const _onChange = treeProps.onChange;
    _onChange?.(valueMultiple, valueMultiple.map(i => Tree.findNodeByValue(treeProps.options, i)));
  });
  const contentJSX = /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(PopupHeader, {
      title: title ?? locale.title,
      onClose: onClose
    }), /*#__PURE__*/_jsx(Tree, {
      ...treeProps,
      value: isMultiple ? valueMultiple : treeProps.value ?? treeProps.defaultValue,
      onChange: isMultiple ? onChangeMultiplePersistFn : treeProps.onChange
    }), treeProps.multiple ? /*#__PURE__*/_jsx(ButtonBar, {
      alone: true,
      divider: false,
      height: 60,
      safeAreaInsetBottom: false,
      children: /*#__PURE__*/_jsx(Button, {
        type: "primary",
        onPress: onPressOk,
        text: confirmButtonText ?? locale.confirmButtonText
      })
    }) : null]
  });
  if (treeProps.search) {
    return /*#__PURE__*/_jsx(PopupPage, {
      ...popupProps,
      visible: visible,
      onClose: onClose,
      closeOnPressOverlay: closeOnPressOverlay,
      onPressOverlay: onClose,
      round: true,
      safeAreaInsetBottom: true,
      children: contentJSX
    });
  }
  return /*#__PURE__*/_jsx(Popup, {
    ...popupProps,
    style: {
      maxHeight: safeHeight
    },
    visible: visible,
    onClose: onClose,
    closeOnPressOverlay: closeOnPressOverlay,
    onPressOverlay: onClose,
    position: "bottom",
    round: true,
    safeAreaInsetBottom: true,
    children: contentJSX
  });
};
export default /*#__PURE__*/memo(Selector);
//# sourceMappingURL=selector.js.map