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

react native inner shadows with linear gradient design UI

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BaseShadowComponent = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _constants = require("../constants.js");
var _reactNativeSkia = require("@shopify/react-native-skia");
var _CornerRadii = require("./shapes/CornerRadii.js");
var _useShadowProperties = require("./../hooks/useShadowProperties.js");
var _utils = require("../utils.js");
var _ShadowLinearGradientFill = _interopRequireDefault(require("./shapes/ShadowLinearGradientFill.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * 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 BaseShadowComponent = exports.BaseShadowComponent = /*#__PURE__*/(0, _react.memo)(function BaseShadowComponent({
  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
  });
  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,
          width: layout.width,
          height: layout.height
        }), /*#__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
        })]
      })
    }), children]
  });
});
//# sourceMappingURL=BaseShadowComponent.js.map