@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
43 lines • 2.52 kB
JavaScript
/**
* 2024-11-04: Migrated from PhotoForm
*/
import * as React from 'react';
import { useState, } from 'react';
import '@mikezimm/fps-styles/dist/fps-Toggle.css'; // Import the CSS file for styling
const FpsToggleClassName = "fps-toggle-container";
const FPSToggle = (props) => {
const { layout = 'labelUp', label, onText, offText, onChange, containerStyle = {}, labelStyle = {}, onOffTextStyle = {}, disabled = false, forceChecked } = props;
const [isChecked, setIsChecked] = useState(forceChecked === true || forceChecked === false ? forceChecked : false);
const handleToggleChange = () => {
setIsChecked((prevState) => {
const newChecked = !prevState;
if (onChange)
onChange(newChecked); // Call onChange with the new state
return newChecked;
});
};
// 2024-10-31: Added this so when no label, you can push it to the far right (GeoLocation example)
const toggleTextsStyle = { ...{ width: !onText && !offText ? '0em' : null }, ...onOffTextStyle };
const labelEle = React.createElement("label", { className: "toggle-label", style: labelStyle }, label);
const toggleSwitch = React.createElement("div", { className: "toggle-switch" },
React.createElement("input", { type: "checkbox", checked: isChecked, onChange: handleToggleChange, id: "toggle", disabled: disabled }),
React.createElement("span", { className: "slider" }));
const toggleText = React.createElement("div", { className: "toggle-texts", style: toggleTextsStyle },
React.createElement("span", { style: { opacity: isChecked ? 1 : 0, transition: 'opacity 0.4s ease' } }, onText),
React.createElement("span", { style: { opacity: isChecked ? 0 : 1, position: 'absolute', transition: 'opacity 0.4s ease' } }, offText));
if (layout === 'labelUp') {
return React.createElement("div", { className: FpsToggleClassName, style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '0.3em', ...containerStyle } },
labelEle,
React.createElement("div", { style: { display: 'flex', justifyContent: 'start', } },
toggleSwitch,
toggleText));
}
else {
return React.createElement("div", { className: FpsToggleClassName, style: containerStyle },
labelEle,
toggleSwitch,
toggleText);
}
};
export default FPSToggle;
//# sourceMappingURL=component.js.map