@universal-tennis/ui-shared 0.1.96 → 0.1.98

package/src/stories/molecules/Cards/DrawCard.tsx

@@ -1,211 +1,211 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import { Divider, FormControl, InputLabel } from '@mui/material';
-import Button from '../../atoms/Button/Button';
-import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
-import { DrawCardProps } from "./sharedTypes";
-
-const BYE_ROUND = "Bye";
-type CardProps = {
-    isFlexWidth?: boolean;
-    isSelectActive?: boolean;
-}
-
-const StyledCard = styled(Box, {
-  shouldForwardProp: (prop: string) => prop !== 'isFlexWidth' && prop !== 'isSelectActive'
-})(({ isFlexWidth, isSelectActive }: CardProps) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  borderRadius: '4px',
-  padding: '16px 24px',
-  width: '100%',
-  minWidth: isFlexWidth ? 'auto' : '350px',
-  height: isSelectActive ? '235px' : '200px',
-  backgroundColor: 'var(--cool-grey-150)',
-  
-  '&:hover': {
-    cursor: 'pointer'
-  },
-}));
-
-const BottomGrid = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  paddingTop: '32px',
-});
-
-const positions = {
-  ONE: 1,
-  TWO: 2,
-};
-
-export default function DrawCard({
-  options, onChange, onEditClick, onViewClick, selectedOptions, dateLabel, locationLabel, 
-  emptyLabel, isDisabled, isSelectActive, isPosition1Winner, isPosition2Winner, isManaging,
-  isScorelessMatch, position1Team, position2Team, isFlexWidth, ...props
-}: DrawCardProps) {
-  const { optionOne, optionTwo } = selectedOptions || {};
-
-  const handleOnSelectionChange = (event: SelectChangeEvent<unknown>, position: number) => {
-    const id = event.target.value as string;
-    
-    if (onChange) {
-      onChange({ position, id });
-    }
-  };
-
-  return (
-      <StyledCard isFlexWidth={isFlexWidth} isSelectActive={isSelectActive} {...props}>
-          {isSelectActive ? (
-              <>
-                  <FormControl style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                      <InputLabel id="draw-card-select-top">{emptyLabel}</InputLabel>
-                      <Select
-                          sx={{ width: '100%' }}
-                          labelId="draw-card-select-top"
-                          id="draw-card-select-top"
-                          label={emptyLabel}
-                          value={optionOne}
-                          disabled={isDisabled}
-                          onChange={(e) => handleOnSelectionChange(e, positions.ONE)}
-                      >
-                          <MenuItem value="">None</MenuItem>
-                          {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
-                          <MenuItem sx={{ borderTop: '1px solid var(--cool-grey-500)' }} value={BYE_ROUND}>Set bye</MenuItem>
-                      </Select>
-                  </FormControl>
-                  <Box pt={2} />
-                  <FormControl style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                      <InputLabel id="draw-card-select-bot">{emptyLabel}</InputLabel>
-                      <Select
-                          sx={{ width: '100%' }}
-                          labelId="draw-card-select-bot"
-                          id="draw-card-select-bot"
-                          label={emptyLabel}
-                          value={optionTwo}
-                          disabled={isDisabled}
-                          onChange={(e) => handleOnSelectionChange(e, positions.TWO)}
-                      >
-                          <MenuItem value="">None</MenuItem>
-
-                          {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
-                          <MenuItem sx={{ borderTop: '1px solid var(--cool-grey-500)' }} value={BYE_ROUND}>Set bye</MenuItem>
-                      </Select>
-                  </FormControl>
-              </>
-          ) : (
-              <>
-                  <Box display="flex" justifyContent="space-between">
-                      <Typography
-                          style={{
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            paddingRight: '4px',
-                            whiteSpace: 'nowrap'
-                          }}
-                          category="secondary"
-                          size={isPosition1Winner ? 'medium-medium' : "medium-book"} 
-                      >
-                          {position1Team?.name}
-                      </Typography>
-                      <Typography category="secondary" size={isPosition1Winner ? 'medium-medium' : "medium-book"}>
-                          {isScorelessMatch ? '-' : position1Team?.points}
-                      </Typography>
-                  </Box>
-                  <Divider sx={{ my: 2 }} />
-                  <Box display="flex" justifyContent="space-between">
-                      <Typography 
-                          style={{
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            paddingRight: '4px',
-                            whiteSpace: 'nowrap'
-                          }}
-                          category="secondary"
-                          size={isPosition2Winner ? 'medium-medium' : "medium-book"}
-                      >
-                          {position2Team?.name}
-                      </Typography>
-                      <Typography category="secondary" size={isPosition2Winner ? 'medium-medium' : "medium-book"}>
-                          {isScorelessMatch ? '-' : position2Team?.points}
-                      </Typography>
-                  </Box>
-              </>
-          )}
-          <BottomGrid> 
-              <Box>
-                  <Typography 
-                      style={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        display: '-webkit-box',
-                        WebkitBoxOrient: 'vertical',
-                        WebkitLineClamp: 1,
-                      }}
-                      category={CATEGORY_ENUM.SECONDARY}
-                      size={SECONDARY_SIZES_ENUM.SmallBook}
-                  >
-                      {dateLabel}
-                  </Typography>
-                  <Typography
-                      style={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        display: '-webkit-box',
-                        WebkitBoxOrient: 'vertical',
-                        WebkitLineClamp: 1,
-                      }}
-                      category={CATEGORY_ENUM.SECONDARY}
-                      size={SECONDARY_SIZES_ENUM.SmallBook}
-                  >
-                      {locationLabel}
-                  </Typography>
-              </Box>
-              <Box sx={{ display: 'flex', justifyContent: 'end', width: '30%' }}>
-                  {!!onEditClick && isManaging && (
-                  <Button
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'end'
-                      }}
-                      onClick={onEditClick}
-                      category="link"
-                  >
-                      <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.XSmallMediumCap}>
-                          Edit
-                      </Typography>
-                  </Button>
-                  )}
-                  {!!onEditClick && !!onViewClick && isManaging && (
-                  <Typography
-                      sx={{ color: 'var(--blue-grey-500)', padding: '0 8px' }} 
-                      category={CATEGORY_ENUM.SECONDARY}
-                      size={SECONDARY_SIZES_ENUM.XSmallMediumCap}
-                  >
-                      |
-                  </Typography>
-                  )}
-                  {!!onViewClick && (
-                  <Button
-                      onClick={onViewClick}
-                      category="link"
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'end',
-                        minWidth: 'auto'
-                      }}
-                  >
-                      <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.XSmallMediumCap}>
-                          View
-                      </Typography>
-                  </Button>
-                  )}
-              </Box>
-          </BottomGrid>
-      </StyledCard>
-  );
-}
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { Divider, FormControl, InputLabel } from '@mui/material';
+import Button from '../../atoms/Button/Button';
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+import { DrawCardProps } from "./sharedTypes";
+
+const BYE_ROUND = "Bye";
+type CardProps = {
+    isFlexWidth?: boolean;
+    isSelectActive?: boolean;
+}
+
+const StyledCard = styled(Box, {
+  shouldForwardProp: (prop: string) => prop !== 'isFlexWidth' && prop !== 'isSelectActive'
+})(({ isFlexWidth, isSelectActive }: CardProps) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '4px',
+  padding: '16px 24px',
+  width: '100%',
+  minWidth: isFlexWidth ? 'auto' : '350px',
+  height: isSelectActive ? '235px' : '200px',
+  backgroundColor: 'var(--cool-grey-150)',
+  
+  '&:hover': {
+    cursor: 'pointer'
+  },
+}));
+
+const BottomGrid = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingTop: '32px',
+});
+
+const positions = {
+  ONE: 1,
+  TWO: 2,
+};
+
+export default function DrawCard({
+  options, onChange, onEditClick, onViewClick, selectedOptions, dateLabel, locationLabel, 
+  emptyLabel, isDisabled, isSelectActive, isPosition1Winner, isPosition2Winner, isManaging,
+  isScorelessMatch, position1Team, position2Team, isFlexWidth, ...props
+}: DrawCardProps) {
+  const { optionOne, optionTwo } = selectedOptions || {};
+
+  const handleOnSelectionChange = (event: SelectChangeEvent<unknown>, position: number) => {
+    const id = event.target.value as string;
+    
+    if (onChange) {
+      onChange({ position, id });
+    }
+  };
+
+  return (
+      <StyledCard isFlexWidth={isFlexWidth} isSelectActive={isSelectActive} {...props}>
+          {isSelectActive ? (
+              <>
+                  <FormControl style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                      <InputLabel id="draw-card-select-top">{emptyLabel}</InputLabel>
+                      <Select
+                          sx={{ width: '100%' }}
+                          labelId="draw-card-select-top"
+                          id="draw-card-select-top"
+                          label={emptyLabel}
+                          value={optionOne}
+                          disabled={isDisabled}
+                          onChange={(e) => handleOnSelectionChange(e, positions.ONE)}
+                      >
+                          <MenuItem value="">None</MenuItem>
+                          {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
+                          <MenuItem sx={{ borderTop: '1px solid var(--cool-grey-500)' }} value={BYE_ROUND}>Set bye</MenuItem>
+                      </Select>
+                  </FormControl>
+                  <Box pt={2} />
+                  <FormControl style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                      <InputLabel id="draw-card-select-bot">{emptyLabel}</InputLabel>
+                      <Select
+                          sx={{ width: '100%' }}
+                          labelId="draw-card-select-bot"
+                          id="draw-card-select-bot"
+                          label={emptyLabel}
+                          value={optionTwo}
+                          disabled={isDisabled}
+                          onChange={(e) => handleOnSelectionChange(e, positions.TWO)}
+                      >
+                          <MenuItem value="">None</MenuItem>
+
+                          {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
+                          <MenuItem sx={{ borderTop: '1px solid var(--cool-grey-500)' }} value={BYE_ROUND}>Set bye</MenuItem>
+                      </Select>
+                  </FormControl>
+              </>
+          ) : (
+              <>
+                  <Box display="flex" justifyContent="space-between">
+                      <Typography
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            paddingRight: '4px',
+                            whiteSpace: 'nowrap'
+                          }}
+                          category="secondary"
+                          size={isPosition1Winner ? 'medium-medium' : "medium-book"} 
+                      >
+                          {position1Team?.name}
+                      </Typography>
+                      <Typography category="secondary" size={isPosition1Winner ? 'medium-medium' : "medium-book"}>
+                          {isScorelessMatch ? '-' : position1Team?.points}
+                      </Typography>
+                  </Box>
+                  <Divider sx={{ my: 2 }} />
+                  <Box display="flex" justifyContent="space-between">
+                      <Typography 
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            paddingRight: '4px',
+                            whiteSpace: 'nowrap'
+                          }}
+                          category="secondary"
+                          size={isPosition2Winner ? 'medium-medium' : "medium-book"}
+                      >
+                          {position2Team?.name}
+                      </Typography>
+                      <Typography category="secondary" size={isPosition2Winner ? 'medium-medium' : "medium-book"}>
+                          {isScorelessMatch ? '-' : position2Team?.points}
+                      </Typography>
+                  </Box>
+              </>
+          )}
+          <BottomGrid> 
+              <Box>
+                  <Typography 
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                      }}
+                      category={CATEGORY_ENUM.SECONDARY}
+                      size={SECONDARY_SIZES_ENUM.SmallBook}
+                  >
+                      {dateLabel}
+                  </Typography>
+                  <Typography
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                      }}
+                      category={CATEGORY_ENUM.SECONDARY}
+                      size={SECONDARY_SIZES_ENUM.SmallBook}
+                  >
+                      {locationLabel}
+                  </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', justifyContent: 'end', width: '30%' }}>
+                  {!!onEditClick && isManaging && (
+                  <Button
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'end'
+                      }}
+                      onClick={onEditClick}
+                      category="link"
+                  >
+                      <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.XSmallMediumCap}>
+                          Edit
+                      </Typography>
+                  </Button>
+                  )}
+                  {!!onEditClick && !!onViewClick && isManaging && (
+                  <Typography
+                      sx={{ color: 'var(--blue-grey-500)', padding: '0 8px' }} 
+                      category={CATEGORY_ENUM.SECONDARY}
+                      size={SECONDARY_SIZES_ENUM.XSmallMediumCap}
+                  >
+                      |
+                  </Typography>
+                  )}
+                  {!!onViewClick && (
+                  <Button
+                      onClick={onViewClick}
+                      category="link"
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'end',
+                        minWidth: 'auto'
+                      }}
+                  >
+                      <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.XSmallMediumCap}>
+                          View
+                      </Typography>
+                  </Button>
+                  )}
+              </Box>
+          </BottomGrid>
+      </StyledCard>
+  );
+}