Support invalid state for ChipsInput chips

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {View, Text, Card, TextField, Button, Colors, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
+import _ from 'lodash';
 
 export default class ChipsInputScreen extends Component {
   state = {
@@ -21,9 +22,28 @@ export default class ChipsInputScreen extends Component {
             containerStyle: {borderWidth: 0},
             dismissColor: Colors.white
           }}
+          invalidChipProps={{
+            dismissColor: Colors.red30,
+            labelStyle: {color: Colors.red30},
+            backgroundColor: Colors.white,
+            containerStyle: {borderColor: Colors.red30}
+          }}
           chips={this.state.chips}
           leadingAccessory={<Text>TO: </Text>}
           onChange={newChips => {
+            _.chain(newChips)
+              .groupBy('label')
+              .forEach(group => {
+                if (group.length === 1) {
+                  delete group[0].invalid;
+                } else {
+                  group[group.length - 1].invalid = true;
+                }
+              })
+              .values()
+              .flatten()
+              .value();
+
             this.setState({chips: newChips});
           }}
         />

generatedTypes/src/incubator/ChipsInput/index.d.ts

@@ -5,19 +5,26 @@ export declare enum ChipsInputChangeReason {
     Added = "added",
     Removed = "removed"
 }
+declare type ChipsInputChipProps = ChipProps & {
+    invalid?: boolean;
+};
 export declare type ChipsInputProps = Omit<TextFieldProps, 'ref'> & {
     /**
      * Chip items to render in the input
      */
-    chips?: ChipProps[];
+    chips?: ChipsInputChipProps[];
     /**
      * A default set of chip props to pass to all chips
      */
     defaultChipProps?: ChipProps;
+    /**
+     * A default set of chip props to pass to all invalid chips
+     */
+    invalidChipProps?: ChipProps;
     /**
      * Change callback for when chips changed (either added or removed)
      */
-    onChange?: (chips: ChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void;
+    onChange?: (chips: ChipsInputChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void;
     /**
      * Maximum chips
      */
@@ -27,15 +34,19 @@ declare const _default: React.ForwardRefExoticComponent<Omit<TextFieldProps, "re
     /**
      * Chip items to render in the input
      */
-    chips?: ChipProps[] | undefined;
+    chips?: ChipsInputChipProps[] | undefined;
     /**
      * A default set of chip props to pass to all chips
      */
     defaultChipProps?: ChipProps | undefined;
+    /**
+     * A default set of chip props to pass to all invalid chips
+     */
+    invalidChipProps?: ChipProps | undefined;
     /**
      * Change callback for when chips changed (either added or removed)
      */
-    onChange?: ((chips: ChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void) | undefined;
+    onChange?: ((chips: ChipsInputChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void) | undefined;
     /**
      * Maximum chips
      */

src/incubator/ChipsInput/index.tsx

@@ -13,19 +13,25 @@ export enum ChipsInputChangeReason {
   Removed = 'removed'
 }
 
+type ChipsInputChipProps = ChipProps & {invalid?: boolean};
+
 export type ChipsInputProps = Omit<TextFieldProps, 'ref'> & {
   /**
    * Chip items to render in the input
    */
-  chips?: ChipProps[];
+  chips?: ChipsInputChipProps[];
   /**
    * A default set of chip props to pass to all chips
    */
   defaultChipProps?: ChipProps;
+  /**
+   * A default set of chip props to pass to all invalid chips
+   */
+  invalidChipProps?: ChipProps;
   /**
    * Change callback for when chips changed (either added or removed)
    */
-  onChange?: (chips: ChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void;
+  onChange?: (chips: ChipsInputChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void;
   /**
    * Maximum chips
    */
@@ -34,7 +40,16 @@ export type ChipsInputProps = Omit<TextFieldProps, 'ref'> & {
 
 const ChipsInput = (props: ChipsInputProps, refToForward: React.Ref<any>) => {
   const fieldRef = useCombinedRefs(refToForward);
-  const {chips = [], defaultChipProps, leadingAccessory, onChange, fieldStyle, maxChips, ...others} = props;
+  const {
+    chips = [],
+    defaultChipProps,
+    invalidChipProps,
+    leadingAccessory,
+    onChange,
+    fieldStyle,
+    maxChips,
+    ...others
+  } = props;
   const [markedForRemoval, setMarkedForRemoval] = useState<number | undefined>(undefined);
   const fieldValue = useRef(others.value);
 
@@ -110,6 +125,7 @@ const ChipsInput = (props: ChipsInputProps, refToForward: React.Ref<any>) => {
               marginB-s2
               dismissIcon={removeIcon}
               {...defaultChipProps}
+              {...(chip.invalid ? invalidChipProps : undefined)}
               {...chip}
               onPress={onChipPress}
               onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined}