Macro that will try to pull key component from __components__ context and render it with helix.core/$ macro

I.E. (! :button {:className “positive”} “Good day”)

IMPORTANT - don’t use this macro in conditionals like when, if,cond etc.

This macro will use helix.hooks/use-context hook to get component from toddler UI. React won’t like if it is after conditional because hook will sometimes be there and other time not.

You will see what the problem is in browser console

Global context that holds mapping of keywords to react components. This context can be modified, extended or replaced for easier component management.

Component that will render :icon and :name props as. Other mentionalble props are

• class(Name) - add CSS classes
• disabled

Component will render avatar image in form of DOM element. Props should include:

• :size [:small, :medium, :large] or override if number is specified
• class(Name) - optional
• style - optional

Default implementation of :cell/boolean

Will display boolean field with “checkbox” and :name of field as label right to checkbox

Renders single button. Button styling can be controled by specifying one of of following class(Name) ["positive", "negative"] or by specifying :disabled prop

Component will render calendar-month with calendar header where you can navigate year and month to display current :value.

Use on-change callback to handle calendar changes.

Component that will render calendar day. Expects vura.core/date-context with additional props:

• :class(Name)
• :period-start - true if this day is period start
• :period-end - true if this day is period end
• :picked - if this only this day is selected
• :selected - in case of period, days :selected will be true
• :weekend? - true if this day is weekend

Component will render calendar month. It expects

• :days - that it will render. Use toddler.date/use-calendar-month hook to get days of month to display
• :on-select - when day is selected handler
• :disable
• :read-only

Component will render calendar-month with calendar header where you can navigate year and month to display current :value.

Period value should be in form of vector [start end]. Values like [start nil] [nil end] are valid as well.

Use on-change callback to handle calendar changes.

Will render checkbox icon and inside <div> with all children components

Component will render div element that has display flex, flex-direction column, and will try to grow as much as it can. Items are aligned center and you can control how children will be positioned by specifying :align or :position prop with one of [:start :end :center :explode]

Renders field that will hold :value and when user click on this field it will copy value to clipboard

Not implemented fully

Look at timestamp-field. This field overrides :time? value with false

Look at timestamp-period-field. This field overrides :time? value with false

Wrapper macro around helix.core/defnc function that will try to pull key from __components__ context and render found component.

Wrapper macro around helix.core/defnc function that will try to pull key from __components__ context and render found component.

Render dropdown field that will display result of applying :search-fn to :value

• :name - Name of the field
• :value - value of identity-field
• :placeholder - value of field placeholder
• :opened - initial value of opened dropdown
• :options - available identity options
• :search-fn - function that is used to search options
• :new-fn - when supplied value of input will create value that is not one of provided :options

Default implementation of :cell/enum

Wrapper that will extend Toddler UI by merging new components onto currently available components.

Component that is extending toddler.ui/__commponents__ context by merging components in props to existing value.

New components will be available to children components

Default implementation of :cell/float

Renders field that accepts following props:

