diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs index 54da21ed03..d25773c9a7 100644 --- a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs +++ b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs @@ -218,6 +218,8 @@ token-applied-name* (mf/use-state applied-token-name) token-applied-name (deref token-applied-name*) + is-token-applied? (and (some? token-applied-name) + (not= :multiple token-applied-name)) focused-id* (mf/use-state nil) focused-id (deref focused-id*) @@ -501,9 +503,9 @@ on-scrub-pointer-down (mf/use-fn - (mf/deps disabled is-open is-multiple? ref min max nillable default) + (mf/deps disabled is-open is-multiple? ref min max nillable default is-token-applied?) (fn [event] - (when-not (or disabled is-open is-multiple?) + (when-not (or disabled is-open is-multiple? is-token-applied?) (let [node (mf/ref-val ref) is-focused (and (some? node) (dom/active? node)) has-token (some? (deref token-applied-name*))] @@ -518,57 +520,60 @@ on-scrub-pointer-move (mf/use-fn - (mf/deps apply-value update-input step min max on-change-start) + (mf/deps apply-value update-input step min max on-change-start is-token-applied?) (fn [event] - (let [state (mf/ref-val drag-state*)] - (when (or (= state :maybe-dragging) (= state :dragging)) - (let [client-x (.-clientX event) - start-x (mf/ref-val drag-start-x*) - delta-x (- client-x start-x)] - (when (and (= state :maybe-dragging) - (>= (js/Math.abs delta-x) 3)) - (mf/set-ref-val! drag-state* :dragging) - (dom/add-class! (dom/get-body) "cursor-drag-scrub") - (when (fn? on-change-start) - (on-change-start))) - (when (= (mf/ref-val drag-state*) :dragging) - (let [effective-step (cond - (.-shiftKey event) (* step 10) - (.-ctrlKey event) (* step 0.1) - :else step) - steps (js/Math.round (/ delta-x 1)) - new-val (mth/clamp (+ (mf/ref-val drag-start-val*) - (* steps effective-step)) - min max)] - (update-input (fmt/format-number new-val)) - (apply-value (dm/str new-val))))))))) + (when-not is-token-applied? + (let [state (mf/ref-val drag-state*)] + (when (or (= state :maybe-dragging) (= state :dragging)) + (let [client-x (.-clientX event) + start-x (mf/ref-val drag-start-x*) + delta-x (- client-x start-x)] + (when (and (= state :maybe-dragging) + (>= (js/Math.abs delta-x) 3)) + (mf/set-ref-val! drag-state* :dragging) + (dom/add-class! (dom/get-body) "cursor-drag-scrub") + (when (fn? on-change-start) + (on-change-start))) + (when (= (mf/ref-val drag-state*) :dragging) + (let [effective-step (cond + (.-shiftKey event) (* step 10) + (.-ctrlKey event) (* step 0.1) + :else step) + steps (js/Math.round (/ delta-x 1)) + new-val (mth/clamp (+ (mf/ref-val drag-start-val*) + (* steps effective-step)) + min max)] + (update-input (fmt/format-number new-val)) + (apply-value (dm/str new-val)))))))))) on-scrub-pointer-up (mf/use-fn - (mf/deps ref on-change-end) + (mf/deps ref on-change-end is-token-applied?) (fn [event] - (let [state (mf/ref-val drag-state*)] - (when (= state :maybe-dragging) - (mf/set-ref-val! drag-state* :idle) - (dom/release-pointer event) - (when-let [node (mf/ref-val ref)] - (dom/focus! node))) - (when (= state :dragging) - (mf/set-ref-val! drag-state* :idle) - (dom/remove-class! (dom/get-body) "cursor-drag-scrub") - (dom/release-pointer event) - (when (fn? on-change-end) - (on-change-end)))))) + (when-not is-token-applied? + (let [state (mf/ref-val drag-state*)] + (when (= state :maybe-dragging) + (mf/set-ref-val! drag-state* :idle) + (dom/release-pointer event) + (when-let [node (mf/ref-val ref)] + (dom/focus! node))) + (when (= state :dragging) + (mf/set-ref-val! drag-state* :idle) + (dom/remove-class! (dom/get-body) "cursor-drag-scrub") + (dom/release-pointer event) + (when (fn? on-change-end) + (on-change-end))))))) on-scrub-lost-pointer-capture (mf/use-fn - (mf/deps on-change-end) + (mf/deps on-change-end is-token-applied?) (fn [_event] - (let [was-dragging (= :dragging (mf/ref-val drag-state*))] - (mf/set-ref-val! drag-state* :idle) - (dom/remove-class! (dom/get-body) "cursor-drag-scrub") - (when (and was-dragging (fn? on-change-end)) - (on-change-end))))) + (when-not is-token-applied? + (let [was-dragging (= :dragging (mf/ref-val drag-state*))] + (mf/set-ref-val! drag-state* :idle) + (dom/remove-class! (dom/get-body) "cursor-drag-scrub") + (when (and was-dragging (fn? on-change-end)) + (on-change-end)))))) open-dropdown (mf/use-fn @@ -766,15 +771,15 @@ (mf/with-effect [dropdown-options] (mf/set-ref-val! options-ref dropdown-options)) - [:div {:class [class (stl/css :input-wrapper)] + [:div {:class [class (stl/css-case :input-wrapper true + :resizable (not is-token-applied?))] :ref wrapper-ref :on-pointer-down on-scrub-pointer-down :on-pointer-move on-scrub-pointer-move :on-pointer-up on-scrub-pointer-up :on-lost-pointer-capture on-scrub-lost-pointer-capture} - (if (and (some? token-applied-name) - (not= :multiple token-applied-name)) + (if is-token-applied? [:> token-field* token-props] [:> input-field* input-props]) diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.scss b/frontend/src/app/main/ui/ds/controls/numeric_input.scss index 60741e7d0b..80b44a94f1 100644 --- a/frontend/src/app/main/ui/ds/controls/numeric_input.scss +++ b/frontend/src/app/main/ui/ds/controls/numeric_input.scss @@ -22,8 +22,10 @@ inline-size: 100%; position: relative; - &:not(:focus-within) { - cursor: ew-resize; + &.resizable { + &:not(:focus-within) { + cursor: ew-resize; + } } &:hover {