Picker example for the webDemo (#2622)

* Picker exmaple for the webDemo

* new picker dialog example

* Fix svg example

* fixed review comments

---------

Co-authored-by: lidord-wix <[email protected]>

Author: adids1221

webDemo/src/App.tsx

@@ -358,14 +358,14 @@ function App() {
   return (
     <View flex>
       <ScrollView>
-        <View style={styles.header}>
+        <View padding-page>
           <Text style={styles.title}>Welcome to react-native-ui-lib for Web</Text>
         </View>
 
         {
           itemsToRender.map(({title, FC}: ItemToRender) =>
             (
-              <View style={styles.componentContainer} key={'component_' + title}>
+              <View bg-grey80 paddingT-s5 paddingB-s5 center style={styles.componentContainer} key={'component_' + title}>
                 <Text style={styles.compTitle}> {title} </Text>
                 <FC/>
               </View>
@@ -387,14 +387,9 @@ const styles = StyleSheet.create({
     padding: 20
   },
   componentContainer: {
-    backgroundColor: '#F5FCFF',
     width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
     borderColor: 'white',
-    borderBottomWidth: 5,
-    paddingBottom: 20,
-    paddingTop: 20
+    borderBottomWidth: 5
   },
   compTitle: {
     fontWeight: 'bold',
@@ -409,4 +404,5 @@ const styles = StyleSheet.create({
     textAlign: 'center'
   }
 });
+
 export default App;

webDemo/src/examples/Picker.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
-import Picker from 'react-native-ui-lib/Picker';
-import {Colors} from 'react-native-ui-lib/style';
+import {ScrollView} from 'react-native-gesture-handler';
+import {Picker, Colors, View, Text, Incubator, PickerProps, PanningProvider} from 'react-native-ui-lib';
 
 const options = [
   {label: 'JavaScript', value: 'js'},
@@ -10,28 +10,110 @@ const options = [
   {label: 'Perl', value: 'perl'}
 ];
 
-const PickerWrapper = () => {
+const filters = [
+  {value: 1, label: 'All'},
+  {value: 2, label: 'Accessories'},
+  {value: 3, label: 'Outwear'},
+  {value: 4, label: 'Footwear'},
+  {value: 5, label: 'Swimwear'},
+  {value: 6, label: 'Tops'}
+];
+
+const schemes = [
+  {label: 'Default', value: 1},
+  {label: 'Light', value: 2},
+  {label: 'Dark', value: 3}
+];
 
+const PickerWrapper = () => {
   const [language, setLanguage] = useState(undefined);
+  const [filter, setFilter] = useState(undefined);
+  const [customModalValues, setCustomModalValues] = useState(undefined);
+  const renderDialog: PickerProps['renderCustomModal'] = (modalProps: any) => {
+    const {visible, children, toggleModal, onDone} = modalProps;
+
+    return (
+      <Incubator.Dialog
+        visible={visible}
+        onDismiss={() => {
+          onDone();
+          toggleModal(false);
+        }}
+        width="40%"
+        height="45%"
+        bottom
+        useSafeArea
+        containerStyle={{backgroundColor: Colors.$backgroundDefault}}
+        direction={PanningProvider.Directions.DOWN}
+        headerProps={{title: 'Custom modal'}}
+      >
+        <ScrollView>{children}</ScrollView>
+      </Incubator.Dialog>
+    );
+  };
 
   return (
-    <Picker
-      placeholder="Favorite Language"
-      floatingPlaceholder
-      value={language}
-      enableModalBlur={false}
-      onChange={setLanguage}
-      topBarProps={{title: 'Languages'}}
-      showSearch
-      fieldType={Picker.fieldTypes.filter}
-      searchPlaceholder={'Search a language'}
-      searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
-      migrateTextField
-    >
-      {options.map(option => (
-        <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
-      ))}
-    </Picker>
+    <View marginT-s2>
+      <Text text80BO marginT-s1 center>
+        Single Value Picker
+      </Text>
+      <View marginB-s2>
+        <Picker
+          placeholder="Favorite Language"
+          floatingPlaceholder
+          value={language}
+          enableModalBlur={false}
+          onChange={setLanguage}
+          topBarProps={{title: 'Languages'}}
+          showSearch
+          searchPlaceholder={'Search a language'}
+          searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
+          migrateTextField
+        >
+          {options.map(option => (
+            <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
+          ))}
+        </Picker>
+      </View>
+      <Text text80BO center>
+        Multi Value Picker
+      </Text>
+      <View>
+        <Picker
+          placeholder="Favorite Filters"
+          floatingPlaceholder
+          value={filter}
+          enableModalBlur={false}
+          onChange={setFilter}
+          topBarProps={{title: 'Filters'}}
+          mode={Picker.modes.MULTI}
+          showSearch
+          searchPlaceholder={'Search a filter'}
+          searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
+          migrateTextField
+        >
+          {filters.map(filter => (
+            <Picker.Item key={filter.value} value={filter.value} label={filter.label} disabled={filter.disabled}/>
+          ))}
+        </Picker>
+      </View>
+      <Text text80BO center>
+        Dialog Picker
+      </Text>
+      <View>
+        <Picker
+          placeholder="Pick multiple schemes"
+          value={customModalValues}
+          onChange={items => setCustomModalValues(items)}
+          mode={Picker.modes.MULTI}
+          renderCustomModal={renderDialog}
+        >
+          {schemes.map(option => (
+            <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
+          ))}
+        </Picker>
+      </View>
+    </View>
   );
 };