@prosperitainova/dumbo-react-native/lib/module/components/UiPanel/index.js

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, ScrollView, Modal as ReactModal, Pressable, View, Animated } from 'react-native';
import { getColor } from '../../styles/colors';
import { styleReferenceBreaker } from '../../helpers';
import { UiPanelItem } from '../UiPanelItem';
import { modalPresentations } from '../../constants/constants';
import { BottomSafeAreaColorOverride } from '../BottomSafeAreaColorOverride';
import { defaultText } from '../../constants/defaultText';
import { zIndexes } from '../../styles/z-index';
import { SafeAreaWrapper } from '../SafeAreaWrapper';

/** Props for UiPanel component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * UiPanel component for rendering a slide over panel that overlays on the UI
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/UiPanel.tsx | Example code}
 */
export class UiPanel extends React.Component {
  animatedValue = new Animated.Value(0);
  get styles() {
    return StyleSheet.create({
      safeAreaWrapper: {
        position: 'relative',
        flexGrow: 1
      },
      innerWrapping: {
        position: 'relative',
        flexGrow: 1
      },
      animatedWrapper: {
        flexGrow: 1,
        opacity: 0
      },
      pressableTop: {
        height: 48
      },
      pressableRight: {
        zIndex: zIndexes.behind,
        backgroundColor: getColor('overlay'),
        position: 'absolute',
        top: 49,
        right: 0,
        bottom: 0,
        left: 0
      },
      panelWrapper: {
        borderTopColor: getColor('borderSubtle01'),
        borderTopWidth: 1,
        flex: 1,
        backgroundColor: getColor('layer01'),
        marginRight: 48
      },
      panelWrapperInner: {
        paddingBottom: 48
      }
    });
  }
  loadIn = () => {
    Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true
    }).start();
  };
  loadOut = () => {
    Animated.timing(this.animatedValue, {
      toValue: 0,
      duration: 100,
      useNativeDriver: true
    }).start();
  };
  componentDidMount() {
    const {
      open
    } = this.props;
    if (open) {
      this.loadIn();
    } else {
      this.loadOut();
    }
  }
  componentDidUpdate(previousProps) {
    const {
      open
    } = this.props;
    if (open !== previousProps.open) {
      if (open) {
        this.loadIn();
      } else {
        this.loadOut();
      }
    }
  }
  render() {
    const {
      open,
      items,
      style,
      componentProps,
      onClose,
      onCloseText,
      closeOnNoChildrenPress
    } = this.props;
    return open && /*#__PURE__*/_jsx(ReactModal, {
      supportedOrientations: modalPresentations,
      transparent: true,
      children: /*#__PURE__*/_jsxs(Animated.View, {
        style: [this.styles.animatedWrapper, {
          opacity: this.animatedValue
        }],
        children: [/*#__PURE__*/_jsx(BottomSafeAreaColorOverride, {
          color: getColor('layer01'),
          marginRight: 48,
          backgroundOverlay: true
        }), /*#__PURE__*/_jsx(SafeAreaWrapper, {
          style: this.styles.safeAreaWrapper,
          children: /*#__PURE__*/_jsxs(View, {
            style: this.styles.innerWrapping,
            children: [/*#__PURE__*/_jsx(Pressable, {
              style: this.styles.pressableTop,
              accessibilityRole: "button",
              accessibilityLabel: onCloseText || defaultText.close,
              onPress: onClose
            }), /*#__PURE__*/_jsx(Pressable, {
              style: this.styles.pressableRight,
              accessibilityRole: "button",
              accessibilityLabel: onCloseText || defaultText.close,
              onPress: onClose
            }), /*#__PURE__*/_jsx(ScrollView, {
              bounces: false,
              style: styleReferenceBreaker(this.styles.panelWrapper, style),
              contentContainerStyle: this.styles.panelWrapperInner,
              accessibilityRole: "menu",
              ...(componentProps || {}),
              children: (items || []).filter(item => !item.hidden).map((item, index) => /*#__PURE__*/_jsx(UiPanelItem, {
                ...item,
                noChildrenPressCallback: closeOnNoChildrenPress ? onClose : undefined
              }, index))
            })]
          })
        })]
      })
    });
  }
}
//# sourceMappingURL=index.js.map