day8.re-frame-10x.utils.re-com — day8.re-frame/re-frame-10x 0.7.0

cljs

Shameless pilfered from re-com.

align-style cljs

(align-style attribute align)

Determines the value for the flex align type attributes. This parameter determines how children are aligned on the cross axis. The justify parameter is a keyword. Reference: http://www.w3.org/TR/css3-flexbox/#align-items-property

box cljs

(box &
     {:keys [size scroll h-scroll v-scroll width height min-width min-height
             max-width max-height justify align align-self margin padding child
             class style attr]
      :or {size "none"}
      :as args})

Returns hiccup which produces a box, which is generally used as a child of a v-box or an h-box. By default, it also acts as a container for further child compenents, or another h-box or v-box

button cljs

(button)

Returns the markup for a basic button

checkbox cljs

(checkbox &
          {:keys [model on-change label disabled? label-class label-style class
                  style attr]
           :as args})

I return the markup for a checkbox, with an optional RHS label

close-button cljs

(close-button)

css-join cljs

(css-join & args)

deep-merge cljs

(deep-merge & vals)

Recursively merges maps. If vals are not maps, the last value wins.

deref-or-value cljs

(deref-or-value val-or-atom)

Takes a value or an atom If it's a value, returns it If it's a Reagent object that supports IDeref, returns the value inside it by derefing

deref-or-value-peek cljs

(deref-or-value-peek val-or-atom)

Takes a value or an atom If it's a value, returns it If it's a Reagent object that supports IDeref, returns the value inside it, but WITHOUT derefing The arg validation code uses this, since calling deref-or-value adds this arg to the watched ratom list for the component in question, which in turn can cause different rendering behaviour between dev (where we validate) and prod (where we don't). This was experienced in popover-content-wrapper with the position-injected atom which was not derefed there, however the dev-only validation caused it to be derefed, modifying its render behaviour and causing mayhem and madness for the developer. See below that different Reagent types have different ways of retrieving the value without causing capture, although in the case of Track, we just deref it as there is no peek or state, so hopefully this won't cause issues (surely this is used very rarely).

flex-child-style cljs

(flex-child-style size)

Determines the value for the 'flex' attribute (which has grow, shrink and basis), based on the :size parameter. IMPORTANT: The term 'size' means width of the item in the case of flex-direction 'row' OR height of the item in the case of flex-direction 'column'. Flex property explanation:

• grow Integer ratio (used with other siblings) to determined how a flex item grows it's size if there is extra space to distribute. 0 for no growing.
• shrink Integer ratio (used with other siblings) to determined how a flex item shrinks it's size if space needs to be removed. 0 for no shrinking.
• basis Initial size (width, actually) of item before any growing or shrinking. Can be any size value, e.g. 60%, 100px, auto Note: auto will cause the initial size to be calculated to take up as much space as possible, in conjunction with it's siblings :flex settings. Supported values:
• initial '0 1 auto' - Use item's width/height for dimensions (or content dimensions if w/h not specifed). Never grow. Shrink (to min-size) if necessary. Good for creating boxes with fixed maximum size, but that can shrink to a fixed smaller size (min-width/height) if space becomes tight. NOTE: When using initial, you should also set a width/height value (depending on flex-direction) to specify it's default size and an optional min-width/height value to specify the size it can shrink to.
• auto '1 1 auto' - Use item's width/height for dimensions. Grow if necessary. Shrink (to min-size) if necessary. Good for creating really flexible boxes that will gobble as much available space as they are allowed or shrink as much as they are forced to.
• none '0 0 auto' - Use item's width/height for dimensions (or content dimensions if not specifed). Never grow. Never shrink. Good for creating rigid boxes that stick to their width/height if specified, otherwise their content size.
• 100px '0 0 100px' - Non flexible 100px size (in the flex direction) box. Good for fixed headers/footers and side bars of an exact size.
• 60% '60 1 0px' - Set the item's size (it's width/height depending on flex-direction) to be 60% of the parent container's width/height. NOTE: If you use this, then all siblings with percentage values must add up to 100%.
• 60 '60 1 0px' - Same as percentage above.
• grow shrink basis 'grow shrink basis' - If none of the above common valaues above meet your needs, this gives you precise control. If number of words is not 1 or 3, an exception is thrown. Reference: http://www.w3.org/TR/css3-flexbox/#flexibility Diagram: http://www.w3.org/TR/css3-flexbox/#flex-container Regex101 testing: ^(initial|auto|none)|(\d+)(px|%|em)|(\d+)\w(\d+)\w(.*) - remove double backslashes

flex-flow-style cljs

(flex-flow-style flex-flow)

A cross-browser helper function to output flex-flow with all it's potential browser prefixes

gap-f cljs

(gap-f & {:keys [size width height class style attr] :as args})

Returns a component which produces a gap between children in a v-box/h-box along the main axis

h-box cljs

(h-box &
       {:keys [size width height min-width min-height max-width max-height
               justify align align-self margin padding gap children class style
               attr]
        :or {size "none" justify :start align :stretch}
        :as args})

Returns hiccup which produces a horizontal box. It's primary role is to act as a container for components and lays it's children from left to right. By default, it also acts as a child under it's parent

handler-fn clj/s macro

(handler-fn & body)

hyperlink cljs

(hyperlink)

Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. Useful for providing button functionality for less important functions, e.g. Cancel

hyperlink-href cljs

(hyperlink-href)

Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. Useful for providing button functionality for less important functions, e.g. Cancel

hyperlink-info cljs

(hyperlink-info url)

input-text cljs

(input-text & args)

justify-style cljs

(justify-style justify)

Determines the value for the flex 'justify-content' attribute. This parameter determines how children are aligned along the main axis. The justify parameter is a keyword. Reference: http://www.w3.org/TR/css3-flexbox/#justify-content-property

label cljs

(label & {:keys [label on-click width class style attr] :as args})

Returns markup for a basic label

line cljs

(line &
      {:keys [size color class style attr]
       :or {size "1px" color "lightgray"}
       :as args})

Returns a component which produces a line between children in a v-box/h-box along the main axis. Specify size in pixels and a stancard CSS color. Defaults to a 1px lightgray line

link cljs

(link {:keys [label href style]})

p cljs

(p & children)

acts like [:p ] Creates a paragraph of body text, expected to have a font-szie of 14px or 15px, which should have limited width. Why limited text width? See http://baymard.com/blog/line-length-readability The actual font-size is inherited. At 14px, 450px will yield between 69 and 73 chars. At 15px, 450px will yield about 66 to 70 chars. So we're at the upper end of the prefered 50 to 75 char range. If the first child is a map, it is interpreted as a map of styles / attributes.

px cljs

(px val & negative)

takes a number (and optional :negative keyword to indicate a negative value) and returns that number as a string with 'px' at the end

re-com-css cljs

scroll-style cljs

(scroll-style attribute scroll)

Determines the value for the 'overflow' attribute. The scroll parameter is a keyword. Because we're translating scroll into overflow, the keyword doesn't appear to match the attribute value

v-box cljs

(v-box &
       {:keys [size width height min-width min-height max-width max-height
               justify align align-self margin padding gap children class style
               attr]
        :or {size "none" justify :start align :stretch}
        :as args})

Returns hiccup which produces a vertical box. It's primary role is to act as a container for components and lays it's children from top to bottom. By default, it also acts as a child under it's parent