@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
62 lines (61 loc) • 2.87 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/*
* Copyright 2022-2023 Wonderflow Design Team
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import clsx from 'clsx';
import { domMax, LazyMotion, m } from 'framer-motion';
import { forwardRef, useCallback, useEffect, useState, } from 'react';
import { IconButton, Symbol, } from '../..';
import * as styles from './toggle-button.module.css';
const scaleAnimation = {
scaleIn: {
scale: 1,
transition: {
duration: 0.2,
ease: [0, 0, 0.34, 1],
delay: 0,
},
},
scaleOut: {
scale: 0,
transition: {
duration: 0.2,
ease: [0.3, 0.07, 1, 1],
delay: 0,
},
},
};
export const ToggleButton = forwardRef(({ className, restingIcon, pressedIcon, dimension, kind, disabled, iconColor, pressed = false, squared = false, onClick, ...otherProps }, forwardedRef) => {
const [isPressed, setIsPressed] = useState(pressed);
const [isFirstRender, setIsFirstRender] = useState(true);
useEffect(() => {
setIsFirstRender(false);
}, [pressed]);
const handleClick = useCallback((event) => {
setIsPressed(!isPressed);
onClick?.(event);
}, [onClick, isPressed]);
const renderIcon = useCallback((icon, dimension) => {
const iconSize = {
big: 18,
regular: 16,
small: 12,
};
return (_jsx(Symbol, { source: icon, dimension: iconSize[dimension] }));
}, []);
return (_jsx(IconButton, { as: "button", ref: forwardedRef, dimension: dimension, "aria-pressed": isPressed, kind: kind, disabled: disabled, onClick: handleClick, "data-icon-button-squared": squared, className: clsx(styles.ToggleButton, className), "data-testid": "ToggleButton", ...otherProps, children: _jsx(LazyMotion, { features: domMax, strict: true, children: isPressed && pressedIcon
? (_jsx(m.span, { variants: scaleAnimation, initial: isFirstRender && isPressed ? false : 'scaleOut', animate: "scaleIn", children: renderIcon(pressedIcon, dimension) }, "pressedIcon"))
: restingIcon && (_jsx(m.span, { variants: scaleAnimation, initial: isFirstRender && !isPressed ? false : 'scaleOut', animate: "scaleIn", children: renderIcon(restingIcon, dimension) }, "restingIcon")) }) }));
});