Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/tokens/modals/import.cljs (ClojureScript)

Code before:
      [:input {:type "file"
               :ref file-input-ref
               :style {:display "none"}
               :accept ".json"
               :on-change on-import-file}]
      [:input {:type "file"
               :ref zip-input-ref
               :style {:display "none"}
               :accept ".zip"
               :on-change on-zip-file-import}]
      [:input {:type "file"
               :ref dir-input-ref
               :style {:display "none"}
               :accept ""
               :webkitdirectory "true"
               :on-change on-import-directory}]
      [:> button* {:variant "secondary"
                   :type "button"
                   :on-click modal/hide!}
       (tr "labels.cancel")]
      [:> dropdown-button*
       {:options [{:label (tr "workspace.tokens.import-menu-zip-option") :value :zip}
                  {:label (tr "workspace.tokens.import-menu-json-option") :value :file}
                  {:label (tr "workspace.tokens.import-menu-folder-option") :value :folder}]
        :on-click handle-import-action
        :text-render (fn [option]
                       (str/concat
                        (tr "workspace.tokens.import-button-prefix")
                        " "
                        (:label option)))
        :default :zip}]]]))

(mf/defc import-modal*
  {::mf/register modal/components
   ::mf/register-as :tokens/import}
  []
  [:div {:class (stl/css :modal-overlay)}
   [:div {:class (stl/css :modal-dialog)}
    [:> icon-button* {:class (stl/css :close-btn)
                      :on-click modal/hide!
                      :aria-label (tr "labels.close")
                      :variant "ghost"
                      :icon "close"}]
    [:> import-modal-body*]]])


Review comment (suggestion):
Declare this function above, with `mf/use-fn`, to avoid defining a new function in each render and overloading garbage collector.

Code after:
                                :appearance "neutral"
                                :level "default"
                                :is-html true}
      (tr "workspace.tokens.import-warning")]

     [:div {:class (stl/css :import-actions)}
      [:input {:type "file"
               :ref file-input-ref
               :style {:display "none"}
               :accept ".json"
               :on-change on-import-json-file}]
      [:input {:type "file"
               :ref zip-input-ref
               :style {:display "none"}
               :accept ".zip"
               :on-change on-import-zip-file}]
      [:input {:type "file"
               :ref dir-input-ref
               :style {:display "none"}
               :accept ""
               :webkitdirectory "true"
               :on-change on-import-directory}]
      [:> button* {:variant "secondary"
                   :type "button"
                   :on-click modal/hide!}
       (tr "labels.cancel")]
      [:> import-type-dropdown*
       {:options [{:label (tr "workspace.tokens.import-menu-zip-option") :value :zip}
                  {:label (tr "workspace.tokens.import-menu-json-option") :value :file}
                  {:label (tr "workspace.tokens.import-menu-folder-option") :value :folder}]
        :on-click handle-import-action
        :text-render render-button-text
        :default :zip}]]]))

(mf/defc import-modal*
  {::mf/register modal/components
   ::mf/register-as :tokens/import}
  []
  [:div {:class (stl/css :modal-overlay)}
   [:div {:class (stl/css :modal-dialog)}
    [:> icon-button* {:class (stl/css :close-btn)
                      :on-click modal/hide!
                      :aria-label (tr "labels.close")
                      :variant "ghost"
                      :icon "close"}]
    [:> import-modal-body*]]])