day8 / re-com Goto Github PK

Hi,
I have a stateful reagent component as one the two panels in a h-split. When the splitter is dragged, I need to do some work to show the appropriate things [update some canvas updated animation].

Is it possible to pass an on-drag-complete function to a splitter? The default value could just be the identity function or you could check if the function if not nil and if so, call it.

It could possibly be called here: L146.

Thanks

Please let me validate input-text input with my own fn. Right now I have to do it in on-change, but would like to use re-com's validation statuses.

The icon font used by re-com http://zavoloklom.github.io/material-design-iconic-font/icons.html has moved from v1 to v2.

In the process the icons have changed name. http://zavoloklom.github.io/material-design-iconic-font/v1/ What was md- has become zmdi- so upgrading to v2 will be a breaking change.

I actually found this very useful hack in Android.

You can add a border to your UI components/containers so that they show their size/position.

In re-com you already have the border border component and it would be great to wrap each and every other UI element in a in when in dev mode.

Another maybe simpler idea is to have a with-border macro that wraps when you need it. This last idea is almost already in place here 👍

Great tool by the way, even if flexbox sometimes makes me crazy.

When Chrome 45 becomes stable (Aug 2015?), remove this warning in the h-box demo:
There is a bug in Chrome. When switching from :between to :around (or visa versa), the change is not shown. To get around this, select a different value beforehand.

Chrome 45 contains a fix for the bug. It might even be in Chrome 44.

First, thanks so much for creating re-com. I'm a huge fan of re-frame, and while I'm using a bunch of widgets from Flat UI, the components from re-com are really nice to use, and I'll probably start using them more in the future.

I used h-box and radio buttons in my app, which I'm moving into production. It works great with lein figwheel, but after advanced compilation those pages won't load with TypeError: GO.mh is undefined.

I am pretty sure this is an externs issue. I've included the Bootstrap externs js file, but no joy. Do you have any tips or tricks for dealing with this?

(ns ^:figwheel-always x.core
   (:require [re-com.core :refer [v-box label title p gap]]
             [re-com.util :refer [get-element-by-id]]
             [reagent.core :as reagent]))


(defn main []
 [gap :size "1em"])

(defn ^:export mount-ui
 []
 (reagent/render [main] (get-element-by-id "app")))

(mount-ui)

I get this exception when I try to run that code: Uncaught TypeError: Cannot read property 'call' of undefined. Any ideas what can cause it? If I use [p "text here"] it works, and any normal functions that I define ala reagent works

I'm pretty sure that this is obviated by adding a :figwheel :on-jsload key to the figwheel build steps. I'll take a look in a bit if no-one gets to it first.

In several cases in re-com.buttons, an internal atom called showing? keeps track of whether or not a tool tip is showing on a host component. The atom's state is changed only by handling on-mouse-over and on-mouse-out events.

When a button becomes disabled, it no longer receives on-mouse-over or on-mouse-out events. The state of showing? at the time the button is disabled becomes "stuck" at whatever value it has. If pressing a button causes the pressed button to become disabled (e.g., a "delete the selected items" button), the tooltip gets stuck showing on screen.

I have a fix for this that works for me. I'm happy to make a pull request for this and the other cases in re-com.buttons, but I don't see any good way to write a unit test for it.

Here's an example of the suggested addition:

index d0a0a6c..656940e 100644
--- a/src/re_com/buttons.cljs
+++ b/src/re_com/buttons.cljs
@@ -44,10 +44,12 @@
                           (when tooltip
                             {:on-mouse-over (handler-fn (reset! showing? true))
                              :on-mouse-out  (handler-fn (reset! showing? false))})
                           attr)
                         label]]
