Typescript/StackAggregator

.nvmrc

@@ -1 +1 @@
-8.1.3
+12.20.1

demo/src/screens/componentScreens/StackAggregatorScreen.js → demo/src/screens/componentScreens/StackAggregatorScreen.tsx

@@ -1,49 +1,48 @@
 import _ from 'lodash';
-import React, {Component} from 'react';
+import React, {Component, ReactNode} from 'react';
 import {ScrollView} from 'react-native';
-import {/* Colors, Typography,  */View, Text, Button, StackAggregator} from 'react-native-ui-lib'; //eslint-disable-line
-
+import {/* Colors, Typography,  */ View, Text, Button, StackAggregator} from 'react-native-ui-lib'; //eslint-disable-line
 
 const contents = [
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
-]
+];
 
 export default class StackAggregatorScreen extends Component {
-
-  onItemPress = (index) => {
+  onItemPress = (index: number) => {
     console.warn('item pressed: ', index);
-  }
+  };
 
-  onPress = (index) => {
+  onPress = (index: number) => {
     console.warn('item\'s button pressed: ', index);
-  }
+  };
 
-  renderItem = (item, index) => {
+  renderItem = (_item: ReactNode, index: number) => {
     return (
       <View key={index} center padding-12>
-        <Button label={`${index}`} marginB-10 size={'small'} onPress={() => this.onPress(index)}/>
+        <Button label={`${index}`} marginB-10 size={Button.sizes.small} onPress={() => this.onPress(index)}/>
         <Text>{contents[index]}</Text>
       </View>
     );
-  }
+  };
 
   render() {
     return (
       <ScrollView bg-dark80 keyboardShouldPersistTaps={'handled'} showsVerticalScrollIndicator={false}>
-        <Text center dark40 text90 marginT-20>Thu, 10 Dec, 11:29</Text>
-        <StackAggregator
-          containerStyle={{marginTop: 12}}
-          onItemPress={this.onItemPress}
-        >
+        <Text center dark40 text90 marginT-20>
+          Thu, 10 Dec, 11:29
+        </Text>
+        <StackAggregator containerStyle={{marginTop: 12}} onItemPress={this.onItemPress}>
           {_.map(contents, (item, index) => {
             return this.renderItem(item, index);
           })}
         </StackAggregator>
 
-        <Text center dark40 text90 marginT-20>Thu, 11 Dec, 13:03</Text>
+        <Text center dark40 text90 marginT-20>
+          Thu, 11 Dec, 13:03
+        </Text>
         <StackAggregator
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}

generatedTypes/components/stackAggregator/index.d.ts

@@ -0,0 +1,81 @@
+import React, { PureComponent, ReactNode } from 'react';
+import { StyleProp, ViewStyle, Animated, LayoutChangeEvent } from 'react-native';
+import { ButtonProps } from '../button';
+export interface StackAggregatorProps {
+    /**
+     * The initial state of the stack
+     */
+    collapsed?: boolean;
+    /**
+     * A setting that disables pressability on cards
+     */
+    disablePresses?: boolean;
+    /**
+     * The container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The content container style
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The items border radius
+     */
+    itemBorderRadius?: number;
+    /**
+     * Props passed to the 'show less' button
+     */
+    buttonProps?: ButtonProps;
+    /**
+     * A callback for item press
+     */
+    onItemPress?: (index: number) => void;
+    /**
+     * A callback for collapse state will change (value is future collapsed state)
+     */
+    onCollapseWillChange?: (future: boolean) => void;
+    /**
+     * A callback for collapse state change (value is collapsed state)
+     */
+    onCollapseChanged?: (collapsed: boolean) => void;
+}
+interface StackAggregatorState {
+    collapsed?: boolean;
+    firstItemHeight?: number;
+}
+/**
+ * @description: Stack aggregator component
+ * @modifiers: margin, padding
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/StackAggregatorScreen.js
+ */
+declare class StackAggregator extends PureComponent<StackAggregatorProps, StackAggregatorState> {
+    static displayName: string;
+    state: {
+        collapsed: boolean;
+        firstItemHeight: undefined;
+    };
+    itemsCount: number;
+    easeOut: import("react-native").EasingFunction;
+    animatedScale: Animated.Value;
+    animatedOpacity: Animated.Value;
+    animatedScaleArray: Animated.Value[];
+    animatedContentOpacity: Animated.Value;
+    componentDidUpdate(_prevProps: StackAggregatorProps, prevState: StackAggregatorState): void;
+    getAnimatedScales(): Animated.Value[];
+    getItemScale(index: number): 1 | 0.95 | 0.9;
+    animate: () => Promise<[unknown, unknown[]]>;
+    animateValues(): Promise<unknown>;
+    animateCards(): Promise<unknown[]>;
+    close: () => void;
+    open: () => void;
+    getTop(index: number): number;
+    getStyle(index: number): ViewStyle;
+    onLayout: ({ nativeEvent: { layout: { height } } }: LayoutChangeEvent) => void | 0;
+    onItemPress: (index: number) => void;
+    renderItem: (item: ReactNode, index: number) => JSX.Element;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<StackAggregatorProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof StackAggregator;
+export default _default;

generatedTypes/index.d.ts

@@ -42,7 +42,11 @@ export {default as RadioButton, RadioButtonPropTypes, RadioButtonProps} from './
 export {default as RadioGroup, RadioGroupPropTypes, RadioGroupProps} from './components/radioButton/RadioGroup';
 export {default as SectionsWheelPicker, SectionsWheelPickerProps} from './components/sectionsWheelPicker';
 export {default as HapticService, HapticType} from './services/HapticService';
-export {default as SegmentedControl, SegmentedControlProps, SegmentedControlItemProps} from './components/segmentedControl';
+export {
+  default as SegmentedControl,
+  SegmentedControlProps,
+  SegmentedControlItemProps
+} from './components/segmentedControl';
 export {default as Switch, SwitchProps} from './components/switch';
 export {default as TabController, TabControllerProps, TabControllerItemProps} from './components/tabController';
 export {default as TabBar, TabBarProps} from './components/TabBar';
@@ -61,9 +65,23 @@ export {
   PanDirectionsProps,
   PanningProviderDirection
 } from './components/panningViews/panningProvider';
-export {default as PanListenerView, PanListenerViewPropTypes, PanListenerViewProps} from './components/panningViews/panListenerView';
-export {default as PanResponderView, PanResponderViewPropTypes, PanResponderViewProps} from './components/panningViews/panResponderView';
-export {default as PanDismissibleView, PanDismissibleViewPropTypes, DismissibleAnimationPropTypes, PanDismissibleViewProps, DismissibleAnimationProps} from './components/panningViews/panDismissibleView';
+export {
+  default as PanListenerView,
+  PanListenerViewPropTypes,
+  PanListenerViewProps
+} from './components/panningViews/panListenerView';
+export {
+  default as PanResponderView,
+  PanResponderViewPropTypes,
+  PanResponderViewProps
+} from './components/panningViews/panResponderView';
+export {
+  default as PanDismissibleView,
+  PanDismissibleViewPropTypes,
+  DismissibleAnimationPropTypes,
+  PanDismissibleViewProps,
+  DismissibleAnimationProps
+} from './components/panningViews/panDismissibleView';
 export {default as Dialog, DialogProps} from './components/dialog';
 export {default as PageControl, PageControlProps} from './components/pageControl';
 export {default as Carousel, CarouselProps} from './components/carousel';
@@ -86,7 +104,6 @@ export {
   TagsInput,
   ChipsInput,
   SharedTransition,
-  StackAggregator,
   Toast,
   WheelPickerDialog,
   Assets,