services/workbench2/src/components/expand-chevron-right/expand-chevron-right.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { ChevronRight } from '@material-ui/icons';
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9
  10 type CssRules = 'root' | 'default' | 'expanded';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     root: {
  14         display: 'flex',
  15         alignItems: 'center',
  16         justifyContent: 'center',
  17         width: '24px',
  18         height: '24px',
  19         cursor: 'pointer',
  20     },
  21     default: {
  22         transition: 'all 0.1s ease',
  23         transform: 'rotate(0deg)',
  24     },
  25     expanded: {
  26         transition: 'all 0.1s ease',
  27         transform: 'rotate(90deg)',
  28     },
  29 });
  30
  31 export interface ExpandChevronRightDataProps {
  32     expanded: boolean;
  33 }
  34
  35 type ExpandChevronRightProps = ExpandChevronRightDataProps & WithStyles<CssRules>;
  36
  37 export const ExpandChevronRight = withStyles(styles)(
  38     class extends React.Component<ExpandChevronRightProps, {}> {
  39         render() {
  40             const { classes, expanded } = this.props;
  41             return (
  42                 <div className={classes.root}>
  43                     <ChevronRight className={expanded ? classes.expanded : classes.default} />
  44                 </div>
  45             );
  46         }
  47     }
  48 );