Zenoo hub-client’s core Built in components

Components

Every component must have “as” parameter that specify component element name. You can use provided components name, or standart HTML Dom element. Every component has also $reference property, that can create some named reference to DOM element. This reference can be accessed through $reference object inside appDataContext.

Example of reference:

# Referencable div
!component as: div
$reference: myDiv

# Some component that using this reference
...some cother component
property: !expression #reference.myDiv

Debug cookies

In hub-client you can add this debug cookies for enable increased logs in browsers dev tools

development to true = this is basic debug cookie, all other cookies will not have effect without this. This cookie also enable this features: 1) log errors on failed !expression or !function 2) log errors which cause reload of application
log_all_expressions to true = turn on log not only failed !expression or !function but also successfully !expression or !function
disable_reload to true = prevent aplication from reload after some error on submit call
disable_expression_warnings to true = turn off log warnings for failed !expression or !function when development cookie is set to true

Iterations

There is way to make iteration on some collections and map components to it. There is !repeat expression for this case. You simply set array as input collection (you can use expression as well) and component, that will be rendered n times (n is length of array). Inside component you can access item by expression, that is stored in key of this repeat. In expression you can directly access item of array ([key].item) or it`s index ([key].index).

Format is:

!repeat [key]: [array]
component: [some component]

Examples:

Array from api

!repeat person: !expression flow.export.persons
component:
  !component as: span
  items: !expression person.item.name

Array in yaml

!repeat item:
  - Item 1
  - Item 2
component:
  !component as: span
  items: !expression item.item

Form components

`FormInput`

Implementation of standart html input with connection to FormProvider. Required property is name. Type has default value text. You can also specify mask.

Propeties:

name: string;
className?: any;
autoComplete?: string;
type?: 'text' | 'password' | 'date' | 'number' | 'range';
max?: number | string;
maxLength?: number;
min?: number | string;
minLength?: number;
step?: number | string;
disabled?: boolean;
placeholder?: string;
mask?: string;
id?: string;
removeCharsRegExp?: string;
allowOffStep?: boolean;
showGuide?: boolean;
forceNumeric?: boolean;
selectAllOnFocus?: boolean;

Mask: Everything that is inside {} will be used as regexp. Everything in [] will be escaped as plain text. Text written inside () will be escaped as well, but will excluded from output. You can use macros in text that is not inside any bractets. Predefined macros are # (A-Za-z), A (A-Z), a (a-z), 9 (0-9).

You can also use predefined masks:

number(prefix, number of integers, number of decimals, suffix, split thousands, thousands separator)
email()

Examples:

[NUM]999/99        -> 3 digits, then "NUM" in plain text
[TEST]999{[\-]}999 -> 3 digits, "-" (defined as regexp), then 3 another digits
(ABC)99             -> ABC and 2 digits, but output will be only 2 digits
email()             -> Email mask
number(, 4, 2, Kč, true, '.')  -> 4 digits before dot, 2 digits after dot, "Kč" suffix, separate thousands, use dot as thousands separator

`FormCheckbox`

Properties:

name: string;
className?: any;
disabled?: boolean;
id?: string;

`FormRadio`

Properties:

name: string;
value: string;
className?: any;
disabled?: boolean;
id?: string;

`FormTextarea`

Properties:

name: string;
className?: any;
autoComplete?: string;
maxLength?: number;
minLength?: number;
disabled?: boolean;
placeholder?: string;
id?: string;
submitOnEnter?: boolean;

`FormValue`

Only shows data inside field with this name.

Properties:

name: string;

`FormHidden`

This component sets data to form field.

Properties:

name: string;
value: any;

`FormSelect`

Standart HTML select. If you want some speciel styled select, use FormEnumSelect.

Properties:

name: string;
className?: any;
autoComplete?: string;
submitActionOnEnter?: string;
placeholder: string;
options: {[value: string]: string};
disabled?: boolean;
id?: string;

`FormEnumSelect`

Select, that is construct from divs and spans - it’s prepared for styling. Every element inside it’s structure has className.

Stateless class names:

css-form-enum-select
css-form-enum-select-value
css-form-enum-select-value-placeholder
css-form-select-overlay
css-form-enum-select-list
css-form-enum-select-button

State class names:

css-form-enum-select-open
css-form-enum-select-closed
css-form-enum-select-list-open
css-form-enum-select-list-closed
css-form-enum-select-button-open
css-form-enum-select-button-closed

Properties:

name: string;
className?: any;
placeholder: string;
options?: {[value: string]: string};
disabled?: boolean;
id?: string;

`FormFieldError`

Shows error and also label for some field. If you set onlyLabel to true, no errors will be displayed. If error has {field} tag, label will be inserted to this place.

Class names:

css-form-field-error
css-form-field-error-hidden
css-form-field-error-visible

Properties:

name: string;
label?: ReactNode;
className?: string;
onlyLabel?: boolean;

`FormGlobalError`

Shows global errors - eg. from server, or runtime error.

Class names:

css-form-error

Properties:

className?: string;

`FormAddressInput`

Address input using google geocoding for prompting adresses, based on FormEnumSelect

Stateless class names:

css-form-enum-select
css-form-enum-select-value
css-form-enum-select-list

State class names:

css-form-enum-select-open
css-form-enum-select-closed
css-form-enum-select-list-open
css-form-enum-select-list-closed

Properties:

name: string;
addressFieldName?: string;
className?: any;
placeholder?: string;
label?: string;
disabled?: boolean;
id?: string;
selectAllOnFocus?: boolean;

`FormDateInput`

Date input with popup. it is using react-datepicker.

Properties:

name: string;
id?: string;
placeholder?: string;
min?: string;
max?: string;
dateFormat?: string;
autoComplete?: string;
showMonthDropdown?: string;
showYearDropdown?: string;

`FormDateStringInput`

Date input with fixed format to YYYY-MM-DD

Properties:

name: string;
id?: string;
placeholder?: string;
autoComplete?: string;
className?: string;

`FormFile`

File input

Properties:

name: string;
className?: any;
disabled?: boolean;
id?: string;
autoSubmitAction?: string;
multiple?: boolean;
resizeToMax?: number; - resize image(s) to maximal size in bytes
}

`FormImage`

Show image, that is stored in form data, eg. from file input

Properties:

name: string;
className?: string;
id?: string;

`FormMap`

Google map component. this component allows user to select location on map. It is storing readable address to field (name), and also storing address parts into another field (addressFieldName).

Properties:

name: string;
addressFieldName?: string;

`FormPinInput`

Pin input is set of inputs (number is specified by length property). This input can handle only digits.

Properties:

name: string;
className?: any;
length: number;
id?: string;

`FormSlider`

Input with type range

Propeties:

name: string;
className?: any;
max?: number | string;
min?: number | string;
step?: number;
disabled?: boolean;
id?: string;

`FormTagButton`

Button for adding or removing (if property remove is true) form visual tags.

Propeties:

tag: string | string[];
remove?: boolean;
disabled?: boolean;
className?: any;
id?: string;
notFocusable?: boolean;

`Fragment`

Fragment wrapper - its dummy component without any affect to render. You can wrap set of components into it, to create one component with childs.

`ServerOnly`

Items inside will be rendered only if JS not work - it means on server.

`BrowserOnly`

Items inside will be rendered only if JS works, and only on browser.

`ClassNameWrapper`

Wrapper for adding, or removing class to element. You can use expressions to decide to show class or not. Default wrapping element is div, you can change it by setting property element - tag name. Class names are specified as name of properties, and enable it or disable it is provided by setting this property to true or false - same as CX (classNames package). You can also specify animatedClassName - this class name will be added, when some class was changed, and will be removed in animation end event.

Properties:

element?: string;
classNames: {[name: string]: boolean};
animatedClassName?: string;

`VisibilityWrapper`

Wrapper for hiding and showing elements. Elements inside it (items) will be shown only if property visible is set to true, or property invisible to false.

Properties:

visible?: boolean;
invisible?: boolean;

`LoadingWrapper`

Wrapper for hiding and showing elements. Elemens inside it (items) will be shown only if app is waiting for tag, that is specified by tags property. Tags property is array of arrays and logic is [ [a and b] or [c and d] ]. Waiting tags is not same as visual tags. Waiting tags can be added only in react part of application.

Standart tags:

WAITING_API
PROCESSING_API

Properties:

tags?: string[][];
timeout?: number;
className?: string;
classNames?: {visible: string; hidden: string};

`ElementStateWrapper`

Wrapper for adding classes to wrapper element based on state of some input (or inputs) in it. It can be used for handling mouse over, mouse down, etc… Default selector is to input, and default element is div. You can specify your class name to some state by setting it in classNames property.

Posible state names:

focused
keyDown
mouseDown
mouseOver
disabled
visited

Properties:

element?: string;
className: string;
classNames: {[name: string]: string};
selector?: string;

`FormSetButton`

Button for set some field to value. Value is optional, if is not set, it will change value to null.

Properties

name: string;
actionName?: string;
actionParams?: string[] | string;
disabled?: boolean;
className?: any;
id?: string;
value?: any;

`Script`

Script component to run some script. Script is defined by onEnter and onLeave property (use !function expression). OnEnter script will be run immediatly in case, when property trigger is not defined or trigger property becomes from false value to true. OnLeave script will be run on component unmount (in case of trigger is not set) or when trigger becomes from true to false. You can also specify runOnUpdate. That means, script will be runned after every change of trigger. If runOnUpdate is false or not set, script onEnter will be run only once and onLeave as well. You can also provide url to some external script.

Properties

trigger?: boolean;
url?: string;
runOnUpdate?: boolean;
onEnter: () => void;
onLeave: () => void;
attributes?: {[name: string]: string} // - html attributes, can by used only in combination with url

`FormSlideSelect`

This component is for create carousel select. You can specify childs (options), that can be select by user by swiping left or right. Its standart form field.

Example

!component as: FormSlideSelect
className: carousel
name: field
options:
  option1:
    !component as: div
    className: carouselContent
    style:
      background: red
  option2:
    !component as: div
    className: carouselContent
    style:
      background: green
  option3:
    !component as: div
    className: carouselContent
    style:
      background: blue

Properties

name: string;
className?: string;
options: {[name: string]: React.ReactElement};
continuous?: boolean;

`Trigger`

Trigger component allows you to track changes on some value, that can be getted by expression. On load (mount) of this component, load callback will be called with current value. If value was changed, change callback will be called with old and new value. Value variables are accessible in scope. For load function there is value, that referes to current value of trigger. In change callback there is oldValue and newValue that refers to value before change and after change.

Example

- !component as: Trigger
   value: !expression form.data.mobile
   load: !function form.changeValue('otherFieldName', '08123456789')
   change: !function console.log("Data was changed", oldValue, newValue)

Properties

value: any;
load?: (value: any) => void;
change?: (oldValue: any, newValue: any) => void;
hysterezis?: number; // timeout for on change callback

`RenderInRoot`

This component allows you to render any component in root scope. If you wrap your component by this one, it will render it’s content after whole content of page.

Example

- !component as: RenderInRoot
   items:
       - !component as: h1
          items: 'Hello world'