mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
♻️ Add minor refactor to dashboard export dialog components
This commit is contained in:
Andrey Antukh
parent
9d2fc63780
commit
dcd428d3b2
1 changed files with 94 additions and 75 deletions
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.dashboard.export
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.features :as features]
|
||||
[app.main.store :as st]
|
||||
|
|
@ -20,8 +21,8 @@
|
|||
(def ^:const options [:all :merge :detach])
|
||||
|
||||
(mf/defc export-entry
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file]}]
|
||||
|
||||
[:div.file-entry
|
||||
{:class (dom/classnames
|
||||
:loading (:loading? file)
|
||||
|
|
@ -35,72 +36,89 @@
|
|||
|
||||
[:div.file-name-label (:name file)]]])
|
||||
|
||||
(defn mark-file-error [files file-id]
|
||||
(->> files
|
||||
(mapv #(cond-> %
|
||||
(= file-id (:id %))
|
||||
(assoc :export-error? true
|
||||
:loading? false)))))
|
||||
(defn- mark-file-error
|
||||
[files file-id]
|
||||
(mapv #(cond-> %
|
||||
(= file-id (:id %))
|
||||
(assoc :export-error? true
|
||||
:loading? false))
|
||||
files))
|
||||
|
||||
(defn mark-file-success [files file-id]
|
||||
(->> files
|
||||
(mapv #(cond-> %
|
||||
(= file-id (:id %))
|
||||
(assoc :export-success? true
|
||||
:loading? false)))))
|
||||
(defn- mark-file-success
|
||||
[files file-id]
|
||||
(mapv #(cond-> %
|
||||
(= file-id (:id %))
|
||||
(assoc :export-success? true
|
||||
:loading? false))
|
||||
files))
|
||||
|
||||
(def export-types
|
||||
[:all :merge :detach])
|
||||
|
||||
(mf/defc export-dialog
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :export}
|
||||
::mf/register-as :export
|
||||
::mf/wrap-props false}
|
||||
[{:keys [team-id files has-libraries? binary?]}]
|
||||
(let [state (mf/use-state {:status :prepare
|
||||
:files (->> files (mapv #(assoc % :loading? true)))})
|
||||
selected-option (mf/use-state :all)
|
||||
(let [components-v2 (features/use-feature :components-v2)
|
||||
state* (mf/use-state
|
||||
#(let [files (mapv (fn [file] (assoc file :loading? true)) files)]
|
||||
{:status :prepare
|
||||
:selected :all
|
||||
:files files}))
|
||||
|
||||
components-v2 (features/use-feature :components-v2)
|
||||
state (deref state*)
|
||||
selected (:selected state)
|
||||
status (:status state)
|
||||
|
||||
start-export
|
||||
(fn []
|
||||
(swap! state assoc :status :exporting)
|
||||
(->> (uw/ask-many!
|
||||
{:cmd (if binary? :export-binary-file :export-standard-file)
|
||||
:team-id team-id
|
||||
:export-type @selected-option
|
||||
:files files
|
||||
:components-v2 components-v2})
|
||||
(rx/delay-emit 1000)
|
||||
(rx/subs
|
||||
(fn [msg]
|
||||
(when (= :error (:type msg))
|
||||
(swap! state update :files mark-file-error (:file-id msg)))
|
||||
(mf/use-fn
|
||||
(mf/deps team-id selected files components-v2)
|
||||
(fn []
|
||||
(swap! state* assoc :status :exporting)
|
||||
(->> (uw/ask-many!
|
||||
{:cmd (if binary? :export-binary-file :export-standard-file)
|
||||
:team-id team-id
|
||||
:export-type selected
|
||||
:files files
|
||||
:components-v2 components-v2})
|
||||
(rx/delay-emit 1000)
|
||||
(rx/subs
|
||||
(fn [msg]
|
||||
(cond
|
||||
(= :error (:type msg))
|
||||
(swap! state* update :files mark-file-error (:file-id msg))
|
||||
|
||||
(when (= :finish (:type msg))
|
||||
(swap! state update :files mark-file-success (:file-id msg))
|
||||
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))
|
||||
(= :finish (:type msg))
|
||||
(do
|
||||
(swap! state* update :files mark-file-success (:file-id msg))
|
||||
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))))
|
||||
|
||||
cancel-fn
|
||||
(mf/use-callback
|
||||
on-cancel
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (modal/hide))))
|
||||
|
||||
accept-fn
|
||||
(mf/use-callback
|
||||
(mf/deps @selected-option)
|
||||
on-accept
|
||||
(mf/use-fn
|
||||
(mf/deps start-export)
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(start-export)))
|
||||
|
||||
on-change-handler
|
||||
(mf/use-callback
|
||||
(fn [_ type]
|
||||
(reset! selected-option type)))]
|
||||
on-change
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [type (-> (dom/get-target event)
|
||||
(dom/get-data "type")
|
||||
(keyword))]
|
||||
(swap! state* assoc :selected type))))]
|
||||
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(when-not has-libraries?
|
||||
;; Start download automatically
|
||||
(start-export))))
|
||||
(mf/with-effect [has-libraries?]
|
||||
;; Start download automatically when no libraries
|
||||
(when-not has-libraries?
|
||||
(start-export)))
|
||||
|
||||
[:div.modal-overlay
|
||||
[:div.modal-container.export-dialog
|
||||
|
|
@ -109,52 +127,53 @@
|
|||
[:h2 (tr "dashboard.export.title")]]
|
||||
|
||||
[:div.modal-close-button
|
||||
{:on-click cancel-fn} i/close]]
|
||||
{:on-click on-cancel} i/close]]
|
||||
|
||||
(cond
|
||||
(= (:status @state) :prepare)
|
||||
(= status :prepare)
|
||||
[:*
|
||||
[:div.modal-content
|
||||
[:p.explain (tr "dashboard.export.explain")]
|
||||
[:p.detail (tr "dashboard.export.detail")]
|
||||
|
||||
(for [type [:all :merge :detach]]
|
||||
(let [selected? (= @selected-option type)]
|
||||
[:div.export-option {:class (when selected? "selected")}
|
||||
[:label.option-container
|
||||
;; Execution time translation strings:
|
||||
;; dashboard.export.options.all.message
|
||||
;; dashboard.export.options.all.title
|
||||
;; dashboard.export.options.detach.message
|
||||
;; dashboard.export.options.detach.title
|
||||
;; dashboard.export.options.merge.message
|
||||
;; dashboard.export.options.merge.title
|
||||
[:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))]
|
||||
[:p (tr (str "dashboard.export.options." (d/name type) ".message"))]
|
||||
[:input {:type "radio"
|
||||
:checked selected?
|
||||
:on-change #(on-change-handler % type)
|
||||
:name "export-option"}]
|
||||
[:span {:class "option-radio-check"}]]]))]
|
||||
(for [type export-types]
|
||||
[:div.export-option {:class (when (= selected type) "selected")
|
||||
:key (name type)}
|
||||
[:label.option-container
|
||||
;; Execution time translation strings:
|
||||
;; dashboard.export.options.all.message
|
||||
;; dashboard.export.options.all.title
|
||||
;; dashboard.export.options.detach.message
|
||||
;; dashboard.export.options.detach.title
|
||||
;; dashboard.export.options.merge.message
|
||||
;; dashboard.export.options.merge.title
|
||||
[:h3 (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
|
||||
[:p (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]
|
||||
[:input {:type "radio"
|
||||
:checked (= selected type)
|
||||
:data-type (name type)
|
||||
:on-change on-change
|
||||
:name "export-option"}]
|
||||
[:span {:class "option-radio-check"}]]])]
|
||||
|
||||
[:div.modal-footer
|
||||
[:div.action-buttons
|
||||
[:input.cancel-button
|
||||
{:type "button"
|
||||
:value (tr "labels.cancel")
|
||||
:on-click cancel-fn}]
|
||||
:on-click on-cancel}]
|
||||
|
||||
[:input.accept-button
|
||||
{:class "primary"
|
||||
:type "button"
|
||||
:value (tr "labels.continue")
|
||||
:on-click accept-fn}]]]]
|
||||
:on-click on-accept}]]]]
|
||||
|
||||
(= (:status @state) :exporting)
|
||||
(= status :exporting)
|
||||
[:*
|
||||
[:div.modal-content
|
||||
(for [file (:files @state)]
|
||||
[:& export-entry {:file file}])]
|
||||
(for [file (:files state)]
|
||||
[:& export-entry {:file file :key (dm/str (:id file))}])]
|
||||
|
||||
[:div.modal-footer
|
||||
[:div.action-buttons
|
||||
|
|
@ -162,5 +181,5 @@
|
|||
{:class "primary"
|
||||
:type "button"
|
||||
:value (tr "labels.close")
|
||||
:disabled (->> @state :files (some :loading?))
|
||||
:on-click cancel-fn}]]]])]]))
|
||||
:disabled (->> state :files (some :loading?))
|
||||
:on-click on-cancel}]]]])]]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue