Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 19:48:22 -05:00
Code Issues Activity

⚡ Refactor select and layer-menu components

Browse source
This commit is contained in:
Andrey Antukh 2023-05-22 12:47:31 +02:00 • committed by Alejandro Alonso
parent eec2fd00a2
commit 23f0ee9e55
2 changed files with 190 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
frontend/src/app/main/ui/components/select.cljs
View file

@ -6,53 +6,87 @@
(ns app.main.ui.components.select (ns app.main.ui.components.select
(:require (:require
[app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc select [{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option]}] (defn- as-key-value
(let [state (mf/use-state {:id (uuid/next) [item]
(if (map? item)
[(:value item) (:label item)]
[item item]))
(mf/defc select
[{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option]}]
(let [label-index (mf/with-memo [options]
(into {} (map as-key-value) options))
state* (mf/use-state
{:id (uuid/next)
:is-open? (or is-open? false) :is-open? (or is-open? false)
:current-value default-value}) :current-value default-value})
open-dropdown #(swap! state assoc :is-open? true)
close-dropdown #(swap! state assoc :is-open? false)
select-item (fn [value]
(fn [_]
(swap! state assoc :current-value value)
(when on-change (on-change value))))
highlight-item (fn [value]
(when on-pointer-enter-option (on-pointer-enter-option value)))
unhighlight-item (fn [value]
(when on-pointer-leave-option (on-pointer-leave-option value)))
as-key-value (fn [item] (if (map? item) [(:value item) (:label item)] [item item]))
value->label (into {} (->> options
(map as-key-value))) ]
(mf/use-effect state (deref state*)
(mf/deps options) current-id (get state :id)
#(if is-open? current-value (get state :current-value)
(reset! state (assoc @state :current-value default-value)) current-label (get label-index current-value)
(reset! state {:is-open? false is-open? (:is-open? state)
:current-value default-value})))
[:div.custom-select {:on-click open-dropdown open-dropdown (mf/use-fn #(swap! state* assoc :is-open? true))
:class class} close-dropdown (mf/use-fn #(swap! state* assoc :is-open? false))
[:span (-> @state :current-value value->label)]
select-item
(mf/use-fn
(mf/deps on-change)
(fn [event]
(js/console.log event)
(let [value (-> (dom/get-current-target event)
(dom/get-data "value")
(d/read-string))]
(swap! state* assoc :current-value value)
(when (fn? on-change)
(on-change value)))))
highlight-item
(mf/use-fn
(mf/deps on-pointer-enter-option)
(fn [event]
(when (fn? on-pointer-enter-option)
(let [value (-> (dom/get-current-target event)
(dom/get-data "value")
(d/read-string))]
(on-pointer-enter-option value)))))
unhighlight-item
(mf/use-fn
(mf/deps on-pointer-leave-option)
(fn [event]
(when (fn? on-pointer-leave-option)
(let [value (-> (dom/get-current-target event)
(dom/get-data "value")
(d/read-string))]
(on-pointer-leave-option value)))))]
[:div.custom-select {:on-click open-dropdown :class class}
[:span current-label]
[:span.dropdown-button i/arrow-down] [:span.dropdown-button i/arrow-down]
[:& dropdown {:show (:is-open? @state) [:& dropdown {:show is-open? :on-close close-dropdown}
:on-close close-dropdown}
[:ul.custom-select-dropdown [:ul.custom-select-dropdown
(for [[index item] (map-indexed vector options)] (for [[index item] (d/enumerate options)]
(cond (if (= :separator item)
(= :separator item) [:hr {:key (dm/str (:id @state) "-" index)}] [:hr {:key (dm/str current-id "-" index)}]
:else (let [[value label] (as-key-value item)] (let [[value label] (as-key-value item)]
[:li.checked-element [:li.checked-element
{:key (dm/str (:id @state) "-" index) {:key (dm/str current-id "-" index)
:class (when (= value (-> @state :current-value)) "is-selected") :class (when (= value current-value) "is-selected")
:on-pointer-enter #(highlight-item value) :data-value (pr-str value)
:on-pointer-leave #(unhighlight-item value) :on-pointer-enter highlight-item
:on-click (select-item value)} :on-pointer-leave unhighlight-item
:on-click select-item}
[:span.check-icon i/tick] [:span.check-icon i/tick]
[:span label]])))]]])) [:span label]])))]]]))

170
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.options.menus.layer (ns app.main.ui.workspace.sidebar.options.menus.layer
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
@ -16,106 +17,111 @@
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def layer-attrs [:opacity :blend-mode :blocked :hidden]) (def layer-attrs
[:opacity :blend-mode :blocked :hidden])
(defn opacity->string [opacity] (defn opacity->string
[opacity]
(if (= opacity :multiple) (if (= opacity :multiple)
"" ""
(str (-> opacity (dm/str (-> opacity
(d/coalesce 1) (d/coalesce 1)
(* 100))))) (* 100)))))
(defn select-all [event] (defn select-all!
(dom/select-text! (dom/get-target event))) [event]
(some-> event dom/get-target dom/select-text!))
(mf/defc layer-menu [{:keys [ids type values]}] (mf/defc layer-menu
(let [selected-blend-mode (mf/use-state (or (d/name (:blend-mode values)) "normal")) {::mf/wrap-props false}
is-option-highlighted? (mf/use-state false) [props]
is-preview-complete? (mf/use-state true) (let [ids (unchecked-get props "ids")
type (unchecked-get props "type")
values (unchecked-get props "values")
change! current-blend-mode (d/name (or (:blend-mode values) :normal))
(mf/use-callback current-opacity (:opacity values)
state* (mf/use-state
{:selected-blend-mode current-blend-mode
:option-highlighted? false
:preview-complete? true})
state (deref state*)
selected-blend-mode (get state :selected-blend-mode)
option-highlighted? (get state :option-highlighted?)
preview-complete? (get state :preview-complete?)
on-change
(mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [prop value] (fn [prop value]
(st/emit! (dch/update-shapes ids #(assoc % prop value))))) (st/emit! (dch/update-shapes ids #(assoc % prop value)))))
handle-change-blend-mode handle-change-blend-mode
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change)
(fn [value] (fn [value]
(when (not= "multiple" value) (when (not= "multiple" value)
(reset! selected-blend-mode value) (swap! state* assoc
(reset! is-option-highlighted? false) :selected-blend-mode value
(reset! is-preview-complete? true) :option-highlighted? false
(change! :blend-mode value)))) :preview-complete? true)
(on-change :blend-mode value))))
handle-option-enter handle-option-enter
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change current-blend-mode)
(fn [value] (fn [value]
(when (not= :multiple (:blend-mode values)) (when (not= :multiple current-blend-mode)
(reset! is-preview-complete? false) (swap! state* assoc
(reset! is-option-highlighted? true) :preview-complete? false
(change! :blend-mode value)))) :option-highlighted? true)
(on-change :blend-mode value))))
handle-option-leave handle-option-leave
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change selected-blend-mode)
(fn [value] (fn [_value]
(when (not= :multiple (:blend-mode values)) (when (not= :multiple current-blend-mode)
(reset! is-preview-complete? true) (swap! state* assoc :preview-complete? true)
(change! :blend-mode @selected-blend-mode)))) (on-change :blend-mode selected-blend-mode))))
handle-opacity-change handle-opacity-change
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change)
(fn [value] (fn [value]
(let [value (-> value (/ 100))] (let [value (/ value 100)]
(change! :opacity value)))) (on-change :opacity value))))
handle-set-hidden handle-set-hidden
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change)
(fn [_] (fn [_]
(change! :hidden true))) (on-change :hidden true)))
handle-set-visible handle-set-visible
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change)
(fn [_] (fn [_]
(change! :hidden false))) (on-change :hidden false)))
handle-set-blocked handle-set-blocked
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change)
(fn [_] (fn [_]
(change! :blocked true))) (on-change :blocked true)))
handle-set-unblocked handle-set-unblocked
(mf/use-callback (mf/use-fn
(mf/deps change!) (mf/deps on-change)
(fn [_] (fn [_]
(change! :blocked false)))] (on-change :blocked false)))
(mf/use-effect options
(mf/deps (:blend-mode values)) (mf/with-memo [current-blend-mode]
#(when (or (not @is-option-highlighted?) (and @is-option-highlighted? @is-preview-complete?)) (d/concat-vec
(reset! selected-blend-mode (or (d/name (:blend-mode values)) "normal")))) (when (= :multiple current-blend-mode)
[:div.element-set
[:div.element-set-title
[:span
(case type
:multiple (tr "workspace.options.layer-options.title.multiple")
:group (tr "workspace.options.layer-options.title.group")
(tr "workspace.options.layer-options.title"))]]
[:div.element-set-content
[:div.row-flex
[:& select
{:class "flex-grow"
:default-value @selected-blend-mode
:options (concat (when (= :multiple (:blend-mode values))
[{:value "multiple" :label "--"}]) [{:value "multiple" :label "--"}])
[{:value "normal" :label (tr "workspace.options.layer-options.blend-mode.normal")} [{:value "normal" :label (tr "workspace.options.layer-options.blend-mode.normal")}
{:value "darken" :label (tr "workspace.options.layer-options.blend-mode.darken")} {:value "darken" :label (tr "workspace.options.layer-options.blend-mode.darken")}
@ -132,21 +138,45 @@
{:value "hue" :label (tr "workspace.options.layer-options.blend-mode.hue")} {:value "hue" :label (tr "workspace.options.layer-options.blend-mode.hue")}
{:value "saturation" :label (tr "workspace.options.layer-options.blend-mode.saturation")} {:value "saturation" :label (tr "workspace.options.layer-options.blend-mode.saturation")}
{:value "color" :label (tr "workspace.options.layer-options.blend-mode.color")} {:value "color" :label (tr "workspace.options.layer-options.blend-mode.color")}
{:value "luminosity" :label (tr "workspace.options.layer-options.blend-mode.luminosity")}]) {:value "luminosity" :label (tr "workspace.options.layer-options.blend-mode.luminosity")}]))]
(mf/with-effect [current-blend-mode
option-highlighted?
preview-complete?]
(when (or (not option-highlighted?)
(and option-highlighted?
preview-complete?))
(swap! state* assoc :selected-blend-mode current-blend-mode)))
[:div.element-set
[:div.element-set-title
[:span
(case type
:multiple (tr "workspace.options.layer-options.title.multiple")
:group (tr "workspace.options.layer-options.title.group")
(tr "workspace.options.layer-options.title"))]]
[:div.element-set-content
[:div.row-flex
[:& select
{:class "flex-grow"
:default-value selected-blend-mode
:options options
:on-change handle-change-blend-mode :on-change handle-change-blend-mode
:is-open? @is-option-highlighted? :is-open? option-highlighted?
:on-pointer-enter-option handle-option-enter :on-pointer-enter-option handle-option-enter
:on-pointer-leave-option handle-option-leave}] :on-pointer-leave-option handle-option-leave}]
[:div.input-element {:title (tr "workspace.options.opacity") :class "percentail"} [:div.input-element {:title (tr "workspace.options.opacity")
[:> numeric-input {:value (-> values :opacity opacity->string) :class "percentail"}
[:> numeric-input
{:value (opacity->string current-opacity)
:placeholder (tr "settings.multiple") :placeholder (tr "settings.multiple")
:on-focus select-all :on-focus select-all!
:on-change handle-opacity-change :on-change handle-opacity-change
:min 0 :min 0
:max 100}]] :max 100}]]
[:div.element-set-actions.layer-actions [:div.element-set-actions.layer-actions
(cond (cond
(or (= :multiple (:hidden values)) (not (:hidden values))) (or (= :multiple (:hidden values)) (not (:hidden values)))