react-day-and-night-toggle
Version:
🌞Day & Night🌛 (light/dark) theme switch with pretty cool animation for React.
82 lines (81 loc) • 2.9 kB
JSX
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DayAndNightToggle = void 0;
const react_1 = require("react");
const styles_1 = require("./styles");
exports.DayAndNightToggle = (0, react_1.memo)(({ onChange, checked, size = 32, startInactive = false, animationInactive = true, shadows = true, className = undefined, ...labelProps }) => {
const [disable, setDisable] = (0, react_1.useState)(false);
const [startingInactive, setStartingInactive] = (0, react_1.useState)(startInactive);
const roundedSize = Math.floor(size);
(0, react_1.useEffect)(() => {
if (startingInactive) {
setDisable(true);
setTimeout(() => {
setDisable(false);
}, 2000);
}
return setStartingInactive(false);
}, [checked, startingInactive]);
const handleClick = () => {
if (!disable) {
onChange();
setDisable(true);
if (animationInactive) {
setTimeout(() => {
setDisable(false);
}, 2000);
}
else {
setDisable(false);
}
}
};
return (<styles_1.SwitchContainer className={className} size={roundedSize} {...labelProps}>
<styles_1.Switch shadows={shadows} size={roundedSize} checked={checked} onClick={handleClick}>
<styles_1.ContentWrapper>
<styles_1.Circle />
<styles_1.Stars>
<styles_1.Star />
<styles_1.Star />
<styles_1.Star />
<styles_1.ShootingStarWrapper>
<styles_1.ShootingStar />
</styles_1.ShootingStarWrapper>
</styles_1.Stars>
<styles_1.Clouds>
<styles_1.Cloud>
<styles_1.Cloudpart />
<styles_1.Cloudpart />
</styles_1.Cloud>
<styles_1.Cloud>
<styles_1.Cloudpart />
<styles_1.Cloudpart />
</styles_1.Cloud>
<styles_1.Cloud>
<styles_1.Cloudpart />
<styles_1.Cloudpart />
<styles_1.Cloudpart />
</styles_1.Cloud>
</styles_1.Clouds>
</styles_1.ContentWrapper>
</styles_1.Switch>
</styles_1.SwitchContainer>);
});
// DayAndNightToggle.propTypes = {
// onChange: PropTypes.func.isRequired,
// checked: PropTypes.bool.isRequired,
// size: PropTypes.number,
// startInactive: PropTypes.bool,
// animationInactive: PropTypes.bool,
// shadows: PropTypes.bool,
// className: PropTypes.string,
// }
// DayAndNightToggle.defaultProps = {
// onChange: () => null,
// checked: false,
// size: 32,
// startInactive: false,
// animationInactive: true,
// shadows: true,
// className: undefined,
// }