react-native-inner-shadow/lib/module/hooks/useShadowProperties.js

react native inner shadows with linear gradient design UI

"use strict";

import { useMemo, useState } from 'react';
import { StyleSheet } from 'react-native';
import { getBackgroundColor, computeShadowProperties, numerify } from "../utils.js";
import { SHADOW_BLUR, REFLECTED_LIGHT_BLUR, REFLECTED_LIGHT_COLOR, SHADOW_COLOR } from "../constants.js";
export const useShadowProperties = ({
  propWidth,
  propHeight,
  style,
  backgroundColor,
  shadowOffset,
  shadowColor = SHADOW_COLOR,
  shadowBlur = SHADOW_BLUR,
  reflectedLightOffset,
  reflectedLightColor = REFLECTED_LIGHT_COLOR,
  reflectedLightBlur = REFLECTED_LIGHT_BLUR,
  propsOnLayout
}) => {
  // Flatten styles
  let flatStyle = useMemo(() => StyleSheet.flatten(style) || {}, [style]);
  if (propWidth) {
    flatStyle = {
      ...flatStyle,
      width: propWidth
    };
  }
  if (propHeight) {
    style = {
      ...flatStyle,
      height: propHeight
    };
  }

  // Get background color
  const bgColor = useMemo(() => getBackgroundColor({
    backgroundColor,
    styleBackground: flatStyle.backgroundColor
  }), [backgroundColor, flatStyle.backgroundColor]);

  // Compute shadow properties
  const shadowProps = useMemo(() => computeShadowProperties({
    shadowOffset,
    shadowColor,
    shadowBlur,
    reflectedLightOffset,
    reflectedLightColor,
    reflectedLightBlur
  }), [shadowOffset, shadowColor, shadowBlur, reflectedLightOffset, reflectedLightColor, reflectedLightBlur]);

  // Handle layout
  const initialW = propWidth ?? numerify(flatStyle.width, 0);
  const initialH = propHeight ?? numerify(flatStyle.height, 0);
  const [layout, setLayout] = useState({
    width: initialW,
    height: initialH
  });

  // Create onLayout handler
  const onLayout = useMemo(() => e => {
    propsOnLayout?.(e);
    if (initialW && initialH) {
      // console.log('Using initialW and initialH');
      return;
    }
    const {
      width,
      height
    } = e.nativeEvent.layout;
    setLayout(prev => prev.width === width && prev.height === height ? prev : {
      width,
      height
    });
  }, [initialW, initialH, propsOnLayout]);

  // Check if canvas can be rendered
  const canRenderCanvas = Boolean(layout.width && layout.height);
  return {
    flatStyle,
    bgColor,
    shadowProps,
    layout,
    canRenderCanvas,
    onLayout
  };
};
//# sourceMappingURL=useShadowProperties.js.map