[react-native-sortable-list] Fixed CS issues, added generic support and bump version (#36672)

types/react-native-sortable-list/index.d.ts

@@ -1,107 +1,103 @@
-// Type definitions for react-native-sortable-list 0.0.22
+// Type definitions for react-native-sortable-list 0.0
 // Project: https://github.com/gitim/react-native-sortable-list
-// Definitions by: Michael Sivolobov <https://github.com/sivolobov>, Vince Maiuri <https://github.com/RookY2K>
+// Definitions by: Michael Sivolobov <https://github.com/sivolobov>
+//                 Vince Maiuri <https://github.com/RookY2K>
+//                 Soner Köksal <https://github.com/renjfk>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-import * as React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { GestureResponderEvent, PanResponderGestureState, StyleProp, ViewStyle } from 'react-native';
+import { Component, ReactElement } from 'react';
 
-type DataKey = string | number;
-
-type DataValue = any
-
-type DataByNumber = {
-    [key: number]: DataValue
+interface DataByNumber<T> {
+    [key: number]: T;
 }
 
-type DataByString = {
-    [key: string]: DataValue
+interface DataByString<T> {
+    [key: string]: T;
 }
 
-type Data = DataByNumber | DataByString;
-
-export interface RowProps {
-    active: boolean
-    data: DataValue
-    key?: DataKey
-    index?: number
-    disabled?: boolean
+interface RowProps<T = any, K = number> {
+    active: boolean;
+    data: T;
+    key?: K;
+    index?: number;
+    disabled?: boolean;
+    toggleRowActive?: (event: GestureResponderEvent, gestureState?: PanResponderGestureState) => void;
 }
 
-interface SortableListProps {
-
+interface SortableListProps<T, K> {
     /**
      * data source
      */
-    data: Data
+    data: DataByNumber<T> | DataByString<T>;
 
     /**
      * an array of keys from data, the order of keys from the array will be used to initial rows order
      */
-    order?: DataKey[]
+    order?: K[];
 
     /**
      * style of HOC
      */
-    style?: StyleProp<ViewStyle>
+    style?: StyleProp<ViewStyle>;
 
     /**
      * these styles will be applied to the inner scroll view content container
      */
-    contentContainerStyle?: StyleProp<ViewStyle>
+    contentContainerStyle?: StyleProp<ViewStyle>;
 
     /**
      * these styles will be applied to the inner scroll view content container, excluding the header and footer
      */
-    innerContainerStyle?: StyleProp<ViewStyle>
+    innerContainerStyle?: StyleProp<ViewStyle>;
 
     /**
      * when true, the SortableList's children are arranged horizontally in a row instead of vertically in a column.
      * The default value is false.
      */
-    horizontal?: boolean
+    horizontal?: boolean;
 
     /**
      * when false, the vertical scroll indicator will not be visible. The default value is true.
      */
-    showsVerticalScrollIndicator?: boolean
+    showsVerticalScrollIndicator?: boolean;
 
     /**
      * when false, the horizontal scroll indicator will not be visible. The default value is true.
      */
-    showsHorizontalScrollIndicator?: boolean
+    showsHorizontalScrollIndicator?: boolean;
 
     /**
      * when false, rows are not sortable. The default value is true.
      */
-    sortingEnabled?: boolean
+    sortingEnabled?: boolean;
 
     /**
      * when false, the content does not scrollable. The default value is true.
      */
-    scrollEnabled?: boolean
+    scrollEnabled?: boolean;
 
     /**
      * whether you intend to use the toggleRowActive method to activate a row or use the out of box solution.
      */
-    manuallyActivateRows?: boolean
+    manuallyActivateRows?: boolean;
 
     /**
      * determines the height for vertical list and the width for horizontal list of the area at the begining and
      * the end of the list that will trigger autoscrolling. Defaults to 60.
      */
-    autoscrollAreaSize?: number
+    autoscrollAreaSize?: number;
 
     /**
      * determines time delay in ms before pressed row becomes active. Defaults to 200 ms.
      */
-    rowActivationTime?: number
+    rowActivationTime?: number;
 
     /**
      * A RefreshControl that works the same way as a ScrollView's refreshControl.
      */
-    refreshControl?: JSX.Element
+    refreshControl?: ReactElement;
 
     /**
      * Takes a row key, row index, data entry from the data source and its statuses disabled, active and should
@@ -109,42 +105,54 @@ interface SortableListProps {
      * toggleRowActive (only if manuallyActivateRows={true}) to manually activate the row. Useful if you have
      * multiple touch responders in your view.
      */
-    renderRow: (props: RowProps) => JSX.Element
+    renderRow: (props: RowProps<T, K>) => ReactElement | null;
 
     /**
      * Renders returned component at the top of the list.
      */
-    renderHeader?: () => JSX.Element
+    renderHeader?: () => ReactElement;
 
     /**
      * Renders returned component at the bottom of the list.
      */
-    renderFooter?: () => JSX.Element
+    renderFooter?: () => ReactElement;
 
     /**
      * Called when rows were reordered, takes an array of rows keys of the next rows order.
      */
-    onChangeOrder?: (nextOrder: DataKey[]) => void
+    onChangeOrder?: (nextOrder: K[]) => void;
 
     /**
      * Called when a row was activated (user long tapped).
      */
-    onActivateRow?: (key: DataKey) => void
+    onActivateRow?: (key: K) => void;
 
     /**
      * Called when the active row was released.
      */
-    onReleaseRow?: (key: DataKey) => void
+    onReleaseRow?: (key: K, currentOrder: K[]) => void;
 
     /**
      * Called when a row was pressed.
      */
-    onPressRow?: (key: DataKey) => void
+    onPressRow?: (key: K) => void;
 }
 
-interface SortableListStatic extends React.ClassicComponentClass<SortableListProps> {}
+export default class SortableList<T, K> extends Component<SortableListProps<T, K>> {
+    /**
+     * scrolls by a given y offset, either immediately or with a smooth animation
+     */
+    scrollBy({dx, dy, animated}: { dx?: number; dy?: number; animated?: boolean }): void;
 
-declare var SortableList: SortableListStatic;
-declare type SortableList = SortableListStatic;
+    /**
+     * scrolls to a given y offset, either immediately or with a smooth animation
+     */
+    scrollTo({x, y, animated}: { x?: number; y?: number; animated?: boolean }): void;
 
-export default SortableList;
+    /**
+     * scrolls to a given row key, either immediately or with a smooth animation
+     */
+    scrollToRowKey({key, animated}: { key?: K; animated?: boolean }): void;
+}
+
+export { RowProps };

types/react-native-sortable-list/react-native-sortable-list-tests.tsx

@@ -12,7 +12,7 @@ import {
     TextStyle,
     ImageStyle,
 } from 'react-native';
-import SortableList, {RowProps } from 'react-native-sortable-list';
+import SortableList, { RowProps } from 'react-native-sortable-list';
 
 const window = Dimensions.get('window');
 
@@ -66,17 +66,14 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         backgroundColor: '#eee',
         paddingTop: 60,
-    } as ViewStyle,
-
+    },
     list: {
         flex: 1,
-    } as ViewStyle,
-
+    },
     contentContainer: {
         width: window.width,
         paddingHorizontal: 30,
-    } as ViewStyle,
-
+    },
     row: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -90,19 +87,16 @@ const styles = StyleSheet.create({
         shadowOpacity: 1,
         shadowOffset: {height: 2, width: 2},
         shadowRadius: 2,
-    } as ViewStyle,
-
+    },
     image: {
         width: 60,
         height: 60,
         marginRight: 30,
         borderRadius: 30,
-    } as ImageStyle,
-
+    },
     text: {
         fontSize: 24,
-    } as TextStyle,
-
+    },
 });
 
 class Basic extends React.Component {
@@ -119,19 +113,18 @@ class Basic extends React.Component {
     }
 
     _renderRow = ({data, active}: RowProps) => {
-        return <Row data={data} active={active}/>
+        return <Row data={data} active={active}/>;
     }
 }
 
 interface RowState {
     style: {
         shadowRadius: Animated.Value
-        transform: {scale: Animated.Value}[]
-    }
+        transform: Array<{scale: Animated.Value}>
+    };
 }
 
 class Row extends React.Component<RowProps, RowState> {
-
     state = {
         style: {
             shadowRadius: new Animated.Value(2),
@@ -166,7 +159,7 @@ class Row extends React.Component<RowProps, RowState> {
                 toValue: 10
             }),
         ]).start();
