@tarojsx/ui
Version:
We reinvents the UI for Taro3+
94 lines • 5.13 kB
JavaScript
import React, { useMemo, useCallback } from 'react';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import { Input as _Input, Label, Text, View } from '@tarojs/components';
import '../style/Input.scss';
export const Input = (props) => {
var _a, _b;
const { innerRef, className, style = {}, children, type = 'text', name, title, value, placeholder, placeholderClass, placeholderStyle, disabled, required, readOnly, autoFocus, cursorSpacing = 50, cursor = 0, selectionStart = -1, selectionEnd = -1, adjustPosition = true, confirmType = 'done', border = true, error, clear, } = props;
const maxlength = (_b = (_a = props.maxlength) !== null && _a !== void 0 ? _a : props.maxLength) !== null && _b !== void 0 ? _b : 140;
const onInput = useCallback((e) => {
props.onChange && props.onChange(e);
}, [props.onChange]);
const onFocus = useCallback((e) => {
props.onFocus && props.onFocus(e);
}, [props.onFocus]);
const onBlur = useCallback((e) => {
props.onBlur && props.onBlur(e);
}, [props.onBlur]);
const onConfirm = useCallback((e) => {
props.onConfirm && props.onConfirm(e);
}, [props.onConfirm]);
const onClick = useCallback((e) => {
props.readOnly && props.onClick && props.onClick(e);
}, [props.readOnly, props.onClick]);
const onClearClick = useCallback((event) => {
// fix #840
setTimeout(() => {
event.detail.value = '';
props.onChange && props.onChange(event);
}, 50);
}, []);
const onErrorClick = useCallback(() => {
if (props.error) {
if (props.onErrorClick) {
props.onErrorClick(props.error);
}
else {
Taro.showToast({ title: props.error, icon: 'none' });
}
}
}, [props.error, props.onErrorClick]);
const normalizedProps = useMemo(() => {
const obj = {
type,
maxlength,
disabled: !!readOnly,
password: false,
};
switch (obj.type) {
case 'phone':
obj.type = 'number';
obj.maxlength = 11;
break;
case 'password':
obj.type = 'text';
obj.password = true;
break;
default:
break;
}
const normalizedProps = Object.assign(Object.assign({}, obj), { type: obj.type });
// if (normalizedProps.maxLength) {
// // BUG 当前 taro 3.0.0-beta.6 会以驼峰式设置 'maxLength' 属性, 但小程序真正需要的是小写 'maxlength'.
// normalizedProps['maxlength'] = normalizedProps.maxLength
// }
return normalizedProps;
// return { ...normalizedProps, type: normalizedProps.type as _InputProps['type'] }
}, [type, maxlength, readOnly]);
return (React.createElement(View, { className: classNames('at-input', { 'at-input--without-border': !border }, className), style: style },
React.createElement(View, { className: classNames('at-input__container', {
'at-input--error': error,
'at-input--disabled': disabled,
}) },
React.createElement(View, { className: classNames('at-input__overlay', {
'at-input__overlay--hidden': !disabled,
}), onClick: onClick }),
title && (React.createElement(Label, { className: classNames('at-input__title', { ['at-input__title--required']: required }), for: name }, title)),
React.createElement(_Input, Object.assign({ ref: (node) => {
// node 偶尔为 null
if (node && innerRef) {
// 赋值 name 后更像 input.
if (!node.name && name) {
node.name = name;
}
innerRef(Object.assign(Object.assign({}, node), { name, type }));
}
}, className: "at-input__input", id: name, name: name, placeholder: placeholder, placeholderClass: classNames('placeholder', placeholderClass), placeholderStyle: placeholderStyle, cursorSpacing: cursorSpacing, autoFocus: autoFocus, focus: autoFocus, value: value, confirmType: confirmType, cursor: cursor, selectionStart: selectionStart, selectionEnd: selectionEnd, adjustPosition: adjustPosition, onInput: onInput, onFocus: onFocus, onBlur: onBlur, onConfirm: onConfirm }, normalizedProps)),
clear && value && (React.createElement(View, { className: "at-input__icon", onTouchEnd: onClearClick },
React.createElement(Text, { className: "at-icon at-icon-close-circle at-input__icon-close" }))),
error && (React.createElement(View, { className: "at-input__icon", onTouchStart: onErrorClick },
React.createElement(Text, { className: "at-icon at-icon-alert-circle at-input__icon-alert" }))),
React.createElement(View, { className: "at-input__children" }, children))));
};
//# sourceMappingURL=Input.js.map