@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
74 lines (72 loc) • 2.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Accordion = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _HeaderBorder = require("./_HeaderBorder.js");
var _Item = require("./_Item.js");
var _context = require("./_context.js");
var _styles = require("./_styles.js");
var _jsxRuntime = require("react/jsx-runtime");
const Accordion_ = /*#__PURE__*/(0, _react.forwardRef)(function Accordion({
size = 'medium',
flushAlignment,
children,
style,
onLayout,
...props
}, forwardedRef) {
const ref = (0, _react.useRef)({
marginRightStyleKey: getMarginRightStyleKey(windowWidth)
}),
[marginRightStyleKey, setMarginRightStyleKey] = (0, _react.useState)(ref.current.marginRightStyleKey),
handlerLayout = (0, _react.useCallback)(event => {
onLayout?.(event);
/**
* https://carbondesignsystem.com/components/accordion/style/#margin-right
*/
const key = getMarginRightStyleKey(windowWidth);
if (ref.current.marginRightStyleKey !== key) {
ref.current.marginRightStyleKey = key;
setMarginRightStyleKey(key);
}
}, [onLayout]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
...props,
style: style,
onLayout: handlerLayout,
ref: forwardedRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.Context.Provider, {
value: {
size,
flushAlignment,
collapsibleContentContainerStyle: _styles.MarginRightStyle[marginRightStyleKey]
},
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderBorder.HeaderBorder, {
flushAlignment: flushAlignment,
style: baseStyle.lastAccordionHeaderBorder
})]
})
});
});
const Accordion = exports.Accordion = Object.assign(Accordion_, {
Item: _Item.Item
});
const baseStyle = _reactNative.StyleSheet.create({
lastAccordionHeaderBorder: {
top: '100%'
}
}),
windowWidth = _reactNative.Dimensions.get('window').width;
function getMarginRightStyleKey(width) {
if (width < 420) {
return 'small';
}
if (width <= 640) {
return 'range_420_640';
}
return 'large';
}
//# sourceMappingURL=Accordion.js.map