@dock365/reform-fabric-fields NPM

Reform Fabric Fields

Requirement

Install

1 Install react confirm as dependency

# Using yarn package manager
$ yarn add @dock365/reform-fabric-fields

# Using npm package manager
$ npm install --save @dock365/reform-fabric-fields

2 Import React confirm module

// ES6
import Confirm from "@dock365/reform-fabric-fields"

// ES5
var Confirm = require("@dock365/reform-fabric-fields");

Example

  import React from "react";
  import { Form, Field } from "@dock365/reform";
  import { TextField } from "@dock365/reform-fabric-fields";

  const App = (props) => {
    return (
      <div className="App">
        <Form onSubmit={(e, values) => console.log(values)}>
          <Field
            name="fullName"
            label="Full Name"
            render={TextField}
            defaultValue="Jhon doe"
          />
          <button>Submit</button>
        </Form>
      </div>
    );
  }

  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);

Properties

TextField CustomProps

Name	Type	Description
nil	nil	nil

CheckboxField CustomProps

Name	Type	Description
nil	nil	nil

ChoiceGroupField CustomProps

Name	Type	Description
options	`{ key: string, text: string }[]` or `IChoiceGroupOption[]`	Options to display in choice group

DatePickerField CustomProps

Name	Type	Description
allowTextInput	`boolean`	allow custom text input
disableAutoFocus	`boolean`	Disable auto focus
showClearBtn	`boolean`	Show clear field button

DropdownField CustomProps

Name	Type	Description
options	`{ key: string, text: string }[]` or `IDropdownOption[]`	Options to display in dropdown

MultilineTextField CustomProps

Name	Type	Description
showLength	`boolean`	show length of value
description	`string`	Description
rows	`number`	Number of rows

RatingField CustomProps

Name	Type	Description
min	`number`	Minimum no of stars
max	`number`	Maximum no of stars
size	`0\|1` or `RatingSize`	Size of rating star

SliderField CustomProps

Name	Type	Description
min	`number`	Minimum value
max	`number`	Maximum value
step	`number`	Number of steps
showValue	`boolean`	Show selected value

UserPickerField CustomProps

Name	Type	Description
users	`{Title: string, Id: number }[]` or `IUser[]`	Users data
searchUsers	`(query: string) => Promise<IUser[]>`	User search promise
getUserById	`(id: number) => Promise<IUser>`	Get user by id