Neil Patrick's Mansion

    @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}
          />
    

    Install

    npm i @cuong.lv2/modal-form

    DownloadsWeekly Downloads

    7

    Version

    0.0.5

    License

    ISC

    Unpacked Size

    193 kB

    Total Files

    4

    Last publish

    Collaborators

    • cuong.lv2