@td-design/react-native/lib/module/number-keyboard/NumberKeyboardModal.js

react-native UI组件库

import React from 'react';
import { Keyboard, StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
import NumberKeyboardView from './NumberKeyboardView';
import useNumberKeyboardModal from './useNumberKeyboardModal';
const {
  px
} = helpers;
const SIZE = px(48);
const NumberKeyboardModal = _ref => {
  let {
    type,
    allowClear = true,
    allowNegative,
    value = '',
    onPress,
    onDelete,
    onSubmit,
    prefixLabel = '当前值',
    closeModal
  } = _ref;
  const theme = useTheme();
  const {
    text,
    handleChange,
    handleInputClear,
    handleSubmit,
    handleDelete
  } = useNumberKeyboardModal({
    value,
    onPress,
    onDelete,
    onSubmit,
    closeModal
  });
  const styles = StyleSheet.create({
    content: {
      justifyContent: 'center',
      alignItems: 'flex-end'
    }
  });
  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "space-between",
    alignItems: "center",
    height: SIZE,
    paddingHorizontal: "x4"
  }, /*#__PURE__*/React.createElement(Box, {
    flex: 1
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    color: "text",
    selectable: true
  }, prefixLabel, "\uFF1A", text)), allowClear && /*#__PURE__*/React.createElement(Pressable, {
    style: [styles.content, {
      marginRight: px(8)
    }],
    activeOpacity: 1,
    onPress: handleInputClear
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "closecircleo",
    color: theme.colors.icon
  })), /*#__PURE__*/React.createElement(Pressable, {
    style: styles.content,
    onPress: () => {
      Keyboard.dismiss();
      closeModal === null || closeModal === void 0 ? void 0 : closeModal();
    },
    activeOpacity: 1
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "down",
    size: px(20),
    color: theme.colors.gray500
  }))), /*#__PURE__*/React.createElement(NumberKeyboardView, {
    type: type,
    allowNegative: allowNegative,
    onPress: handleChange,
    onDelete: handleDelete,
    onSubmit: handleSubmit
  }));
};
NumberKeyboardModal.displayName = 'NumberKeyboardModal';
export default NumberKeyboardModal;
//# sourceMappingURL=NumberKeyboardModal.js.map