react-native-inner-shadow
Version:
react native inner shadows with linear gradient design UI
177 lines (173 loc) • 7.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.UnifiedShadowToggle = exports.ShadowToggle = exports.RadialShadowToggle = 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("./shapes/ShadowLinearGradientFill.js"));
var _useAnimatedOffset = require("../hooks/useAnimatedOffset.js");
var _CornerRadii = require("./shapes/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: [flatStyle, _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
}), /*#__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
})]
})
}), /*#__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, default is 'top'
* @param to - The direction of the linear gradient, default is 'bottom'
*/
const LinearShadowToggle = ({
from = 'top',
to = 'bottom',
...props
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(UnifiedShadowToggle, {
from: from,
to: to,
...props
});
/**
* RadialShadowToggle
* ----------------
* A toggle component that casts a radial 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 radial gradient
* @param center - The center of the radial gradient, default is { x: 0.5, y: 0.5 }
* @param radius - The radius of the radial gradient, default is 0.5
*/
exports.LinearShadowToggle = LinearShadowToggle;
const RadialShadowToggle = ({
center = {
x: 0.5,
y: 0.5
},
radius = 0.5,
...props
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(UnifiedShadowToggle, {
center: center,
radius: radius,
...props
});
exports.RadialShadowToggle = RadialShadowToggle;
//# sourceMappingURL=ShadowToggle.js.map