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).

Menu

A menu component for rendering dropdown menus.

####Properties

• 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