skyquake/plugins/admin/src/components/ActionBar.jsx

   1 import React from 'react'
   2 import { TrashIcon } from 'react-open-iconic-svg';
   3 import { PencilIcon } from 'react-open-iconic-svg';
   4 import { PlusIcon } from 'react-open-iconic-svg';
   5 import { CircleXIcon } from 'react-open-iconic-svg';
   6
   7 const actionIcon = {
   8     'create': {icon: PlusIcon, title: "Add"},
   9     'update': {icon: PencilIcon, title: "Edit"},
  10     'delete': {icon: TrashIcon, title: "Delete"},
  11     'close': {icon: CircleXIcon, title: "Close Panel"}
  12 }
  13
  14 export default (props) => {
  15     const { isHidden, actions, handler } = props;
  16     const buttons = [];
  17     actions && actions.forEach((action => buttons.push(
  18         <div key={action} style={{ visibility: isHidden ? 'hidden' : 'visible', display: 'inline-block', padding: '.15rem .5rem' }}>
  19             <div title={actionIcon[action].title} style={{ display: 'inline-block', cursor: 'pointer' }}>
  20                 {React.createElement(actionIcon[action].icon, {width: '12', height: '12', onClick: () => handler(action)})}
  21             </div>
  22         </div>
  23     )));
  24     return (
  25         <div className='button-bar' style={{ height: '17px', width: '100%', textAlign: 'right' }} >
  26             {buttons}
  27         </div>
  28     )
  29 }
  30