src/components/icon/icon.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import * as classnames from "classnames";
   7
   8 import AccessTime from '@material-ui/icons/AccessTime';
   9 import Announcement from '@material-ui/icons/Announcement';
  10 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
  11 import BubbleChart from '@material-ui/icons/BubbleChart';
  12 import Cached from '@material-ui/icons/Cached';
  13 import Code from '@material-ui/icons/Code';
  14 import ChevronLeft from '@material-ui/icons/ChevronLeft';
  15 import ChevronRight from '@material-ui/icons/ChevronRight';
  16 import Close from '@material-ui/icons/Close';
  17 import ContentCopy from '@material-ui/icons/ContentCopy';
  18 import CreateNewFolder from '@material-ui/icons/CreateNewFolder';
  19 import Delete from '@material-ui/icons/Delete';
  20 import Edit from '@material-ui/icons/Edit';
  21 import FolderIcon from '@material-ui/icons/Folder';
  22 import GetApp from '@material-ui/icons/GetApp';
  23 import Help from '@material-ui/icons/Help';
  24 import Inbox from '@material-ui/icons/Inbox';
  25 import Info from '@material-ui/icons/Info';
  26 import Input from '@material-ui/icons/Input';
  27 import Menu from '@material-ui/icons/Menu';
  28 import MoreVert from '@material-ui/icons/MoreVert';
  29 import NotificationsIcon from '@material-ui/icons/Notifications';
  30 import People from '@material-ui/icons/People';
  31 import Person from '@material-ui/icons/Person';
  32 import PersonAdd from '@material-ui/icons/PersonAdd';
  33 import PlayArrow from '@material-ui/icons/PlayArrow';
  34 import RateReview from '@material-ui/icons/RateReview';
  35 import Search from '@material-ui/icons/Search';
  36 import Star from '@material-ui/icons/Star';
  37 import StarBorder from '@material-ui/icons/StarBorder';
  38
  39 export enum IconTypes {
  40     ACCESS_TIME = 'access_time',
  41     ANNOUNCEMENT = 'announcement',
  42     ARROW_DROP_DOWN = 'arrow_drop_down',
  43     BUBBLE_CHART = 'bubble_chart',
  44     CACHED = 'cached',
  45     CODE = 'code',
  46     CHEVRON_LEFT = 'chevron_left',
  47     CHEVRON_RIGHT = 'chevron-right',
  48     COLLECTION = 'collection',
  49     CLOSE = 'close',
  50     CONTENT_COPY = 'content_copy',
  51     CREATE_NEW_FOLDER = 'create_new_folder',
  52     DELETE = 'delete',
  53     EDIT = 'edit',
  54     FOLDER = 'folder',
  55     GET_APP = 'get_app',
  56     HELP = 'help',
  57     INBOX = 'inbox',
  58     INFO = 'info',
  59     INPUT = 'input',
  60     MENU = 'menu',
  61     MORE_VERT = 'more_vert',
  62     NOTIFICATIONS = 'notifications',
  63     PEOPLE = 'people',
  64     PERSON = 'person',
  65     PERSON_ADD = 'person_add',
  66     PLAY_ARROW = 'play_arrow',
  67     RATE_REVIEW = 'rate_review',
  68     SEARCH = 'search',
  69     STAR = 'star',
  70     STAR_BORDER = 'star_border'
  71 }
  72
  73 interface IconBaseDataProps {
  74     icon: IconTypes;
  75     className?: string;
  76 }
  77
  78 type IconBaseProps = IconBaseDataProps;
  79
  80 interface IconBaseState {
  81     icon: IconTypes;
  82 }
  83
  84 const getSpecificIcon = (props: any) => ({
  85     [IconTypes.ACCESS_TIME]: <AccessTime className={props.className} />,
  86     [IconTypes.ANNOUNCEMENT]: <Announcement className={props.className} />,
  87     [IconTypes.ARROW_DROP_DOWN]: <ArrowDropDown className={props.className} />,
  88     [IconTypes.BUBBLE_CHART]: <BubbleChart className={props.className} />,
  89     [IconTypes.CACHED]: <Cached className={props.className} />,
  90     [IconTypes.CODE]: <Code className={props.className} />,
  91     [IconTypes.CHEVRON_LEFT]: <ChevronLeft className={props.className} />,
  92     [IconTypes.CHEVRON_RIGHT]: <ChevronRight className={props.className} />,
  93     [IconTypes.COLLECTION]: <i className={classnames([props.className, 'fas fa-archive fa-lg'])} />,
  94     [IconTypes.CLOSE]: <Close className={props.className} />,
  95     [IconTypes.CONTENT_COPY]: <ContentCopy className={props.className} />,
  96     [IconTypes.CREATE_NEW_FOLDER]: <CreateNewFolder className={props.className} />,
  97     [IconTypes.DELETE]: <Delete className={props.className} />,
  98     [IconTypes.EDIT]: <Edit className={props.className} />,
  99     [IconTypes.FOLDER]: <FolderIcon className={props.className} />,
 100     [IconTypes.GET_APP]: <GetApp className={props.className} />,
 101     [IconTypes.HELP]: <Help className={props.className} />,
 102     [IconTypes.INBOX]: <Inbox className={props.className} />,
 103     [IconTypes.INFO]: <Info className={props.className} />,
 104     [IconTypes.INPUT]: <Input className={props.className} />,
 105     [IconTypes.MENU]: <Menu className={props.className} />,
 106     [IconTypes.MORE_VERT]: <MoreVert className={props.className} />,
 107     [IconTypes.NOTIFICATIONS]: <NotificationsIcon className={props.className} />,
 108     [IconTypes.PEOPLE]: <People className={props.className} />,
 109     [IconTypes.PERSON]: <Person className={props.className} />,
 110     [IconTypes.PERSON_ADD]: <PersonAdd className={props.className} />,
 111     [IconTypes.PLAY_ARROW]: <PlayArrow className={props.className} />,
 112     [IconTypes.RATE_REVIEW]: <RateReview className={props.className} />,
 113     [IconTypes.SEARCH]: <Search className={props.className} />,
 114     [IconTypes.STAR]: <Star className={props.className} />,
 115     [IconTypes.STAR_BORDER]: <StarBorder className={props.className} />
 116 });
 117
 118 class IconBase extends React.Component<IconBaseProps, IconBaseState> {
 119     state = {
 120         icon: IconTypes.FOLDER,
 121     };
 122
 123     render() {
 124         return getSpecificIcon(this.props)[this.props.icon];
 125     }
 126 }
 127
 128 export default IconBase;