mirror of
https://github.com/penpot/penpot.git
synced 2025-05-10 15:16:40 +02:00
f3040fc10d
* 🐛 Pass color format to css formatter * 📎 Use get method to retrieve format * 📎 Add UI test to check background color is correctly copied to clipboard when changing the format
138 lines
5.5 KiB
Clojure
138 lines
5.5 KiB
Clojure
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
;;
|
|
;; Copyright (c) KALEIDOS INC
|
|
|
|
(ns app.main.ui.components.select
|
|
(:require-macros [app.main.style :as stl])
|
|
(:require
|
|
[app.common.data :as d]
|
|
[app.common.data.macros :as dm]
|
|
[app.common.uuid :as uuid]
|
|
[app.main.ui.components.dropdown :refer [dropdown]]
|
|
[app.main.ui.icons :as i]
|
|
[app.util.dom :as dom]
|
|
[rumext.v2 :as mf]))
|
|
|
|
|
|
(defn- as-key-value
|
|
[item]
|
|
(if (map? item)
|
|
[(:value item) (:label item) (:icon item)]
|
|
[item item item]))
|
|
|
|
(mf/defc select
|
|
[{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
|
|
(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)
|
|
:current-value default-value})
|
|
|
|
state (deref state*)
|
|
current-id (get state :id)
|
|
current-value (get state :current-value)
|
|
current-label (get label-index current-value)
|
|
is-open? (:is-open? state)
|
|
|
|
dropdown-element* (mf/use-ref nil)
|
|
dropdown-direction* (mf/use-state "down")
|
|
dropdown-direction-change* (mf/use-ref 0)
|
|
|
|
open-dropdown
|
|
(mf/use-fn
|
|
(mf/deps disabled)
|
|
(fn []
|
|
(when-not disabled
|
|
(swap! state* assoc :is-open? true))))
|
|
|
|
close-dropdown (mf/use-fn #(swap! state* assoc :is-open? false))
|
|
|
|
select-item
|
|
(mf/use-fn
|
|
(mf/deps on-change)
|
|
(fn [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)))))]
|
|
|
|
(mf/with-effect [default-value]
|
|
(swap! state* assoc :current-value default-value))
|
|
|
|
(mf/with-effect [is-open?]
|
|
(when (and (not= 0 (mf/ref-val dropdown-direction-change*)) (= false is-open?))
|
|
(reset! dropdown-direction* "down")
|
|
(mf/set-ref-val! dropdown-direction-change* 0)))
|
|
|
|
(mf/with-effect [is-open? dropdown-element*]
|
|
(let [dropdown-element (mf/ref-val dropdown-element*)]
|
|
(when (and (= 0 (mf/ref-val dropdown-direction-change*)) dropdown-element)
|
|
(let [is-outside? (dom/is-element-outside? dropdown-element)]
|
|
(reset! dropdown-direction* (if is-outside? "up" "down"))
|
|
(mf/set-ref-val! dropdown-direction-change* (inc (mf/ref-val dropdown-direction-change*)))))))
|
|
|
|
(let [selected-option (first (filter #(= (:value %) default-value) options))
|
|
current-icon (:icon selected-option)
|
|
current-icon-ref (i/key->icon current-icon)]
|
|
[:div {:on-click open-dropdown
|
|
:role "combobox"
|
|
:aria-activedescendent current-value
|
|
:class (dm/str (stl/css-case :custom-select true
|
|
:disabled disabled
|
|
:icon (some? current-icon-ref))
|
|
" " class)}
|
|
(when (and current-icon current-icon-ref)
|
|
[:span {:class (stl/css :current-icon)} current-icon-ref])
|
|
[:span {:class (stl/css :current-label)} current-label]
|
|
[:span {:class (stl/css :dropdown-button)} i/arrow]
|
|
[:& dropdown {:show is-open? :on-close close-dropdown}
|
|
[:ul {:ref dropdown-element* :data-direction @dropdown-direction*
|
|
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
|
|
(for [[index item] (d/enumerate options)]
|
|
(if (= :separator item)
|
|
[:li {:class (dom/classnames (stl/css :separator) true)
|
|
:role "option"
|
|
:key (dm/str current-id "-" index)}]
|
|
(let [[value label icon] (as-key-value item)
|
|
icon-ref (i/key->icon icon)]
|
|
[:li
|
|
{:key (dm/str current-id "-" index)
|
|
:role "option"
|
|
:class (stl/css-case
|
|
:checked-element true
|
|
:disabled (:disabled item)
|
|
:is-selected (= value current-value))
|
|
:data-value (pr-str value)
|
|
:on-pointer-enter highlight-item
|
|
:on-pointer-leave unhighlight-item
|
|
:on-click select-item}
|
|
(when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
|
|
[:span {:class (stl/css :label)} label]
|
|
[:span {:class (stl/css :check-icon)} i/tick]])))]]])))
|