-    };
+    }
 
     startDeactivationAnimation = () => {
         const {style} = this.state;
@@ -183,7 +176,7 @@ class Row extends React.Component<RowProps, RowState> {
                 toValue: 2
             }),
         ]).start();
-    };
+    }
 
     render() {
         const {data} = this.props;
@@ -200,5 +193,4 @@ class Row extends React.Component<RowProps, RowState> {
     }
 }
 
-
 AppRegistry.registerComponent('Basic', () => Basic);

types/react-native-sortable-list/tslint.json

@@ -1,80 +1 @@
-{
-    "extends": "dtslint/dt.json",
-    "rules": {
-        "adjacent-overload-signatures": false,
-        "array-type": false,
-        "arrow-return-shorthand": false,
-        "ban-types": false,
-        "callable-types": false,
-        "comment-format": false,
-        "dt-header": false,
-        "npm-naming": false,
-        "eofline": false,
-        "export-just-namespace": false,
-        "import-spacing": false,
-        "interface-name": false,
-        "interface-over-type-literal": false,
-        "jsdoc-format": false,
-        "max-line-length": false,
-        "member-access": false,
-        "new-parens": false,
-        "no-any-union": false,
-        "no-boolean-literal-compare": false,
-        "no-conditional-assignment": false,
-        "no-consecutive-blank-lines": false,
-        "no-construct": false,
-        "no-declare-current-package": false,
-        "no-duplicate-imports": false,
-        "no-duplicate-variable": false,
-        "no-empty-interface": false,
-        "no-for-in-array": false,
-        "no-inferrable-types": false,
-        "no-internal-module": false,
-        "no-irregular-whitespace": false,
-        "no-mergeable-namespace": false,
-        "no-misused-new": false,
-        "no-namespace": false,
-        "no-object-literal-type-assertion": false,
-        "no-padding": false,
-        "no-redundant-jsdoc": false,
-        "no-redundant-jsdoc-2": false,
-        "no-redundant-undefined": false,
-        "no-reference-import": false,
-        "no-relative-import-in-test": false,
-        "no-self-import": false,
-        "no-single-declare-module": false,
-        "no-string-throw": false,
-        "no-unnecessary-callback-wrapper": false,
-        "no-unnecessary-class": false,
-        "no-unnecessary-generics": false,
-        "no-unnecessary-qualifier": false,
-        "no-unnecessary-type-assertion": false,
-        "no-useless-files": false,
-        "no-var-keyword": false,
-        "no-var-requires": false,
-        "no-void-expression": false,
-        "no-trailing-whitespace": false,
-        "object-literal-key-quotes": false,
-        "object-literal-shorthand": false,
-        "one-line": false,
-        "one-variable-per-declaration": false,
-        "only-arrow-functions": false,
-        "prefer-conditional-expression": false,
-        "prefer-const": false,
-        "prefer-declare-function": false,
-        "prefer-for-of": false,
-        "prefer-method-signature": false,
-        "prefer-template": false,
-        "radix": false,
-        "semicolon": false,
-        "space-before-function-paren": false,
-        "space-within-parens": false,
-        "strict-export-declare-modifiers": false,
-        "trim-file": false,
-        "triple-equals": false,
-        "typedef-whitespace": false,
-        "unified-signatures": false,
-        "void-return": false,
-        "whitespace": false
-    }
-}
+{ "extends": "dtslint/dt.json" }