Updates:
- version 1.6.0
- Support rtl and localization
import React, { Component } from "react";
import { listViews, docViews, Admin, fields } from "redux-admin";
const getDocTitle = function(data) {
if (data && data._id) {
return `Item ${data.title|| data.objectId}`;
} else {
return "New Item";
}
};
const getListFields = function() {
return [
{
title: "Title",
key: "title",
dataIndex: "title",
width: 150,
sorter: true,
type: String
},
{
title: "Likes",
key: "likes",
dataIndex: "likes",
width: 150,
sorter: true,
type: Number
}
];
};
const docFields = function() {
return (
<div>
<fields.Input name={"title"} label={"Title"} />
<fields.InputNumber name={"likes"} label={"Likes"} />
</div>
);
};
const renderDocViewComponent = function({ dataFromServer }) {
return JSON.stringify(dataFromServer);
};
class Posts extends Component {
render() {
return (
<div>
<Admin
title={"Posts"}
getDocTitle={getDocTitle}
url="classes/Post"
list={<listViews.Table getColumns={getListFields} />}
doc={
<docViews.SimpleDoc
getDocFields={docFields}
renderDocViewComponent={renderDocViewComponent}
/>
}
roleConfig={{
canCreate: true,
canRead: true,
canUpdate: true,
canDelete: true,
excludeFields: []
}}
/>
</div>
);
}
}
export default Posts;-
You can install redux-admin with NPM, Yarn
npm install redux-admin --save
-
Follow Net-Provider Installation instruction Net-provider is the connection to your api
-
Router configuration - we sync parameters with URL to achieve a better UX
// inside your root file (app.js) import { setRouteConfig } from 'redux-admin'; setRouteConfig({ onReplaceParams: () => {...}, onSetParams: : () => {...}, onBack: : () => {...}, goHome: : () => {...}, onGetParams: : () => {...}, });Examples:
-
import style
import "redux-admin/lib/style.css"; // -- or rtl style -- import "redux-admin/lib/style.rtl.css";
-
Install antd
-
Optional - set diffrent locale- default is enUs
import { setLocal, locals } from 'redux-admin'; setLocal(locals.heIl);
You can create you own local file just copy this file and update the content
This is the main component that will render a list view and document view, sync the doc view with the list view and keep everything to work nice and updating, display notification, update the list when the document is updating. sync filters with URL. you can build your own list/doc view
import { Admin } from "redux-admin";Admin.propTypes = {
url: PropTypes.string.isRequired, // Api endpoint
list: PropTypes.element,
renderList: PropTypes.func, // alternative to props.list
doc: PropTypes.element,
renderDoc: PropTypes.func, // alternative to props.doc
title: PropTypes.string,
getDocTitle: PropTypes.func, // function that get doc data and return the doc title that display inside the breadcrumb (DocData) => 'title'
queryParamsPrefix: PropTypes.string, // This is required when you render more then one component at the same page
getListSource: PropTypes.func,
getDocumentSource: PropTypes.func,
allowViewMode: PropTypes.bool, // set false to block user from watching the document
syncWithUrl: PropTypes.bool, // true by default, set false to disabled this feature
showBreadcrumb: PropTypes.bool, // true by default, set false, relevant when you render more then one component at the same page
editAfterSaved: PropTypes.bool, // true by default, when true new document will stay open after submit
onChangeEnd: PropTypes.func, // optional Call back After create/update/delete
initialSearchValue: PropTypes.string,
onSearchValueChange: PropTypes.func, // If You Want To Handle it By Your self
searchValue: PropTypes.string, // relevant when you pass onSearchValueChange
initialLimit: PropTypes.number, // default is 5, query limit
initialSort: PropTypes.object, // { <field1>: 1, <field2>: -1 ... }
initialSkip: PropTypes.number, // default is 0
listClearOnUnMount: PropTypes.bool, // true by default, when true we remove all data from store when componentWillUnmount
adminWillUnmount: PropTypes.func, // optional Call back when componentWillUnmount
roleConfig: PropTypes.shape({
canCreate: PropTypes.bool, // true by default
canRead: PropTypes.bool, // true by default
canUpdate: PropTypes.bool, // true by default
canDelete: PropTypes.bool, // true by default
excludeFields: PropTypes.array // [] by default
}),
useDataFromList: PropTypes.bool, // false by default, set true to save query and use the data the from list as document data
getParams: PropTypes.func.isRequired // pass function that build query params from the filters parameters getParams({skip, sort, limit, searchValue})
};The default list view is Table From antd You can pass other component
How to use the default view?
import { listViews, Admin, helpers } from "redux-admin";
const getListFields = function(props) {
return [
{ title:"Title",
key:"title",
dataIndex: "title",
width:150,
sorter:true,
type: String
},
// You can use helper to save time
helpers.getListField({key: 'body', type: String})
]
}
class Posts extends Component {
render() {
return (
<Admin
url="classes/Post"
title={"Posts"}
getDocTitle={getDocTitle}
list={<listViews.Table
getColumns={getListFields}/>
}
...Each field inside the list columns need to contian this keys
- title: string
- key: string
- dataIndex: string
- width: number
- sorter: boolean
- type: one of: String | Object | Array | Number | Date
- render : optional fucntion (cell, row) => <MyComponent data={cell} />
<Admin /> will pass the data and handle the row clicks and so on, the is the relevant props to pass directly to the table component
ReTable.propTypes = {
getColumns: PropTypes.func.isRequired, // getColumns(this.props) -> [{value: 'title', label: 'Title', type: String, render: () => 'OPTIONAL'}]
getFilterFields: PropTypes.func, // if empty then we use getColumns
rowKey: PropTypes.string, // default is _id
renderInsideRowActions: PropTypes.func, // renderInsideRowActions(cell, row) => <button>Delete</button>
allowFilters: PropTypes.bool,
allowAdvanceFilters: PropTypes.bool, // true by default, allow the user to filter data with greater / less than, before/after and more...
showColumnFilters: PropTypes.bool, // true by default, allow user to hide some of the table columns
filtersFields: PropTypes.array, // when empty all table fields ar filters fields, pass array of fieldKeys to allow only some of them , Example [{key: 'status', options: {value: 'ctr', label: 'Create'}}]
allowExportToExcel: PropTypes.bool, // true by default,
onDownloadExcel: PropTypes.func, // to override local export pass function to handle this ({data, columnsToDisplay, onDownloadExcel}) => {....}
expandedRowRender: PropTypes.func, // antd table expandedRowRender
renderHeaders: PropTypes.func, // render content inside headers renderHeaders(props) => <div>Hello</div>
};
This is the full props option if you want to work with this component as a table outside of the <Admin /> component
ReTable.propTypes = {
data: PropTypes.array,
getColumns: PropTypes.func.isRequired, // getColumns(this.props) -> [{value: 'title', label: 'Title', type: String, render: () => 'OPTIONAL'}]
getFilterFields: PropTypes.func, // if empty then we use getColumns
rowKey: PropTypes.string,
editable: PropTypes.bool,
canUpdate: PropTypes.bool,
canDelete: PropTypes.bool,
renderInsideRowActions: PropTypes.func, // renderInsideRowActions(cell, row) => <button>Delete</button>
onEditClick: PropTypes.func,
onDeleteClick: PropTypes.func,
skip: PropTypes.number,
limit: PropTypes.number,
onRow: PropTypes.func,
onNewClick: PropTypes.func,
onRefreshClick: PropTypes.func,
enabledNew: PropTypes.bool,
searchValue: PropTypes.string,
showSearchField: PropTypes.bool,
onSearch: PropTypes.func,
onSearchValueChange: PropTypes.func,
onFiltersChanged: PropTypes.func,
allowAdvanceFilters: PropTypes.bool,
allowFilters: PropTypes.bool,
loading: PropTypes.bool,
count: PropTypes.number,
onPageChange: PropTypes.func,
onPageSizeChange: PropTypes.func,
onViewDocClick: PropTypes.func,
showColumnFilters: PropTypes.bool,
filtersFields: PropTypes.array, // when empty all table fields ar filters fields, pass array of fieldKeys to allow only some of them , Example [{key: 'status', options: {value: 'ctr', label: 'Create'}}]
allowExportToExcel: PropTypes.bool, // true by default,
onDownloadExcel: PropTypes.func, // to override local export pass function to handle this ({data, columnsToDisplay, onDownloadExcel}) => {....}
allowExportToPdf: PropTypes.bool, // false by default
onDownloadPdf: PropTypes.func, // pass function to handle this ({data, columnsToDisplay, onDownloadExcel}) => {....}
expandedRowRender: PropTypes.func, // antd table expandedRowRender
renderHeaders: PropTypes.func, // render content inside headers renderHeaders(props) => <div>Hello</div>
};
This is the default doc view for edit&create mode. We use formik to handle hower form
You can pass other components if you want to take the controls to your hands
How to use the default document?
import { docViews, Admin, helpers, fields } from "redux-admin";
const getDocFields = function(props) {
return (
<div>
<fields.Input
name={'email'}
required label={'Email}
key={'email'}
/>
<span>{helpers.getDocField({ // You can use helper to save time
key: 'name',
type: String,
label: 'Name',
required: true,
documentRollConfig: props.documentRollConfig,
isNewDoc: props.documentRollConfig,
})
}</span>
</div>
)}
class Posts extends Component {
render() {
return (
<Admin
url="classes/Post"
title={"Posts"}
getDocTitle={getDocTitle}
doc={<docViews.SimpleDoc
getDocFields={getDocFields}/>
}
...getDocfields - return the element that we will render inside the edit/create doc view.
the element can be any HTML element, we wrap your element with Formik/Form to handle the form state, your inputs need to include name, see Formik guide.
you can use redux-admin fields or use any fields that wrapped by Formik/Field
Examples-
- Simple input
import { Field } from 'formik'; const getDocFields = () => (<Field type="email" name="email" placeholder="Email" /> )
import { fields } from 'redux-admin';
const {
Input,
InputNumber,
MultiSelect,
Reference,
ParseServerReference,
FireStoreReference,
Select,
ArrayInput,
Consumer,
CheckBox,
DatePicker,
TimePicker,
Password,
TextArea,
Media,
AutoComplete,
ObjectEditor,
Dropzone,
BoxSelect,
CheckboxWithIcon
} = fields;