use custom select

district0x · Sep 6, 2023 · a340b4c · a340b4c
1 parent 8d66879
commit a340b4c
Show file tree

Hide file tree

Showing 13 changed files with 520 additions and 156 deletions.
diff --git a/package.json b/package.json
@@ -27,15 +27,12 @@
     "jquery": "3.6.1",
     "jsonwebtoken": "9.0.0",
     "jwt-decode": "3.1.2",
-    "karma": "6.3.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "2.0.0",
-    "karma-cljs-test": "0.1.0",
     "react-infinite-scroller": "1.2.6",
     "react-masonry-component": "6.3.0",
-    "react": "16.4.2",
-    "react-dom": "16.4.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-infinite": "0.13.0",
+    "react-select": "5.7.4",
     "twitter-api-sdk": "1.2.1",
     "web3": "1.7.3",
     "xregexp": "5.1.1"
@@ -50,6 +47,10 @@
     "@truffle/hdwallet-provider": "2.1.9",
     "bootstrap": "4.2.1",
     "breakpoint-sass": "2.7.1",
+    "karma": "6.3.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-cli": "2.0.0",
+    "karma-cljs-test": "0.1.0",
     "sass": "1.63.6",
     "dotenv": "16.0.3",
     "jsedn": "0.4.1",

diff --git a/resources/scss/components/form.scss b/resources/scss/components/form.scss
@@ -27,7 +27,7 @@
 	}
 }
 .textField {
-	textarea {
+	textarea, input {
 		background: $bgSite;
 	}
 }
@@ -42,19 +42,43 @@
 	text-indent: -999em;
 }
 
