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

react native inner shadows with linear gradient design UI

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useShadowProperties = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _utils = require("../utils.js");
var _constants = require("../constants.js");
const useShadowProperties = ({
  propWidth,
  propHeight,
  style,
  backgroundColor,
  shadowOffset,
  shadowColor = _constants.SHADOW_COLOR,
  shadowBlur = _constants.SHADOW_BLUR,
  reflectedLightOffset,
  reflectedLightColor = _constants.REFLECTED_LIGHT_COLOR,
  reflectedLightBlur = _constants.REFLECTED_LIGHT_BLUR,
  propsOnLayout,
  ...props
}) => {
  // Flatten styles
  const flatStyle = (0, _react.useMemo)(() => _reactNative.StyleSheet.flatten(style) || {}, [style]);

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

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

  // Check if linear gradient props are provided
  const isLinear = (0, _utils.isLinearProps)(props);

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

  // Create onLayout handler
  const onLayout = (0, _react.useMemo)(() => e => {
    propsOnLayout?.(e);
    if (initialW && 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,
    isLinear,
    layout,
    canRenderCanvas,
    onLayout
  };
};
exports.useShadowProperties = useShadowProperties;
//# sourceMappingURL=useShadowProperties.js.map