@material-ui/core#Icon TypeScript Examples

The following examples show how to use @material-ui/core#Icon. 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: App.tsx    From github-deploy-center with MIT License 6 votes vote down vote up
App = () => {
  const { token } = useAppState()
  const { setToken, showSettings } = useActions()
  return (
    <Container>
      <Box p={4} display="grid" gridGap="1rem" component={Paper}>
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <Typography variant="h1">GitHub Deploy Center</Typography>
          <IconButton title="Settings" onClick={() => showSettings()}>
            <Icon>settings</Icon>
          </IconButton>
        </Box>
        <TextField
          label="Personal Access Token"
          value={token}
          onChange={(e) => setToken(e.target.value)}
          type="password"
        />
        {token && (
          <>
            <ManageApplicationsView />
            <SelectApplicationView />
            <EnvironmentsView />
            <ReleasesTableView />
            <NewApplicationDialog />
            <EditApplicationDialog />
            <DeploymentDialog />
          </>
        )}
      </Box>
      <SettingsDialog />
      <ModalContainer />
    </Container>
  )
}
Example #2
Source File: Menu.tsx    From signer with Apache License 2.0 4 votes vote down vote up
MoreMenu = observer((props: Props) => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const classes = useStyles();

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setTimeout(() => {
      setAnchorEl(null);
    }, 200);
  };

  return (
    <div>
      <IconButton
        edge="end"
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
        style={{ color: '#C4C4C4' }}
      >
        <MenuIcon />
      </IconButton>
      <Menu
        id={'simple-menu'}
        anchorEl={anchorEl}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <List
          aria-labelledby="nested-list-subheader"
          subheader={
            <ListSubheader component="div" id="nested-list-subheader">
              {props.accountManager.userAccounts.length > 0
                ? 'Accounts'
                : 'No Account'}
            </ListSubheader>
          }
        >
          {props.accountManager.userAccounts.map((account, i) => {
            return (
              <ListItem
                key={i}
                button
                dense={true}
                onClick={() => {
                  props.accountManager.switchToAccount(account.alias);
                  handleClose();
                }}
              >
                {account.alias ===
                props.accountManager.activeUserAccount?.alias ? (
                  <CheckIcon fontSize={'small'} />
                ) : (
                  <Icon className={'fa fa-fw'} fontSize={'small'} />
                )}
                <ListItemText primary={account.alias} />
              </ListItem>
            );
          })}
          <Divider light />
          {props.accountManager.userAccounts.length > 0 && (
            <ListItem
              dense={true}
              component={Link}
              to={Pages.AccountManagement}
              button
              onClick={handleClose}
            >
              <SettingsIcon className={classes.menuIcon} />
              <ListItemText primary="Key Management" />
            </ListItem>
          )}
          <ListItem
            dense={true}
            component={Link}
            to={Pages.ConnectedSites}
            button
            onClick={handleClose}
          >
            <WebIcon className={classes.menuIcon} />
            <ListItemText primary="Connected Sites" />
          </ListItem>
          {props.accountManager.activeUserAccount && (
            <ListItem
              dense={true}
              button
              onClick={() => {
                props.accountManager.downloadActiveKey();
                handleClose();
              }}
            >
              <CloudDownloadIcon className={classes.menuIcon} />
              <ListItemText primary="Download Active Key" />
            </ListItem>
          )}
          <ListItem
            dense={true}
            component={Link}
            to={Pages.ConfigureTimeout}
            button
            onClick={handleClose}
          >
            <TimerIcon className={classes.menuIcon} />
            <ListItemText primary="Timeout" />
            <Typography variant="overline">
              {props.accountManager.idleTimeoutMins} min
              {props.accountManager.idleTimeoutMins === 1 ? '' : 's'}
            </Typography>
          </ListItem>
          <ListItem
            dense={true}
            button
            onClick={() => {
              props.accountManager.lock();
              handleClose();
            }}
          >
            <LockIcon className={classes.menuIcon} />
            <ListItemText primary="Lock" />
          </ListItem>
        </List>
      </Menu>
    </div>
  );
})
Example #3
Source File: ReleasesTableView.tsx    From github-deploy-center with MIT License 4 votes vote down vote up
ReleasesTableView = () => {
  const { selectedApplication, pendingDeployments } = useAppState()
  const repo = selectedApplication?.repo
  const { triggerDeployment, removeEnvironment } = useActions()
  const allReleaseResultsForTag = useFetchReleases()

  const releases = allReleaseResultsForTag.data || []

  const { mutate, error, isLoading } = useMutation(
    async ({
      release,
      environmentName,
    }: {
      release: string
      environmentName: string
    }) => {
      await triggerDeployment({ release, environmentName })
    }
  )

  if (
    !selectedApplication ||
    !DeployWorkflowCodec.is(selectedApplication.deploySettings) ||
    !selectedApplication.deploySettings.workflowId
  ) {
    return null
  }

  if (allReleaseResultsForTag.isLoading) {
    return <CircularProgress />
  }

  const releasesSorted = orderBy(
    releases
      .slice()
      .sort((a, b) =>
        b.tagName.localeCompare(a.tagName, undefined, { numeric: true })
      )
      .filter((r) =>
        r.name
          .toLowerCase()
          .startsWith(selectedApplication.releaseFilter.toLowerCase())
      ),
    (r) => r.createdAt,
    'desc'
  )

  const selectedEnvironments = values(
    selectedApplication.environmentSettingsByName
  )

  const releasesByEnvironment = selectedEnvironments.reduce<
    Record<string, ReleaseModel[]>
  >((record, environment) => {
    record[environment.name] = releasesSorted.filter((r) =>
      r.deployments.some((d) => d.environment === environment.name)
    )
    return record
  }, {})

  const createButton = (
    deployment: DeploymentModel | undefined,
    release: ReleaseModel,
    environment: EnvironmentSettings
  ) => {
    const latestRelease = releasesByEnvironment[environment.name]?.[0]
    const isAfterLatest =
      !latestRelease || release.createdAt.isAfter(latestRelease.createdAt)

    const deploymentId = getDeploymentId({
      release: release.tagName,
      environment: environment.name,
      repo: selectedApplication.repo.name,
      owner: selectedApplication.repo.owner,
    })
    const pendingDeployment = pendingDeployments[deploymentId]
    const modifiedAt = deployment?.modifiedAt
    const deploymentState =
      pendingDeployment &&
      (!modifiedAt || pendingDeployment.isAfter(modifiedAt))
        ? DeploymentState.Pending
        : deployment?.state

    const deployButtonVariant =
      (isAfterLatest && !deploymentState) ||
      deploymentState === DeploymentState.Active
        ? 'contained'
        : 'outlined'

    return (
      <Button
        disabled={isLoading}
        variant={deployButtonVariant}
        color={!deploymentState && isAfterLatest ? 'primary' : 'default'}
        style={getButtonStyle(deploymentState)}
        onClick={() =>
          mutate({
            release: release.tagName,
            environmentName: environment.name,
          })
        }>
        {deploymentState?.replaceAll('_', ' ') ?? 'Deploy'}
      </Button>
    )
  }

  return (
    <>
      {error instanceof Error && (
        <Alert severity="error">{error.message}</Alert>
      )}
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Release name</TableCell>
            {selectedEnvironments.map((environment) => (
              <TableCell key={environment.name}>
                <Link
                  href={`https://github.com/${repo?.owner}/${
                    repo?.name
                  }/deployments/activity_log?environment=${encodeURIComponent(
                    environment.name
                  )}`}
                  target="_blank"
                  color="inherit">
                  {environment.name}
                </Link>
                <IconButton onClick={() => removeEnvironment(environment.name)}>
                  <Icon>delete</Icon>
                </IconButton>
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {releasesSorted.map((release) => (
            <TableRow key={release.id}>
              <TableCell style={{ width: '20%' }}>
                <Link
                  href={`https://github.com/${repo?.owner}/${repo?.name}/releases/tag/${release.tagName}`}
                  target="_blank"
                  color="inherit">
                  {release.name}
                </Link>
              </TableCell>
              {selectedEnvironments.map((environment) => {
                const deployment = release.deployments.find(
                  (d) => d.environment === environment.name
                )
                return (
                  <TableCell key={environment.name}>
                    {createButton(deployment, release, environment)}
                  </TableCell>
                )
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  )
}
Example #4
Source File: F1099Info.tsx    From UsTaxes with GNU Affero General Public License v3.0 4 votes vote down vote up
export default function F1099Info(): ReactElement {
  const f1099s = useSelector((state: TaxesState) => state.information.f1099s)

  const defaultValues = blankUserInput

  const methods = useForm<F1099UserInput>({ defaultValues })
  const { handleSubmit, watch } = methods
  const selectedType: Income1099Type | undefined = watch('formType')

  const dispatch = useDispatch()

  const { onAdvance, navButtons } = usePager()

  const onSubmitAdd = (formData: F1099UserInput): void => {
    const payload = toF1099(formData)
    if (payload !== undefined) {
      dispatch(add1099(payload))
    }
  }

  const onSubmitEdit =
    (index: number) =>
    (formData: F1099UserInput): void => {
      const payload = toF1099(formData)
      if (payload !== undefined) {
        dispatch(edit1099({ value: payload, index }))
      }
    }

  const people: Person[] = useSelector((state: TaxesState) => [
    state.information.taxPayer.primaryPerson,
    state.information.taxPayer.spouse
  ])
    .filter((p) => p !== undefined)
    .map((p) => p as Person)

  const intFields = (
    <Grid container spacing={2}>
      <LabeledInput
        label={
          <>
            <strong>Box 1</strong> - Interest Income
          </>
        }
        patternConfig={Patterns.currency}
        name="interest"
      />
    </Grid>
  )

  const bFields = (
    <>
      <h3>Long Term Covered Transactions</h3>
      <Grid container spacing={2}>
        <LabeledInput
          label="Proceeds"
          patternConfig={Patterns.currency}
          name="longTermProceeds"
          sizes={{ xs: 6 }}
        />
        <LabeledInput
          label="Cost basis"
          patternConfig={Patterns.currency}
          name="longTermCostBasis"
          sizes={{ xs: 6 }}
        />
      </Grid>
      <h3>Short Term Covered Transactions</h3>
      <Grid container spacing={2}>
        <LabeledInput
          label="Proceeds"
          patternConfig={Patterns.currency}
          name="shortTermProceeds"
          sizes={{ xs: 6 }}
        />
        <LabeledInput
          label="Cost basis"
          patternConfig={Patterns.currency}
          name="shortTermCostBasis"
          sizes={{ xs: 6 }}
        />
      </Grid>
    </>
  )

  const divFields = (
    <Grid container spacing={2}>
      <LabeledInput
        label={boxLabel('1a', 'Total Dividends')}
        patternConfig={Patterns.currency}
        name="dividends"
      />
      <LabeledInput
        label={boxLabel('1b', 'Qualified Dividends')}
        patternConfig={Patterns.currency}
        name="qualifiedDividends"
      />
      <LabeledInput
        label={boxLabel('2a', 'Total capital gains distributions')}
        patternConfig={Patterns.currency}
        name="totalCapitalGainsDistributions"
      />
    </Grid>
  )

  const rFields = (
    <Grid container spacing={2}>
      <Alert severity="warning">
        Use this form only for 1099-R forms related to your 401(k) or other
        retirement plans. If you have 1099-R forms from IRA accounts please see
        the <Link to="/savingsaccounts/ira">IRA page</Link>
      </Alert>
      <LabeledInput
        label={boxLabel('1', 'Gross Distribution')}
        patternConfig={Patterns.currency}
        name="grossDistribution"
      />
      <LabeledInput
        label={boxLabel('2a', 'Taxable Amount')}
        patternConfig={Patterns.currency}
        name="taxableAmount"
      />
      <LabeledInput
        label={boxLabel('4', 'Federal Income Tax Withheld')}
        patternConfig={Patterns.currency}
        name="federalIncomeTaxWithheld"
      />
      <GenericLabeledDropdown<PlanType1099, F1099UserInput>
        label="Type of 1099-R"
        dropDownData={Object.values(PlanType1099)}
        valueMapping={(x) => x}
        keyMapping={(_, i) => i}
        textMapping={(status) => PlanType1099Texts[status]}
        name="RPlanType"
      />
    </Grid>
  )

  const ssaFields = (
    <Grid container spacing={2}>
      {/* <LabeledInput
        label="Box 3 - Benefits Paid"
        patternConfig={Patterns.currency}
        name="benefitsPaid"
      />
      <LabeledInput
        label="Box 4 - Benefits Repaid"
        patternConfig={Patterns.currency}
        name="benefitsRepaid"
      /> */}
      <LabeledInput
        label={
          <>
            <strong>Box 5</strong> - Net Benefits
          </>
        }
        patternConfig={Patterns.currency}
        name="netBenefits"
      />
      <LabeledInput
        label={
          <>
            <strong>Box 6</strong> - Voluntary Federal Income Tax Withheld
          </>
        }
        patternConfig={Patterns.currency}
        name="federalIncomeTaxWithheld"
      />
    </Grid>
  )

  const specificFields = {
    [Income1099Type.INT]: intFields,
    [Income1099Type.B]: bFields,
    [Income1099Type.DIV]: divFields,
    [Income1099Type.R]: rFields,
    [Income1099Type.SSA]: ssaFields
  }

  const titles = {
    [Income1099Type.INT]: '1099-INT',
    [Income1099Type.B]: '1099-B',
    [Income1099Type.DIV]: '1099-DIV',
    [Income1099Type.R]: '1099-R',
    [Income1099Type.SSA]: 'SSA-1099'
  }

  const form: ReactElement | undefined = (
    <FormListContainer
      defaultValues={defaultValues}
      onSubmitAdd={onSubmitAdd}
      onSubmitEdit={onSubmitEdit}
      items={f1099s.map((a) => toUserInput(a))}
      removeItem={(i) => dispatch(remove1099(i))}
      primary={(f) => f.payer}
      secondary={(f) => {
        const form = toF1099(f)
        if (form !== undefined) {
          return showIncome(form)
        }
        return ''
      }}
      icon={(f) => (
        <Icon
          style={{ lineHeight: 1 }}
          title={f.formType !== undefined ? titles[f.formType] : undefined}
        >
          {f.formType}
        </Icon>
      )}
    >
      <p>Input data from 1099</p>
      <Grid container spacing={2}>
        <GenericLabeledDropdown
          autofocus={true}
          dropDownData={Object.values(Income1099Type)}
          label="Form Type"
          valueMapping={(v: Income1099Type) => v}
          name="formType"
          keyMapping={(_, i: number) => i}
          textMapping={(name: string) => `1099-${name}`}
        />

        <LabeledInput
          label="Enter name of bank, broker firm, or other payer"
          required={true}
          name="payer"
        />
      </Grid>
      {selectedType !== undefined ? specificFields[selectedType] : undefined}
      <Grid container spacing={2}>
        <GenericLabeledDropdown
          dropDownData={people}
          label="Recipient"
          valueMapping={(p: Person, i: number) =>
            [PersonRole.PRIMARY, PersonRole.SPOUSE][i]
          }
          name="personRole"
          keyMapping={(p: Person, i: number) => i}
          textMapping={(p: Person) =>
            `${p.firstName} ${p.lastName} (${formatSSID(p.ssid)})`
          }
        />
      </Grid>
    </FormListContainer>
  )

  return (
    <FormProvider {...methods}>
      <form
        tabIndex={-1}
        onSubmit={intentionallyFloat(handleSubmit(onAdvance))}
      >
        <Helmet>
          <title>1099 Information | Income | UsTaxes.org</title>
        </Helmet>
        <h2>1099 Information</h2>
        {form}
        {navButtons}
      </form>
    </FormProvider>
  )
}