-
-.selectForm {
-//	align-items: center;
-//	display: flex;
-	.input-group {
-		height: 100%;
-		select {
+.selectForm.custom-select {
+	padding: 0;
+	line-height: 50px;
+	letter-spacing: 1.25px;
+	font-weight: 700;
+	height: 56px;
+	.options {
 			height: 100%;
-			width: 100%;
-			z-index: 1;
-			position: relative;
+		.select__control{
+			height: 100%;
+			line-height: 100%;
+			background-color: $bgSite;
+			border: 3px solid $lilac;
+			border-radius: 7px;
+			box-shadow: none;
+			-webkit-transition: all 0s;
+			transition: all 0s;
+		}
+		font-size: 14px;
+		.select__value-container {
+			font-weight: normal;
+			padding: 2px 22px;
 		}
-		&.options::after {
+		.select__single-value,.select__option {
+			color: $blackWhite;
+			background-color: $bgSite;
+			&.select__option--is-focused {
+				background-color: $bgCard;
+			}
+		}
+		.select__menu {
+			border: 3px solid #a478f9;
+			border-radius: 7px;
+			background-color: $bgSite;
+		}
+		&::after {
+			pointer-events: none;
 			position: absolute;
 			content: "";
 			top: 50%;
@@ -176,69 +200,6 @@
 
 }
 
-/* Style items (options): */
-.select-items,
-.selectAdmin-items {
-	position: absolute;
-	top: calc(100% + 11.59px);
-	left: -3px;
-	z-index: 99;
-	width: calc(100% + 6px);
-	height: 196px;
-	border: 3px solid $lilac;
-	border-radius: 7px;
-	overflow: auto;
-	background-color: $bgSite;
-	/* style the items (options), including the selected item: */
-	div,
-	a {
-		width: 100%;
-		height: 46px;
-		line-height: 46px;
-		color: $blackWhite;
-		font-size: 12px;
-		letter-spacing: 1.25px;
-		font-weight: $bold;
-		padding: 0 18.83px;
-		cursor: pointer;
-		background-color: $bgSite;
-		display: block;
-		&:hover,
-		&.same-as-selected {
-			background-color: $bgCard;
-		}
-	}
-	/* Hide the items when the select box is closed: */
-	&.select-hide {
-		display: none;
-	}
-
-	/* width */
-	&::-webkit-scrollbar {
-		width: 10px;
-	}
-
-	/* Track */
-	&::-webkit-scrollbar-track {
-		background: rgba($lilac, 0.2);
-		border-radius: 3.5px;
-	}
-
-	/* Handle */
-	&::-webkit-scrollbar-thumb {
-		background: $lilac;
-		border-radius: 3.5px;
-	}
-
-	/* Handle on hover */
-	&::-webkit-scrollbar-thumb:hover {
-		background: $textColor;
-	}
-}
-.selectAdmin-items {
-	height: auto;
-}
-
 
 /* Customize the label (the container) */
 .checkField {

diff --git a/resources/scss/layouts/admin.scss b/resources/scss/layouts/admin.scss
@@ -6,8 +6,8 @@
 			font-size: 13px;
 			font-weight: $regular;
 		}
-		select {
-			width: 100%;
+		.custom-select .options .select__value-container {
+			font-weight: bold;
 		}
 	}
 	.contentApprovalFeed {
@@ -29,6 +29,11 @@
 			}
 		}
 	}
+	.admin-items {
+		&.select-hide {
+			display: none;
+		}
+	}
 	.contentApproval {
 		width: 100%;
 		margin-bottom: 14px;
@@ -355,6 +360,7 @@
 			}
 		}
 		.formRounds {
+			padding: 19.86px 15px 18.58px;
 			.field {
 				.inputContainer {
 					margin-left: 15px;
@@ -407,7 +413,7 @@
 			line-height: normal;
 			padding: 0;
 
-			.selectAdmin-items {
+			.admin-items {
 				display: block;
 				position: relative;
 				top: auto;
@@ -420,6 +426,7 @@
 				border: none;
 				overflow: initial;
 				a {
+					display: block;
 					width: auto;
 					height: auto;
 					background: none;

diff --git a/resources/scss/layouts/send-support.scss b/resources/scss/layouts/send-support.scss
@@ -70,6 +70,9 @@
 				line-height: 38px;
 				padding: 0 17px;
 				font-size: 13px;
+				&.disabled {
+					background: $disabled;
+				}
 			}
 			.select-selected {
 				padding: 0 40px 0 17px;

diff --git a/src-cljsjs/cljsjs/react_select.cljs b/src-cljsjs/cljsjs/react_select.cljs
@@ -0,0 +1,4 @@
+(ns cljsjs.react-select
+  (:require ["react-select" :as rs]))
+
+(js/goog.exportSymbol "react_select" rs)
diff --git a/src/streamtide/ui/admin/black_listing/page.cljs b/src/streamtide/ui/admin/black_listing/page.cljs
@@ -3,7 +3,7 @@
   It shows a list of all users where and admin can blacklist or whitelist them"
   (:require
     [district.graphql-utils :as gql-utils]
-    [district.ui.component.form.input :refer [text-input pending-button select-input]]
+    [district.ui.component.form.input :refer [text-input pending-button]]
     [district.ui.component.page :refer [page]]
     [district.ui.graphql.events :as graphql-events]
     [district.ui.graphql.subs :as gql]
@@ -21,9 +21,9 @@
 
 (def page-size 6)
 
-(def users-order [{:key "creation-date/desc" :value "Newest"}
-                  {:key "creation-date/asc" :value "Oldest"}
-                  {:key "username/asc" :value "Username"}])
+(def users-order [{:value "creation-date/desc" :label "Newest"}
+                  {:value "creation-date/asc" :label "Oldest"}
+                  {:value "username/asc" :label "Username"}])
 
 (defn build-users-query [{:keys [:search-term :order-key]} after]
   (let [[order-by order-dir] ((juxt namespace name) (keyword order-key))]
@@ -109,7 +109,7 @@
 
 (defmethod page :route.admin/black-listing []
   (let [form-data (r/atom {:search-term ""
-                           :order-key (:key (first users-order))})]
+                           :order-key (:value (first users-order))})]
     (fn []
       (let [users-search (subscribe [::gql/query {:queries [(build-users-query @form-data nil)]}
                                       {:id @form-data}])]

diff --git a/src/streamtide/ui/components/admin_layout.cljs b/src/streamtide/ui/components/admin_layout.cljs
@@ -6,7 +6,8 @@
     [re-frame.core :refer [subscribe dispatch]]
     [streamtide.ui.components.app-layout :refer [app-layout]]
     [streamtide.ui.components.general :refer [nav-anchor]]
-    [streamtide.ui.utils :refer [check-session]]))
+    [streamtide.ui.utils :refer [check-session]]
+    [streamtide.ui.components.custom-select :refer [react-select]]))
 
 
 (def admin-nav-menu-items [{:text "Grant Approval Feeds"
@@ -24,20 +25,22 @@
     (fn []
       (check-session)
       [:<>
-       [:div.selectAdmin-selected.d-lg-none
-        [:select
-         {:on-change (fn [item]
-                       (let [val (-> item .-target .-value)]
+       [:div.custom-select.selectForm.d-lg-none
+        (let [options (doall (map
+                               (fn [{:keys [:text :route]}]
+                                 {:value (str (symbol route))
+                                  :label text})
+                               admin-nav-menu-items))]
+        [react-select
+         {:class "options"
+          :on-change (fn [selected-entry]
+                       (let [val (.-value selected-entry)]
                          (dispatch [::router-events/navigate (keyword val)])))
-          :value (-> @(subscribe [::router-subs/active-page]) :name symbol str)}
-         (doall (map-indexed
-                  (fn [idx {:keys [:text :route]}]
-                    [:option
-                     {:key (str idx)
-                      :value (str (symbol route))}
-                     text])
-                  admin-nav-menu-items))]]
-       [:div.selectAdmin-items.select-hide
+          :value (let [value (-> @(subscribe [::router-subs/active-page]) :name symbol str)
+                       label (:label (first (filter #(= value (:value %)) options)))]
+                   {:value value :label label})
+          :options options}])]
+       [:div.admin-items.select-hide.inputField
         (doall (map-indexed
                  (fn [idx {:keys [:text :route]}]
                    [nav-anchor (merge {:key (str idx) :route route}
@@ -56,7 +59,7 @@
          [:div.container
           [:h2.titlePage "Admin"]]]
         [:div.contentAdmin.container
-         [:div.menuAdmin.inputField.simple
+         [:div.menuAdmin
           [admin-nav-menu]]
          [:div.containerAdmin
           (map-indexed (fn [index item]

diff --git a/src/streamtide/ui/components/custom_select.cljs b/src/streamtide/ui/components/custom_select.cljs
@@ -0,0 +1,29 @@
+(ns streamtide.ui.components.custom-select
+  (:require ["react-select" :default Select]
+            [district.ui.component.form.input :refer [assoc-by-path get-by-path]]
+            [reagent.core :as r]))
+
+(defn react-select [{:keys [:on-change :options :class :value]}]
+  (r/create-element
+    Select
+    #js {:className class
+         :classNamePrefix "select"
+         :isSearchable false
+         :components #js {:DropdownIndicator #()
+                          :IndicatorSeparator #()}
+         :dropdownindicator nil
+         :onChange on-change
+         :value (clj->js value)
+         :options (clj->js options)}))
+
+(defn select [{:keys [:form-data :id :options :on-change :class]}]
+    (react-select {:options options
+                   :class class
+                   :on-change (fn [selected-entry]
+                                (let [val (.-value selected-entry)
+                                      label (.-label selected-entry)]
+                                  (swap! form-data assoc-by-path id val)
+                                  (when on-change (on-change {:value val :label label}))))
+                   :value (let [value (get-by-path @form-data id)
+                                label (:label (first (filter #(= value (:value %)) options)))]
+                            {:value value :label label})}))
diff --git a/src/streamtide/ui/components/search.cljs b/src/streamtide/ui/components/search.cljs
@@ -1,8 +1,9 @@
 (ns streamtide.ui.components.search
   (:require
     [clojure.string :as str]
-    [district.ui.component.form.input :refer [text-input select-input]]
-    [reagent.core :as r]))
+    [district.ui.component.form.input :refer [text-input]]
+    [reagent.core :as r]
+    [streamtide.ui.components.custom-select :refer [select]]))
 
 (defn search-tools [{:keys [:form-data :search-id]} & others]
   "display a search form"
@@ -33,14 +34,12 @@
           :on-click #(let [input (get @search-input-form-data search-id)]
                         (swap! form-data assoc search-id input)
                         (when on-search-change (on-search-change input)))}]]
-       [:div.custom-select.selectForm.inputField
-        ;; TODO use custom select for prettifying
-        [select-input {:form-data form-data
-                       :id :order-key
-                       :group-class :options
-                       :value js/undefined
-                       :options select-options
-                       :on-change on-select-change}]]
+       [:div.custom-select.selectForm
+        [select {:form-data form-data
+                 :id :order-key
+                 :options select-options
+                 :class "options"
+                 :on-change on-select-change}]]
        (map-indexed (fn [index item]
                       (with-meta item {:key (keyword "c" index)}))
                     others)])))
diff --git a/src/streamtide/ui/grants/page.cljs b/src/streamtide/ui/grants/page.cljs
@@ -18,9 +18,9 @@
 
 (def page-size 6)
 
-(def grants-order [{:key "decision-date/desc" :value "Newest"}
-                   {:key "decision-date/asc" :value "Oldest"}
-                   {:key "username/asc" :value "Username"}])
+(def grants-order [{:value "decision-date/desc" :label "Newest"}
+                   {:value "decision-date/asc" :label "Oldest"}
+                   {:value "username/asc" :label "Username"}])
 
 (defn build-grants-query [{:keys [:search-term :order-key]} after]
   (let [[order-by order-dir] ((juxt namespace name) (keyword order-key))]
@@ -86,7 +86,7 @@
 
 (defmethod page :route.grants/index []
   (let [form-data (r/atom {:search-term ""
-                           :order-key (:key (first grants-order))})]
+                           :order-key (:value (first grants-order))})]
     (fn []
       (let [active-session (subscribe [::st-subs/active-session])
             active-account-has-session? (subscribe [::st-subs/active-account-has-session?])