@mui/material#darken TypeScript Examples
The following examples show how to use
@mui/material#darken.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: BaseCurrentTime.tsx From rewind with MIT License | 7 votes |
|
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>
);
}
Example #2
| Source File: CollectionTableToolbar.tsx From firecms with MIT License | 5 votes |
|
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
}
}
}
})
)
Example #3
| Source File: TableHeader.tsx From firecms with MIT License | 5 votes |
|
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"
}
}))
Example #4
| Source File: ReferencePreview.tsx From firecms with MIT License | 4 votes |
|
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>
);
}
Example #5
| Source File: DonationTable.tsx From frontend with MIT License | 4 votes |
|
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>
)
}
