react-native-inner-shadow/lib/module/components/ShadowView.js

react native inner shadows with linear gradient design UI

"use strict";

import React, { memo } from 'react';
import { View } from 'react-native';
import { isLinearProps } from "../utils.js";
import { CANVAS_PADDING, COMMON_STYLES, IS_REFLECTED_LIGHT_ENABLED } from "../constants.js";
import { Canvas, Shadow } from '@shopify/react-native-skia';
import LinearGradientFill from "./ShadowLinearGradientFill.js";
import { CornerRadii } from "./CornerRadii.js";
import { useShadowProperties } from "./../hooks/useShadowProperties.js";

/**
 * A unified interface for both "solid" (InnerShadow) and "linear" (LinearShadow).
 * We automatically detect "linear mode" by checking if the user provides
 * gradient props (colors, from, to, etc.).
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const UnifiedShadowView = /*#__PURE__*/memo(function UnifiedShadowView({
  width: propWidth,
  height: propHeight,
  inset,
  isReflectedLightEnabled = IS_REFLECTED_LIGHT_ENABLED,
  style,
  onLayout: propsOnLayout,
  children,
  ...props
}) {
  // Extract base fields
  const {
    flatStyle,
    bgColor,
    shadowProps,
    layout,
    canRenderCanvas,
    onLayout
  } = useShadowProperties({
    propWidth,
    propHeight,
    style,
    inset,
    propsOnLayout,
    ...props
  });
  // If isReflectedLightEnabled is undefined, default to `props.inset` (typical).
  const isLinear = isLinearProps(props);
  return /*#__PURE__*/_jsxs(View, {
    style: [flatStyle, COMMON_STYLES.canvasContainer],
    onLayout: onLayout,
    children: [canRenderCanvas ? /*#__PURE__*/_jsx(Canvas, {
      style: [COMMON_STYLES.canvas, {
        width: layout.width + CANVAS_PADDING * 2,
        height: layout.height + CANVAS_PADDING * 2
      }],
      children: /*#__PURE__*/_jsxs(CornerRadii, {
        width: layout.width,
        height: layout.height,
        style: flatStyle,
        backgroundColor: bgColor,
        children: [isLinear ? /*#__PURE__*/_jsx(LinearGradientFill, {
          ...props,
          // from, to, colors, etc.
          width: layout.width,
          height: layout.height
        }) : null, /*#__PURE__*/_jsx(Shadow, {
          dx: shadowProps.shadowOffset.width,
          dy: shadowProps.shadowOffset.height,
          blur: shadowProps.shadowBlur,
          color: shadowProps.shadowColor,
          inner: inset
        }), isReflectedLightEnabled ? /*#__PURE__*/_jsx(Shadow, {
          dx: shadowProps.reflectedLightOffset.width,
          dy: shadowProps.reflectedLightOffset.height,
          blur: shadowProps.reflectedLightBlur,
          color: shadowProps.reflectedLightColor,
          inner: true
        }) : null]
      })
    }) : null, /*#__PURE__*/_jsx(View, {
      ...props,
      style: COMMON_STYLES.canvasWrapper,
      children: children
    })]
  });
});

/**
 * ShadowView: for a basic “solid” background shadow(no gradient props).
 *
 * @remarks
 * See {@link InnerShadowProps} for a linear gradient background shadow.
 *
 * @example
 * ```ts
 * <ShadowView style={styles.shadowView} inset>
 *   <Text>ShadowView</Text>
 * </ShadowView>
 * ```
 */
export const ShadowView = UnifiedShadowView;

/**
 * LinearShadowView: for a linear gradient background shadow
 * (requires e.g. colors, from, to).
 *
 * @remarks
 * See {@link LinearInnerShadowProps} for a solid background shadow.
 *
 * @example
 * ```ts
 *  <LinearShadowView
 *    style={styles.shadowView}
 *    colors={['#f1c40f', '#e74c3c']}
 *    from="top"
 *  >
 *    <Text>LinearShadowView</Text>
 *  </LinearShadowView>
 * ```
 */
export const LinearShadowView = UnifiedShadowView;
//# sourceMappingURL=ShadowView.js.map