@audira/carbon-react-native/lib/module/components/accordion/Accordion.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

import { forwardRef, useCallback, useRef, useState } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import { HeaderBorder } from "./_HeaderBorder.js";
import { Item } from "./_Item.js";
import { Context } from "./_context.js";
import { MarginRightStyle } from "./_styles.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Accordion_ = /*#__PURE__*/forwardRef(function Accordion({
  size = 'medium',
  flushAlignment,
  children,
  style,
  onLayout,
  ...props
}, forwardedRef) {
  const ref = useRef({
      marginRightStyleKey: getMarginRightStyleKey(windowWidth)
    }),
    [marginRightStyleKey, setMarginRightStyleKey] = useState(ref.current.marginRightStyleKey),
    handlerLayout = 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__*/_jsx(View, {
    ...props,
    style: style,
    onLayout: handlerLayout,
    ref: forwardedRef,
    children: /*#__PURE__*/_jsxs(Context.Provider, {
      value: {
        size,
        flushAlignment,
        collapsibleContentContainerStyle: MarginRightStyle[marginRightStyleKey]
      },
      children: [children, /*#__PURE__*/_jsx(HeaderBorder, {
        flushAlignment: flushAlignment,
        style: baseStyle.lastAccordionHeaderBorder
      })]
    })
  });
});
export const Accordion = Object.assign(Accordion_, {
  Item: Item
});
const baseStyle = StyleSheet.create({
    lastAccordionHeaderBorder: {
      top: '100%'
    }
  }),
  windowWidth = 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