-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated to recent Reagent and Fluent UI (formerly Fabric)
- Loading branch information
1 parent
a3605ff
commit 1ae3e95
Showing
9 changed files
with
117 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,29 @@ | ||
| { | ||
| "name": "fabric-todos", | ||
| "version": "1.0.0", | ||
| "description": "TODOs application in CLJS, Reagent and Microsoft UI Fabric React", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "watch": "shadow-cljs watch app", | ||
| "compile": "shadow-cljs compile app", | ||
| "release": "shadow-cljs release app", | ||
| "html": "mkdir -p target && cp assets/index.html target/", | ||
| "serve": "yarn html && http-server target/", | ||
| "del": "rm -r target/*", | ||
| "build": "yarn release && yarn html && yarn serve" | ||
| }, | ||
| "author": "Denis Fuenzalida", | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "http-server": "^0.11.1", | ||
| "shadow-cljs": "^2.8.40" | ||
| }, | ||
| "dependencies": { | ||
| "create-react-class": "^15.6.3", | ||
| "office-ui-fabric-react": "^6.195.3", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6" | ||
| } | ||
| "name": "fabric-todos", | ||
| "version": "1.0.0", | ||
| "description": "TODOs application in ClojureScript, Reagent and Microsoft Fluent UI", | ||
| "main": "index.js", | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "http-server": "^0.12.3", | ||
| "shadow-cljs": "^2.11.7" | ||
| }, | ||
| "dependencies": { | ||
| "@fluentui/react": "^7.149.3", | ||
| "@uifabric/icons": "^7.5.15", | ||
| "create-react-class": "^15.7.0", | ||
| "react": "^16.13.0", | ||
| "react-dom": "^16.13.0" | ||
| }, | ||
| "author": "Denis Fuenzalida", | ||
| "license": "MIT", | ||
| "scripts": { | ||
| "watch": "shadow-cljs watch app", | ||
| "compile": "shadow-cljs compile app", | ||
| "release": "shadow-cljs release app", | ||
| "html": "mkdir -p target && cp assets/index.html target/", | ||
| "serve": "yarn html && http-server target/", | ||
| "del": "rm -r target/*", | ||
| "build": "yarn release && yarn html && yarn serve" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,7 @@ | ||
| {:source-paths ["src"] | ||
| :dependencies [[reagent "0.8.1"] | ||
| [thheller/shadow-cljsjs "0.0.18"]] | ||
| :dependencies [[reagent "1.0.0-alpha2"]] | ||
| :dev-http {8080 "target/"} | ||
| :builds {:app {:output-dir "target/" | ||
| :builds {:app {:target :browser | ||
| :output-dir "target" | ||
| :asset-path "." | ||
| :target :browser | ||
| :compiler-options {:infer-externs :auto} | ||
| :modules {:main {:init-fn fabric-todos.core/init!}} | ||
| :devtools {:after-load fabric-todos.core/reload!}}}} | ||
| :modules {:main {:init-fn fabric-todos.core/main!}}}}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,33 @@ | ||
| (ns fabric-todos.core | ||
| (:require [fabric-todos.fabric :as fab] | ||
| (:require ["@fluentui/react" :as f] | ||
| ["@uifabric/icons" :as ui] | ||
| [reagent.dom :as rdom] | ||
| [fabric-todos.header :as header] | ||
| [fabric-todos.todo-list :as todo-list] | ||
| [fabric-todos.footer :as footer] | ||
| [reagent.core :as r])) | ||
| [fabric-todos.footer :as footer])) | ||
|
|
||
| ;; Main application ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; | ||
|
|
||
| (defn todo-app [] | ||
| [:> fab/Stack {:horizontalAlign "center"} | ||
| [:> fab/Stack {:style {:width 400} :gap 25} | ||
| [:> f/Stack {:horizontalAlign "center"} | ||
| [:> f/Stack {:style {:width 400} :tokens {:childrenGap 25}} | ||
| (header/todo-header) | ||
| (todo-list/todo-list) | ||
| (footer/todo-footer)]]) | ||
|
|
||
| ;; App initialization ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; | ||
|
|
||
| (defn mount-root [] | ||
| (r/render [todo-app] (.getElementById js/document "app"))) | ||
| (rdom/render [todo-app] (.getElementById js/document "app"))) | ||
|
|
||
| (defn init! [] | ||
| (mount-root) | ||
| (fab/init-icons!) | ||
| (header/focus-new-todo)) | ||
| (defn init-ui [] | ||
| (mount-root)) | ||
|
|
||
| (defn reload! [] | ||
| (println "reloading...")) | ||
| (defn main! [] | ||
| (println "starting...") | ||
| (ui/initializeIcons) | ||
| (init-ui)) | ||
|
|
||
| (defn ^:dev/after-load reload! [] | ||
| (println "reloading...") | ||
| (init-ui)) |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| (ns fabric-todos.footer | ||
| (:require [fabric-todos.fabric :as fab] | ||
| (:require ["@fluentui/react" :as f] | ||
| [fabric-todos.state :as state])) | ||
|
|
||
| (defn todo-footer [] | ||
| (let [remaining (count (state/remaining-todos)) | ||
| label (str remaining " item" (when-not (= 1 remaining) "s") " left")] | ||
| [:> fab/Stack {:horizontal true :horizontalAlign "space-between"} | ||
| [:> fab/Text label] | ||
| [:> fab/DefaultButton {:onClick state/clear-completed} "Clear Completed"]])) | ||
| [:> f/Stack {:horizontal true :horizontalAlign "space-between"} | ||
| [:> f/Text label] | ||
| [:> f/DefaultButton {:onClick state/clear-completed} "Clear Completed"]])) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,28 @@ | ||
| (ns fabric-todos.todo-list | ||
| (:require [fabric-todos.fabric :as fab] | ||
| (:require ["@fluentui/react" :as f] | ||
| [fabric-todos.state :as state] | ||
| [reagent.core :refer [atom]])) | ||
|
|
||
| (defn todo-item [{:keys [id text editing done] :as item}] | ||
| [:div {:key (str "stack" id)} | ||
| [:> fab/Stack {:horizontal true :horizontalAlign "space-between" :verticalAlign "center"} | ||
| [:> f/Stack {:horizontal true :horizontalAlign "space-between" :verticalAlign "center"} | ||
| (if editing | ||
| (let [text-value (atom text) | ||
| update-fn (fn [ev val] (reset! text-value val))] | ||
| [:> fab/Stack.Item {:grow true} | ||
| [:> fab/Stack {:horizontal true} | ||
| [:> fab/Stack.Item {:grow true} | ||
| [:> fab/TextField {:value @text-value :onChange update-fn :onKeyDown update-fn}]] | ||
| [:> fab/DefaultButton {:onClick #(state/update-todo id @text-value)} "save"]]]) | ||
| [:> f/Stack.Item {:grow true} | ||
| [:> f/Stack {:horizontal true} | ||
| [:> f/Stack.Item {:grow true} | ||
| [:> f/TextField {:value @text-value :onChange update-fn :onKeyDown update-fn}]] | ||
| [:> f/DefaultButton {:onClick #(state/update-todo id @text-value)} "save"]]]) | ||
| ;; else | ||
| [:<> | ||
| [:> fab/Checkbox {:label text :checked done :onChange #(state/toggle-done id)}] | ||
| [:> f/Checkbox {:label text :checked done :onChange #(state/toggle-done id)}] | ||
| [:div | ||
| [:> fab/IconButton {:iconProps {:iconName "Edit"} :className "clearButton" :onClick #(state/edit-todo id)}] | ||
| [:> fab/IconButton {:iconProps {:iconName "Cancel"} :className "clearButton" :onClick #(state/delete-todo id)}]]]) | ||
| [:> f/IconButton {:iconProps {:iconName "Edit"} :className "clearButton" :onClick #(state/edit-todo id)}] | ||
| [:> f/IconButton {:iconProps {:iconName "Cancel"} :className "clearButton" :onClick #(state/delete-todo id)}]]]) | ||
| ]]) | ||
|
|
||
| (defn todo-list [] | ||
| [:> fab/Stack {:gap 10} | ||
| [:> f/Stack {:tokens {:childrenGap 10}} | ||
| (map todo-item (state/filtered-todos))]) | ||
|
|