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 '@mui/icons-material';
   7 import { CustomStyleRulesCallback } from 'common/custom-theme';
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11
  12 type CssRules = 'root' | 'default' | 'expanded';
  13
  14 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         display: 'flex',
  17         alignItems: 'center',
  18         justifyContent: 'center',
  19         width: '24px',
  20         height: '24px',
  21         cursor: 'pointer',
  22     },
  23     default: {
  24         transition: 'all 0.1s ease',
  25         transform: 'rotate(0deg)',
  26     },
  27     expanded: {
  28         transition: 'all 0.1s ease',
  29         transform: 'rotate(90deg)',
  30     },
  31 });
  32
  33 export interface ExpandChevronRightDataProps {
  34     expanded: boolean;
  35 }
  36
  37 type ExpandChevronRightProps = ExpandChevronRightDataProps & WithStyles<CssRules>;
  38
  39 export const ExpandChevronRight = withStyles(styles)(
  40     class extends React.Component<ExpandChevronRightProps, {}> {
  41         render() {
  42             const { classes, expanded } = this.props;
  43             return (
  44                 <div className={classes.root}>
  45                     <ChevronRight className={expanded ? classes.expanded : classes.default} />
  46                 </div>
  47             );
  48         }
  49     }
  50 );