Simplify custom tag list component demo

i-like-robots · Jun 17, 2024 · d85141e · d85141e
1 parent 9f8a69d
commit d85141e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 36 deletions.
diff --git a/example/src/demos/CustomTagList.jsx b/example/src/demos/CustomTagList.jsx
@@ -2,10 +2,6 @@ import React, { useCallback, useState } from 'react'
 import { ReactTags } from '../../../src'
 import { suggestions } from '../countries'
 
-function isValid(value) {
-  return /^[a-z]{4,12}$/i.test(value)
-}
-
 export function CustomTagList() {
   const [selected, setSelected] = useState([])
 
@@ -23,42 +19,33 @@ export function CustomTagList() {
     [selected]
   )
 
-  const onValidate = useCallback((value) => isValid(value), [])
+  function groupChildrenByFirstCharacter(children) {
+    const groups = {}
 
-  function getTagByTagKey(key, child) {
-    return {
-      suggestion: suggestions.find(
-        (suggestion) => `${suggestion.value}-${suggestion.label}` === key
-      ),
-      child,
-    }
-  }
+    children.forEach((child) => {
+      const suggestion = suggestions.find((suggestion) =>
+        child.key.endsWith(`${suggestion.value}-${suggestion.label}`)
+      )
+      const firstChar = suggestion.label.charAt(0).toUpperCase()
+
+      groups[firstChar] ??= []
+      groups[firstChar].push({ suggestion, child })
+    })
 
-  function groupChildrenByFirstCharacter(mappedSuggestions) {
-    return mappedSuggestions.reduce((acc, { suggestion, child }) => {
-      if (suggestion) {
-        const firstChar = suggestion.label.charAt(0).toUpperCase()
-        if (!acc[firstChar]) {
-          acc[firstChar] = []
-        }
-        acc[firstChar].push({ suggestion, child })
-      }
-      return acc
-    }, {})
+    return groups
   }
 
-  function CustomTagList({ children, label, classNames, listRef }) {
-    const mappedSuggestions = children.map((child) => getTagByTagKey(child.key, child))
-    const groupedSuggestions = groupChildrenByFirstCharacter(mappedSuggestions)
+  function CustomTagList({ children, classNames, ...tagListProps }) {
+    const groupedTags = groupChildrenByFirstCharacter(React.Children.toArray(children))
 
     return (
       <>
-        {Object.keys(groupedSuggestions).map((key) => (
+        {Object.keys(groupedTags).map((key) => (
           <div key={key} className="tag-group">
-            <h2>Countries starting with the letter "{key}"</h2>
-            <ul className={classNames.tagList} aria-label={label} ref={listRef} role="list">
-              {groupedSuggestions[key].map(({ suggestion, child }) => (
-                <li className={classNames.tagListItem} key={suggestion.value} role="listitem">
+            <p>{`Countries starting with the letter "${key}":`}</p>
+            <ul className={classNames.tagList} {...tagListProps}>
+              {groupedTags[key].map(({ suggestion, child }) => (
+                <li className={classNames.tagListItem} key={suggestion.value}>
                   {child}
                 </li>
               ))}
@@ -73,14 +60,12 @@ export function CustomTagList() {
     <>
       <p>Select the countries you have visited below. They will be grouped alphabetically:</p>
       <ReactTags
-        allowNew
         ariaDescribedBy="custom-tagList-description"
         collapseOnSelect
         id="custom-tagList-demo"
         labelText="Enter new tags"
         onAdd={onAdd}
         onDelete={onDelete}
-        onValidate={onValidate}
         selected={selected}
         suggestions={suggestions}
         renderTagList={CustomTagList}

diff --git a/example/src/styles.css b/example/src/styles.css
@@ -189,8 +189,9 @@
   margin: 0;
 }
 
-.tag-group > h2 {
-  font-size: 1rem;
+.tag-group > p {
+  margin: 0;
+  font-size: 0.8125rem;
   line-height: 1.5rem;
   color: #00000080;
 }