phx-react
Version:
PHX REACT
65 lines • 6.01 kB
JavaScript
import React, { useEffect, useState } from 'react';
import StyledCheckboxLayout from './styles/StyleCheckbox';
import { classNames } from '../types';
export const PHXCheckbox = ({ activeData, checkType = 'default', children, className, disabled, error, errorType, expanded, helpText, id = 'checkbox', label, onChange, register, isLarge = false, title, isShowHelpText = false, stopPropagation = false, inputRef, ...rest }) => {
const [show, setShow] = useState(false);
useEffect(() => {
// @ts-ignore
setShow(expanded);
}, [expanded]);
const handleChange = (e) => {
setShow(e.target.checked);
if (onChange) {
onChange(e);
}
};
const getBorderClasses = (type) => {
if (type !== 'with-border')
return '';
return classNames(isLarge
? 'py-2.5 rounded-xl border-[0.75px] border-gray-500 px-4 text-sm font-normal shadow-md hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-2 focus:outline-indigo-500 focus:ring-transparent'
: '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');
};
const getColorByActiveData = (isWithBorder = false) => {
const 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, onClickCapture: (e) => {
if (stopPropagation)
e.stopPropagation();
} },
React.createElement(StyledCheckboxLayout, { activeData: activeData, id: id }),
label && (React.createElement("label", { className: classNames(getColorByActiveData(false), isLarge ? 'block text-sm font-normal' : '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", { ...rest, ref: inputRef, className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-200 hover:bg-transparent' : getColorByActiveData(true), isLarge
? 'hidden h-6 w-6 rounded-md border-[0.75px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
: 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), id: id, onClick: (e) => {
if (stopPropagation)
e.stopPropagation();
}, onChange: handleChange, ...register, disabled: disabled, type: 'checkbox' }),
React.createElement("label", { className: classNames('checkbox', checkType === 'with-border' && 'flex-1', disabled && 'disabled', isLarge && 'large'), htmlFor: id, onClick: (e) => {
if (stopPropagation)
e.stopPropagation();
} },
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-200 bg-gray-200'
: (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive)
? getColorByActiveData(true)
: 'border-gray-400', isLarge
? 'icon block h-6 w-6 rounded-md border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
: 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent') }),
React.createElement("span", { className: classNames(isLarge ? 'ml-9 text-sm font-normal' : 'ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false), 'block') }, title)))),
helpText && (show || isShowHelpText) ? (React.createElement("div", { className: classNames(isLarge ? 'pl-9 text-sm text-gray-500' : 'pl-7 text-xs text-gray-500') }, helpText)) : null,
show && children ? React.createElement("div", { className: classNames(isLarge ? 'ml-9' : '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: classNames(isLarge ? 'mr-2.5 h-5 w-5 text-red-500' : '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: classNames(isLarge ? 'text-sm text-red-800' : '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