react-native-inner-shadow
Version:
react native inner shadows with linear gradient design UI
82 lines (75 loc) • 2.4 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useShadowProperties = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _utils = require("../utils.js");
var _constants = require("../constants.js");
const useShadowProperties = ({
propWidth,
propHeight,
style,
backgroundColor,
shadowOffset,
shadowColor = _constants.SHADOW_COLOR,
shadowBlur = _constants.SHADOW_BLUR,
reflectedLightOffset,
reflectedLightColor = _constants.REFLECTED_LIGHT_COLOR,
reflectedLightBlur = _constants.REFLECTED_LIGHT_BLUR,
propsOnLayout,
...props
}) => {
// Flatten styles
const flatStyle = (0, _react.useMemo)(() => _reactNative.StyleSheet.flatten(style) || {}, [style]);
// Get background color
const bgColor = (0, _react.useMemo)(() => (0, _utils.getBackgroundColor)({
backgroundColor,
styleBackground: flatStyle.backgroundColor
}), [backgroundColor, flatStyle.backgroundColor]);
// Compute shadow properties
const shadowProps = (0, _react.useMemo)(() => (0, _utils.computeShadowProperties)({
shadowOffset,
shadowColor,
shadowBlur,
reflectedLightOffset,
reflectedLightColor,
reflectedLightBlur
}), [shadowOffset, shadowColor, shadowBlur, reflectedLightOffset, reflectedLightColor, reflectedLightBlur]);
// Check if linear gradient props are provided
const isLinear = (0, _utils.isLinearProps)(props);
// Handle layout
const initialW = propWidth ?? (0, _utils.numerify)(flatStyle.width, 0);
const initialH = propHeight ?? (0, _utils.numerify)(flatStyle.height, 0);
const [layout, setLayout] = (0, _react.useState)({
width: initialW,
height: initialH
});
// Create onLayout handler
const onLayout = (0, _react.useMemo)(() => e => {
propsOnLayout?.(e);
if (initialW && initialH) return;
const {
width,
height
} = e.nativeEvent.layout;
setLayout(prev => prev.width === width && prev.height === height ? prev : {
width,
height
});
}, [initialW, initialH, propsOnLayout]);
// Check if canvas can be rendered
const canRenderCanvas = Boolean(layout.width && layout.height);
return {
flatStyle,
bgColor,
shadowProps,
isLinear,
layout,
canRenderCanvas,
onLayout
};
};
exports.useShadowProperties = useShadowProperties;
//# sourceMappingURL=useShadowProperties.js.map
;