+        (when disabled?
+          (reset! showing? false))
         [box
          :class "display-inline-flex"
          :align :start
          :child (if tooltip
                   [popover-tooltip

Tested with Firefox 38 on Ubuntu 14.04
Working (or rather not working) example:
http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/input-text

Type something into the input-text field and try to select all with ctrl-a.

Hi,
Firstly a great library. Its really well done!

I am also building an atom-shell app using cljs, reagent and bootstrap. So this fits in really neatily into the stack.

I had a suggesting for enhancement, namely being able to apply a custom function to a label on a tab. I noticed that strictly speaking it doesn't need to be a string. The label just gets nested inside a :a tag.

I suggest that instead of :label being a requirement for an element :tabs, the user have an option to give a label-fn which when given an id produces the correct markup.

My use case is that I have dynamic tabs some of which can be closed. This can be done with the current API itself but not in a clean way.

Thanks!

P.S. I am happy to submit a PR.

Can you add this pretty please
Though it does work if I put it in the :style map

Stu

I know re-com uses the material icons, but I'll let you know anyways...

Font-Awesome icons will appear on top of the modal (both the panel and the backdrop) when they come AFTER the modal on the PAGE.

See how every FA icon below the red line appears on top:

Everything works fine with the material icons, which is weird considering how similar they are. Both uses the :before pseudo-element.

Here's the FA i.fa.fa-list replaced by the material i.md.md-list:

Works as expected.

I noticed a clear degradation in performance as my re-com project was going forward.

The more re-com components, the more Firefox was lagging, until it became totally unusable.

I'm now trying to replace all non-essential re-com components (where flex isn't required) by classical :span and :div and I'm noticing an improvement.

I don't know yet if it's caused by the flex-boxes, or simply by the additional overhead, but nonetheless I think the readme should reflect that.

For example: https://github.com/Day8/re-com/blob/master/src/re_com/modal_panel.cljs#L49 and https://github.com/Day8/re-com/blob/master/src/re_com/splits.cljs#L120

The components aren't compatible with bootstrap dark themes because of this.
IMO colors shouldn't be hardcoded. A possible middle ground could be to use classes.
(Re-com already needs its own CSS anyway.)

Added [re-com "0.5.4"] dependency and boot dev throws this:

clojure.lang.Compiler$CompilerException: java.lang.IllegalArgumentException: No single method: _setup of interface: cljs.repl.IJavaScriptEnv found for function: -setup of protocol: IJavaScriptEnv, compiling:(cemerick/piggieback.clj:149:5)
     java.lang.IllegalArgumentException: No single method: _setup of interface: cljs.repl.IJavaScriptEnv found for function: -setup of protocol: IJavaScriptEnv

Feels like a weird dependency conflict. Here are my other dependencies:

[org.clojure/clojurescript "0.0-3308" :scope "provided"]
[reagent "0.5.0"]
[re-frame "0.4.1"]
[re-com "0.5.4"]
[matchbox "0.0.7-SNAPSHOT"]
[secretary "1.2.3"]]

Could you provide an example of hooking up a re-com element to re-frame's app-db?

My attempt required some unexpected hacks:

(def path [:my-form])
(def path-m (re-frame.core/path path))

(register-handler
  ::input-changed
  [debug path-m]
  (fn [db' [_ k value]]
    (assoc db' k value)))

(register-sub
 ::input
  (fn [db [_ k]]
    (reaction (get-in @db (conj path k)))))

(defn address-input []
  (let [address (subscribe [::input :address])])]
    (fn []
       [rc/input-text
       :model (or @address "")
       :on-change #(dispatch [::input-changed :address %])])))

In particular, without the (or @address ""), I get an error on the initial page load: Validation failed for argument ':model' in component 'input-text': Expected 'string | atom'. Got 'nil'

More a question than a real issue, but why is the demo going through all the trouble of keeping track of the mouse to update the background color of the left navigation panel, when it could just use CSS?

Is it just to demonstrate re-com capabilities?

Was curious if this could be implemented or how for that matter in re-com or reagent.

On Line 39 of text.clj, str function is applied to label which I am guessing isn't the intended behaviour.

Fix would be to not apply the str function.

Thanks

(I apologize for opening all these issues... I'm converting a project to this awesome library and discovering a few corner cases.)

The row-button doesn't work very well in a table.
The tooltip is truncated by the top and bottom rows, as well as the left and right cell.

On re-com demo, when adding a big div before a dropdown, like the one below, clicking on the dropdown will cause some unexpected scrolling.

diff --git a/src/re_demo/dropdowns.cljs b/src/re_demo/dropdowns.cljs
index 3e7fa3e..182a39a 100644
--- a/src/re_demo/dropdowns.cljs
+++ b/src/re_demo/dropdowns.cljs
@@ -327,6 +327,7 @@
                                :width     "700px"
                                :gap       "10px"
                                :children  [[title2 "Demo"]
+                                           [:div {:style {:height "1000px"  } }]
                                            [h-box
                                             :gap      "10px"
                                             :align    :center

Tested with browser chromium, Version 41.0.2272.118 (64-bit)

See this SO question:

http://stackoverflow.com/questions/33152382/create-a-footer-using-re-com-box-layout-containers

:align-self :end is being ignored

Currently the datepicker decides to enable/disable a date based on the day of the week and the user can decide select which days to enable/disable.

Is it possible to pass a function to the datepicker which decides whether to enable or disable a date? This would allow for fine grain support of this feature.

Thanks

selection-lists can take an list as their :choices parameter
single-dropdowns fail with this error

Validation failed for argument ':choices' in component 'single-dropdown': Expected 'vector of choices | atom'. Got '({:id :market, :label "Market", :category :member-set, :s...'re_com.validate.log_error.cljs$core$IFn$_invoke$arity$variadic @ validate.cljs:21re_com$validate$log_error @ validate.cljs:18re_com.validate.validate_fns_pass_QMARK_.validate_arg @ validate.cljs:90(anonymous function) @ core.cljs:4067cljs.core.map.cljs$core$IFn$_invoke$arity$2 @ core.cljs:4067(anonymous function) @ core.cljs:2863cljs.core.LazySeq.sval @ core.cljs:2863cljs.core.LazySeq.cljs$core$ISeqable$_seq$arity$1 @ core.cljs:2905cljs$core$seq @ core.cljs:943cljs.core.Cons.cljs$core$INext$_next$arity$1 @ core.cljs:2736cljs$core$next @ core.cljs:988cljs.core.LazySeq.cljs$core$INext$_next$arity$1 @ core.cljs:2888cljs$core$next @ core.cljs:988cljs$core$every_QMARK_ @ core.cljs:3606re_com$validate$validate_fns_pass_QMARK_ @ validate.cljs:79re_com.validate.validate_args.cljs$core$IFn$_invoke$arity$variadic @ validate.cljs:110re_com$validate$validate_args @ validate.cljs:97re_com.dropdown.single_dropdown.cljs$core$IFn$_invoke$arity$variadic @ dropdown.cljs:217re_com.dropdown.single_dropdown.cljs$lang$applyTo @ dropdown.cljs:210cljs.core.apply.cljs$core$IFn$_invoke$arity$2 @ core.cljs:3300cljs$core$apply @ core.cljs:3292(anonymous function) @ component.cljs:45reagent$impl$component$do_render @ component.cljs:45(anonymous function) @ component.cljs:64reagent$ratom$capture_derefed @ ratom.cljs:18reagent$impl$batching$run_reactively @ batching.cljs:95(anonymous function) @ component.cljs:64ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ react.inc.js:6975ReactCompositeComponentMixin._renderValidatedComponent @ react.inc.js:7002wrapper @ react.inc.js:13427ReactCompositeComponentMixin.mountComponent @ react.inc.js:6423wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactMultiChild.Mixin.mountChildren @ react.inc.js:12871ReactDOMComponent.Mixin._createContentMarkup @ react.inc.js:7737ReactDOMComponent.Mixin.mountComponent @ react.inc.js:7647ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactMultiChild.Mixin.mountChildren @ react.inc.js:12871ReactDOMComponent.Mixin._createContentMarkup @ react.inc.js:7737ReactDOMComponent.Mixin.mountComponent @ react.inc.js:7647ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactMultiChild.Mixin.mountChildren @ react.inc.js:12871ReactDOMComponent.Mixin._createContentMarkup @ react.inc.js:7737ReactDOMComponent.Mixin.mountComponent @ react.inc.js:7647ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactMultiChild.Mixin.mountChildren @ react.inc.js:12871ReactDOMComponent.Mixin._createContentMarkup @ react.inc.js:7737ReactDOMComponent.Mixin.mountComponent @ react.inc.js:7647ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactMultiChild.Mixin.mountChildren @ react.inc.js:12871ReactDOMComponent.Mixin._createContentMarkup @ react.inc.js:7737ReactDOMComponent.Mixin.mountComponent @ react.inc.js:7647ReactReconciler.mountComponent @ react.inc.js:14128ReactCompositeComponentMixin.mountComponent @ react.inc.js:6433wrapper @ react.inc.js:13427ReactReconciler.mountComponent @ react.inc.js:14128ReactMultiChild.Mixin._mountChildByNameAtIndex @ react.inc.js:13079ReactMultiChild.Mixin._updateChildren @ react.inc.js:12985ReactMultiChild.Mixin.updateChildren @ react.inc.js:12930ReactDOMComponent.Mixin._updateDOMChildren @ react.inc.js:7918ReactDOMComponent.Mixin.updateComponent @ react.inc.js:7767ReactDOMComponent.Mixin.receiveComponent @ react.inc.js:7751ReactReconciler.receiveComponent @ react.inc.js:14187ReactCompositeComponentMixin._updateRenderedComponent @ react.inc.js:6934ReactCompositeComponentMixin._performComponentUpdate @ react.inc.js:6912ReactCompositeComponentMixin.updateComponent @ react.inc.js:6828wrapper @ react.inc.js:13427ReactCompositeComponentMixin.receiveComponent @ react.inc.js:6692ReactReconciler.receiveComponent @ react.inc.js:14187ReactChildReconciler.updateChildren @ react.inc.js:4789ReactMultiChild.Mixin._updateChildren @ react.inc.js:12956ReactMultiChild.Mixin.updateChildren @ react.inc.js:12930ReactDOMComponent.Mixin._updateDOMChildren @ react.inc.js:7918ReactDOMComponent.Mixin.updateComponent @ react.inc.js:7767ReactDOMComponent.Mixin.receiveComponent @ react.inc.js:7751ReactReconciler.receiveComponent @ react.inc.js:14187ReactCompositeComponentMixin._updateRenderedComponent @ react.inc.js:6934ReactCompositeComponentMixin._performComponentUpdate @ react.inc.js:6912ReactCompositeComponentMixin.updateComponent @ react.inc.js:6828wrapper @ react.inc.js:13427ReactCompositeComponentMixin.receiveComponent @ react.inc.js:6692ReactReconciler.receiveComponent @ react.inc.js:14187ReactCompositeComponentMixin._updateRenderedComponent @ react.inc.js:6934ReactCompositeComponentMixin._performComponentUpdate @ react.inc.js:6912ReactCompositeComponentMixin.updateComponent @ react.inc.js:6828wrapper @ react.inc.js:13427ReactCompositeComponentMixin.performUpdateIfNecessary @ react.inc.js:6725ReactReconciler.performUpdateIfNecessary @ react.inc.js:14205runBatchedUpdates @ react.inc.js:14955Mixin.perform @ react.inc.js:16683Mixin.perform @ react.inc.js:16683assign.perform @ react.inc.js:14899flushBatchedUpdates @ react.inc.js:14979wrapper @ react.inc.js:13427Mixin.closeAll @ react.inc.js:16756Mixin.perform @ react.inc.js:16697ReactDefaultBatchingStrategy.batchedUpdates @ react.inc.js:9199enqueueUpdate @ react.inc.js:15019enqueueUpdate @ react.inc.js:14537ReactUpdateQueue.enqueueForceUpdate @ react.inc.js:14660ReactComponent.forceUpdate @ react.inc.js:6018reagent$impl$batching$run_queue @ batching.cljs:40reagent.impl.batching.RenderQueue.run_queue @ batching.cljs:63(anonymous function) @ batching.cljs:57 log_util.cljs:122 12:24:10.068 day8.base.util:282 "gzip name: events length: 65269"

For things like datepickers, input-text boxes, checkboxes etc. that have an outer div-wrapper of class "rc-h-box", it would be nice to be able to tweak styling at that level as well.

I'm specifically trying to get a checkbox with a label to vertically align with other components in an h-box and due to the rc-h-box div, this doesn't seem possible.

Hi there!

I know you mention drag & drop in your TODO section. Is this in the works? Would it be very hard to implement? I'm trying to determine if I can use re-com for an upcoming project and drag & drop is a key feature.

😄

selection-list assumes that elements in the set passed as :model are a sub-set of :choices and subsequently uses plain set as fn in as-checked and a similar direct match in as-radio.

• Add new optional arg :id-fn like dropdown It's default should be :id This will likely be a breaking change for existing consumers as they will need to specify identity to match current behaviour. Pass this through to as-checked as-radio and :item-renderer calls and use accordingly.
• change *-clicked :on-change handlers so that they are passed corresponding selections as expected. i.e. e.g if :id-fn = :id then :on-change is given set of :id values from :choices Consumers will need to take this into consideration in their :on-change if they want to deal with original :choices elements.

Perform the following experiment ...

If we were to add
:figwheel {:on-jsload "re_demo.core/render-root”}
to project.clj for the dev build target, could we then remove the entire dev folder (which is only there for figwheel reloading purposes).

And would this, in turn, mean we could collapse the two HTML files (one for prod and one for dev)? What other knock on effects?

We'd need to check that the Google Closure compiler dead-code-eliminates all figwheel artifacts from prod builds. (Although it seems clear that this would happen correctly, let's check).

Hi there,

I know this library is only tested against Chrome, but figured you might want to be made aware of the behavior in other browsers. I'm typically a Chrome/Safari user, but had a chance to poke around with re-com using IE11.

Most of the functionality appears to work reasonably well at first glance, however the basic functionality of modals & tours seem to be broken.

Screenshots FYI:

Feel free to close this issue if you have no intention of fixing these errors for IE. :)

Hi there - just starting to play around with re-com!

How can I go about centering a re-com/title component in the window? I've tried fiddling with an h-box but I'm new to flexbox as well :)

Thanks for making re-com!

A typeahead component would be great. Or, would it be appropriate to construct one from the dropdown-with-keyboard-support component?

I have the following modal-panel
https://github.com/wqhhust/test_frame/blob/master/src/cljs/test_frame/views.cljs#L23

It works when browser it in PC, but not good in android. Does modal-panel support andiod?

I've tried to use a 0.6.0 feature in 0.5.4 based on the example on the demo page. It would be useful to explicitly show the version used on the demo page or even better show when particular features were introduced. In this particular case it was the id-fn in the selection list.

If I refresh manually it works, but it cannot reload itself giving me some bizare error:

utils.cljs:39 Figwheel: notified of file changes
jsloader.js:193 GET http://localhost:3000/legion/core.js?zx=at9wgomycdt8 jsloader.js:193 goog.net.jsloader.loadfile_reloading.cljs:98 (anonymous function)core.cljs:9612 cljs.core.MultiFn.call.G__9144__3core.cljs:9721 cljs.core.MultiFn.call.G__9144file_reloading.cljs:104 figwheel.client.file_reloading.reload_file_STAR_.cljs$core$IFn$_invoke$arity$2file_reloading.cljs:103 figwheel$client$file_reloading$reload_file_STAR_file_reloading.cljs:112 figwheel$client$file_reloading$reload_filefile_reloading.cljs:140 figwheel$client$file_reloading$js_reloadfile_reloading.cljs:147 (anonymous function)
utils.cljs:40 Figwheel: Error loading file legion/core.jsutils.cljs:40 (anonymous function)utils.cljs:42 figwheel.client.utils.log.cljs$core$IFn$_invoke$arity$2utils.cljs:34 figwheel$client$utils$logfile_reloading.cljs:119 (anonymous function)core.cljs:3433 cljs.core.apply.cljs$core$IFn$_invoke$arity$2core.cljs:3424 cljs$core$applyfile_reloading.cljs:101 (anonymous function)deferred.js:649 goog.async.Deferred.fire_deferred.js:298 goog.async.Deferred.updateResult_deferred.js:339 goog.async.Deferred.errbackjsloader.js:179 script.onerror
utils.cljs:39 Figwheel: NOT loading these files

Re-com allows any routing library to be used. (I, for example, am using Bidi.)

One should not have to depend on secretary if it's not used in his project.

Hi, thanks for re-com, it is really useful and it's a great ready-made component library for re-frame.

I have a feature request: it would be nice to be able to pass in a property to the various re-com components which would cause them not to emit any style or class tags, so that they'd be a little easier to plug into a site which already had an existing CSS framework. I'm specifically thinking of the text-input component - I'd like to use some of its behavioral properties without having to untangle the intersection of the re-com CSS and the CSS library I've already got on the site I'm working on (to wit, materializecss, which you'd think would be a good match but for some reason getting the spacing and whatnot correct is a little painful).

I think re-com's default should still be to include class tags in its emitted hiccup which correspond to its bundled CSS, I just want an escape hatch available (if I'm reading the docs and code correctly, currently I can add CSS classes but I can't remove them), at least in components where it makes sense. I wouldn't necessarily expect more complex components like the date-picker to have this, but it would be nice for stuff like the input-text and input-textarea components.

I faced a situation where I wanted an horizontal row to wrap if the container was becoming too small.

A solution is to manually provide :flex-flow "row wrap" via the :style, but I think it would be cleaner (and more intuitive for the users) if a simple :allow-wrap? argument was present.

Quote from Wikipedia:
"in some Muslim countries and Israel, Sunday is the first work day of the week. According to the Hebrew calendars and traditional Christian calendars, Sunday is the first day of the week and according to the International Organization for Standardization ISO 8601 Sunday is the seventh and last day of the week."

Hey, and I'm sorry if that is a stupid question.
I'm banging my head over this for far too long and figured I would ask for help.

So, I'm trying to add a datepicker-dropdown (or datepicker) to my app (using latest re_com), but that fails with an error thrown in unparse:

ERROR unparse  TypeError: Cannot read property 'call' of null

I tried to add a datepicker like this:

[datepicker
  :model invoice-date
  :on-change #("New Date " (pr-str %))]

invoice-date is (r/atom (minus (now) (days 3)))

The problems seems to happen when a formatter is search in formatter-fn (in cljs-time):

((or formatter-overrides formatters) %) this seems to return nil. The value passed into that anonymous fn seems to be:

["MMMM" "MMMM" nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil nil]

I can't really figure out what the problem is, I'm sure its some tiny little detail somewhere.

Does it make a difference that my browser's locale is german?

Thanks,
Torsten.

PS: The documentation says :model is optional however if I omit it I run into a deref error.

I'm just getting started with re-com so it is entirely possible that this is the wrong way to do things, but given the following code:

(ns ^:figwheel-always recom-model.core
    (:require [reagent.core :as reagent :refer [atom]]
              [re-com.core  :refer [button v-box input-text]]))

(enable-console-print!)

(defn top-level []
  (let [text-model (atom "initial text")]
    (fn []
      [v-box :padding "10px"
                 :children [[input-text :model text-model
                                                 :on-change #(println "Input text has" %)]
                  [button :label "Clear" :on-click #(reset! text-model "")]]])))

(reagent/render-component [top-level]
                          (. js/document (getElementById "app")))


(defn on-js-reload []
  ;; optionally touch your app-state to force rerendering depending on
  ;; your application
  ;; (swap! app-state update-in [:__figwheel_counter] inc)
)

...which produces an input-text followed by a button, the button will clear the text as expected until the first character is entered into the text box by hand. Then the clear button stops working.

What is the correct way to do this?

I'm trying to figure out how to make a list item, that displays it's children horizontally when there's enough space (desktop), but wraps them into multiple "lines" when there isn't (mobile). Am I missing something or is this simply not possible with the built-in h-box / v-box? Is re-com missing some layout component that would do this for me? I'm new to bootstrap but I tried to use row and col-md-4 classes to no avail. Apparently they don't work when I use input-text components.

I'm finding the styling on the bootstrap "alerts" very brash and chocolate box. The following is a quickly mocked alternative (which could easily be improved with more pixel wrangling)

So, the point is: how to allow for variation? Currently you must supply an :alert-type and that drives the CSS. I'd like to be able to not use bootstrap and add a class to drive the L&F.

Notes about the picture above:

• border-left-width: 4px
• border-left-colour:
• no coloured text (standard grey)
• no rounded corners

:danger
border-left-colour: rgba(255, 0, 0, 0.60)
background-color: rgba(255, 32, 32, 0.05)

:warning
border-left-color: orange

:info
border-left-color: green
background-color: rgba(223, 240, 200, 0.40)

I need to validate input as it is typed and not just on-change (which is called on-blur), otherwise Aunt Marge thinks the serial number she just entered is invalid.

Please consider letting us override validation-fn with something other than a regex, or let us specify :on-key-up for keys that are not just 27 and 13. Thanks!

sometimes the arrow is too much chrome,

can we have an option to remove it?

like the multi-select in this example

https://harvesthq.github.io/chosen/

Components only seem to update when they deref a ratom, but not on changing arguments.

(def cnt (r/atom 0))
(defn myspan1 [] [:span @cnt])
(defn myspan2 [t] [:span t])
(defn demo []
  [:div
    [re-com/button :label (str "inc " @cnt) :on-click #(swap! cnt inc)]
    [re-com/h-split :panel-1 [:div "works: " [myspan1]]
                    :panel-2 [:div "doesn't: " [:span @cnt] ", " [myspan2 @cnt]]]])

The private anchor-button component de-references the model without checking the type first.

(defn main-panel []
  (fn []
    (let [model (reagent/atom (minus (now) (days 3)))]
      [re-com/datepicker-dropdown
       :on-change #(do (reset! model %))
       :model model])))

works, but

(defn main-panel []
  (fn []
    (let [model (reagent/atom (minus (now) (days 3)))]
      [re-com/datepicker-dropdown
       :on-change #(do (reset! model %))
       :model @model])))

does not. Both work with the regular datepicker.

I've got a working version of Bootstrap's Togglable tabs working with re-com tabs by piggiebacking on the animation effects in bootstrap css file.

Example is here and the rough cut of code is here.

I wonder if this change would be welcome back in this library. The big change is that instead of displaying only the contents of the selected tab, all the tabs exist in the DOM with only selected tab's contents being visible.

My work can easily live outside this library. But I thought other people may benefit from it.

Happy to work on it to get it in a shape where it can be accepted.

The [p] component has a bug:
https://github.com/Day8/re-com/blob/ecc55f3f2679548583efae56024f5eab634f1447/src/re_com/text.cljs#L76-L91

The code incorrectly assumes that merge works deeply on given maps (:style sub-maps to be exact).

In effect, the code incorrectly assumes that (merge {:style {:a 1}} {:style { :b 3}}) would return {:style {:a 1 :b 3}} but it actually returns {:style {:b 3}}.

So current call to merge should be replaced with a call to deep-merge, which would be written as:

(defn deep-merge
  "Recursively merges maps. If vals are not maps, the last value wins."
  [& vals]
  (if (every? map? vals)
    (apply merge-with deep-merge vals)
    (last vals)))

Hello,

When using the :attr option on, for example, a h-box, the validator will complain that it is not valid HTML when using a data-* attribute. This should not be the case as this is a HTML5 standard. The same would apply to aria-* attributes.

Thank you