@mui/material#Box JavaScript Examples

The following examples show how to use @mui/material#Box. 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: Header.js    From karto with MIT License 6 votes vote down vote up 
Header = () => {
    return (
        <Box component="header" sx={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: 80,
            p: 2,
            zIndex: 1,
            pointerEvents: 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-start',
            cursor: 'default'
        }}>
            <Typography variant="h1">Karto</Typography>
        </Box>
    );
}
Example #2
Source File: ResourceView.jsx    From Edlib with GNU General Public License v3.0 6 votes vote down vote up 
ResourceView = ({ preview }) => {
    if (preview.embedCode) {
        return (
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'center',
                }}
                dangerouslySetInnerHTML={{ __html: preview.embedCode }}
            />
        );
    }

    if (preview.method === 'GET') {
        return <FrameWithResize src={preview.url} />;
    }

    return (
        <PostingFrame
            frame={FrameWithResize}
            method={preview.method}
            params={preview.params}
            url={preview.url}
        />
    );
}
Example #3
Source File: index.js    From fireact with MIT License 6 votes vote down vote up 
DataDelete = ({id, handleDeletion}) => {

    const [open, setOpen] = useState(false);

    return (
        <>
            <Button variant="contained" color="error" onClick={() => setOpen(true)}>
                Delete
            </Button>
            <Dialog onClose={() => setOpen(false)} open={open}>
                <DialogTitle>Delete</DialogTitle>
                <Box p={3}>
                    Confirm deletion?
                    <Stack direction="row" spacing={1} mt={2}>
                        <Button variant="contained" color="error" onClick={() => handleDeletion(id)}>Yes</Button>
                        <Button variant="contained" color="secondary" onClick={() => setOpen(false)}>Cancel</Button>
                    </Stack>
                </Box>
            </Dialog>
        </>
    )
}
Example #4
Source File: AccountInformationArea.js    From react-saas-template with MIT License 6 votes vote down vote up 
function AccountInformationArea(props) {
  const { classes, toggleAccountActivation, isAccountActivated } = props;
  return (
    <Paper className={classes.paper}>
      <Toolbar className={classes.toolbar}>
        <Box display="flex" alignItems="center">
          <Box mr={2}>
            <ListItemText
              primary="Status"
              secondary={isAccountActivated ? "Activated" : "Not activated"}
              className="mr-2"
            />
          </Box>
          <ListItemIcon>
            <LoopIcon
              className={classNames(
                isAccountActivated ? classes.spin : null,
                classes.scaleMinus
              )}
            />
          </ListItemIcon>
        </Box>
        <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
          <Switch
            color="secondary"
            checked={isAccountActivated}
            onClick={toggleAccountActivation}
            inputProps={{
              "aria-label": isAccountActivated
                ? "Deactivate Account"
                : "Activate Account"
            }}
          />
        </ListItemSecondaryAction>
      </Toolbar>
    </Paper>
  );
}
Example #5
Source File: Label.js    From Django-REST-Framework-React-BoilerPlate with MIT License 6 votes vote down vote up 
export default function Label({ children, color = 'default', variant = 'ghost', startIcon, endIcon, sx }) {
  const style = {
    width: 16,
    height: 16,
    '& svg, img': { width: 1, height: 1, objectFit: 'cover' },
  };

  return (
    <RootStyle
      ownerState={{ color, variant }}
      sx={{
        ...(startIcon && { pl: 0.75 }),
        ...(endIcon && { pr: 0.75 }),
        ...sx,
      }}
    >
      {startIcon && <Box sx={{ mr: 0.75, ...style }}>{startIcon}</Box>}

      {children}

      {endIcon && <Box sx={{ ml: 0.75, ...style }}>{endIcon}</Box>}
    </RootStyle>
  );
}
Example #6
Source File: Brand.jsx    From matx-react with MIT License 6 votes vote down vote up 
Brand = ({ children }) => {
  const { settings } = useSettings();
  const leftSidebar = settings.layout1Settings.leftSidebar;
  const { mode } = leftSidebar;

  return (
    <BrandRoot>
      <Box display="flex" alignItems="center">
        <MatxLogo />
        <StyledSpan mode={mode} className="sidenavHoverShow">
          Matx
        </StyledSpan>
      </Box>

      <Box className="sidenavHoverShow" sx={{ display: mode === 'compact' ? 'none' : 'block' }}>
        {children || null}
      </Box>
    </BrandRoot>
  );
}
Example #7
Source File: sidebar.js    From neutron with Mozilla Public License 2.0 6 votes vote down vote up 
ScrollbarContainer = ({ children, sx }) => {
  // SimpleBar brings problems on macOS
  // https://github.com/webcatalog/webcatalog-app/issues/1247
  if (window.process.platform === 'darwin') {
    return (
      <Box sx={sx}>
        {children}
      </Box>
    );
  }

  return (
    <Box sx={sx}>
      {children}
    </Box>
  );
}
Example #8
Source File: App.js    From karto with MIT License 5 votes vote down vote up 
App = () => {
    return (
        <Box sx={{ backgroundColor: 'background.default' }}>
            <Header/>
            <Content/>
        </Box>
    );
}
Example #9
Source File: index.js    From mui-image with ISC License 5 votes vote down vote up 
Line = styled(Box)({
	display: 'flex',
	alignItems: 'center',
	'& .MuiTextField-root': {
		margin: '0 8px',
	},
})
Example #10
Source File: SavedFilters.jsx    From Edlib with GNU General Public License v3.0 5 votes vote down vote up 
SavedFilters = ({ savedFilterData, setShowDelete, filterUtils }) => {
    const { t } = useTranslation();
    const { classes } = useStyles();

    return (
        <>
            <List
                dense
                component="div"
                disablePadding
                className={classes.nested}
            >
                {savedFilterData.map((savedFilter) => {
                    return (
                        <ListItem
                            key={savedFilter.id}
                            button
                            dense
                            onClick={() =>
                                filterUtils.setFilterFromChoices(
                                    savedFilter.choices
                                )
                            }
                        >
                            <ListItemIcon
                                classes={{
                                    root: classes.listItemIcon,
                                }}
                            >
                                <Checkbox
                                    size="small"
                                    edge="start"
                                    checked={filterUtils.areFiltersAndChoicesIdentical(
                                        savedFilter.choices
                                    )}
                                    tabIndex={-1}
                                    disableRipple
                                    color="primary"
                                    classes={{
                                        root: classes.checkboxRoot,
                                    }}
                                />
                            </ListItemIcon>
                            <ListItemText primary={savedFilter.name} />
                        </ListItem>
                    );
                })}
                <ListItem dense>
                    <Box>
                        <Button
                            color="primary"
                            variant="outlined"
                            onClick={() => setShowDelete(true)}
                            size="small"
                            disabled={savedFilterData.length === 0}
                        >
                            {t('delete')}
                        </Button>
                    </Box>
                </ListItem>
            </List>
        </>
    );
}
Example #11
Source File: index.js    From fireact with MIT License 5 votes vote down vote up 
DataCreate = ({schema, validation, handleCreation, success, children}) => {
    const mountedRef = useRef(true);

    const [inSubmit, setInSubmit] = useState(false);
    const [result, setResult] = useState({
        response: null,
        error: null
    });

    useEffect(() => {
        return () => { 
            mountedRef.current = false
        }
    },[]);

    return (
        <form onSubmit={e => {
            e.preventDefault();
            setInSubmit(true);
            if(validation()){
                let data = {};
                schema.forEach(field => {
                    data[field.name] = e.target.elements[field.name][field.prop]
                });
                handleCreation(data).then(res => {
                    if (!mountedRef.current) return null
                    setResult({
                        response: true,
                        error: null
                    });
                    setInSubmit(false);
                }).catch(err => {
                    if (!mountedRef.current) return null
                    setResult({
                        response: false,
                        error: err
                    });
                    setInSubmit(false);
                })
            }else{
                setResult({
                    response: false,
                    error: 'Please fill in the form in the correct format.'
                })
                setInSubmit(false);
            }
            
        }}>
            <Paper>
                <Box p={2}>
                    <Stack spacing={3}>
                        {result.response?(
                            <>{success}</>
                        ):(
                            <>
                            {result.response === false && 
                                <Alert severity="error">{result.error}</Alert>
                            }
                            {children}
                            <Stack direction="row" spacing={1} mt={2}>
                                <Button variant="contained" type="submit" disabled={inSubmit}>{inSubmit && <Loader />} Create</Button>
                            </Stack>
                            </>
                        )}
                    </Stack>
                </Box>
            </Paper>
        </form>
    )
}
Example #12
Source File: Dashboard.js    From react-saas-template with MIT License 5 votes vote down vote up 
function Dashboard(props) {
  const {
    selectDashboard,
    CardChart,
    statistics,
    toggleAccountActivation,
    pushMessageToSnackbar,
    targets,
    setTargets,
    isAccountActivated,
  } = props;

  useEffect(selectDashboard, [selectDashboard]);

  return (
    <Fragment>
      <StatisticsArea CardChart={CardChart} data={statistics} />
      <Box mt={4}>
        <Typography variant="subtitle1" gutterBottom>
          Your Account
        </Typography>
      </Box>
      <AccountInformationArea
        isAccountActivated={isAccountActivated}
        toggleAccountActivation={toggleAccountActivation}
      />
      <Box mt={4}>
        <Typography variant="subtitle1" gutterBottom>
          Settings
        </Typography>
      </Box>
      <SettingsArea pushMessageToSnackbar={pushMessageToSnackbar} />
      <UserDataArea
        pushMessageToSnackbar={pushMessageToSnackbar}
        targets={targets}
        setTargets={setTargets}
      />
    </Fragment>
  );
}
Example #13
Source File: Iconify.js    From Django-REST-Framework-React-BoilerPlate with MIT License 5 votes vote down vote up 
export default function Iconify({ icon, sx, ...other }) {
  return <Box component={Icon} icon={icon} sx={{ ...sx }} {...other} />;
}
Example #14
Source File: Brand.jsx    From matx-react with MIT License 5 votes vote down vote up 
BrandRoot = styled(Box)(() => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '20px 18px 20px 29px',
}))