0.1.1 • Published 2 years ago

empower-inputs-exp v0.1.1

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

Getting Started with Empower Inputs (typescript)

  1. Input
  2. Input Numeric
  3. Textarea
  4. Textarea with special characters
  5. Select
  6. Select with Group Option
  7. Multi-Select
  8. Multi-Select with Group Option
  9. Toggle Button
  10. Checkbox
  11. Datepicker (Single)
  12. Datepicker (Multiple)
  13. File Upload
  14. File Upload Multiple
  15. Toggle

Declaration

import InputSelectionHandler from 'empower-inputs';

Interface

interface IState {
    formElement: any 
  }

Event Handler

 const inputChangedHandler = (val: any, key: string): void => {
    switch (key) {
      case 'sampleCheckbox':
        formElement[key].value = val.target.checked;
        break;

      case 'sampleMultiSelect':
        formElement[key].value = val.selected;
        break;
        
      case 'sampleFile':
      case 'sampleFileMultiple':
        formElement[key].selected = val.selected;
        break;

      default:
         formElement[key].value = val.target.value;
        break;
    }
    setFormElement({ ...formElement, formElement });
 }

1) Input

let [formElement, setFormElement] = useState<IState['formElement']>({
    sampleInput: {
      id: 'sampleInput',
      type: 'text',
      value: '',
      placeholder: 'Input text',
      maxLength: 10,
      readOnly: false,
      disabled: false
    }
});

Usage for Input

<div>
    <h4>INPUT STRING</h4>
    <InputSelectionHandler
      config={formElement.sampleInput}
      allowedChar={{
        alphabet: true,
        numeric: false,
        space: false,
        allowedSymbols: ['&']

      }}
      customClass="string-custom-class em-input"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleInput')}
    />
</div>

2) Input Numeric

let [formElement, setFormElement] = useState<IState['formElement']>({
   sampleInputNumeric: {
      id: 'sampleInputNumeric',
      type: 'number',
      value: '',
      placeholder: 'Input number',
      maxLength: 10,
      readOnly: false,
      disabled: false,
    },
});

Usage for Input Numeric

<div>
    <h4>INPUT INTEGER</h4>
    <InputSelectionHandler
      config={formElement.sampleInputNumeric}
      customClass="integer-custom-class em-input"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleInputNumeric')}
    />
</div>

3) Textarea

let [formElement, setFormElement] = useState<IState['formElement']>({
    sampleTextarea: {
      id: 'sampleTextarea',
      type: 'textarea',
      value: '',
      maxLength: 100,
      placeholder: 'Input text',
      disabled: false,

    }
});

Usage for Textarea

<div>
    <h4>TEXTAREA CHARACTER ONLY</h4>
    <InputSelectionHandler
      config={formElement.sampleTextarea}
      customClass="textarea-character-only-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleTextarea')}
      allowedChar={{
        alphabet: true,
        numeric: false,
        space: true
      }}
    />
</div>

4) Textarea with special characters

let [formElement, setFormElement] = useState<IState['formElement']>({
    sampleTextarea: {
      id: 'sampleTextarea',
      type: 'textarea',
      value: '',
      maxLength: 100,
      placeholder: 'Input text',
      disabled: false,

    }
});

Usage for Textarea with Special Characters

<div>
    <h4>TEXTAREA ALLOW SPECIAL CHAR</h4>
    <InputSelectionHandler
      config={formElement.sampleTextareaSpecial}
      customClass="textarea-allow-special-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleTextareaSpecial')}
      allowedChar={{
        alphabet: true,
        numeric: true,
        space: true,
        allowedSymbols: ['&.,']
      }}
    />
</div>

5) Select

let [formElement, setFormElement] = useState<IState['formElement']>({
  sampleSelect: {
      id: 'sampleSelect',
      type: 'select',
      placeholder: 'Please select option',
      value: '',
      disabled: false,
      options: [
          {
            label: "Leave",
            value: "file-leave",       
          },
          {
            label: "Overtime",
            value: "file-overtime",       
          },
          {
            label: "DTR Amendment",
            value: "file-amendment",        
          },
          {
            label: "Change Shift",
            value: "view-shift-schedule",     
          }
        ]
    }
});

