Feat/with scroll enabler

demo/src/screens/MenuStructure.js

@@ -89,6 +89,11 @@ export const navigationData = {
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
       {title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
+      {
+        title: 'withScrollEnabler',
+        tags: 'scroll enabled withScrollEnabler',
+        screen: 'unicorn.components.WithScrollEnablerScreen'
+      },
       {title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'}
     ]
   },

demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockFlatList.tsx

@@ -0,0 +1,98 @@
+import _ from 'lodash';
+import React, {memo} from 'react';
+import {
+  FlatList,
+  FlatListProps,
+  StyleSheet,
+  LayoutChangeEvent
+} from 'react-native';
+import memoize from 'memoize-one';
+import {
+  Colors,
+  Text,
+  View,
+  withScrollEnabler,
+  WithScrollEnablerProps
+} from 'react-native-ui-lib';
+
+export type AutoLockScrollViewProps = FlatListProps<number> & {
+  numberOfItems: number;
+};
+
+const AutoLockFlatList = (props: AutoLockScrollViewProps) => {
+  const numberOfItems = props.numberOfItems;
+
+  const WithScrollEnabler = withScrollEnabler(
+    (props: WithScrollEnablerProps) => {
+      const getData = memoize((numberOfItems: number) => {
+        return [...Array(numberOfItems).keys()];
+      });
+
+      function keyExtractor(item: number) {
+        return item.toString();
+      }
+      function renderItem({index}: {index: number}) {
+        return (
+          <View key={index} style={styles.item}>
+            <Text>{index + 1}</Text>
+          </View>
+        );
+      }
+
+      function onContentSizeChange(
+        contentWidth: number,
+        contentHeight: number
+      ) {
+        _.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
+        _.invoke(
+          props,
+          'scrollEnablerProps.onContentSizeChange',
+          contentWidth,
+          contentHeight
+        );
+      }
+
+      function onLayout(nativeEvent: LayoutChangeEvent) {
+        _.invoke(props, 'onLayout', nativeEvent);
+        _.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
+      }
+
+      return (
+        <FlatList
+          {...props}
+          style={styles.flatList}
+          contentContainerStyle={styles.flatListContainer}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          data={getData(numberOfItems)}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          onContentSizeChange={onContentSizeChange}
+          onLayout={onLayout}
+          scrollEnabled={props.scrollEnablerProps.scrollEnabled}
+        />
+      );
+    }
+  );
+
+  return <WithScrollEnabler {...props} />;
+};
+
+export default memo(AutoLockFlatList);
+
+const styles = StyleSheet.create({
+  flatList: {
+    height: 240
+  },
+  flatListContainer: {
+    alignItems: 'center'
+  },
+  item: {
+    width: 100,
+    height: 100,
+    margin: 9,
+    backgroundColor: Colors.grey40,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockScrollView.tsx

@@ -0,0 +1,89 @@
+import _ from 'lodash';
+import React, {memo} from 'react';
+import {
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet,
+  LayoutChangeEvent
+} from 'react-native';
+import {
+  Colors,
+  Text,
+  View,
+  withScrollEnabler,
+  WithScrollEnablerProps
+} from 'react-native-ui-lib';
+
+export type AutoLockScrollViewProps = ScrollViewProps & {
+  numberOfItems: number;
+};
+
+const AutoLockScrollView = (props: AutoLockScrollViewProps) => {
+  const numberOfItems = props.numberOfItems;
+
+  const WithScrollEnabler = withScrollEnabler(
+    (props: WithScrollEnablerProps) => {
+      function renderItem(index: number) {
+        return (
+          <View key={index} style={styles.item}>
+            <Text>{index + 1}</Text>
+          </View>
+        );
+      }
+
+      function onContentSizeChange(
+        contentWidth: number,
+        contentHeight: number
+      ) {
+        _.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
+        _.invoke(
+          props,
+          'scrollEnablerProps.onContentSizeChange',
+          contentWidth,
+          contentHeight
+        );
+      }
+
+      function onLayout(nativeEvent: LayoutChangeEvent) {
+        _.invoke(props, 'onLayout', nativeEvent);
+        _.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
+      }
+
+      return (
+        <ScrollView
+          {...props}
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollViewContainer}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          onContentSizeChange={onContentSizeChange}
+          onLayout={onLayout}
+          scrollEnabled={props.scrollEnablerProps.scrollEnabled}
+        >
+          {_.times(numberOfItems, renderItem)}
+        </ScrollView>
+      );
+    }
+  );
+
+  return <WithScrollEnabler {...props} />;
+};
+
+export default memo(AutoLockScrollView);
+
+const styles = StyleSheet.create({
+  scrollView: {
+    height: 240
+  },
+  scrollViewContainer: {
+    alignItems: 'center'
+  },
+  item: {
+    width: 100,
+    height: 100,
+    margin: 9,
+    backgroundColor: Colors.grey40,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

demo/src/screens/componentScreens/WithScrollEnablerScreen/index.tsx

@@ -0,0 +1,116 @@
+import React, {Component} from 'react';
+import {LayoutChangeEvent} from 'react-native';
+import {Text, View} from 'react-native-ui-lib';
+import {
+  renderHeader,
+  renderBooleanOption,
+  renderSliderOption
+} from '../../ExampleScreenPresenter';
+import AutoLockScrollView from './AutoLockScrollView';
+import AutoLockFlatList from './AutoLockFlatList';
+
+class WithScrollEnablerScreen extends Component {
+  state = {
+    isListView: false,
+    isHorizontal: false,
+    numberOfItems: 3,
+    contentWidth: undefined,
+    contentHeight: undefined,
+    layoutWidth: undefined,
+    layoutHeight: undefined
+  };
+
+  onContentSizeChange = (contentWidth: number, contentHeight: number) => {
+    const {
+      contentWidth: currentContentWidth,
+      contentHeight: currentContentHeight
+    } = this.state;
+    if (
+      currentContentWidth !== contentWidth ||
+      currentContentHeight !== contentHeight
+    ) {
+      this.setState({contentWidth, contentHeight});
+    }
+  };
+
+  onLayout = ({
+    nativeEvent: {
+      layout: {width, height}
+    }
+  }: LayoutChangeEvent) => {
+    const {layoutWidth, layoutHeight} = this.state;
+    if (width !== layoutWidth || height !== layoutHeight) {
+      this.setState({layoutWidth: width, layoutHeight: height});
+    }
+  };
+
+  renderList = () => {
+    const {isListView, isHorizontal, numberOfItems} = this.state;
+    const Container = isListView ? AutoLockScrollView : AutoLockFlatList;
+
+    return (
+      // @ts-ignore
+      <Container
+        key={`${isHorizontal}`}
+        horizontal={isHorizontal}
+        numberOfItems={numberOfItems}
+        onContentSizeChange={this.onContentSizeChange}
+        onLayout={this.onLayout}
+      />
+    );
+  };
+
+  renderData = () => {
+    const {contentWidth, contentHeight, layoutWidth, layoutHeight} = this.state;
+    const contentText = `Content {width, height}: ${contentWidth}, ${contentHeight}`;
+    const layoutText = `Layout {width, height}: ${layoutWidth}, ${layoutHeight}`;
+    return (
+      <>
+        <Text text70>{contentText}</Text>
+        <Text text70>{layoutText}</Text>
+      </>
+    );
+  };
+
+  renderOptions = () => {
+    const {isListView, isHorizontal} = this.state;
+    const orientationText = isHorizontal ? 'Horizontal' : 'Vertical';
+    const listTypeText = isListView ? 'ListView' : 'FlatList';
+    return (
+      <>
+        <View row>
+          <View flex marginR-10>
+            {renderBooleanOption.call(this, orientationText, 'isHorizontal')}
+          </View>
+          <View flex marginL-10>
+            {renderBooleanOption.call(this, listTypeText, 'isListView')}
+          </View>
+        </View>
+        {renderSliderOption.call(
+          this,
+          'Number of items shown',
+          'numberOfItems',
+          {
+            min: 1,
+            max: 5,
+            step: 1,
+            initial: 3
+          }
+        )}
+      </>
+    );
+  };
+
+  render() {
+    return (
+      <View margin-10>
+        {renderHeader('withScrollEnabler', {'marginB-10': true})}
+        {this.renderOptions()}
+        {this.renderData()}
+        {this.renderList()}
+      </View>
+    );
+  }
+}
+
+export default WithScrollEnablerScreen;

demo/src/screens/componentScreens/index.js

@@ -57,5 +57,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.screens.EmptyStateScreen', () => require('./EmptyStateScreen').default);
   registrar('unicorn.screens.LoadingScreen', () => require('./LoadingScreen').default);
   registrar('unicorn.screens.ModalScreen', () => require('./ModalScreen').default);
+  registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
 }
 

generatedTypes/commons/new.d.ts

@@ -1,4 +1,5 @@
 export { default as UIComponent } from './UIComponent';
 export { default as asBaseComponent, BaseComponentInjectedProps } from './asBaseComponent';
 export { default as forwardRef, ForwardRefInjectedProps } from './forwardRef';
+export { default as withScrollEnabler } from './withScrollEnabler';
 export { ContainerModifiers, MarginModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier } from './modifiers';

generatedTypes/commons/withScrollEnabler.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FlatListProps, ScrollViewProps, LayoutChangeEvent } from 'react-native';
+export declare type ScrollEnablerProps = {
+    onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+    onLayout: (event: LayoutChangeEvent) => void;
+    scrollEnabled: boolean;
+};
+declare type SupportedViews = FlatListProps<any> | ScrollViewProps;
+export declare type WithScrollEnablerProps = SupportedViews & {
+    scrollEnablerProps: ScrollEnablerProps;
+    ref?: any;
+};
+declare function withScrollEnabler<PROPS extends SupportedViews>(WrappedComponent: React.ComponentType<WithScrollEnablerProps>): React.ComponentType<PROPS>;
+export default withScrollEnabler;

generatedTypes/index.d.ts

@@ -4,6 +4,7 @@
  * Please use this file for declaring all the exports, so they could be picked up by typescript's complier
  */
 export * from './style';
+export {withScrollEnabler} from './commons/new';
 export {default as Card} from './components/card';
 export {default as View, ViewPropTypes} from './components/view';
 export {default as Text} from './components/text';

src/commons/index.js

@@ -21,5 +21,8 @@ module.exports = {
   },
   get forwardRef() {
     return require('./forwardRef').default;
+  },
+  get withScrollEnabler() {
+    return require('./withScrollEnabler').default;
   }
 };

src/commons/new.ts

@@ -2,6 +2,7 @@
 export {default as UIComponent} from './UIComponent';
 export {default as asBaseComponent, BaseComponentInjectedProps} from './asBaseComponent';
 export {default as forwardRef, ForwardRefInjectedProps} from './forwardRef';
+export {default as withScrollEnabler} from './withScrollEnabler';
 export {
   ContainerModifiers,
   MarginModifiers,