gui-one-nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
379 lines (377 loc) • 15.1 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["children", "type", "name", "defaultValue", "placeholder", "label", "labelClass", "labelWidth", "labelAlign", "colon", "inputAlign", "center", "required", "disabled", "readonly", "error", "maxlength", "leftIcon", "leftIconSize", "rightIcon", "rightIconSize", "clearable", "clearIcon", "clearSize", "border", "formatTrigger", "rules", "errorMessage", "errorMessageAlign", "showWordLimit", "autofocus", "style", "className", "rows", "slotButton", "slotInput", "onChange", "onBlur", "onFocus", "onClear", "formatter", "keypress", "onClickInput", "onClickLeftIcon", "onClickRightIcon", "onClick", "change", "blur", "focus", "clear", "clickInput", "clickLeftIcon", "clickRightIcon", "click", "iconClassPrefix", "iconFontClassName"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { forwardRef, useState, useRef, useLayoutEffect, useEffect, useImperativeHandle, useCallback } from 'react';
import { I as Icon } from './icon.taro-1d0d4fb7.js';
import { u as useConfig } from './configprovider.taro-6c7b3056.js';
import { C as ComponentDefaults } from './typings-1c5f2628.js';
function trimExtraChar(value, _char, regExp) {
var index = value.indexOf(_char);
if (index === -1) {
return value;
}
if (_char === '-' && index !== 0) {
return value.slice(0, index);
}
return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
}
function formatNumber(value) {
var allowDot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var allowMinus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (allowDot) {
value = trimExtraChar(value, '.', /\./g);
} else {
value = value.split('.')[0];
}
if (allowMinus) {
value = trimExtraChar(value, '-', /-/g);
} else {
value = value.replace(/-/, '');
}
var regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
return value.replace(regExp, '');
}
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
type: 'text',
name: '',
defaultValue: '',
placeholder: '',
label: '',
labelClass: '',
labelWidth: '80',
labelAlign: 'left',
colon: false,
inputAlign: 'left',
center: false,
required: false,
disabled: false,
readonly: false,
error: false,
maxlength: '9999',
leftIcon: '',
leftIconSize: '',
rightIcon: '',
rightIconSize: '',
clearable: false,
clearIcon: 'mask-close',
clearSize: '14',
border: true,
formatTrigger: 'onChange',
rules: [],
rows: null,
errorMessage: '',
errorMessageAlign: '',
showWordLimit: false,
autofocus: false,
slotButton: null,
slotInput: null
});
var Input = forwardRef(function (props, ref) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
children = _defaultProps$props.children,
type = _defaultProps$props.type,
name = _defaultProps$props.name,
defaultValue = _defaultProps$props.defaultValue,
placeholder = _defaultProps$props.placeholder,
label = _defaultProps$props.label,
labelClass = _defaultProps$props.labelClass,
labelWidth = _defaultProps$props.labelWidth,
labelAlign = _defaultProps$props.labelAlign,
colon = _defaultProps$props.colon,
inputAlign = _defaultProps$props.inputAlign,
center = _defaultProps$props.center,
required = _defaultProps$props.required,
disabled = _defaultProps$props.disabled,
readonly = _defaultProps$props.readonly,
error = _defaultProps$props.error,
maxlength = _defaultProps$props.maxlength,
leftIcon = _defaultProps$props.leftIcon,
leftIconSize = _defaultProps$props.leftIconSize,
rightIcon = _defaultProps$props.rightIcon,
rightIconSize = _defaultProps$props.rightIconSize,
clearable = _defaultProps$props.clearable,
clearIcon = _defaultProps$props.clearIcon,
clearSize = _defaultProps$props.clearSize,
border = _defaultProps$props.border,
formatTrigger = _defaultProps$props.formatTrigger,
rules = _defaultProps$props.rules,
errorMessage = _defaultProps$props.errorMessage,
errorMessageAlign = _defaultProps$props.errorMessageAlign,
showWordLimit = _defaultProps$props.showWordLimit,
autofocus = _defaultProps$props.autofocus,
style = _defaultProps$props.style,
className = _defaultProps$props.className,
rows = _defaultProps$props.rows,
slotButton = _defaultProps$props.slotButton,
slotInput = _defaultProps$props.slotInput,
onChange = _defaultProps$props.onChange,
onBlur = _defaultProps$props.onBlur,
onFocus = _defaultProps$props.onFocus,
onClear = _defaultProps$props.onClear,
formatter = _defaultProps$props.formatter,
keypress = _defaultProps$props.keypress,
onClickInput = _defaultProps$props.onClickInput,
onClickLeftIcon = _defaultProps$props.onClickLeftIcon,
onClickRightIcon = _defaultProps$props.onClickRightIcon,
_onClick = _defaultProps$props.onClick,
change = _defaultProps$props.change,
blur = _defaultProps$props.blur,
focus = _defaultProps$props.focus,
clear = _defaultProps$props.clear,
clickInput = _defaultProps$props.clickInput,
clickLeftIcon = _defaultProps$props.clickLeftIcon,
clickRightIcon = _defaultProps$props.clickRightIcon,
click = _defaultProps$props.click,
iconClassPrefix = _defaultProps$props.iconClassPrefix,
iconFontClassName = _defaultProps$props.iconFontClassName,
rest = _objectWithoutProperties(_defaultProps$props, _excluded);
locale.placeholder = placeholder || locale.placeholder;
var _useState = useState(''),
_useState2 = _slicedToArray(_useState, 2),
inputValue = _useState2[0],
SetInputValue = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
active = _useState4[0],
SetActive = _useState4[1];
var _useState5 = useState(''),
_useState6 = _slicedToArray(_useState5, 2),
classes = _useState6[0],
setClasses = _useState6[1];
var getModelValue = function getModelValue() {
return String(inputValue !== null && inputValue !== void 0 ? inputValue : '');
};
var inputRef = useRef(null);
useLayoutEffect(function () {
updateValue(getModelValue(), formatTrigger);
});
useEffect(function () {
setClasses(inputClass);
SetInputValue(defaultValue);
}, [defaultValue]);
useEffect(function () {
if (inputValue) {
updateValue(getModelValue());
resetValidation();
}
}, [inputValue]);
useImperativeHandle(ref, function () {
return inputRef.current;
});
var inputClass = useCallback(function () {
var prefixCls = 'nut-input';
return [prefixCls, "".concat(center ? 'center' : ''), "".concat(disabled ? "".concat(prefixCls, "-disabled") : ''), "".concat(required ? "".concat(prefixCls, "-required") : ''), "".concat(error ? "".concat(prefixCls, "-error") : ''), "".concat(border ? "".concat(prefixCls, "-border") : '')].filter(Boolean).join(' ');
}, [disabled, required, error, border]);
var updateValue = function updateValue(value) {
var _inputRef$current;
var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
var val = value;
if (type === 'digit' || type === 'tel') {
val = formatNumber(val, false, false);
}
if (type === 'number') {
val = formatNumber(val, true, true);
}
if (type === 'tel' && !formatter) {
var regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
var regNumber = /[^-0-9]/g;
val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, '');
}
if (formatter && trigger === formatTrigger) {
val = formatter(val);
}
if ((inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== val) {
inputRef.current.value = val;
}
// if (val !== defaultValue) {
SetInputValue(val);
// }
};
var handleFocus = function handleFocus(event) {
var val = event.target.value;
SetActive(true);
onFocus && onFocus(val, event);
focus && focus(val, event);
};
var handleInput = function handleInput(event) {
var val = event.target.value;
if (maxlength && val.length > Number(maxlength)) {
val = val.slice(0, Number(maxlength));
}
updateValue(val);
onChange && onChange(val, event);
change && change(val, event);
};
var handleBlur = function handleBlur(event) {
setTimeout(function () {
SetActive(false);
}, 200);
var val = event.target.value;
if (maxlength && val.length > Number(maxlength)) {
val = val.slice(0, Number(maxlength));
}
updateValue(getModelValue(), 'onBlur');
onBlur && onBlur(val, event);
blur && blur(val, event);
};
var handleClickInput = function handleClickInput(event) {
onClickInput && onClickInput(event);
clickInput && clickInput(event);
};
var handleClickLeftIcon = function handleClickLeftIcon(event) {
onClickLeftIcon && onClickLeftIcon(event);
clickLeftIcon && clickLeftIcon(event);
};
var handleClickRightIcon = function handleClickRightIcon(event) {
onClickRightIcon && onClickRightIcon(event);
clickRightIcon && clickRightIcon(event);
};
var resetValidation = function resetValidation() {};
var inputType = function inputType(type) {
if (type === 'number') {
return 'text';
}
if (type === 'digit') {
return 'tel';
}
return type;
};
var handleClear = function handleClear(event) {
updateValue('');
onClear && onClear('', event);
clear && clear('', event);
};
return React__default.createElement("div", _objectSpread(_objectSpread({
className: "".concat(classes, " ").concat(className || ''),
style: style
}, rest), {}, {
onClick: function onClick(e) {
_onClick && _onClick(e);
click && click(e);
}
}), slotInput ? React__default.createElement(React__default.Fragment, null, label ? React__default.createElement("div", {
className: "nut-input-label ".concat(labelClass),
style: {
width: "".concat(labelWidth, "px"),
textAlign: labelAlign
}
}, React__default.createElement("div", {
className: "label-string"
}, label, colon ? ':' : '')) : null, React__default.createElement("div", {
className: "nut-input-value"
}, React__default.createElement("div", {
className: "nut-input-inner",
onClick: function onClick(e) {
handleClickInput(e);
}
}, slotInput))) : React__default.createElement(React__default.Fragment, null, leftIcon && leftIcon.length > 0 ? React__default.createElement("div", {
className: "nut-input-left-icon",
onClick: function onClick(e) {
handleClickLeftIcon(e);
}
}, React__default.createElement(Icon, {
classPrefix: iconClassPrefix,
fontClassName: iconFontClassName,
name: leftIcon,
size: leftIconSize
})) : null, label ? React__default.createElement("div", {
className: "nut-input-label ".concat(labelClass),
style: {
width: "".concat(labelWidth, "px"),
textAlign: labelAlign
}
}, React__default.createElement("div", {
className: "label-string"
}, label, colon ? ':' : '')) : null, React__default.createElement("div", {
className: "nut-input-value"
}, React__default.createElement("div", {
className: "nut-input-inner",
onClick: function onClick(e) {
handleClickInput(e);
}
}, type === 'textarea' ? React__default.createElement("textarea", {
name: name,
className: "input-text",
ref: inputRef,
style: {
textAlign: inputAlign,
height: "".concat(Number(rows) * 24, "px")
},
maxLength: maxlength,
placeholder: placeholder || locale.placeholder,
disabled: disabled,
readOnly: readonly,
value: inputValue,
autoFocus: autofocus,
onBlur: function onBlur(e) {
handleBlur(e);
},
onFocus: function onFocus(e) {
handleFocus(e);
},
onInput: function onInput(e) {
handleInput(e);
}
}) : React__default.createElement("input", {
name: name,
className: "input-text",
ref: inputRef,
style: {
textAlign: inputAlign
},
type: inputType(type),
maxLength: maxlength,
placeholder: placeholder || locale.placeholder,
disabled: disabled,
readOnly: readonly,
value: inputValue,
autoFocus: autofocus,
onBlur: function onBlur(e) {
handleBlur(e);
},
onFocus: function onFocus(e) {
handleFocus(e);
},
onInput: function onInput(e) {
handleInput(e);
}
}), clearable && !readonly && active && inputValue.length > 0 ? React__default.createElement(Icon, {
classPrefix: iconClassPrefix,
fontClassName: iconFontClassName,
className: "nut-input-clear",
name: clearIcon,
size: clearSize,
onClick: function onClick(e) {
handleClear(e);
}
}) : null, rightIcon && rightIcon.length > 0 ? React__default.createElement("div", {
className: "nut-input-right-icon",
onClick: function onClick(e) {
handleClickRightIcon(e);
}
}, React__default.createElement(Icon, {
classPrefix: iconClassPrefix,
fontClassName: iconFontClassName,
name: rightIcon,
size: rightIconSize
})) : null, slotButton ? React__default.createElement("div", {
className: "nut-input-button"
}, slotButton) : null), showWordLimit && maxlength ? React__default.createElement("div", {
className: "nut-input-word-limit"
}, React__default.createElement("span", {
className: "nut-input-word-num"
}, inputValue ? inputValue.length : 0), "/", maxlength) : null, errorMessage ? React__default.createElement("div", {
className: "nut-input-error-message",
style: {
textAlign: errorMessageAlign
}
}, errorMessage) : null)));
});
Input.defaultProps = defaultProps;
Input.displayName = 'NutInput';
export { Input as I };