greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance(ui): export popup APIs to ui ns

pull/11049/head
charlie 2024-02-20 13:34:23 +08:00
parent f28cf73ef4
commit 6d1fdd445a
3 changed files with 66 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
deps/shui/src/logseq/shui/demo2.cljs vendored
View File

@ -1,7 +1,7 @@
(ns logseq.shui.demo2
(:require [rum.core :as rum]
[logseq.shui.ui :as ui]
[logseq.shui.popup.core :refer [get-popup] :as popup-core]
[logseq.shui.popup.core :refer [install-popups update-popup! get-popup]]
[frontend.components.icon :refer [emojis-cp emojis]]))
(rum/defc page []
@ -9,7 +9,7 @@
[:h1.text-3xl.font-bold.border-b.pb-4 "UI X Popup"]
(rum/portal
(popup-core/install-popups)
(install-popups)
js/document.body)
(let [[emoji set-emoji!] (rum/use-state nil)
@ -22,14 +22,14 @@
"Choose a inline "
[:a.underline
{:on-click
#(popup-core/show! %
#(ui/popup-show! %
(fn [_config]
[:div.max-h-72.overflow-auto.p-1
(emojis-cp (take 80 emojis)
{:on-chosen
(fn [_ t]
(set-emoji! t)
(popup-core/hide-all!))})])
(ui/popup-hide-all!))})])
{:content-props {:class "w-72 p-0"}
:as-menu? true})}
(if emoji [:strong.px-1.text-6xl [:em-emoji emoji]] "emoji :O")] "."])]
@ -39,7 +39,7 @@
[:p.py-4
(ui/button
{:variant :secondary
:on-click #(popup-core/show! %
:on-click #(ui/popup-show! %
(fn []
[:p.p-4
(emoji-picker true)]))}
@ -59,13 +59,13 @@
:on-change (fn [^js e]
(let [val (.-value (.-target e))]
(set-q! val)
(popup-core/update-popup! :select-a-fruit-input [:content] (gen-content val))))
(update-popup! :select-a-fruit-input [:content] (gen-content val))))
:class "w-1/5"
:on-focus (fn [^js e]
(let [id :select-a-fruit-input
[_ popup] (get-popup id)]
(if (not popup)
(popup-core/show! (.-target e)
(ui/popup-show! (.-target e)
(gen-content q)
{:id id
:content-props
@ -80,11 +80,11 @@
(when (and
(not (.contains q-ref target))
(not (.closest target ".x-input-popup-content")))
(popup-core/hide! id)))))
(ui/popup-hide! id)))))
:onOpenAutoFocus #(.preventDefault %)}})
;; update content
(popup-core/update-popup! id [:content]
(update-popup! id [:content]
(gen-content q)))))
;:on-blur (fn [^js e]
; (let [^js target (.-relatedTarget e)]
@ -94,15 +94,15 @@
}))]
[:div.w-full.p-4.border.rounded.dotted.h-48.mt-8.bg-gray-02
{:on-click #(popup-core/show! %
{:on-click #(ui/popup-show! %
(->> (range 8)
(map (fn [it]
(ui/dropdown-menu-item
{:on-select (fn []
(ui/toast! it)
(popup-core/hide-all!))}
(ui/popup-hide-all!))}
[:strong it]))))
{:as-menu? true
:content-props {:class "w-48"}})
:on-context-menu #(popup-core/show! %
:on-context-menu #(ui/popup-show! %
[:h1.text-3xl.font-bold "hi x popup for custom context menu!"])}]])])

33
deps/shui/src/logseq/shui/popup/core.cljs vendored
View File

