From 23852fb95f952f62b0d5cfb24b2c58e2dd43c35f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Soner=20K=C3=B6ksal?= <15015690+renjfk@users.noreply.github.com> Date: Wed, 7 Aug 2019 15:35:12 +0000 Subject: [PATCH] [react-native-sortable-list] Fixed CS issues, added generic support and bump version (#36672) --- types/react-native-sortable-list/index.d.ts | 102 ++++++++++-------- .../react-native-sortable-list-tests.tsx | 32 +++--- types/react-native-sortable-list/tslint.json | 81 +------------- 3 files changed, 68 insertions(+), 147 deletions(-) diff --git a/types/react-native-sortable-list/index.d.ts b/types/react-native-sortable-list/index.d.ts index ac449da6d4..f33f70d009 100755 --- a/types/react-native-sortable-list/index.d.ts +++ b/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 , Vince Maiuri +// Definitions by: Michael Sivolobov +// Vince Maiuri +// Soner Köksal // 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 { + [key: number]: T; } -type DataByString = { - [key: string]: DataValue +interface DataByString { + [key: string]: T; } -type Data = DataByNumber | DataByString; - -export interface RowProps { - active: boolean - data: DataValue - key?: DataKey - index?: number - disabled?: boolean +interface RowProps { + active: boolean; + data: T; + key?: K; + index?: number; + disabled?: boolean; + toggleRowActive?: (event: GestureResponderEvent, gestureState?: PanResponderGestureState) => void; } -interface SortableListProps { - +interface SortableListProps { /** * data source */ - data: Data + data: DataByNumber | DataByString; /** * 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 + style?: StyleProp; /** * these styles will be applied to the inner scroll view content container */ - contentContainerStyle?: StyleProp + contentContainerStyle?: StyleProp; /** * these styles will be applied to the inner scroll view content container, excluding the header and footer */ - innerContainerStyle?: StyleProp + innerContainerStyle?: StyleProp; /** * 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) => 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 {} +export default class SortableList extends Component> { + /** + * 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 }; diff --git a/types/react-native-sortable-list/react-native-sortable-list-tests.tsx b/types/react-native-sortable-list/react-native-sortable-list-tests.tsx index 6518118173..3a8732863c 100644 --- a/types/react-native-sortable-list/react-native-sortable-list-tests.tsx +++ b/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 + return ; } } interface RowState { style: { shadowRadius: Animated.Value - transform: {scale: Animated.Value}[] - } + transform: Array<{scale: Animated.Value}> + }; } class Row extends React.Component { - state = { style: { shadowRadius: new Animated.Value(2), @@ -166,7 +159,7 @@ class Row extends React.Component { toValue: 10 }), ]).start(); - }; + } startDeactivationAnimation = () => { const {style} = this.state; @@ -183,7 +176,7 @@ class Row extends React.Component { toValue: 2 }), ]).start(); - }; + } render() { const {data} = this.props; @@ -200,5 +193,4 @@ class Row extends React.Component { } } - AppRegistry.registerComponent('Basic', () => Basic); diff --git a/types/react-native-sortable-list/tslint.json b/types/react-native-sortable-list/tslint.json index 3d59f55fda..3db14f85ea 100644 --- a/types/react-native-sortable-list/tslint.json +++ b/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" }