@smitch/fluid
Version:
A Next/React ui-component libray.
43 lines (42 loc) • 3.4 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { Input } from '..';
var requiredClasses = "after:text-accent after:content-['_*']";
var sizes = {
base: 'text-base',
lg: 'text-lg',
xl: 'text-2xl',
};
var colors = {
info: 'peer-checked:bg-info',
success: 'peer-checked:bg-success',
warning: 'peer-checked:bg-warning',
danger: 'peer-checked:bg-danger',
primary: 'peer-checked:bg-primary',
secondary: 'peer-checked:bg-secondary',
current: 'peer-checked:bg-current',
};
var Switch = function (_a) {
var label = _a.label, labelIsBold = _a.labelIsBold, _b = _a.labelSize, labelSize = _b === void 0 ? 'base' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, style = _a.style, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, name = _a.name, _d = _a.shape, shape = _d === void 0 ? 'circle' : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.switchColor, switchColor = _f === void 0 ? 'info' : _f, _g = _a.thin, thin = _g === void 0 ? false : _g, disabled = _a.disabled, _h = _a.showHint, showHint = _h === void 0 ? false : _h, hint = _a.hint;
var checkbox = useRef(null);
var colorClasses = useMemo(function () { return colors[switchColor]; }, [switchColor]);
var sizeClasses = useMemo(function () { return sizes[labelSize]; }, [labelSize]);
var sliderBeforeClasses = useMemo(function () {
return "before:absolute before:h-8 before:w-8 before:transition-transform before:content-[''] ".concat(thin
? 'before:left-0 before:-top-3 before:bg-inherit'
: 'before:left-1 before:bottom-1 before:bg-white dark:before:bg-dark');
}, [thin]);
var handleKeyup = function (event) {
if (event.key !== 'Enter')
return;
checkbox.current.checked = !checkbox.current.checked;
};
var handleChange = function (event) {
if (onChange)
onChange(event);
};
return (_jsxs("div", { className: 'switch-container', children: [_jsxs("label", { className: twMerge("switch-label group relative ".concat(sizeClasses, " ").concat(labelIsBold ? 'font-semibold' : 'font-normal', " ").concat(disabled ? 'cursor-default text-neutral' : 'cursor-pointer', " h-8 w-auto flex-row-reverse items-center gap-4 flex row-reverse"), className), style: style, onKeyUp: handleKeyup, children: [_jsx("span", { className: "switch-text grow ".concat(required ? requiredClasses : ''), children: label }), _jsx(Input, { name: name, id: name, type: 'checkbox', "data-testid": "input-".concat(name), className: "checkbox peer absolute opacity-0 -left-96", required: required, disabled: disabled, onChange: handleChange, checked: checked, defaultChecked: defaultChecked, ref: checkbox }), _jsx("span", { className: "slider block relative bg-neutral bottom-0 left-0 right-0 top-0 ".concat(thin ? 'h-2 w-[60px]' : 'h-10 w-[67px]', " ").concat(disabled ? 'cursor-default' : 'cursor-pointer', " transition-transform ").concat(shape === 'circle' ? 'rounded-full before:rounded-full' : '', " ").concat(sliderBeforeClasses, " peer-checked:before:translate-x-7 ").concat(colorClasses) })] }), showHint && _jsx("p", { className: "hint text-sm font-normal mt-4 dark:text-light", children: hint })] }));
};
export default Switch;