From 6ced1563424ab5bfdaa0d4cb88fa3a2cc04cd5e1 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Fri, 18 Aug 2023 11:05:17 +0800
Subject: [PATCH] docs: add icon search input (#6828)

* docs: add icon search input

* docs: add affix for search input
---
 site/src/layouts/header/SearchBox.vue         |  2 +-
 site/src/theme/static/common.less             |  5 --
 site/src/theme/static/icons.less              | 14 ++++++
 .../template/IconDisplay/CopyableIcon.vue     |  4 +-
 site/src/theme/template/IconDisplay/index.jsx | 48 +++++++++++++------
 5 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/site/src/layouts/header/SearchBox.vue b/site/src/layouts/header/SearchBox.vue
index c26e10020..ad0456bed 100644
--- a/site/src/layouts/header/SearchBox.vue
+++ b/site/src/layouts/header/SearchBox.vue
@@ -5,7 +5,7 @@
       ref="inputRef"
       :placeholder="searchPlaceholder"
       @focus="triggerFocus(true)"
-      @blue="triggerFocus(false)"
+      @blur="triggerFocus(false)"
     ></a-input>
   </div>
 </template>
diff --git a/site/src/theme/static/common.less b/site/src/theme/static/common.less
index 8bdd553cf..d0be99440 100644
--- a/site/src/theme/static/common.less
+++ b/site/src/theme/static/common.less
@@ -46,11 +46,6 @@ a {
   &:hover &-inner {
     overflow-y: auto;
   }
-
-  > div,
-  > div > div {
-    height: 100%;
-  }
 }
 
 .aside-container {
diff --git a/site/src/theme/static/icons.less b/site/src/theme/static/icons.less
index 0440d22d5..91f463e39 100644
--- a/site/src/theme/static/icons.less
+++ b/site/src/theme/static/icons.less
@@ -86,3 +86,17 @@ ul.anticons-list {
   background: #f5f5f5;
   border-radius: 2px;
 }
+
+.icons-affix {
+  display: flex;
+  justify-content: space-between;
+  transition: all 0.25s;
+}
+
+.icons-affixed {
+  padding: 12px;
+  margin: -8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color-base);
+  background-color: var(--body-background);
+}
diff --git a/site/src/theme/template/IconDisplay/CopyableIcon.vue b/site/src/theme/template/IconDisplay/CopyableIcon.vue
index ee63dcf8a..a6124ae25 100644
--- a/site/src/theme/template/IconDisplay/CopyableIcon.vue
+++ b/site/src/theme/template/IconDisplay/CopyableIcon.vue
@@ -22,8 +22,8 @@ const allIcons = AntdIcons;
 const kebabCase = function kebabCase(str) {
   return str
     .split(/(?=[A-Z])/)
-    .join('-')
-    .toLowerCase();
+    .map(s => s.replace(s[0], s[0].toUpperCase()))
+    .join('');
 };
 
 export default defineComponent({
diff --git a/site/src/theme/template/IconDisplay/index.jsx b/site/src/theme/template/IconDisplay/index.jsx
index 216590f0f..66c5dc380 100644
--- a/site/src/theme/template/IconDisplay/index.jsx
+++ b/site/src/theme/template/IconDisplay/index.jsx
@@ -24,13 +24,17 @@ const IconDisplay = defineComponent({
   data() {
     return {
       theme: ThemeType.Outlined,
+      searchVal: '',
+      searchBarAffixed: false,
     };
   },
   methods: {
     handleChangeTheme(e) {
       this.theme = e.target.value;
     },
-
+    handleAffixChange(affixed) {
+      this.searchBarAffixed = affixed;
+    },
     renderCategories() {
       const { theme } = this;
 
@@ -42,7 +46,10 @@ const IconDisplay = defineComponent({
             category: key,
             icons: iconList
               .map(iconName => iconName + theme)
-              .filter(iconName => allIcons[iconName]),
+              .filter(iconName => {
+                if (iconName.toLowerCase().includes(this.searchVal.trim().toLowerCase()))
+                  return allIcons[iconName];
+              }),
           };
         })
         .filter(({ icons }) => !!icons.length)
@@ -62,18 +69,31 @@ const IconDisplay = defineComponent({
     return (
       <div>
         <h3 style="margin: 1.6em 0 .6em;">{this.$t('app.docs.components.icon.pick-theme')}</h3>
-        <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
-          <a-radio-button value={ThemeType.Outlined}>
-            <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
-          </a-radio-button>
-          <a-radio-button value={ThemeType.Filled}>
-            <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
-          </a-radio-button>
-          <a-radio-button value={ThemeType.TwoTone}>
-            <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
-          </a-radio-button>
-        </a-radio-group>
-        {this.renderCategories()}
+        <a-affix offset-top={32} onChange={this.handleAffixChange}>
+          <div class={this.searchBarAffixed ? 'icons-affix icons-affixed' : 'icons-affix'}>
+            <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
+              <a-radio-button value={ThemeType.Outlined}>
+                <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
+              </a-radio-button>
+              <a-radio-button value={ThemeType.Filled}>
+                <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
+              </a-radio-button>
+              <a-radio-button value={ThemeType.TwoTone}>
+                <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
+              </a-radio-button>
+            </a-radio-group>
+            <a-input-search
+              style="flex: 1 1 0%; margin-inline-start: 16px;"
+              placeholder={this.$t('app.docs.components.icon.search.placeholder')}
+              v-model:value={this.searchVal}
+            />
+          </div>
+        </a-affix>
+        {this.renderCategories().length === 0 ? (
+          <a-empty style="padding: 12px 0;" />
+        ) : (
+          this.renderCategories()
+        )}
       </div>
     );
   },