@mui/material#darken TypeScript Examples

ForwardCurrentTime: ForwardRefRenderFunction<GameCurrentTimeHandle, GameCurrentTimeProps> = (props, ref) => {
  const refMain = useRef<HTMLSpanElement>(null);
  const refMs = useRef<HTMLSpanElement>(null);

  useImperativeHandle(ref, () => ({
    updateTime(timeInMs) {
      const [timeHMS, timeMS] = formatGameTime(timeInMs, true).split(".");
      if (refMain.current) refMain.current.textContent = timeHMS;
      if (refMs.current) refMs.current.textContent = "." + timeMS;
    },
  }));
  return (
    <Typography component={"span"} sx={{ userSelect: "all" }}>
      <span ref={refMain}>0:00</span>

      <Typography component={"span"} sx={{ color: (theme) => darken(theme.palette.text.primary, 0.6) }} ref={refMs}>
        <span ref={refMs}>.000</span>
      </Typography>
    </Typography>
  );
}

useStyles = makeStyles((theme: Theme) =>
    createStyles({
        toolbar: {
            minHeight: 56,
            [theme.breakpoints.down("xl")]: {
                paddingLeft: theme.spacing(0.5),
                paddingRight: theme.spacing(0.5)
            },
            paddingLeft: theme.spacing(1),
            paddingRight: theme.spacing(1),
            backgroundColor: theme.palette.mode === "light" ? theme.palette.common.white : theme.palette.background.default,
            borderBottom: `1px solid ${theme.palette.divider}`,
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            width: "100%"
        },
        actions: {
            display: "flex",
            alignItems: "center",
            "& > *": {
                [theme.breakpoints.down("md")]: {
                    marginRight: theme.spacing(0.5)
                },
                marginRight: theme.spacing(1)
            }
        },
        selectRoot: {
            "label + &": {
                marginTop: theme.spacing(3)
            }
        },
        input: {
            borderRadius: 4,
            position: "relative",
            backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.common.black, 0.05) : darken(theme.palette.background.default, 0.2),
            fontSize: 14,
            fontWeight: theme.typography.fontWeightMedium,
            padding: "10px 26px 10px 12px",
            transition: theme.transitions.create(["border-color", "box-shadow"]),
            "&:focus": {
                borderRadius: 4
            }
        },
        item: {
            backgroundColor: theme.palette.background.default,
            fontSize: 14,
            fontWeight: theme.typography.fontWeightMedium,
            paddingTop: theme.spacing(1),
            paddingBottom: theme.spacing(1),
            "&:hover": {
                backgroundColor: darken(theme.palette.background.default, 0.1)
            },
            "&:focus": {
                backgroundColor: darken(theme.palette.background.default, 0.2),
                "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                    color: theme.palette.text.primary
                }
            }
        }
    })
)

useStyles = makeStyles<Theme, { onHover?: boolean, align?: "right" | "left" | "center" }>(theme => createStyles({
    header: ({ onHover }) => ({
        width: "calc(100% + 24px)",
        margin: "0px -12px",
        padding: "0px 12px",
        color: onHover ? theme.palette.text.primary : theme.palette.text.secondary,
        backgroundColor: onHover ? darken(theme.palette.background.default, 0.05) : theme.palette.background.default,
        transition: "color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
        height: "100%",
        fontSize: "0.750rem",
        textTransform: "uppercase",
        fontWeight: 600
    }),
    headerInternal: ({ align }) => ({
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: align === "right" ? "flex-end" : (align === "center" ? "center" : "flex-start")
    }),
    headerTitle: ({ align }) => ({
        overflow: "hidden",
        flexShrink: 1
    }),
    headerTitleInternal: ({ align }) => ({
        margin: "0px 4px",
        overflow: "hidden",
        justifyContent: align,
        flexShrink: 1
    }),
    headerIcon: {
        paddingTop: "4px"
    },
    headerIconButton: {
        backgroundColor: theme.palette.mode === "light" ? "#f5f5f5" : theme.palette.background.default
    },
    headerTypography: {
        fontSize: "0.750rem",
        fontWeight: 600,
        textTransform: "uppercase"
    }
}))

