local-admin v1.1.3

✨ 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

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

CROPPER

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

API

Cropper will calculate ratio from width and height default is square

HEADER

API

User Object

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

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

Column Object

• 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