Usage for Select

<div>
    <h4>SELECT</h4>
    <InputSelectionHandler
      config={formElement.sampleSelect}
      customClass="select-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleSelect')}
    />
</div>

6) Select with Group Option

let [formElement, setFormElement] = useState<IState['formElement']>({
 sampleSelectGroupOption: {
      id: 'sampleSelectGroupOption',
      type: 'select',
      placeholder: 'Please select option',
      value: '',
      disabled: false,
      options: {
          'sample-group-1': {
            label: 'Sample Group 1',
            options: [
              {
                label: 'Option 1',
                value: 'option-1'
              },
              {
                label: 'Option 2',
                value: 'option-2'
              },
            ]
          },
          'sample-group-2': {
            label: 'Sample Group 2',
            options: [
              {
                label: 'Option 3',
                value: 'option-3'
              },
              {
                label: 'Option 4',
                value: 'option-4'
              },
            ]
          },
          'sample-group-3': {
            label: 'Sample Group 2',
            options: [
              {
                label: 'Option 5',
                value: 'option-5'
              },
              {
                label: 'Option 6',
                value: 'option-6'
              },
            ]
          }
        }
    }
});

Usage for Select with Group Option

<div>
    <h4>SELECT GROUP OPTIONS</h4>
    <InputSelectionHandler
      config={formElement.sampleSelectGroupOption}
      customClass="select-group-options-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleSelectGroupOption')}
    />
</div>

7) Multi-Select

let [formElement, setFormElement] = useState<IState['formElement']>({
 sampleMultiSelect: {
      id: 'sampleMultiSelect',
      type: 'multi-select',
      placeholder: 'Please select multiple option',
      value: [],
      disabled: false,
      options: [
          {
            label: "Leave",
            value: "file-leave",        
        
          },
          {
            label: "Overtime",
            value: "file-overtime",        
        
          },
          {
            label: "DTR Amendment",
            value: "file-amendment",        
        
          },
          {
            label: "Change Shift",
            value: "view-shift-schedule",     
          },
        ]
    }
});

Usage for Select with Multi-Select

<div>
    <h4>MULTI-SELECT</h4>
    <InputSelectionHandler
      config={formElement.sampleMultiSelect}
      customClass="multi-select-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleMultiSelect')}
    />
</div>

8) Multi-Select with Group Option

let [formElement, setFormElement] = useState<IState['formElement']>({
sampleMultiSelectGroupOption: {
      id: 'sampleMultiSelectGroupOption',
      type: 'multi-select',
      placeholder: 'Please select multiple option',
      value: [],
      disabled: false,
      options: {
          'sample-group-1': {
            label: 'Sample Group 1',
            options: [
              {
                label: 'Option 1',
                value: 'option-1'
              },
              {
                label: 'Option 2',
                value: 'option-2'
              },
            ]
          },
          'sample-group-2': {
            label: 'Sample Group 2',
            options: [
              {
                label: 'Option 3',
                value: 'option-3'
              },
              {
                label: 'Option 4',
                value: 'option-4'
              },
            ]
          },
          'sample-group-3': {
            label: 'Sample Group 2',
            options: [
              {
                label: 'Option 5',
                value: 'option-5'
              },
              {
                label: 'Option 6',
                value: 'option-6'
              },
            ]
          }
        }
    }
});

Usage Multi-Select with Group Option

<div>
    <h4>MULTI-SELECT GROUP OPTIONS</h4>
    <InputSelectionHandler
      config={formElement.sampleMultiSelectGroupOption}
      customClass="multi-select-group-options-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleMultiSelectGroupOption')}
    />
</div>

9) Toggle Button

let [formElement, setFormElement] = useState<IState['formElement']>({
sampleToggleButton: {
      id: 'sampleToggleButton',
      type: 'toggle-button',
      placeholder: 'Please select option',
      value: '',
      disabled: false,
      required: true,
      options: [
          {
            label: "Approve",
            value: "APPROVED",
          },
          {
            label: "Reject",
            value: "REJECTED",
          }
        ]
    }
    
});

