@cuong.lv2/modal-form

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: '[e-mail]',
    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}
      />