@madeja-studio/telar/lib/module/component/ScrollView/Header.js

UI component library by Madeja Studio

"use strict";

import { lerp, valueToArray } from '@madeja-studio/cepillo';
import { Row, useTheme } from '@madeja-studio/telar';
import { animated, useSpringValue } from '@react-spring/native';
import { useEffect, useState } from 'react';
import tw from "../../tailwind/index.js";
import Button from "../Button/index.js";
import { Separator } from "../Separator/index.js";
import { H1 } from "../Text/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AnimatedTextH1 = animated(H1);
const AnimatedSeparator = animated(Separator);
const MIN_SCALE = 0.75;
const MAX_SCALE = 1;
export const Header = ({
  buttons: userButtons,
  onLayout,
  onPress,
  scrollConfig: userScrollConfig,
  separatorMarginTop,
  style,
  textStyle,
  title
}) => {
  const buttons = valueToArray(userButtons);
  const animatedScale = useSpringValue(1, {
    config: {
      duration: 1
    }
  });
  const animatedSeparatorOpacity = useSpringValue(0, {
    config: {
      duration: 1
    }
  });
  const buttonsOpacity = useSpringValue(1, {
    config: {
      duration: 1
    }
  });
  const scrollConfig = userScrollConfig ?? {
    ceiling: 1,
    floor: 0,
    offset: 1
  };
  const [textSize, setTextSize] = useState({
    height: 0,
    width: 0
  });
  const {
    theme
  } = useTheme();
  useEffect(() => {
    const scale = MIN_SCALE + MAX_SCALE - lerp(scrollConfig.offset, {
      max: scrollConfig.ceiling,
      min: scrollConfig.floor
    }, {
      max: MAX_SCALE,
      min: MIN_SCALE
    });
    animatedScale.start(scale).then();
    const separatorOpacity = lerp(scrollConfig.offset, {
      max: scrollConfig.ceiling,
      min: scrollConfig.floor
    }, {
      max: 1,
      min: 0
    });
    animatedSeparatorOpacity.start(separatorOpacity).then();
    buttonsOpacity.start(1 - separatorOpacity).then();
  }, [scrollConfig]);
  return /*#__PURE__*/_jsxs(animated.View, {
    onLayout: onLayout,
    style: [tw`flex-col absolute top-0 inset-x-0 z-10`, style],
    children: [/*#__PURE__*/_jsxs(Row, {
      style: tw`justify-between`,
      children: [/*#__PURE__*/_jsx(AnimatedTextH1, {
        onLayout: event => {
          setTextSize(event.nativeEvent.layout);
        },
        style: [textStyle, {
          transform: [{
            translateX: -textSize.width * 0.5
          }, {
            translateY: -textSize.height
          }, {
            scale: animatedScale
          }, {
            translateX: textSize.width * 0.5
          }, {
            translateY: textSize.height
          }]
        }],
        children: title
      }), /*#__PURE__*/_jsx(animated.View, {
        style: [tw`flex-row`, {
          opacity: buttonsOpacity,
          transform: [{
            translateY: -textSize.height
          }, {
            scale: animatedScale
          }, {
            translateY: textSize.height
          }]
        }],
        children: buttons.map((option, index) => /*#__PURE__*/_jsx(Button.Icon, {
          icon: option.icon,
          iconTint: theme.core.color.primary,
          onPress: () => onPress?.(index),
          variant: "text"
        }, `${option.icon.family}_${option.icon.name}`))
      })]
    }), /*#__PURE__*/_jsx(AnimatedSeparator, {
      style: [tw`absolute`, {
        opacity: animatedSeparatorOpacity,
        top: separatorMarginTop
      }]
    })]
  });
};
//# sourceMappingURL=Header.js.map