Merge branch 'master' into release

Author: ethanshar

demo/src/index.js

@@ -94,6 +94,9 @@ module.exports = {
       get RadioButtonScreen() {
         return require('./screens/componentScreens/RadioButtonScreen').default;
       },
+      get SectionsWheelPickerScreen() {
+        return require('./screens/componentScreens/SectionsWheelPickerScreen').default;
+      },
       get SegmentedControlScreen() {
         return require('./screens/componentScreens/SegmentedControlScreen').default;
       },

demo/src/screens/MainScreen.js

@@ -5,7 +5,17 @@ import PropTypes from 'prop-types';
 import {StyleSheet, FlatList, ViewPropTypes} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-import {Assets, Colors, View, Text, TouchableOpacity, TextField, Image, TabController} from 'react-native-ui-lib'; //eslint-disable-line
+import {
+  Assets,
+  Colors,
+  View,
+  Text,
+  TouchableOpacity,
+  TextField,
+  Image,
+  Button,
+  TabController
+} from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
 
 const settingsIcon = require('../assets/icons/settings.png');
@@ -15,7 +25,7 @@ class MainScreen extends Component {
   static propTypes = {
     containerStyle: ViewPropTypes.style,
     renderItem: PropTypes.func,
-    pageStyle: ViewPropTypes.style    
+    pageStyle: ViewPropTypes.style
   };
 
   settingsScreenName = 'unicorn.Settings';
@@ -52,7 +62,6 @@ class MainScreen extends Component {
 
   onSearchBoxBlur = () => {
     this.closeSearchBox();
-    // this.filterExplorerScreens('');
   };
 
   getMenuData = () => {
@@ -67,8 +76,8 @@ class MainScreen extends Component {
       this.pushScreen({
         name: this.settingsScreenName,
         passProps: {
-          navigationData: data, 
-          playground: this.props.playground, 
+          navigationData: data,
+          playground: this.props.playground,
           extraSettingsUI: this.props.extraSettingsUI
         }
       });
@@ -105,12 +114,22 @@ class MainScreen extends Component {
     this.closeSearchBox();
 
     setTimeout(() => {
-      // this.filterExplorerScreens('');
       this.pushScreen(row);
     }, 0);
   };
 
-  filterExplorerScreens = filterText => {
+  updateSearch = filterText => {
+    this.setState({filterText}, () => {
+      this.filterExplorerScreens();
+    });
+  };
+
+  clearSearch = () => {
+    this.updateSearch('');
+  };
+
+  filterExplorerScreens = () => {
+    const {filterText} = this.state;
     let filteredNavigationData = {};
     const data = this.getMenuData();
 
@@ -134,32 +153,35 @@ class MainScreen extends Component {
     }
 
     this.setState({
-      filterText,
       filteredNavigationData
     });
   };
 
   /** Renders */
   renderSearch = () => {
+    const {filterText} = this.state;
     return (
       <TextField
+        migrate
         ref={r => (this.input = r)}
-        value={this.state.filterText}
+        value={filterText}
         testID="uilib.search_for_component"
         placeholder="Search for your component..."
-        onChangeText={this.filterExplorerScreens}
+        onChangeText={this.updateSearch}
         onBlur={this.onSearchBoxBlur}
-        containerStyle={{padding: 16, paddingBottom: 0}}
-        style={{
-          padding: 12,
-          backgroundColor: Colors.dark80,
-          borderRadius: 8
-        }}
+        containerStyle={styles.searchContainer}
+        fieldStyle={styles.searchField}
         enableErrors={false}
         hideUnderline
         floatingPlaceholder={false}
         text70
-        rightButtonProps={{iconSource: Assets.icons.search, style: {marginRight: 12, alignSelf: 'center'}}}
+        trailingAccessory={
+          filterText ? (
+            <Button link iconSource={Assets.icons.demo.close} grey10 onPress={this.clearSearch}/>
+          ) : (
+            <Image source={Assets.icons.demo.search}/>
+          )
+        }
       />
     );
   };
@@ -251,7 +273,10 @@ class MainScreen extends Component {
         {showResults && this.renderSearchResults(filteredNavigationData)}
 
         {showCarousel && (
-          <TabController asCarousel items={_.map(data, section => ({label: section.title, testID: `section.${section.title}`}))}>
+          <TabController
+            asCarousel
+            items={_.map(data, section => ({label: section.title, testID: `section.${section.title}`}))}
+          >
             <TabController.TabBar testID={'mainScreenTabBar'}/>
             {this.renderPages(data)}
           </TabController>
@@ -271,6 +296,15 @@ class MainScreen extends Component {
 const styles = StyleSheet.create({
   entryTextDeprecated: {
     textDecorationLine: 'line-through'
+  },
+  searchContainer: {
+    padding: 16,
+    paddingBottom: 0
+  },
+  searchField: {
+    padding: 12,
+    backgroundColor: Colors.dark80,
+    borderRadius: 8
   }
 });
 

demo/src/screens/MenuStructure.js

@@ -56,6 +56,7 @@ export const navigationData = {
       {title: 'Picker', tags: 'picker form', screen: 'unicorn.components.PickerScreen'},
       {title: 'DateTimePicker', tags: 'date time picker form', screen: 'unicorn.components.DateTimePickerScreen'},
       {title: 'RadioButton', tags: 'radio button group controls', screen: 'unicorn.components.RadioButtonScreen'},
+      {title: 'SectionsWheelPicker', tags: 'sections wheel picker form', screen: 'unicorn.components.SectionsWheelPickerScreen'},
       {title: 'SegmentedControl', tags: 'segmented control switch toggle', screen: 'unicorn.components.SegmentedControlScreen'},
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},

demo/src/screens/componentScreens/CarouselVerticalScreen.tsx

@@ -22,7 +22,7 @@ const BACKGROUND_COLORS = [
   Colors.purple60
 ];
 
-const pageHeight = Constants.windowHeight / 2;
+const pageHeight = Constants.windowHeight / 3;
 
 class CarouselVerticalScreen extends Component<{}, State> {
   carousel = React.createRef<typeof Carousel>();
@@ -101,6 +101,17 @@ class CarouselVerticalScreen extends Component<{}, State> {
           </Carousel>
           {this.renderAnimatedCounter()}
         </View>
+
+        <View centerH flex marginT-s3>
+          <Text h3 marginB-s2>
+            iOS Widgets Carousel
+          </Text>
+          <Carousel horizontal={false} containerStyle={styles.widgetsCarousel}>
+            <View flex bg-blue30/>
+            <View flex bg-orange30/>
+            <View flex bg-green30/>
+          </Carousel>
+        </View>
       </View>
     );
   }
@@ -130,6 +141,13 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 20,
     left: 20
+  },
+  widgetsCarousel: {
+    height: 150,
+    width: 300,
+    backgroundColor: Colors.grey60,
+    borderRadius: 24,
+    overflow: 'hidden'
   }
 });
 

demo/src/screens/componentScreens/ColorPickerScreen.js renamed to demo/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -4,6 +4,14 @@ import {StyleSheet, ScrollView} from 'react-native';
 import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
 
 
+interface Props {}
+interface State {
+  color: string,
+  textColor: string,
+  customColors: string[],
+  paletteChange: boolean
+}
+
 const INITIAL_COLOR = Colors.blue30;
 const colors = [
   '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
@@ -17,34 +25,30 @@ const colors = [
 ];
 
 
-export default class ColorPickerScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      color: INITIAL_COLOR,
-      textColor: Colors.white,
-      customColors: [],
-      paletteChange: false
-    };
-  }
+export default class ColorPickerScreen extends Component<Props, State> {
+  state: State = {
+    color: INITIAL_COLOR,
+    textColor: Colors.white,
+    customColors: [],
+    paletteChange: false
+  };
 
   onDismiss = () => {
     console.log(`screen onDismiss`);
   }
 
-  onSubmit = (color, textColor) => {
+  onSubmit = (color: string, textColor: string) => {
     const {customColors} = this.state;
     customColors.push(color);
     this.setState({color, textColor, customColors: _.clone(customColors), paletteChange: false});
   }
 
-  onValueChange = (value, options) => {
-    this.setState({color: value, textColor: options ? options.tintColor : undefined, paletteChange: false});
+  onValueChange = (value: string, options: object) => {
+    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: false});
   }
 
-  onPaletteValueChange = (value, options) => {
-    this.setState({color: value, textColor: options ? options.tintColor : undefined, paletteChange: true});
+  onPaletteValueChange = (value: string, options: object) => {
+    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
   }
 
   render() {
@@ -74,7 +78,7 @@ export default class ColorPickerScreen extends Component {
             Theme Color
           </Text>
           <Text marginL-20>Choose a color for your place’s theme.</Text>
-          <ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors} />
+          <ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors}/>
           <Text marginL-20 marginT-16>
             Custom Colors
           </Text>

demo/src/screens/componentScreens/ColorSwatchScreen.js renamed to demo/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -5,38 +5,34 @@ import {Constants, Colors, View, Text, ColorSwatch, ColorPalette} from 'react-na
 
 
 export default class ColorSwatchScreen extends Component {
-  constructor(props) {
-    super(props);
-    
-    this.colors = ['transparent', Colors.green30, Colors.yellow30, Colors.red30];
-    this.mainColors = ['#66737C', '#459FED', '#1D5382', '#3CC7C5', '#65C888', '#FAAD4D', '#F27052', '#F2564D', '#B13DAC', '#733CA6', '#79838A', '#5847FF', '#00BBF2', '#00CD8B', '#FF563D', '#ffb600'];
-    this.allColors = _.filter(Object.values(Colors), _.isString);
+  colors = ['transparent', Colors.green30, Colors.yellow30, Colors.red30];
+  mainColors = ['#66737C', '#459FED', '#1D5382', '#3CC7C5', '#65C888', '#FAAD4D', '#F27052', '#F2564D', '#B13DAC', '#733CA6', '#79838A', '#5847FF', '#00BBF2', '#00CD8B', '#FF563D', '#ffb600'];
+  allColors = _.filter(Object.values(Colors), _.isString);
 
-    this.state = {
-      color: this.colors[0],
-      color1: this.mainColors[this.mainColors.length - 1],
-      color2: this.allColors[20],
-      selected: false
-    };
-  }
+  state = {
+    color: this.colors[0],
+    color1: this.mainColors[this.mainColors.length - 1],
+    color2: this.allColors[20],
+    selected: false
+  };
 
   onPress = () => {
     this.setState({selected: !this.state.selected});
   }
 
-  onValueChange = (value) => {
+  onValueChange = (value: string) => {
     this.setState({color: value});
   }
-  onValueChange1 = (value) => {
+  onValueChange1 = (value: string) => {
     this.setState({color1: value});
   }
-  onValueChange2 = (value) => {
+  onValueChange2 = (value: string) => {
     this.setState({color2: value});
   }
 
   render() {
     const {color, color1, color2, selected} = this.state;
-    
+
     return (
       <ScrollView style={{backgroundColor: Colors.dark80}}>
         <View flex center useSafeArea>
@@ -48,16 +44,29 @@ export default class ColorSwatchScreen extends Component {
               <Text>Disabled</Text>
             </View>
           </View>
-          
+
           <Text marginT-20 text60 dark10>ColorPalette</Text>
           <Text marginB-10 text70 style={{color}}>Selected Color: {color}</Text>
-          <ColorPalette value={color} onValueChange={this.onValueChange} colors={this.colors}/>
+          <ColorPalette
+            value={color}
+            onValueChange={this.onValueChange}
+            colors={this.colors}
+          />
 
           <Text margin-10 text60 dark10>Scrollable</Text>
-          <ColorPalette value={color1} onValueChange={this.onValueChange1} colors={this.mainColors}/>
-          
+          <ColorPalette
+            value={color1}
+            onValueChange={this.onValueChange1}
+            colors={this.mainColors}
+          />
+
           <Text margin-10 text60 dark10>Pagination</Text>
-          <ColorPalette numberOfRows={!Constants.isTablet ? 4 : undefined} value={color2} onValueChange={this.onValueChange2} colors={this.allColors}/>
+          <ColorPalette
+            numberOfRows={!Constants.isTablet ? 4 : undefined}
+            value={color2}
+            onValueChange={this.onValueChange2}
+            colors={this.allColors}
+          />
         </View>
       </ScrollView>
     );

demo/src/screens/componentScreens/HapticScreen.tsx

@@ -1,11 +1,11 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Button, HapticService} from 'react-native-ui-lib';
+import {View, Text, Button, HapticService, HapticType} from 'react-native-ui-lib';
 
 export default class HapticScreen extends Component {
-  onPress = ({method}: {method: string}) => {
-    HapticService.triggerHaptic(method, 'HapticScreen');
+  onPress = ({hapticType}: {hapticType: HapticType}) => {
+    HapticService.triggerHaptic(hapticType, 'HapticScreen');
   };
 
   render() {
@@ -16,8 +16,8 @@ export default class HapticScreen extends Component {
             Haptic Screen
           </Text>
 
-          {_.map(HapticService.HapticMethods, method => {
-            return <Button marginV-8 marginH-60 label={method} key={method} onPress={() => this.onPress({method})}/>;
+          {_.map(HapticService.HapticType, hapticType => {
+            return <Button marginV-8 marginH-60 label={hapticType} key={hapticType} onPress={() => this.onPress({hapticType})}/>;
           })}
         </View>
       </ScrollView>