@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
377 lines (374 loc) • 16.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Field = Field;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _taro = require("@tarojs/taro");
var _react = require("react");
var _components = require("@tarojs/components");
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _cell = require("../cell");
var _icon = require("../icon");
var _utils2 = require("../utils");
var _defaultProps = require("../default-props");
var computed = _interopRequireWildcard(require("./wxs"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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) { (0, _defineProperty2.default)(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; }
var FIELD_INDEX = 0;
function Field(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Field),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var ref = (0, _react.useRef)({
focused: false
});
var _useState3 = (0, _react.useState)({
// innerValue: '',
showClear: false,
unitag: 'van-field'
}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
state = _useState4[0],
setState = _useState4[1];
var _useState5 = (0, _react.useState)(''),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
innerValue = _useState6[0],
setInnerValue = _useState6[1];
var showClear = state.showClear;
var _d$props = _objectSpread(_objectSpread({}, d), props),
size = _d$props.size,
leftIcon = _d$props.leftIcon,
center = _d$props.center,
_d$props$border = _d$props.border,
border = _d$props$border === void 0 ? true : _d$props$border,
isLink = _d$props.isLink,
required = _d$props.required,
clickable = _d$props.clickable,
className = _d$props.className,
_d$props$titleWidth = _d$props.titleWidth,
titleWidth = _d$props$titleWidth === void 0 ? '6.2em' : _d$props$titleWidth,
style = _d$props.style,
arrowDirection = _d$props.arrowDirection,
label = _d$props.label,
disabled = _d$props.disabled,
_d$props$type = _d$props.type,
type = _d$props$type === void 0 ? 'text' : _d$props$type,
inputAlign = _d$props.inputAlign,
_d$props$clearIcon = _d$props.clearIcon,
clearIcon = _d$props$clearIcon === void 0 ? 'clear' : _d$props$clearIcon,
rightIcon = _d$props.rightIcon,
icon = _d$props.icon,
iconClass = _d$props.iconClass,
value = _d$props.value,
maxlength = _d$props.maxlength,
showWordLimit = _d$props.showWordLimit,
errorMessageAlign = _d$props.errorMessageAlign,
error = _d$props.error,
errorMessage = _d$props.errorMessage,
fixed = _d$props.fixed,
focus = _d$props.focus,
_d$props$cursor = _d$props.cursor,
cursor = _d$props$cursor === void 0 ? -1 : _d$props$cursor,
autoFocus = _d$props.autoFocus,
readonly = _d$props.readonly,
placeholder = _d$props.placeholder,
placeholderStyle = _d$props.placeholderStyle,
placeholderClass = _d$props.placeholderClass,
autosize = _d$props.autosize,
_d$props$cursorSpacin = _d$props.cursorSpacing,
cursorSpacing = _d$props$cursorSpacin === void 0 ? 50 : _d$props$cursorSpacin,
_d$props$adjustPositi = _d$props.adjustPosition,
adjustPosition = _d$props$adjustPositi === void 0 ? true : _d$props$adjustPositi,
_d$props$showConfirmB = _d$props.showConfirmBar,
showConfirmBar = _d$props$showConfirmB === void 0 ? true : _d$props$showConfirmB,
holdKeyboard = _d$props.holdKeyboard,
_d$props$selectionEnd = _d$props.selectionEnd,
selectionEnd = _d$props$selectionEnd === void 0 ? -1 : _d$props$selectionEnd,
_d$props$selectionSta = _d$props.selectionStart,
selectionStart = _d$props$selectionSta === void 0 ? -1 : _d$props$selectionSta,
alwaysEmbed = _d$props.alwaysEmbed,
_d$props$disableDefau = _d$props.disableDefaultPadding,
disableDefaultPadding = _d$props$disableDefau === void 0 ? true : _d$props$disableDefau,
confirmType = _d$props.confirmType,
confirmHold = _d$props.confirmHold,
password = _d$props.password,
clearable = _d$props.clearable,
_d$props$clearTrigger = _d$props.clearTrigger,
clearTrigger = _d$props$clearTrigger === void 0 ? 'focus' : _d$props$clearTrigger,
renderLeftIcon = _d$props.renderLeftIcon,
renderTitle = _d$props.renderTitle,
renderInput = _d$props.renderInput,
renderRightIcon = _d$props.renderRightIcon,
renderIcon = _d$props.renderIcon,
renderButton = _d$props.renderButton,
onChange = _d$props.onChange,
onFocus = _d$props.onFocus,
onBlur = _d$props.onBlur,
onClear = _d$props.onClear,
onConfirm = _d$props.onConfirm,
onInput = _d$props.onInput,
onClickInput = _d$props.onClickInput,
onClickIcon = _d$props.onClickIcon,
onLineChange = _d$props.onLineChange,
onKeyboardHeightChange = _d$props.onKeyboardHeightChange;
(0, _react.useEffect)(function () {
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
unitag: "van-field_uni_".concat(FIELD_INDEX++)
});
});
}, []);
var adjustTextareaSize = function adjustTextareaSize() {
var _taroTextarea$childre;
var taroTextarea = document.querySelector(".".concat(state.unitag));
var textarea = taroTextarea === null || taroTextarea === void 0 ? void 0 : (_taroTextarea$childre = taroTextarea.children) === null || _taroTextarea$childre === void 0 ? void 0 : _taroTextarea$childre[0];
if (type === 'textarea' && autosize && textarea) {
// 须等待textarea渲染value才有滚动高度
setTimeout(function () {
(0, _utils2.resizeTextarea)(textarea, autosize);
});
}
};
var emitChange = function emitChange(event) {
event = event || {
detail: {
value: ''
}
};
Object.defineProperty(event, 'detail', {
value: event.detail.value
});
setInnerValue(event.detail || '');
onInput === null || onInput === void 0 ? void 0 : onInput(event);
onChange === null || onChange === void 0 ? void 0 : onChange(event);
};
var setShowClear = function setShowClear(value) {
var showClear = false;
if (clearable && !readonly) {
var hasValue = !!value;
var trigger = clearTrigger === 'always' || clearTrigger === 'focus' && ref.current.focused;
showClear = hasValue && trigger;
}
setState(function (pre) {
return _objectSpread(_objectSpread({}, pre), {}, {
showClear: showClear
});
});
};
var _input = function _input(event) {
var _ref = event.detail || {},
_ref$value = _ref.value,
value = _ref$value === void 0 ? '' : _ref$value;
setShowClear(value);
emitChange(event);
if (process.env.TARO_ENV === 'weapp') return value; // 微信2.1优化输入性能
};
var _focus = function _focus(event) {
ref.current.focused = true;
setTimeout(function () {
setShowClear(innerValue);
});
Object.defineProperty(event, 'detail', {
value: event.detail.value
});
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
};
var _blur = function _blur(event) {
ref.current.focused = false;
setShowClear(innerValue);
Object.defineProperty(event, 'detail', {
value: event.detail.value
});
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
};
var _clear = function _clear() {
setInnerValue('');
setShowClear('');
(0, _taro.nextTick)(function () {
emitChange();
onClear === null || onClear === void 0 ? void 0 : onClear();
});
};
var _confirm = function _confirm(event) {
var _ref2 = event.detail || {},
_ref2$value = _ref2.value,
value = _ref2$value === void 0 ? '' : _ref2$value;
setShowClear(value);
Object.defineProperty(event, 'detail', {
value: event.detail.value
});
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(event);
};
// setValue(value) {
// this.value = value
// this.setShowClear()
// if (value === '') {
// this.setData({ innerValue: '' })
// }
// this.emitChange()
// },
(0, _react.useEffect)(function () {
setShowClear(innerValue);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[readonly, clearable]);
(0, _react.useEffect)(function () {
setInnerValue(value !== null && value !== void 0 ? value : '');
}, [value]);
(0, _react.useEffect)(function () {
if (process.env.TARO_ENV === 'h5' && innerValue) {
adjustTextareaSize();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [innerValue]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_cell.Cell, {
size: size,
icon: leftIcon,
center: center,
border: border,
isLink: isLink,
required: required,
clickable: clickable,
titleWidth: titleWidth,
titleStyle: {
marginRight: '12px'
},
style: style,
arrowDirection: arrowDirection,
className: 'van-field ' + "".concat(className || ''),
renderIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: renderLeftIcon
}),
renderTitle: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: 'label-class ' + utils.bem('field__label', {
disabled: disabled
}),
children: label
}) : renderTitle
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: utils.bem('field__body', [type]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: utils.bem('field__control', [inputAlign, 'custom']),
onClick: onClickInput,
children: renderInput
}), type === 'textarea' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Textarea, {
className: utils.bem('field__control', [inputAlign, type, {
disabled: disabled,
error: error
}]) + " input-class ".concat(autosize ? 'autosize' : '', " ").concat(state.unitag) + "".concat(process.env.TARO_ENV !== 'weapp' && autosize ? ' autosize-height' : ''),
fixed: fixed,
focus: focus,
cursor: cursor,
value: innerValue,
autoFocus: autoFocus,
disabled: disabled || readonly,
maxlength: maxlength,
placeholder: placeholder,
placeholderStyle: placeholderStyle,
placeholderClass: "".concat(utils.bem('field__placeholder', {
error: error,
disabled: disabled
}), " ").concat(placeholderClass || '')
// eslint-disable-next-line
// @ts-ignore
,
nativeProps: autosize ? {
rows: 1
} : {},
autoHeight: !!autosize,
style: computed.inputStyle(autosize),
cursorSpacing: cursorSpacing,
adjustPosition: adjustPosition,
showConfirmBar: showConfirmBar,
holdKeyboard: holdKeyboard,
selectionEnd: selectionEnd,
selectionStart: selectionStart,
disableDefaultPadding: disableDefaultPadding,
onInput: _input,
onClick: onClickInput,
onBlur: _blur,
onFocus: _focus,
onConfirm: _confirm,
onLineChange: onLineChange,
onKeyboardHeightChange: onKeyboardHeightChange,
showCount: ""
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
className: utils.bem('field__control', [inputAlign, {
disabled: disabled,
error: error
}]) + ' input-class'
// eslint-disable-next-line
// @ts-ignore
,
type: type,
focus: focus,
cursor: cursor,
value: innerValue,
autoFocus: autoFocus,
disabled: disabled || readonly,
maxlength: maxlength,
placeholder: placeholder,
placeholderStyle: placeholderStyle,
placeholderClass: "".concat(utils.bem('field__placeholder', {
error: error,
disabled: disabled
}), " ").concat(placeholderClass || ''),
confirmType: confirmType,
confirmHold: confirmHold,
holdKeyboard: holdKeyboard,
cursorSpacing: cursorSpacing,
adjustPosition: adjustPosition,
selectionEnd: selectionEnd,
selectionStart: selectionStart,
alwaysEmbed: alwaysEmbed,
password: password || type === 'password',
onInput: _input,
onClick: onClickInput,
onBlur: _blur,
onFocus: _focus,
onConfirm: _confirm,
onKeyboardHeightChange: onKeyboardHeightChange
}), showClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Icon, {
name: clearIcon,
className: "van-field__clear-root van-field__icon-root",
onTouchStart: _clear
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-field__icon-container",
onClick: onClickIcon,
children: [(rightIcon || icon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Icon, {
name: rightIcon || icon,
className: 'van-field__icon-root ' + iconClass + ' right-icon-class'
}), renderRightIcon, renderIcon]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-field__button",
children: renderButton
})]
}), showWordLimit && maxlength && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-field__word-limit",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: utils.bem('field__word-num', {
full: innerValue.length >= maxlength
}),
children: innerValue.length >= maxlength ? maxlength : innerValue.length
}), '/' + maxlength]
}), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: utils.bem('field__error-message', [errorMessageAlign, {
disabled: disabled,
error: error
}]),
children: errorMessage
})]
});
}
var _default = Field;
exports.default = _default;