@mui/material Chip JavaScript Examples

Source File: PublishedTag.jsx From Edlib with GNU General Public License v3.0

6 votes

PublishedTag = ({ isPublished, isDraft }) => {
    const { t } = useTranslation();

    return (
        <div>
            <Chip
                icon={
                    isDraft ? (
                        <WarningAmber />
                    ) : isPublished ? (
                        <Visibility />
                    ) : (
                        <VisibilityOff />
                    )
                }
                label={_.capitalize(
                    isDraft
                        ? t('draft')
                        : isPublished
                        ? t('published')
                        : t('unpublished')
                )}
                size="small"
                sx={{
                    backgroundColor: isDraft
                        ? '#FFECB3'
                        : isPublished
                        ? '#A8E994'
                        : null,
                }}
            />
        </div>
    );
}

Source File: ColorfulChip.js From react-saas-template with MIT License

6 votes

function ColorfulChip(props) {
  const { color, label, className } = props;
  return (
    <Chip
      style={{
        color: color,
        backgroundColor: shadeColor(color, 0.7)
      }}
      label={label}
      className={className ? className : null}
    />
  );
}

Source File: FilterChips.jsx From Edlib with GNU General Public License v3.0

5 votes

FilterChips = ({ chips, color = 'secondary' }) => {
    const { classes } = useStyles();

    return (
        <Box paddingY={1}>
            {chips.map((chip) => (
                <Chip
                    key={chip.value}
                    label={chip.title}
                    onDelete={chip.onDelete}
                    color={color}
                    className={classes.chip}
                />
            ))}
        </Box>
    );
    // return (
    //     <Box paddingY={1}>
    //         {filters.contentTypes.value.map((contentType, index) => (
    //             <Chip
    //                 key={contentType.value}
    //                 label={contentType.title}
    //                 onDelete={
    //                     allowChange
    //                         ? () => filters.contentTypes.removeIndex(index)
    //                         : null
    //                 }
    //                 color={color}
    //                 className={classes.chip}
    //             />
    //         ))}
    //         {filters.licenses.value.map((license, index) => (
    //             <Chip
    //                 key={license.value}
    //                 label={license.title}
    //                 onDelete={
    //                     allowChange
    //                         ? () => filters.licenses.removeIndex(index)
    //                         : null
    //                 }
    //                 color={color}
    //                 className={classes.chip}
    //             />
    //         ))}
    //     </Box>
    // );
}

Source File: BadgeAutocomplete.jsx From matx-react with MIT License

5 votes

BadgeAutocomplete = () => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        width: 500,
        '& > * + *': {
          marginTop: theme.spacing(3),
        },
      }}
    >
      <Autocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[13]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
            fullWidth
          />
        )}
      />
      <Autocomplete
        multiple
        id="tags-outlined"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[13]]}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="filterSelectedOptions"
            placeholder="Favorites"
            fullWidth
          />
        )}
      />
      <Autocomplete
        multiple
        id="tags-filled"
        options={top100Films.map((option) => option.title)}
        defaultValue={[top100Films[13].title]}
        freeSolo
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="filled"
            label="freeSolo"
            placeholder="Favorites"
            fullWidth
          />
        )}
      />
    </Box>
  );
}

Source File: DetailedExpansionPanel.jsx From matx-react with MIT License

5 votes

export default function DetailedExpansionPanel() {
  return (
    <AccordionRoot>
      <Accordion defaultExpanded>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1c-content"
          id="panel1c-header"
        >
          <Box className="column">
            <Typography className="heading">Location</Typography>
          </Box>

          <Box className="column">
            <Typography className="secondaryHeading">Select trip destination</Typography>
          </Box>
        </AccordionSummary>

        <AccordionDetails className="details">
          <Box className="column" />
          <Box className="column">
            <Chip label="Barbados" onDelete={() => {}} />
          </Box>

          <Box className="column helper">
            <Typography variant="caption">
              Select your destination of choice
              <br />
              <a href="#sub-labels-and-columns" className="link">
                Learn more
              </a>
            </Typography>
          </Box>
        </AccordionDetails>

        <Divider />

        <AccordionActions>
          <Button size="small">Cancel</Button>
          <Button size="small" color="primary">
            Save
          </Button>
        </AccordionActions>
      </Accordion>
    </AccordionRoot>
  );
}

Source File: TaskQ.js From admin-web with GNU Affero General Public License v3.0

4 votes

render() {
    const { classes, t, taskq, tableState, handleMatch, handleRequestSort,
      handleEdit } = this.props;
    const { order, orderBy, match, snackbar } = tableState;
    const writable = this.context.includes(SYSTEM_ADMIN_WRITE);

    return (
      <TableViewContainer
        headline={t("Task queue")}
        href="https://docs.grommunio.com/admin/administration.html#taskq"
        // subtitle={t("taskq_sub")}
        snackbar={snackbar || this.state.snackbar}
        onSnackbarClose={this.handleSnackbarClose}
      >
        <Grid container alignItems="flex-end" className={classes.chipGrid}>
          <Chip
            className={classes.chip}
            label={t(taskq.running ? "Running" : "Not running")}
            color={taskq.running ? "success" : "secondary"}
          />
          <Chip
            className={classes.chip}
            label={"Queued: " + taskq.queued}
            color={"primary"}
          />
          <Chip
            className={classes.chip}
            label={"Workers: " + taskq.workers}
            color={"primary"}
          />
        </Grid>
        <Grid container alignItems="flex-end" className={classes.buttonGrid}>
          <Button
            variant="contained"
            color="primary"
            onClick={this.handleStart}
            disabled={!writable || taskq.running}
          >
            {t("Start server")}
          </Button>
          <div className={classes.actions}>
            <TextField
              value={match}
              onChange={handleMatch}
              placeholder={t("Search tasks")}
              variant={"outlined"}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Search color="secondary" />
                  </InputAdornment>
                ),
              }}
              color="primary"
            />
          </div>
        </Grid>
        <Typography className={classes.count} color="textPrimary">
          {t("showingTaskq", { count: taskq.Tasks.length })}
        </Typography>
        <Paper elevation={1}>
          <Table size="small">
            <TableHead>
              <TableRow>
                {this.columns.map((column) => (
                  <TableCell key={column.value}>
                    <TableSortLabel
                      active={orderBy === column.value}
                      align="left"
                      direction={orderBy === column.value ? order : "asc"}
                      onClick={handleRequestSort(column.value)}
                    >
                      {t(column.label)}
                    </TableSortLabel>
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {taskq.Tasks.map((obj, idx) => 
                <TableRow key={idx} hover onClick={handleEdit('/taskq/' + obj.ID)}>
                  <TableCell>{obj.command}</TableCell>
                  <TableCell>{t(this.getTaskState(obj.state))}</TableCell>
                  <TableCell>{obj.message}</TableCell>
                  <TableCell>{obj.created ? setDateTimeString(obj.created) : ''}</TableCell>
                  <TableCell>{obj.updated ? setDateTimeString(obj.updated) : ''}</TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
          {taskq.Tasks.length < taskq.count && (
            <Grid container justifyContent="center">
              <CircularProgress
                color="primary"
                className={classes.circularProgress}
              />
            </Grid>
          )}
        </Paper>
      </TableViewContainer>
    );
  }

@mui/material#Chip JavaScript Examples