phx-react
Version:
PHX REACT
53 lines • 5.33 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXCheckbox = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var StyleCheckbox_1 = tslib_1.__importDefault(require("./styles/StyleCheckbox"));
var types_1 = require("../types");
var PHXCheckbox = function (_a) {
var activeData = _a.activeData, children = _a.children, className = _a.className, helpText = _a.helpText, label = _a.label, title = _a.title, expanded = _a.expanded, register = _a.register, onChange = _a.onChange, error = _a.error, errorType = _a.errorType, _b = _a.id, id = _b === void 0 ? 'checkbox' : _b, _c = _a.checkType, checkType = _c === void 0 ? 'default' : _c, disabled = _a.disabled, rest = tslib_1.__rest(_a, ["activeData", "children", "className", "helpText", "label", "title", "expanded", "register", "onChange", "error", "errorType", "id", "checkType", "disabled"]);
var _d = (0, react_1.useState)(false), show = _d[0], setShow = _d[1];
(0, react_1.useEffect)(function () {
// @ts-ignore
setShow(expanded);
}, [expanded]);
var handleChange = function (e) {
setShow(e.target.checked);
if (onChange) {
onChange(e);
}
};
var getBorderClasses = function (type) {
if (type !== 'with-border')
return '';
return (0, types_1.classNames)('py-1.5 rounded-lg border-[0.5px] border-gray-500 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');
};
var getColorByActiveData = function (isWithBorder) {
if (isWithBorder === void 0) { isWithBorder = false; }
var isDangerType = (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive);
if (isDangerType) {
return isWithBorder ? "border-[#F53E3E] text-[#F53E3E]" : "text-[#F53E3E]";
}
else {
return isWithBorder ? 'border-gray-500 text-indigo-800' : 'text-gray-700';
}
};
return (react_1["default"].createElement("div", { className: className },
react_1["default"].createElement(StyleCheckbox_1["default"], { activeData: activeData, id: id }),
label && react_1["default"].createElement("label", { className: (0, types_1.classNames)(getColorByActiveData(false), 'block text-xs font-normal') }, label),
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center py-1', getBorderClasses(checkType)) },
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData(false)) },
react_1["default"].createElement("input", tslib_1.__assign({}, rest, { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true), 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), id: id, onChange: handleChange }, register, { type: 'checkbox', disabled: disabled })),
react_1["default"].createElement("label", { className: "checkbox ".concat(checkType === 'with-border' && 'flex-1'), htmlFor: id },
react_1["default"].createElement("span", { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true), 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent') }),
react_1["default"].createElement("span", { className: (0, types_1.classNames)('ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false)) }, title)))),
helpText && show ? react_1["default"].createElement("div", { className: 'pl-7 text-xs font-light text-gray-400' }, helpText) : null,
show && children ? react_1["default"].createElement("div", { className: 'ml-7' }, children) : react_1["default"].createElement(react_1["default"].Fragment, 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' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
};
exports.PHXCheckbox = PHXCheckbox;
//# sourceMappingURL=Checkbox.js.map