@td-design/react-native/lib/module/action-sheet/index.js

react-native UI组件库

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import { useSafeState } from '@td-design/rn-hooks';
import Box from '../box';
import helpers from '../helpers';
import ModalView from '../modal/Modal/ModalView';
import Portal from '../portal';
import Pressable from '../pressable';
import Text from '../text';
import WhiteSpace from '../white-space';
import ActionSheetItem from './ActionSheetItem';
const {
  ONE_PIXEL
} = helpers;
const ActionSheet = () => null;
ActionSheet.displayName = 'ActionSheet';
ActionSheet.show = props => {
  const key = Portal.add( /*#__PURE__*/React.createElement(ActionSheetContent, _extends({}, props, {
    onAnimationEnd: visible => {
      if (!visible) {
        Portal.remove(key);
      }
    }
  })));
};
const ActionSheetContent = _ref => {
  let {
    title,
    items = [],
    cancelText = '取消',
    activeOpacity = 0.6,
    onAnimationEnd
  } = _ref;
  const [visible, setVisible] = useSafeState(true);
  const theme = useTheme();
  const styles = StyleSheet.create({
    action: {
      backgroundColor: theme.colors.white,
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: theme.spacing.x3,
      borderTopWidth: ONE_PIXEL,
      borderTopColor: theme.colors.border
    },
    cancel: {
      borderTopWidth: 0,
      borderBottomLeftRadius: theme.borderRadii.x2,
      borderBottomRightRadius: theme.borderRadii.x2
    }
  });
  const Title = useMemo(() => {
    if (!title) return null;
    if (typeof title === 'string') return /*#__PURE__*/React.createElement(Box, {
      padding: "x3"
    }, /*#__PURE__*/React.createElement(Text, {
      variant: "p1",
      color: "text"
    }, title));
    return /*#__PURE__*/React.createElement(Box, {
      padding: "x3"
    }, title);
  }, [title]);
  return /*#__PURE__*/React.createElement(ModalView, {
    position: "bottom",
    maskVisible: true,
    maskClosable: true,
    animationType: "slide",
    onAnimationEnd: onAnimationEnd,
    visible: visible,
    onClose: () => setVisible(false)
  }, /*#__PURE__*/React.createElement(Box, null, Title, items.map((item, index) => /*#__PURE__*/React.createElement(ActionSheetItem, _extends({
    key: index
  }, item, {
    onCancel: () => setVisible(false),
    itemStyle: styles.action,
    activeOpacity: activeOpacity
  }))), /*#__PURE__*/React.createElement(WhiteSpace, {
    size: "x2",
    backgroundColor: theme.colors.gray50
  }), /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: () => setVisible(false),
    style: [styles.action, styles.cancel]
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    color: "text"
  }, cancelText))));
};
export default ActionSheet;
//# sourceMappingURL=index.js.map