npm.io
1.0.1 • Published 3 years ago

@6dui/6d-field-items

Licence
ISC
Version
1.0.1
Deps
14
Size
35 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

6d Field Items

Contains Different Form Fields. Supports bootstrap grid.

Installation

Table of Contents

  1. Textbox
  2. Dropdown
  3. DatePicker
  4. DateRangePicker
  5. CheckBox
  6. RadioButton
  7. FileUpload
  8. ToggleSwitch

Text box

Normal input box

Properties
Property Type Default Description
type String FIELD_TYPES.TEXT or '0' Defines type of field
onChange function undefined On change function is passed
value any undefined value of the field
disabled boolean false If passed true , the field will be disabled
Usecases
Normal textbox

Sample code

const FORM_ELEMENTS = {
    textBox: {
        name: "textBox",
        placeholder: "Text Box",
        label: "Text Box",
        width: "xs",
        ismandatory: true,
        validations: [
            {
                "validatorName": "minLength",
                "value": 2,
                "message": "profile.msisdn.minlength"//key from messages.json or direct value can be passed here
            },
            {
                "validatorName": "maxLength",
                "value": 4,
                "message": "profile.msisdn.maxlength"//key from messages.json or direct value can be passed here
            },
            {
                "validatorName": "regex",
                "value": /^[0-9]*$/,
                "message": "profile.msisdn.regex"//key from messages.json or direct value can be passed here
            },
            {
                "validatorName": "ismandatory",
                "value": true,
                "message": "profile.msisdn.ismandatory"//key from messages.json or direct value can be passed here
            }
        ]

    },
}


<FieldItem
            {...FORM_ELEMENTS.textBox}
            value={values.textBox}
            type={FIELD_TYPES.TEXT}
            onChange={(...e) => handleChange(FORM_ELEMENTS.textBox.name, ...e)}
            touched={fields.textBox && fields.textBox.hasError}
            error={fields.textBox && fields.textBox.errorMsg}
        />
Output
Output