clwy-react-native-tableview-simple 4.5.0

package/src/components/Section.tsx

@@ -0,0 +1,284 @@
+import React, { useContext, useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+import Separator from './Separator';
+import { CellInterface } from './Cell';
+import { ThemeContext } from './Theme';
+
+export interface SectionInterface {
+  allowFontScaling?: boolean;
+  children?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  headerComponent?: React.ReactNode;
+  footer?: string;
+  footerTextColor?: TextStyle['color'];
+  footerTextStyle?: TextStyle;
+  header?: string;
+  headerTextColor?: TextStyle['color'];
+  headerTextStyle?: TextStyle;
+  hideSeparator?: boolean;
+  hideSurroundingSeparators?: boolean;
+  roundedCorners?: boolean;
+  sectionPaddingBottom?: ViewStyle['paddingBottom'];
+  sectionPaddingTop?: ViewStyle['paddingTop'];
+  sectionTintColor?: ViewStyle['backgroundColor'];
+  separatorInsetLeft?: ViewStyle['marginLeft'];
+  separatorInsetRight?: ViewStyle['marginRight'];
+  separatorTintColor?: ViewStyle['backgroundColor'];
+  withSafeAreaView?: boolean;
+}
+
+const Section: React.FC<SectionInterface> = ({
+                                               allowFontScaling = true,
+                                               children,
+                                               footerComponent,
+                                               headerComponent,
+                                               footer,
+                                               footerTextColor,
+                                               footerTextStyle = {},
+                                               header,
+                                               headerTextColor,
+                                               headerTextStyle = {},
+                                               hideSeparator = false,
+                                               hideSurroundingSeparators = false,
+                                               roundedCorners = false,
+                                               sectionPaddingBottom = 15,
+                                               sectionPaddingTop = 15,
+                                               sectionTintColor,
+                                               separatorInsetLeft = 15,
+                                               separatorInsetRight = 0,
+                                               separatorTintColor,
+                                               withSafeAreaView = Platform.OS === 'ios'
+                                                 ? parseInt(`${Platform.Version}`, 10) <= 10
+                                                   ? false
+                                                   : true
+                                                 : true,
+                                             }: SectionInterface) => {
+  const theme = useContext(ThemeContext);
+  const [highlightedRowIndex, setHighlightedRowIndex] = useState<number>();
+
+  const highlightRow = (index: number): void => {
+    setHighlightedRowIndex(index);
+  };
+  const unhighlightRow = (): void => {
+    setHighlightedRowIndex(undefined);
+  };
+
+  /**
+   * Merge styles with props
+   */
+  const localStyles = {
+    ...styles,
+    section: [
+      styles.section,
+      {
+        backgroundColor: sectionTintColor,
+        paddingBottom: sectionPaddingBottom,
+        paddingTop: sectionPaddingTop,
+      },
+    ],
+    sectionChildren: [
+      styles.sectionChildren,
+      roundedCorners && styles.sectionChildrenRoundedCorners,
+    ],
+
+    sectionheaderText: [
+      styles.sectionheaderText,
+      { color: headerTextColor || theme.colors.secondary },
+      headerTextStyle,
+    ],
+    sectionfooterText: [
+      styles.sectionfooterText,
+      { color: footerTextColor || theme.colors.secondary },
+      footerTextStyle,
+    ],
+  };
+
+  // Need until .count is fixed: https://github.com/facebook/react/issues/7685
+  const childrenWithoutEmpty = React.Children.toArray(children);
+  const sumOfChildren = childrenWithoutEmpty.length;
+
+  /**
+   * Render Cell and add Border
+   */
+  const renderChild = (
+    child: string | number | React.ReactNode,
+    index: number,
+  ): React.ReactNode => {
+    if (!child) {
+      return null;
+    }
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
+    const propsToAdd = {
+      onHighlightRow: (): void => highlightRow(index),
+      onUnHighlightRow: unhighlightRow,
+      sectionRoundedCorners: roundedCorners,
+      isFirstChild: index === 0,
+      isLastChild: index === sumOfChildren - 1,
+    };
+
+    const childProps = child?.props as CellInterface;
+
+    // Skip rendering of separator
+    if (
+      hideSeparator ||
+      !Array.isArray(children) ||
+      sumOfChildren === 1 ||
+      index === sumOfChildren - 1 ||
+      childProps?.hideSeparator
+    ) {
+      return React.cloneElement(child, propsToAdd);
+    }
+
+    const invisibleSeparator =
+      highlightedRowIndex === index || highlightedRowIndex === index + 1;
+
+    // Add margin, if Image is provided
+    let separatorInsetLeftSupportImage = separatorInsetLeft;
+    // only update if separatorInsetLeft is default
+    if (childProps?.image && separatorInsetLeft === 15) {
+      separatorInsetLeftSupportImage = 60;
+    }
+
+    return (
+      <View key={child?.key ?? undefined}>
+        {React.cloneElement(child, propsToAdd)}
+        <Separator
+          isHidden={invisibleSeparator}
+          backgroundColor={childProps?.backgroundColor}
+          tintColor={separatorTintColor}
+          insetLeft={separatorInsetLeftSupportImage}
+          insetRight={separatorInsetRight}
+        />
+      </View>
+    );
+  };
+
+  /**
+   * Render header if defined
+   */
+  const renderHeader = (): React.ReactNode | null => {
+    if (header && withSafeAreaView) {
+      return (
+        <View style={styles.sectionheader}>
+          <SafeAreaProvider>
+            <SafeAreaView>
+              <Text
+                allowFontScaling={allowFontScaling}
+                style={localStyles.sectionheaderText}>
+                {header}
+              </Text>
+            </SafeAreaView>
+          </SafeAreaProvider>
+        </View>
+      );
+    }
+    if (header) {
+      return (
+        <View style={styles.sectionheader}>
+          <Text
+            allowFontScaling={allowFontScaling}
+            style={localStyles.sectionheaderText}>
+            {header}
+          </Text>
+        </View>
+      );
+    }
+    return null;
+  };
+
+  /**
+   * Render footer if defined
+   */
+  const renderFooter = (): React.ReactNode | null => {
+    if (footer && withSafeAreaView) {
+      return (
+        <View style={styles.sectionfooter}>
+          <SafeAreaView>
+            <Text
+              allowFontScaling={allowFontScaling}
+              style={localStyles.sectionfooterText}>
+              {footer}
+            </Text>
+          </SafeAreaView>
+        </View>
+      );
+    }
+    if (footer) {
+      return (
+        <View style={styles.sectionfooter}>
+          <Text
+            allowFontScaling={allowFontScaling}
+            style={localStyles.sectionfooterText}>
+            {footer}
+          </Text>
+        </View>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <View style={localStyles.section}>
+      {headerComponent || renderHeader()}
+      {hideSurroundingSeparators || (
+        <Separator
+          insetLeft={0}
+          tintColor={separatorTintColor}
+          withSafeAreaView={false}
+        />
+      )}
+      <View style={localStyles.sectionChildren}>
+        {childrenWithoutEmpty.map(renderChild)}
+      </View>
+      {hideSurroundingSeparators || (
+        <Separator
+          insetLeft={0}
+          tintColor={separatorTintColor}
+          withSafeAreaView={false}
+        />
+      )}
+      {footerComponent || renderFooter()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {},
+  sectionChildren: {},
+  sectionChildrenRoundedCorners: {
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  sectionheader: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingBottom: 5,
+  },
+  sectionheaderText: {
+    fontSize: 13,
+    letterSpacing: -0.078,
+  },
+  sectionfooter: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    paddingTop: 10,
+  },
+  sectionfooterText: {
+    fontSize: 13,
+    letterSpacing: -0.078,
+  },
+});
+
+export default Section;

package/src/components/Separator.tsx

@@ -0,0 +1,73 @@
+import React, { useContext } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { ThemeContext } from './Theme';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+export interface SeparatorInterface {
+  backgroundColor?: ViewStyle['backgroundColor'];
+  tintColor?: ViewStyle['backgroundColor'];
+  isHidden?: boolean;
+  insetLeft?: ViewStyle['marginLeft'];
+  insetRight?: ViewStyle['marginRight'];
+  withSafeAreaView?: boolean;
+}
+
+const Separator: React.FC<SeparatorInterface> = ({
+                                                   backgroundColor,
+                                                   tintColor,
+                                                   isHidden = false,
+                                                   insetLeft = 15,
+                                                   insetRight = 0,
+                                                   withSafeAreaView = Platform.OS === 'ios'
+                                                     ? parseInt(`${Platform.Version}`, 10) <= 10
+                                                       ? false
+                                                       : true
+                                                     : true,
+                                                 }) => {
+  const theme = useContext(ThemeContext);
+  const localStyles = {
+    separator: [
+      styles.separator,
+      { backgroundColor: backgroundColor || theme.colors.background },
+    ],
+    separatorInner: [
+      styles.separatorInner,
+      {
+        backgroundColor: isHidden
+          ? 'transparent'
+          : tintColor || theme.colors.separatorColor,
+        marginLeft: insetLeft,
+        marginRight: insetRight,
+      },
+    ],
+  };
+
+  if (withSafeAreaView) {
+    return (
+      <SafeAreaProvider>
+        <SafeAreaView style={localStyles.separator}>
+          <View style={localStyles.separatorInner} />
+        </SafeAreaView>
+      </SafeAreaProvider>
+    );
+  }
+  return (
+    <View style={localStyles.separator}>
+      <View style={localStyles.separatorInner} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  separator: {},
+  separatorInner: {
+    height: StyleSheet.hairlineWidth,
+  },
+});
+
+export default Separator;

package/src/components/TableView.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  useColorScheme,
+  StyleSheet,
+  View,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { THEMES, ThemeContext, THEME_APPEARANCE } from './Theme';
+import { StringWithAutocomplete } from '../../CustomTypes';
+
+export interface TableViewInterface {
+  children?: React.ReactNode;
+  appearance?: StringWithAutocomplete<'auto' | 'dark' | 'light'>;
+  customAppearances?: {
+    [key: string]: THEME_APPEARANCE;
+  };
+  style?: StyleProp<ViewStyle>;
+}
+
+const TableView: React.FC<TableViewInterface> = ({
+  children,
+  appearance = 'auto',
+  customAppearances,
+  style,
+}: TableViewInterface) => {
+  let themeMode: THEME_APPEARANCE = THEMES?.appearances?.light;
+  const systemColorScheme = useColorScheme();
+  if (
+    appearance === 'auto' &&
+    (systemColorScheme === 'dark' || systemColorScheme === 'light')
+  ) {
+    themeMode = THEMES?.appearances?.[systemColorScheme];
+  } else if (appearance === 'light' || appearance === 'dark') {
+    themeMode = THEMES?.appearances?.[appearance];
+  } else if (
+    customAppearances &&
+    appearance &&
+    Object.prototype.hasOwnProperty.call(customAppearances, appearance)
+  ) {
+    themeMode = customAppearances[appearance];
+  }
+  return (
+    <ThemeContext.Provider value={themeMode}>
+      <View style={[styles.tableView, style]}>{children}</View>
+    </ThemeContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  tableView: {
+    flexDirection: 'column',
+  },
+});
+
+export default TableView;

package/src/components/Theme.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+
+export interface THEME_APPEARANCE {
+  colors: {
+    background: ViewStyle['backgroundColor'];
+    muted: ViewStyle['backgroundColor'];
+    separatorColor: ViewStyle['backgroundColor'];
+    body: TextStyle['color'];
+    primary: TextStyle['color'];
+    secondary: TextStyle['color'];
+  };
+}
+
+export const THEMES: {
+  appearances: {
+    [key: string]: THEME_APPEARANCE;
+  };
+} = {
+  appearances: {
+    light: {
+      colors: {
+        background: '#FFF',
+        muted: '#C7C7CC',
+        separatorColor: '#C8C7CC',
+        body: '#000',
+        primary: '#007AFF',
+        secondary: '#8E8E93',
+      },
+    },
+    dark: {
+      colors: {
+        background: '#121312',
+        muted: '#59595d',
+        separatorColor: '#2b2b2d',
+        body: '#FFF',
+        primary: '#0f64ee',
+        secondary: '#aeaeae',
+      },
+    },
+  },
+};
+
+export const ThemeContext = React.createContext(THEMES.appearances.light);

package/src/components/__tests__/Cell-Basic.test.tsx

@@ -0,0 +1,28 @@
+/* eslint-env node, jest */
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Cell from '../Cell';
+
+it('renders basic', () => {
+  const tree = renderer
+    .create(<Cell cellStyle="Basic" title="Basic" />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with testID', () => {
+  const tree = renderer
+    .create(<Cell cellStyle="Basic" title="Basic" testID="testID" />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with accessory', () => {
+  const tree = renderer
+    .create(
+      <Cell cellStyle="Basic" title="Basic" accessory="DisclosureIndicator" />,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

package/src/components/__tests__/Cell-LeftDetail.test.tsx

@@ -0,0 +1,41 @@
+/* eslint-env node, jest */
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Cell from '../Cell';
+
+it('renders with left detail', () => {
+  const tree = renderer
+    .create(<Cell cellStyle="LeftDetail" title="LeftDetail" detail="Detail" />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with accessory', () => {
+  const tree = renderer
+    .create(
+      <Cell
+        cellStyle="LeftDetail"
+        title="LeftDetail"
+        detail="Detail"
+        accessory="DisclosureIndicator"
+      />,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with accessory and onPressDetailAccessory', () => {
+  const tree = renderer
+    .create(
+      <Cell
+        cellStyle="LeftDetail"
+        title="LeftDetail"
+        detail="Detail"
+        accessory="DisclosureIndicator"
+        onPressDetailAccessory={console.log}
+      />,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

package/src/components/__tests__/Cell-RightDetail.test.tsx

@@ -0,0 +1,28 @@
+/* eslint-env node, jest */
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Cell from '../Cell';
+
+it('renders with right detail', () => {
+  const tree = renderer
+    .create(
+      <Cell cellStyle="RightDetail" title="RightDetail" detail="Detail" />,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with accessory', () => {
+  const tree = renderer
+    .create(
+      <Cell
+        cellStyle="RightDetail"
+        title="RightDetail"
+        detail="Detail"
+        accessory="DisclosureIndicator"
+      />,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

package/src/components/__tests__/Cell-Subtitle.test.tsx

@@ -0,0 +1,32 @@
+/* eslint-env node, jest */
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Cell from '../Cell';
+
+it('renders with subtitle', () => {
+  const tree = renderer
+    .create(
+      <Cell
+        cellStyle="Subtitle"
+        title="Subtitle"
+        detail="No linebreakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk"
+      />,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with accessory', () => {
+  const tree = renderer
+    .create(
+      <Cell
+        cellStyle="Subtitle"
+        title="Subtitle"
+        detail="No linebreakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk"
+        accessory="DisclosureIndicator"
+      />,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

package/src/components/__tests__/TableView.test.tsx

@@ -0,0 +1,97 @@
+/* eslint-env node, jest */
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Cell, Section, TableView } from '../../index';
+
+it('renders basic', () => {
+  const tree = renderer
+    .create(
+      <TableView>
+        <Section footer="All rights reserved.">
+          <Cell
+            title="Help / FAQ"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Help/FAQ')}
+          />
+          <Cell
+            title="Contact Us"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Contact Us')}
+          />
+          {null}
+        </Section>
+      </TableView>,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with appearance auto', () => {
+  const tree = renderer
+    .create(
+      <TableView appearance="auto">
+        <Section footer="All rights reserved.">
+          <Cell
+            title="Help / FAQ"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Help/FAQ')}
+          />
+          <Cell
+            title="Contact Us"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Contact Us')}
+          />
+          {null}
+        </Section>
+      </TableView>,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with appearance light', () => {
+  const tree = renderer
+    .create(
+      <TableView appearance="light">
+        <Section footer="All rights reserved.">
+          <Cell
+            title="Help / FAQ"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Help/FAQ')}
+          />
+          <Cell
+            title="Contact Us"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Contact Us')}
+          />
+          {null}
+        </Section>
+      </TableView>,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders with appearance dark', () => {
+  const tree = renderer
+    .create(
+      <TableView appearance="dark">
+        <Section footer="All rights reserved.">
+          <Cell
+            title="Help / FAQ"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Help/FAQ')}
+          />
+          <Cell
+            title="Contact Us"
+            titleTextColor="#007AFF"
+            onPress={(): void => console.log('open Contact Us')}
+          />
+          {null}
+        </Section>
+      </TableView>,
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});