phx-react
Version:
PHX REACT
60 lines • 5.78 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { classNames } from '../types';
import { PHXButton } from '../Button';
import ErrorMessage from '../../commons/ErrorMessage';
import * as OutlineIcons from '@heroicons/react/24/outline';
export 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 = __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.createElement("div", { className: className },
React.createElement("div", { className: 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.createElement("label", null, label),
(labelAction === null || labelAction === void 0 ? void 0 : labelAction.content) && (React.createElement("p", { className: 'text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: labelAction.onClick }, labelAction.content))),
React.createElement("div", { className: classNames((buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction.content) ? 'flex gap-x-2' : '') },
React.createElement("div", { className: classNames((buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction.content) ? 'relative flex-1' : 'relative') },
React.createElement("input", __assign({}, register, rest, { disabled: disabled, className: 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-gray-50' : '', (!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.createElement("div", { className: 'absolute top-[0.425rem] left-2.5 text-gray-500 text-xs' }, prefix),
suffix && React.createElement("div", { className: 'absolute top-[0.425rem] right-2.5 text-gray-500 text-xs' }, suffix),
PrefixIconComponent && (React.createElement("div", { className: 'absolute inset-y-0 left-2.5 flex items-center text-gray-500' },
React.createElement(PrefixIconComponent, { className: 'h-4 w-4' }))),
SuffixIconComponent && (React.createElement("div", { className: 'absolute inset-y-0 right-2.5 flex items-center text-gray-500' },
React.createElement(SuffixIconComponent, { className: 'h-4 w-4' }))),
listOption && (React.createElement("div", { className: 'absolute inset-y-0 right-0 flex items-center' },
React.createElement("select", __assign({ id: 'unit' }, registerSelect, { className: 'h-full rounded-md border-0 bg-transparent py-0 pl-2 pr-7 text-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-xs font-normal' }), listOption.map(function (item) { return (React.createElement(React.Fragment, null,
React.createElement("option", { key: item.id, value: item.id, selected: selected === item.id }, item.name))); }))))),
(buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction.content) && (React.createElement(PHXButton, { onClick: buttonAction.onClick, secondary: true, size: 'micro' }, buttonAction.content))),
helpText ? React.createElement("div", { className: 'mt-1 pl-1 text-xs font-light text-gray-400' }, helpText) : null,
error && errorType ? React.createElement(ErrorMessage, { message: message(errorType) }) : null));
};
//# sourceMappingURL=Input.js.map