• :name - name of field
• :value
• :placeholder
• :disabled
• :read-only
• `:class(Name) - will be conjoined to div.toddler-field element
• :on-change - callback that will receive value of textarea as string

Value is formated based on locale when field is not active!

All other props are forwarded directly to <input> element

NOT IMPLEMENTED YET

Grid component. Will split :width on number of columns defined in :columns by comparing current :width with defined breakpoints. In other words, finds highest breakpoint that fits width, takes that key, pulls from defined columns that key and gets number of columns.

• :row-height - defines height of single row
• :breakpoints - mapping of keys to max width
• :columns - mapping of keys to number of columns
• :margin - spacing between grid elements
• :padding - padding inside of grid element
• :layouts - mapping of sequence of grid elements in folowing form:

{:sm [{:i "one" :x 0 :y 0 :w 1 :h 1}
      {:i "two" :x 0 :y 1 :w 1 :h 1}
      {:i "three" :x 0 :y 2 :w 1 :h 1}
      {:i "four" :x 0 :y 3 :w 1 :h 1}]
 :md [{:i "one" :x 1 :y 0 :w 2 :h 1}
      {:i "two" :x 0 :y 1 :w 3 :h 1}
      {:i "three" :x 0 :y 0 :w 1 :h 1}
      {:i "four" :x 0 :y 2 :w 3 :h 2}]
 :lg [{:i "one" :x 0 :y 0 :w 3 :h 1}
      {:i "two" :x 3 :y 0 :w 1 :h 2}
      {:i "three" :x 0 :y 1 :w 3 :h 1}
      {:i "four" :x 0 :y 2 :w 4 :h 2}]}

• :i is ID
• :x - start of grid element
• :y - start of grid element
• :w - width in columns
• :h - height in rows

Default implementation of :cell/hashed

Default implementation of :cell/identity

Render identity field that will display avatar and result of applying :search-fn to :value

• :name - Name of the field
• :value - value of identity-field
• :placeholder - value of field placeholder
• :opened - initial value of opened dropdown
• :options - available identity options
• :search-fn - function that is used to search options
• :new-fn - when supplied value of input will create value that is not one of provided :options

Render identity multiselect field that will display avatar and result of applying :search-fn to :value and display selected values as tags.

Props:

• :name - Name of the field
• :value - value of identity-field
• :placeholder - value of field placeholder
• :opened - initial value of opened dropdown
• :options - available identity options
• :search-fn - function that is used to search options
• :new-fn - when supplied value of input will create value that is not one of provided :options

Renders input field that will call on-change when input is idle.

• :icon - specify icon that should be rendered in input field
• :on-change - callback that will be called with value of text in <input>

Renders input field that accepts following props:

• :name - name of field
• :value
• :placeholder
• :disabled
• :read-only
• :class(Name) - will be conjoined to div.toddler-field element
• :on-change - callback that will receive value of textarea as string

All other props are forwarded directly to <input> element

Default implementation of :cell/integer

Renders field that accepts following props:

• :name - name of field
• :value
• :placeholder
• :disabled
• :read-only
• `:class(Name) - will be conjoined to div.toddler-field element
• :on-change - callback that will receive value of textarea as string

Value is formated based on locale when field is not active!

All other props are forwarded directly to <input> element

Comopnent will render markdown string if provided through :content prop

Props supported:

• class(Name)
• :can-close? - if click on background will call on-close
• :on-close - this callback will be called when clicked on background

Will create modal dialog on top of modal background. Children components will be rendered wrapped inside of modal dialog.

• :class(Name)
• :on-close - callback that will be called when dialog is closed
• :style - element styling overrride

Render multiselect dropdown field that will display result of applying :search-fn to :value

• :name - Name of the field
• :value - value of identity-field
• :placeholder - value of field placeholder
• :opened - initial value of opened dropdown
• :options - available identity options
• :search-fn - function that is used to search options
• :new-fn - when supplied value of input will create value that is not one of provided :options

Renders input passsword field that accepts following props:

• :name - name of field
• :value
• :placeholder
• :disabled
• :read-only
• :class(Name) - will be conjoined to div.toddler-field element
• :on-change - callback that will receive value of textarea as string

All other props are forwarded directly to <input> element

Component will render div element that has display flex and will try to grow as much as it can. Items are aligned center and you can control how children will be positioned by specifying :align or :position prop with one of [:start :end :center :explode]

Will track user input and on idle, when user stops typing, component will call on-change callback.

• :value
• :on-change
• :disabled
• :placeholder

Simplebar JS component. Expects :width and :height limit inside of :style prop to define scroll container.

You can specify if you wan’t simplebar to show-shadow? prop. If true simplebar will show shadow if content available but not visible.

Should be rendered as child of tabs.

Props: * :name - Tab name, as what will be displayed * :tab - same as name * :id - unique id of tab. * :focus? - if true will focus that tab on display * :position - prefered position in registered tabs

