zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
192 lines (167 loc) • 7.51 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _input = _interopRequireDefault(require("../components/input"));
var _inputInfo = _interopRequireDefault(require("./input-info"));
var _icon = _interopRequireDefault(require("./icon"));
var _constants = require("../../common/constants");
var _utils = require("../shared/utils");
var _utils2 = require("../../common/utils");
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; }
/* dts-imports
import { Calendar, ColorPicker, TextEditor } from 'zmp-core/types';
*/
/* dts-props
id?: string | number;
className?: string;
style?: React.CSSProperties;
type? : string
name? : string
value? : string | number | Array<any> | Date | Object
defaultValue? : string | number | Array<any>
inputmode? : string
placeholder? : string
inputId? : string | number
size? : string | number
accept? : string | number
autocomplete? : string
autocorrect? : string
autocapitalize? : string
spellcheck? : string
autofocus? : boolean
autosave? : string
checked? : boolean
disabled? : boolean
max? : string | number
min? : string | number
step? : string | number
maxlength? : string | number
minlength? : string | number
multiple? : boolean
readonly? : boolean
required? : boolean
pattern? : string
validate? : boolean | string
validateOnBlur? : boolean
onValidate? : Function
tabindex? : string | number
resizable? : boolean
minRows? : number
maxRows: number
clearButton? : boolean
noFormStoreData? : boolean
noStoreData? : boolean
ignoreStoreData? : boolean
errorMessage? : string
errorMessageForce? : boolean
info? : string
label?: string
outline? : boolean
wrap? : boolean
dropdown? : string | boolean
calendarParams? : Calendar.Parameters;
colorPickerParams? : ColorPicker.Parameters;
textEditorParams? : TextEditor.Parameters;
inputStyle? : React.CSSProperties
COLOR_PROPS
onCalendarChange? : (calendarValue?: any) => void
onColorPickerChange? : (colorPickerValue?: any) => void
onTextareaResize? : (event?: any) => void
onInputNotEmpty? : (event?: any) => void
onInputEmpty? : (event?: any) => void
onInputClear? : (event?: any) => void
onInput? : (...args: any[]) => void
onFocus? : (...args: any[]) => void
onBlur? : (...args: any[]) => void
onChange? : (...args: any[]) => void
onTextEditorChange? : (...args: any[]) => void
ref?: React.MutableRefObject<{el: HTMLElement | null}>;
CHILDREN_PROP
*/
var ZMPInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _classNames;
var inputRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(undefined),
valid = _useState[0],
setValid = _useState[1];
var _useState2 = (0, _react.useState)(false),
showPassword = _useState2[0],
setShowPassword = _useState2[1];
var _onValidate = props.onValidate,
info = props.info,
label = props.label,
type = props.type,
minRows = props.minRows,
_props$maxRows = props.maxRows,
maxRows = _props$maxRows === void 0 ? 8 : _props$maxRows;
(0, _react.useImperativeHandle)(ref, function () {
return inputRef.current;
});
var handleOnValidate = function handleOnValidate(isValid) {
setValid(isValid);
};
var handleClickShowPassword = function handleClickShowPassword() {
setShowPassword(!showPassword);
};
var isValidTextareaMinRows = (0, _react.useMemo)(function () {
return (0, _utils2.isNumber)(minRows) && minRows >= _constants.RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MIN && minRows <= _constants.RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MAX;
}, [minRows]);
var isValidTextareaMaxRows = (0, _react.useMemo)(function () {
return (0, _utils2.isNumber)(maxRows) && maxRows >= _constants.RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MIN && maxRows <= _constants.RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MAX;
}, [maxRows]);
var inputClasses = (0, _utils.classNames)((_classNames = {
'item-input-successful': valid
}, _classNames["textarea-rows-" + minRows] = type === 'textarea' && props.resizable && isValidTextareaMinRows, _classNames["textarea-max-rows-" + maxRows] = type === 'textarea' && props.resizable && isValidTextareaMaxRows, _classNames));
if (type === 'password') {
return /*#__PURE__*/_react.default.createElement("div", {
className: "zmp-input-wrapper"
}, label && /*#__PURE__*/_react.default.createElement("span", {
className: "item-title item-label"
}, label), /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, props, {
className: "item-input-password " + (valid ? 'item-input-successful' : ''),
info: /*#__PURE__*/_react.default.createElement(_inputInfo.default, {
info: info,
valid: valid
}),
type: showPassword ? 'text' : 'password',
onValidate: function onValidate(isValid) {
handleOnValidate(isValid);
if (_onValidate && typeof _onValidate === 'function') {
_onValidate(isValid);
}
}
})), /*#__PURE__*/_react.default.createElement("span", {
onClick: handleClickShowPassword,
className: "show-password-button"
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
zmp: "" + (showPassword ? _constants.ICON_EYE_FILL : _constants.ICON_EYE)
})));
}
return /*#__PURE__*/_react.default.createElement("div", {
className: "zmp-input-wrapper"
}, label && /*#__PURE__*/_react.default.createElement("span", {
className: "item-title item-label"
}, label), /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
ref: inputRef
}, props, {
className: inputClasses,
rows: type === 'textarea' && isValidTextareaMinRows ? minRows : undefined,
info: /*#__PURE__*/_react.default.createElement(_inputInfo.default, {
info: info,
valid: valid
}),
onValidate: function onValidate(isValid) {
handleOnValidate(isValid);
if (_onValidate && typeof _onValidate === 'function') {
_onValidate(isValid);
}
}
})));
});
ZMPInput.displayName = 'zmp-input';
var _default = ZMPInput;
exports.default = _default;