Browse Source

added enter key effect handling

Brandon Wong 3 years ago
parent
commit
7fe52628c7

+ 24 - 0
frontend/src/cljs/microtables_frontend/events.cljs

@@ -43,3 +43,27 @@
     (println "::edit-cell-value" c r value)
     (update-in db [:table-data] #(utils/change-datum-value % c r value))))
 
+; handle pressing enter (move to the next cell down)
+; tab is taken care of natively, and is good enough
+(re-frame/reg-event-fx
+  ::press-enter-in-cell
+  (fn [{:keys [db]} [_ c r]]
+    (let [max-row? (= (utils/highest-row (:table-data db)) r)
+          max-col? (= (utils/highest-col (:table-data db)) c)
+          new-col (if max-row?
+                    (if max-col?
+                      "A"
+                      (utils/next-letter c))
+                    c)
+          new-row (if max-row?
+                    1
+                    (inc r))]
+      (println "::press-enter-in-cell" c r)
+      {:focus-on-cell [new-col new-row]})))
+
+(re-frame/reg-fx
+  :focus-on-cell
+  (fn [[c r]]
+    (println "fx for :press-enter" c r)
+    (.focus (.getElementById js/document (str c r)))))
+

+ 3 - 1
frontend/src/cljs/microtables_frontend/views.cljs

@@ -17,7 +17,9 @@
                                          (get datum :error (get datum :display (get datum :value ""))));TODO: add "highlight" display mode (possibly just a css class)
                                 :on-change #(re-frame/dispatch [::events/edit-cell-value c r (.. % -target -value)])
                                 :on-focus #(re-frame/dispatch [::events/movement-enter-cell c r])
-                                :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])}]]))
+                                :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])
+                                :on-keyPress #(when (= (.. % -which) 13)
+                                                (re-frame/dispatch [::events/press-enter-in-cell c r]))}]]))
 
 (defn row [r cols data]
   ^{:key (str "row-" r)} [:tr