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 import { IconButton } from "@mui/material";
  12
  13 type CssRules = 'root' | 'default' | 'expanded';
  14
  15 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  16     root: {
  17         width: '24px',
  18         height: '24px',
  19         cursor: 'pointer',
  20         marginLeft: '1em',
  21         marginTop: "-.2em",
  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                 <IconButton className={classes.root}>
  45                     <ChevronRight className={expanded ? classes.expanded : classes.default} />
  46                 </IconButton>
  47             );
  48         }
  49     }
  50 );