React-sortable-hoc example

2018-10-19 12:56:10 +03:00 · 2018-10-19 12:56:10 +03:00 · cc69bf479e
parent bd7a2b5a99
commit cc69bf479e
3 changed files with 102 additions and 0 deletions
--- a/examples/react-sortable-hoc/project.clj
+++ b/examples/react-sortable-hoc/project.clj
@ -0,0 +1,28 @@
+(defproject reagent/react-sortable-hoc-example "0.1.0"
+  :dependencies [[org.clojure/clojure "1.9.0"]
+                 [org.clojure/clojurescript "1.10.339"]
+                 [reagent "0.8.1"]
+                 [figwheel "0.5.16"]
+                 [cljsjs/react-sortable-hoc "0.8.2-0"]]
+
+  :plugins [[lein-cljsbuild "1.1.7"]
+            [lein-figwheel "0.5.16"]]
+
+  :figwheel {:repl false
+             :http-server-root "public"}
+
+  :profiles {:dev {:resource-paths ["target/cljsbuild/client" "target/cljsbuild/client-npm"]}}
+
+  :cljsbuild
+  {:builds
+   {:client
+    {:source-paths ["src"]
+     :figwheel true
+     :compiler {:parallel-build true
+                :source-map true
+                :optimizations :none
+                :main "example.core"
+                :output-dir "target/cljsbuild/client/public/js/out"
+                :output-to "target/cljsbuild/client/public/js/main.js"
+                :asset-path "js/out"
+                :npm-deps false}}}})
--- a/examples/react-sortable-hoc/resources/public/index.html
+++ b/examples/react-sortable-hoc/resources/public/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Example</title>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Reagent example app – see README.md</h1>
+    </div>
+    <script src="js/main.js"></script>
+  </body>
+</html>
--- a/examples/react-sortable-hoc/src/example/core.cljs
+++ b/examples/react-sortable-hoc/src/example/core.cljs
@ -0,0 +1,61 @@
+(ns example.core
+  (:require [reagent.core :as r]
+            ;; FIXME: add global-exports support
+            [cljsjs.react-sortable-hoc]
+            [goog.object :as gobj]))
+
+;; Adapted from https://github.com/clauderic/react-sortable-hoc/blob/master/examples/drag-handle.js#L10
+
+(def DragHandle
+  (js/SortableHOC.SortableHandle.
+    (r/reactify-component
+      (fn [] [:span "::"]))))
+
+(def SortableItem
+  (js/SortableHOC.SortableElement.
+    (r/reactify-component
+      (fn [{:keys [value]}]
+        [:li
+         [:> DragHandle]
+         value]))))
+
+(def SortableList
+  (js/SortableHOC.SortableContainer.
+    (r/reactify-component
+      (fn [{:keys [items]}]
+        [:ul
+         (for [[value index] (map vector items (range))]
+           ;; No :> or adapt-react-class here because that would convert value to JS
+           (r/create-element
+             SortableItem
+             #js {:key (str "item-" index)
+                  :index index
+                  :value value}))]))))
+
+(defn vector-move [coll prev-index new-index]
+  (let [items (into (subvec coll 0 prev-index)
+                    (subvec coll (inc prev-index)))]
+    (-> (subvec items 0 new-index)
+        (conj (get coll prev-index))
+        (into (subvec items new-index)))))
+
+(comment
+  (= [0 2 3 4 1 5] (vector-move [0 1 2 3 4 5] 1 4)))
+
+(defn sortable-component []
+  (let [items (r/atom (vec (map (fn [i] (str "Item " i)) (range 6))))]
+    (fn []
+      (r/create-element
+        SortableList
+        #js {:items @items
+             :onSortEnd (fn [event]
+                          (swap! items vector-move (.-oldIndex event) (.-newIndex event)))
+             :useDragHandle true}))))
+
+(defn main []
+  [sortable-component])
+
+(defn start []
+  (r/render [main] (js/document.getElementById "app")))
+
+(start)