Picker screens aligned to the new props migration (#3080)

adids1221 · web-flow · commit 49470723e9a9 · 2024-05-28T10:01:14.000+03:00
* Picker screens aligned to the new props migration

* refcator web demo picker examples
diff --git a/demo/src/screens/SettingsScreen.js b/demo/src/screens/SettingsScreen.js
@@ -80,11 +80,8 @@ class SettingsScreen extends Component {
             value={defaultScreen?.value}
             label={'Default Screen'}
             onChange={this.setDefaultScreen}
-          >
-            {_.map(filteredScreens, screen => (
-              <Picker.Item key={screen.value} value={screen.value} label={screen.label}/>
-            ))}
-          </Picker>
+            items={filteredScreens}
+          />
 
           <View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
             <View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -24,14 +24,39 @@ const tagIcon = require('../../assets/icons/tags.png');
 const dropdown = require('../../assets/icons/chevronDown.png');
 const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
 
-const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name}));
+const renderContact = (contactValue: any, props: any) => {
+  const contact = contacts[contactValue as number];
+  return (
+    <View
+      style={{
+        height: 56,
+        borderBottomWidth: 1,
+        borderColor: Colors.$backgroundNeutral
+      }}
+      paddingH-15
+      row
+      centerV
+      spread
+    >
+      <View row centerV>
+        <Avatar size={35} source={{uri: contact?.thumbnail}}/>
+        <Text marginL-10 text70 $textDefault>
+          {contact?.name}
+        </Text>
+      </View>
+      {props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
+    </View>
+  );
+};
+
+const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name, renderItem: renderContact}));
 
 const options = [
-  {label: 'JavaScript', value: 'js'},
-  {label: 'Java', value: 'java'},
-  {label: 'Python', value: 'python'},
-  {label: 'C++', value: 'c++', disabled: true},
-  {label: 'Perl', value: 'perl'}
+  {label: 'JavaScript', value: 'js', labelStyle: Typography.text65},
+  {label: 'Java', value: 'java', labelStyle: Typography.text65},
+  {label: 'Python', value: 'python', labelStyle: Typography.text65},
+  {label: 'C++', value: 'c++', disabled: true, labelStyle: Typography.text65},
+  {label: 'Perl', value: 'perl', labelStyle: Typography.text65}
 ];
 
 const filters = [
@@ -76,7 +101,6 @@ export default class PickerScreen extends Component {
 
   renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
     const {visible, children, toggleModal, onDone} = modalProps;
-
     return (
       <Incubator.Dialog
         visible={visible}
@@ -116,11 +140,8 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             // onSearchChange={value => console.warn('value', value)}
-          >
-            {_.map(longOptions, option => (
-              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
-            ))}
-          </Picker>
+            items={longOptions}
+          />
 
           <Picker
             placeholder="Favorite Languages (up to 3)"
@@ -129,11 +150,8 @@ export default class PickerScreen extends Component {
             mode={Picker.modes.MULTI}
             selectionLimit={3}
             trailingAccessory={dropdownIcon}
-          >
-            {_.map(options, option => (
-              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
-            ))}
-          </Picker>
+            items={options}
+          />
 
           <Picker
             label="Wheel Picker"
@@ -142,20 +160,8 @@ export default class PickerScreen extends Component {
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             trailingAccessory={<Icon source={dropdown}/>}
-            // containerStyle={{marginTop: 20}}
-            // renderPicker={() => {
-            //   return (
-            //     <View>
-            //       <Text>Open Native Picker!</Text>
-            //     </View>
-            //   );
-            // }}
-            // topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
-          >
-            {_.map(options, option => (
-              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
-            ))}
-          </Picker>
+            items={options}
+          />
 
           <Picker
             label="Custom modal"
@@ -195,12 +201,8 @@ export default class PickerScreen extends Component {
             customPickerProps={{migrateDialog: true, dialogProps: {bottom: true, width: '100%', height: '45%'}}}
             showSearch
             searchPlaceholder={'Search a language'}
-          >
-            {_.map(dialogOptions, option => (
-              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
-            ))}
-          </Picker>
-
+            items={dialogOptions}
+          />
           <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>
@@ -221,12 +223,8 @@ export default class PickerScreen extends Component {
                 </View>
               );
             }}
-          >
-            {_.map(filters, filter => (
-              <Picker.Item key={filter.value} value={filter.value} label={filter.label}/>
-            ))}
-          </Picker>
-
+            items={filters}
+          />
           <Text marginT-20 marginB-10 text70 $textDefault>
             Custom Picker Items:
           </Text>
@@ -236,7 +234,6 @@ export default class PickerScreen extends Component {
             onChange={contact => {
               this.setState({contact});
             }}
-            // getItemValue={contact => contact?.value}
             renderPicker={(contactValue?: number) => {
               const contact = contacts[contactValue!] ?? undefined;
               return (
@@ -256,78 +253,36 @@ export default class PickerScreen extends Component {
                 </View>
               );
             }}
-          >
-            {_.map(contacts, contact => (
-              <Picker.Item
-                key={contact.name}
-                value={contact.value}
-                label={contact.label}
-                renderItem={(contactValue, props) => {
-                  const contact = contacts[contactValue as number];
-                  return (
-                    <View
-                      style={{
-                        height: 56,
-                        borderBottomWidth: 1,
-                        borderColor: Colors.$backgroundNeutral
-                      }}
-                      paddingH-15
-                      row
-                      centerV
-                      spread
-                    >
-                      <View row centerV>
-                        <Avatar size={35} source={{uri: contact?.thumbnail}}/>
-                        <Text marginL-10 text70 $textDefault>
-                          {contact?.name}
-                        </Text>
-                      </View>
-                      {props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
-                    </View>
-                  );
-                }}
-                getItemLabel={contactValue => contacts[contactValue as number]?.name}
-              />
-            ))}
-          </Picker>
-
+            items={contacts}
+          />
           <Button
             label="Open Picker Manually"
             link
             style={{alignSelf: 'flex-start'}}
             onPress={() => this.picker.current?.openExpandable?.()}
           />
-
           <Text text60 marginT-s5>
             Different Field Types
           </Text>
           <Text text80 marginB-s5>
             (Form/Filter/Settings)
           </Text>
-
           <Picker
             value={this.state.filter}
             onChange={value => this.setState({filter: value})}
             placeholder="Filter posts"
             fieldType={Picker.fieldTypes.filter}
             marginB-s3
-          >
-            {filters.map(filter => (
-              <Picker.Item key={filter.value} {...filter}/>
-            ))}
-          </Picker>
-
+            items={filters}
+          />
           <Picker
             value={this.state.scheme}
             onChange={value => this.setState({scheme: value})}
             label="Color Scheme"
             placeholder="Filter posts"
             fieldType={Picker.fieldTypes.settings}
-          >
-            {schemes.map(scheme => (
-              <Picker.Item key={scheme.value} {...scheme}/>
-            ))}
-          </Picker>
+            items={schemes}
+          />
         </View>
       </ScrollView>
     );
diff --git a/demo/src/screens/realExamples/ProductPage/index.tsx b/demo/src/screens/realExamples/ProductPage/index.tsx
@@ -4,17 +4,17 @@ import {View, Text, Icon, Colors, Image, Button, Carousel, Picker, PickerValue}
 import _ from 'lodash';
 import Assets from '../../../assets/Assets';
 
-const colorOptions: {[key: string]: {name: string; color: string}} = {
-  red: {name: 'Red', color: Colors.red30},
-  green: {name: 'Green', color: Colors.green30},
-  blue: {name: 'Blue', color: Colors.blue30}
-};
+const colorOptions = [
+  {label: 'Red', value: 'red', color: Colors.red30},
+  {label: 'Green', value: 'green', color: Colors.green30},
+  {label: 'Blue', value: 'blue', color: Colors.blue30}
+];
 
-const sizeOptions = {
-  s: {name: 'Small'},
-  m: {name: 'Medium'},
-  l: {name: 'Large'}
-};
+const sizeOptions = [
+  {label: 'S', value: 's'},
+  {label: 'M', value: 'm'},
+  {label: 'L', value: 'l'}
+];
 
 const images = [
   'https://images.pexels.com/photos/3297502/pexels-photo-3297502.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
@@ -75,33 +75,26 @@ class Product extends Component {
 
           <View marginT-s2>
             <Picker
-              migrate
               value={selectedColor}
               onChange={(value: PickerValue) => this.setState({selectedColor: value})}
               trailingAccessory={
                 <Icon
                   {...{
                     width: 24,
                     height: 24,
-                    backgroundColor: colorOptions[selectedColor].color,
+                    backgroundColor: colorOptions[_.findIndex(colorOptions, {value: selectedColor})].color,
                     borderRadius: 12
                   }}
                 />
               }
-            >
-              {_.map(colorOptions, (colorOption, colorKey) => {
-                return <Picker.Item key={colorKey} value={colorKey} label={colorOption.name}/>;
-              })}
-            </Picker>
+              items={colorOptions}
+            />
+
             <Picker
-              migrate
               value={selectedSize}
               onChange={(value: PickerValue) => this.setState({selectedSize: value})}
-            >
-              {_.map(sizeOptions, (sizeOption, sizeKey) => {
-                return <Picker.Item key={sizeKey} value={sizeKey} label={sizeOption.name}/>;
-              })}
-            </Picker>
+              items={sizeOptions}
+            />
           </View>
 
           <Button label={'Add to Cart'}/>
diff --git a/webDemo/src/examples/Picker.tsx b/webDemo/src/examples/Picker.tsx
@@ -77,11 +77,8 @@ const PickerWrapper = () => {
           showSearch
           searchPlaceholder={'Search a language'}
           searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
-        >
-          {options.map(option => (
-            <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
-          ))}
-        </Picker>
+          items={options}
+        />
       </View>
       <Text text80BO center>
         Multi Value Picker
@@ -98,11 +95,8 @@ const PickerWrapper = () => {
           showSearch
           searchPlaceholder={'Search a filter'}
           searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
-        >
-          {filters.map(filter => (
-            <Picker.Item key={filter.value} value={filter.value} label={filter.label} disabled={filter.disabled}/>
-          ))}
-        </Picker>
+          items={filters}
+        />
       </View>
       <Text text80BO center>
         Dialog Picker
@@ -114,11 +108,8 @@ const PickerWrapper = () => {
           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>
+          items={schemes}
+        />
       </View>
     </View>
   );
