diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 9ce9ae13d..267cf66be 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -86,10 +86,8 @@ (when-not (get-in @form [:touched input-name]) (swap! form assoc-in [:touched input-name] true))) - - props (-> props - (dissoc :help-icon :form :trim :children) + (dissoc :help-icon :form :trim :children :show-success?) (assoc :id (name input-name) :value value :auto-focus auto-focus? @@ -152,8 +150,6 @@ [:> :input props] children]) - - (cond (and touched? (:message error)) [:div {:id (dm/str "error-" input-name) @@ -291,20 +287,17 @@ (mf/defc submit-button* {::mf/wrap-props false} - [props] - (let [form (or (unchecked-get props "form") - (mf/use-ctx form-ctx)) - - label (unchecked-get props "label") - on-click (unchecked-get props "onClick") - children (unchecked-get props "children") - - class (d/nilv (unchecked-get props "className") "btn-primary btn-large") - name (d/nilv (unchecked-get props "name") "submit") + [{:keys [on-click children label form class-name name disabled] :as props}] + (let [form (or form (mf/use-ctx form-ctx)) disabled? (or (and (some? form) (not (:valid @form))) - (true? (unchecked-get props "disabled"))) - new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) "")) + (true? disabled)) + + class (dm/str (d/nilv class-name "btn-primary btn-large") + " " + (if disabled? (stl/css :btn-disabled) "")) + + name (d/nilv name "submit") on-key-down (mf/use-fn @@ -313,14 +306,15 @@ (when (and (kbd/enter? event) (fn? on-click)) (on-click event)))) - props (-> (obj/clone props) - (obj/unset! "children") - (obj/set! "disabled" disabled?) - (obj/set! "onKeyDown" on-key-down) - (obj/set! "name" name) - (obj/set! "label" mf/undefined) - (obj/set! "className" new-klass) - (obj/set! "type" "submit"))] + props + (-> (obj/clone props) + (obj/set! "children" mf/undefined) + (obj/set! "disabled" disabled?) + (obj/set! "onKeyDown" on-key-down) + (obj/set! "name" name) + (obj/set! "label" mf/undefined) + (obj/set! "className" class) + (obj/set! "type" "submit"))] [:> "button" props (if (some? children) @@ -331,6 +325,7 @@ {::mf/wrap-props false} [{:keys [on-submit form children class]}] (let [on-submit' (mf/use-fn + (mf/deps on-submit) (fn [event] (dom/prevent-default event) (when (fn? on-submit) diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index f850128ac..9cee007d9 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -102,8 +102,8 @@ :label (tr "onboarding.choice.team-up.create-team-placeholder")}] [:div {:class (stl/css :action-buttons)} - [:& fm/submit-button* - {:className (stl/css :accept-button) + [:> fm/submit-button* + {:class (stl/css :accept-button) :label (tr "onboarding.choice.team-up.continue-creating-team")}]]]] [:div {:class (stl/css :second-block)} [:h2 {:class (stl/css :modal-title)} @@ -236,12 +236,11 @@ :step 2}))} (tr "labels.back")] - [:& fm/submit-button* - {:className (stl/css :accept-button) - :label - (if (> (count emails) 0) - (tr "onboarding.choice.team-up.create-team-and-invite") - (tr "onboarding.choice.team-up.create-team-without-invite"))}]] + [:> fm/submit-button* + {:class (stl/css :accept-button) + :label (if (> (count emails) 0) + (tr "onboarding.choice.team-up.create-team-and-invite") + (tr "onboarding.choice.team-up.create-team-without-invite"))}]] [:div {:class (stl/css :modal-hint)} (tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]] diff --git a/frontend/src/app/util/object.cljs b/frontend/src/app/util/object.cljs index 892e9e7fe..74af90102 100644 --- a/frontend/src/app/util/object.cljs +++ b/frontend/src/app/util/object.cljs @@ -86,10 +86,16 @@ obj))) (defn- props-key-fn - [key] - (if (or (= key :class) (= key :class-name)) - "className" - (str/camel (name key)))) + [k] + (if (or (keyword? k) (symbol? k)) + (let [nword (name k)] + (cond + (= nword "class") "className" + (str/starts-with? nword "--") nword + (str/starts-with? nword "data-") nword + (str/starts-with? nword "aria-") nword + :else (str/camel nword))) + k)) (defn clj->props [props]