clwy-react-native-tableview-simple 4.5.0

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "clwy-react-native-tableview-simple",
+  "description": "React Native component for TableView made with pure CSS",
+  "homepage": "https://github.com/clwy-cn/clwy-react-native-tableview-simple",
+  "version": "4.5.0",
+  "author": "Patrick Böder <hello@patrickpuritscher.com>",
+  "scripts": {
+    "clean": "watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn",
+    "jest": "jest ./src/",
+    "eslint:ci": "eslint index.js ./src/",
+    "eslint:fix": "eslint index.js ./src/",
+    "test:ci": "yarn run eslint:ci && yarn run jest && yarn tsc --noEmit",
+    "tsc": "tsc --skipLibCheck",
+    "build:module": "yarn tsc --outDir ./lib/module  --sourceMap",
+    "build:commonjs": "yarn tsc --module commonjs --outDir ./lib/commonjs --sourceMap",
+    "build": "rimraf ./lib && yarn build:module && yarn build:commonjs",
+    "release:prepare": "yarn build",
+    "release": "standard-version"
+  },
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.ts",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "files": [
+    "/src",
+    "/lib",
+    "/README.md",
+    "/LICENSE"
+  ],
+  "jest": {
+    "preset": "react-native",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/example/"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/"
+    ]
+  },
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "react-component",
+    "tableview",
+    "UITableView",
+    "crossplatform",
+    "ios",
+    "android"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.64",
+    "react-native-safe-area-context": "~5.6.0"
+  },
+  "bugs": {
+    "url": "https://github.com/Purii/react-native-tableview-simple/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Purii/react-native-tableview-simple.git"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.3.3",
+    "@types/react-native": "0.73.0",
+    "@types/react-test-renderer": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "7.12.0",
+    "@typescript-eslint/parser": "7.12.0",
+    "babel-jest": "29.7.0",
+    "babel-preset-react-native": "4.0.1",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.34.2",
+    "husky": "9.0.11",
+    "jest": "29.7.0",
+    "lint-staged": "15.2.5",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "prettier": "3.3.1",
+    "react": "18.3.1",
+    "react-native": "0.74.2",
+    "react-test-renderer": "18.3.1",
+    "rimraf": "5.0.7",
+    "standard-version": "9.5.0",
+    "typescript": "5.4.5"
+  }
+}

package/src/components/Cell.tsx

