@crossed/ui/lib/module/scroll/utils/useLogic.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import {
  Children,
  useCallback,
  useEffect,
  useMemo,
  useState
} from "react";
import {
  runOnJS,
  useAnimatedReaction,
  useSharedValue
} from "react-native-reanimated";
import { Box } from "../../layout/Box";
import { composeStyles, inlineStyle } from "@crossed/styled";
import { Title } from "./Title";
import { Footer } from "./Footer";
import { Body } from "./Body";
const useLogic = ({
  children,
  stickyFooter,
  ...props
}) => {
  const layoutShared = useSharedValue(0);
  const contentLayoutShared = useSharedValue(0);
  const [showFooter, setShowFooter] = useState(false);
  const [paddingRight, setPaddingRight] = useState(0);
  useAnimatedReaction(
    () => layoutShared.value - contentLayoutShared.value,
    (current, previous) => {
      if (current !== previous) {
        runOnJS(setPaddingRight)(current);
      }
    },
    [layoutShared, contentLayoutShared, setPaddingRight]
  );
  const title = useMemo(() => {
    if (!children)
      return null;
    return Children.toArray(children).find(
      (e) => typeof e === "object" && "type" in e && e.type === Title
    );
  }, [children]);
  const footer = useMemo(() => {
    if (!children || typeof children === "number")
      return null;
    return Children.toArray(children).find(
      (e) => typeof e === "object" && "type" in e && e.type === Footer
    );
  }, [children]);
  const body = useMemo(() => {
    if (!children || typeof children === "number")
      return null;
    return Children.toArray(children).find(
      (e) => typeof e === "object" && "type" in e && e.type === Body
    );
  }, [children]);
  useEffect(() => {
    if (stickyFooter && !showFooter && footer) {
      const time = setTimeout(() => setShowFooter(true), 0);
      return () => clearTimeout(time);
    }
    return () => {
    };
  }, [stickyFooter, setShowFooter, showFooter, footer]);
  const renderFooter = useCallback(
    () => /* @__PURE__ */ jsx(
      Box,
      {
        style: composeStyles(
          stickyFooter && inlineStyle(() => ({
            base: {
              opacity: 0
            }
          }))
        ),
        children: footer
      }
    ),
    [stickyFooter, footer]
  );
  const onLayout = useCallback(
    (e) => {
      var _a;
      const {
        nativeEvent: { layout }
      } = e;
      layoutShared.value = layout.width;
      if (typeof props.onLayout === "function")
        props.onLayout(e);
      else
        (_a = props.onLayout) == null ? void 0 : _a.value(e);
    },
    [layoutShared, props.onLayout]
  );
  const onContentSizeChange = useCallback(
    (w, h) => {
      var _a;
      contentLayoutShared.value = w;
      if (typeof props.onContentSizeChange === "function")
        props.onContentSizeChange(w, h);
      else
        (_a = props.onContentSizeChange) == null ? void 0 : _a.value(w, h);
    },
    [contentLayoutShared, props.onContentSizeChange]
  );
  return {
    paddingRight,
    title,
    body,
    renderFooter,
    onLayout,
    onContentSizeChange,
    footer,
    showFooter
  };
};
export {
  useLogic
};
//# sourceMappingURL=useLogic.js.map