@amaui/ui-react
Version:
UI for React
165 lines (164 loc) • 8.33 kB
JavaScript
;
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const TextField_1 = __importDefault(require("../TextField"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {}
}), { name: 'amaui-AdvancedTextField' });
const AdvancedTextField = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiAdvancedTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
const { valueDefault, value: value_, validate, prefix, mask, maskProactive = true, thousand, thousandSeparator = '.', onChange: onChange_, TextFieldProps, className } = props, other = __rest(props, ["valueDefault", "value", "validate", "prefix", "mask", "maskProactive", "thousand", "thousandSeparator", "onChange", "TextFieldProps", "className"]);
const [init, setInit] = react_1.default.useState(false);
const [value, setValue] = react_1.default.useState(valueDefault !== undefined ? valueDefault : value_);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined)
};
react_1.default.useEffect(() => {
setInit(true);
}, []);
react_1.default.useEffect(() => {
if (init) {
if (value_ !== value)
setValue(value_);
}
}, [value_]);
const maskConstsFromIndex = (index) => {
const values = [];
for (const item of mask.slice(index)) {
if (!(0, utils_1.is)('simple', item))
break;
values.push(item);
}
return values;
};
const onChange = (value__) => {
var _a, _b;
let valueNew = value__;
// validate
if (!(mask || thousand) && (0, utils_1.is)('function', validate)) {
try {
if (!validate(valueNew))
return;
}
catch (error) {
return;
}
}
// thousand
// clean value from prefix and thousand separator
// make value into value with thousand separators
// make valueNew with prefix + valueNew
if (!['', ' ', '+', '-', prefix, `${prefix} `, `${prefix} `, `${prefix}+`, `${prefix}-`, undefined].includes(valueNew)) {
if (thousand) {
let previousValue = valueNew.replace(prefix, '').replace(new RegExp(`\\${thousandSeparator}`, 'g'), '');
let addition = '';
if (!(0, utils_1.is)('number', +previousValue) || +previousValue >= Number.MAX_SAFE_INTEGER)
return;
if ((0, utils_1.is)('function', validate)) {
try {
if (!validate(valueNew))
return;
}
catch (error) {
return;
}
}
const decimal = previousValue.includes('.');
[previousValue, addition] = previousValue.split('.');
valueNew = (0, utils_1.numberWithCommas)(previousValue, thousandSeparator);
valueNew = `${prefix !== undefined ? prefix : ''}${valueNew}${decimal ? '.' : ''}${addition !== undefined ? addition : ''}`;
}
// mask
else if ((0, utils_1.is)('array', mask)) {
let previousValue = valueNew.replace(prefix, '');
previousValue = (valueNew || '').split('').filter(Boolean);
valueNew = '';
// Update value based on mask value
for (let i = 0; i < mask.length; i++) {
if (!previousValue.length)
break;
// Constant
if ((0, utils_1.is)('string', mask[i])) {
if (valueNew[i] !== mask[i])
valueNew += mask[i];
if (previousValue[0] === mask[i])
previousValue.shift();
}
else {
let added = false;
if ((0, utils_1.is)('function', mask[i])) {
if ((0, utils_1.Try)(() => mask[i](previousValue[0], valueNew, value__))) {
valueNew += previousValue[0];
added = true;
}
}
else if ((0, utils_1.is)('object', mask[i])) {
const { pattern } = mask[i];
if (new RegExp(pattern).test(previousValue[0])) {
valueNew += previousValue[0];
added = true;
}
}
// Only if new values are added
// do not use on removing values
if (added && ((_a = String(value__)) === null || _a === void 0 ? void 0 : _a.length) >= ((_b = String(value)) === null || _b === void 0 ? void 0 : _b.length) && maskProactive) {
const items = maskConstsFromIndex(i + 1);
items.forEach((item) => valueNew += item);
}
previousValue.shift();
}
}
}
}
// prefix
if (prefix !== undefined) {
if (['', ' ', prefix, `${prefix} `, undefined].includes(valueNew))
valueNew = '';
else if (!valueNew.startsWith(prefix))
valueNew = `${prefix}${valueNew}`;
}
// Update inner or controlled
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange_))
onChange_(valueNew);
};
return ((0, jsx_runtime_1.jsx)(TextField, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, value: value, onChange: onChange, controlled: true, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('AdvancedTextField', theme) && [
'amaui-AdvancedTextField-root'
],
className,
classes.root
]) }, other, TextFieldProps)));
});
AdvancedTextField.displayName = 'amaui-AdvancedTextField';
exports.default = AdvancedTextField;