feat: visually hide search if less than five elements

bpmn-io · Mar 28, 2022 · 7d1bf1b · 7d1bf1b
1 parent 0b68fd1
commit 7d1bf1b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/src/append-menu/AppendMenu.js b/src/append-menu/AppendMenu.js
@@ -253,7 +253,7 @@ function AppendMenuComponent(props) {
     </div>
 
     <div class="cmd-change-menu__body">
-      <div class="cmd-change-menu__search">
+      <div class=${ clsx('cmd-change-menu__search', { hidden: props.entries.length < 5 }) }>
         <svg class="cmd-change-menu__search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
         </svg>

diff --git a/src/change-menu/ChangeMenu.css b/src/change-menu/ChangeMenu.css
@@ -61,6 +61,12 @@
   overflow: hidden;
 }
 
+.cmd-change-menu__search.hidden {
+  position: absolute;
+  height: 0;
+  top: -1000px;
+}
+
 .cmd-change-menu__search input {
   width: 100%;
   box-sizing: border-box;

diff --git a/src/element-template-chooser/ElementTemplateChooser.js b/src/element-template-chooser/ElementTemplateChooser.js
@@ -76,7 +76,7 @@ ElementTemplateChooser.prototype.open = function(templates) {
 
   const renderFn = (onClose) => html`
     <${TemplateComponent}
-      templates=${ templates }
+      entries=${ templates }
       onClose=${ onClose }
     />
   `;
@@ -98,7 +98,7 @@ function TemplateComponent(props) {
 
   const [ value, setValue ] = useState('');
 
-  const [ templates, setTemplates ] = useState(props.templates);
+  const [ templates, setTemplates ] = useState(props.entries);
   const [ keyboardSelectedTemplate, setKeyboardSelectedTemplate ] = useState(null);
   const [ mouseSelectedTemplate, setMouseSelectedTemplate ] = useState(null);
   const [ selectedTemplate, setSelectedTemplate ] = useState(null);
@@ -113,7 +113,7 @@ function TemplateComponent(props) {
       return [ template.name, template.description || '' ].join('---').toLowerCase().includes(value.toLowerCase());
     };
 
-    const templates = props.templates.filter(filter);
+    const templates = props.entries.filter(filter);
 
     if (!templates.includes(keyboardSelectedTemplate)) {
       setKeyboardSelectedTemplate(templates[0]);
@@ -124,7 +124,7 @@ function TemplateComponent(props) {
     }
 
     setTemplates(templates);
-  }, [ value, keyboardSelectedTemplate, mouseSelectedTemplate, props.templates ]);
+  }, [ value, keyboardSelectedTemplate, mouseSelectedTemplate, props.entries ]);
 
 
   // focus input on initial mount
@@ -203,7 +203,7 @@ function TemplateComponent(props) {
     </div>
 
     <div class="cmd-change-menu__body">
-      <div class="cmd-change-menu__search">
+      <div class=${ clsx('cmd-change-menu__search', { hidden: props.entries.length < 5 }) }>
         <svg class="cmd-change-menu__search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
         </svg>

diff --git a/src/replace-menu/ReplaceMenu.js b/src/replace-menu/ReplaceMenu.js
@@ -275,7 +275,7 @@ function ReplaceMenuComponent(props) {
   </div>
 
   <div class="cmd-change-menu__body">
-    <div class="cmd-change-menu__search">
+    <div class=${ clsx('cmd-change-menu__search', { hidden: props.entries.length < 5 }) }>
       <svg class="cmd-change-menu__search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
       </svg>