@intlfcstonequadrant/intl-react-theme v4.0.2

intl-react-theme

Install

npm install --save intl-react-theme

Usage

import React, { Component } from 'react'

import { INTLButton } from 'intl-react-theme'

class Example extends Component {
  render () {
    return (
      <INTLButton />
      {//or...}
      <INTLButton>
        test
      </INTLButton>
    )
  }
}

Components

Here's a list of the components in this package and how to implement them.

INTLButton

This button is pretty straightforward and does not ask for much.

Props that it will take:

• type(string): These are any of the material-ui types for a button.
• label(string) || children(Element OR string): Simple label to give the button some content. Here either passing the label prop or just wrapping content with INTLButton work just fine.
• color(string): You can pass a color to the button. We recommend you pass either 'primary' or 'secondary' in order to utilize the theme styles already implemented.
• fullWidth(bool): Whether you want fullWidth or not. Default is true.
• disabled(bool): Is the button disabled. Default is false.
• size(string): PropTypes.oneOf('small', 'medium', 'large')
• variant(string): PropTypes.oneOf('text', 'contained', 'outlined')
• onClick(func): What you want the button to trigger onClick

INTLDropDownInput

This dropdown can take a simple text input, one of multiple pre-built components, or a custom component.

Props that it will take:

• id(int): id for the element.
• name(string) The name for the input. Helpful for tracking the input onChange
• label(string) Label for the input field.
• value(string) Value for the input field.
• errorMessage(string) Error message that should be shown. If this prop exists, the error will be shown.
• required(bool) Whether this field is required for submission. Will include a fancy star next to the label
• valid(bool) Whether this field is valid
• submitted(bool) Whether this field was submitted
• options(array) An array of options for the dropdown to present. These take the following format: {label, value} If you're using a custom component to render your cells, use {...} without the need to supply a "label:" and "value:" property.
• renderValue(bool) Detrmines whether the component will use a custom value for the selected label. If true, selectedOptionDisplay is required.
• selectedOptionDisplay(func) Function that takes in the value property from each option element and returns the part of it that will be shown as the selected label.
• handleValueChange(func) Will be fired off on change of selection.
• handleBlur(func) onBlur event
• handleFocus(func) onFocus event
• formControlClassName(string || object) Optional ability to override the theme styles. Use the material-ui withStyles HOC to achieve this.
• textFieldClassName(string || object) Optional ability to override the theme styles. Use the material-ui withStyles HOC to achieve this.
• OptionComponent(func) Optional ability to set a custom component for your cells. Function that takes in the object for the cell to show and returns the custom component with the value passed into the required props of that component.

INTLTextField

Props that it will take:

• fullWidth(bool) whether this textField will span the full width of it's parent. Default = true
• disabled(bool) Is the field disabled. Default = false
• variant(string.oneOf'standard', 'filled', 'outlined') What type of materialui theme to apply to the textField.
• className(string || object) Override for the theme already built into the component.
• id(string) Id for the textField.
• name(string) Name for the textField. Default = ''
• label(string) Label for the textField. Default = 'INTL TextField'
• type(string) Type of input field , this is based off of the vanilla input field types.
• mask(func || object) The mask to be applied to the component.
  • currently supports the following:
    • Array of regex /+d/, /+d/
    • 'Number' : string
    • 'Currency' : string
    • 'CurrencyUS' : string
    • 'CurrencyEUR' : string
• maskOptions(object) This is an override for any of the following mask options:
  • prefix: string, default: ''
  • suffix: string, default: ''
  • includeThousandsSeparator: bool, default: true
  • thousandsSeparatorSymbol: string, default: ','
  • allowDecimal: bool, default: true
  • decimalSymbol: string, default: '.'
  • decimalLimit: string, default: 2
  • requireDecimal: bool, default: false
  • allowNegative: bool, default: true
  • allowLeadingZeroes: bool, default: true
  • integerLimit: number, default: null
• pipe(any)
• min(number) Min characters allowed.
• max(number) Max characters allowed.
• required(bool) Is this input required?
• metadata(object)
• errorMessage(string) Passing this value will result in an error message being displayed under the input field. Including this props will trigger the error label.
• valid(bool) Whether this field is valid.
• submitted(bool) Whether this field has been submitted.
• onChange(func) takes an onChange function: (name, value) => {}
• onBlur(func) takes an onBlur function: (name, value) => {}
• onFocus take an onFocus function: (name, value) => {}

INTLListInput

Props that it will take:

• id(string) id of the listInput
• name(string) name of the listInput
• label(string) label of the listInput
• required(bool) whether the input is required
• metadata(object)
• valid(bool) whether the input is valid
• submitted(bool) whether the input has been submitted
• options(array) An array of options for the list input to display. Format is the following: {label: 'label', value: 'value'}
• onChange(func) onChange function for the input
• formGroupClassName(string) If overriding the theme styles using the 'withStyles' material-ui method, this will be the property name for the styling related to the formGroup
• formLabelClassName(string) If overriding the theme styles using the 'withStyles' material-ui method, this will be the property name for the styling related to the formLabel
• formControlClassName(string) If overriding the theme styles using the 'withStyles' material-ui method, this will be the property name for the styling related to the formControl
• checkboxClassName(string) If overriding the theme styles using the 'withStyles' material-ui method, this will be the property name for the styling related to the checkbox

###INTLRadioInput

Props that it will take: