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

🌈 React Native UI library

"use strict";

import isNil from 'lodash/isNil';
import React, { memo, isValidElement } from 'react';
import { Text, View, ScrollView } from 'react-native';
import Button from "../button/index.js";
import Divider from "../divider/index.js";
import { useSafeHeight } from "../hooks/index.js";
import Popup from "../popup/popup.js";
import PopupHeader from "../popup/popup-header.js";
import Theme from "../theme/index.js";
import { varCreator, styleCreator } from "./style.js";

/**
 * ActionSheet 动作面板
 * @description 底部弹起的模态面板，包含与当前情境相关的多个选项。
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const ActionSheet = ({
  theme,
  actions,
  title,
  cancelText,
  description,
  safeAreaInsetTop,
  round = true,
  onCancel,
  onSelect,
  ...restProps
}) => {
  const safeHeight = useSafeHeight({
    top: safeAreaInsetTop
  });
  const [CV, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  const isTitleDef = !isNil(title);
  const isCancelTextDef = !isNil(cancelText);
  const isDescriptionDef = !isNil(description);

  /** 描述文案 纯文字或自定义 JSX */
  const descriptionJSX = isDescriptionDef ? /*#__PURE__*/isValidElement(description) ? description : /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Text, {
      style: [STYLES.description, isTitleDef ? null : STYLES.description_alone],
      numberOfLines: 1,
      children: description
    }), /*#__PURE__*/_jsx(Divider, {})]
  }) : null;
  return /*#__PURE__*/_jsx(Popup, {
    ...restProps,
    safeAreaInsetBottom: true,
    position: "bottom",
    round: round,
    children: /*#__PURE__*/_jsxs(View, {
      style: {
        maxHeight: safeHeight
      },
      children: [isTitleDef ? /*#__PURE__*/_jsx(PopupHeader, {
        title: title,
        showClose: false
      }) : null, descriptionJSX, /*#__PURE__*/_jsx(ScrollView, {
        bounces: false,
        children: actions.map((item, index) => {
          return /*#__PURE__*/_jsx(Button, {
            accessibilityLabel: item.name,
            text: item.name,
            disabled: item.disabled,
            loading: item.loading,
            color: item.color || CV.action_sheet_text_color,
            type: "link",
            size: "xl",
            textStyle: STYLES.button_text,
            onPress: () => {
              if (!item.disabled && !item.loading) {
                item.callback?.();
                onSelect?.(item, index);
              }
            }
          }, `${item.name}_${index}`);
        })
      }), isCancelTextDef ? /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(View, {
          style: STYLES.gap
        }), /*#__PURE__*/_jsx(Button, {
          accessibilityLabel: cancelText,
          text: cancelText,
          type: "link",
          size: "xl",
          color: CV.action_sheet_text_color,
          textStyle: STYLES.button_text,
          onPress: onCancel
        })]
      }) : null]
    })
  });
};
export default /*#__PURE__*/memo(ActionSheet);
//# sourceMappingURL=action-sheet.js.map