@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
45 lines • 3.04 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const positions_1 = require("../../types/positions/positions");
const keyboard_utility_1 = require("../../utils/keyboard/keyboard.utility");
const toggleStandAlone_1 = require("./toggleStandAlone");
const getToggleState_1 = require("./utils/getToggleState");
const TOGGLE_STYLES = 'TOGGLE_STYLES';
const ToggleControlledComponent = react_1.default.forwardRef(({ variant, ctv, hasThreePositions = false, togglePosition = hasThreePositions ? positions_1.POSITIONS.CENTER : positions_1.POSITIONS.LEFT, disabled = false, onClick, onChange, onKeyDown, ...props }, ref) => {
const styleVariant = (0, useStyles_1.useStyles)(TOGGLE_STYLES, variant, ctv);
const handleKeyDown = e => {
if (!disabled && ((0, keyboard_utility_1.isKeySpacePressed)(e.key) || (0, keyboard_utility_1.isKeyEnterPressed)(e.key))) {
let newPosition = positions_1.POSITIONS.LEFT;
if ((togglePosition === positions_1.POSITIONS.LEFT && !hasThreePositions) ||
togglePosition === positions_1.POSITIONS.CENTER) {
newPosition = positions_1.POSITIONS.RIGHT;
}
else if (togglePosition === positions_1.POSITIONS.LEFT && hasThreePositions) {
newPosition = positions_1.POSITIONS.CENTER;
}
onChange?.(newPosition);
onKeyDown?.(e);
}
};
const handleClick = (e, position) => {
onChange?.(position);
onClick?.(e, position);
};
const state = (0, getToggleState_1.getToggleState)(hasThreePositions, togglePosition, disabled);
const styles = styleVariant[state];
return ((0, jsx_runtime_1.jsx)(toggleStandAlone_1.ToggleStandAlone, { ...props, ref: ref, disabled: disabled, hasThreePositions: hasThreePositions, styles: styles, togglePosition: togglePosition, onClick: handleClick, onKeyDown: handleKeyDown }));
});
ToggleControlledComponent.displayName = 'ToggleControlledComponent';
const ToggleBoundary = (props, ref) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(toggleStandAlone_1.ToggleStandAlone, { ...props, ref: ref }) }), children: (0, jsx_runtime_1.jsx)(ToggleControlledComponent, { ...props, ref: ref }) }));
const ToggleControlled = react_1.default.forwardRef(ToggleBoundary);
exports.ToggleControlled = ToggleControlled;
//# sourceMappingURL=toggleControlled.js.map