@ultraviolet/plus
Version:
Ultraviolet Plus
70 lines (69 loc) • 7.74 kB
JavaScript
"use client";
import { jsx } from "@emotion/react/jsx-runtime";
import _styled from "@emotion/styled/base";
import { ArrowLeftDoubleIcon, ArrowRightDoubleIcon } from "@ultraviolet/icons";
import { Tooltip, Button } from "@ultraviolet/ui";
import { useCallback, useState, useEffect, useMemo } from "react";
import { useNavigation } from "./NavigationProvider.js";
import { ANIMATION_DURATION } from "./constants.js";
const StickyFooter = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
target: "e1j950560"
} : {
target: "e1j950560",
label: "StickyFooter"
})("display:flex;width:100%;background:", ({
theme
}) => theme.colors.neutral.background, ";border-top:1px solid ", ({
theme
}) => theme.colors.neutral.borderWeak, ";padding:", ({
theme
}) => `${theme.space["1"]} ${theme.space["2"]}`, ";transition:justify-content ", ANIMATION_DURATION, "ms ease-in-out;box-shadow:", ({
theme
}) => theme.shadows.defaultShadow, ';transition:box-shadow 230ms ease-in-out;justify-content:flex-end;&[data-has-overflow-style="false"]{box-shadow:none;border:none;}' + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvTmF2aWdhdGlvbi9Gb290ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9wbHVzL3NyYy9jb21wb25lbnRzL05hdmlnYXRpb24vRm9vdGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEFycm93TGVmdERvdWJsZUljb24sIEFycm93UmlnaHREb3VibGVJY29uIH0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHsgQnV0dG9uLCBUb29sdGlwIH0gZnJvbSAnQHVsdHJhdmlvbGV0L3VpJ1xuaW1wb3J0IHR5cGUgeyBSZWZPYmplY3QgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VOYXZpZ2F0aW9uIH0gZnJvbSAnLi9OYXZpZ2F0aW9uUHJvdmlkZXInXG5pbXBvcnQgeyBBTklNQVRJT05fRFVSQVRJT04gfSBmcm9tICcuL2NvbnN0YW50cydcbmltcG9ydCB0eXBlIHsgTmF2aWdhdGlvblByb3BzIH0gZnJvbSAnLi90eXBlcydcblxuY29uc3QgU3RpY2t5Rm9vdGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZH07XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNwYWNlWycxJ119ICR7dGhlbWUuc3BhY2VbJzInXX1gfTtcbiAgdHJhbnNpdGlvbjoganVzdGlmeS1jb250ZW50ICR7QU5JTUFUSU9OX0RVUkFUSU9OfW1zIGVhc2UtaW4tb3V0O1xuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNoYWRvd3MuZGVmYXVsdFNoYWRvd307XG4gIHRyYW5zaXRpb246IGJveC1zaGFkb3cgMjMwbXMgZWFzZS1pbi1vdXQ7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG5cbiAgJltkYXRhLWhhcy1vdmVyZmxvdy1zdHlsZT1cImZhbHNlXCJdIHtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgfVxuYFxuXG50eXBlIEZvb3RlclByb3BzID0ge1xuICBvblRvZ2dsZUV4cGFuZDogTmF2aWdhdGlvblByb3BzWydvblRvZ2dsZUV4cGFuZCddXG4gIGNvbnRlbnRSZWY6IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudCB8IG51bGw+XG59XG5cbmV4cG9ydCBjb25zdCBGb290ZXIgPSAoeyBvblRvZ2dsZUV4cGFuZCwgY29udGVudFJlZiB9OiBGb290ZXJQcm9wcykgPT4ge1xuICBjb25zdCB7IGV4cGFuZGVkLCB0b2dnbGVFeHBhbmQsIGxvY2FsZXMgfSA9IHVzZU5hdmlnYXRpb24oKVxuXG4gIGNvbnN0IGlzU2Nyb2xsQXRCb3R0b20gPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgaWYgKGNvbnRlbnRSZWYuY3VycmVudCkge1xuICAgICAgaWYgKFxuICAgICAgICBjb250ZW50UmVmLmN1cnJlbnQuc2Nyb2xsVG9wICsgY29udGVudFJlZi5jdXJyZW50Lm9mZnNldEhlaWdodCA+PVxuICAgICAgICBjb250ZW50UmVmLmN1cnJlbnQuc2Nyb2xsSGVpZ2h0XG4gICAgICApIHtcbiAgICAgICAgcmV0dXJuIGZhbHNlXG4gICAgICB9XG5cbiAgICAgIHJldHVybiB0cnVlXG4gICAgfVxuXG4gICAgcmV0dXJuIHRydWVcbiAgfSwgW2NvbnRlbnRSZWZdKVxuXG4gIGNvbnN0IFtmb290ZXJIYXNPdmVyZmxvd1N0eWxlLCBzZXRGb290ZXJIYXNPdmVyZmxvd1N0eWxlXSA9IHVzZVN0YXRlKFxuICAgIGlzU2Nyb2xsQXRCb3R0b20oKSxcbiAgKVxuXG4gIC8vIFRoaXMgaXMgZm9yIGRldGVjdGluZyBpZiB0aGVyZSBpcyBzY3JvbGwgb24gdGhlIGNvbnRlbnQgYW5kIHNldCB0aGUgc2hhZG93IG9uIHRoZSBmb290ZXJcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBjdXJyZW50Q29udGVudFJlZiA9IGNvbnRlbnRSZWYuY3VycmVudFxuXG4gICAgY29uc3Qgc2Nyb2xsID0gKCkgPT4ge1xuICAgICAgY29uc3QgaGFzT3ZlcmZsb3cgPSBpc1Njcm9sbEF0Qm90dG9tKClcblxuICAgICAgaWYgKGZvb3Rlckhhc092ZXJmbG93U3R5bGUgIT09IGhhc092ZXJmbG93KSB7XG4gICAgICAgIHNldEZvb3Rlckhhc092ZXJmbG93U3R5bGUoaGFzT3ZlcmZsb3cpXG4gICAgICB9XG4gICAgfVxuXG4gICAgaWYgKGN1cnJlbnRDb250ZW50UmVmKSB7XG4gICAgICBjdXJyZW50Q29udGVudFJlZi5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCBzY3JvbGwpXG4gICAgfVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGN1cnJlbnRDb250ZW50UmVmPy5yZW1vdmVFdmVudExpc3RlbmVyKCdzY3JvbGwnLCBzY3JvbGwpXG4gICAgfVxuICB9LCBbZm9vdGVySGFzT3ZlcmZsb3dTdHlsZSwgaXNTY3JvbGxBdEJvdHRvbSwgY29udGVudFJlZl0pXG5cbiAgLy8gVGhpcyB3aWxsIHNldCB0aGUgc2hhZG93IG9uIHRoZSBmb290ZXIgd2hlbiB0aGUgY29tcG9uZW50IGlzIG1vdW50ZWRcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBzZXRGb290ZXJIYXNPdmVyZmxvd1N0eWxlKGlzU2Nyb2xsQXRCb3R0b20oKSlcbiAgfSwgW2lzU2Nyb2xsQXRCb3R0b21dKVxuXG4gIGNvbnN0IEljb24gPSB1c2VNZW1vKFxuICAgICgpID0+IChleHBhbmRlZCA/IEFycm93TGVmdERvdWJsZUljb24gOiBBcnJvd1JpZ2h0RG91YmxlSWNvbiksXG4gICAgW2V4cGFuZGVkXSxcbiAgKVxuXG4gIGNvbnN0IGxhYmVsID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgZXhwYW5kZWRcbiAgICAgICAgPyBsb2NhbGVzWyduYXZpZ2F0aW9uLmNvbGxhcHNlLmJ1dHRvbiddXG4gICAgICAgIDogbG9jYWxlc1snbmF2aWdhdGlvbi5leHBhbmQuYnV0dG9uJ10sXG4gICAgW2V4cGFuZGVkLCBsb2NhbGVzXSxcbiAgKVxuXG4gIHJldHVybiAoXG4gICAgPFN0aWNreUZvb3RlciBkYXRhLWhhcy1vdmVyZmxvdy1zdHlsZT17Zm9vdGVySGFzT3ZlcmZsb3dTdHlsZX0+XG4gICAgICA8VG9vbHRpcCB0ZXh0PXtsYWJlbH0gcGxhY2VtZW50PVwicmlnaHRcIj5cbiAgICAgICAgPEJ1dHRvblxuICAgICAgICAgIHZhcmlhbnQ9XCJnaG9zdFwiXG4gICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICBhcmlhLWxhYmVsPXtsYWJlbH1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICB0b2dnbGVFeHBhbmQoKVxuICAgICAgICAgICAgb25Ub2dnbGVFeHBhbmQ/LighZXhwYW5kZWQpXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxJY29uIC8+XG4gICAgICAgIDwvQnV0dG9uPlxuICAgICAgPC9Ub29sdGlwPlxuICAgIDwvU3RpY2t5Rm9vdGVyPlxuICApXG59XG4iXX0= */"));
const Footer = ({
onToggleExpand,
contentRef
}) => {
const {
expanded,
toggleExpand,
locales
} = useNavigation();
const isScrollAtBottom = useCallback(() => {
if (contentRef.current) {
if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) {
return false;
}
return true;
}
return true;
}, [contentRef]);
const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(isScrollAtBottom());
useEffect(() => {
const currentContentRef = contentRef.current;
const scroll = () => {
const hasOverflow = isScrollAtBottom();
if (footerHasOverflowStyle !== hasOverflow) {
setFooterHasOverflowStyle(hasOverflow);
}
};
if (currentContentRef) {
currentContentRef.addEventListener("scroll", scroll);
}
return () => {
currentContentRef?.removeEventListener("scroll", scroll);
};
}, [footerHasOverflowStyle, isScrollAtBottom, contentRef]);
useEffect(() => {
setFooterHasOverflowStyle(isScrollAtBottom());
}, [isScrollAtBottom]);
const Icon = useMemo(() => expanded ? ArrowLeftDoubleIcon : ArrowRightDoubleIcon, [expanded]);
const label = useMemo(() => expanded ? locales["navigation.collapse.button"] : locales["navigation.expand.button"], [expanded, locales]);
return /* @__PURE__ */ jsx(StickyFooter, { "data-has-overflow-style": footerHasOverflowStyle, children: /* @__PURE__ */ jsx(Tooltip, { text: label, placement: "right", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", sentiment: "neutral", size: "small", "aria-label": label, onClick: () => {
toggleExpand();
onToggleExpand?.(!expanded);
}, children: /* @__PURE__ */ jsx(Icon, {}) }) }) });
};
export {
Footer
};