phx-react
Version:
PHX REACT
32 lines • 2.64 kB
JavaScript
import React from 'react';
import { classNames } from '../types';
export const PHXSelect = ({ children, className, register, label, helpText, error, errorType, errorMessageCustom, labelAction, ...rest }) => {
const message = (type) => {
let errorMessage = '';
switch (type) {
case 'required-field':
errorMessage = 'Vui lòng chọn thông tin';
break;
case 'duplicate-field':
errorMessage = 'Thông tin đã tồn tại';
break;
case 'custom-message':
errorMessage = errorMessageCustom;
break;
default:
break;
}
return errorMessage;
};
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("select", { ...register, ...rest, className: classNames('mt-1 block w-full rounded-lg border-[0.5px] border-gray-500 py-1.5 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' : '', rest.disabled ? 'bg-neutral-200 border-[0px] hover:bg-neutral-200' : 'hover:cursor-pointer') }, children),
helpText ? React.createElement("div", { className: 'mt-1 text-xs text-gray-500' }, helpText) : null,
error && errorType ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
React.createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
React.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
React.createElement("p", { className: 'text-xs text-red-800' }, message(errorType)))) : null));
};
//# sourceMappingURL=Select.js.map