@ -1,9 +1,30 @@
(ns logseq.shui.popup.core
(:require [rum.core :as rum]
[logseq.shui.ui :as ui]
[logseq.shui.util :as util]
[medley.core :as medley]
[logseq.shui.util :refer [use-atom]]))
;; ui
(def button (util/lsui-wrap "Button"))
(def popover (util/lsui-wrap "Popover"))
(def popover-trigger (util/lsui-wrap "PopoverTrigger"))
(def popover-content (util/lsui-wrap "PopoverContent"))
(def dropdown-menu (util/lsui-wrap "DropdownMenu"))
(def dropdown-menu-trigger (util/lsui-wrap "DropdownMenuTrigger"))
(def dropdown-menu-content (util/lsui-wrap "DropdownMenuContent"))
(def dropdown-menu-group (util/lsui-wrap "DropdownMenuGroup"))
(def dropdown-menu-item (util/lsui-wrap "DropdownMenuItem"))
(def dropdown-menu-checkbox-item (util/lsui-wrap "DropdownMenuCheckboxItem"))
(def dropdown-menu-radio-group (util/lsui-wrap "DropdownMenuRadioGroup"))
(def dropdown-menu-radio-item (util/lsui-wrap "DropdownMenuRadioItem"))
(def dropdown-menu-label (util/lsui-wrap "DropdownMenuLabel"))
(def dropdown-menu-separator (util/lsui-wrap "DropdownMenuSeparator"))
(def dropdown-menu-shortcut (util/lsui-wrap "DropdownMenuShortcut"))
(def dropdown-menu-portal (util/lsui-wrap "DropdownMenuPortal"))
(def dropdown-menu-sub (util/lsui-wrap "DropdownMenuSub"))
(def dropdown-menu-sub-content (util/lsui-wrap "DropdownMenuSubContent"))
(def dropdown-menu-sub-trigger (util/lsui-wrap "DropdownMenuSubTrigger"))
;; {:id :open? false :content nil :position [0 0] :root-props nil :content-props nil}
(defonce ^:private *popups (atom []))
(defonce ^:private *id (atom 0))
@ -77,15 +98,15 @@
[open?])
(when-let [[x y] position]
(let [popup-root (if as-menu? ui/dropdown-menu ui/popover)
popup-trigger (if as-menu? ui/dropdown-menu-trigger ui/popover-trigger)
popup-content (if as-menu? ui/dropdown-menu-content ui/popover-content)]
(let [popup-root (if as-menu? dropdown-menu popover)
popup-trigger (if as-menu? dropdown-menu-trigger popover-trigger)
popup-content (if as-menu? dropdown-menu-content popover-content)]
(popup-root
(merge root-props {:open open?})
(popup-trigger
{:as-child true}
(ui/button {:class "w-1 h-1 overflow-hidden fixed p-0 opacity-0"
:style {:top y :left x}} ""))
(button {:class "w-1 h-1 overflow-hidden fixed p-0 opacity-0"
:style {:top y :left x}} ""))
(popup-content
(merge {:onEscapeKeyDown #(hide! id)
:onPointerDownOutside #(hide! id)} content-props)

45
deps/shui/src/logseq/shui/ui.cljs vendored
View File

@ -4,6 +4,7 @@
[logseq.shui.toaster.core :as toaster-core]
[logseq.shui.select.core :as select-core]
[logseq.shui.dialog.core :as dialog-core]
[logseq.shui.popup.core :as popup-core]
[logseq.shui.form.core :as form-core]))
(def button (util/lsui-wrap "Button" {:static? false}))
@ -23,9 +24,9 @@
(def radio-group-item (util/lsui-wrap "RadioGroupItem"))
(def skeleton (util/lsui-wrap "Skeleton"))
(def calendar (util/lsui-wrap "Calendar"))
(def popover (util/lsui-wrap "Popover"))
(def popover-trigger (util/lsui-wrap "PopoverTrigger"))
(def popover-content (util/lsui-wrap "PopoverContent"))
(def popover popup-core/popover)
(def popover-trigger popup-core/popover-trigger)
(def popover-content popup-core/popover-content)
(def tooltip (util/lsui-wrap "Tooltip"))
(def tooltip-trigger (util/lsui-wrap "TooltipTrigger"))
@ -58,21 +59,21 @@
(def select-scroll-up-button select-core/select-scroll-up-button)
(def select-scroll-down-button select-core/select-scroll-down-button)
(def dropdown-menu (util/lsui-wrap "DropdownMenu"))
(def dropdown-menu-trigger (util/lsui-wrap "DropdownMenuTrigger"))
(def dropdown-menu-content (util/lsui-wrap "DropdownMenuContent"))
(def dropdown-menu-group (util/lsui-wrap "DropdownMenuGroup"))
(def dropdown-menu-item (util/lsui-wrap "DropdownMenuItem"))
(def dropdown-menu-checkbox-item (util/lsui-wrap "DropdownMenuCheckboxItem"))
(def dropdown-menu-radio-group (util/lsui-wrap "DropdownMenuRadioGroup"))
(def dropdown-menu-radio-item (util/lsui-wrap "DropdownMenuRadioItem"))
(def dropdown-menu-label (util/lsui-wrap "DropdownMenuLabel"))
(def dropdown-menu-separator (util/lsui-wrap "DropdownMenuSeparator"))
(def dropdown-menu-shortcut (util/lsui-wrap "DropdownMenuShortcut"))
(def dropdown-menu-portal (util/lsui-wrap "DropdownMenuPortal"))
(def dropdown-menu-sub (util/lsui-wrap "DropdownMenuSub"))
(def dropdown-menu-sub-content (util/lsui-wrap "DropdownMenuSubContent"))
(def dropdown-menu-sub-trigger (util/lsui-wrap "DropdownMenuSubTrigger"))
(def dropdown-menu popup-core/dropdown-menu)
(def dropdown-menu-trigger popup-core/dropdown-menu-trigger)
(def dropdown-menu-content popup-core/dropdown-menu-content)
(def dropdown-menu-group popup-core/dropdown-menu-group)
(def dropdown-menu-item popup-core/dropdown-menu-item)
(def dropdown-menu-checkbox-item popup-core/dropdown-menu-checkbox-item)
(def dropdown-menu-radio-group popup-core/dropdown-menu-radio-group)
(def dropdown-menu-radio-item popup-core/dropdown-menu-radio-item)
(def dropdown-menu-label popup-core/dropdown-menu-label)
(def dropdown-menu-separator popup-core/dropdown-menu-separator)
(def dropdown-menu-shortcut popup-core/dropdown-menu-shortcut)
(def dropdown-menu-portal popup-core/dropdown-menu-portal)
(def dropdown-menu-sub popup-core/dropdown-menu-sub)
(def dropdown-menu-sub-content popup-core/dropdown-menu-sub-content)
(def dropdown-menu-sub-trigger popup-core/dropdown-menu-sub-trigger)
(def context-menu (util/lsui-wrap "ContextMenu"))
(def context-menu-trigger (util/lsui-wrap "ContextMenuTrigger"))
@ -103,3 +104,11 @@
(def toast! toaster-core/toast!)
(def toast-dismiss! toaster-core/dismiss!)
(def dialog-open! dialog-core/open!)
(def dialog-alert! dialog-core/alert!)
(def dialog-confirm! dialog-core/confirm!)
(def dialog-close! dialog-core/close!)
(def dialog-close-all! dialog-core/close-all!)
(def popup-show! popup-core/show!)
(def popup-hide! popup-core/hide!)
(def popup-hide-all! popup-core/hide-all!)