toolbox-field-react

Tenforce toolbox field and text input components

Parameters

Field:

• hasWhiteBackground: Boolean, makes the input background white
• isInverted: Boolean, makes the style inverted
• showPreview: Boolean, whether previews should be shown for this field

Input / ContentEditable:

• placeholder: String, shown when value is empty
• value: String, content of the input
• isLoading: Boolean, adds loading animation and disables input
• isDisabled: Boolean, disables input
• inputRef: Ref object, enabeling control of the native input element

TextArea :

• placeholder: String, shown when value is empty
• value: String, content of the input
• isLoading: Boolean, adds loading animation and disables input
• isDisabled: Boolean, disables input
• autoSize: Boolean, should the component autosize itself to its content. By default false.
• autosizeProps: Props specifically for the TextareaAutosize components, as it has restrictions. See documentation on react-textarea-autosize.
• textAreaRef: Ref object, enabeling control of the native textArea element

ReadOnly:

• placeholder: String, shown when value is empty
• value: String, number, boolean or JSX.Element, content of the div. HTML will be rendered as dangerously set HTML, while JSX.Elements will be rendered as child components.
• isLoading: Boolean, adds loading animation and disables input
• shouldAllowHTML: Boolean, should it allow for dangerously set HTML in the value. Default is false.
• preserveWhitespace: Boolean, should it preserve whitespace or not. CSS rule: white-space: pre. Default is true.

Components

Field

Top component, can contain two types of children:

• Label
• Items
• Description

Label

A simple label for the field

• isRequired: Appends an indicator wrapped in a span after the label.
• reqiredIndicatorText: Content of the required indicator, default is *

Description

A simple description under the field items.

Items

A container for the possible inputs, its child is usually one of the following:

• Input
• TextArea
• ContentEditable
• ReadOnly

Input

Simple single line input component

TextArea

Simple multi line input component. If autoSize is set to true, it will use the react-textarea-autosize component.

ContentEditable

Multi line input component that renders using list of

ReadOnly

Simple non-modifiable element containing a value

Usage

<Field
  hasWhiteBackground={true}
  isInverted={false}
  extraClasses={""}
>
  <Label isRequired={false}>Label</Label>
  <Items>
    <Input
      placeholder={"Captain Placeholder"}
      value={"test"}
      isLoading={false}
      isDisabled={false}
      onChangedValue={(value) => this.setState({value: value})}
    />
    {/* OR */}
    <TextArea
      placeholder={"Captain Placeholder"}
      value={""}
      isLoading={false}
      isDisabled={false}
      autoSize={false}
      onChangedValue={(value) => this.setState({value: value})}
    />
    {/* OR */}
    <ContentEditable
      placeholder={"Captain Placeholder"}
      value={""}
      isLoading={false}
      isDisabled={false}
      onChangedValue={(value) => this.setState({value: value})}
    />
    {/* OR */}
    <ReadOnly
      value={""}
      isLoading={false}
    />
  </Items>
  <Descrpition>
    Description for the field
  </Descrpition>
</Field>

Symlink issues

If you want to symlink this component, like we do it between the src and the example folder, you will need to modify your example/webpack.config.js file because the autosize Textarea has some issues with finding the good react version. Just add your alias code snippet like so within the resolve:

resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        alias: {
            "react": path.resolve('./node_modules/react'),
            "reactDOM": path.resolve('./node_modules/react-dom')
        }
    },