Iceflow-ui NPM

iceflow-ui

Basic React Form Components. The dependencies are React and Lodash. By default the components use Material icons however this can be changed by requiring components/config and changing the references. Examples for inputs and buttons can be seen by setting up the Iceflow Server example https://github.com/mikehoren/iceflow-server-example

Button

The button component has two states, default and active. When active it will be disabled and show text + a spinner or just a spinner.

####Properties

className String Classes you would like added to the button.
defaultText String The default text to display for the button.
activeText String The text to display when the button is in an active state.
active Boolean Forces the button to be active if set to true.
onClick Function A callback to be called when the button is clicked. Arguments [Event Event, setActive Function, setDefault Function].
deferActive Boolean Defers the active state until the onClick callback has been completed. Useful for validation.

Checkbox

The checkbox has two states, checked and not checked.

####Properties

className String Classes you would like added to the checkbox.
checked Boolean Sets the component to a checked state.
onChange Function A callback to call when the checkbox changes values. Arguments [checked Boolean].
name String The name value for the input.

Radio Group

A group of radio buttons.

####Properties

className String Classes you would like added to the radio group.
name String The name value for the radio group.
radios Array An array of radio objects to generate the group with. Each object should have the form {label: string, value: any}.
onChange Function A callback to call when a radio button is clicked. Arguments [Event Event, value String].

Input

An input that supports error, success and loading states as well as validation and deferring validation for xhr support.

####Properties

className String Classes you would like added to the input.
type String The type of input, defaults to "text".
name String The name to pass to the input.
placeholder String The placeholder value for the input.
value String The value of the input, the means for the value you change you must also pass in an onChange input and render it with the new passed in value.
defaultValue String the value of the input, this means an initial value is set then the input controls it's internal state.
onChange Function A callback to call when the input changes. Arguments [Event Event, value String].
validator Function A validation function to run depending on the value of validateOn. Arguments [value String, callback Function]. The callback expects a boolean value depending on if the value is valid or not.
validateOn String The context for when to validate. Possible values are "change", "stop", "blur". Change happens on every input change. Stop happens after a set amount of milleseconds have passed since the last typed character. Blur happens on input blur.
disallowEmpty Boolean If set to true the input will consider an empty value as an error after the initial change.
icons Boolean If set to true show icons for error, success, and loading states.
defer Boolean When set to true will show validation spinner until the validation callback has resolved.
timeout Number The number of milleseconds to wait before validation, used with the "stop" option for validateOn.
error Boolean If set to true show an error state.
success Boolean If set to true show a success state.
loading Boolean If set to true show a loading state.
noEdit Boolean The input cannot be editted

Select

A select picker that supports all of the above input states, and shows either the passed in options or options based on the response to a callback.

####Properties

className String Classes you would like added to the input.
options Array An array of options used to populate the select menu. An option should take the form {label: string, value: any, selected: boolean}.
name String The name of the select picker input. The label is suffixed with -label so both values can be retrieved seperately.
value String the value to populate the select input with
onChange Function The function to run select picker's value has changed by typing. Arguments [Event Event, Callback Function. The callback expects an array of options.
onSelect Function The function to run when an option is selected. Arguments [Data Object]. Data takes the form {value: string, label: string}.
onCreate Function the function to run when an option is created
icons Boolean If icons should show or not. This is overrided as an arrow if options are passed in.
defer Boolean If the select picker should defer showing options until the callback is called.
emptyMessage String A message to show if there are no options found. Defaults to "No matches found.".
option Function A function to generate custom options. Arguments [Option Object, index Number]. Option takes the form {value: string, label: string}. Option expects jsx markup to be returned.
noEdit Boolean The input cannot be editted, useful for emulating select inputs
eventMode Boolean when an option is selected or created wipe the value in the text input
autoSelect Boolean if false will not autoselect the first option in the menu (useful for creating new options by hitting enter).

className String Classes you would like added to the input.
Open Boolean is the menu open
html String an html string to use in the place of text for the title
title String the string to use for the title
options Array An array of Objects used to populate the dropdown. Each object takes the form {url String the url to link to, name String the name to render, attr Object an array of attributes for the item, callback Function a callback to call when the item is clicked}

Modal

A super simple modal

####Properties

className String Classes you would like added to the input.
Open Boolean is the menu open
onClose Function A function to call on modal close, note the modal operates entirely by passed in params meaning you're likely setting a state prop that's then passed in as a prop to the modal to close it.
noPosition Boolean should the modal position itself or not