Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs (ClojureScript)

Code before:

                 :else
                 shape)]
    (select-keys shape measure-attrs)))

(mf/defc numeric-input-wrapper*
  {::mf/private true}
  [{:keys [values name applied-tokens align on-detach] :rest props}]
  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
        tokens (mf/with-memo [tokens name]
                 (delay
                   (-> (deref tokens)
                       (select-keys (get tk/tokens-by-input name))
                       (not-empty))))
        on-detach-attr
        (mf/use-fn
         (mf/deps on-detach name)
         #(on-detach % name))

        props  (mf/spread-props props
                                {:placeholder (if (or (= :multiple (:applied-tokens values))
                                                      (= :multiple (get values name)))
                                                (tr "settings.multiple") "--")
                                 :class (stl/css :numeric-input-measures)
                                 :applied-token (get applied-tokens name)
                                 :tokens @tokens
                                 :align align
                                 :on-detach on-detach-attr
                                 :value (get values name)})]
    [:> numeric-input* props]))

(def ^:private xf:map-type (map :type))
(def ^:private xf:mapcat-type-to-options (mapcat type->options))

(mf/defc measures-menu*
  [{:keys [ids values applied-tokens type shapes]}]
  (let [token-numeric-inputs
        (features/use-feature "tokens/numeric-input")

        all-types
        (mf/with-memo [type shapes]
          ;; We only need this when multiple type is used
          (when (= type :multiple)
            (into #{} xf:map-type shapes)))

        options
        (mf/with-memo [type all-types]
          (if (= type :multiple)
            (into #{} xf:mapcat-type-to-options all-types)
            (type->options type)))


Review comment (performance):
Not sure about the context, but we usually use a `deref` instead of atom resolution for performance reasons.

Code after:
                 :else
                 shape)]
    (select-keys shape measure-attrs)))

(mf/defc numeric-input-wrapper*
  {::mf/private true}
  [{:keys [values name applied-tokens align on-detach] :rest props}]
  (let [tokens (mf/use-ctx muc/active-tokens-by-type)
        tokens (mf/with-memo [tokens name]
                 (delay
                   (-> (deref tokens)
                       (select-keys (get tk/tokens-by-input name))
                       (not-empty))))
        on-detach-attr
        (mf/use-fn
         (mf/deps on-detach name)
         #(on-detach % name))

        props  (mf/spread-props props
                                {:placeholder (if (or (= :multiple (:applied-tokens values))
                                                      (= :multiple (get values name)))
                                                (tr "settings.multiple") "--")
                                 :class (stl/css :numeric-input-measures)
                                 :applied-token (get applied-tokens name)
                                 :tokens (if (delay? tokens) @tokens tokens)
                                 :align align
                                 :on-detach on-detach-attr
                                 :value (get values name)})]
    [:> numeric-input* props]))

(def ^:private xf:map-type (map :type))
(def ^:private xf:mapcat-type-to-options (mapcat type->options))

(mf/defc measures-menu*
  [{:keys [ids values applied-tokens type shapes]}]
  (let [token-numeric-inputs
        (features/use-feature "tokens/numeric-input")

        all-types
        (mf/with-memo [type shapes]
          ;; We only need this when multiple type is used
          (when (= type :multiple)
            (into #{} xf:map-type shapes)))

        options
        (mf/with-memo [type all-types]
          (if (= type :multiple)
            (into #{} xf:mapcat-type-to-options all-types)
            (type->options type)))

        frames