@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
34 lines (33 loc) • 2.39 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } 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 * as TabsPrimitive from '@radix-ui/react-tabs';
import { domMax, LazyMotion, m } from 'framer-motion';
import { Children, isValidElement, useCallback, useState, } from 'react';
import { useUIDSeed } from 'react-uid';
import { Button, Symbol } from '../..';
import * as styles from './tab.module.css';
import { TabPanel } from './tabs-panel';
export const Tab = ({ className, children, onValueChange, defaultValue, value, loop, dimension = 'regular', ...otherProps }) => {
const [activeItem, setActiveItem] = useState(defaultValue ?? value ?? '');
const uid = useUIDSeed();
const handleOnVlaueChange = useCallback((value) => {
onValueChange?.(value);
setActiveItem(value);
}, [onValueChange]);
return (_jsxs(TabsPrimitive.Root, { defaultValue: defaultValue, onValueChange: handleOnVlaueChange, className: className, value: value, "data-testid": "TabRoot", ...otherProps, children: [_jsx(LazyMotion, { features: domMax, strict: true, children: _jsx(TabsPrimitive.List, { className: styles.List, loop: loop, children: Children.map(children, child => isValidElement(child) && (_jsx(TabsPrimitive.Trigger, { value: child.props.value, disabled: child.props.disabled, className: styles.Trigger, "data-tab-dimension": dimension, asChild: true, children: _jsxs(Button, { kind: "flat", children: [child.props.icon && _jsx(Symbol, { source: child.props.icon, dimension: dimension === 'big' ? 24 : 16, weight: dimension === 'big' ? 'duotone' : 'solid' }), child.props.label, (child.props.value === activeItem || child.props.value === value) && (_jsx(m.span, { className: styles.Highlight, layoutId: uid('tab-highlight') }))] }) }))) }) }), children] }));
};
Tab.Panel = TabPanel;