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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UiPanel = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _UiPanelItem = require("../UiPanelItem");
var _constants = require("../../constants/constants");
var _BottomSafeAreaColorOverride = require("../BottomSafeAreaColorOverride");
var _defaultText = require("../../constants/defaultText");
var _zIndex = require("../../styles/z-index");
var _SafeAreaWrapper = require("../SafeAreaWrapper");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for UiPanel component */

/**
 * 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}
 */
class UiPanel extends _react.default.Component {
  animatedValue = new _reactNative.Animated.Value(0);
  get styles() {
    return _reactNative.StyleSheet.create({
      safeAreaWrapper: {
        position: 'relative',
        flexGrow: 1
      },
      innerWrapping: {
        position: 'relative',
        flexGrow: 1
      },
      animatedWrapper: {
        flexGrow: 1,
        opacity: 0
      },
      pressableTop: {
        height: 48
      },
      pressableRight: {
        zIndex: _zIndex.zIndexes.behind,
        backgroundColor: (0, _colors.getColor)('overlay'),
        position: 'absolute',
        top: 49,
        right: 0,
        bottom: 0,
        left: 0
      },
      panelWrapper: {
        borderTopColor: (0, _colors.getColor)('borderSubtle01'),
        borderTopWidth: 1,
        flex: 1,
        backgroundColor: (0, _colors.getColor)('layer01'),
        marginRight: 48
      },
      panelWrapperInner: {
        paddingBottom: 48
      }
    });
  }
  loadIn = () => {
    _reactNative.Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true
    }).start();
  };
  loadOut = () => {
    _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
      supportedOrientations: _constants.modalPresentations,
      transparent: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
        style: [this.styles.animatedWrapper, {
          opacity: this.animatedValue
        }],
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSafeAreaColorOverride.BottomSafeAreaColorOverride, {
          color: (0, _colors.getColor)('layer01'),
          marginRight: 48,
          backgroundOverlay: true
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SafeAreaWrapper.SafeAreaWrapper, {
          style: this.styles.safeAreaWrapper,
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: this.styles.innerWrapping,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
              style: this.styles.pressableTop,
              accessibilityRole: "button",
              accessibilityLabel: onCloseText || _defaultText.defaultText.close,
              onPress: onClose
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
              style: this.styles.pressableRight,
              accessibilityRole: "button",
              accessibilityLabel: onCloseText || _defaultText.defaultText.close,
              onPress: onClose
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
              bounces: false,
              style: (0, _helpers.styleReferenceBreaker)(this.styles.panelWrapper, style),
              contentContainerStyle: this.styles.panelWrapperInner,
              accessibilityRole: "menu",
              ...(componentProps || {}),
              children: (items || []).filter(item => !item.hidden).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_UiPanelItem.UiPanelItem, {
                ...item,
                noChildrenPressCallback: closeOnNoChildrenPress ? onClose : undefined
              }, index))
            })]
          })
        })]
      })
    });
  }
}
exports.UiPanel = UiPanel;
//# sourceMappingURL=index.js.map