function ReferencePreviewComponent<M extends { [Key: string]: any }>(
    {
        value,
        property,
        onClick,
        size,
        onHover
    }: ReferencePreviewProps) {

    if (typeof property.path !== "string") {
        throw Error("Picked the wrong component ReferencePreviewComponent");
    }

    const reference: EntityReference = value;
    const previewProperties = property.previewProperties;

    const navigationContext = useNavigation();
    const sideEntityController = useSideEntityController();

    const collectionResolver = navigationContext.getCollectionResolver<M>(property.path);
    if (!collectionResolver) {
        throw Error(`Couldn't find the corresponding collection view for the path: ${property.path}`);
    }

    const schema = collectionResolver.schema;

    const {
        entity,
        dataLoading,
        dataLoadingError
    } = useEntityFetch({
        path: reference.path,
        entityId: reference.id,
        schema: collectionResolver.schemaResolver,
        useCache: true
    });

    const listProperties = useMemo(() => {
        let res = previewProperties;
        if (!res || !res.length) {
            res = Object.keys(schema.properties);
        }

        if (size === "small" || size === "regular")
            res = res.slice(0, 3);
        else if (size === "tiny")
            res = res.slice(0, 1);
        return res;
    }, [previewProperties, schema.properties, size]);

    let body: JSX.Element;

    function buildError(error: string, tooltip?: string) {
        return <ErrorView error={error} tooltip={tooltip}/>;
    }

    if (!value) {
        body = buildError("Reference not set");
    }
    // currently not happening since this gets filtered out in PreviewComponent
    else if (!(value instanceof EntityReference)) {
        body = buildError("Unexpected value", JSON.stringify(value));
    } else if (entity && !entity.values) {
        body = buildError("Reference does not exist", reference.path);
    } else {

        body = (
            <>
                <Box sx={{
                    display: "flex",
                    flexDirection: "column",
                    flexGrow: 1,
                    maxWidth: "calc(100% - 60px)",
                    margin: 1
                }}>

                    {size !== "tiny" && (
                        value
                            ? <Box sx={{
                                display: size !== "regular" ? "block" : undefined,
                                whiteSpace: size !== "regular" ? "nowrap" : undefined,
                                overflow: size !== "regular" ? "hidden" : undefined,
                                textOverflow: size !== "regular" ? "ellipsis" : undefined
                            }}>
                                <Typography variant={"caption"}
                                            className={"mono"}>
                                    {value.id}
                                </Typography>
                            </Box>
                            : <Skeleton variant="text"/>)}


                    {listProperties && listProperties.map((key) => {
                        const childProperty = schema.properties[key as string];
                        if (!childProperty) return null;

                        return (
                            <div key={"ref_prev_" + (key as string)}>
                                {entity
                                    ? <PreviewComponent name={key as string}
                                                        value={entity.values[key as string]}
                                                        property={childProperty as AnyProperty}
                                                        size={"tiny"}/>
                                    : <SkeletonComponent
                                        property={childProperty as AnyProperty}
                                        size={"tiny"}/>
                                }
                            </div>
                        );
                    })}

                </Box>
                <Box sx={{
                    margin: "auto"
                }}>
                    {entity &&
                        <Tooltip title={`See details for ${entity.id}`}>
                            <IconButton
                                size={size === "tiny" ? "small" : "medium"}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    sideEntityController.open({
                                        entityId: entity.id,
                                        path: entity.path,
                                        schema: schema,
                                        overrideSchemaRegistry: false
                                    });
                                }}>
                                <KeyboardTabIcon fontSize={"small"}/>
                            </IconButton>
                        </Tooltip>}
                </Box>
            </>
        );
    }


    return (
        <Paper elevation={0} sx={(theme) => {
            const clickableStyles = onClick
                ? {
                    tabindex: 0,
                    backgroundColor: onHover ? (theme.palette.mode === "dark" ? lighten(theme.palette.background.default, 0.1) : darken(theme.palette.background.default, 0.15)) : darken(theme.palette.background.default, 0.1),
                    transition: "background-color 300ms ease, box-shadow 300ms ease",
                    boxShadow: onHover ? "0 0 0 2px rgba(128,128,128,0.05)" : undefined,
                    cursor: onHover ? "pointer" : undefined
                }
                : {};
            return ({
                width: "100%",
                display: "flex",
                color: "#838383",
                backgroundColor: darken(theme.palette.background.default, 0.1),
                borderRadius: "2px",
                overflow: "hidden",
                padding: size === "regular" ? 1 : 0,
                itemsAlign: size === "tiny" ? "center" : undefined,
                fontWeight: theme.typography.fontWeightMedium,
                ...clickableStyles
            });
        }}
               onClick={onClick}>

            {body}

        </Paper>
    );

}

