react-role-manager

Simple React component to manage users roles/teams based on Semantic UI for React

Install

npm i --save @techexmachina/react-role-manager

Example

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