jobiqo-cl/lib/es/src/components/02-atoms/17-tabs/animated/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import React__default, { useState, useRef, useContext, useLayoutEffect } from 'react';
import styled from 'styled-components';
import { color } from '../../../../../node_modules/@styled-system/color/dist/index.esm.js';
import '../../../../../node_modules/styled-system/dist/index.esm.js';
import { useRect } from '../../../../../node_modules/@reach/rect/es/index.js';
import { Tab } from '../../../../../node_modules/@reach/tabs/es/index.js';
import { Tabs } from '../index.js';

// @ts-ignore
const AnimatedContext = React__default.createContext();
const AnimatedTabsBar = styled.div `
	position: absolute;
	height: 2px;
	transition: all 300ms ease;
	left: ${props => props.activeRect && props.activeRect.left}px;
	width: ${props => props.activeRect && props.activeRect.width}px;
	top: ${props => props.activeRect && props.activeRect.bottom - 2}px;
	${color}
`;
const AnimatedTabs = (_a) => {
    var { barColor, children } = _a, rest = __rest(_a, ["barColor", "children"]);
    // some state to store the position we want to animate to
    const [activeRect, setActiveRect] = useState(null);
    return (
    // put the function to change the styles on context so an active Tab
    // can call it, then style it up
    React__default.createElement(AnimatedContext.Provider, { value: setActiveRect },
        React__default.createElement(Tabs, Object.assign({}, rest), children),
        React__default.createElement(AnimatedTabsBar, { activeRect: activeRect, bg: barColor })));
};
const AnimatedTab = props => {
    const { isSelected } = props;
    // measure the size of our element, only listen to rect if active
    const ref = useRef();
    const rect = useRect(ref, isSelected);
    // get the style changing function from context
    const setActiveRect = useContext(AnimatedContext);
    // callup to set styles whenever we're active
    useLayoutEffect(() => {
        if (isSelected) {
            setActiveRect(rect);
        }
    }, [isSelected, rect, setActiveRect]);
    return React__default.createElement(Tab, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { border: 'none' }) }));
};

export { AnimatedTab, AnimatedTabs };