From 6d1fdd445a99a7d45e0076e19d5b62045468b346 Mon Sep 17 00:00:00 2001 From: charlie Date: Tue, 20 Feb 2024 13:34:23 +0800 Subject: [PATCH] enhance(ui): export popup APIs to ui ns --- deps/shui/src/logseq/shui/demo2.cljs | 24 ++++++------ deps/shui/src/logseq/shui/popup/core.cljs | 33 ++++++++++++++--- deps/shui/src/logseq/shui/ui.cljs | 45 ++++++++++++++--------- 3 files changed, 66 insertions(+), 36 deletions(-) diff --git a/deps/shui/src/logseq/shui/demo2.cljs b/deps/shui/src/logseq/shui/demo2.cljs index 35c36c3fa..b16fa4138 100644 --- a/deps/shui/src/logseq/shui/demo2.cljs +++ b/deps/shui/src/logseq/shui/demo2.cljs @@ -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!"])}]])]) \ No newline at end of file diff --git a/deps/shui/src/logseq/shui/popup/core.cljs b/deps/shui/src/logseq/shui/popup/core.cljs index 7fd96b96f..01a226c16 100644 --- a/deps/shui/src/logseq/shui/popup/core.cljs +++ b/deps/shui/src/logseq/shui/popup/core.cljs @@ -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) diff --git a/deps/shui/src/logseq/shui/ui.cljs b/deps/shui/src/logseq/shui/ui.cljs index be5fed424..2d1e5ea0b 100644 --- a/deps/shui/src/logseq/shui/ui.cljs +++ b/deps/shui/src/logseq/shui/ui.cljs @@ -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!) \ No newline at end of file