diff --git a/examples/react-sortable-hoc/project.clj b/examples/react-sortable-hoc/project.clj new file mode 100644 index 0000000..548babc --- /dev/null +++ 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}}}}) diff --git a/examples/react-sortable-hoc/resources/public/index.html b/examples/react-sortable-hoc/resources/public/index.html new file mode 100644 index 0000000..00b8456 --- /dev/null +++ b/examples/react-sortable-hoc/resources/public/index.html @@ -0,0 +1,13 @@ + + + + + Example + + +
+

Reagent example app – see README.md

+
+ + + diff --git a/examples/react-sortable-hoc/src/example/core.cljs b/examples/react-sortable-hoc/src/example/core.cljs new file mode 100644 index 0000000..b0bf6f5 --- /dev/null +++ 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)