@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
47 lines • 2.6 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { POSITIONS } from '../../types/positions/positions';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { ToggleWithLabelStandAlone } from './toggleWithLabelStandAlone';
const TOGGLE_WITH_LABEL_STYLES = 'TOGGLE_WITH_LABEL_STYLES';
const ToggleWithLabelControlledComponent = React.forwardRef(({ variant, ctv, onFieldSetClick, onClick, ...props }, ref) => {
const styles = useStyles(TOGGLE_WITH_LABEL_STYLES, variant, ctv);
const handleFieldSetClick = (e) => {
if (props.disabled) {
return;
}
// When comming from handleOnClick, the onChange is already called so we avoid calling it again
const avoidCallingOnChange = e?.avoidCallingOnChange;
// Do not use !avoidCallingOnChange to call onChange when avoidCallingOnChange is undefined
if (avoidCallingOnChange !== true) {
let newPosition = POSITIONS.LEFT;
if ((props.togglePosition === POSITIONS.LEFT && !props.hasThreePositions) ||
props.togglePosition === POSITIONS.CENTER) {
newPosition = POSITIONS.RIGHT;
}
else if (props.togglePosition === POSITIONS.LEFT && props.hasThreePositions) {
newPosition = POSITIONS.CENTER;
}
props.onChange?.(newPosition);
}
onFieldSetClick?.(e);
};
const handleClick = (e, position) => {
Object.defineProperties(e, {
avoidCallingOnChange: {
value: true,
},
});
onClick?.(e, position);
};
return (_jsx(ToggleWithLabelStandAlone, { ref: ref, styles: styles, onClick: handleClick, onFieldSetClick: handleFieldSetClick, ...props }));
});
ToggleWithLabelControlledComponent.displayName = 'ToggleWithLabelControlledComponent';
const ToggleWithLabelBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(ToggleWithLabelStandAlone, { ...props, ref: ref }) }), children: _jsx(ToggleWithLabelControlledComponent, { ...props, ref: ref }) }));
/**
* @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the Toggle component
*/
export const ToggleWithLabelControlled = React.forwardRef(ToggleWithLabelBoundary);
//# sourceMappingURL=toggleWithLabelControlled.js.map