Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-11 17:48:42 -05:00
Code Issues Activity

Update the input field value when chosing color from color ramp

Browse source
This commit is contained in:
Florian Schroedl 2024-09-18 17:15:45 +02:00
parent 6084c49582
commit 8804d1432e
1 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -244,6 +244,7 @@ Token names should only contain letters and digits separated by . characters.")}
;; Value ;; Value
color (mf/use-state (when color? (:value token))) color (mf/use-state (when color? (:value token)))
color-ramp-open? (mf/use-state false) color-ramp-open? (mf/use-state false)
value-input-ref (mf/use-ref nil)
value-ref (mf/use-var (:value token)) value-ref (mf/use-var (:value token))
token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])) token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
set-resolve-value (mf/use-callback set-resolve-value (mf/use-callback
@ -265,6 +266,7 @@ Token names should only contain letters and digits separated by . characters.")}
(mf/deps on-update-value-debounced) (mf/deps on-update-value-debounced)
(fn [hex-value] (fn [hex-value]
(reset! value-ref hex-value) (reset! value-ref hex-value)
(set! (.-value (mf/ref-val value-input-ref)) hex-value)
(on-update-value-debounced hex-value))) (on-update-value-debounced hex-value)))
value-error? (seq (:errors @token-resolve-result)) value-error? (seq (:errors @token-resolve-result))
valid-value-field? (and valid-value-field? (and
@ -342,7 +344,8 @@ Token names should only contain letters and digits separated by . characters.")}
[:& tokens.common/labeled-input {:label "Value" [:& tokens.common/labeled-input {:label "Value"
:input-props {:default-value @value-ref :input-props {:default-value @value-ref
:on-blur on-update-value :on-blur on-update-value
:on-change on-update-value} :on-change on-update-value
:ref value-input-ref}
:render-right (when color? :render-right (when color?
(mf/fnc [] (mf/fnc []
[:div {:class (stl/css :color-bullet) [:div {:class (stl/css :color-bullet)