@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
139 lines • 5.69 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextRightWrapperStyled = exports.TextLeftWrapperStyled = exports.IconWrapperStyled = exports.LabelWrapperStyled = exports.SliderContainerStyled = exports.ToggleSpanSwitchStyled = exports.ToggleRadioSwitchStyled = exports.ToggleWrapperStyled = void 0;
const styled_components_1 = __importStar(require("styled-components"));
const getStyles_1 = require("../../utils/getStyles/getStyles");
const positions_1 = require("../../types/positions/positions");
const getTransform = (wrapperStyles, componentStyles, borderWidth, borderMultiple) => {
if (wrapperStyles?.padding_right && wrapperStyles?.padding_left) {
return (0, styled_components_1.css) `
transform: translateX(
calc(
${wrapperStyles?.width} - ${componentStyles?.width} - ${wrapperStyles?.padding_left} -
${wrapperStyles?.padding_right} - ${borderWidth} * ${borderMultiple}
)
);
`;
}
return (0, styled_components_1.css) `
transform: translateX(
calc(${wrapperStyles?.width} - ${componentStyles?.width} - ${borderWidth} * ${borderMultiple})
);
`;
};
// function to calculate the dot translate
const getTranslate = (togglePosition, wrapperStyles, componentStyles) => {
const themeBorder = (() => !!wrapperStyles?.border_width ||
(wrapperStyles?.border_width && wrapperStyles?.border_width !== '0'))();
const borderWidth = themeBorder ? wrapperStyles?.border_width : '0.0625rem';
const borderMultiple = themeBorder ? 2 : 1;
if (togglePosition === positions_1.POSITIONS.CENTER) {
return (0, styled_components_1.css) `
transition: ${componentStyles?.transition};
transform: translateX(calc((${wrapperStyles?.width} / 2) - (${componentStyles?.width} / 2)));
`;
}
else if (togglePosition === positions_1.POSITIONS.RIGHT) {
return (0, styled_components_1.css) `
transition: ${componentStyles?.transition};
${getTransform(wrapperStyles, componentStyles, borderWidth, borderMultiple)}
`;
}
return (0, styled_components_1.css) `
transition: ${componentStyles?.transition};
transform: ${!themeBorder ? `translateX(${borderWidth});` : undefined};
`;
};
exports.ToggleWrapperStyled = styled_components_1.default.div `
${({ styles, hasThreePositions }) => (0, getStyles_1.getStyles)(hasThreePositions ? styles?.wrapperThreePositions : styles?.wrapper)}
${({ disabled }) => disabled
? (0, styled_components_1.css) `
pointer-events: none;
`
: ''}
`;
exports.ToggleRadioSwitchStyled = styled_components_1.default.input `
opacity: 0;
cursor: pointer;
width: ${({ $width }) => $width};
height: ${({ $height }) => $height};
flex: 1;
margin: 0;
`;
exports.ToggleSpanSwitchStyled = styled_components_1.default.span `
opacity: 0;
cursor: pointer;
width: ${({ $width }) => $width};
height: ${({ $height }) => $height};
flex: 1;
margin: 0;
`;
exports.SliderContainerStyled = styled_components_1.default.span `
// Thumb styles
${({ styles }) => (0, getStyles_1.getStyles)(styles?.thumb)}
cursor: ${({ hasThreePositions }) => !hasThreePositions && 'pointer'};
// transition styles
${({ togglePosition, styles, hasThreePositions }) => getTranslate(togglePosition, hasThreePositions ? styles?.wrapperThreePositions : styles?.wrapper, styles?.thumb)}
`;
exports.LabelWrapperStyled = (0, styled_components_1.default)(exports.SliderContainerStyled) `
z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
pointer-events: none;
${({ showLabel }) => !showLabel &&
(0, styled_components_1.css) `
opacity: 0;
`}
`;
exports.IconWrapperStyled = (0, styled_components_1.default)(exports.SliderContainerStyled) `
z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
pointer-events: none;
${({ showLabel }) => !showLabel &&
(0, styled_components_1.css) `
opacity: 0;
`}
`;
exports.TextLeftWrapperStyled = styled_components_1.default.div `
display: flex;
left: ${({ margin }) => margin};
position: absolute;
cursor: pointer;
`;
exports.TextRightWrapperStyled = styled_components_1.default.div `
display: flex;
right: ${({ margin }) => margin};
position: absolute;
cursor: pointer;
`;
//# sourceMappingURL=toggle.styled.js.map