react-native-inner-shadow
Version:
react native inner shadows with linear gradient design UI
159 lines (156 loc) • 6.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.UnifiedShadowPressable = exports.ShadowPressable = exports.LinearShadowPressable = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSkia = require("@shopify/react-native-skia");
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _constants = require("../constants.js");
var _utils = require("../utils.js");
var _ShadowLinearGradientFill = _interopRequireDefault(require("./ShadowLinearGradientFill.js"));
var _CornerRadii = require("./CornerRadii.js");
var _useAnimatedOffset = require("../hooks/useAnimatedOffset.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 UnifiedShadowPressable = exports.UnifiedShadowPressable = /*#__PURE__*/(0, _react.memo)(function ShadowPressable({
width: propWidth,
height: propHeight,
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 {
onPressIn,
onPressOut,
offset,
reflectedLightOffset,
inset,
blurRadius,
PressedAnimatedStyle
} = (0, _useAnimatedOffset.useAnimatedOffset)({
offset: shadowProps.shadowOffset,
reflectedLightOffset: shadowProps.reflectedLightOffset,
blurRadius: shadowProps.shadowBlur,
damping,
duration,
onPressIn: props.onPressIn,
onPressOut: props.onPressOut
});
const isLinear = (0, _utils.isLinearProps)(props);
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: 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: 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,
style: [{
zIndex: 1
}, flatStyle, _constants.COMMON_STYLES.canvasWrapper],
onPressIn: onPressIn,
onPressOut: onPressOut,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: PressedAnimatedStyle,
children: children
})
})]
});
});
/**
* ShadowPressable
* ----------------
* A pressable component that casts a shadow when pressed.
* The shadow effect is created using the `@shopify/react-native-skia` library.
*
* @remarks
* See {@link ShadowPressableProps} for a linear gradient shadow.
*
* @example
* ```ts
* <ShadowPressable style={styles.shadowView} reflectedLightColor="#ffffff8d">
* <Text style={[styles.context]}>Press Me!</Text>
* </ShadowPressable>
* ```
*
* @param duration - The duration of the shadow animation
* @param damping - The damping factor of the shadow animation
* @param isReflectedLightEnabled - Whether the reflected light effect is enabled
* @param initialDepth - deprecated: set shadow depth using `shadowOffset` instead
* @param shadowSpace - deprecated: set shadow depth using `shadowOffset` instead
*/
const ShadowPressable = exports.ShadowPressable = UnifiedShadowPressable;
/**
* LinearShadowPressable
* ----------------
* A pressable component that casts a linear gradient shadow when pressed.
* The shadow effect is created using the `@shopify/react-native-skia` library.
*
* @remarks
* See {@link LinearShadowPressableProps} for a linear gradient shadow.
*
* @example
* ```ts
* <LinearShadowPressable style={styles.shadowView} colors={['#f1c40f', '#e74c3c']} from="top" to="bottom">
* <Text style={[styles.context]}>Press Me!</Text>
* </LinearShadowPressable>
* ```
*
* @param duration - The duration of the shadow animation
* @param damping - The damping factor of the shadow animation
* @param isReflectedLightEnabled - Whether the reflected light effect is enabled
* @param from - The direction of the linear gradient
* @param to - The direction of the linear gradient
*/
const LinearShadowPressable = exports.LinearShadowPressable = UnifiedShadowPressable;
//# sourceMappingURL=ShadowPressable.js.map