Component that will render table. It is rendered using flex layout that will display table header and table body as defined in table :columns prop.

Header is renderd by rendering table-header-row, and body rows are rendered by table-row.

Pass table data as :rows prop and define table :columns props as in example:

[{:cursor :euuid
  :label "UUID"
  :align :center
  :header nil
  :cell :cell/uuid
  :width 50}
 {:cursor :user
  :label "User"
  :cell :cell/identity
  :options (repeatedly 3 random-user)
  :width 100}
 {:cursor :float
  :cell :cell/float
  :label "Float"
  :width 100}
 {:cursor :integer
  :cell :cell/integer
  :label "Integer"
  :width 100}
 {:cursor :text
  :cell :cell/text
  :label "Text"
  :width 250}
 {:cursor :enum
  :label "ENUM"
  :cell :cell/enum
  :options [{:name "Dog"
             :value :dog}
            {:name "Cat"
             :value :cat}
            {:name "Horse"
             :value :horse}
            {:name "Hippopotamus"
             :value :hypo}]
  :placeholder "Choose your fav"
  :width 100}
 {:cursor :timestamp
  :cell :cell/timestamp
  :label "Timestamp"
  :show-time false
  :width 120}
 {:cursor :boolean
  :cell  :cell/boolean
  :align :center
  :label "Boolean"
  :width 50}]

When you pass :columns prop to table component it is mandatory to specify how to render :cell in table body and optional to specify how to render :header for table column header.

Specified :cell prop will be used to render table cell.

Use use-column, use-row and use-cell-state to implement custom behaviour or use one of default implementations:

[:cell/boolean
 :cell/integer
 :cell/float
 :cell/text
 :cell/enum
 :cell/uuid
 :cell/identity
 :cell/timestamp]

For more details check out table

Will render :header prop for every specified column that doesn’t have :hidden true in column specification.

Will render :cell prop for every specified column that doesn’t have :hidden true in column specification.

High level component. Will draw div.toddler-tabs with tab elements inside that div. tabs expects to be rendered with available layout/container-dimensions context.

Children of tabs will be rendered inside div.tab-content. See tab

Default implementation of :cell/text

Renders field that accepts following props:

• :name - name of field
• :value
• :placeholder
• :disabled
• :read-only
• `:class(Name) - will be conjoined to div.toddler-field element
• :on-change - callback that will receive value of textarea as string

All other props are forwarded directly to <textarea> element

Default implementation of :cell/timestamp

Render timestamp field that will display result of applying :search-fn to :value

• :name - Name of the field
• :value - value of identity-field
• :opened - initial value of opened dropdown
• :options - available identity options
• :format - one of [:full-date :long-date :medium-date :date :full-time :long-time :medium-time :time :full-datetime :long-datetime :medium-datetime :datetime :calendar]
• :time? - allow user to specify time
• :dropdown? - open dropdown on user select or if value is provided from other source set this value to false

Render timestamp period field that will display result of applying :search-fn to :value

• :name - Name of the field
• :value - value of identity-field
• :opened - initial value of opened dropdown
• :options - available identity options
• :format - one of [:full-date :long-date :medium-date :date :full-time :long-time :medium-time :time :full-datetime :long-datetime :medium-datetime :datetime :calendar]
• :time? - allow user to specify time
• :dropdown? - open dropdown on user select or if value is provided from other source set this value to false

Will create popup/Area div and will accept children components to fill that div element. When ever user hovers over popup/Area tooltip will be displayed.

Content of tooltip will be message prop that can be text or react-dom element.

• preference - prefered positioning sequence [#{:top :left} #{:bottom :left}]

Provider of UI components. It will provide toddler.ui/__components__ context that is expected to be map of keywords maped to component implementation.

For list of target components check out toddler.ui namespace

Default implementation of :cell/uuid

Wrapper for UI component. UI is Toddler ui components provider. Provider expects map with bound components to matching keys in toddler.ui namespace