phx-react/dist/cjs/components/Select/Select.js

PHX REACT

"use strict";
exports.__esModule = true;
exports.PHXSelect = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var types_1 = require("../types");
var PHXSelect = function (_a) {
    var children = _a.children, className = _a.className, register = _a.register, label = _a.label, helpText = _a.helpText, error = _a.error, errorType = _a.errorType, errorMessageCustom = _a.errorMessageCustom, labelAction = _a.labelAction, rest = tslib_1.__rest(_a, ["children", "className", "register", "label", "helpText", "error", "errorType", "errorMessageCustom", "labelAction"]);
    var message = function (type) {
        var 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_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("select", tslib_1.__assign({}, register, rest, { className: (0, types_1.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 ? '' : 'hover:cursor-pointer') }), children),
        helpText ? react_1["default"].createElement("div", { className: 'mt-1 text-xs text-gray-500' }, helpText) : null,
        error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
            react_1["default"].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_1["default"].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_1["default"].createElement("p", { className: 'text-xs text-red-800' }, message(errorType)))) : null));
};
exports.PHXSelect = PHXSelect;
//# sourceMappingURL=Select.js.map