From 468d827aa2a8fed5657f0fafac217dc54b1ebaa7 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil <33176106+ibrkhalil@users.noreply.github.com> Date: Tue, 20 Sep 2022 18:32:58 +0200 Subject: [PATCH] [issue-13578] Dropdown component (#13866) --- resources/images/icons/dropdown20@2x.png | Bin 0 -> 747 bytes resources/images/icons/dropdown20@3x.png | Bin 0 -> 1088 bytes resources/images/icons/dropdown_dark20@2x.png | Bin 0 -> 565 bytes resources/images/icons/dropdown_dark20@3x.png | Bin 0 -> 812 bytes resources/images/icons/pullup20@2x.png | Bin 0 -> 729 bytes resources/images/icons/pullup20@3x.png | Bin 0 -> 1032 bytes resources/images/icons/pullup_dark20@2x.png | Bin 0 -> 547 bytes resources/images/icons/pullup_dark20@3x.png | Bin 0 -> 774 bytes src/quo2/components/list_items/dropdown.cljs | 147 ++++++++++++++++++ src/quo2/screens/list_items/dropdown.cljs | 79 ++++++++++ src/quo2/screens/main.cljs | 6 +- 11 files changed, 231 insertions(+), 1 deletion(-) create mode 100644 resources/images/icons/dropdown20@2x.png create mode 100644 resources/images/icons/dropdown20@3x.png create mode 100644 resources/images/icons/dropdown_dark20@2x.png create mode 100644 resources/images/icons/dropdown_dark20@3x.png create mode 100644 resources/images/icons/pullup20@2x.png create mode 100644 resources/images/icons/pullup20@3x.png create mode 100644 resources/images/icons/pullup_dark20@2x.png create mode 100644 resources/images/icons/pullup_dark20@3x.png create mode 100644 src/quo2/components/list_items/dropdown.cljs create mode 100644 src/quo2/screens/list_items/dropdown.cljs diff --git a/resources/images/icons/dropdown20@2x.png b/resources/images/icons/dropdown20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..af0f35f3a809ce9c2319f7cdee52c753eafaf72e GIT binary patch literal 747 zcmVg3b#ANf&P($IKzTD&#pmMffu*c`=%zwoagb`wvXY7dgnhOM}ZT%;msR& zI3w%9(`eX${KXmSQNQ2djI6*QP}WrN;oV!<+x-eI_IAIG$J&rmuzQs_0|MR!i@5jy zZ2I8gW8lQKH=a)aU%Y%Zb6iQ_GBDUK37e3YYPIQid*j(mPsYV9)oydkQIg<~l1(6+ zT3Y0>?VXRniHwWe-uXmx9zmMDN|2J)B&?ex?o#9hm{gny=2YDO zBoH^ER8yX1U_-3U%fo|sxKoHT9CHTC8Ptd1NnB*ouu7#*I2)g4r0P&IY=bAQX{y1* zXO41ihqKvB-5HfS%(e(_5695O~}weHhAc{NR8Sour~X5~p*L#^McRysa|6Stips0B!Qvo$sI zsBkq&+nK&`*VMTC3e~16QR80Cxp9vZMg4|E(G0}+?PzZLW$hlBQmK?a47BQm;o<=l d6ck)j{sOBt=^v4eTYmrm002ovPDHLkV1m*vSIGbX literal 0 HcmV?d00001 diff --git a/resources/images/icons/dropdown20@3x.png b/resources/images/icons/dropdown20@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..58afc92070b81d4d51df7c1a99147ffd0610a7e3 GIT binary patch literal 1088 zcmV-G1i$-3!1e(^h_@z$Cy+Nl-Tx0G`rK@t(%I&mu~(z2|LzvAc~c_2j1 z2flaL&K-bevPd=ltL;`mL2T>j2sSsK!jIEaPz8^{WAPjcWak!o zq!}1VFy}!9h@hiS)>q-f`*-qtMM*T;{yTP6Ni;RBX@VJhM6nx+ZMFK2*6Ve$=%Ltp z{Y(E`ts^DT99V&7M?etMIg`oAPx{J#6w%kkUO8Vj0~8pChZH-KU`Cu-rKN-Wuirwc zRJ!v2O`=DMEtMX?e(epU(=@?A3<`BvA{Q(b(Hg~)eT=mp9tB0TX0c>Q<8ah5xG!oY z6ndHdjbOUPdU<;>cbgGaFfJGh5P?ymuM;=2Qpmv_dvWnu=mHt107NY8M?b+dC9;le-m;$iqq zMpZUgquGCdHDz9@dc7LomH{j1zG~2NM zQ~^CWIQ9=FJz7ZQwIzHl;X+tja(nkNs4qA?KM=1h5!7@F9g^saX-K<$QVBS(;NCWF z_YQVIhc^MMyvO7QL(hjp6xr>j4s^V&V=x#D27|#casB|+tjMd{%!Pme0000hOmE literal 0 HcmV?d00001 diff --git a/resources/images/icons/dropdown_dark20@2x.png b/resources/images/icons/dropdown_dark20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..9cb8fb983cf28342bbac23cf71b717f908c6ddfb GIT binary patch literal 565 zcmV-50?Pe~P)|~Qbg*-59LN=L~*^kUD z(9+U!+hnLfQ51b@24viJz3&xd2WR^%%YKkZl0Xu6PtB05V|*ni+mX;Ol%$kE62^ii zWId$8Lf0fTx4vK&Na7x-8KL5|AWmdk61lf@HaR14JkKVmmyKn}?_wR?u#QnbBlm5U zs6gTg)rVE`J+X8WajVt3Qd8(TA0n{`4$(ZS4^g1ogqw`snU3>y6)l1T=*-Ech%abXyrgZ$b6h%I3jJ8z!n=PJ`XxnB6S(rO7q}kDP}~YK;#ATEYFi6OZ06mEB13UA z$Wc~xXhR(1>~ImZ;dM-$iWntYSue0{&|$QEtm01e+k3nAKpSFf#t{zpnKF?(NDnlD z->?&kEIX`6>47!}IURb0ouzPXK}@~WIY#sF8O{Gqa+-hd(!Mc{K~#7F?V4>) z+dvS8ClpdBC2bW6^$$1TAU#0O*Aw(OT%uAxAwhwpac9V^5rWAv;_HP#dOF@JPYwC*VIptx=amV5n^`y5j%Szvz)2@%^ zL|XYr-`4IW%(5~F%_;NXS3_if_UYU1ijE+g*wU`0UD8M7K-2gG4KFK5o#$Ey*Tp7u zfEuFDc9EpbKe(rbWi%dBHX(JmAR{JWO`}{>kB4)e`(dmt{GJXEQ!B&5Ix0u4pdy)C zTG`UVhm^`qPSJuEVfdyaaE6Z9kg%qVWeT|B_`)$GJ2SoZ%5aT%oS+2}EPYoh`jz98 zep;kwjcYB^PzIvHufcLjHdXYRaOos_-EyyeKx+e37%lflqYfh7li3 zK6BhO{@*3tCVQjzx+RRbL5pkymPI;BR)AbwPfGxZbfhc{)N(v6eI(zbV3!n8tn8Mb zk-zOLgbH7h{|Tv0x=G)bU9<4_eTC4JUX!1;^sW<;##^KiD%|%qX_s_VpM_rFqrxld z&vVj|0~92T_F?&9E-B_6R_fD2lq@u039tZ5OGTp|5z|~8HTB%HFtj2&CLBrYDB_$lmm`omm^02S z%)jW<-VW_HuE!$nB%15sdRo#n8cSNf^OtwqG-A6{Hr0mOdJ$P^S@+t$Y>0c%rRQ6E z2}d64XluVC{4M7`j>-BX+>J|!xLZMJ7jLtu4_v2Jb11~oK00005P);Au#Ml zQGMv@KwJl=)7fLFiPIItDPo}F^vA`t=jz}TK{X*kas=x{;BM5iFS%8qT2>XgMFOmk zOfL6*+j85Nn2O^P#3?q^ezpxV3jC9;&Y9|s+RypkHjmMhjxWDMi2|<}MmKNV(HXT7 zOww5gJjH$c`b9pU!ILpmL6J=xK?J-D zf#MGKpL#{IMsQPSGbM>rL0%R&$48_vY$cOGYiU^)_x9Zf`Mie!k=p;NK_Erqws#&b zzMn~PbCC+4J$W5d1TzQ}w=KnZMl$mjDAdhE!zdYP#py(jk^~H#=?sP?7AG>73lrtV z%UAhtyM4P*+;x$PM2egH6v4PS*V(j%E=^_er1Tj62FSWmvpFa(RbVOrPIMGIdmPE>5W6{U|Cf!W9)2{{z1PTlVpWQl^NU00000 LNkvXXu0mjf4Wv8= literal 0 HcmV?d00001 diff --git a/resources/images/icons/pullup20@3x.png b/resources/images/icons/pullup20@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..d726bc379ef908a90a1f72acfe7876baf119089a GIT binary patch literal 1032 zcmV+j1o!)iP)+Z8^{R^2Ou_j0M`>pBL74CJ8u9i7K_DVu~;UAfE?*`yi%bE4G|7E z3PRpPAsXr%OMvS7{p~&?bX6z(2=Q|yrMt3Rb|FV{5k5Zknk4Bs&Z|Fi{2uv$*bYJN z-l>!iz%WLINwk2tt!|rO1{Xr{x>_xF!4O7-DRmc$u#JdYkOM;C+w<>or(Q4nkde&7 zy`EPC2S2IX8stk?MZ1+X+7dF*?|Tg>;1|eW7UJ(v54PX$Hy{J4BTTZPP?6Ogl(OSH zFl<#Sl~e;-D&YyH@m2ULz1PyDw{}X?05xS_-{__E zD3v=fONg*lU0!y%&GjPe;5(Q#(9w!AJHjU?Uc;G-r=ZzGBg*Uui(8?wRn%D!#Fr_; zP;PMBvLoEhp2Owo~#HT_q-+;ls!EBs;)zI z|IAdROY_AcYX!yUA?ca)qj3xK$;a4?zE&G;p=4g+aKZ)+OV`yVJ&WwU0hs>r=uLC zZ-gt%-df?vCK#4x_0g!Xj% zv}3(IbUd##e;L2{PkO_Si(jqWE^`{PB3v(*eFWTtnMJTOkpDick=B#O0odiXWeZoU z@s5HEvxi&JD7xvbw8C%)W(`$r(`l|HOi@<<%k1>Y8;o#QcQamlEq!rIzESgX7p9Hs z!^OGkizeE_G-5*}TA;DMHV!>-)rU0Y(^PLultxt0g6T;6ju4w^%ciMc52<<=OHVev zRpn5$DjAMKm??-$Ra_G}*PBLZJk^3YK^+*(iM2dOZyJpUKhu>*$1!@SWmIgV`co6k z;L_YbTJ#tpmt#wGEa4KJEw#P-0`y-v{4l~j2cx!0(S%$NrV+i~X)}_tNqgJ0-81@fJx~g`Zw4H|3PqLyaN%JdCT)V)) zz`$*jp#?=zOsJWXaXYHKuOK^%ow6+ZLLx~5N!SB5GqQW3f|g`s zq`^XWBsBLmd8vIB`cc?P={BXNArmgttf$K`jS0pivLx@Ru$HVFzO zR%q{5ZSAFJkc!+^?@di%ENiHQc5sING1pK9N)V3Sy(h64?q#h;M#jV`;$UH$%JUX} zc&)~-jpgE)U|bisLEKKNJJ^N5y10@Uk?K*h1bRYCUEH%+iC3hm!#aZ@n#5Jl-KN&Y zoXH=o9W0E#khm@4cJhh@fmX(`hAyt8E^-Z>v({m`_|xcrk@gj~>&m`$Wlj?ptwX&C z5yKuIVs=#M;@jr?sY1^KKP3>!S7!m leET`RwfgljFfefId;=3Qe`%jTAMpSH002ovPDHLkV1ka+@qz#V literal 0 HcmV?d00001 diff --git a/resources/images/icons/pullup_dark20@3x.png b/resources/images/icons/pullup_dark20@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..7cdf559d120b8cca83de31f56556fca66593772e GIT binary patch literal 774 zcmV+h1Nr=kP)J37RZRf6TO7+7daA z<2a7vv_y{zQdJe-e>cQ_h;8|MtM<87h^f4OhWP6BdS6tKBEmtmPjkt`gwJ64afo4% zpOP`A!XkPSqE9w(wqJtyHyL3fETzk$M^uJUi1#2~Q6|~KL6-aGfaZO)B%I~P+-zqF z2U#A322^!>CGx+fNG=9HW8)O zUwBG}c{J`)Ho|Q9wH3nxz#)Hex9~LoPyvp_`FTHew|WE&ZUv6Y#n-i8@WPkyX;m?zall45JHY_cU+# zz5I{JMi!+P@3jtS0Us3}6HaXCE#b0}w}tnjvJ4~)J#NBWn!lJ!>ShfKVHOtk9*_&6 z42PR>|M;NI1+GBNb68W>Z8JhIgoR~SujtNRBA=QyYVAzxoi>kG&BZEV$ue9%EilsV zHKoj@hlD?uOTukXSDac{M(jt@&9AMAJBjKxB>h^FGU`g2Kl3?t+tgyalsDDd+InGG z&MZ2&|ATLcryx_$WBLzA9_mQ8`R82jDrba`G7T+{GL<^E#C@BOEFDnVu_d0jk4v1{ zD*o$7b}eFX>F?0*gK69+r}E14^@&C4I*#Kwj^lLB52?x6=c>Ie*8l(j07*qoM6N<$ Eg0A&qw*UYD literal 0 HcmV?d00001 diff --git a/src/quo2/components/list_items/dropdown.cljs b/src/quo2/components/list_items/dropdown.cljs new file mode 100644 index 0000000000..e18289e49e --- /dev/null +++ b/src/quo2/components/list_items/dropdown.cljs @@ -0,0 +1,147 @@ +(ns quo2.components.list-items.dropdown + (:require [quo.react-native :as rn] + [quo2.components.icon :as icons] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [quo2.reanimated :as reanimated] + [reagent.core :as reagent])) + +(defn apply-anim [dd-height val] + (reanimated/animate-shared-value-with-delay dd-height + val + 300 + :easing1 + 0)) + +(def sizes {:big {:icon-size 20 + :font {:font-size :paragraph-1} + :height 40 + :padding {:padding-with-icon {:padding-vertical 9 + :padding-horizontal 12} + :padding-with-no-icon {:padding-vertical 9 + :padding-left 12 + :padding-right 8}}} + :medium {:icon-size 20 + :font {:font-size :paragraph-1} + :height 32 + :padding {:padding-with-icon {:padding-vertical 5 + :padding-horizontal 8} + :padding-with-no-icon {:padding-vertical 5 + :padding-left 12 + :padding-right 8}}} + :small {:icon-size 15 + :font {:font-size :paragraph-2} + :height 24 + :padding {:padding-with-icon {:padding-vertical 3 + :padding-horizontal 6} + :padding-with-no-icon {:padding-vertical 3 + :padding-horizontal 6}}}}) +(defn color-by-10 + [color] + (colors/alpha color 0.6)) + +(defn dropdown-comp [{:keys [icon open? dd-height size disabled? dd-color use-border? border-color]}] + (let [dark? (colors/dark?) + {:keys [width height width-with-icon padding font icon-size]} (size sizes) + {:keys [padding-with-icon padding-with-no-icon]} padding + font-size (:font-size font) + spacing (case size + :big 4 + :medium 2 + :small 2)] + [rn/touchable-opacity (cond-> {:on-press (fn [] + (if (swap! open? not) + (apply-anim dd-height 120) + (apply-anim dd-height 0))) + :style (cond-> (merge + (if icon + padding-with-icon + padding-with-no-icon) + {:width (if icon + width-with-icon + width) + :height height + :border-radius (case size + :big 12 + :medium 10 + :small 8) + :flex-direction :row + :align-items :center + :background-color (if @open? + dd-color + (color-by-10 dd-color))}) + use-border? (assoc :border-width 1 + :border-color (if @open? border-color (color-by-10 border-color))))} + disabled? (assoc-in [:style :opacity] 0.3) + disabled? (assoc :disabled true)) + (when icon + [icons/icon icon {:no-color true + :size 20 + :container-style {:margin-right spacing + :margin-top 1 + :width icon-size + :height icon-size}}]) + [text/text {:size font-size + :weight :medium + :font :font-medium + :color :main} "Dropdown"] + [icons/icon (if @open? + (if dark? + :main-icons/pullup-dark + :main-icons/pullup) + (if dark? + :main-icons/dropdown-dark + :main-icons/dropdown)) + {:size 20 + :no-color true + :container-style {:width (+ icon-size 3) + :border-radius 20 + :margin-left (if (= :small size) + 2 + 4) + :margin-top 1 + :height (+ icon-size 4)}}]])) + +(defn items-comp + [{:keys [items on-select]}] + (let [items-count (count items)] + [rn/scroll-view {:style {:height "100%"} + :horizontal false + :nestedScrollEnabled true} + (doall + (map-indexed (fn [index item] + [rn/touchable-opacity + {:key (str item index) + :style {:padding 4 + :border-bottom-width (if (= index (- items-count 1)) + 0 + 1) + :border-color (colors/theme-colors + colors/black + colors/white) + :text-align :center} + :on-press #(on-select item)} + [text/text {:style {:text-align :center}} item]]) items))])) + +(defn dropdown [{:keys [items icon text default-item on-select size disabled? border-color use-border? dd-color]}] + [:f> + (fn [] + (let [open? (reagent/atom false) + dd-height (reanimated/use-shared-value 0)] + [rn/view {:style {:flex-grow 1}} + [dropdown-comp {:items items + :icon icon + :disabled? disabled? + :size size + :dd-color dd-color + :text text + :border-color (colors/custom-color-by-theme border-color 50 60) + :use-border? use-border? + :default-item default-item + :open? open? + :dd-height dd-height}] + [reanimated/view {:style (reanimated/apply-animations-to-style + {:height dd-height} + {:height dd-height})} + [items-comp {:items items + :on-select on-select}]]]))]) \ No newline at end of file diff --git a/src/quo2/screens/list_items/dropdown.cljs b/src/quo2/screens/list_items/dropdown.cljs new file mode 100644 index 0000000000..b9f9c7458f --- /dev/null +++ b/src/quo2/screens/list_items/dropdown.cljs @@ -0,0 +1,79 @@ +(ns quo2.screens.list-items.dropdown + (:require [quo.components.text :as text] + [quo.previews.preview :as preview] + [quo.react-native :as rn] + [quo2.components.list-items.dropdown :as quo2] + [quo2.foundations.colors :as colors] + [reagent.core :as reagent])) + +(def descriptor [{:label "Icon" + :key :icon + :type :select + :options [{:key :main-icons/placeholder + :value "Placeholder"} + {:key :main-icons/locked + :value "Wallet"}]} + {:label "Disabled" + :key :disabled? + :type :boolean} + {:label "Default item" + :key :default-item + :type :text} + {:label "Use border?" + :key :use-border? + :type :boolean} + {:label "Border color" + :key :border-color + :type :select + :options (map + (fn [c] + {:key c + :value c}) + (keys colors/customization))} + {:label "DD color" + :key :dd-color + :type :text} + {:label "Size" + :key :size + :type :select + :options [{:key :big + :value "big"} + {:key :medium + :value "medium"} + {:key :small + :value "small"}]}]) + +(defn cool-preview [] + (let [items ["Banana" + "Apple" + "COVID +18" + "Orange" + "Kryptonite" + "BMW" + "Meh"] + state (reagent/atom {:icon :main-icons/placeholder + :default-item "item1" + :use-border? false + :dd-color (colors/custom-color :purple 50) + :size :big}) + selected-item (reagent/cursor state [:default-item]) + on-select #(reset! selected-item %)] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [text/text {:color :main} (str "Selected item: " @selected-item)] + [quo2/dropdown (merge @state {:on-select on-select + :items items})]]]))) + +(defn preview-dropdown [] + [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :flex-grow 1 + :nestedScrollEnabled true + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index ad51df2be8..ac464dcfcd 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -35,6 +35,7 @@ [quo2.screens.avatars.channel-avatar :as channel-avatar] [quo2.screens.switcher.switcher-cards :as switcher-cards] [quo2.screens.tabs.account-selector :as account-selector] + [quo2.screens.list-items.dropdown :as dropdown] [re-frame.core :as re-frame])) (def screens-categories @@ -116,6 +117,9 @@ :wallet [{:name :token-overview :insets {:top false} :component token-overview/preview-token-overview}] + :dropdowns [{:name :dropdown + :insets {:top false} + :component dropdown/preview-dropdown}] :list-items [{:name :preview-lists :insets {:top false} :component preview-lists/preview-preview-lists}] @@ -176,4 +180,4 @@ (def main-screens [{:name :quo2-preview :insets {:top false} - :component main-screen}]) + :component main-screen}]) \ No newline at end of file