55 lines
3.7 KiB
Clojure
55 lines
3.7 KiB
Clojure
(ns re-com.modal-panel
|
|
(:require-macros [re-com.core :refer [handler-fn]])
|
|
(:require [re-com.validate :refer [string-or-hiccup? number-or-string? css-style? html-attr?] :refer-macros [validate-args-macro]]))
|
|
|
|
;; ------------------------------------------------------------------------------------
|
|
;; modal-panel
|
|
;; ------------------------------------------------------------------------------------
|
|
|
|
(def modal-panel-args-desc
|
|
[{:name :child :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "hiccup to be centered within in the browser window"}
|
|
{:name :wrap-nicely? :required false :default true :type "boolean" :description [:span "if true, wrap " [:code ":child"] " in a white, rounded panel"]}
|
|
{:name :backdrop-color :required false :default "black" :type "string" :validate-fn string? :description "CSS color of backdrop"}
|
|
{:name :backdrop-opacity :required false :default 0.6 :type "double | string" :validate-fn number-or-string? :description [:span "opacity of backdrop from:" [:br] "0.0 (transparent) to 1.0 (opaque)"]}
|
|
{:name :backdrop-on-click :required false :default nil :type "-> nil" :validate-fn fn? :description "a function which takes no params and returns nothing. Called when the backdrop is clicked"}
|
|
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
|
|
{:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"}
|
|
{:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}])
|
|
|
|
(defn modal-panel
|
|
"Renders a modal window centered on screen. A dark transparent backdrop sits between this and the underlying
|
|
main window to prevent UI interactivity and place user focus on the modal window.
|
|
Parameters:
|
|
- child: The message to display in the modal (a string or a hiccup vector or function returning a hiccup vector)"
|
|
[& {:keys [child wrap-nicely? backdrop-color backdrop-opacity class style attr backdrop-on-click]
|
|
:or {wrap-nicely? true backdrop-color "black" backdrop-opacity 0.6}
|
|
:as args}]
|
|
{:pre [(validate-args-macro modal-panel-args-desc args "modal-panel")]}
|
|
[:div ;; Containing div
|
|
(merge {:class (str "rc-modal-panel display-flex " class)
|
|
:style (merge {:position "fixed"
|
|
:left "0px"
|
|
:top "0px"
|
|
:width "100%"
|
|
:height "100%"
|
|
:z-index 1020}
|
|
style)}
|
|
attr)
|
|
[:div ;; Backdrop
|
|
{:style {:position "fixed"
|
|
:width "100%"
|
|
:height "100%"
|
|
:background-color backdrop-color
|
|
:opacity backdrop-opacity
|
|
:z-index 1}
|
|
:on-click (handler-fn (when backdrop-on-click (backdrop-on-click))
|
|
(.preventDefault event)
|
|
(.stopPropagation event))}]
|
|
[:div ;; Child container
|
|
{:style (merge {:margin "auto"
|
|
:z-index 2}
|
|
(when wrap-nicely? {:background-color "white"
|
|
:padding "16px"
|
|
:border-radius "6px"}))}
|
|
child]])
|