Merge branch 'master' into release

Author: ethanshar

demo/src/assets/svgs/headerLogo.svg

@@ -14,6 +14,10 @@ Assets.loadAssetsGroup('images.demo', {
   brokenImage: require('./assets/images/placeholderMissingImage.png')
 });
 
+Assets.loadAssetsGroup('svgs.demo', {
+  logo: require('./assets/svgs/headerLogo.svg').default
+});
+
 Typography.loadTypographies({
   h1: {...Typography.text40},
   h2: {...Typography.text50},

demo/src/configurations.js

@@ -58,6 +58,9 @@ module.exports = {
       get ChipsInputScreen() {
         return require('./screens/componentScreens/ChipsInputScreen').default;
       },
+      get HapticScreen() {
+        return require('./screens/componentScreens/HapticScreen').default;
+      },
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
       },
@@ -91,6 +94,9 @@ module.exports = {
       get RadioButtonScreen() {
         return require('./screens/componentScreens/RadioButtonScreen').default;
       },
+      get SegmentedControlScreen() {
+        return require('./screens/componentScreens/SegmentedControlScreen').default;
+      },
       get SharedTransitionScreen() {
         return require('./screens/componentScreens/SharedTransitionScreen').default;
       },

demo/src/index.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: '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'},
       {title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
@@ -138,6 +139,7 @@ export const navigationData = {
     title: 'Animations & Gestures',
     screens: [
       {title: 'Animated Image', tags: 'animated image', screen: 'unicorn.components.AnimatedImageScreen'},
+      {title: 'Haptic feedback', tags: 'haptic feedback', screen: 'unicorn.components.HapticScreen'},
       {title: 'ProgressiveImage', tags: 'progressive image cover overlay', screen: 'unicorn.components.ProgressiveImageScreen'},
       {title: 'List Animations', tags: 'animated card', screen: 'unicorn.animations.ListAnimationsScreen'},
       {title: 'Card Animations', tags: 'animated card', screen: 'unicorn.animations.CardAnimationsScreen'},

demo/src/screens/MenuStructure.js

@@ -1,13 +1,90 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
 };
 const checkmark = require('../../assets/icons/check-small.png');
+const chevron = require('../../assets/icons/chevronDown.png');
+
 
 export default class ChipScreen extends Component {
+
+  colors = [
+    {value: Colors.red10, label: 'Red'},
+    {value: Colors.blue10, label: 'Blue'},
+    {value: Colors.purple10, label: 'Purple'},
+    {value: Colors.green10, label: 'Green'},
+    {value: Colors.yellow10, label: 'Yellow'}
+  ];
+
+  state = {
+    showDialog: false,
+    selectedValue: this.colors[2].label
+  };
+
+  toggleDialog = (showDialog: boolean) => {
+    this.setState({showDialog});
+  };
+
+  openDialog = () => {
+    this.toggleDialog(true);
+  }
+
+  closeDialog = () => {
+    this.toggleDialog(false);
+  };
+
+  onSelect = (itemValue: string) => {
+    const values = _.filter(this.colors, {value: itemValue});
+    if (values.length > 0) {
+      this.setState({selectedValue: values[0].label});
+    }
+    this.closeDialog();
+  };
+
+  renderItem = ({item: color}) => {
+    return (
+      <Text text50 margin-20 color={color.value}>
+        {color.label}
+      </Text>
+    );
+  };
+
+  renderContent = () => {
+    const {selectedValue} = this.state;
+
+    return (
+      <WheelPickerDialog
+        items={this.colors}
+        selectedValue={selectedValue}
+        onSelect={this.onSelect}
+        onCancel={this.closeDialog}
+        wheelPickerProps={{
+          style: {width: 200}
+        }}
+      />
+    );
+  };
+
+  renderPickerDialog = () => {
+    const {showDialog} = this.state;
+
+    return (
+      <Dialog
+        migrate
+        visible={showDialog}
+        useSafeArea
+        bottom
+        onDismiss={this.closeDialog}
+      >
+        {this.renderContent()}
+      </Dialog>
+    );
+  };
+
   renderExample = (text: string, chip: JSX.Element) => {
     return (
       <View row spread marginB-12>
@@ -20,22 +97,23 @@ export default class ChipScreen extends Component {
   render() {
     return (
       <View style={{padding: 20}}>
+        {this.state.showDialog && this.renderPickerDialog()}
         <Text marginB-20 text40>
           Chip
         </Text>
         <Text marginB-10 text70BO>
           Default
         </Text>
         {this.renderExample(
-          'label',
+          'Label',
           <Chip label={'Chip'}/>
         )}
         {this.renderExample(
-          'label with onPress',
+          'Label + onPress',
           <Chip label={'Chip'} onPress={() => Alert.alert('onPress')}/>
         )}
         {this.renderExample(
-          'label + onDismiss',
+          'Label + onDismiss',
           <Chip
             label={'Chip'}
             iconColor={Colors.black}
@@ -62,31 +140,31 @@ export default class ChipScreen extends Component {
           />
         )}
         {this.renderExample(
-          'Right icon',
+          'Right icon + onPress + dynamic label',
           <Chip
-            label={'Chip'}
-            rightIconSource={checkmark}
-            iconStyle={{width: 24, height: 24}}
-            iconProps={{tintColor: Colors.black}}
+            label={this.state.selectedValue}
+            rightIconSource={chevron}
+            iconStyle={{margin: 8}}
+            onPress={this.openDialog}
           />
         )}
         {this.renderExample(
-          'label + Avatar',
+          'Label + Avatar',
           <Chip
             label={'Chip'}
             avatarProps={{source: avatarImage, size: 20}}
           />
         )}
         {this.renderExample(
-          'label + Badge',
+          'Label + Counter',
           <Chip
             label={'Chip'}
             labelStyle={{
               marginRight: undefined
             }}
+            useCounter
             badgeProps={{
               label: '4',
-              backgroundColor: 'transparent',
               labelStyle: {
                 ...Typography.text80R,
                 color: Colors.grey20
@@ -95,7 +173,7 @@ export default class ChipScreen extends Component {
           />
         )}
         {this.renderExample(
-          'label + Badge',
+          'Label + Badge',
           <Chip
             label={'Chip'}
             badgeProps={{

demo/src/screens/componentScreens/ChipScreen.tsx

@@ -55,7 +55,8 @@ export default class DialogScreen extends Component {
       scroll: this.SCROLL_TYPE.NONE,
       showHeader: true,
       isRounded: true,
-      showDialog: false
+      showDialog: false,
+      ignoreBackgroundPress: false
     };
   }
 
@@ -93,6 +94,12 @@ export default class DialogScreen extends Component {
     });
   };
 
+  toggleIgnoreBackgroundPress = () => {
+    this.setState({
+      ignoreBackgroundPress: !this.state.ignoreBackgroundPress
+    });
+  };
+
   showDialog = () => {
     this.setState({showDialog: true});
   };
@@ -222,7 +229,7 @@ Scroll: ${scroll}`;
   };
 
   renderDialog = () => {
-    const {showDialog, panDirection, position, scroll, showHeader, isRounded} = this.state;
+    const {showDialog, panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
     const renderPannableHeader = showHeader ? this.renderPannableHeader : undefined;
     const height = scroll !== this.SCROLL_TYPE.NONE ? '70%' : undefined;
 
@@ -241,14 +248,15 @@ Scroll: ${scroll}`;
         renderPannableHeader={renderPannableHeader}
         pannableHeaderProps={this.pannableTitle}
         supportedOrientations={this.supportedOrientations}
+        ignoreBackgroundPress={ignoreBackgroundPress}
       >
         {this.renderContent()}
       </Dialog>
     );
   };
 
   render() {
-    const {panDirection, position, scroll, showHeader, isRounded} = this.state;
+    const {panDirection, position, scroll, showHeader, isRounded, ignoreBackgroundPress} = this.state;
 
     return (
       <ScrollView>
@@ -296,6 +304,11 @@ Scroll: ${scroll}`;
             <Switch value={isRounded} onValueChange={this.toggleIsRounded} marginL-10/>
           </View>
 
+          <View row marginT-20 centerV>
+            <Text>Ignore Background Press:</Text>
+            <Switch value={ignoreBackgroundPress} onValueChange={this.toggleIgnoreBackgroundPress} marginL-10/>
+          </View>
+
           <Button marginT-50 label={'Show dialog'} onPress={this.showDialog}/>
 
           {this.renderDialog()}

demo/src/screens/componentScreens/DialogScreen.js

@@ -0,0 +1,26 @@
+import _ from 'lodash';
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Button, HapticService} from 'react-native-ui-lib';
+
+export default class HapticScreen extends Component {
+  onPress = ({method}: {method: string}) => {
+    HapticService.triggerHaptic(method, 'HapticScreen');
+  };
+
+  render() {
+    return (
+      <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always">
+        <View padding-20>
+          <Text text30 dark10 marginB-20>
+            Haptic Screen
+          </Text>
+
+          {_.map(HapticService.HapticMethods, method => {
+            return <Button marginV-8 marginH-60 label={method} key={method} onPress={() => this.onPress({method})}/>;
+          })}
+        </View>
+      </ScrollView>
+    );
+  }
+}