1.0.10 • Published 7 years ago
react-role-manager v1.0.10
react-role-manager
Simple React component to manage users roles/teams based on Semantic UI for React
Install
npm i --save @techexmachina/react-role-managerExample
import React, { Component } from 'react';
import autobind from 'react-autobind';
import PropTypes from 'prop-types';
import RoleManager from '@techexmachina/react-role-manager';
import { Segment, Checkbox, Grid, Header, Table, Search, Dropdown } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';
const roles = [
"super-admin",
"admin",
"author",
"subscriber",
"user",
];
const users = [
{
_id: 1,
name: "david",
roles: ['admin'],
},
{
_id: 2,
name: "simon",
roles: ['subscriber'],
},
{
_id: 3,
name: "sylvain",
roles: ['author'],
},
{
_id: 4,
name: "francois",
roles: ['subscriber'],
},
{
_id: 5,
name: "jimmy",
roles: ['admin'],
},
];
/********************************************************/
export class RoleManagerExample extends Component {
constructor( props ){
super( props );
autobind( this );
this.state = {
loading: false,
results: [],
columns: [
'_id',
'name',
],
};
}
handeOptionChange( roles, searchValue ){
this.setState({ loading: true });
searchValue = searchValue.trim();
if ( !roles.length && !searchValue ) this.setState({ loading: false, results: [] });
else setTimeout( f => {
const regexp = new RegExp( searchValue, 'i' );
const results = users.filter( user => (
( !roles.length && regexp.test( user.name ) ) ||
( roles.length && roles.indexOf( user.roles[0] ) >= 0 && regexp.test( user.name ) ) ||
( !searchValue && roles.length && roles.indexOf( user.roles[0] ) >= 0 )
) );
this.setState({ loading: false, results });
}, 500 );
}
handleRoleChange( newRoles, userId ){
console.log("Attributing new roles to " + userId, newRoles);
// Update your databse here
}
render(){
const { loading, results, columns } = this.state;
return (
<RoleManager
loading={loading}
results={results}
onOptionChange={this.handeOptionChange}
roles={roles}
columns={columns}
onRoleChange={this.handleRoleChange}
/>
);
}
}Props
RoleManager props
| Format | Required | What it does ? | |
|---|---|---|---|
| loading | boolean | NO | Set to true if entries are being fetched / computed |
| onRoleChange | function | YES | A callback used to catch role changes on a specific user. Receives an array of roles (strings) & a user _id as parameters |
| onOptionChange | function | YES | A callback used to be called when the Search field or a role Checkbox is updated. Receives an array of roles (strings) & a search string as parameters |
| roles | [string] | YES | An array of strings to display the different roles/teams that can be (un)checked for changing search options |
| results | [object] | NO | An array of user objects to fill the TableGenerator. Each object must have at least a roles attribute (array of string) and an _id (string or number) |
| columns | [string or object] | YES | An array of string or object representing the different columns displayed by the TableGenerator. Strings should match of the user object property. Objects must contains at least a name (string) property for naming the column, and a as property, which is a React.Component prototype of your choice to be displayed in the cell. Objects can also have an arbitrary additionalProps property, which will be passed to the as component. |
Notes
The RoleManager is based on react-table-generator module. It will automaticaly add an additional column to the Table with a semantic Dropdown in order to let you remove and add roles to users. The dropdown will automatically receive the onRoleChange prop and the user roles and _id
Contributors
- David Panart (@Fen747)
MIT Licensed