✨ 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