Split Section to index.js and IconSection.js

src/components/Section/IconSection.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+const iconSectionPropTypes = {
+    icon: PropTypes.icon,
+    IconComponent: PropTypes.IconComponent,
+    iconContainerStyles: PropTypes.iconContainerStyles,
+};
+
+const defaultIconSectionPropTypes = {
+    icon: null,
+    IconComponent: null,
+    iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+            {Boolean(icon) && (
+                <Icon
+                    src={icon}
+                    height={68}
+                    width={68}
+                />
+            )}
+            {Boolean(IconComponent) && <IconComponent />}
+        </View>
+    );
+}
+
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
+
+export default IconSection;

src/components/Section/index.js

@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import MenuItemList from '@components/MenuItemList';
+import menuItemPropTypes from '@components/menuItemPropTypes';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import IconSection from './IconSection';
+
+const CARD_LAYOUT = {
+    ICON_ON_TOP: 'iconOnTop',
+    ICON_ON_RIGHT: 'iconOnRight',
+};
+
+const propTypes = {
+    /** An array of props that are pass to individual MenuItem components */
+    menuItems: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
+
+    /** The text to display in the title of the section */
+    title: PropTypes.string.isRequired,
+
+    /** The text to display in the subtitle of the section */
+    subtitle: PropTypes.string,
+
+    /** The icon to display along with the title */
+    icon: PropTypes.func,
+
+    /** Icon component */
+    IconComponent: PropTypes.func,
+
+    /** Card layout that affects icon positioning, margins, sizes. */
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
+
+    /** Contents to display inside the section */
+    children: PropTypes.node,
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    titleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    subtitleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Whether the subtitle should have a muted style */
+    subtitleMuted: PropTypes.bool,
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    childrenStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Icon container */
+    // eslint-disable-next-line react/forbid-prop-types
+    iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+const defaultProps = {
+    menuItems: null,
+    children: null,
+    icon: null,
+    IconComponent: null,
+    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
+    containerStyles: [],
+    iconContainerStyles: [],
+    titleStyles: [],
+    subtitleStyles: [],
+    subtitleMuted: false,
+    childrenStyles: [],
+    subtitle: null,
+};
+
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <>
+            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
+                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
+                    <IconSection
+                        icon={icon}
+                        IconComponent={IconComponent}
+                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                    />
+                )}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
+                    <View style={[styles.flexShrink1]}>
+                        <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
+                    </View>
+                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
+                        <IconSection
+                            icon={icon}
+                            IconComponent={IconComponent}
+                            iconContainerStyles={iconContainerStyles}
+                        />
+                    )}
+                </View>
+
+                {Boolean(subtitle) && (
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
+                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
+                    </View>
+                )}
+
+                <View style={[styles.w100, ...childrenStyles]}>{children}</View>
+
+                <View style={[styles.w100]}>{Boolean(menuItems) && <MenuItemList menuItems={menuItems} />}</View>
+            </View>
+        </>
+    );
+}
+Section.displayName = 'Section';
+Section.propTypes = propTypes;
+Section.defaultProps = defaultProps;
+
+export {CARD_LAYOUT};
+export default Section;