@bytedance/mona-client-web
Version:
web for mona
134 lines • 6.57 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useCallback, useEffect, useRef, useState } from 'react';
import styles from './index.module.less';
import { useHandlers } from '../hooks';
import { plainStyle } from './utils';
import { useFormContext } from '../Form/hooks';
var Input = function (props) {
var children = props.children, _a = props.name, name = _a === void 0 ? '' : _a, _b = props.value, initValue = _b === void 0 ? '' : _b, _c = props.type, type = _c === void 0 ? 'text' : _c, _d = props.password, password = _d === void 0 ? false : _d, placeholderStyle = props.placeholderStyle, _e = props.maxLength, maxLength = _e === void 0 ? 140 : _e, _f = props.focus, focus = _f === void 0 ? false : _f, _g = props.cursorSpacing, cursorSpacing = _g === void 0 ? 0 : _g, _h = props.cursor, cursor = _h === void 0 ? -1 : _h, _j = props.selectionStart, selectionStart = _j === void 0 ? -1 : _j, _k = props.selectionEnd, selectionEnd = _k === void 0 ? -1 : _k, onInput = props.onInput, onFocus = props.onFocus, onBlur = props.onBlur, onConfirm = props.onConfirm, _l = props.adjustPosition, adjustPosition = _l === void 0 ? true : _l, _m = props.confirmType, confirmType = _m === void 0 ? 'done' : _m, restProps = __rest(props, ["children", "name", "value", "type", "password", "placeholderStyle", "maxLength", "focus", "cursorSpacing", "cursor", "selectionStart", "selectionEnd", "onInput", "onFocus", "onBlur", "onConfirm", "adjustPosition", "confirmType"]);
var _o = useHandlers(restProps), handleClassName = _o.handleClassName, handlerProps = __rest(_o, ["handleClassName"]);
var inputRef = useRef(null);
var _p = useState(initValue), value = _p[0], setValue = _p[1];
useEffect(function () {
setValue(value);
}, [value]);
var reset = useCallback(function () { return setValue(''); }, []);
useFormContext(name, value, reset);
var handleInput = function (e) {
var newValue = e.target.value;
setValue(newValue);
if (typeof onInput === 'function') {
onInput({
target: { id: '', tagName: 'input', dataset: {} },
currentTarget: { id: '', tagName: 'input', dataset: {} },
timeStamp: e.timeStamp,
type: 'input',
detail: {
value: newValue,
cursor: e.target.selectionStart || 0
}
});
}
};
var handleFocus = function (e) {
if (typeof onFocus === 'function') {
onFocus({
target: { id: '', tagName: 'input', dataset: {} },
currentTarget: { id: '', tagName: 'input', dataset: {} },
timeStamp: e.timeStamp,
type: 'focus',
detail: {
value: value,
// TODO
height: -1
}
});
}
};
var handleBlur = function (e) {
if (typeof onBlur === 'function') {
onBlur({
target: { id: '', tagName: 'input', dataset: {} },
currentTarget: { id: '', tagName: 'input', dataset: {} },
timeStamp: e.timeStamp,
type: 'blur',
detail: {
value: value,
}
});
}
};
var handleConfirm = function (e) {
if (e.keyCode === 13 && typeof onConfirm === 'function') {
onConfirm({
target: { id: '', tagName: 'input', dataset: {} },
currentTarget: { id: '', tagName: 'input', dataset: {} },
timeStamp: e.timeStamp,
type: 'confirm',
detail: {
value: value,
}
});
}
};
// handle focus
useEffect(function () {
if (inputRef.current && focus) {
inputRef.current.focus();
}
}, [focus, inputRef.current]);
// handle placeholderStyle
useEffect(function () {
// TODO: OPTIMIZE, this may cause memo leak
if (placeholderStyle) {
var style = plainStyle(placeholderStyle);
var $style = document.getElementsByTagName("style")[0];
if (!$style) {
$style = document.createElement("style");
document.head.appendChild($style);
}
var sheet = $style.sheet;
var index = (sheet === null || sheet === void 0 ? void 0 : sheet.cssRules.length) || 0;
sheet === null || sheet === void 0 ? void 0 : sheet.insertRule(".".concat(styles.input, "::placeholder { ").concat(style, " }"), index);
}
}, [placeholderStyle]);
// handle focus
useEffect(function () {
var $input = inputRef.current;
if ($input && focus) {
$input.focus();
if (cursor && selectionStart === -1 && selectionEnd === -1) {
$input.selectionStart = $input.selectionEnd = cursor;
}
else if (selectionStart !== -1 || selectionEnd !== -1) {
$input.selectionStart = selectionStart;
$input.selectionEnd = selectionEnd;
}
}
}, [inputRef.current, selectionStart, selectionEnd, cursor, focus]);
var inputType = password ? 'password' : type === 'text' ? 'text' : 'number';
return React.createElement("input", __assign({ ref: inputRef, enterKeyHint: confirmType, maxLength: maxLength, name: name, value: value, type: inputType, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleConfirm, onInput: handleInput, className: handleClassName(styles.input) }, handlerProps));
};
export default Input;
//# sourceMappingURL=index.js.map