Usage forToggle Button

<div>
    <h4>TOGGLE BUTTON</h4>
    <InputSelectionHandler
      config={formElement.sampleToggleButton}
      customClass="toggle-button-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleToggleButton')}
    />
</div>

10) Checkbox

let [formElement, setFormElement] = useState<IState['formElement']>({
    sampleCheckbox: {
      id: "sampleCheckbox",
      type: 'checkbox',
      label: "Sample label",
      value: false,
      disabled: false
    }
});

Usage for Checkbox

<div>
    <h4>CHECKBOX BUTTON</h4>
    <InputSelectionHandler
      config={formElement.sampleCheckbox}
      customClass="checkbox-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleCheckbox')}
    />
</div>

11) Datepicker (Single)

let [formElement, setFormElement] = useState<IState['formElement']>({
   sampleDatepickerSingle: {
      id: "sampleDatepickerSingle",
      type: 'datepicker',
      placeholder: 'Select date',
      value: null,
      disabled: false,
      disabledDates: ["2020-07-22", "2020-07-23", "2020-07-24"],
      disabledDays: ["Sun", "Sat"],
    }
});

Usage for Datepicker (Single)

<div>
    <h4>DATEPICKER SINGLE</h4>
    <InputSelectionHandler
      config={formElement.sampleDatepickerSingle}
      customClass="datepicker-single-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleDatepickerSingle')}
    />
</div>

12) Datepicker (Multiple)

let [formElement, setFormElement] = useState<IState['formElement']>({
    sampleDatepickerMultiple: {
      id: "sampleDatepickerMultiple",
      type: 'datepicker',
      placeholder: 'Select date',
      value: null,
      multiple: true,
      disabled: false,
      minDate: "2020-07-06",
    }
});

Usage for Datepicker (Multiple)

<div>
    <h4>DATEPICKER MULTIPLE</h4>
    <InputSelectionHandler
      config={formElement.sampleDatepickerMultiple}
      customClass="datepicker-multiple-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleDatepickerMultiple')}
    />
</div>

13) File Upload Single

let [formElement, setFormElement] = useState<IState['formElement']>({
     sampleFile: {
      id: "sampleFile",
      type: 'file',
      selected: [],
      accept: ".png,.pdf",
      disabled: false,
    }
});

Usage for File Upload Single

<div>
    <h4>FILE SINGLE</h4>
    <InputSelectionHandler
      config={formElement.sampleFile}
      customClass="file-custom-class"
      hasChips={true}
      onChanged={(e: any) => inputChangedHandler(e, 'sampleFile')}
    />
</div>

14) File Upload Multiple

let [formElement, setFormElement] = useState<IState['formElement']>({
    sampleFileMultiple: {
      id: "sampleFileMultiple",
      type: 'file',
      selected: [],
      accept: ".png,.pdf",
      disabled: false,
      multiple: true
    }
});

Usage for File Upload Multiple

<div>
    <h4>FILE MULTIPLE</h4>
    <InputSelectionHandler
      config={formElement.sampleFileMultiple}
      customClass="file-custom-class"
      hasChips={true}
      onChanged={(e: any) => inputChangedHandler(e, 'sampleFileMultiple')}
    />
</div>

15) Toggle

let [formElement, setFormElement] = useState<IState['formElement']>({
    sampleToggle: {
      id: "sampleToggle",
      label: "yes",
      type: 'toggle',
      value: false,
      disabled: false
    }
});

Usage for Toggle

<div>
    <h4>TOGGLE</h4>
    <InputSelectionHandler
      config={formElement.sampleToggle}
      customClass="toggle-custom-class"
      onChanged={(e: any) => inputChangedHandler(e, 'sampleToggle')}
    />
</div>
@emotion/react@emotion/styled@mui/material@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/jest@types/node@types/react@types/react-domnode-sassreactreact-domreact-scriptstypescriptweb-vitals
0.1.1

2 years ago

0.1.0

2 years ago