packages/clickstream/examples/BasicClickStream.tsx - develop - gsam/ui-kit-ce

packages/clickstream/examples/BasicClickStream.tsx
149 строк4 KB
Denis Svyatovets
style: добавлен плагин eslint для jsDoc
27 янв 2025, 17:06
27 янв 2025, 17:066287359
import * as React from 'react'
import {
  ClickStreamProvider,
  ClickStreamEventBatch,
  ClickStreamEventData,
} from '@v-uik/clickstream'
import {
  Box,
  Input,
  InputPassword,
  Checkbox,
  LabelControl,
  Grid,
  GridItem,
  Text,
  Button,
  Link,
  createUseStyles,
} from '@v-uik/base'

const BATCH_SIZE = 10

type BasicClickStreamProps = {
  onSubmit: (batch: ClickStreamEventBatch) => void
}

export const BasicClickStream: React.FC<BasicClickStreamProps> = ({
  onSubmit,
}) => {
  const [remainingEvents, setRemainingEvents] = React.useState(BATCH_SIZE)

  const handleSendEvent = (batch: ClickStreamEventBatch) => {
    onSubmit?.(batch)
  }

  const handleBatch = (
    event: Event,
    data: ClickStreamEventData,
    batch: ClickStreamEventBatch
  ) => {
    const newValue = BATCH_SIZE - batch.length - 1
    setRemainingEvents(newValue === 0 ? BATCH_SIZE : newValue)
  }

  return (
    <ClickStreamProvider onBatch={handleBatch} onSendEvent={handleSendEvent}>
      <BasicForm
        description={`Remaining events: ${remainingEvents}/${BATCH_SIZE}`}
      />
    </ClickStreamProvider>
  )
}

// Basic Form Code

const useStyles = createUseStyles({
  gridItemLink: {
    display: 'flex',
    justifyContent: 'flex-end',
  },
  form: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: 48,
  },
  formWrapper: {
    width: 434,
    margin: 'auto',
  },
})

type BasicFormProps = {
  description?: string
}

const BasicForm: React.FC<BasicFormProps> = ({ description }) => {
  const [checkboxValue, setCheckboxValue] = React.useState(false)

  const classes = useStyles()

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
  }
  const handleChangeCheckbox = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCheckboxValue(event.target.checked)
  }

  return (
    <Box
      noValidate
      as="form"
      className={classes.form}
      action=""
      onSubmit={handleSubmit}
    >
      <Box className={classes.formWrapper}>
        <Grid spacing={2}>
          <GridItem xs={16}>
            <Grid spacing={4} justify="center">
              <GridItem xs={16}>
                <Text as="h2" kind="titleLg">
                  ClickStream Demo
                </Text>
                <Text as="h3" kind="subtitle1">
                  {description || 'Click upon elements'}
                </Text>
              </GridItem>
              <GridItem xs={16}>
                <Input
                  fullWidth
                  label="Username"
                  placeholder="Enter your username"
                />
              </GridItem>
              <GridItem xs={16}>
                <InputPassword
                  fullWidth
                  inputProps={{ style: { letterSpacing: 'normal' } }}
                  label="Password"
                  placeholder="Enter your password"
                />
              </GridItem>
              <GridItem xs={16}>
                <LabelControl
                  label="Remember Me"
                  control={<Checkbox />}
                  checked={checkboxValue}
                  onChange={handleChangeCheckbox}
                />
              </GridItem>
            </Grid>
          </GridItem>
          <GridItem xs={16}>
            <Grid spacing={2}>
              <GridItem xs={16}>
                <Button fullWidth type="submit">
                  Login
                </Button>
              </GridItem>
              <GridItem xs={16} className={classes.gridItemLink}>
                <Link>Need help?</Link>
              </GridItem>
            </Grid>
          </GridItem>
        </Grid>
      </Box>
    </Box>
  )
}