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 { StyleSheet, View } from 'react-native';
import { COMMON_STYLES } from "../constants.js";
import { BaseShadowComponent } from "./BaseShadowComponent.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 } from "react/jsx-runtime";
const UnifiedShadowView = /*#__PURE__*/memo(function UnifiedShadowView({
  children,
  backgroundColor,
  ...props
}) {
  const flatStyle = StyleSheet.flatten(props.style) || {};
  // Extract base fields
  return /*#__PURE__*/_jsx(BaseShadowComponent, {
    ...props,
    style: flatStyle,
    backgroundColor: backgroundColor,
    children: /*#__PURE__*/_jsx(View, {
      ...props,
      style: [flatStyle, 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 = props => {
  return /*#__PURE__*/_jsx(UnifiedShadowView, {
    ...props
  });
};

/**
 * 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 = ({
  from = 'top',
  to = 'bottom',
  ...props
}) => {
  return /*#__PURE__*/_jsx(UnifiedShadowView, {
    ...props,
    from: from,
    to: to
  });
};

/**
 * RadialShadowView: for a radial gradient background shadow
 * (requires e.g. center, radius).
 *
 * @remarks
 * See {@link RadialInnerShadowProps} for a solid background shadow.
 *
 * @example
 * ```ts
 *  <RadialShadowView
 *    style={styles.shadowView}
 *    center={{ x: 0.5, y: 0.5 }}
 *    radius={0.5}
 *    colors={['#f1c40f', '#e74c3c']}
 *  >
 *    <Text>RadialShadowView</Text>
 *  </RadialShadowView>
 * ```
 */
export const RadialShadowView = ({
  center = {
    x: 0.5,
    y: 0.5
  },
  radius = 0.5,
  ...props
}) => {
  return /*#__PURE__*/_jsx(UnifiedShadowView, {
    ...props,
    center: center,
    radius: radius
  });
};
//# sourceMappingURL=ShadowView.js.map