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

Code before:
         (fn [event]
           (when (k/enter? event)
             (on-save-form event))))]

    [:*
     [:> button* {:variant "secondary"
                  :type "button"
                  :on-click close-modal
                  :on-key-down handle-key-down-cancel}
      (tr "labels.cancel")]
     [:> button* {:variant "primary"
                  :type "submit"
                  :on-click on-save-form
                  :on-key-down handle-key-down-save
                  :disabled disabled?}
      (tr "workspace.token.save-theme")]]))

(defn- make-lib-with-theme
  [theme sets]
  (let [tlib (-> (ctob/make-tokens-lib)
                 (ctob/add-theme theme))
        tlib (reduce ctob/add-set tlib sets)]
    (ctob/activate-theme tlib (:group theme) (:name theme))))

(mf/defc edit-create-theme
  [{:keys [set-state theme on-save edit-theme?]}]
  (let [ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
        token-sets (mf/deref refs/workspace-token-sets-tree)

        theme-state* (mf/use-state theme)
        theme-state (deref theme-state*)
        lib (make-lib-with-theme theme-state ordered-token-sets)

        ;; Form / Modal handlers
        on-back #(set-state (constantly {:type :themes-overview}))
        disabled? (-> (:name theme-state)
                      (str/trim)
                      (str/empty?))

        on-change-field
        (mf/use-fn
         (fn [field value]
           (swap! theme-state* #(assoc % field value))))

        on-save-form
        (mf/use-fn
         (mf/deps theme-state on-save on-back)
         (fn [e]
           (dom/prevent-default e)
           (let [theme' (-> theme-state
                            (update :name str/trim)

Review comment (performance):
I suggest the name `is-editing`. We should not use `?` in component property names, since they are converted to Javascript properties by react, and it doesn't handle special characters efficiently.

Code after:
         (mf/deps on-save-form)
         (fn [event]
           (when (k/enter? event)
             (on-save-form event))))]

    [:*
     [:> button* {:variant "secondary"
                  :type "button"
                  :on-click close-modal
                  :on-key-down handle-key-down-cancel}
      (tr "labels.cancel")]
     [:> button* {:variant "primary"
                  :type "submit"
                  :on-click on-save-form
                  :on-key-down handle-key-down-save
                  :disabled disabled?}
      (tr "workspace.token.save-theme")]]))

(defn- make-lib-with-theme
  [theme sets]
  (let [tlib (-> (ctob/make-tokens-lib)
                 (ctob/add-theme theme))
        tlib (reduce ctob/add-set tlib sets)]
    (ctob/activate-theme tlib (:group theme) (:name theme))))

(mf/defc edit-create-theme*
  [{:keys [change-view theme on-save is-editing has-prev-view]}]
  (let [ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
        token-sets (mf/deref refs/workspace-token-sets-tree)

        current-theme* (mf/use-state theme)
        current-theme (deref current-theme*)
        lib (make-lib-with-theme current-theme ordered-token-sets)

        ;; Form / Modal handlers
        on-back (mf/use-fn
                 (mf/deps change-view)
                 #(change-view :themes-overview))
        disabled? (-> (:name current-theme)
                      (str/trim)
                      (str/empty?))

        on-change-field
        (mf/use-fn
         (fn [field value]
           (swap! current-theme* #(assoc % field value))))

        on-save-form
        (mf/use-fn
         (mf/deps current-theme on-save on-back)
         (fn [e]