Repository: penpot/penpot
File: frontend/src/app/main/ui/ds/controls/switch.cljs (ClojureScript)

Code before:
        is-checked* (mf/use-state (d/nilv default-checked false))
        is-checked  (deref is-checked*)

        disabled    (d/nilv disabled false)

        has-label   (not (str/blank? label))

        handle-toggle
        (mf/use-fn
         (mf/deps on-change is-checked* disabled)
         (fn []
           (when-not disabled
             (let [new-checked (not is-checked)]
               (reset! is-checked* new-checked)
               (when on-change
                 (on-change new-checked))))))

        handle-keydown
        (mf/use-fn
         (mf/deps handle-toggle)
         (fn [event]
           (when (or (kbd/space? event) (kbd/enter? event))
             (dom/prevent-default event)
             (handle-toggle event))))

        props (mf/spread-props props {:ref ref
                                      :role "switch"
                                      :aria-label (when-not has-label
                                                    aria-label)
                                      :class [class (stl/css-case :switch true
                                                                  :checked is-checked)]
                                      :aria-checked is-checked
                                      :disabled disabled
                                      :on-click handle-toggle
                                      :on-key-down handle-keydown
                                      :tab-index (if disabled -1 0)})]
    [:div {:ref ref
           :role "switch"
           :aria-label (when-not has-label
                         aria-label)
           :class [class (stl/css-case :switch true
                                       :checked is-checked)]
           :aria-checked is-checked
           :disabled disabled
           :on-click handle-toggle
           :on-key-down handle-keydown
           :tab-index (if disabled -1 0)}

     (when has-label
       [:label {:for id
                :class (stl/css :switch-label)}

Review comment (suggestion):
I suggest adding a line break here after `props` for preserve the same style of let binding formatting in this group

Code after:
        disabled?  (d/nilv disabled false)

        has-label? (not (str/blank? label))

        handle-toggle
        (mf/use-fn
         (mf/deps on-change checked? disabled?)
         #(when-not disabled?
            (let [updated-checked? (not checked?)]
              (reset! checked* updated-checked?)
              (when on-change
                (on-change updated-checked?)))))

        handle-keydown
        (mf/use-fn
         (mf/deps handle-toggle)
         (fn [event]
           (dom/prevent-default event)
           (when-not disabled?
             (when (or (kbd/space? event) (kbd/enter? event))
               (handle-toggle event)))))

        props
        (mf/spread-props props {:ref ref
                                :role "switch"
                                :aria-label (when-not has-label?
                                              aria-label)
                                :class [class (stl/css-case :switch true
                                                            :off (false? checked?)
                                                            :neutral (nil? checked?)
                                                            :on (true? checked?))]
                                :aria-checked checked?
                                :tab-index (if disabled? -1 0)
                                :on-click handle-toggle
                                :on-key-down handle-keydown
                                :disabled disabled?})]

    [:> :div props
     (when has-label?
       [:label {:for id
                :class (stl/css :switch-label)}
        label])

     [:div {:id id
            :class (stl/css :switch-track)}
      [:div {:class (stl/css :switch-thumb)}]]]))