phx-react
Version:
PHX REACT
64 lines • 6.33 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXInput = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var types_1 = require("../types");
var Button_1 = require("../Button");
var ErrorMessage_1 = tslib_1.__importDefault(require("../../commons/ErrorMessage"));
var OutlineIcons = tslib_1.__importStar(require("@heroicons/react/24/outline"));
var PHXInput = function (_a) {
var className = _a.className, error = _a.error, errorType = _a.errorType, errorMessageCustom = _a.errorMessageCustom, helpText = _a.helpText, label = _a.label, register = _a.register, registerSelect = _a.registerSelect, listOption = _a.listOption, disabled = _a.disabled, selected = _a.selected, prefix = _a.prefix, suffix = _a.suffix, prefixIcon = _a.prefixIcon, suffixIcon = _a.suffixIcon, labelAction = _a.labelAction, buttonAction = _a.buttonAction, rest = tslib_1.__rest(_a, ["className", "error", "errorType", "errorMessageCustom", "helpText", "label", "register", "registerSelect", "listOption", "disabled", "selected", "prefix", "suffix", "prefixIcon", "suffixIcon", "labelAction", "buttonAction"]);
var message = function (type) {
var errorMessage = '';
switch (type) {
case 'required-field':
errorMessage = 'Vui lòng nhập thông tin';
break;
case 'validate-input-field':
errorMessage = 'Vui lòng nhập thông tin hợp lệ (độ dài 1 - 60 kí tự)';
break;
case 'duplicate-field':
errorMessage = 'Thông tin đã tồn tại';
break;
case 'validate-phone-number':
errorMessage = 'Số điện thoại chưa hợp lệ';
break;
case 'validate-input-email':
errorMessage = 'Định dạng email chưa đúng, vui lòng nhập lại';
break;
case 'custom-message':
errorMessage = errorMessageCustom;
break;
default:
break;
}
return errorMessage;
};
var PrefixIconComponent = prefixIcon ? OutlineIcons[prefixIcon] : null;
var SuffixIconComponent = suffixIcon ? OutlineIcons[suffixIcon] : null;
return (react_1["default"].createElement("div", { className: className },
react_1["default"].createElement("div", { className: (0, types_1.classNames)(label ? 'flex mb-1 text-xs font-normal text-gray-700' : 'hidden', label && (labelAction === null || labelAction === void 0 ? void 0 : labelAction.content) ? 'justify-between' : '') },
label && react_1["default"].createElement("label", null, label),
(labelAction === null || labelAction === void 0 ? void 0 : labelAction.content) && (react_1["default"].createElement("p", { className: 'text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: labelAction.onClick }, labelAction.content))),
react_1["default"].createElement("div", { className: (0, types_1.classNames)((buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction.content) ? 'flex gap-x-2' : '') },
react_1["default"].createElement("div", { className: (0, types_1.classNames)((buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction.content) ? 'relative flex-1' : 'relative') },
react_1["default"].createElement("input", tslib_1.__assign({}, register, rest, { disabled: disabled, className: (0, types_1.classNames)('block w-full border-[0.5px] rounded-lg border-gray-500 py-1.5 px-3 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'bg-neutral-200 border-[0px] hover:bg-neutral-200' : '', (!prefix || !prefixIcon) && 'pl-3', (!suffix || !suffixIcon) && 'pr-3'), style: {
paddingLeft: "".concat(prefix ? prefix.length * 10 + 12 : prefixIcon ? 28 : 12, "px"),
paddingRight: "".concat(suffix ? suffix.length * 10 + 12 : suffixIcon ? 28 : 12, "px")
} })),
prefix && react_1["default"].createElement("div", { className: 'absolute top-[0.425rem] left-2.5 text-gray-500 text-xs' }, prefix),
suffix && react_1["default"].createElement("div", { className: 'absolute top-[0.425rem] right-2.5 text-gray-500 text-xs' }, suffix),
PrefixIconComponent && (react_1["default"].createElement("div", { className: 'absolute inset-y-0 left-2.5 flex items-center text-gray-500' },
react_1["default"].createElement(PrefixIconComponent, { className: 'h-4 w-4' }))),
SuffixIconComponent && (react_1["default"].createElement("div", { className: 'absolute inset-y-0 right-2.5 flex items-center text-gray-500' },
react_1["default"].createElement(SuffixIconComponent, { className: 'h-4 w-4' }))),
listOption && (react_1["default"].createElement("div", { className: 'absolute inset-y-0 right-0 flex items-center' },
react_1["default"].createElement("select", tslib_1.__assign({ id: 'unit' }, registerSelect, { className: 'h-full rounded-md border-0 bg-transparent py-0 pl-2 pr-7 text-gray-600 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-xs font-normal' }), listOption.map(function (item) { return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("option", { key: item.id, value: item.id, selected: selected === item.id }, item.name))); }))))),
(buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction.content) && (react_1["default"].createElement(Button_1.PHXButton, { onClick: buttonAction.onClick, secondary: true, size: 'micro' }, buttonAction.content))),
helpText ? react_1["default"].createElement("div", { className: 'mt-1 text-xs text-gray-500' }, helpText) : null,
error && errorType ? react_1["default"].createElement(ErrorMessage_1["default"], { message: message(errorType) }) : null));
};
exports.PHXInput = PHXInput;
//# sourceMappingURL=Input.js.map