Created
January 5, 2017 03:31
-
-
Save teaforthecat/43622d3ffd006ab4090ed21f631fcc40 to your computer and use it in GitHub Desktop.
example showing intent of bones-editable library
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
(defn detect-controls [{:keys [enter escape]}] | |
(fn [keypress] | |
(case (.-which keypress) | |
13 (enter) | |
;; chrome won't fire 27, so use on-blur instead | |
27 (escape) | |
nil))) | |
(defn field [form-type identifier attr html-attrs] | |
(let [path [:editable form-type identifier :inputs attr] | |
value (subscribe path) | |
input-type (or (:input-type html-attrs) :input) | |
value-attr (or (:value-attr html-attrs) :value) | |
opts (dissoc html-attrs :value-attr :input-type)] | |
(fn [] | |
[input-type (merge {:on-change #(dispatch-sync (conj path (-> % .-target .-value))) | |
value-attr @value} | |
opts)]))) | |
(defn checkbox [form-type identifier attr & {:as html-attrs}] | |
(field form-type identifier attr (merge {:type "checkbox" | |
:value-attr :checked} | |
html-attrs))) | |
(defn input [form-type identifier attr & {:as html-attrs}] | |
(field form-type identifier attr html-attrs)) | |
(defn todo-item | |
[todo] | |
(let [id (get-in todo [:inputs :id]) | |
inputs (subscribe [:editable :todos id :inputs]) | |
;; defaults (subscribe [:editable :todos id :defaults]) ;; like new | |
done (subscribe [:editable :todos id :inputs :done]) | |
label (subscribe [:editable :todos id :inputs :todo]) | |
errors (subscribe [:editable :todos id :errors]) | |
state (subscribe [:editable :todos id :state]) | |
reset #(dispatch (e/editable-reset :todos id (:reset @state))) | |
incomplete #(dispatch [:editable :todos id :inputs :done false]) | |
toggle #(dispatch [:editable :todos id :inputs :done (not %)]) | |
save #(dispatch [:request/command :todos id {:command :todos/update}]) | |
delete #(dispatch [:request/command :todos id {:command :todos/delete}]) | |
edit #(dispatch [:editable | |
[:editable :todos id :state :reset @inputs] | |
[:editable :todos id :state :editing true]])] | |
(fn [] | |
[:li {:class (str (when @done "completed ") | |
(when (:editing @state) "editing"))} | |
[:div.view | |
[checkbox :todos id :done | |
:class "toggle" | |
:on-change #(do (toggle @done) (save))] | |
[:label | |
{:on-double-click edit} | |
@label] | |
[:button.destroy | |
{:on-click delete}]] | |
(when (:editing @state) | |
[input :todos id :todo | |
:id (str id "-id") | |
:class "edit" | |
:on-blur reset | |
:on-key-down (detect-controls {:enter #(do (incomplete) (save)) | |
:escape reset})])]))) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment