https://github.com/ne-smalltown/doni

基于 Mobx 的高性能 UI 组件库。A high performance UI library using magic Mobx and Antd!
https://github.com/ne-smalltown/doni

ant-design antd component-library library react ui

Last synced: 3 days ago
JSON representation

基于 Mobx 的高性能 UI 组件库。A high performance UI library using magic Mobx and Antd!

• Host: GitHub
• URL: https://github.com/ne-smalltown/doni
• Owner: NE-SmallTown
• License: mit
• Created: 2022-02-18T13:04:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-02-19T07:05:36.000Z (over 2 years ago)
• Last Synced: 2024-10-14T12:21:28.127Z (25 days ago)
• Topics: ant-design, antd, component-library, library, react, ui
• Language: TypeScript
• Homepage:
• Size: 121 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Doni

A high performance UI library using magic Mobx and Antd!

# What magic it has?

See https://zhuanlan.zhihu.com/p/469224590

# Install

`npm i doni`

# Example

```jsx

import { Table, BodyCell, ModalButton, DoniTableColumn } from 'doni';

import { types } from 'mobx-state-tree';

const ModelArticle = types.model({

  id: types.string,

  images: types.array(types.string),

});

const columns: DoniTableColumn[] = [

  {

    title: 'id',

    width: '10%',

    fixed: 'left',

    render: (article) => article.id,

  },

  {

    title: 'images',

    width: '15%',

    render: ({ images }) => {

      return (

        

          

        

      )

    },

  },

  {

    title: 'Action',

    width: '15%',

    fixed: 'right',

    render: (article, { modals: [ changeTitleModal ], action }) => {

      const handleSubmitChangeForm = async (submitData: any) => {

        action.setRecord((article: IModelArticle) => {

          article.title = submitData.newTitle;

        });

        await new Promise(r => {

          setTimeout(r, 3000);

        });

        changeTitleModal.closeModal();

      };

      return (

        

          

             
{ dom }
,

              }}

              onFinish={ handleSubmitChangeForm }

            >

              New Title}

                placeholder='Please input new title.'

                rules={[{ required: true, message: 'Please input new title.' }]}

              />

            

          

        

      );

    },

  },

];


```