editable.cljs

(ns probe.components.editable
  (:require [rum.core :as rum]))

; Component that will replace itself with an input
; When user clicks on it and back to span when it loses focus
(rum/defcs editable-ui
  < rum/reactive (rum/local false ::focused)
  [react-state value-atom on-change]
  (let [local   (::focused react-state)
        value   (rum/react value-atom)
        focused (rum/react local)]
    (if focused
      [:input {:autoFocus true
               :value     value
               :on-change #(on-change (aget % "target" "value"))
               :on-blur   #(reset! local false)}]
      [:span {:on-click #(reset! local true)} "value: " value])))

; input[type=text] that autoresises itself based on the length
; of it's content, provided by external atom
(rum/defc input-ui < rum/reactive
  [value-atom on-change]
  (let [value (rum/react value-atom)
        size  (count value)]
    [:input.autosize
     {:value     value
      :size      (if (= size 0) 1 size)
      :on-change #(on-change (aget % "target" "value"))}]))

; input[type=text] that autoresises itself based on the length
; of it's content, which is kept in component's state
(rum/defcs input-local-ui < rum/reactive (rum/local nil ::value)
  [react-state placeholder]
  (let [state (::value react-state)
        value (rum/react state)
        size  (count value)]
    [:input.autosize
     {:placeholder placeholder
      :value       value
      :size        (if (= size 0)
                     (count placeholder) size)
      :class       (if (or (nil? value) (= placeholder value))
                     "unchanged" "changed")
      :on-click    #(do (.stopPropagation %)
                        (doto (aget % "target")
                          (.focus)
                          (.select)))
      :on-change   #(reset! state (aget % "target" "value"))}]))