@td-design/react-native/lib/module/vehicle-keyboard/VehicleKeyboardModal.js

react-native UI组件库

import React from 'react';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Pressable from '../pressable';
import Text from '../text';
import useVehicleKeyboardViewModal from './useVehicleKeyboardModal';
import VehicleKeyboardView from './VehicleKeyboardView';
const {
  ONE_PIXEL,
  deviceWidth
} = helpers;
const VehicleKeyboardModal = _ref => {
  let {
    value = '',
    onPress,
    onDelete,
    onSubmit,
    submitText = '完成',
    activeOpacity,
    closeModal
  } = _ref;
  const theme = useTheme();
  const {
    type,
    textArr,
    handleChange,
    handleSubmit,
    handleDelete
  } = useVehicleKeyboardViewModal({
    value,
    onPress,
    onDelete,
    onSubmit,
    closeModal
  });
  const itemWidth = (deviceWidth - theme.spacing.x2 * 2 - theme.spacing.x1 * 7) / 9;
  const InputText = (value, index) => {
    if (index === 7 && !value) {
      return /*#__PURE__*/React.createElement(Text, {
        variant: "p3",
        color: "text"
      }, "\u65B0\u80FD\u6E90");
    }
    return /*#__PURE__*/React.createElement(Text, {
      variant: "p1",
      color: "text"
    }, value);
  };
  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 'x2',
    marginBottom: 'x1',
    borderBottomWidth: ONE_PIXEL,
    borderBottomColor: 'border'
  }, /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    width: itemWidth * 8,
    borderWidth: ONE_PIXEL,
    borderColor: 'border'
  }, [0, 1, 2, 3, 4, 5, 6, 7].map((item, index) => {
    return /*#__PURE__*/React.createElement(Box, {
      key: item,
      alignItems: "center",
      justifyContent: "center",
      borderRightWidth: index === 7 ? 0 : ONE_PIXEL,
      borderColor: "border",
      width: itemWidth,
      height: itemWidth
    }, InputText(textArr[item], item));
  })), /*#__PURE__*/React.createElement(Pressable, {
    onPress: handleSubmit,
    activeOpacity: activeOpacity,
    style: {
      paddingLeft: theme.spacing.x6
    }
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    color: "primary200"
  }, submitText))), /*#__PURE__*/React.createElement(VehicleKeyboardView, {
    type: type,
    onPress: handleChange,
    onDelete: handleDelete,
    activeOpacity: activeOpacity
  }));
};
VehicleKeyboardModal.displayName = 'VehicleKeyboardModal';
export default VehicleKeyboardModal;
//# sourceMappingURL=VehicleKeyboardModal.js.map