Modal form data

Thư viện sử dụng Ant design.

Cài đặt

npm i @cuong.lv2/modal-form or yarn add @cuong.lv2/modal-form

Link example

https://gitlab.com/cuongle.3103/example-modal-form-ant.git

API

| Props | Loại | Mô tả | | ----------- | ----------- | ----------- | | title | String | | isOpen | bool | | handleCancel | func | handleCancel=() =>{} | forms | array| Form API | handleSubmit | func| handleSubmit = () =>{} | formLayout | string | Default horizontal (vertical) | data | object | Modal create (data = null) hoặc Modal edit (data = object)

Form API

| Props | Loại | Mô tả | | ----------- | ----------- | ----------- | | title | String | | name | String | | type | String| Type Api | label | bool| | col | number| Grid col 1,2,3,4,6,12 | rules | array | validation antd form

Type API Tham khải API Data Entry antd

| Props | Mô tả | | ----------- | ----------- | | text | | title | | input | | text-area | | number | | select | | multi-select | | date | | date-range | | date-time-range | | date-time | | radio-button | | checkbox | | rate | | upload |

Ví dụ

import { ModalForm } from '@cuong.lv2/modal-form

 let forms = [
    {
      title: 'Email',
      name: 'email',
      type: 'input',
      label: true,
      col: 6,
      rules: [
        {
          type: 'email',
          message: 'The input is not valid E-mail!',
        },
        {
          required: true,
          message: 'Please input your E-mail!',
        },
      ],
    },
    {
      title: 'SĐT',
      name: 'phone',
      label: true,
      type: 'number',
      col: 6,
      min: 10,
    },
    {
      title: 'Number',
      name: 'number',
      type: 'number',
      col: 6,
      // addonBefore: 'VNĐ',
      addonAfter: 'VNĐ',
      // disabled: true,
      min: 10,
      max: 1234567890
    },
    {
      title: 'Họ tên',
      name: 'name',
      type: 'input'
    },
    {
      title: 'Địa chỉ',
      label: true,
      name: 'address',
      type: 'text-area',
      rows: 4,
      maxLength: 100,
      col: 12,
      showCount: true
    },
    {
      title: 'Giới tính',
      name: 'sex',
      type: 'select',
      label: true,
      options: [{
        title: 'Nam',
        value: 'male'
      },
      {
        title: 'Nữ',
        value: 'female'
      },
      {
        title: 'BĐ',
        value: 'bd',
        disabled: true
      },
      ]
    },
    {
      title: 'Sở thích',
      name: 'like',
      type: 'multi-select',
      label: true,
      options: [
        {
          title: 'Đá bóng',
          value: 'bóng'
        },
        {
          title: 'Game',
          value: 'game'
        },
        {
          title: 'Karaoke',
          value: 'karaoke',
        },
        {
          title: 'Love',
          value: 'love',
        }
      ]
    },
    {
      title: 'Ngày sinh',
      name: 'birthday',
      type: 'date',
      disabledDate: disabledDate,
    },
    {
      title: 'Ngày sinh',
      name: 'birthday-time',
      type: 'date-time',
    },
    {
      title: 'Ngày sinh',
      name: 'birthday-range',
      type: 'date-range',
    },
    {
      title: 'Ngày sinh',
      name: 'birthday-time-range',
      type: 'date-time-range',
    },
    {
      title: 'Rate',
      name: 'rate',
      type: 'rate',
    },
    {
      title: 'Radio button',
      name: 'options',
      type: 'radio-button',
      label: true,
      options: [{
        title: 'Nam',
        value: 'male'
      },
      {
        title: 'Nữ',
        value: 'female'
      },
      {
        title: 'BĐ',
        value: 'bd',
        disabled: true
      },
      ]
    },
    {
      title: 'Checkbox',
      name: 'check',
      type: 'checkbox',
      label: true,
      options: [{
        title: 'Nam',
        value: 'male'
      },
      {
        title: 'Nữ',
        value: 'female'
      },
      {
        title: 'BĐ',
        value: 'bd',
        disabled: true
      },
      ]
    },
    {
      title: 'Upload',
      name: 'upload',
      type: 'upload',
      label: true,
      multiple: true,
      disabled: false,
      // maxCount:2,
      // textHelper: 'Upload file img',
      action: (file) =>{
        console.log("file", file)
      }
    }
  ]

  let data = {
    email: '[email protected]',
    name: 'cuonglv',
    phone: '10000',
    address: 'HN',
    number: 123456789
  }

     <ModalForm
        title="Edit data"
        isOpen={open}
        handleCancel={() => setOpen(false)}
        forms={forms}
        handleSubmit={handleSubmit}
        formLayout="horizontal"
        data={data}
      />