bootstrap_modal.cljs

(def ESCAPE-KEY-CODE 27)

(defn handle-key-down
  [this e]
  "For handling non-printing events"
  (if (= ESCAPE-KEY-CODE (.-keyCode e))
    (if-let [on-dismiss (:on-dismiss (r/props this))] (on-dismiss e))))

(defn Modal
  [_]
  (r/create-class
    {:component-did-mount
     (fn [this]
       (goog.dom.classes.add js/document.body "modal-open")
       (let [key-down-callback (fn [e] (handle-key-down this e))]
         (.addEventListener js/window "keydown" key-down-callback)
         (r/set-state this {:key-down-callback key-down-callback})))
     :component-will-unmount
     (fn [this]
       (goog.dom.classes.remove js/document.body "modal-open")
       (.removeEventListener js/window "keydown"
                             (:key-down-callback (r/state this))))
     :render
     (fn [this]
       (let [{:keys [modal-header modal-body modal-footer dialog-class on-save
                     on-cancel on-dismiss ok-copy loading]}
             (r/props this)]
         [:span.modal-open
          [:div.modal.in {:style {:display "block"}}
           [:div.modal-backdrop.in
            {:disabled loading
             :on-click #(on-dismiss %)
             :style    (if (platform/isIos)
                         {:top 0 :position "sticky"}
                         {:position "fixed"})}]
           [:div.modal-dialog {:class dialog-class}
            [:div.modal-content
             [:div.modal-header
              [:button.close {:disabled loading :on-click #(on-dismiss %)}
               [:span {:dangerouslySetInnerHTML {:__html "×"}}]]
              [:h4.modal-title modal-header]]
             [:div.modal-body (when loading {:style {:opacity 0.6}})
              modal-body]
             [:div.modal-footer
              (if modal-footer
                modal-footer
                [:div (if loading [:span [:span.fa.fa-spinner.fa-spin] " "])
                 (when on-cancel
                   [:button.cancel.btn.btn-default
                    {:disabled (or (not on-cancel) loading)
                     :on-click #(on-cancel %)} "Cancel"])
                 [:button.okay.btn.btn-primary
                  {:disabled (or (not on-save) loading)
                   :on-click #(on-save %)} (or ok-copy "OK")]])]]]]]))}))