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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, Pressable, View } from 'react-native';
import { getColor } from '../../styles/colors';
import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import { Text } from '../Text';
import ChevronDownIcon from '@carbon/icons/es/chevron--down/20';
import ChevronUpIcon from '@carbon/icons/es/chevron--up/20';

/** Item to show in the UiPanel */

/** Props for UiPanelItem component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * UiPanelItem component for rendering an item in the UI Panel
 * This is a child of UiPanel component
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/UiPanel.tsx | Example code}
 */
export class UiPanelItem extends React.Component {
  state = {
    open: false
  };
  itemColor(forceDisabled) {
    const {
      disabled
    } = this.props;
    if (disabled || forceDisabled) {
      return getColor('textDisabled');
    } else {
      return getColor('textSecondary');
    }
  }
  get styles() {
    const {
      open
    } = this.state;
    return StyleSheet.create({
      wrapper: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        backgroundColor: open ? getColor('backgroundSelected') : undefined,
        minHeight: 48
      },
      primaryText: {
        color: this.itemColor(),
        flex: 1,
        padding: 16,
        paddingTop: 13,
        paddingBottom: 13
      },
      childText: {
        color: this.itemColor(),
        flex: 1,
        padding: 16,
        paddingTop: 13,
        paddingBottom: 13
      },
      icon: {
        padding: 14
      },
      openIndicator: {
        width: 4,
        backgroundColor: getColor('borderInteractive'),
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0
      },
      nestedItem: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        minHeight: 48
      }
    });
  }
  pressParent = event => {
    const {
      open
    } = this.state;
    const {
      children,
      onPress,
      noChildrenPressCallback
    } = this.props;
    if (typeof onPress === 'function') {
      onPress(event);
    }
    if (children?.length) {
      this.setState({
        open: !open
      });
    } else if (typeof noChildrenPressCallback === 'function') {
      noChildrenPressCallback();
    }
  };
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: getColor('layerActive01')
    } : undefined;
  };
  get nestedItems() {
    const {
      children,
      noChildrenPressCallback
    } = this.props;
    return children?.filter(item => !item.hidden).map((item, index) => {
      const finalTextStyle = styleReferenceBreaker(this.styles.childText);
      const finalStyle = styleReferenceBreaker(this.styles.nestedItem);
      finalStyle.paddingLeft = item.leftIcon ? 24 : 72;
      if (item.disabled) {
        finalTextStyle.color = getColor('textDisabled');
      }
      const onPress = event => {
        if (typeof item.onPress === 'function') {
          item.onPress(event);
        }
        if (typeof noChildrenPressCallback === 'function') {
          noChildrenPressCallback();
        }
      };
      return /*#__PURE__*/_jsxs(Pressable, {
        style: state => pressableFeedbackStyle(state, styleReferenceBreaker(finalStyle, item.style), this.getStateStyle),
        accessibilityRole: "button",
        accessibilityLabel: item.text,
        onPress: onPress,
        onLongPress: item.onLongPress,
        disabled: item.disabled,
        ...(item.componentProps || {}),
        children: [!!item.leftIcon && /*#__PURE__*/_jsx(View, {
          style: this.styles.icon,
          children: createIcon(item.leftIcon, 20, 20, this.itemColor(item.disabled))
        }), /*#__PURE__*/_jsx(Text, {
          breakMode: item.textBreakMode,
          style: finalTextStyle,
          text: item.text
        }), !!item.rightIcon && /*#__PURE__*/_jsx(View, {
          style: this.styles.icon,
          children: createIcon(item.rightIcon, 20, 20, this.itemColor(item.disabled))
        })]
      }, index);
    });
  }
  componentDidMount() {
    const {
      openOnLoad,
      children
    } = this.props;
    if (openOnLoad && !!children?.length) {
      this.setState({
        open: true
      });
    }
  }
  render() {
    const {
      open
    } = this.state;
    const {
      text,
      textBreakMode,
      leftIcon,
      disabled,
      children,
      componentProps,
      style,
      rightIcon,
      onLongPress
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      children: [/*#__PURE__*/_jsxs(Pressable, {
        style: state => pressableFeedbackStyle(state, styleReferenceBreaker(this.styles.wrapper, style), this.getStateStyle),
        accessibilityRole: "button",
        accessibilityLabel: text,
        onPress: this.pressParent,
        onLongPress: onLongPress,
        disabled: disabled,
        ...(componentProps || {}),
        children: [open && /*#__PURE__*/_jsx(View, {
          style: this.styles.openIndicator
        }), !!leftIcon && /*#__PURE__*/_jsx(View, {
          style: this.styles.icon,
          children: createIcon(leftIcon, 20, 20, this.itemColor())
        }), /*#__PURE__*/_jsx(Text, {
          breakMode: textBreakMode,
          type: "heading-compact-02",
          style: this.styles.primaryText,
          text: text
        }), !!rightIcon && /*#__PURE__*/_jsx(View, {
          style: this.styles.icon,
          children: createIcon(rightIcon, 20, 20, this.itemColor())
        }), !!children?.length && /*#__PURE__*/_jsx(View, {
          style: this.styles.icon,
          children: createIcon(open ? ChevronUpIcon : ChevronDownIcon, 20, 20, this.itemColor())
        })]
      }), open && children && this.nestedItems]
    });
  }
}
//# sourceMappingURL=index.js.map