add tag for newly added options when create option is enabled

bmartel · Aug 8, 2021 · dc1bfc6 · dc1bfc6
1 parent 140ee16
commit dc1bfc6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -82,10 +82,10 @@ const _options = items.map((label) => ({ label, value: label.toLowerCase() }))
 const StatefulMultiSelect: FC<
   Omit<MultiSelectProps, 'onChange' | 'value'> &
     Partial<Pick<MultiSelectProps, 'onChange' | 'value'>>
-> = ({ onChange: _onChange, value: _value, ...props }) => {
+> = ({ onChange: _onChange, value: _value, options: __options, ...props }) => {
   const { value, options, onChange } = useMultiSelect({
     value: _value || props.single ? '' : [],
-    options: props.options!,
+    options: __options!,
     onChange: _onChange,
   })
 

diff --git a/src/MultiSelect.tsx b/src/MultiSelect.tsx
@@ -109,7 +109,7 @@ export const SelectLabel = memo<HTMLChakraProps<'label'>>((props) => {
 SelectLabel.displayName = 'SelectLabel'
 
 export const SelectOptionItem = memo<SelectOptionItemProps>(
-  ({ value, label, index, selected, ...props }) => {
+  ({ value, label, index, selected, created, ...props }) => {
     const { highlightedRef, option, ...itemProps } = useSelectItem({
       value,
       label,
@@ -123,7 +123,16 @@ export const SelectOptionItem = memo<SelectOptionItemProps>(
         {...props}
         {...itemProps}
       >
-        {option?.label || value}
+        <HStack justifyContent='space-between' w='full'>
+          <Box>{option?.label || value}</Box>
+          {!!created && (
+            <Tag flexShrink={0}>
+              <TagLabel fontSize='xs' fontWeight='bold'>
+                New
+              </TagLabel>
+            </Tag>
+          )}
+        </HStack>
       </chakra.li>
     )
   }
@@ -148,6 +157,7 @@ export const SelectList = memo(() => {
         value: optionItem.value,
         label: optionItem.label || labelFromValue(optionItem.value),
         selected: optionItem.selected,
+        created: optionItem.created,
         index,
       }
     },