packages/clickstream/examples/InactivityTime.tsx - develop - kaws/ui-kit-ce

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

const SECOND = 1000
const INACTIVITY_TIME = SECOND * 5

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

export const InactivityTime: React.FC<InactivityTimeProps> = ({ onSubmit }) => {
  const [intervalValue, setIntervalValue] = React.useState(INACTIVITY_TIME)
  const intervalRef = React.useRef<ReturnType<typeof setInterval>>()

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

  const handleBatch = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current)

      setIntervalValue(INACTIVITY_TIME)
    }

    intervalRef.current = setInterval(() => {
      setIntervalValue((prev) => {
        if (prev === SECOND) {
          if (intervalRef.current) {
            clearInterval(intervalRef.current)
          }

          return 0
        }

        return prev - SECOND
      })
    }, SECOND)
  }

  return (
    <ClickStreamProvider
      inactivityTime={INACTIVITY_TIME}
      onSendEvent={handleSendEvent}
      onBatch={handleBatch}
    >
      <BasicForm
        description={`Remaining time: ${intervalValue / SECOND} sec`}
      />
    </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>
  )
}