@fruits-chain/react-native-xiaoshu/lib/module/password-input/index.js

🌈 React Native UI library

function _extends() { _extends = Object.assign || 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, memo, forwardRef } from 'react';
import { getDefaultValue } from '../helpers';
import { useControllableValue, usePersistFn } from '../hooks';
import EyeOutline from '../icon/eye';
import EyeCloseOutline from '../icon/eye-close';
import TextInput from '../text-input';
import Theme from '../theme';
const hitSlop = {
  top: 4,
  bottom: 4,
  left: 4,
  right: 4
};
/**
 * 密码输入
 */

const PasswordInput = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    iconSize = 20,
    iconColor,
    ...restProps
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const [secure, onChangeSecureTextEntry] = useControllableValue(restProps, {
    valuePropName: 'secureTextEntry',
    defaultValuePropName: 'defaultSecureTextEntry',
    defaultValue: true,
    trigger: 'onChangeSecureTextEntry'
  });
  iconColor = getDefaultValue(iconColor, TOKENS.gray_6);
  const iconStyle = useMemo(() => ({
    marginLeft: TOKENS.space_2
  }), [TOKENS.space_2]);
  const onPressIcon = usePersistFn(() => {
    onChangeSecureTextEntry(!secure);
  });
  const IconSuffix = secure ? EyeCloseOutline : EyeOutline;
  return /*#__PURE__*/React.createElement(TextInput, _extends({}, restProps, {
    ref: ref,
    secureTextEntry: secure,
    suffix: /*#__PURE__*/React.createElement(IconSuffix, {
      size: iconSize,
      color: iconColor,
      onPress: onPressIcon,
      style: iconStyle,
      hitSlop: hitSlop
    })
  }));
});
export default /*#__PURE__*/memo(PasswordInput);
//# sourceMappingURL=index.js.map