Skip to content

Commit

Permalink
[popover] Add :optimize-position? prop
Browse files Browse the repository at this point in the history 
For day8/dash8.day8.com.au#250
  • Loading branch information
@kimo-k
kimo-k committed Dec 1, 2024
1 parent bfa42d5 commit 692ee90
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 32 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

> Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below.
#### Added

- `popover-content-wrapper`: Added `:optimize-position?` prop.

## 2.22.8 (2024-10-10)

#### Changed
Expand Down
72 changes: 40 additions & 32 deletions src/re_com/popover.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,7 @@
(when include-args-desc?
[{:name :children :required true :type "vector" :validate-fn sequential? :description "a vector of component markups"}
{:name :position :required true :type "keyword r/atom" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]}
{:name :optimize-position? :required false :type "boolean" :default "true" :description "When true, dynamically repositions the popover body to fit within the available viewport space."}
{:name :position-offset :required false :type "integer" :validate-fn number? :description [:span "px offset of the arrow from its default " [:code ":position"] " along the popover border. Is ignored when " [:code ":position"] " is one of the " [:code ":xxx-center"] " variants. Positive numbers slide the popover toward its center"]}
{:name :width :required false :type "string" :validate-fn string? :description "a CSS style describing the popover width"}
{:name :height :required false :default "auto" :type "string" :validate-fn string? :description "a CSS style describing the popover height"}
Expand All @@ -293,7 +294,8 @@

(defn popover-border
"Renders an element or control along with a Bootstrap popover"
[& {:keys [position position-offset title src] :as args}]
[& {:keys [position position-offset title optimize-position? src] :as args
:or {optimize-position? true}}]
(or
(validate-args-macro popover-border-args-desc args)
(let [pop-id (gensym "popover-")
Expand Down Expand Up @@ -324,7 +326,7 @@
(fn [this]
(let [clipped? (popover-clipping @!pop-border)
anchor-node (-> @!pop-border .-parentNode .-parentNode .-parentNode)] ;; Get reference to rc-point-wrapper node
(when (and clipped? (not @found-optimal))
(when (and clipped? (deref-or-value optimize-position?) (not @found-optimal))
(reset! position (calculate-optimal-position (calc-element-midpoint anchor-node)))
(reset! found-optimal true))
(calc-metrics @position)
Expand Down Expand Up @@ -405,6 +407,7 @@
(when include-args-desc?
[{:name :showing-injected? :required true :type "boolean r/atom" :description [:span "an atom or value. When the value is true, the popover shows." [:br] [:strong "NOTE: "] "When used as direct " [:code ":popover"] " arg in popover-anchor-wrapper, this arg will be injected automatically by popover-anchor-wrapper. If using your own popover function, you must add this yourself"]}
{:name :position-injected :required true :type "keyword r/atom" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list [:br] [:strong "NOTE: "] "See above NOTE for " [:code ":showing-injected?"] ". Same applies"]}
{:name :optimize-position? :required false :type "boolean" :default "true" :description "When true, dynamically repositions the popover body to fit within the available viewport space."}
{:name :position-offset :required false :type "integer" :validate-fn number? :description [:span "px offset of the arrow from its default " [:code ":position"] " along the popover border. Is ignored when " [:code ":position"] " is one of the " [:code ":xxx-center"] " variants. Positive numbers slide the popover toward its center"]}
{:name :no-clip? :required false :default false :type "boolean" :description "when an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped. By passing true for this parameter, re-com will use a different CSS method to show the popover. This method is slightly inferior because the popover can't track the anchor if it is repositioned"}
{:name :width :required false :type "string" :validate-fn string? :description "a CSS style representing the popover width"}
Expand Down Expand Up @@ -459,9 +462,13 @@
(fn popover-content-wrapper-render
[& {:keys [showing-injected? position-injected position-offset no-clip? width height backdrop-opacity on-cancel
title close-button? body tooltip-style? popover-color popover-border-color arrow-length arrow-width
arrow-gap padding class style attr parts]
:or {arrow-length 11 arrow-width 22 arrow-gap -1}
:as args}]
arrow-gap padding class style attr parts
optimize-position?]
:or {arrow-length 11
arrow-width 22
arrow-gap -1
optimize-position? true}
:as args}]
(or
(validate-args-macro popover-content-wrapper-args-desc args)
(do
Expand All @@ -470,8 +477,8 @@
(merge {:class (str "popover-content-wrapper rc-popover-content-wrapper " class)
:style (merge (flex-child-style "inherit")
(when no-clip? {:position "fixed"
:left (px @left-offset)
:top (px @top-offset)})
:left (px @left-offset)
:top (px @top-offset)})
style)}
(->attr args)
attr
Expand All @@ -485,31 +492,32 @@
:opacity backdrop-opacity
:on-click on-cancel])
[popover-border
:src (at)
:class (get-in parts [:border :class] "")
:style (get-in parts [:border :style])
:attr (get-in parts [:border :attr])
:position position-injected
:position-offset position-offset
:width width
:height height
:tooltip-style? tooltip-style?
:popover-color popover-color
:popover-border-color popover-border-color
:arrow-length arrow-length
:arrow-width arrow-width
:arrow-gap arrow-gap
:padding padding
:title (when title [popover-title
:src (at)
:class (get-in parts [:title :class] "")
:style (get-in parts [:title :style])
:attr (get-in parts [:title :attr])
:title title
:showing? showing-injected?
:close-button? close-button?
:close-callback on-cancel])
:children [body]]])))}))))
{:src (at)
:class (get-in parts [:border :class] "")
:style (get-in parts [:border :style])
:attr (get-in parts [:border :attr])
:position position-injected
:position-offset position-offset
:width width
:height height
:tooltip-style? tooltip-style?
:popover-color popover-color
:popover-border-color popover-border-color
:optimize-position? optimize-position?
:arrow-length arrow-length
:arrow-width arrow-width
:arrow-gap arrow-gap
:padding padding
:title (when title [popover-title
:src (at)
:class (get-in parts [:title :class] "")
:style (get-in parts [:title :style])
:attr (get-in parts [:title :attr])
:title title
:showing? showing-injected?
:close-button? close-button?
:close-callback on-cancel])
:children [body]}]])))}))))

;;--------------------------------------------------------------------------------------------------
;; Component: popover-anchor-wrapper
Expand Down

0 comments on commit 692ee90

Please sign in to comment.