@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
52 lines • 2.58 kB
JSX
"use client";
import { useMobile, useSwipe } from "../../hooks";
import Style, { Lower, SwipeArea, Upper } from "./Sidebar.styled";
export default function Sidebar(props) {
const { isMobile } = useMobile();
const active = props?.active || false;
const scale = props?.scale || 1;
const width = props?.width || 60;
const align = props?.align === "left" || props?.align === "right" ? props?.align : "left";
const swiping = typeof props?.lower?.swipe === "object" ? props?.lower?.swipe : undefined;
const elastic = swiping?.elastic || 0.045;
const area = swiping?.area || 4;
const threshold = swiping?.threshold || 100;
const swipe = useSwipe(isMobile && {
elastic,
threshold,
onSwipe: (e, move) => {
if (move !== 0) {
if (swiping && typeof swiping?.onActive === "function")
swiping?.onActive(e, move > 0 ? false : true);
}
},
});
const handleBlur = (e) => {
// if (props?.lower?.active && props?.lower?.onBlur) props?.lower?.onBlur(e);
// if (props?.upper?.active && props?.upper?.onBlur) props?.upper?.onBlur(e);
if (props?.onBlur)
props?.onBlur(e);
};
const handleLowerBlur = (e) => {
if (props?.lower?.active && props?.lower?.onBlur)
props?.lower?.onBlur(e);
};
const handleUpperBlur = (e) => {
if (props?.upper?.active && props?.upper?.onBlur)
props?.upper?.onBlur(e);
};
return (<Style tabIndex={10} $scale={scale} $active={active} $width={width} $align={align} onBlur={handleBlur}>
{props?.lower?.children && props?.lower?.children?.length > 0 && (<Lower $align={align} data-active={props?.lower?.active} onBlur={handleLowerBlur}>
{props?.lower?.swipe && (<SwipeArea {...swipe} $area={area} style={typeof props?.lower?.swipe === "object" && props?.lower?.swipe?.style}/>)}
{props?.lower?.children?.map((v, k) => (<section key={k} data-active={v?.active}>
{v.children}
</section>))}
</Lower>)}
{props?.upper?.children && props?.upper?.children?.length > 0 && (<Upper data-active={props?.upper?.active} onBlur={handleUpperBlur}>
{props?.upper?.children?.map((v, k) => (<section key={k} data-active={v?.active}>
{v.children}
</section>))}
</Upper>)}
</Style>);
}
//# sourceMappingURL=Sidebar.jsx.map