@kbfront/kb-ui
Version:
KB React UI Library
188 lines • 10 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 });
exports.EFormControlType = exports.ESwitchSize = void 0;
var react_1 = __importStar(require("react"));
var Icon_1 = __importDefault(require("components/Icon"));
var classnames_1 = require("utils/classnames");
var uid_1 = require("utils/toastr/uid");
var index_1 = require("../../enum/index");
require("./index.scss");
var ESwitchSize;
(function (ESwitchSize) {
ESwitchSize["XS"] = "xs";
ESwitchSize["S"] = "s";
ESwitchSize["M"] = "m";
ESwitchSize["L"] = "l";
})(ESwitchSize = exports.ESwitchSize || (exports.ESwitchSize = {}));
var EFormControlType;
(function (EFormControlType) {
EFormControlType["PASSWORD"] = "password";
EFormControlType["CHECKBOX"] = "checkbox";
EFormControlType["RADIO"] = "radio";
EFormControlType["SEARCH"] = "search";
EFormControlType["SWITCH"] = "switch";
EFormControlType["EMAIL"] = "email";
EFormControlType["TEXT"] = "text";
EFormControlType["TEXTAREA"] = "textarea";
EFormControlType["DATE"] = "date";
EFormControlType["COLOR"] = "color";
EFormControlType["HIDDEN"] = "hidden";
EFormControlType["NUMBER"] = "number";
EFormControlType["TEL"] = "tel";
})(EFormControlType = exports.EFormControlType || (exports.EFormControlType = {}));
var FormControl = react_1.forwardRef(function (props, ref) {
var _a, _b;
var label = props.label, _c = props.className, className = _c === void 0 ? "" : _c, _d = props.type, type = _d === void 0 ? EFormControlType.TEXT : _d, _e = props.color, color = _e === void 0 ? index_1.EColor.SECONDARY : _e, icon = props.icon, _f = props.iconPosition, iconPosition = _f === void 0 ? index_1.EIconPosition.RIGHT : _f, _g = props.switchSize, switchSize = _g === void 0 ? ESwitchSize.S : _g, _h = props.switchOff, switchOff = _h === void 0 ? "" : _h, _j = props.switchOn, switchOn = _j === void 0 ? "" : _j, amount = props.amount, _mask = props._mask, errorText = props.errorText, _id = props._id, iconAction = props.iconAction, phoneMask = props.phoneMask, _k = props.countryCode, countryCode = _k === void 0 ? "+994" : _k, others = __rest(props, ["label", "className", "type", "color", "icon", "iconPosition", "switchSize", "switchOff", "switchOn", "amount", "_mask", "errorText", "_id", "iconAction", "phoneMask", "countryCode"]);
var handleClick = function (e) {
e.target.previousSibling.click();
};
var unique = uid_1.uid();
var getPhoneMask = function (e) {
if (_mask === "true") {
var mask_1 = e.target.value
.replace(/\D/g, "")
.match(/(\d{0,3})(\d{0,2})(\d{0,3})(\d{0,2})(\d{0,2})/);
var val_1 = "";
mask_1.map(function (x, i) {
if (i != 0) {
if (i === 1) {
val_1 += "+" + mask_1[i];
}
else {
val_1 += mask_1[i]
? i == 2
? " (" + mask_1[i] + ") "
: i == 3
? mask_1[i]
: "-" + mask_1[i]
: "";
}
}
});
e.target.value = val_1;
return e.target.value.match(/\d/gi);
}
};
var _l = react_1.useState(""), phoneValue = _l[0], setPhoneValue = _l[1];
var _m = react_1.useState(""), keyType = _m[0], setKeyType = _m[1];
var changePhoneMaskHandler = function (e) {
var value = e.target.value;
// Because 'e' is number
if ((!isNaN(+keyType) && keyType !== "e") || keyType === "Backspace") {
setPhoneValue(value);
if ((value.length === 2 || value.length === 6 || value.length === 9) &&
keyType !== "Backspace") {
setPhoneValue(function (prev) { return prev + " "; });
}
}
else if (value.length === 0) {
setPhoneValue("");
}
};
if (phoneMask) {
return (react_1.default.createElement("div", { className: classnames_1.classNames("kb-form-control", className) },
label && (react_1.default.createElement("label", { htmlFor: _id || "kb-select_" + unique },
" ",
label,
" ")),
react_1.default.createElement("div", { className: classnames_1.classNames("input-block", "phone-mask", (_a = {},
_a[iconPosition] = icon,
_a)) },
react_1.default.createElement("div", { className: "country-phone " + (phoneValue ? "filled" : "") + " " }, countryCode),
react_1.default.createElement("input", __assign({ className: "color-" + color, id: _id || "kb-select_" + unique }, others, { type: type, ref: ref }, { value: phoneValue, onChange: changePhoneMaskHandler, onKeyDown: function (e) { return setKeyType(e.key); }, maxLength: 12 })),
icon && react_1.default.createElement(Icon_1.default, { path: icon }),
amount && react_1.default.createElement("i", { className: amount ? "bordered" : "" },
" ",
amount,
" ")),
errorText && react_1.default.createElement("span", null,
" ",
errorText,
" ")));
}
var checkBoxRadio = (react_1.default.createElement("div", { className: "kb-" + type + " size-" + switchSize + " " + className },
react_1.default.createElement("input", __assign({}, others, { ref: ref }, { type: type === EFormControlType.SWITCH ? EFormControlType.CHECKBOX : type })),
react_1.default.createElement("label", { "switch-on": switchOn, "switch-off": switchOff, onClick: handleClick, className: "color-" + color },
icon && iconPosition === index_1.EIconPosition.LEFT && (react_1.default.createElement(Icon_1.default, { onClick: iconAction, path: icon })),
type !== EFormControlType.SWITCH && label,
icon && iconPosition === index_1.EIconPosition.RIGHT && (react_1.default.createElement(Icon_1.default, { onClick: iconAction, path: icon })))));
var inputForm = (react_1.default.createElement("div", { className: classnames_1.classNames("kb-form-control", className) },
label && (react_1.default.createElement("label", { htmlFor: _id || "kb-select_" + unique },
" ",
label,
" ")),
react_1.default.createElement("div", { className: classnames_1.classNames("input-block", (_b = {}, _b[iconPosition] = icon, _b)) },
react_1.default.createElement("input", __assign({ className: "color-" + color, id: _id || "kb-select_" + unique }, others, { type: type, ref: ref }, { onKeyUp: getPhoneMask })),
icon && react_1.default.createElement(Icon_1.default, { onClick: iconAction, path: icon }),
amount && react_1.default.createElement("i", { className: amount ? "bordered" : "" },
" ",
amount,
" ")),
errorText && react_1.default.createElement("span", null,
" ",
errorText,
" ")));
var textArea = (react_1.default.createElement("div", { className: "kb-form-control " + className },
label && (react_1.default.createElement("label", { htmlFor: _id || "kb-select_" + unique },
" ",
label,
" ")),
react_1.default.createElement("textarea", __assign({}, { ref: ref }, others, { className: "color-" + color, id: _id || "kb-select_" + unique })),
errorText && react_1.default.createElement("span", null,
" ",
errorText,
" ")));
return (react_1.default.createElement(react_1.default.Fragment, null, type === EFormControlType.CHECKBOX ||
type === EFormControlType.RADIO ||
type === EFormControlType.SWITCH
? checkBoxRadio
: type !== EFormControlType.TEXTAREA
? inputForm
: textArea));
});
exports.default = FormControl;
//# sourceMappingURL=index.js.map