@kadconsulting/dry
Version:
KAD Reusable Component Library
44 lines • 3.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, forwardRef, useEffect, useRef } from 'react';
import './Toggle.scss';
import classNames from 'classnames';
const LoadingSpinner = () => (_jsx("div", { className: 'loading-spinner', children: "Loading..." }));
const ToggleIcon = ({ size, customSize }) => {
const style = size === 'custom' && customSize
? { width: customSize.width, height: customSize.height }
: {};
return (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', style: style, viewBox: '0 0 24 24', fill: 'none', className: `dry-toggle-button dry-toggle-button-${size}`, children: _jsx("circle", { cx: '12', cy: '12', r: '10', fill: 'white' }) }));
};
const ToggleText = ({ size, title, text, customSize }) => {
const style = size === 'custom' && customSize
? { fontSize: `${customSize.height / 2}px` }
: {};
return (_jsxs("div", { className: 'dry-toggle-text', style: style, children: [_jsx("div", { className: `dry-toggle-text-title dry-toggle-text-title-${size}`, children: title }), _jsx("div", { className: `dry-toggle-text-supporting dry-toggle-text-supporting-${size}`, children: text })] }));
};
const ToggleButton = ({ size = 'sm', toggleStatus, setToggleStatus, disabled, loading, tooltip, customSize, }) => {
const buttonClasses = classNames(`dry-toggle-${toggleStatus ? 'on' : 'off'}`, `dry-toggle-${size}`, { 'dry-toggle-loading': loading, 'dry-toggle-disabled': disabled });
return (_jsx("div", { onClick: () => !disabled && setToggleStatus(!toggleStatus), className: buttonClasses, "aria-pressed": toggleStatus, title: tooltip, tabIndex: disabled ? -1 : 0, children: loading ? (_jsx(LoadingSpinner, {})) : (_jsx(ToggleIcon, { size: size, customSize: customSize })) }));
};
const Toggle = forwardRef(({ size = 'sm', text, title, textLeft = false, disabled = false, loading = false, tooltip, onChange, controlledValue, customSize, ...passProps }, ref) => {
const [toggleStatus, setToggleStatus] = useState(controlledValue ?? false);
const isFirstRender = useRef(true);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
}
else if (onChange && controlledValue === undefined) {
onChange(toggleStatus);
}
}, [toggleStatus, onChange, controlledValue]);
useEffect(() => {
if (controlledValue !== undefined) {
setToggleStatus(controlledValue);
}
}, [controlledValue]);
const containerStyle = size === 'custom' && customSize
? { width: customSize.width, height: customSize.height }
: {};
return (_jsxs("div", { ref: ref, className: 'dry-toggle-container', style: containerStyle, ...passProps, children: [textLeft && (_jsx(ToggleText, { size: size, title: title, text: text, customSize: customSize })), _jsx(ToggleButton, { size: size, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, disabled: disabled, loading: loading, tooltip: tooltip, customSize: customSize }), !textLeft && (_jsx(ToggleText, { size: size, title: title, text: text, customSize: customSize }))] }));
});
export default Toggle;
//# sourceMappingURL=Toggle.js.map