mirror of
https://github.com/penpot/penpot.git
synced 2026-05-20 07:23:42 +00:00
72 lines
1.9 KiB
Clojure
72 lines
1.9 KiB
Clojure
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
;;
|
|
;; Copyright (c) KALEIDOS INC
|
|
|
|
(ns app.main.ui.dashboard.inline-edition
|
|
(:require
|
|
[app.main.ui.icons :as i]
|
|
[app.util.dom :as dom]
|
|
[app.util.keyboard :as kbd]
|
|
[rumext.v2 :as mf]))
|
|
|
|
(mf/defc inline-edition
|
|
[{:keys [content on-end] :as props}]
|
|
(let [name (mf/use-state content)
|
|
input-ref (mf/use-ref)
|
|
|
|
on-input
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(->> (dom/get-target-val event)
|
|
(reset! name))))
|
|
|
|
on-cancel
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(dom/prevent-default event)
|
|
(dom/stop-propagation event)
|
|
(on-end @name)))
|
|
|
|
on-click
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(dom/prevent-default event)
|
|
(dom/stop-propagation event)))
|
|
|
|
on-blur
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(let [name (dom/get-target-val event)]
|
|
(on-end name))))
|
|
|
|
on-keyup
|
|
(mf/use-callback
|
|
(fn [event]
|
|
(dom/stop-propagation event)
|
|
(cond
|
|
(kbd/esc? event)
|
|
(on-cancel)
|
|
|
|
(kbd/enter? event)
|
|
(let [name (dom/get-target-val event)]
|
|
(on-end name)))))]
|
|
|
|
(mf/use-effect
|
|
(fn []
|
|
(let [node (mf/ref-val input-ref)]
|
|
(dom/focus! node)
|
|
(dom/select-text! node))))
|
|
|
|
[:div.edit-wrapper
|
|
[:input.element-title {:value @name
|
|
:ref input-ref
|
|
:on-click on-click
|
|
:on-change on-input
|
|
:on-key-down on-keyup
|
|
:on-blur on-blur}]
|
|
[:span.close {:on-click on-cancel} i/close]]))
|
|
|
|
|