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

react native inner shadows with linear gradient design UI

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ShadowView = exports.LinearShadowView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _utils = require("../utils.js");
var _constants = require("../constants.js");
var _reactNativeSkia = require("@shopify/react-native-skia");
var _ShadowLinearGradientFill = _interopRequireDefault(require("./ShadowLinearGradientFill.js"));
var _CornerRadii = require("./CornerRadii.js");
var _useShadowProperties = require("./../hooks/useShadowProperties.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * 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.).
 */const UnifiedShadowView = /*#__PURE__*/(0, _react.memo)(function UnifiedShadowView({
  width: propWidth,
  height: propHeight,
  inset,
  isReflectedLightEnabled = _constants.IS_REFLECTED_LIGHT_ENABLED,
  style,
  onLayout: propsOnLayout,
  children,
  ...props
}) {
  // Extract base fields
  const {
    flatStyle,
    bgColor,
    shadowProps,
    layout,
    canRenderCanvas,
    onLayout
  } = (0, _useShadowProperties.useShadowProperties)({
    propWidth,
    propHeight,
    style,
    inset,
    propsOnLayout,
    ...props
  });
  // If isReflectedLightEnabled is undefined, default to `props.inset` (typical).
  const isLinear = (0, _utils.isLinearProps)(props);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [flatStyle, _constants.COMMON_STYLES.canvasContainer],
    onLayout: onLayout,
    children: [canRenderCanvas ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
      style: [_constants.COMMON_STYLES.canvas, {
        width: layout.width + _constants.CANVAS_PADDING * 2,
        height: layout.height + _constants.CANVAS_PADDING * 2
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CornerRadii.CornerRadii, {
        width: layout.width,
        height: layout.height,
        style: flatStyle,
        backgroundColor: bgColor,
        children: [isLinear ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ShadowLinearGradientFill.default, {
          ...props,
          // from, to, colors, etc.
          width: layout.width,
          height: layout.height
        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Shadow, {
          dx: shadowProps.shadowOffset.width,
          dy: shadowProps.shadowOffset.height,
          blur: shadowProps.shadowBlur,
          color: shadowProps.shadowColor,
          inner: inset
        }), isReflectedLightEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Shadow, {
          dx: shadowProps.reflectedLightOffset.width,
          dy: shadowProps.reflectedLightOffset.height,
          blur: shadowProps.reflectedLightBlur,
          color: shadowProps.reflectedLightColor,
          inner: true
        }) : null]
      })
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      ...props,
      style: _constants.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>
 * ```
 */
const ShadowView = exports.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>
 * ```
 */
const LinearShadowView = exports.LinearShadowView = UnifiedShadowView;
//# sourceMappingURL=ShadowView.js.map