function DonationTable({ donations }: DonationTableProps) {
  const { t, i18n } = useTranslation()
  const [fromDate, setFromDate] = React.useState<Date | null>(null)
  const [toDate, setToDate] = React.useState<Date | null>(null)
  const [monthly, setMonthly] = React.useState(true)
  const [oneTime, setOneTime] = React.useState(true)
  const filteredByTypeDonations = useMemo(() => {
    if (monthly && oneTime) {
      return donations
    }
    if (!monthly && !oneTime) {
      return []
    }
    if (monthly) {
      return donations?.filter((d) => d.type !== 'donation')
    }
    if (oneTime) {
      return donations?.filter((d) => d.type === 'donation')
    }
    return donations
  }, [donations, monthly, oneTime])
  const filteredDonations = useMemo(() => {
    if (!fromDate && !toDate) {
      return filteredByTypeDonations
    }
    if (fromDate && toDate) {
      return filteredByTypeDonations?.filter((d) => {
        const createdAtDate = parseISO(d.createdAt)
        return isAfter(createdAtDate, fromDate) && isBefore(createdAtDate, toDate)
      })
    }
    if (fromDate) {
      return filteredByTypeDonations?.filter((d) => {
        const createdAtDate = parseISO(d.createdAt)
        return isAfter(createdAtDate, fromDate)
      })
    }
    if (toDate) {
      return filteredByTypeDonations?.filter((d) => {
        const createdAtDate = parseISO(d.createdAt)
        return isBefore(createdAtDate, toDate)
      })
    }
  }, [filteredByTypeDonations, fromDate, toDate])
  return (
    <Card sx={{ padding: theme.spacing(2) }}>
      <Grid container alignItems={'flex-start'} spacing={theme.spacing(2)}>
        <Grid item xs={6} sm={3}>
          <CheckboxLabel>{t('profile:donations.oneTime')}</CheckboxLabel>
          <Checkbox
            onChange={(e, checked) => setOneTime(checked)}
            checked={oneTime}
            name="oneTime"
          />
        </Grid>
        <Grid item xs={6} sm={3}>
          <CheckboxLabel>{t('profile:donations.monthly')}</CheckboxLabel>
          <Checkbox
            onChange={(e, checked) => setMonthly(checked)}
            checked={monthly}
            name="monthly"
          />
        </Grid>
        <LocalizationProvider
          locale={i18n.language === 'bg' ? bg : enUS}
          dateAdapter={AdapterDateFns}>
          <Grid item xs={12} sm={3}>
            <DatePicker
              label={t('profile:donations.fromDate')}
              value={fromDate}
              onChange={setFromDate}
              renderInput={(params) => <TextField size="small" {...params} />}
            />
          </Grid>
          <Grid item xs={12} sm={3}>
            <DatePicker
              label={t('profile:donations.toDate')}
              value={toDate}
              onChange={setToDate}
              renderInput={(params) => <TextField size="small" {...params} />}
            />
          </Grid>
        </LocalizationProvider>
      </Grid>
      {filteredDonations?.length ? (
        <TableContainer>
          <Table sx={{ minWidth: 650, backgroundColor: 'white' }} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>№</TableCell>
                <TableCell>{t('profile:donations.date')}</TableCell>
                <TableCell>{t('profile:donations.type')}</TableCell>
                <TableCell>{t('profile:donations.cause')}</TableCell>
                <TableCell>{t('profile:donations.amount')}</TableCell>
                <TableCell>{t('profile:donations.certificate')}</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredDonations.map((donation, index) => (
                <TableRow key={index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                  <TableCell component="th" scope="row">
                    {index + 1}
                  </TableCell>
                  <TableCell>
                    {format(parseISO(donation.createdAt), 'd.LL.yyyy', {
                      locale: i18n.language === 'bg' ? bg : enUS,
                    })}
                  </TableCell>
                  <TableCell>
                    <Avatar sx={{ background: darken(theme.palette.secondary.main, 0.175) }}>
                      <StarIcon />
                    </Avatar>
                  </TableCell>
                  <TableCell>{donation.targetVault.campaign.title}</TableCell>
                  <TableCell>{money(donation.amount)}</TableCell>
                  <TableCell>
                    <Button variant="outlined" disabled={donation.status != 'succeeded'}>
                      <Link target="_blank" href={routes.donation.viewCertificate(donation.id)}>
                        {t('profile:donations.download')} <ArrowForwardIcon />
                      </Link>
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      ) : (
        <Box sx={{ fontSize: 20, mt: 4 }}>Към момента няма направени дарения</Box>
      )}
    </Card>
  )
}