From ba349c6014a395fea276edb350787dea75c6ba3f Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Tue, 15 May 2018 19:06:43 -0400 Subject: [PATCH] Fix types for Accordion --- Accordion.d.ts | 104 +++++++++++++++++++ index.d.ts | 268 +++++++++++++++---------------------------------- 2 files changed, 184 insertions(+), 188 deletions(-) create mode 100644 Accordion.d.ts diff --git a/Accordion.d.ts b/Accordion.d.ts new file mode 100644 index 0000000..f66021e --- /dev/null +++ b/Accordion.d.ts @@ -0,0 +1,104 @@ +import * as React from 'react'; +import { EasingMode } from './index'; + +export interface AccordionProps { + /** + * An array of sections passed to the render methods + */ + sections: any[]; + + /** + * A function that should return a renderable representing the header + */ + renderHeader( + content: any, + index: number, + isActive: boolean, + sections: any[] + ): React.ReactElement<{}>; + + /** + * A function that should return a renderable representing the section title above the touchable + */ + renderSectionTitle?( + content: any, + index: number, + isActive: boolean, + sections: any[] + ): React.ReactElement<{}>; + + /** + * A function that should return a renderable representing the content + */ + renderContent( + content: any, + index: number, + isActive: boolean, + sections: any[] + ): React.ReactElement<{}>; + + /** + * An optional function that is called when currently active section is changed, index === false when collapsed + */ + onChange?(index: number): void; + + /** + * Expand content from the bottom instead of the top + * + * @default false + */ + expandFromBottom?: boolean; + + /** + * Set which index in the sections array is initially open. Defaults to none. + */ + initiallyActiveSection?: number; + + /** + * Control which index in the sections array is currently open. Defaults to none. If false, closes all sections. + */ + activeSection?: boolean | number; + + /** + * The color of the underlay that will show through when tapping on headers. + * + * @default black + */ + underlayColor?: string; + + /** + * Alignment of the content when transitioning, can be top, center or bottom + * + * @default top + */ + align?: 'top' | 'center' | 'bottom'; + + /** + * Duration of transition in milliseconds + * + * @default 300 + */ + duration?: number; + + /** + * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions. + * + * @default easeOutCubic + */ + easing?: EasingMode | any; + + /** + * Component to use for the Touchable + * + * @default TouchableHighlight + */ + touchableComponent?: React.ComponentClass; + + /** + * Object of props to pass to the touchable component + */ + touchableProps?: {}; +} + +export default class Accordion extends React.Component {} + diff --git a/index.d.ts b/index.d.ts index 8a4c9c5..e8254ae 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,190 +1,82 @@ -declare module 'react-native-collapsible' { - import * as React from 'react'; - import { StyleProp, ViewStyle } from 'react-native'; - - export type EasingMode = - | 'linear' - | 'easeInQuad' - | 'easeOutQuad' - | 'easeInOutQuad' - | 'easeInCubic' - | 'easeOutCubic' - | 'easeInOutCubic' - | 'easeInQuart' - | 'easeOutQuart' - | 'easeInOutQuart' - | 'easeInQuint' - | 'easeOutQuint' - | 'easeInOutQuint' - | 'easeInSine' - | 'easeOutSine' - | 'easeInOutSine' - | 'easeInExpo' - | 'easeOutExpo' - | 'easeInOutExpo' - | 'easeInCirc' - | 'easeOutCirc' - | 'easeInOutCirc' - | 'easeInElastic' - | 'easeOutElastic' - | 'easeInOutElastic' - | 'easeInBack' - | 'easeOutBack' - | 'easeInOutBack' - | 'easeInBounce' - | 'easeOutBounce' - | 'easeInOutBounce'; - - export interface CollapsibleProps { - /** - * Alignment of the content when transitioning, can be top, center or bottom - * - * @default top - */ - align?: 'top' | 'center' | 'bottom'; - - /** - * Whether to show the child components or not - * - * @default true - */ - collapsed?: boolean; - - /** - * Which height should the component collapse to - * - * @default 0 - */ - collapsedHeight?: number; - - /** - * Duration of transition in milliseconds - * - * @default 300 - */ - duration?: number; - - /** - * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions - * - * @default easeOutCubic - */ - easing?: EasingMode | any; - - /** - * Optional styling for the container - */ - style?: StyleProp; - } - - export default class Collapsible extends React.Component< - CollapsibleProps, - any - > {} +import * as React from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; + +export type EasingMode = + | 'linear' + | 'easeInQuad' + | 'easeOutQuad' + | 'easeInOutQuad' + | 'easeInCubic' + | 'easeOutCubic' + | 'easeInOutCubic' + | 'easeInQuart' + | 'easeOutQuart' + | 'easeInOutQuart' + | 'easeInQuint' + | 'easeOutQuint' + | 'easeInOutQuint' + | 'easeInSine' + | 'easeOutSine' + | 'easeInOutSine' + | 'easeInExpo' + | 'easeOutExpo' + | 'easeInOutExpo' + | 'easeInCirc' + | 'easeOutCirc' + | 'easeInOutCirc' + | 'easeInElastic' + | 'easeOutElastic' + | 'easeInOutElastic' + | 'easeInBack' + | 'easeOutBack' + | 'easeInOutBack' + | 'easeInBounce' + | 'easeOutBounce' + | 'easeInOutBounce'; + +export interface CollapsibleProps { + /** + * Alignment of the content when transitioning, can be top, center or bottom + * + * @default top + */ + align?: 'top' | 'center' | 'bottom'; + + /** + * Whether to show the child components or not + * + * @default true + */ + collapsed?: boolean; + + /** + * Which height should the component collapse to + * + * @default 0 + */ + collapsedHeight?: number; + + /** + * Duration of transition in milliseconds + * + * @default 300 + */ + duration?: number; + + /** + * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions + * + * @default easeOutCubic + */ + easing?: EasingMode | any; + + /** + * Optional styling for the container + */ + style?: StyleProp; } -declare module 'react-native-collapsible/Accordion' { - import * as React from 'react'; - import { EasingMode } from 'react-native-collapsible'; - - export interface AccordionProps { - /** - * An array of sections passed to the render methods - */ - sections: any[]; - - /** - * A function that should return a renderable representing the header - */ - renderHeader( - content: any, - index: number, - isActive: boolean, - sections: any[] - ): React.ReactElement<{}>; - - /** - * A function that should return a renderable representing the section title above the touchable - */ - renderSectionTitle?( - content: any, - index: number, - isActive: boolean, - sections: any[] - ): React.ReactElement<{}>; - - /** - * A function that should return a renderable representing the content - */ - renderContent( - content: any, - index: number, - isActive: boolean, - sections: any[] - ): React.ReactElement<{}>; - - /** - * An optional function that is called when currently active section is changed, index === false when collapsed - */ - onChange?(index: number): void; - - /** - * Expand content from the bottom instead of the top - * - * @default false - */ - expandFromBottom?: boolean; - - /** - * Set which index in the sections array is initially open. Defaults to none. - */ - initiallyActiveSection?: number; - - /** - * Control which index in the sections array is currently open. Defaults to none. If false, closes all sections. - */ - activeSection?: boolean | number; - - /** - * The color of the underlay that will show through when tapping on headers. - * - * @default black - */ - underlayColor?: string; - - /** - * Alignment of the content when transitioning, can be top, center or bottom - * - * @default top - */ - align?: 'top' | 'center' | 'bottom'; - - /** - * Duration of transition in milliseconds - * - * @default 300 - */ - duration?: number; - - /** - * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions. - * - * @default easeOutCubic - */ - easing?: EasingMode | any; - - /** - * Component to use for the Touchable - * - * @default TouchableHighlight - */ - touchableComponent?: React.ComponentClass; - - /** - * Object of props to pass to the touchable component - */ - touchableProps?: {}; - } - - export default class Accordion extends React.Component {} -} +export default class Collapsible extends React.Component< + CollapsibleProps, + any +> {}