@td-design/react-native/lib/module/count-down/CountDownItem.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, { forwardRef } from 'react';
import { Keyboard, StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import { useMemoizedFn, useSms } from '@td-design/rn-hooks';
import helpers from '../helpers';
import InputItem from '../input/InputItem';
import Pressable from '../pressable';
import Text from '../text';
const {
  ONE_PIXEL
} = helpers;
const CountDownItem = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    sendText = '发送验证码',
    resendText = '重新发送',
    placeholder = '请输入验证码',
    count = 60,
    codeType = 'normal',
    onBefore,
    onSend,
    onEnd,
    activeOpacity = 0.6,
    ...restProps
  } = _ref;
  const theme = useTheme();
  const {
    sendSms,
    text,
    disabled
  } = useSms({
    defaultLabel: sendText,
    resendLabel: resendText,
    count,
    onBefore,
    onSend,
    onAfter: onEnd,
    ref
  });
  const handlePress = useMemoizedFn(() => {
    Keyboard.dismiss();
    sendSms();
  });
  const styles = StyleSheet.create({
    input: {
      justifyContent: 'center',
      alignItems: 'center',
      borderColor: disabled ? theme.colors.disabled : theme.colors.border
    },
    border: {
      borderWidth: ONE_PIXEL,
      paddingHorizontal: theme.spacing.x1,
      paddingVertical: theme.spacing.x1,
      borderRadius: theme.borderRadii.x1
    }
  });
  return /*#__PURE__*/React.createElement(InputItem, _extends({
    ref: ref
  }, restProps, {
    placeholder: placeholder,
    keyboardType: "number-pad",
    right: /*#__PURE__*/React.createElement(Pressable, {
      style: [styles.input, codeType === 'border' && styles.border],
      disabled: disabled,
      activeOpacity: activeOpacity,
      onPress: handlePress
    }, /*#__PURE__*/React.createElement(Text, {
      variant: 'p1',
      color: disabled ? 'disabled' : 'primary200'
    }, text))
  }));
});
CountDownItem.displayName = 'CountDownItem';
export default CountDownItem;
//# sourceMappingURL=CountDownItem.js.map