react-native-inner-shadow
Version:
react native inner shadows with linear gradient design UI
122 lines (118 loc) • 3.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ShadowView = exports.RadialShadowView = exports.LinearShadowView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _constants = require("../constants.js");
var _BaseShadowComponent = require("./BaseShadowComponent.js");
var _jsxRuntime = require("react/jsx-runtime");
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; }
/**
* 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 UnifiedShadowView = /*#__PURE__*/(0, _react.memo)(function UnifiedShadowView({
children,
backgroundColor,
...props
}) {
const flatStyle = _reactNative.StyleSheet.flatten(props.style) || {};
// Extract base fields
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseShadowComponent.BaseShadowComponent, {
...props,
style: flatStyle,
backgroundColor: backgroundColor,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
...props,
style: [flatStyle, _constants.COMMON_STYLES.canvasWrapper],
children: children
})
});
});
/**
* ShadowView: for a basic “solid” background shadow(no gradient props).
*
* @remarks
* See {@link InnerShadowProps} for a linear gradient background shadow.
*
* @example
* ```ts
* <ShadowView style={styles.shadowView} inset>
* <Text>ShadowView</Text>
* </ShadowView>
* ```
*/
const ShadowView = props => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(UnifiedShadowView, {
...props
});
};
/**
* LinearShadowView: for a linear gradient background shadow
* (requires e.g. colors, from, to).
*
* @remarks
* See {@link LinearInnerShadowProps} for a solid background shadow.
*
* @example
* ```ts
* <LinearShadowView
* style={styles.shadowView}
* colors={['#f1c40f', '#e74c3c']}
* from="top"
* >
* <Text>LinearShadowView</Text>
* </LinearShadowView>
* ```
*/
exports.ShadowView = ShadowView;
const LinearShadowView = ({
from = 'top',
to = 'bottom',
...props
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(UnifiedShadowView, {
...props,
from: from,
to: to
});
};
/**
* RadialShadowView: for a radial gradient background shadow
* (requires e.g. center, radius).
*
* @remarks
* See {@link RadialInnerShadowProps} for a solid background shadow.
*
* @example
* ```ts
* <RadialShadowView
* style={styles.shadowView}
* center={{ x: 0.5, y: 0.5 }}
* radius={0.5}
* colors={['#f1c40f', '#e74c3c']}
* >
* <Text>RadialShadowView</Text>
* </RadialShadowView>
* ```
*/
exports.LinearShadowView = LinearShadowView;
const RadialShadowView = ({
center = {
x: 0.5,
y: 0.5
},
radius = 0.5,
...props
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(UnifiedShadowView, {
...props,
center: center,
radius: radius
});
};
exports.RadialShadowView = RadialShadowView;
//# sourceMappingURL=ShadowView.js.map