ChipScreen - adding example for dynamic label (#1253)

Inbal-Tish · ethanshar · web-flow · commit 3e766607826d · 2021-04-08T16:13:27.000+03:00
* ChipScreen - adding example for onPress to open Dialog and dynamic label.
WheelPickerDialog - container self alignment and code cleanup.

* example title

* counter as badge example name

* moving default values out of static

* Chip - adding 'useCounter' boolean

* WheelPicker - type fix

Co-authored-by: Ethan Sharabi &lt;ethans@wix.com&gt;
diff --git a/demo/src/screens/componentScreens/ChipScreen.tsx b/demo/src/screens/componentScreens/ChipScreen.tsx
@@ -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={{
diff --git a/generatedTypes/components/chip/index.d.ts b/generatedTypes/components/chip/index.d.ts
@@ -52,6 +52,10 @@ export declare type ChipProps = ViewProps & TouchableOpacityProps & {
      * Badge props object
      */
     badgeProps?: BadgeProps;
+    /**
+     * Display badge as counter (no background)
+     */
+    useCounter?: boolean;
     /**
      * Avatar props object
      */
@@ -142,6 +146,10 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
      * Badge props object
      */
     badgeProps?: BadgeProps | undefined;
+    /**
+     * Display badge as counter (no background)
+     */
+    useCounter?: boolean | undefined;
     /**
      * Avatar props object
      */
diff --git a/generatedTypes/incubator/WheelPicker/index.d.ts b/generatedTypes/incubator/WheelPicker/index.d.ts
@@ -1,56 +1,49 @@
-/// <reference types="react" />
-import {TextStyle} from 'react-native';
-import {ItemProps} from './Item';
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { ItemProps } from './Item';
 export interface WheelPickerProps {
-  /**
-   * Data source for WheelPicker
-   */
-  items?: ItemProps[];
-  /**
-   * Describe the height of each item in the WheelPicker
-   * default value: 44
-   */
-  itemHeight?: number;
-  /**
-   * Describe the number of rows visible
-   * default value: 5
-   */
-  numberOfVisibleRows?: number;
-  /**
-   * Text color for the focused row
-   */
-  activeTextColor?: string;
-  /**
-   * Text color for other, non-focused rows
-   */
-  inactiveTextColor?: string;
-  /**
-   * Row text style
-   */
-  textStyle?: TextStyle;
-  /**
-   * Event, on active row change
-   */
-  onChange?: (item: string | undefined, index: number) => void;
-  /**
-   * Container's ViewStyle, height is computed according to itemHeight * numberOfVisibleRows
-   */
-  style?: Omit<ViewStyle, 'height'>;
-  /**
-   * Support passing items as children props
-   */
-  children?: JSX.Element | JSX.Element[];
-  /**
-   * WheelPicker initial value, can be ItemProps.value, number as index
-   */
-  selectedValue?: ItemProps | string | number;
+    /**
+     * Data source for WheelPicker
+     */
+    items?: ItemProps[];
+    /**
+     * Describe the height of each item in the WheelPicker
+     * default value: 44
+     */
+    itemHeight?: number;
+    /**
+     * Describe the number of rows visible
+     * default value: 5
+     */
+    numberOfVisibleRows?: number;
+    /**
+     * Text color for the focused row
+     */
+    activeTextColor?: string;
+    /**
+     * Text color for other, non-focused rows
+     */
+    inactiveTextColor?: string;
+    /**
+     * Row text style
+     */
+    textStyle?: TextStyle;
+    /**
+     * Event, on active row change
+     */
+    onChange?: (item: string | number, index: number) => void;
+    /**
+     * Container's ViewStyle, height is computed according to itemHeight * numberOfVisibleRows
+     */
+    style?: Omit<ViewStyle, 'height'>;
+    /**
+     * Support passing items as children props
+     */
+    children?: JSX.Element | JSX.Element[];
+    /**
+     * WheelPicker initial value, can be ItemProps.value, number as index
+     */
+    selectedValue: ItemProps | number | string;
 }
-declare const WheelPicker: ({
-  items,
-  itemHeight,
-  activeTextColor,
-  inactiveTextColor,
-  textStyle,
-  onChange: onChangeEvent
-}: WheelPickerProps) => JSX.Element;
+declare const WheelPicker: React.MemoExoticComponent<({ items: propItems, itemHeight, numberOfVisibleRows, activeTextColor, inactiveTextColor, textStyle, onChange, style, children, selectedValue }: WheelPickerProps) => JSX.Element>;
 export default WheelPicker;
diff --git a/generatedTypes/incubator/WheelPicker/usePresenter.d.ts b/generatedTypes/incubator/WheelPicker/usePresenter.d.ts
@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { ItemProps } from './Item';
-declare type ItemValueTypes = ItemProps | number | string;
-export { ItemValueTypes };
+export declare type ItemValueTypes = ItemProps | number | string;
 declare type PropTypes = {
     selectedValue: ItemValueTypes;
     children?: JSX.Element | JSX.Element[];
diff --git a/src/components/chip/index.tsx b/src/components/chip/index.tsx
@@ -62,7 +62,10 @@ export type ChipProps = ViewProps & TouchableOpacityProps & {
    * Badge props object
    */
   badgeProps?: BadgeProps;
-
+  /**
+   * Display badge as counter (no background)
+   */
+  useCounter?: boolean;
   //AVATAR
   /**
    * Avatar props object
@@ -115,6 +118,8 @@ export type ChipProps = ViewProps & TouchableOpacityProps & {
 }
 export type ChipPropTypes = ChipProps; //TODO: remove after ComponentPropTypes deprecation;
 
+const DEFAULT_SIZE = 26;
+
 /**
  * @description: Chip component
  * @extends: TouchableOpacity
@@ -125,11 +130,12 @@ const Chip = ({
   avatarProps,
   backgroundColor,
   badgeProps,
-  borderRadius,
+  useCounter,
+  borderRadius = BorderRadiuses.br100,
   containerStyle,
   onDismiss,
   dismissColor,
-  dismissIcon,
+  dismissIcon = Assets.icons.x,
   dismissIconStyle,
   dismissContainerStyle,
   iconProps,
@@ -140,8 +146,8 @@ const Chip = ({
   labelStyle,
   onPress,
   resetSpacings,
-  size,
-  useSizeAsMinimum,
+  size = DEFAULT_SIZE,
+  useSizeAsMinimum = true,
   testID,
   ...others
 }: ChipProps) => {
@@ -166,6 +172,7 @@ const Chip = ({
       <Badge
         size={BADGE_SIZES.default}
         testID={`${testID}.counter`}
+        backgroundColor={useCounter ? 'transparent' : undefined}
         {...badgeProps}
         // @ts-ignore
         containerStyle={[getMargins('badge'), badgeProps.containerStyle]}
@@ -306,12 +313,6 @@ const Chip = ({
 };
 
 Chip.displayName = 'Chip';
-Chip.defaultProps = {
-  borderRadius: BorderRadiuses.br100,
-  dismissIcon: Assets.icons.x,
-  useSizeAsMinimum: true,
-  size: 26
-};
 
 const styles = StyleSheet.create({
   container: {
diff --git a/src/components/wheelPickerDialog/index.js b/src/components/wheelPickerDialog/index.js
