@material-ui/core#Tabs JavaScript Examples

The following examples show how to use @material-ui/core#Tabs. 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: AdminPage.js    From Octave with MIT License 6 votes vote down vote up
function Admin() {
  const [tab, setTab] = React.useState(0);
  const [artists, setArtists] = useState([]);

  useEffect(() => {
    const unsubscribe = getArtists((snapshot) => {
      setArtists(snapshot.docs.map((doc) => doc.data().name));
    });
    return unsubscribe;
  }, []);

  return (
    <div className="admin">
      <div className="admin__wrapper">
        <Paper square>
          <Tabs
            value={tab}
            onChange={(e, newValue) => setTab(newValue)}
            indicatorColor="secondary"
            textColor="secondary"
            centered
          >
            <Tab label="Add Song" />
            <Tab label="Add Artist" />
          </Tabs>
        </Paper>

        {tab === 0 ? (
          <SongForm artists={artists} />
        ) : tab === 1 ? (
          <ArtistForm artists={artists} />
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
}
Example #2
Source File: Informing.jsx    From pwa with MIT License 6 votes vote down vote up
export default function Informing() {
  const [tab, setTab] = useState('training');

  return (
    <div className="contentWrapper">
      <div className={styles.content}>
        <Tabs
          value={tab}
          onChange={(e, newTab) => setTab(newTab)}
          variant="fullWidth"
        >
          <Tab value="training" label="آموزش" />
          <Tab value="news" label="اخبار" />
          <Tab value="questions" label="سوالات" />
        </Tabs>
        {tab === 'training' && <Trainings />}
        {tab === 'news' && <News />}
        {tab === 'questions' && <Questions />}
      </div>
    </div>
  );
}
Example #3
Source File: collateral.jsx    From iliquidate-finance with MIT License 6 votes vote down vote up
StyledTabs = withStyles({
  indicator: {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    '& > div': {
      maxWidth: 40,
      width: '100%',
      backgroundColor: '#DC6BE5',
    },
  },
})(props => <Tabs {...props} TabIndicatorProps={{ children: <div /> }} />)
Example #4
Source File: FoodboxFlow.jsx    From resilience-app with GNU General Public License v3.0 6 votes vote down vote up
export default function FoodboxFlow() {
  const classes = useStyles();
  const [state, dispatch] = useReducer(reducer, initialState);

  const ActiveComponent = stepComponents[state.step];

  return (
    <div className={classes.root}>
      <Paper className={classes.tabMargin} elevation={3} square>
        <Tabs value={state.step} indicatorColor="primary" textColor="primary" centered>
          {tabNames.map((tab, idx) => (
            <CustomTab icon={<H4>{idx + 1}</H4>} key={tab} label={tab} disableRipple />
          ))}
        </Tabs>
      </Paper>
      <div className={classes.content}>
        <ActiveComponent state={state} dispatch={dispatch} />
      </div>
      <ErrorSnackbar
        open={state.error !== null}
        handleClose={() => dispatch({ type: "ERROR", payload: null })}
        errorMessage={state.error}
        autoHideDuration={null}
      />
    </div>
  );
}
Example #5
Source File: stock-details.js    From ark-funds-monitor with GNU Affero General Public License v3.0 6 votes vote down vote up
render() {
        return (
            <div className="stock-details-inner-wrapper">
                <AppBar position="static" color="default">
                    <Tabs
                        variant="scrollable"
                        value={this.state.tabIndex}
                        onChange={this.handleTabChange}
                        TabIndicatorProps={{ style: { background: '#6200EE' } }}
                    >
                        <Tab label="Chart"  icon={<TimelineIcon />} {...a11yProps(0)} />
                        <Tab label="Basic Info" disabled={!!!this.state.ticker} icon={<InfoOutlinedIcon />}{...a11yProps(1)} />
                        <Tab label="News" disabled={!!!this.state.ticker} icon={<CommentOutlinedIcon />}{...a11yProps(2)} />
                    </Tabs>
                </AppBar>

                <TabPanel value={this.state.tabIndex} index={0}>
                    <StockFigure />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={1}>
                    <BasicInfo />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={2}>
                    <CompanyNews />
                </TabPanel>
            </div>
        );
    }
Example #6
Source File: Header.js    From hk-independent-bus-eta with GNU General Public License v3.0 6 votes vote down vote up
LanguageTabs = withStyles({
  root: {
    borderBottom: 'none',
    minHeight: 24
  },
  indicator: {
    backgroundColor: 'transparent'
  }
})(Tabs)
Example #7
Source File: SettingsDialog.js    From symbl-twilio-video-react with Apache License 2.0 6 votes vote down vote up
export default function SettingsDialog({open, onClose}) {
    const classes = useStyles();
    const [selectedTab, setSelectedTab] = useState(0);

    const handleChange = (_, newValue) => {
        setSelectedTab(newValue);
    };

    return (
        <Dialog open={open} onClose={onClose} classes={{paper: classes.paper}}>
            <Tabs value={selectedTab} onChange={handleChange}>
                <Tab label="Credentials"/>
                <Tab label="Devices"/>
                <Tab label="Settings"/>
            </Tabs>
            <CredentialsOptions className={classes.container} hidden={selectedTab !== 0}/>
            <DeviceSelector className={classes.container} hidden={selectedTab !== 1}/>
            <ConnectionOptions className={classes.container} hidden={selectedTab !== 2}/>
            <DialogActions>
                <Button className={classes.button} onClick={onClose}>
                    Done
                </Button>
            </DialogActions>
        </Dialog>
    );
}
Example #8
Source File: navbar.js    From GSOD.Contributors_website with Mozilla Public License 2.0 6 votes vote down vote up
StyledTabs = withStyles({
  root: {
    width: '100%',
    backgroundColor:'#f4f4f4',
  },
  indicator: {
    display: 'none',
  },
  centered: {
    alignItems: 'center',
    justify: 'flex-end',
  },
  flexContainer: {
    justifyContent:'flex-end',
  },
})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />)
Example #9
Source File: AntTabs.js    From youtube-clone with MIT License 5 votes vote down vote up
AntTabs = withStyles({
  indicator: {
    backgroundColor: "black",
  },
})(Tabs)
Example #10
Source File: Tabs.jsx    From mfe-webpack-demo with MIT License 5 votes vote down vote up
export default function TabsComponent() {
  const classes = useStyles();
  const match = useRouteMatch();
  const history = useHistory();
  const location = useLocation();
  const { path: rootPath } = match;

  const handleChange = (event, newValue) => {
    history.push(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={location.pathname} onChange={handleChange}>
          <Tab label="Foo" value={`${rootPath}/foo`} />
          <Tab label="Bar" value={`${rootPath}/bar`} />
        </Tabs>
      </AppBar>
      <Switch>
        <Route path={rootPath} exact={true}>
          <Redirect to={`${rootPath}/foo`} />
        </Route>
        <Route path={`${rootPath}/foo`}>
          <Typography component="div">
            <Box p={3}>Foo Content</Box>
          </Typography>
        </Route>
        <Route path={`${rootPath}/bar`}>
          <Typography component="div">
            <Box p={3}>
              Bar Content
              <React.Suspense fallback={null}>
                <Button>Bar Button</Button>
              </React.Suspense>
            </Box>
          </Typography>
        </Route>
      </Switch>
    </div>
  );
}
Example #11
Source File: Tabs.jsx    From module-federation-examples with MIT License 5 votes vote down vote up
export default function TabsComponent() {
  const classes = useStyles();
  const match = useRouteMatch();
  const history = useHistory();
  const location = useLocation();
  const { path: rootPath } = match;

  const handleChange = (event, newValue) => {
    history.push(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={location.pathname} onChange={handleChange}>
          <Tab label="Foo" value={`${rootPath}/foo`} />
          <Tab label="Bar" value={`${rootPath}/bar`} />
        </Tabs>
      </AppBar>
      <Switch>
        <Route path={rootPath} exact={true}>
          <Redirect to={`${rootPath}/foo`} />
        </Route>
        <Route path={`${rootPath}/foo`}>
          <Typography component="div">
            <Box p={3}>Foo Content</Box>
          </Typography>
        </Route>
        <Route path={`${rootPath}/bar`}>
          <Typography component="div">
            <Box p={3}>
              Bar Content
              <React.Suspense fallback={null}>
                <Button>Bar Button</Button>
              </React.Suspense>
            </Box>
          </Typography>
        </Route>
      </Switch>
    </div>
  );
}
Example #12
Source File: MaterialTabs.js    From gitpedia with MIT License 5 votes vote down vote up
MaterialTabs = (props) => {
    const [selectedTab, setSelectedTab] = useState(0);

    const handleChange = (event, newValue) => {
        setSelectedTab(newValue);
    };

    const tabStyle = {
        root: props.classes.tabRoot,
        selected: props.classes.tabSelected,
    };

    const { indicator, centered, tab } = props.classes;
    return (
        <>
            <TabsContainer>
                <Tabs
                    classes={{
                        indicator: indicator,
                        centered: centered,
                    }}
                    value={selectedTab}
                    onChange={handleChange}
                    textColor='primary'
                    centered>
                    <Tab label='Stats' className={tab} classes={tabStyle} />
                    <Tab label='Timeline' className={tab} classes={tabStyle} />
                    <Tab
                        label='Activities'
                        className={tab}
                        classes={tabStyle}
                    />
                </Tabs>
            </TabsContainer>
            {selectedTab === 0 && props.tab1}
            {selectedTab === 1 && props.tab2}
            {selectedTab === 2 && props.tab3}
        </>
    );
}
Example #13
Source File: ViewJob.js    From jobtriage with MIT License 5 votes vote down vote up
ViewJob = props => {
  const classes = useStyles();
  const showLoader = useLoader();
  const { match } = props;
  const { applicationId } = match.params;
  const [basicDetail, setBasicDetail] = useState({});
  const [tab, setTab] = useState(0);
  const [loading, setLoading] = useState(false);

  const loadData = () => {
    showLoader(true);
    setLoading(true);
    APIService.getApplicationDetails(applicationId)
      .then(resp => {
        showLoader(false);
        setBasicDetail({ applicationId, ...resp.data });
        setLoading(false);
      }).catch(console.log);
  };

  const handleTabChange = (event, newValue) => {
    setTab(newValue);
  };

  useEffect(() => {
    if (!loading && basicDetail.title === undefined) {
      loadData();
    }
  });

  const Body = () => (
    <div>
      <Tabs
        value={tab}
        indicatorColor="primary"
        textColor="primary"
        onChange={handleTabChange}
        aria-label="View job tabs"
      >
        <Tab label="Details" />
        <Tab label="Notes" />
      </Tabs>
      <TabPanel value={tab} index={0}>
        <div className={classes.root}>
          <BasicDetails basicDetail={basicDetail} reload={loadData} />
          <TimeLog basicDetail={basicDetail} reload={loadData} />
        </div>
      </TabPanel>
      <TabPanel value={tab} index={1}>
        <Notes notes={basicDetail.notes} applicationId={applicationId} reload={loadData} />
      </TabPanel>
    </div>
  );

  return (
    <div className={classes.root}>
      <NavBar>
        <Typography variant="h6">
          <NavLink to="/dashboard" className={classes.underLine}>Back</NavLink>
        </Typography>
        {basicDetail.title ? <Body /> : '' }
      </NavBar>
    </div>
  );
}
Example #14
Source File: styles.js    From covid-trials-dashboard with MIT License 5 votes vote down vote up
TabsStyles = styled(Tabs)`
  margin: 0.5rem;
`
Example #15
Source File: App.js    From Interceptor with MIT License 5 votes vote down vote up
render() {
    //console.log("Rendering App");
    const { classes } = this.props;
    return (
      <>
        <ThemeProvider theme={this.theme}>
          <CssBaseline />
          <WebSocketHelper
            ws_url={this.state.ws_url}
            messageProcess={this.messageProcess}
            ref={this.wshelper}
            status={status => this.ws_status = status}
          />
          <AppBar position="sticky" color="default">
            <Toolbar>
              <Tabs
                className={classes.mainTabs}
                value={this.state.selectedTab}
                onChange={(event, newValue) => this.setState({ selectedTab: newValue })}
                indicatorColor="secondary"
                textColor="inherit"
                variant="scrollable"
                scrollButtons="auto"
                aria-label="Plugins tabs"
              >
                <Tab label="Dashboard" disabled {...this.a11yProps(0)} />
                <Tab label="Graphs" {...this.a11yProps(1)} />
                <Tab label="Joystick" {...this.a11yProps(2)} />
                <Tab label="OP Edit" {...this.a11yProps(3)} />
                <Tab label="CAN BUS" disabled {...this.a11yProps(4)} />
              </Tabs>

              {this.connectionStatus()}
              <IconButton onClick={() => { this.setState({ show_mainsettings: true }) }} aria-label="WebSocket connection status" component="span" color="inherit">
                <SettingsIcon />
              </IconButton>
            </Toolbar>
          </AppBar>

          <TabPanel value={this.state.selectedTab} index={0}>
            Dashboard will be here
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={1}>
            <GraphDashboard ref={this.pushgraphdata} active={this.state.selectedTab === 1} />
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={2}>
            <Joystick procData={data => this.sendWSmsg(data)} active={this.state.selectedTab === 2} />
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={3}>
            <OPEdit ref={this.pushopedit} procData={data => this.sendWSmsg(data)} active={this.state.selectedTab === 3} />
          </TabPanel>
          <TabPanel value={this.state.selectedTab} index={4}>
            CAN messages will be here
          </TabPanel>
          {this.state.show_mainsettings ? (
            <MainSettings
              setSettings={(ws_url, rate, dark_theme) => { this.setState({ show_mainsettings: false, ws_url: ws_url, rateHz: rate }); this.setTheme(dark_theme) }}
              show={this.state.show_mainsettings}
              ws_url={this.state.ws_url}
              rateHz={this.state.rateHz}
              dark_theme={this.state.dark_theme}
            />
          ) : (null)}
          <Snackbar
            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
            open={this.show_error}
            autoHideDuration={5000}
            onClose={() => this.show_error = false}
          >
            <MuiAlert elevation={6} variant="filled" severity="error">{this.last_error_msg}</MuiAlert>
          </Snackbar>
        </ThemeProvider>
      </>
    );
  }
Example #16
Source File: users-page.js    From horondi_admin with MIT License 5 votes vote down vote up
UsersPage = () => {
  const common = useCommonStyles();

  const { openSuccessSnackbar } = useSuccessSnackbar();
  const { list, filter, sort, currentPage, rowsPerPage, isNewAdminCreated } =
    useSelector(selectUsersAndTable);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(
      getUsers({
        filter,
        pagination: {
          skip: currentPage * rowsPerPage,
          limit: rowsPerPage
        },
        sort
      })
    );
  }, [dispatch, filter, sort, currentPage, rowsPerPage, isNewAdminCreated]);

  const userDeleteHandler = (id) => {
    const removeUser = () => {
      dispatch(closeDialog());
      dispatch(deleteUser(id));
    };
    openSuccessSnackbar(removeUser, REMOVE_USER_MESSAGE);
  };

  const { tab, handleTabChange } = useUsersTabs();

  const userTabs = userTabNames.map((name) => <Tab key={name} label={name} />);

  return (
    <div className={common.container}>
      <div className={common.adminHeader}>
        <Typography variant='h1' className={common.materialTitle}>
          {config.titles.usersPageTitles.mainPageTitle}
        </Typography>
      </div>
      <AppBar position='static' color='primary'>
        <Tabs
          value={tab}
          className={common.tabs}
          onChange={(_, nextTab) => handleTabChange(nextTab)}
          variant='fullWidth'
        >
          {userTabs}
        </Tabs>
      </AppBar>
      <TabPanel value={tab} index={0}>
        <UserTab list={list} onDelete={userDeleteHandler} />
      </TabPanel>
      <TabPanel value={tab} index={1}>
        <AdminTab list={list} onDelete={userDeleteHandler} />
      </TabPanel>
    </div>
  );
}
Example #17
Source File: RouteWithTabLayout.js    From medha-STPC with GNU Affero General Public License v3.0 5 votes vote down vote up
StyledTabs = withStyles({
  root: {},
  indicator: {
    backgroundColor: "#006000"
  }
})(Tabs)
Example #18
Source File: TabContent.jsx    From archeage-tools with The Unlicense 5 votes vote down vote up
render() {
    const { tabs, title, mobile } = this.props;
    const { value } = this.state;

    const TabsList = () => (
      <Tabs
        value={value}
        indicatorColor="secondary"
        onChange={this.handleChange}
        centered={!mobile}
        variant={mobile ? 'scrollable' : 'standard'}
      >
        {tabs.map((tab, index) => (
          <Tab label={tab.label} key={index} />
        ))}
      </Tabs>
    );

    let content;
    if (tabs[value]) {
      content = !Array.isArray(tabs[value].content)
        ? tabs[value].content
        : tabs[value].content.map((node, i) => {
          if (typeof node === 'object') {
            return <KeyComponent key={`${title}-${tabs[value].label}-${i}`}>{node}</KeyComponent>;
          }
          return <Typography key={`${title}-${tabs[value].label}-${i}`}>{node}</Typography>;
        });
    }

    if (title) {
      return (
        <>
          <AppBar position="static">
            <Toolbar variant="dense">
              <Typography className="title-text">{title}</Typography>
              <TabsList />
            </Toolbar>
          </AppBar>
          <div className="body-container">
            {content}
          </div>
        </>
      );
    }

    return (
      <>
        <Paper style={{ marginBottom: 8 }}>
          <TabsList />
        </Paper>
        {content}
      </>
    );
  }
Example #19
Source File: schedule.jsx    From animeworldz with MIT License 5 votes vote down vote up
function Schedule({ schedule }) {
  const [tab, setTab] = useState(new Date().getDay());

  const useStyles = makeStyles((theme) => ({
    root: {
      backgroundColor: theme.palette.background.paper,
    },
  }));

  const handleChange = (e, val) => {
    setTab(val);
  };

  const TabPanel = (props) => {
    const { children, value, index } = props;
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`vertical-tabpanel-${index}`}
        aria-labelledby={`vertical-tab-${index}`}
        style={{ padding: "10px" }}
      >
        {value === index && <h1>{children}</h1>}
      </div>
    );
  };

  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Tabs
        value={tab}
        onChange={handleChange}
        variant="scrollable"
        scrollButtons="auto"
      >
        <Tab label="Sunday" />
        <Tab label="Monday" />
        <Tab label="Tuesday" />
        <Tab label="Wednesday" />
        <Tab label="Thrusday" />
        <Tab label="Friday" />
        <Tab label="Saturday" />
      </Tabs>
      {Object.keys(schedule).length !== 0 ? (
        <>
          <TabPanel value={tab} index={0}>
            <ScheduleCard Anime={schedule.sunday} />
          </TabPanel>
          <TabPanel value={tab} index={1}>
            <ScheduleCard Anime={schedule.monday} />
          </TabPanel>
          <TabPanel value={tab} index={2}>
            <ScheduleCard Anime={schedule.tuesday} />
          </TabPanel>
          <TabPanel value={tab} index={3}>
            <ScheduleCard Anime={schedule.wednesday} />
          </TabPanel>
          <TabPanel value={tab} index={4}>
            <ScheduleCard Anime={schedule.thursday} />
          </TabPanel>
          <TabPanel value={tab} index={5}>
            <ScheduleCard Anime={schedule.friday} />
          </TabPanel>
          <TabPanel value={tab} index={6}>
            <ScheduleCard Anime={schedule.saturday} />
          </TabPanel>
        </>
      ) : (
        ""
      )}
    </div>
  );
}
Example #20
Source File: Discussion.js    From covid-19 with MIT License 5 votes vote down vote up
Discussion = (props) => {
  const classes = useStyles();

  const sources = [{
    'label': 'Disqus comments',
    'content':
        <Disqus.DiscussionEmbed
            shortname={"covid19direct-world"}
            config={disqusConfig}
        />
  }, {
    'label': 'Facebook',
    'content':
      <FacebookProvider appId="201788627783795">
        <FacebookComments href="https://covid-19.direct/" />
      </FacebookProvider>,
  }];

  const [source, setSource] = React.useState(0);
  const change = (e, to) => {
    setSource(to);
  };

  return (
    <Paper className={props.className}>
      <Tabs value={source} onChange={change}>
        {sources.map(({label}, i) =>
          <Tab key={label} label={label} value={i} />
        )}
      </Tabs>

      <div className={classes.scrollPane}>
        {sources.map(({label, content}, i) =>
          <div key={label} className={source !== i ? classes.hide : ''}>
            {content}
          </div>
        )}
      </div>
    </Paper>
  );
}
Example #21
Source File: WriterServices.js    From grants-fe with MIT License 5 votes vote down vote up
WriterServices = (props) => {
  const [value, setValue] = React.useState(0);
  const classes = useStyles();

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`vertical-tabpanel-${index}`}
        aria-labelledby={`vertical-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box p={3}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  };
  
  function a11yProps(index) {
    return {
      id: `vertical-tab-${index}`,
      "aria-controls": `vertical-tabpanel-${index}`,
    };
  }

  return (

    <div className={classes.userServices}>
            <h3 className={classes.userEducation}>Services Offered:</h3>
            <Paper>
              <Tabs
                orientation="vertical"
                variant="scrollable"
                value={value}
                onChange={handleChange}
                aria-label="Vertical tabs example"
                className={classes.tabs}
              >
                <Tab label="Grant Writing" {...a11yProps(0)} />
                <Tab label="Grant Research" {...a11yProps(1)} />
              </Tabs>
              <TabPanel value={value} index={0}>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
                blanditiis tenetur unde suscipit, quam beatae rerum inventore
                consectetur, neque doloribus, cupiditate numquam dignissimos
                laborum fugiat deleniti? Eum quasi quidem quibusdam.
              </TabPanel>
              <TabPanel value={value} index={1}>
                This is just here to show you this works.
              </TabPanel>
            </Paper>
          </div>
  );
}
Example #22
Source File: TemplateDetails.js    From akashlytics-deploy with GNU General Public License v3.0 5 votes vote down vote up
export function TemplateDetails() {
  const [activeTab, setActiveTab] = useState("README");
  const { templateId } = useParams();
  const { getTemplateById } = useTemplates();
  const history = useHistory();
  const classes = useStyles();
  const template = getTemplateById(templateId);

  function handleBackClick() {
    history.goBack();
  }

  function handleOpenGithub() {
    window.electron.openUrl(template.githubUrl);
  }

  return (
    <div className={classes.root}>
      <Helmet title="Deployment Detail" />

      <div className={classes.titleContainer}>
        <Box display="flex" alignItems="center">
          <IconButton aria-label="back" onClick={handleBackClick}>
            <ChevronLeftIcon />
          </IconButton>
          <Typography variant="h3" className={classes.title}>
            {template.name}
          </Typography>

          <Box marginLeft="1rem">
            <IconButton aria-label="View on github" title="View on Github" onClick={handleOpenGithub} size="small">
              <GitHubIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>

        <Button
          className={classes.deployBtn}
          variant="contained"
          size="medium"
          color="primary"
          component={Link}
          to={UrlService.createDeploymentFromTemplate(template.id)}
        >
          <PublishIcon />
          &nbsp;Deploy
        </Button>
      </div>

      <Tabs value={activeTab} onChange={(ev, value) => setActiveTab(value)} indicatorColor="primary" textColor="primary">
        <Tab value="README" label="README" />
        <Tab value="SDL" label="SDL" />
        {template.guide && <Tab value="GUIDE" label="GUIDE" />}
      </Tabs>

      {activeTab === "README" && (
        <ViewPanel bottomElementId="footer" overflow="auto" padding="1rem">
          <ReactMarkdown linkTarget="_blank" remarkPlugins={[remarkGfm]} className="markdownContainer">
            {template.readme}
          </ReactMarkdown>
        </ViewPanel>
      )}
      {activeTab === "SDL" && (
        <ViewPanel bottomElementId="footer" overflow="hidden">
          <MonacoEditor height="100%" language="yaml" theme="vs-dark" value={template.deploy} options={{ ...monacoOptions, readOnly: true }} />
        </ViewPanel>
      )}
      {activeTab === "GUIDE" && (
        <ViewPanel bottomElementId="footer" overflow="auto" padding="1rem">
          <ReactMarkdown linkTarget="_blank" remarkPlugins={[remarkGfm]} className="markdownContainer">
            {template.guide}
          </ReactMarkdown>
        </ViewPanel>
      )}
    </div>
  );
}
Example #23
Source File: checkout-form.js    From horondi_client_fe with MIT License 4 votes vote down vote up
CheckoutForm = ({ cartItems, cartOperations, promoCode }) => {
  const { currency } = useContext(CurrencyContext);
  const styles = useStyles();
  const appStyles = useAppStyles();
  const userData = useSelector(({ User }) => User.userData);
  const { t, i18n } = useTranslation();
  const language = i18n.language === 'ua' ? 0 : 1;
  const { clearCart } = cartOperations;
  const dispatch = useDispatch();
  const [deliveryType, setDeliveryType] = useState(
    getFromSessionStorage(SESSION_STORAGE.DELIVERY_TYPE) || deliveryTypes.SELFPICKUP
  );
  const [countryOption, setCountryOption] = useState(countryOptions.WITHIN_UKRAINE);
  const [initialValues, setInitialValues] = useState(stateInitialValues);
  const [pricesFromQuery, setPricesFromQuery] = useState([]);

  const handleCountryOption = (_, newTabValue) => setCountryOption(newTabValue);

  const { discount, categories } = promoCode?.getPromoCodeByCode || {};

  const totalPriceToPay = pricesFromQuery
    .map((item, index) => {
      const canUsePromoCode = categories?.includes(item.category?.code);
      const priceWithPromoCode = calcPriceForCart(item.price, cartItems[index]?.quantity, discount);
      const priceWithoutPromoCode = calcPriceForCart(item.price, cartItems[index]?.quantity);

      return canUsePromoCode ? priceWithPromoCode : priceWithoutPromoCode;
    })
    .reduce((previousValue, currentValue) => previousValue + currentValue, 0);

  const consentLink = (
    <div className={styles.consentMessage}>
      {' '}
      {t('checkout.checkoutAdditionalInfo.consent.0')}
      <Link
        className={styles.consentLink}
        to={pathToUserAgreement}
        target='_blank'
        rel='noreferrer'
      >
        {' '}
        {t('checkout.checkoutAdditionalInfo.consent.1')}{' '}
      </Link>{' '}
      {t('checkout.checkoutAdditionalInfo.consent.2')}
      <Link className={styles.consentLink} to={pathToTerms} target='_blank' rel='noreferrer'>
        {' '}
        {t('checkout.checkoutAdditionalInfo.consent.3')}{' '}
      </Link>
    </div>
  );

  const { values, handleSubmit, handleChange, setFieldValue, touched, errors } = useFormik({
    enableReinitialize: true,
    validationSchema: validationSchema(deliveryType, countryOption, t),
    initialValues,

    onSubmit: (data) => {
      if (data.paymentMethod === checkoutPayMethod.card) {
        dispatch(addPaymentMethod(checkoutPayMethod.card));
        dispatch(
          getFondyData({
            order: orderInputData(data, deliveryType, cartItems, countryOption),
            currency
          })
        );
      } else {
        dispatch(addOrder(orderInputData(data, deliveryType, cartItems, countryOption)));
        dispatch(addPaymentMethod(checkoutPayMethod.cash));
      }
      clearSessionStorage();
      clearCart();
    }
  });

  useEffect(() => {
    setToSessionStorage(SESSION_STORAGE.CHECKOUT_FORM, values);
  }, [values]);

  useEffect(() => {
    if (userData) {
      setInitialValues(updateInitialValues(userData, deliveryType));
    }
  }, [userData, deliveryType]);

  return (
    <div className={appStyles.rootApp}>
      <form onSubmit={handleSubmit} className={appStyles.containerApp}>
        <Grid item className={styles.checkoutFormContainer}>
          <div className={styles.checkoutTitleInfo}>
            <div className={styles.checkoutTitleInfoData}>
              <Link to={pathToCart} className={styles.backBtn}>
                <KeyboardBackspaceIcon color={getThemeColor()} className={styles.backBtnLine} />
              </Link>
            </div>
            <h2 className={styles.checkoutTitle}>{t('checkout.checkoutTitles.checkoutTitle')}</h2>
            <div className={styles.checkoutTitleLine} />
          </div>
          <Grid item className={styles.userInfoContainer}>
            <div>
              <h3 className={styles.title}>{t('checkout.checkoutTitles.contactInfo')}</h3>
              <div className={styles.contactInfoFields}>
                {userContactLabels.map((field) => (
                  <div key={field.name} className={styles.inputData}>
                    <TextField
                      data-testid={field.name}
                      size={TEXT_FIELDS.SMALL}
                      data-cy={field.name}
                      name={field.name}
                      className={styles.textField}
                      variant={TEXT_FIELD_VARIANT.OUTLINED}
                      label={field.label}
                      value={values[field.name]}
                      onChange={handleChange}
                      error={handleError(touched[field.name], errors[field.name])}
                      InputProps={
                        field.name === 'phoneNumber' && {
                          maxLength: 9,
                          startAdornment: <InputAdornment position='start'>+380</InputAdornment>
                        }
                      }
                    />
                    {touched[field.name] && errors[field.name] && (
                      <div data-cy={CY_CODE_ERR} className={styles.error}>
                        {t(errors[field.name])}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
            <h3 className={styles.deliveryTitle}>{t('checkout.checkoutTitles.delivery')}</h3>
            <Tabs
              className={styles.tabs}
              value={countryOption}
              TabIndicatorProps={{ style: { display: 'none' } }}
              onChange={handleCountryOption}
              variant='fullWidth'
              scrollButtons='auto'
              aria-label='delivery type'
            >
              <Tab
                className={styles.tab}
                label={t('checkout.tabs.withinUkraineDelivery')}
                value={countryOptions.WITHIN_UKRAINE}
              />
              <Tab
                className={styles.tab}
                label={t('checkout.tabs.worldWideDelivery')}
                value={countryOptions.WORLDWIDE}
              />
            </Tabs>
            <Delivery
              deliveryType={deliveryType}
              countryOption={countryOption}
              language={language}
              values={values}
              errors={errors}
              touched={touched}
              handleChange={handleChange}
              setFieldValue={setFieldValue}
              setDeliveryType={setDeliveryType}
            />
            <div>
              <h2 className={styles.title}>{t('checkout.checkoutTitles.payment')}</h2>
              <FormControl
                error={touched.paymentMethod && !!errors.paymentMethod}
                variant={TEXT_FIELD_VARIANT.OUTLINED}
                className={styles.formControl}
              >
                <InputLabel variant={TEXT_FIELD_VARIANT.OUTLINED}>
                  {t('checkout.checkoutTextFields.paymentMethod')}
                </InputLabel>
                <Select
                  data-testid='paymentMetod'
                  label={t('checkout.checkoutTextFields.paymentMethod')}
                  className={styles.paymentSelect}
                  data-cy='paymentMethod'
                  name='paymentMethod'
                  value={values.paymentMethod}
                  onChange={handleChange}
                >
                  {countryOption === countryOptions.WORLDWIDE ? (
                    <MenuItem value={checkoutPayMethod.card}>
                      {t(`checkout.checkoutPayment.${checkoutPayMethod.card}`)}
                    </MenuItem>
                  ) : (
                    Object.values(checkoutPayMethod).map((value) => (
                      <MenuItem key={value} value={value}>
                        {t(`checkout.checkoutPayment.${value}`)}
                      </MenuItem>
                    ))
                  )}
                </Select>
                {touched.paymentMethod && errors.paymentMethod && (
                  <div data-cy={CY_CODE_ERR} className={styles.error}>
                    {t(errors.paymentMethod)}
                  </div>
                )}
              </FormControl>
            </div>
            <div className={styles.contactPaymentInfo}>
              <h2 className={styles.title}>{t('checkout.checkoutTitles.orderComment')}</h2>
              <div>
                <TextField
                  size={TEXT_FIELDS.SMALL}
                  data-cy='userComment'
                  name='userComment'
                  multiline
                  rows={4}
                  className={styles.textAreaField}
                  variant={TEXT_FIELD_VARIANT.OUTLINED}
                  value={values.userComment}
                  onChange={handleChange}
                  error={handleError(touched.userComment, errors.userComment)}
                />
                {touched.userComment && errors.userComment && (
                  <div data-cy={CY_CODE_ERR} className={styles.error}>
                    {t(errors.userComment)}
                  </div>
                )}
              </div>
              <p className={styles.contactInfoAdditional}>
                {t('checkout.checkoutAdditionalInfo.additionalInfo')}
              </p>
            </div>
          </Grid>
          <Grid item className={styles.deliveryContainer}>
            <YourOrder
              checkoutFormBtnValue={checkoutFormBtnValue}
              consentLink={consentLink}
              t={t}
              currency={currency}
              totalPriceToPay={totalPriceToPay}
              values={values}
              language={language}
              styles={styles}
              deliveryType={deliveryType}
              setPricesFromQuery={setPricesFromQuery}
              promoCode={promoCode}
            />
          </Grid>
        </Grid>
      </form>
    </div>
  );
}
Example #24
Source File: users-details.js    From horondi_admin with MIT License 4 votes vote down vote up
UsersDetails = (props) => {
  const {
    match: {
      params: { id }
    }
  } = props;
  const dispatch = useDispatch();

  const common = useCommonStyles();
  const styles = useStyles();

  const {
    sort: sortComment,
    replySort: sortReply,
    filtersUser: filtersComment,
    filtersReplyUser: filtersReply,
    listUser: listComment,
    listRepliesUser: listReplies,
    currentPage,
    rowsPerPage
  } = useSelector(commentSelectorWithPagination);

  const {
    sort: sortOrder,
    filtersUser: filtersOrder,
    listUser: listOrder
  } = useSelector(orderSelector);

  const { loading } = useSelector(({ Users }) => ({
    loading: Users.userLoading
  }));

  const {
    images,
    firstName,
    lastName,
    country,
    city,
    adress,
    postCode,
    email,
    isBanned,
    confirmed,
    phone
  } = useUsersHandler(id);

  const { tab, handleTabChange } = useOrdersCommentsTabs();

  useEffect(() => {
    if (tab) {
      if (filtersComment.typeComment === labels.comments.select[0].value) {
        dispatch(
          getCommentsByUser({
            filter: {
              date: {
                dateFrom: filtersComment.dateFrom,
                dateTo: filtersComment.dateTo
              },
              show: filtersComment.show,
              search: filtersComment.search
            },
            pagination: {
              limit: rowsPerPage,
              skip: currentPage * rowsPerPage
            },
            sort: sortComment,
            userId: id
          })
        );
      } else {
        dispatch(
          getRepliesCommentsByUser({
            filter: {
              createdAt: {
                dateFrom: filtersReply.dateFrom,
                dateTo: filtersReply.dateTo
              },
              filters: true,
              showReplyComment: filtersReply.show,
              search: filtersReply.search
            },
            pagination: {
              limit: rowsPerPage,
              skip: currentPage * rowsPerPage
            },
            sort: sortReply,
            userId: id
          })
        );
      }
    } else {
      dispatch(
        getOrderListUser({
          limit: rowsPerPage,
          skip: currentPage * rowsPerPage,
          filter: {
            date: {
              dateFrom: filtersOrder.dateFrom,
              dateTo: filtersOrder.dateTo
            },
            status: filtersOrder.status,
            paymentStatus: filtersOrder.paymentStatus,
            search: filtersOrder.search
          },
          sort: sortOrder,
          userId: id
        })
      );
    }
  }, [
    dispatch,
    tab,
    filtersComment,
    filtersReply,
    filtersOrder,
    rowsPerPage,
    currentPage,
    sortComment,
    sortReply,
    sortOrder,
    id
  ]);

  const tabs = tabNames.map((name) => <Tab key={name} label={name} />);

  if (loading) {
    return <LoadingBar />;
  }

  return (
    <div className={common.container}>
      <Grid className={styles.detailsContainer}>
        <UserDetailsCard
          info={{
            id,
            sections: {
              phone,
              country,
              city,
              adress,
              postCode
            },
            images,
            firstName,
            lastName,
            isBanned,
            email,
            confirmed
          }}
          pathBack={pathToUsers}
        />
      </Grid>
      <AppBar position='static' color='primary'>
        <Tabs
          value={tab}
          className={common.tabs}
          onChange={(_, nextTab) => handleTabChange(nextTab)}
          variant='fullWidth'
        >
          {tabs}
        </Tabs>
      </AppBar>
      <TabPanel value={tab} index={0}>
        <OrderTab list={listOrder} />
      </TabPanel>
      <TabPanel value={tab} index={1}>
        {filtersComment.typeComment === labels.comments.select[0].value ? (
          <CommentTab list={listComment} />
        ) : (
          <CommentReplyTab list={listReplies} />
        )}
      </TabPanel>
    </div>
  );
}
Example #25
Source File: ReportComponent.js    From eSim-Cloud with GNU General Public License v3.0 4 votes vote down vote up
function ReportComponent (props) {
  const [reportDetailsOpen, setReportDetailsOpen] = React.useState(false)
  const [status, setStatus] = React.useState(null)
  const [reportStatus, setReportStatus] = React.useState(null)
  const [tab, setTab] = React.useState(0)
  const auth = useSelector(state => state.authReducer)
  const stateList = useSelector(state => state.projectReducer.states)
  const dispatch = useDispatch()

  useEffect(() => {
    const query = new URLSearchParams(props.location.search)
    var project_id = query.get('project_id')
    dispatch(fetchRole())
    if (!reportDetailsOpen) {
      dispatch(getStatus(project_id))
    }
  }, [props.location.search, dispatch, reportDetailsOpen])

  const handleChangeTab = (event, newValue) => {
    setTab(newValue)
  }
  const handleSelectChange = (event) => {
    setStatus(event.target.value)
  }

  const handleReportDetailsOpen = (e) => {
    if (reportDetailsOpen) {
      setReportStatus(null)
    }
    setReportDetailsOpen(!reportDetailsOpen)
  }
  const onSelectReportStatus = (e, report_id) => {
    if (reportStatus) {
      var temp = [...reportStatus]
    } else {
      temp = []
    }
    var report = { id: report_id, approved: e.target.value }
    temp.push(report)
    setReportStatus(temp)
  }
  const onClick = (type) => {
    const query = new URLSearchParams(props.location.search)
    var project_id = query.get('project_id')
    switch (type) {
      case 'Change State':
        dispatch(approveReports(project_id, reportStatus, status))
        props.changedStatus()
        handleReportDetailsOpen()
        break
      default:
        break
    }
  }
  const DialogTitle = withStyles(styles)((props) => {
    const { children, classes, onClose, ...other } = props
    return (
      <MuiDialogTitle disableTypography className={classes.root} {...other}>
        <Typography variant="h6">{children}</Typography>
        {onClose ? (
          <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
            <CloseIcon />
          </IconButton>
        ) : null}
      </MuiDialogTitle>
    )
  })
  return (
    <>{auth.user && <Paper style={{ padding: '0.06% 1%' }}>

      <h3 style={{ color: 'red' }}>This is a reported project
        <Button style={{ float: 'right', verticalAlign: 'super' }} onClick={handleReportDetailsOpen}>View Reports</Button></h3>
      <Dialog
        open={reportDetailsOpen}
        onClose={(handleReportDetailsOpen)}
        fullWidth={true}
        maxWidth={'md'}>
        <DialogTitle style={{ paddingBottom: '0' }}><h1 style={{ marginBottom: '0', marginTop: '0' }}>Reports</h1></DialogTitle>
        <DialogContent>
          <Tabs value={tab} onChange={handleChangeTab}>
            <Tab label="Open Reports" {...a11yProps(0)} />
            <Tab label="Approved Reports" {...a11yProps(1)} />
            {auth.user.username !== props.project.details.author_name && auth.roles?.is_type_reviewer && <Tab label="Closed Reports" {...a11yProps(2)} />}
          </Tabs>
          <TabPanel value={tab} index={0}>
            {(props.project.reports.open[0] && auth.user.username !== props.project.details.author_name && auth.roles?.is_type_reviewer) && <h3 style={{ marginTop: '0' }}>Do you want to approve any reports?</h3>}
            {props.project.reports ? props.project.reports.open.map((item, index) => (
              <Paper key={index} style={{ margin: '1% .2%', padding: '.5% .7%' }}>
                <Grid container>
                  <Grid item xs={6}>
                    <p>
                      {item.description}
                    </p>
                  </Grid>
                  {auth.user.username !== props.project.details.author_name && auth.roles?.is_type_reviewer &&
                    <Grid item xs={6}>
                      <Select
                        defaultValue={item.approved}
                        variant='outlined'
                        style={{ float: 'right' }}
                        onChange={(e) => onSelectReportStatus(e, item.id)}
                      >
                        <MenuItem value={null}>None</MenuItem>
                        <MenuItem value={true}>Approve</MenuItem>
                        <MenuItem value={false}>Reject</MenuItem>
                      </Select>
                    </Grid>}
                </Grid>
              </Paper>
            )) : <>No Open Reports</>}
          </TabPanel>
          <TabPanel value={tab} index={1}>
            {props.project.reports.approved[0] ? props.project.reports.approved.map((item, index) => (
              <Paper key={index} style={{ margin: '1% .2%', padding: '.5% .7%' }}>
                <Grid container>
                  <Grid item xs={6}>
                    <p>
                      {item.description}
                    </p>
                  </Grid>
                  {auth.user.username !== props.project.details.author_name &&
                    <Grid item xs={6}>
                    </Grid>}
                </Grid>
              </Paper>
            )) : <>No Approved Reports</>}
          </TabPanel>
          {auth.user.username !== props.project.details.author_name && <TabPanel value={tab} index={2}>
            {props.project.reports && props.project.reports.closed.map((item, index) => (
              <Paper key={index} style={{ margin: '1% .2%', padding: '.5% .7%' }}>
                <Grid container>
                  <Grid item xs={6}>
                    <p>
                      {item.description}
                    </p>
                  </Grid>{auth.user.username !== props.project.details.author_name &&
                    <Grid item xs={6}>
                    </Grid>}
                </Grid>
              </Paper>
            ))}
          </TabPanel>}
          {stateList && ((tab === 1 && props.project.reports.approved[0]) || (tab === 0 && reportStatus)) && auth.roles?.is_type_reviewer && auth.user.username !== props.project.details.author_name &&
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              autoWidth
              style={{ width: '50%' }}
              onChange={handleSelectChange}
              value={status}
              variant='outlined'
            >
              {stateList.map((item, index) =>
                (
                  <MenuItem key={index} value={item}>{item}</MenuItem>
                ))}
            </Select>}
        </DialogContent>
        {auth.roles && <DialogActions>
          {auth.user.username !== props.project.details.author_name && props.project.reports.approved[0] && auth.roles?.is_type_reviewer && tab === 1 && <Button onClick={() => {
            dispatch(resolveReports(props.project.details.project_id, status))
            handleReportDetailsOpen()
          }}>Resolve All Reports</Button>}
          {auth.roles?.is_type_reviewer && (reportStatus) &&
            <Button onClick={() => {
              onClick('Change State')
            }}>Approve Reports</Button>}
          <Button onClick={handleReportDetailsOpen}>Close</Button>
        </DialogActions>}

      </Dialog>
    </Paper>}</>

  )
}
Example #26
Source File: AddTokenDialog.js    From spl-token-wallet with Apache License 2.0 4 votes vote down vote up
export default function AddTokenDialog({ open, onClose }) {
  let wallet = useWallet();
  let [tokenAccountCost] = useAsyncData(
    wallet.tokenAccountCost,
    wallet.tokenAccountCost,
  );
  let classes = useStyles();
  let updateTokenName = useUpdateTokenName();
  const [sendTransaction, sending] = useSendTransaction();

  const [walletAccounts] = useWalletTokenAccounts();
  const popularTokens = usePopularTokens();
  const [tab, setTab] = useState(!!popularTokens ? 'popular' : 'manual');
  const [mintAddress, setMintAddress] = useState('');
  const [tokenName, setTokenName] = useState('');
  const [tokenSymbol, setTokenSymbol] = useState('');
  const [erc20Address, setErc20Address] = useState('');

  useEffect(() => {
    if (!popularTokens) {
      setTab('manual');
    }
  }, [popularTokens]);

  function onSubmit(params) {
    if (tab === 'manual') {
      params = { mintAddress, tokenName, tokenSymbol };
    } else if (tab === 'erc20') {
      params = { erc20Address };
    }
    sendTransaction(addToken(params), {
      onSuccess: () => {
        refreshWalletPublicKeys(wallet);
        onClose();
      },
    });
  }

  async function addToken({
    mintAddress,
    tokenName,
    tokenSymbol,
    erc20Address,
  }) {
    if (erc20Address) {
      let tokenInfo = await swapApiRequest('POST', `coins/eth/${erc20Address}`);
      mintAddress = tokenInfo.splMint;
      tokenName = tokenInfo.name;
      tokenSymbol = tokenInfo.ticker;
      if (tokenInfo.blockchain !== 'sol') {
        tokenName = 'Wrapped ' + tokenName;
      }
    }

    let mint = new PublicKey(mintAddress);
    updateTokenName(mint, tokenName, tokenSymbol);
    const resp = await wallet.createAssociatedTokenAccount(mint);
    return resp[1];
  }

  let valid = true;
  if (tab === 'erc20') {
    valid = erc20Address.length === 42 && erc20Address.startsWith('0x');
  }

  return (
    <DialogForm open={open} onClose={onClose}>
      <DialogTitle>Add Token</DialogTitle>
      <DialogContent>
        {tokenAccountCost ? (
          <DialogContentText>
            Add a token to your wallet. This will cost{' '}
            {feeFormat.format(tokenAccountCost / LAMPORTS_PER_SOL)} SOL.
          </DialogContentText>
        ) : (
          <LoadingIndicator />
        )}
        {!!popularTokens && (
          <Tabs
            value={tab}
            textColor="primary"
            indicatorColor="primary"
            className={classes.tabs}
            onChange={(e, value) => setTab(value)}
          >
            <Tab label="Popular Tokens" value="popular" />
            {showSwapAddress ? <Tab label="ERC20 Token" value="erc20" /> : null}
            <Tab label="Manual Input" value="manual" />
          </Tabs>
        )}
        {tab === 'manual' || !popularTokens ? (
          <React.Fragment>
            <TextField
              label="Token Mint Address"
              fullWidth
              variant="outlined"
              margin="normal"
              value={mintAddress}
              onChange={(e) => setMintAddress(e.target.value)}
              autoFocus
              disabled={sending}
            />
            <TextField
              label="Token Name"
              fullWidth
              variant="outlined"
              margin="normal"
              value={tokenName}
              onChange={(e) => setTokenName(e.target.value)}
              disabled={sending}
            />
            <TextField
              label="Token Symbol"
              fullWidth
              variant="outlined"
              margin="normal"
              value={tokenSymbol}
              onChange={(e) => setTokenSymbol(e.target.value)}
              disabled={sending}
            />
          </React.Fragment>
        ) : tab === 'popular' ? (
          <List disablePadding>
            {popularTokens.filter(tokenInfo => tokenInfo.address).map((tokenInfo) => (
              <TokenListItem
                key={tokenInfo.address}
                tokenInfo={tokenInfo}
                existingAccount={(walletAccounts || []).find(
                  (account) =>
                    account.parsed.mint.toBase58() === tokenInfo.address,
                )}
                onSubmit={onSubmit}
                disabled={sending}
              />
            ))}
          </List>
        ) : tab === 'erc20' ? (
          <>
            <TextField
              label="ERC20 Contract Address"
              fullWidth
              variant="outlined"
              margin="normal"
              value={erc20Address}
              onChange={(e) => setErc20Address(e.target.value.trim())}
              autoFocus
              disabled={sending}
            />
            {erc20Address && valid ? (
              <Link
                href={`https://etherscan.io/token/${erc20Address}`}
                target="_blank"
                rel="noopener"
              >
                View on Etherscan
              </Link>
            ) : null}
          </>
        ) : null}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        {tab !== 'popular' && (
          <Button
            type="submit"
            color="primary"
            disabled={sending || !valid}
            onClick={() => onSubmit({ tokenName, tokenSymbol, mintAddress })}
          >
            Add
          </Button>
        )}
      </DialogActions>
    </DialogForm>
  );
}
Example #27
Source File: Login.js    From react-code-splitting-2021-04-26 with MIT License 4 votes vote down vote up
function Login(props) {
  var classes = useStyles();

  // global
  var userDispatch = useUserDispatch();

  // local
  var [isLoading, setIsLoading] = useState(false);
  var [error, setError] = useState(null);
  var [activeTabId, setActiveTabId] = useState(0);
  var [nameValue, setNameValue] = useState("");
  var [loginValue, setLoginValue] = useState("[email protected]");
  var [passwordValue, setPasswordValue] = useState("password");

  return (
    <Grid container className={classes.container}>
      <div className={classes.logotypeContainer}>
        <img src={logo} alt="logo" className={classes.logotypeImage} />
        <Typography className={classes.logotypeText}>Material Admin</Typography>
      </div>
      <div className={classes.formContainer}>
        <div className={classes.form}>
          <Tabs
            value={activeTabId}
            onChange={(e, id) => setActiveTabId(id)}
            indicatorColor="primary"
            textColor="primary"
            centered
          >
            <Tab label="Login" classes={{ root: classes.tab }} />
            <Tab label="New User" classes={{ root: classes.tab }} />
          </Tabs>
          {activeTabId === 0 && (
            <React.Fragment>
              <Typography variant="h1" className={classes.greeting}>
                Good Morning, User
              </Typography>
              <Button size="large" className={classes.googleButton}>
                <img src={google} alt="google" className={classes.googleIcon} />
                &nbsp;Sign in with Google
              </Button>
              <div className={classes.formDividerContainer}>
                <div className={classes.formDivider} />
                <Typography className={classes.formDividerWord}>or</Typography>
                <div className={classes.formDivider} />
              </div>
              <Fade in={error}>
                <Typography color="secondary" className={classes.errorMessage}>
                  Something is wrong with your login or password :(
                </Typography>
              </Fade>
              <TextField
                id="email"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={loginValue}
                onChange={e => setLoginValue(e.target.value)}
                margin="normal"
                placeholder="Email Adress"
                type="email"
                fullWidth
              />
              <TextField
                id="password"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={passwordValue}
                onChange={e => setPasswordValue(e.target.value)}
                margin="normal"
                placeholder="Password"
                type="password"
                fullWidth
              />
              <div className={classes.formButtons}>
                {isLoading ? (
                  <CircularProgress size={26} className={classes.loginLoader} />
                ) : (
                  <Button
                    disabled={
                      loginValue.length === 0 || passwordValue.length === 0
                    }
                    onClick={() =>
                      loginUser(
                        userDispatch,
                        loginValue,
                        passwordValue,
                        props.history,
                        setIsLoading,
                        setError,
                      )
                    }
                    variant="contained"
                    color="primary"
                    size="large"
                  >
                    Login
                  </Button>
                )}
                <Button
                  color="primary"
                  size="large"
                  className={classes.forgetButton}
                >
                  Forget Password
                </Button>
              </div>
            </React.Fragment>
          )}
          {activeTabId === 1 && (
            <React.Fragment>
              <Typography variant="h1" className={classes.greeting}>
                Welcome!
              </Typography>
              <Typography variant="h2" className={classes.subGreeting}>
                Create your account
              </Typography>
              <Fade in={error}>
                <Typography color="secondary" className={classes.errorMessage}>
                  Something is wrong with your login or password :(
                </Typography>
              </Fade>
              <TextField
                id="name"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={nameValue}
                onChange={e => setNameValue(e.target.value)}
                margin="normal"
                placeholder="Full Name"
                type="text"
                fullWidth
              />
              <TextField
                id="email"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={loginValue}
                onChange={e => setLoginValue(e.target.value)}
                margin="normal"
                placeholder="Email Adress"
                type="email"
                fullWidth
              />
              <TextField
                id="password"
                InputProps={{
                  classes: {
                    underline: classes.textFieldUnderline,
                    input: classes.textField,
                  },
                }}
                value={passwordValue}
                onChange={e => setPasswordValue(e.target.value)}
                margin="normal"
                placeholder="Password"
                type="password"
                fullWidth
              />
              <div className={classes.creatingButtonContainer}>
                {isLoading ? (
                  <CircularProgress size={26} />
                ) : (
                  <Button
                    onClick={() =>
                      loginUser(
                        userDispatch,
                        loginValue,
                        passwordValue,
                        props.history,
                        setIsLoading,
                        setError,
                      )
                    }
                    disabled={
                      loginValue.length === 0 ||
                      passwordValue.length === 0 ||
                      nameValue.length === 0
                    }
                    size="large"
                    variant="contained"
                    color="primary"
                    fullWidth
                    className={classes.createAccountButton}
                  >
                    Create your account
                  </Button>
                )}
              </div>
              <div className={classes.formDividerContainer}>
                <div className={classes.formDivider} />
                <Typography className={classes.formDividerWord}>or</Typography>
                <div className={classes.formDivider} />
              </div>
              <Button
                size="large"
                className={classnames(
                  classes.googleButton,
                  classes.googleButtonCreating,
                )}
              >
                <img src={google} alt="google" className={classes.googleIcon} />
                &nbsp;Sign in with Google
              </Button>
            </React.Fragment>
          )}
        </div>
        <Typography color="primary" className={classes.copyright}>
        © 2014-{new Date().getFullYear()} <a style={{ textDecoration: 'none', color: 'inherit' }} href="https://flatlogic.com" rel="noopener noreferrer" target="_blank">Flatlogic</a>, LLC. All rights reserved.
        </Typography>
      </div>
    </Grid>
  );
}
Example #28
Source File: Toolbox.jsx    From doc2pen with Creative Commons Zero v1.0 Universal 4 votes vote down vote up
function VerticalTabs(props) {
	const {
		color,
		setColor,
		fillColor,
		setFillColor,
		fillOpacity,
		setFillOpacity,
		setBowing,
		setFillStyle,
		setFillWeight,
		setHachureAngle,
		setHachureGap,
		bowing,
		fillStyle,
		fillWeight,
		hachureAngle,
		hachureGap,
		background,
		setBackground,
		width,
		setWidth,
		stroke,
		setStroke,
		roughness,
		setRoughness,
		type,
		setType,
		fontSize,
		setFontSize,
		fontStyle,
		setFontStyle,
		fontFamily,
		setFontFamily,
		edge,
		setEdge,
		clear,
		download,
		initiateLoadSaved,
		loadLastState,
		saveInstance,
	} = props;
	const [displayColorPicker, setDisplayColorPicker] = useState(false);
	const ColorPicker = props => {
		const { width, name, color, onColorChange } = props;
		return (
			<div className={styles.root}>
				<div className={styles.swatch}>
					<div
						className={styles.colorIndicator}
						style={{
							backgroundColor: props.color || "#fff",
						}}
						onMouseDown={() => {
							setDisplayColorPicker(true);
						}}
					/>
				</div>
				{displayColorPicker ? (
					<ClickAwayListener
						onClickAway={() => {
							setDisplayColorPicker(false);
						}}
					>
						<div className={styles.popover}>
							<ChromePicker
								width={width}
								name={name}
								color={color}
								onChangeComplete={color => onColorChange(color.hex)}
							/>
						</div>
					</ClickAwayListener>
				) : null}
			</div>
		);
	};

	const classes = useStyles();
	const [value, setValue] = React.useState(0);
	const handleChange = (event, newValue) => {
		setValue(newValue);
	};

	function Feature({ title, children, classname }) {
		return (
			<ListItem>
				<div className={styles.feature + " " + classname}>
					<ListItemText className={styles.title}>{title}</ListItemText>
					<div className={styles.body}>{children}</div>
				</div>
			</ListItem>
		);
	}

	function Shape({ type_, id, label, children }) {
		return (
			<label style={{ marginTop: "3px" }} htmlFor={id} title={label}>
				<div
					className={`${styles.feature} ${
						type === type_ && styles.active_feature
					}`}
					onClick={() => setType(type_)}
					id={id}
				>
					{children}
				</div>
			</label>
		);
	}

	return (
		<div className={styles.toolbox_root}>
			<div className={styles.canvas_toolbox}>
				<div className={classes.root}>
					<Tabs
						orientation="vertical"
						variant="scrollable"
						value={value}
						onChange={handleChange}
						className={classes.tabs}
					>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Project">
									<AccountTree />
								</label>
							}
							{...a11yProps(0)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Canvas Setup">
									<RiFileSettingsLine size={25} />
								</label>
							}
							{...a11yProps(1)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Shapes & Tools">
									<FaShapes size={25} />
								</label>
							}
							{...a11yProps(2)}
						/>
						<Tab
							onClick={() => setType("text")}
							label={
								<label title="Text">
									<TextFields />
								</label>
							}
							{...a11yProps(3)}
						/>
						<Tab
							onClick={() => {
								setType("pen");
							}}
							label={
								<label title="Icon Library">
									<Apps />
								</label>
							}
							{...a11yProps(4)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Minimize Sidebar">
									<Close />
								</label>
							}
							{...a11yProps(5)}
						/>
					</Tabs>
					<TabPanel value={value} index={0}>
						<List component="div">
							<ListItem button onClick={clear}>
								<ListItemIcon>
									<Delete />
								</ListItemIcon>
								<ListItemText primary="Clear Canvas" />
							</ListItem>
							<ListItem button onClick={download}>
								<ListItemIcon>
									<SaveAlt />
								</ListItemIcon>
								<ListItemText primary="Download PNG" />
							</ListItem>
							<ListItem
								button
								onClick={() => initiateLoadSaved("img-file-selector")}
							>
								<ListItemIcon>
									<PhotoLibrary />
									<input
										type="file"
										id="img-file-selector"
										style={{ display: "none" }}
										accept="image/*"
										onChange={event => loadLastState(event)}
									/>
								</ListItemIcon>
								<ListItemText primary="Place Image" />
							</ListItem>
							<ListItem
								button
								onClick={() => saveInstance("savedProgress.d2ps")}
							>
								<ListItemIcon>
									<Save />
								</ListItemIcon>
								<ListItemText primary="Save & download Progress" />
							</ListItem>
							<ListItem
								button
								onClick={() => initiateLoadSaved("file-selector")}
							>
								<ListItemIcon style={{ width: 0 }}>
									<D2psIcon
										style={{
											transform: "scale(0.6) translateX(-30px)",
										}}
									/>
									<input
										type="file"
										id="file-selector"
										style={{ display: "none" }}
										accept=".d2ps"
										onChange={event => loadLastState(event)}
									/>
								</ListItemIcon>
								<ListItemText primary="Load Previous Progress" />
							</ListItem>
						</List>
					</TabPanel>
					<TabPanel value={value} index={1}>
						<List component="div">
							<Feature title="Canvas Setup">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_bg_color"
										color={background}
										onColorChange={setBackground}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={background}
										onInput={e => setBackground(e.target.value)}
									/>
								</div>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={2}>
						<List component="div">
							<Feature title="Shapes and Tools">
								<Shape type_="pen" id="sketch-shapes-pen" label="Pen">
									<FaPencilAlt size={12} />
								</Shape>
								<Shape type_="line" id="sketch-shapes-line" label="Line">
									<FaSlash size={10} />
								</Shape>
								<Shape type_="square" id="sketch-shapes-square" label="Square">
									<FaRegSquare size={10} />
								</Shape>
								<Shape type_="circle" id="sketch-shapes-circle" label="Circle">
									<FaRegCircle size={10} />
								</Shape>
								<Shape
									type_="triangle"
									id="sketch-shapes-triangle"
									label="Triangle"
								>
									<GiTriangleTarget size={12} />
								</Shape>
								<Shape type_="arrow" id="sketch-shapes-arrow" label="Arrow">
									<BsArrowUpRight size={12} />
								</Shape>
								<Shape
									type_="diamond"
									id="sketch-shapes-diamond"
									label="Diamond"
								>
									<BsDiamond size={10} />
								</Shape>
								<Shape
									type_="biShapeTriangle"
									id="sketch-shapes-biShapeTriangle"
									label="Bi Shape Triangle"
								>
									<BiShapeTriangle size={12} />
								</Shape>
							</Feature>
							<Divider />
							{!["text", "pen", "line"].includes(type) && (
								<>
									<Feature title="Fill Style">
										<select
											name="shape_fill_style"
											value={fillStyle}
											onChange={e => setFillStyle(e.target.value)}
										>
											<option value="none">none</option>
											<option value="solid">solid</option>
											<option value="hachure">hachure</option>
											<option value="zigzag">zigzag</option>
											<option value="cross-hatch">cross-hatch</option>
											<option value="dots">dots</option>
											<option value="dashed">dashed</option>
											<option value="zigzag-line">zigzag-line</option>
										</select>
									</Feature>
									{fillStyle !== "none" && (
										<>
											<Feature title="Fill Color">
												<div className={styles.colorPicker}>
													<ColorPicker
														width={200}
														name="canvas_pen_color"
														color={fillColor}
														onColorChange={setFillColor}
													/>
													<input
														className={styles.hexInput}
														placeholder="#"
														type="text"
														value={fillColor}
														onInput={e => setFillColor(e.target.value)}
													/>
												</div>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Opacity"}
											>
												<input
													className={styles.slider}
													type="range"
													min={0}
													max={1}
													step={0.1}
													value={fillOpacity}
													onChange={e => setFillOpacity(e.target.value)}
												/>
											</Feature>
										</>
									)}
									{!["none", "solid"].includes(fillStyle) && (
										<>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Weight"}
											>
												<input
													className={styles.slider}
													type="range"
													min={1}
													max={10}
													step={0.1}
													value={fillWeight}
													onChange={e => setFillWeight(e.target.value)}
												/>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Hachure Angle"}
											>
												<input
													className={styles.slider}
													type="range"
													min={0}
													max={360}
													step={1}
													value={hachureAngle + 180}
													onChange={e => setHachureAngle(e.target.value - 180)}
												/>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Hachure Gap"}
											>
												<input
													className={styles.slider}
													type="range"
													min={1}
													max={10}
													step={0.1}
													value={hachureGap}
													onChange={e => setHachureGap(e.target.value)}
												/>
											</Feature>
										</>
									)}
									<Divider />
								</>
							)}

							<Feature title="Stroke">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_pen_color"
										color={color}
										onColorChange={setColor}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={color}
										onInput={e => setColor(e.target.value)}
									/>
								</div>
							</Feature>
							<Feature classname={styles.sliderWrapper} title={"Roughness"}>
								<input
									className={styles.slider}
									type="range"
									min={0}
									max={5}
									step={0.1}
									value={roughness}
									onChange={e => setRoughness(e.target.value)}
								/>
							</Feature>
							<Feature classname={styles.sliderWrapper} title={"Stroke Bowing"}>
								<input
									className={styles.slider}
									type="range"
									min={0}
									max={10}
									step={0.1}
									value={bowing}
									onChange={e => setBowing(e.target.value)}
								/>
							</Feature>
							<Feature title="Stroke Width">
								<select
									name="canvas_pen_width"
									value={width}
									onChange={e => setWidth(e.target.value)}
								>
									<option value="1">1px</option>
									<option value="2">2px</option>
									<option value="3">3px</option>
									<option value="4">4px</option>
									<option value="5">5px</option>
									<option value="6">6px</option>
									<option value="7">7px</option>
									<option value="8">8px</option>
									<option value="9">9px</option>
									<option value="10">10px</option>
									<option value="11">11px</option>
								</select>
							</Feature>
							<Feature title="Stroke Style">
								<div
									className={`${styles.feature_box} ${
										stroke === "none" && styles.active_feature_box
									}`}
									onClick={() => setStroke("none")}
								>
									<AiOutlineLine size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										stroke === "small" && styles.active_feature_box
									}`}
									onClick={() => setStroke("small")}
								>
									<AiOutlineSmallDash size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										stroke === "big" && styles.active_feature_box
									}`}
									onClick={() => setStroke("big")}
								>
									<AiOutlineDash size={20} />
								</div>
							</Feature>
							<Feature title="Edge">
								<select value={edge} onChange={e => setEdge(e.target.value)}>
									<option value="round">Round</option>
									<option value="bevel">Bevel</option>
									<option value="miter">Miter</option>
								</select>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={3}>
						<List component="div">
							<Feature title="Stroke">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_pen_color"
										color={color}
										onColorChange={setColor}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={color}
										onInput={e => setColor(e.target.value)}
									/>
								</div>
							</Feature>
							<Feature
								classname={styles.sliderWrapper}
								title={`Font [ ${fontSize} ]`}
							>
								<input
									className={styles.slider}
									type="range"
									min="10"
									max="20"
									value={fontSize * 10}
									onChange={e => setFontSize(e.target.value / 10)}
								/>
							</Feature>
							<Feature title="Font Style">
								<div
									className={`${styles.feature_box} ${
										fontStyle === "normal" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("normal")}
								>
									<BsFonts size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										fontStyle === "italic" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("italic")}
								>
									<FaItalic size={15} />
								</div>
								<div
									className={`${styles.feature_box} ${
										fontStyle === "bold" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("bold")}
								>
									<FaBold size={15} />
								</div>
							</Feature>
							<Feature title="Font Family">
								<select
									value={fontFamily}
									onChange={e => setFontFamily(e.target.value)}
								>
									<option value="cursive">Cursive</option>
									<option value="Courier New">Courier New</option>
									<option value="serif">Serif</option>
								</select>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={4}>
						<List component="div">
							<IconsLibrary />
						</List>
					</TabPanel>
					<TabPanel
						className={classes.tabPanelClose}
						value={value}
						index={5}
					></TabPanel>
				</div>
			</div>
		</div>
	);
}
Example #29
Source File: ProjectsDraftsGrid.jsx    From zubhub with GNU Affero General Public License v3.0 4 votes vote down vote up
ProjectsDraftsGrid = ({
  profile,
  projects,
  drafts,
  handleSetState,
  ...props
}) => {
  const classes = useStyles();

  const history = useHistory();
  const { t } = useTranslation();
  const [value, setValue] = React.useState(0);

  const handleChange = (e, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper className={classes.profileLowerStyle}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="basic tabs example"
          classes={{
            indicator: classes.indicator,
          }}
        >
          <Tab
            label="Projects"
            {...a11yProps(0)}
            className={classes.tabStyle}
          />
          <Tab label="Drafts" {...a11yProps(1)} className={classes.tabStyle} />
        </Tabs>
      </Box>
      <TabPanel value={value} index={0}>
        <CustomButton
          className={clsx(classes.viewAllBtn)}
          variant="outlined"
          margin="normal"
          secondaryButtonStyle
          onClick={() => history.push(`/creators/${profile.username}/projects`)}
        >
          {t('profile.projects.viewAll')}
        </CustomButton>
        <Grid container>
          {Array.isArray(projects) &&
            projects.map(project => (
              <Grid
                item
                xs={12}
                sm={6}
                md={6}
                className={classes.gridStyle}
                align="center"
              >
                <Project
                  project={project}
                  key={project.id}
                  updateProjects={res =>
                    handleSetState(updateProjects(res, projects, t, toast))
                  }
                  {...props}
                />
              </Grid>
            ))}
        </Grid>
      </TabPanel>
      <TabPanel value={value} index={1}>
        <CustomButton
          className={clsx(classes.viewAllBtn)}
          variant="outlined"
          margin="normal"
          secondaryButtonStyle
          onClick={() => history.push(`/creators/${profile.username}/drafts`)}
        >
          {t('profile.projects.viewAll')}
        </CustomButton>
        <Grid container>
          {Array.isArray(drafts) &&
            drafts.map(draft => (
              <Grid
                item
                xs={12}
                sm={6}
                md={6}
                className={classes.gridStyle}
                align="center"
              >
                <Project
                  project={draft}
                  key={draft.id}
                  updateProjects={res =>
                    handleSetState(updateDrafts(res, drafts, t, toast))
                  }
                  {...props}
                />
              </Grid>
            ))}
        </Grid>
      </TabPanel>
    </Paper>
  );
}