phx-react
Version:
PHX REACT
49 lines • 4.86 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useEffect, useState } from 'react';
import StyledCheckboxLayout from './styles/StyleCheckbox';
import { classNames } from '../types';
export 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 = __rest(_a, ["activeData", "children", "className", "helpText", "label", "title", "expanded", "register", "onChange", "error", "errorType", "id", "checkType", "disabled"]);
var _d = useState(false), show = _d[0], setShow = _d[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 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.createElement("div", { className: className },
React.createElement(StyledCheckboxLayout, { activeData: activeData, id: id }),
label && React.createElement("label", { className: classNames(getColorByActiveData(false), 'block text-xs font-normal') }, label),
React.createElement("div", { className: classNames('flex items-center py-1', getBorderClasses(checkType)) },
React.createElement("div", { className: classNames('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData(false)) },
React.createElement("input", __assign({}, rest, { className: 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.createElement("label", { className: "checkbox ".concat(checkType === 'with-border' && 'flex-1'), htmlFor: id },
React.createElement("span", { className: 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.createElement("span", { className: classNames('ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false)) }, title)))),
helpText && show ? React.createElement("div", { className: 'pl-7 text-xs font-light text-gray-400' }, helpText) : null,
show && children ? React.createElement("div", { className: 'ml-7' }, children) : React.createElement(React.Fragment, 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' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
};
//# sourceMappingURL=Checkbox.js.map