@cuong.lv2/modal-form
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

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: 'cuong.lv2@cmctelecom.vn',
    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}
      />

Readme

Keywords

Package Sidebar

Install

npm i @cuong.lv2/modal-form

Weekly Downloads

1

Version

0.0.5

License

ISC

Unpacked Size

193 kB

Total Files

4

Last publish

Collaborators

  • cuong.lv2