♻️ Refine typescript typings

🔥 Remove unnecessary stuff

Author: heysem-useinsider

index.d.ts

@@ -1,9 +1,27 @@
 import React from 'react';
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 
-export type TableProps = {
+export type Theme = 'light' | 'dark' | 'midnight';
+
+export interface ColorPalette {
+	background: string,
+	section: string,
+	separator: string,
+	header: string,
+	footer: string,
+	accessory: string,
+	title: string,
+	subtitle: string,
+	disabled: string,
+	progress: string,
+
+	underlay: string,
+	ripple: string,
+}
+
+export interface TableProps {
 	accentColor?: string,
-	theme?: 'light' | 'dark' | 'midnight',
+	theme?: Theme,
 	blendAccent?: boolean,
 	disabled?: boolean,
 
@@ -13,7 +31,8 @@ export type TableProps = {
 	children: React.ReactNode,
 	scrollable?: boolean,
 }
-export type SectionProps = {
+
+export interface SectionProps {
 	disabled?: boolean,
 
 	children: React.ReactNode,
@@ -31,7 +50,8 @@ export type SectionProps = {
 	separatorInsetLeft?: number,
 	separatorInsetRight?: number,
 }
-export type CommonCellProps = {
+
+export interface CommonCellProps {
 	style?: ViewStyle,
 
 	disabled?: boolean,
@@ -42,18 +62,21 @@ export type CommonCellProps = {
 	customActionType?: 'call' | 'compose' | 'openUrl',
 	customActionTrigger?: 'onPress' | 'onLongPress',
 }
-export type CellProps = CommonCellProps & {
+
+export interface CellProps extends CommonCellProps {
 	children: React.ReactNode,
 }
-export type AccessoryCellProps = CommonCellProps & {
+
+export interface AccessoryCellProps extends CommonCellProps {
 	accessory?: 'disclosure' | 'details' | 'checkmark',
 	accessoryComponent?: React.ReactNode,
 	hideAccessorySeparator?: boolean,
 	loading?: boolean,
 
 	onAccessoryPress?: () => void,
 }
-export type StaticCellProps = AccessoryCellProps & {
+
+export interface StaticCellProps extends AccessoryCellProps {
 	title: string,
 	titleStyle?: TextStyle,
 	subtitle?: string,
@@ -62,11 +85,13 @@ export type StaticCellProps = AccessoryCellProps & {
 
 	iconComponent?: React.ReactNode,
 }
-export type TouchableCellProps = AccessoryCellProps | {
+
+export interface TouchableCellProps extends AccessoryCellProps {
 	title: string,
 	titleStyle?: TextStyle,
 }
-export type BioCellProps = AccessoryCellProps & {
+
+export interface BioCellProps extends AccessoryCellProps {
 	title: string,
 	titleStyle?: TextStyle,
 
@@ -79,7 +104,8 @@ export type BioCellProps = AccessoryCellProps & {
 	photoSource?: object,
 	photoStyle?: ImageStyle,
 }
-export type KeyValueCellProps = AccessoryCellProps & {
+
+export interface KeyValueCellProps extends AccessoryCellProps {
 	title: string,
 	titleStyle?: TextStyle,
 	value?: string,
@@ -88,7 +114,8 @@ export type KeyValueCellProps = AccessoryCellProps & {
 
 	iconComponent?: React.ReactNode,
 }
-export type SwitchCellProps = AccessoryCellProps & {
+
+export interface SwitchCellProps extends AccessoryCellProps {
 	title: string,
 	titleStyle?: TextStyle,
 	value?: boolean,
@@ -125,3 +152,9 @@ export class KeyValueCell extends React.Component<KeyValueCellProps> {
 
 export class SwitchCell extends React.Component<SwitchCellProps> {
 }
+
+declare const ThemeContext: React.Context<Theme>;
+declare const ThemeProvider: React.Provider<Theme>;
+declare const ThemeConsumer: React.Consumer<Theme>;
+
+export { ThemeContext, ThemeProvider, ThemeConsumer };

index.js

@@ -7,6 +7,7 @@ import TouchableCell from './src/TouchableCell';
 import BioCell from './src/BioCell';
 import KeyValueCell from './src/KeyValueCell';
 import SwitchCell from './src/SwitchCell';
+import { ThemeConsumer, ThemeContext, ThemeProvider } from './src/ThemeContext';
 
 export default Table;
 export {
@@ -19,4 +20,7 @@ export {
 	BioCell,
 	KeyValueCell,
 	SwitchCell,
+	ThemeContext,
+	ThemeConsumer,
+	ThemeProvider,
 };

src/assets/colors.js

@@ -35,7 +35,7 @@ export const getColorPalette = (theme, blend, accent) => {
 		footer: Platform.OS === 'ios' ? '#8F8F95' : '#9f9fa6',
 		accessory: Platform.OS === 'ios' ? '#969696' : '#9c9ca0',
 		title: Platform.OS === 'ios' ? 'white' : '#e6e6e6',
-		subtitle: '#8E8E93',       // <-
+		subtitle: '#8E8E93',
 		disabled: '#4b4b4b',
 		progress: Platform.OS === 'ios' ? '#c8c8c8' : accent,
 
@@ -51,7 +51,7 @@ export const getColorPalette = (theme, blend, accent) => {
 		footer: Platform.OS === 'ios' ? '#919191' : '#a2a2a2',
 		accessory: Platform.OS === 'ios' ? '#5c5c5c' : '#666666',
 		title: Platform.OS === 'ios' ? 'white' : '#E1E1E1',
-		subtitle: '#99989D',       // <-
+		subtitle: '#99989D',
 		disabled: '#4b4b4b',
 		progress: Platform.OS === 'ios' ? '#c8c8c8' : accent,
 

src/assets/icons.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Image, I18nManager } from 'react-native';
+import { I18nManager, Image } from 'react-native';
 import PropTypes from 'prop-types';
 
 import disclosure from './disclosure.png';