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