UNPKG

react-native-inner-shadow

Version:

react native inner shadows with linear gradient design UI

142 lines (139 loc) 6.13 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.UnifiedShadowToggle = exports.ShadowToggle = exports.LinearShadowToggle = void 0; var _react = _interopRequireWildcard(require("react")); var _reactNative = require("react-native"); var _reactNativeSkia = require("@shopify/react-native-skia"); var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated")); var _constants = require("../constants.js"); var _utils = require("../utils.js"); var _ShadowLinearGradientFill = _interopRequireDefault(require("./ShadowLinearGradientFill.js")); var _useAnimatedOffset = require("../hooks/useAnimatedOffset.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; } const PressButton = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.Pressable); const UnifiedShadowToggle = exports.UnifiedShadowToggle = /*#__PURE__*/(0, _react.memo)(function ShadowToggle({ width: propWidth, height: propHeight, isActive = false, activeColor, duration = _constants.DAMPING_DURATION, damping = _constants.DAMPING_RATIO, isReflectedLightEnabled = _constants.IS_REFLECTED_LIGHT_ENABLED, style, children, onLayout: propsOnLayout, ...props }) { const { flatStyle, bgColor, shadowProps, layout, canRenderCanvas, onLayout } = (0, _useShadowProperties.useShadowProperties)({ propWidth, propHeight, style, propsOnLayout, ...props }); const isLinear = (0, _utils.isLinearProps)(props); const { depth, inset, offset, reflectedLightOffset, blurRadius, PressedAnimatedStyle } = (0, _useAnimatedOffset.useAnimatedOffset)({ offset: shadowProps.shadowOffset, reflectedLightOffset: shadowProps.reflectedLightOffset, blurRadius: shadowProps.shadowBlur, damping, duration, onPressIn: props.onPressIn, onPressOut: props.onPressOut }); const animatedBackgroundColor = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolateColor)(depth.value, [_constants.INITIAL_DEPTH, -_constants.INITIAL_DEPTH * damping], [bgColor, activeColor || bgColor])); (0, _reactNativeReanimated.useAnimatedReaction)(() => isActive, next => { depth.value = (0, _reactNativeReanimated.withTiming)(next ? -_constants.INITIAL_DEPTH * damping : _constants.INITIAL_DEPTH, { duration }); }, [isActive]); return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, { onLayout: onLayout, style: _constants.COMMON_STYLES.canvasContainer, 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: animatedBackgroundColor, 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: offset.dx, dy: offset.dy, blur: blurRadius, color: shadowProps.shadowColor, inner: inset }), isReflectedLightEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Shadow, { dx: reflectedLightOffset.dx, dy: reflectedLightOffset.dy, blur: blurRadius, color: shadowProps.reflectedLightColor, inner: true }) : null] }) }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(PressButton, { ...props, // eslint-disable-next-line react-native/no-inline-styles style: [{ zIndex: 1 }, flatStyle, _constants.COMMON_STYLES.canvasWrapper], children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, { style: PressedAnimatedStyle, children: children }) })] }); }); /** * ShadowToggle * ---------------- * A toggle component that casts a shadow when active. * The shadow effect is created using the `@shopify/react-native-skia` library. * * @param isActive - Whether the shadow is active * @param activeColor - The color of the shadow when active */ const ShadowToggle = exports.ShadowToggle = UnifiedShadowToggle; /** * LinearShadowToggle * ---------------- * A toggle component that casts a linear gradient shadow when active. * The shadow effect is created using the `@shopify/react-native-skia` library. * * @param isActive - Whether the shadow is active * @param activeColor - The color of the shadow when active * @param colors - The colors of the linear gradient * @param from - The direction of the linear gradient * @param to - The direction of the linear gradient */ const LinearShadowToggle = exports.LinearShadowToggle = UnifiedShadowToggle; //# sourceMappingURL=ShadowToggle.js.map