Merge branch 'master' into daniel/skeleton_view

Author: M-i-k-e-l

demo/src/screens/ExampleScreenPresenter.js

@@ -44,7 +44,7 @@ export function renderBooleanGroup(title, options) {
                 marginR-s2
                 useCustomTheme
                 key={key}
-                textID={key}
+                testID={key}
                 value={value}
                 onValueChange={value => this.setState({[key]: value})}
               />

demo/src/screens/componentScreens/DateTimePickerScreen.js

@@ -70,7 +70,7 @@ export default class DateTimePickerScreen extends Component {
           containerStyle={{marginVertical: 20}}
           title={'Date'}
           placeholder={'Select a date'}
-          renderExpandableInput={this.renderCustomInput}
+          renderInput={this.renderCustomInput}
           dateFormat={'MMM D, YYYY'}
           // value={new Date('2015-03-25T12:00:00-06:30')}
         />

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

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {ActivityIndicator} from 'react-native';
+import {ActivityIndicator, StyleSheet} from 'react-native';
 import {Assets, TabController, Colors, View, Text, Button, TabControllerItemProps} from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import _ from 'lodash';
@@ -20,7 +20,6 @@ interface State {
 }
 
 class TabControllerScreen extends Component<{}, State> {
-
   constructor(props: {}) {
     super(props);
     this.state = {
@@ -36,12 +35,23 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
-    let items: TabControllerItemProps[] = _.chain(TABS)
+    const items: TabControllerItemProps[] = _.chain(TABS)
       .take(fewItems ? 3 : TABS.length)
-      .map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
+      .map<TabControllerItemProps>((tab, index) => ({
+        label: tab,
+        key: tab,
+        icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
+        badge: index === 5 ? {label: '2'} : undefined
+      }))
       .value();
 
-    const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
+    const addItem: TabControllerItemProps = {
+      icon: Assets.icons.demo.add,
+      key: 'add',
+      ignore: true,
+      width: 60,
+      onPress: this.onAddItem
+    };
 
     return fewItems ? items : [...items, addItem];
   };
@@ -93,7 +103,7 @@ class TabControllerScreen extends Component<{}, State> {
   renderLoadingPage() {
     return (
       <View flex center>
-        <ActivityIndicator size="large" />
+        <ActivityIndicator size="large"/>
         <Text text60L marginT-10>
           Loading
         </Text>
@@ -108,13 +118,13 @@ class TabControllerScreen extends Component<{}, State> {
     return (
       <Container {...containerProps}>
         <TabController.TabPage index={0}>
-          <Tab1 />
+          <Tab1/>
         </TabController.TabPage>
         <TabController.TabPage index={1}>
-          <Tab2 />
+          <Tab2/>
         </TabController.TabPage>
         <TabController.TabPage index={2} lazy lazyLoadTime={1500} renderLoading={this.renderLoadingPage}>
-          <Tab3 />
+          <Tab3/>
         </TabController.TabPage>
 
         {_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
@@ -147,10 +157,12 @@ class TabControllerScreen extends Component<{}, State> {
             // uppercase
             // indicatorStyle={{backgroundColor: 'green', height: 3}}
             // indicatorInsets={0}
-            // spreadItems={false}
+            spreadItems={!fewItems}
+            backgroundColor={fewItems ? 'transparent' : undefined}
             // labelColor={'green'}
             // selectedLabelColor={'red'}
-            // labelStyle={{fontSize: 20}}
+            labelStyle={styles.labelStyle}
+            selectedLabelStyle={styles.selectedLabelStyle}
             // iconColor={'green'}
             // selectedIconColor={'blue'}
             enableShadow
@@ -192,3 +204,12 @@ class TabControllerScreen extends Component<{}, State> {
 }
 
 export default gestureHandlerRootHOC(TabControllerScreen);
+
+const styles = StyleSheet.create({
+  labelStyle: {
+    fontSize: 16
+  },
+  selectedLabelStyle: {
+    fontSize: 16
+  }
+});

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
 import _ from 'lodash';
 
@@ -29,42 +29,42 @@ const useData = (initialMonth?: string, initialYear?: string, initialDays?: numb
   const [selectedDays, setDays] = useState<number | undefined>(initialDays);
   const [showDialog, setShowDialog] = useState(false);
 
-  const onPickDaysPress = () => {
+  const onPickDaysPress = useCallback(() => {
     setShowDialog(true);
-  };
+  }, []);
 
-  const onDialogDismissed = () => {
+  const onDialogDismissed = useCallback(() => {
     setShowDialog(false);
-  };
+  }, []);
 
-  const onMonthChange = (item: string | undefined, _: number) => {
+  const onMonthChange = useCallback((item: string | undefined, _: number) => {
     setMonth(item);
-  };
+  }, []);
 
-  const onYearChange = (item: string | undefined, _: number) => {
+  const onYearChange = useCallback((item: string | undefined, _: number) => {
     setYear(item);
-  };
+  }, []);
 
-  const onDaysChange = (item: number | undefined, _: number) => {
+  const onDaysChange = useCallback((item: number | undefined, _: number) => {
     setDays(item);
-  };
+  }, []);
 
-  const getMonths = useCallback(() => {
+  const monthItems = useMemo(() => {
     return _.map(months, item => ({label: item, value: item}));
   }, []);
 
-  const getYears = useCallback(() => {
+  const yearItems = useMemo(() => {
     return _.map(years, item => ({label: '' + item, value: item}));
   }, []);
 
-  const getDays = useCallback(() => {
+  const dayItems = useMemo(() => {
     return _.map(days, item => ({label: '' + item, value: item}));
   }, []);
 
   return {
-    getMonths,
-    getYears,
-    getDays,
+    monthItems,
+    yearItems,
+    dayItems,
     onMonthChange,
     onYearChange,
     onDaysChange,
@@ -81,13 +81,13 @@ export default () => {
   const {
     selectedMonth,
     onMonthChange,
-    getMonths,
+    monthItems,
     selectedYear,
     onYearChange,
-    getYears,
+    yearItems,
     selectedDays,
     onDaysChange,
-    getDays,
+    dayItems,
     onPickDaysPress,
     onDialogDismissed,
     showDialog
@@ -104,7 +104,7 @@ export default () => {
           onChange={onMonthChange}
           activeTextColor={Colors.primary}
           inactiveTextColor={Colors.grey20}
-          items={getMonths()}
+          items={monthItems}
           textStyle={Typography.text60R}
           selectedValue={selectedMonth}
         />
@@ -115,18 +115,13 @@ export default () => {
             onChange={onYearChange}
             numberOfVisibleRows={3}
             selectedValue={selectedYear}
-            items={getYears()}
+            items={yearItems}
           />
         </View>
 
-        <Button marginT-40 label={'Pick Days'} marginH-120 onPress={onPickDaysPress}/>
+        <Button marginT-40 label={'Pick Days'} marginH-100 onPress={onPickDaysPress}/>
         <Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
-          <Incubator.WheelPicker
-            onChange={onDaysChange}
-            selectedValue={selectedDays}
-            label={'Days'}
-            items={getDays()}
-          />
+          <Incubator.WheelPicker onChange={onDaysChange} selectedValue={selectedDays} label={'Days'} items={dayItems}/>
         </Dialog>
       </View>
     </View>

generatedTypes/components/hint/index.d.ts

@@ -107,6 +107,7 @@ export interface HintProps {
 interface HintState {
     targetLayout?: HintTargetFrame;
     targetLayoutInWindow?: HintTargetFrame;
+    animationEnded: boolean;
 }
 /**
  * @description: Hint component for displaying a tooltip over wrapped component
@@ -122,12 +123,16 @@ declare class Hint extends Component<HintProps, HintState> {
     static positions: typeof HintPositions;
     targetRef: ElementRef<typeof RNView> | null;
     hintRef: ElementRef<typeof RNView> | null;
+    animationDuration: number;
     state: {
         targetLayoutInWindow: undefined;
         targetLayout: HintTargetFrame | undefined;
+        animationEnded: boolean;
     };
     visibleAnimated: Animated.Value;
     componentDidUpdate(prevProps: HintProps): void;
+    animateHint: () => void;
+    toggleAnimationEndedToRemoveHint: () => void;
     focusAccessibilityOnHint: () => void;
     setTargetRef: (ref: ElementRef<typeof RNView>) => void;
     setHintRef: (ref: ElementRef<typeof RNView>) => void;

generatedTypes/components/tabController2/FadedScrollView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ViewProps, ScrollViewProps } from 'react-native';
+import { ForwardRefInjectedProps } from '../../commons/forwardRef';
+export declare type FadedScrollViewProps = ViewProps & ScrollViewProps & {
+    children?: React.ReactNode | React.ReactNode[];
+};
+declare type Props = FadedScrollViewProps & ForwardRefInjectedProps;
+declare const _default: React.ComponentType<Props>;
+export default _default;

generatedTypes/components/tabController2/PageCarousel.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * @description: TabController's Page Carousel
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
+ */
+declare function PageCarousel({ ...props }: {
+    [x: string]: any;
+}): JSX.Element;
+export default PageCarousel;

generatedTypes/components/tabController2/TabBar.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { TabControllerItemProps } from './TabBarItem';
+export interface TabControllerBarProps {
+    /**
+     * The list of tab bar items
+     */
+    items?: TabControllerItemProps[];
+    /**
+     * Tab Bar height
+     */
+    height?: number;
+    /**
+     * Show Tab Bar bottom shadow
+     */
+    enableShadow?: boolean;
+    /**
+     * custom shadow style
+     */
+    shadowStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom style for the selected indicator
+     */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom label style
+     */
+    labelStyle?: TabControllerItemProps['labelStyle'];
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle?: TabControllerItemProps['selectedLabelStyle'];
+    /**
+     * the default label color
+     */
+    labelColor?: string;
+    /**
+     * the selected label color
+     */
+    selectedLabelColor?: string;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    selectedIconColor?: string;
+    /**
+     * TODO: rename to feedbackColor
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    /**
+     * The TabBar background Color
+     */
+    backgroundColor?: string;
+    /**
+     * The TabBar container width
+     */
+    containerWidth?: number;
+    /**
+     * Pass to center selected item
+     */
+    centerSelected?: boolean;
+    /**
+     * Whether the tabBar should be spread (default: true)
+     */
+    spreadItems?: boolean;
+    /**
+     * The indicator insets (default: Spacings.s4, set to 0 to make it wide as the item)
+     */
+    indicatorInsets?: number;
+    /**
+     * Additional styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+declare const _default: React.ComponentClass<TabControllerBarProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/tabController2/TabBarContext.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import Reanimated from 'react-native-reanimated';
+interface TabControllerContext {
+    selectedIndex?: number;
+    items?: any[];
+    asCarousel?: boolean;
+    containerWidth: Reanimated.SharedValue<number>;
+    pageWidth?: number;
+    /** static page index */
+    currentPage: Reanimated.SharedValue<number>;
+    /** transition page index (can be a fraction when transitioning between pages) */
+    targetPage: Reanimated.SharedValue<number>;
+    carouselOffset: Reanimated.SharedValue<number>;
+}
+declare const TabBarContext: React.Context<TabControllerContext>;
+export default TabBarContext;