@@ -0,0 +1,552 @@
+import React, { useContext } from 'react';
+import {
+  PixelRatio,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextProps,
+  TextStyle,
+  ImageProps,
+} from 'react-native';
+import { ThemeContext } from './Theme';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+
+export interface CellInterface {
+  accessory?:
+    | false
+    | 'DisclosureIndicator'
+    | 'Detail'
+    | 'DetailDisclosure'
+    | 'Checkmark';
+  accessoryColor?: ViewStyle['borderColor'];
+  accessoryColorDisclosureIndicator?: ViewStyle['borderColor'];
+  allowFontScaling?: boolean;
+  backgroundColor?: ViewStyle['backgroundColor'];
+  cellStyle?: 'Basic' | 'RightDetail' | 'LeftDetail' | 'Subtitle';
+  cellAccessoryView?: React.ReactNode;
+  cellContentView?: React.ReactNode;
+  cellImageView?: React.ReactNode;
+  children?: React.ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  detail?: string | number;
+  detailTextStyle?: StyleProp<TextStyle>;
+  detailTextProps?: TextProps;
+  disableImageResize?: boolean;
+  hideSeparator?: boolean;
+  highlightActiveOpacity?: number;
+  highlightUnderlayColor?: ViewStyle['backgroundColor'];
+  image?: React.ReactElement;
+  isDisabled?: boolean;
+  onPress?: () => void | false;
+  onLongPress?: () => void | false;
+  onPressDetailAccessory?: () => void | false;
+
+  onUnHighlightRow?(): void;
+
+  onHighlightRow?(): void;
+
+  leftDetailColor?: TextStyle['color'];
+  rightDetailColor?: TextStyle['color'];
+  subtitleColor?: TextStyle['color'];
+  subtitleTextStyle?: StyleProp<TextStyle>;
+  testID?: string;
+  title?: React.ReactNode;
+  titleTextProps?: TextProps;
+  titleTextStyle?: StyleProp<TextStyle>;
+  titleTextStyleDisabled?: StyleProp<TextStyle>;
+  titleTextColor?: TextStyle['color'];
+  withSafeAreaView?: boolean;
+}
+
+const Cell: React.FC<CellInterface> = ({
+                                         accessory = false,
+                                         accessoryColor,
+                                         accessoryColorDisclosureIndicator,
+                                         allowFontScaling = true,
+                                         backgroundColor,
+                                         cellStyle = 'Basic',
+                                         cellContentView,
+                                         cellImageView,
+                                         cellAccessoryView,
+                                         children,
+                                         contentContainerStyle = {},
+                                         detail,
+                                         detailTextStyle = {},
+                                         detailTextProps = {},
+                                         disableImageResize = false,
+                                         highlightActiveOpacity = 0.8,
+                                         highlightUnderlayColor,
+                                         image,
+                                         isDisabled = false,
+                                         onPress,
+                                         onLongPress,
+                                         onPressDetailAccessory,
+                                         onHighlightRow,
+                                         onUnHighlightRow,
+                                         leftDetailColor,
+                                         rightDetailColor,
+                                         subtitleColor,
+                                         subtitleTextStyle = {},
+                                         testID,
+                                         title,
+                                         titleTextProps = {},
+                                         titleTextStyle = {},
+                                         titleTextStyleDisabled = {},
+                                         titleTextColor,
+                                         withSafeAreaView = Platform.OS === 'ios'
+                                           ? parseInt(`${Platform.Version}`, 10) <= 10
+                                             ? false
+                                             : true
+                                           : true,
+                                       }: CellInterface) => {
+  const theme = useContext(ThemeContext);
+
+  const isPressable = !!onPress || !!onLongPress;
+
+  /**
+   * Merge styles with props
+   * Type is a Hotfix
+   */
+  const localStyles = {
+    ...styles,
+    cellBackgroundColor: {
+      backgroundColor: backgroundColor || theme.colors.background,
+    },
+    cell: [styles.cell, contentContainerStyle],
+    cellSafeAreaContainer: styles.cellSafeAreaContainer,
+    cellTitle: isDisabled
+      ? [styles.cellTitle, styles.cellTextDisabled, titleTextStyleDisabled]
+      : [
+        styles.cellTitle,
+        { color: titleTextColor || theme.colors.body },
+        titleTextStyle,
+      ],
+    cellLeftDetail: [
+      styles.cellLeftDetail,
+      {
+        color: leftDetailColor || theme.colors.primary,
+      },
+      detailTextStyle,
+    ],
+    cellLeftDetailTitle: isDisabled
+      ? [styles.cellLeftDetailTitle, styles.cellTextDisabled]
+      : [
+        styles.cellLeftDetailTitle,
+        { color: titleTextColor || theme.colors.body },
+      ],
+    cellRightDetail: [
+      styles.cellRightDetail,
+      {
+        color: rightDetailColor || theme.colors.secondary,
+      },
+      detailTextStyle,
+    ],
+    cellSubtitle: [
+      styles.cellSubtitle,
+      {
+        color: subtitleColor || theme.colors.body,
+      },
+      subtitleTextStyle,
+    ],
+    accessoryCheckmark: [
+      styles.accessoryCheckmark,
+      { borderColor: accessoryColor || theme.colors.primary },
+    ],
+    accessoryDetail: [
+      styles.accessoryDetail,
+      { borderColor: accessoryColor || theme.colors.primary },
+    ],
+    accessoryDetailText: [
+      styles.accessoryDetailText,
+      { color: accessoryColor || theme.colors.primary },
+    ],
+    accessoryDisclosureIndicator: [
+      styles.accessoryDisclosureIndicator,
+      { borderColor: accessoryColorDisclosureIndicator || theme.colors.muted },
+    ],
+  };
+
+  const renderAccessoryDetail = (): React.ReactNode => {
+    if (onPressDetailAccessory) {
+      return (
+        <TouchableOpacity
+          style={localStyles.accessoryDetail}
+          onPress={onPressDetailAccessory}
+          activeOpacity={0.7}
+          disabled={isDisabled}>
+          <Text style={localStyles.accessoryDetailText}>i</Text>
+        </TouchableOpacity>
+      );
+    }
+    return (
+      <View style={localStyles.accessoryDetail}>
+        <Text style={localStyles.accessoryDetailText}>i</Text>
+      </View>
+    );
+  };
+  /**
+   * Render accessoryView
+   * Currently available
+   * @return {View} View with accessory
+   */
+  const renderAccessoryView = (): React.ReactNode => {
+    switch (accessory) {
+      case 'DisclosureIndicator':
+        return (
+          <View style={localStyles.cellAccessoryView}>
+            <View style={localStyles.accessoryDisclosureIndicator} />
+          </View>
+        );
+      case 'Detail':
+        return (
+          <View style={localStyles.cellAccessoryView}>
+            {renderAccessoryDetail()}
+          </View>
+        );
+      case 'DetailDisclosure':
+        return (
+          <View style={localStyles.cellAccessoryView}>
+            <View style={localStyles.accessoryDetailDisclosure}>
+              {renderAccessoryDetail()}
+              <View style={localStyles.accessoryDisclosureIndicator} />
+            </View>
+          </View>
+        );
+      case 'Checkmark':
+        return (
+          <View style={localStyles.cellAccessoryView}>
+            <View style={localStyles.accessoryCheckmark} />
+          </View>
+        );
+      default:
+        return null;
+    }
+  };
+
+  /**
+   * Render imageView
+   * @return {Image} Image component with updated props
+   */
+  const renderImageView = (): React.ReactNode => {
+    if (!image) {
+      return null;
+    }
+    const imageStyleProp = (image?.props as ImageProps)?.style;
+    const propsToAdd = {
+      style: disableImageResize
+        ? imageStyleProp
+        : [imageStyleProp, localStyles.image],
+    };
+    return (
+      <View style={localStyles.cellImageView}>
+        {React.cloneElement(image, propsToAdd)}
+      </View>
+    );
+  };
+
+  /**
+   * Render cell of type Basic
+   * @return {View} View with Text and Accessory
+   */
+  const renderCellBasic = (): React.ReactNode => (
+    <View style={localStyles.cellContentView}>
+      <Text
+        allowFontScaling={allowFontScaling}
+        numberOfLines={1}
+        style={localStyles.cellTitle}
+        {...titleTextProps}>
+        {title}
+      </Text>
+    </View>
+  );
+
+  /**
+   * Render cell of type RightDetail
+   * @return {View} View with Text, Text and Accessory
+   */
+  const renderCellRightDetail = (): React.ReactNode => (
+    <View style={localStyles.cellContentView}>
+      <Text
+        allowFontScaling={allowFontScaling}
+        numberOfLines={1}
+        style={localStyles.cellTitle}
+        {...titleTextProps}>
+        {title}
+      </Text>
+      <Text
+        allowFontScaling={allowFontScaling}
+        numberOfLines={1}
+        style={
+          isDisabled
+            ? [localStyles.cellRightDetail, localStyles.cellTextDisabled]
+            : localStyles.cellRightDetail
+        }
+        {...detailTextProps}>
+        {detail}
+      </Text>
+    </View>
+  );
+
+  /**
+   * Render cell of type LeftDetail
+   * @return {View} View with Text, Text and Accessory
+   */
+  const renderCellLeftDetail = (): React.ReactNode => (
+    <View style={localStyles.cellContentView}>
+      <Text
+        allowFontScaling={allowFontScaling}
+        numberOfLines={1}
+        style={
+          isDisabled
+            ? [localStyles.cellLeftDetail, localStyles.cellTextDisabled]
+            : localStyles.cellLeftDetail
+        }
+        {...detailTextProps}>
+        {detail}
+      </Text>
+      <Text
+        allowFontScaling={allowFontScaling}
+        numberOfLines={1}
+        style={localStyles.cellLeftDetailTitle}
+        {...titleTextProps}>
+        {title}
+      </Text>
+    </View>
+  );
+
+  /**
+   * Render cell of type Subtitle
+   * @return {View} View with View, Text, Text and Accessory
+   */
+  const renderCellSubtitle = (): React.ReactNode => (
+    <View
+      style={[
+        localStyles.cellContentView,
+        localStyles.cellContentViewTypeSubtitle,
+      ]}>
+      <View style={localStyles.cellInnerSubtitle}>
+        <Text
+          allowFontScaling={allowFontScaling}
+          numberOfLines={1}
+          style={localStyles.cellTitle}
+          {...titleTextProps}>
+          {title}
+        </Text>
+        <Text
+          allowFontScaling={allowFontScaling}
+          numberOfLines={1}
+          style={
+            isDisabled
+              ? [localStyles.cellSubtitle, localStyles.cellTextDisabled]
+              : localStyles.cellSubtitle
+          }
+          {...detailTextProps}>
+          {detail}
+        </Text>
+      </View>
+    </View>
+  );
+
+  /**
+   * Renders correct contentView
+   * @return {View} ContentView
+   */
+  const renderCellContentView = (): React.ReactNode => {
+    switch (cellStyle) {
+      case 'Basic':
+        return renderCellBasic();
+      case 'RightDetail':
+        return renderCellRightDetail();
+      case 'LeftDetail':
+        return renderCellLeftDetail();
+      case 'Subtitle':
+        return renderCellSubtitle();
+      default:
+        return renderCellBasic();
+    }
+  };
+
+  /**
+   * Render content of cell
+   * @return {View} Complete View with cell elements
+   */
+  const renderCell = (): React.ReactNode => {
+    return (
+      <View style={localStyles.cellBackgroundColor}>
+        <View style={localStyles.cell}>
+          {cellImageView || renderImageView()}
+          {cellContentView || renderCellContentView()}
+          {cellAccessoryView || renderAccessoryView()}
+        </View>
+        {children}
+      </View>
+    );
+  };
+
+  /**
+   * Render content of cell with SafeAreaView
+   * Inside view to prevent overwriting styles
+   * @return {View} Complete View with cell elements
+   */
+  const renderCellWithSafeAreaView = (): React.ReactNode => (
+    <SafeAreaProvider>
+      <SafeAreaView
+        style={[
+          localStyles.cellBackgroundColor,
+          localStyles.cellSafeAreaContainer,
+        ]}>
+        <View style={localStyles.cell}>
+          {cellImageView || renderImageView()}
+          {cellContentView || renderCellContentView()}
+          {cellAccessoryView || renderAccessoryView()}
+        </View>
+        {children}
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+
+  if (isPressable && !isDisabled) {
+    return (
+      <TouchableHighlight
+        activeOpacity={highlightActiveOpacity}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        underlayColor={highlightUnderlayColor || theme.colors.body}
+        onPressIn={onHighlightRow}
+        onPressOut={onUnHighlightRow}
+        testID={testID}>
+        {withSafeAreaView ? renderCellWithSafeAreaView() : renderCell()}
+      </TouchableHighlight>
+    );
+  }
+  return (
+    <View testID={testID}>
+      {withSafeAreaView ? renderCellWithSafeAreaView() : renderCell()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cell: {
+    alignItems: 'center',
+    paddingLeft: 15,
+    paddingRight: 20,
+    minHeight: PixelRatio.roundToNearestPixel(44),
+    flexDirection: 'row',
+  },
+  // SafeAreaView only adds padding
+  cellSafeAreaContainer: {
+    flexGrow: 1,
+  },
+  cellContentView: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexGrow: 1,
+    flexBasis: 0,
+    justifyContent: 'center',
+    // independent from other cellViews
+    paddingVertical: 10,
+  },
+  cellContentViewTypeSubtitle: {
+    paddingVertical: 4,
+  },
+  cellInnerSubtitle: {
+    flexDirection: 'column',
+    flexGrow: 1,
+  },
+  cellTitle: {
+    fontSize: 16,
+    letterSpacing: -0.32,
+    flexGrow: 1,
+  },
+  cellLeftDetailTitle: {
+    fontSize: 12,
+    flexGrow: 1,
+  },
+  cellLeftDetail: {
+    fontSize: 12,
+    alignSelf: 'center',
+    textAlign: 'right',
+    marginRight: 5,
+    width: 75,
+  },
+  cellRightDetail: {
+    fontSize: 16,
+    letterSpacing: -0.32,
+    alignSelf: 'center',
+    color: '#8E8E93',
+  },
+  cellSubtitle: {
+    fontSize: 11,
+    letterSpacing: 0.066,
+  },
+  cellTextDisabled: {
+    color: 'gray',
+  },
+  cellImageView: {
+    justifyContent: 'center',
+    marginRight: 15,
+  },
+  image: {
+    height: 29,
+    width: 29,
+  },
+  cellAccessoryView: {
+    justifyContent: 'center',
+  },
+  accessoryDisclosureIndicator: {
+    width: 10,
+    height: 10,
+    marginLeft: 7,
+    backgroundColor: 'transparent',
+    borderTopWidth: 1,
+    borderRightWidth: 1,
+    borderColor: '#c7c7cc',
+    transform: [
+      {
+        rotate: '45deg',
+      },
+    ],
+  },
+  accessoryDetail: {
+    width: 20,
+    height: 20,
+    marginLeft: 10,
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  accessoryDetailText: {
+    fontSize: 15,
+    fontWeight: '400',
+    fontFamily: 'Georgia',
+    letterSpacing: -0.24,
+  },
+  accessoryDetailDisclosure: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  accessoryCheckmark: {
+    width: 13,
+    height: 6,
+    marginLeft: 7,
+    backgroundColor: 'transparent',
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderColor: '#007AFF',
+    transform: [
+      {
+        rotate: '-45deg',
+      },
+    ],
+  },
+});
+
+export default Cell;