✨ React with ant.design Admin Components ✨''

Prerequisite

• Add local npm registry
  • npm set registry http://188.166.184.174:4873
  • npm adduser --registry http://188.166.184.174:4873
• SCSS webpack loader
  • npm install --save-dev sass-loader node-sass
  • Add to your webpack module loaders

    {
      test: /\.scss$/,
      loaders: [
        'style',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'resolve-url',
        'sass'
    }

• LESS webpack loader
  • npm install --save-dev less less-loader
  • Add to your webpack module loaders

    {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
    }

  • Import less file to your main app

    import 'antd/dist/antd.less'

Installation

• npm install --save local-admin This will get package from local npm registry

Components

• Breadcrumb
• Container
• Cropper
• Header
• Sidebar
• Table
• Utility
• ...

BREADCRUMB

API

| Property | Type | Required| | ------------- |:-------| :---------| | path | Path Array | true|

Path Array

[
  {
    name: 'Home',
    path: '/'
  },
  {
    name: 'User',
    path: '/users'
  },
  {
    name: 'John Cena',
    path: '/users/JohnCena1988'
  }
]

CONTAINER

Example

<Container
Sidebar={Sidebar}
Header={Header}>
{this.props.chilrden}
</Container>

API

| Property | Type | Required| | ------------- |:-------| :---------| | Sidebar | Sidebar Component | false| | Header | Header Component | false|

CROPPER

This is simple cropping image build on top of react-cropper

API

|Property| Description | Type | Required| |:--------|--------|--------|--------:| | width | Width of cropper preview | Number | Optional | | height | Height of cropper preview | Number | Optional | | handleCrop | Handle cropping image return preview blob url and blob file | (preview, file) => | Required |

Cropper will calculate ratio from width and height default is square

HEADER

API

| Property | Type | Required | Default | | ------------- |:-------| :---------| :-----| | logoImg | string or image | false | placeholder | | logoPosition | 'center' or 'left' | false | 'left' | | menu | Menu Object | true | [ ] | | user | User Object | true | {} |

User Object

| Property | Type | Required | Default | | ------------- |:-------| :---------| :-----| | username | string | false | null | | first_name | string | false | null | | last_name | string | false | null | | img | string | false | placeholder |

User can add more Property this for example only

• Example

  {
    username: 'Jonh Cean 1988',
    first_name: 'Jonh',
    last_name: 'Cena',
    img: 'http://files.gamebanana.com/img/ico/sprays/5627f56c99b3a.png'
  }

Menu Object

Menu object is an array that contains menu context wrap by Menu from antd package

• Example

[
  <Menu key="nav">
    <Menu.Item key="home">
      <Link to='/'>
        HOME
      </Link>
    </Menu.Item>
    <Menu.Item key="alert">
      <div onClick={() => alert('You can see me!')}>
        Alert
      </div>
    </Menu.Item>
  </Menu>
];

SIDEBAR

Example

<Sidebar menu={sidebarMenu} location={this.props.location} />

API

| Property | Type | Required| | ------------- |:-------| :---------| | menu | Menu Object | true| | location | location Object | true|

Menu Object

Menu object is an array of object contain simple path and name

• Example

const sidebarMenu = [
  {
    path: '/',
    name: 'Home'
  },
  {
    path: '/users',
    name: 'User'
  },
  {
    path: '/projects',
    name: 'Project'
  },
  {
    name: 'Setting',
    subMenu: [
      {
        path: '/user',
        name: 'User'
      }
    ]
  }
]

• generate as

TABLE

API

| Property | Type | Required| | ------------- |:-------| :---------| | columns | Array of column object | Require| | data | array | Optional| | isLoading | Boolean | Optional | | empty | view | Optional |

Column Object

| Property | Description | Type | Required| | -------------|:------- |:-------| :---------| | title | Header title | String | Require | | dataIndex | Data field to map with | String | Require | | key | Data field key | String | Require | | render | Render to the shape you want | (text, record) => (...) | Optional | | sorter | Sort data in the table | (a, b) => (...) | Optional |

• Example

[
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => b.age - a.age, // return boolean
    }
]

Utility

handleChange

This will setState for your component

import { handleChange } from 'local-admin/lib/Utility'
constructor(props) {
  super(props)
  this.handleChange = handleChange.bind(this)
}

Reference

• Project repository
• Ant.design
• Customize Theme