react-ant-abstract-curd

Antd abstract curd.

installation

npm install -S @jswork/react-ant-abstract-curd

usage

1. import css

@import "~@jswork/react-ant-abstract-curd/dist/style.css";

// or use sass
@import "~@jswork/react-ant-abstract-curd/dist/style.scss";

// customize your styles:
$react-ant-abstract-curd-options: ()

2. import js

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Card, Space } from 'antd';
import { UnorderedListOutlined } from '@ant-design/icons';
import ReactAntAbstractCurd from '@jswork/react-ant-abstract-curd';
import '../../src/components/style.scss';
import './style.css';
import EventMitt from '@jswork/event-mitt';
import nx from '@jswork/next';
import '@jswork/next-param';
import '@jswork/next-ant-column';

// http://localhost:3000/#/?page=1&size=10

class ApiService {
  static repos_index(inData) {
    var url = nx.param(inData, 'https://jsonplaceholder.typicode.com/posts');
    return fetch(url).then((res) => res.json());
  }

  static repos_destroy(inData): Promise<any> {
    return new Promise((resolve) => {
      console.log('call destroy api', inData);
      resolve(inData);
    });
  }
}

class RouteService {
  static push(inUrl) {
    console.log('push to:', inUrl);
  }
}

/**
 * apiService: nx.$api
 * eventService: nx.$event
 * routeService: nx.$route
 * engineType: nx.$local | nx.$session
 */

class Index extends ReactAntAbstractCurd {
  apiService = ApiService; // nx.$api
  routeService = RouteService; // nx.$route
  eventService = nx.mix(this, EventMitt); // nx.$app
  resources = 'repos';
  searchable = true;
  pagination = {
    page: 'page',
    size: 'per_page',
    total: 'total'
  };

  get fields() {
    return [
      nx.antColumn('ID', 'id'),
      nx.antColumn('title', 'title'),
      nx.antColumn('body', 'body', (text) => String(text)),
      nx.antColumn('uid', 'userId')
    ];
  }

  setResponse(res) {
    return {
      rows: res,
      total: 100
    };
  }

  get titleView() {
    return (
      <Space>
        <UnorderedListOutlined />
        <span>列表管理</span>
      </Space>
    );
  }

  render() {
    return (
      <Card title={this.titleView} className="m10 react-ant-abstract-curd" extra={this.extraView}>
        {this.table()}
      </Card>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById('root'));

preview

• https://afeiship.github.io/react-ant-abstract-curd/

license

Code released under the MIT license.