User Type selector

This component can be used whenever we want to select a UserType - either for filtering, either for creating / updating Users (or other entities).

Below is a table with all the available User Types¹:

Value	Type
0	None
1	Employee
2	Customer
4	Anonymous
8	Business
17	System (has 1 included by default, hence why it's 17 rather than 16)
32	Migrated
64	Debtor
256	LimitedTrust
512	Tester
1024	RemovedByRequest

The UserType is a flagged value / bitfield, so every bit position in the number values binary representation is a flag for the relevant UserType. This also means, that a User can be of multiple UserTypes.

Usage

Props

interface IUserTypeSelectProps {
  // Required Props  value: number | undefined;  setValue: (newValue: number | undefined) => void;
  // Optional Props  name?: string;  error?: boolean;  multiple?: boolean;  helperText?: string;  onBlur?: (event: React.FocusEvent<any>) => void;
}

This component can be used either for selecting a single UserType, or multiple UserTypes - this behaviour can be controlled by the multiple optional boolean prop.

Single UserType

This mode is applicable when the component is used for example as a filter, and we want to filter on individual UserTypes.

import { useState } from 'react';import { UserTypeSelect } from '@springtree/eva-suite-composite';
const Example = () => {  const [selectedUserType, setSelectedUserType] = useState<number | undefined>();
  return (    <UserTypeSelect      value={selectedUserType}      setValue={(newValue) => setSelectedUserType(newValue)}    >  );}

Multiple UserTypes

import { useState } from 'react';import { UserTypeSelect } from '@springtree/eva-suite-composite';
const Example = () => {  const [selectedUserType, setSelectedUserType] = useState<number | undefined>();
  return (    <UserTypeSelect      multiple      value={selectedUserType}      setValue={(newValue) => setSelectedUserType(newValue)}    >  );}

Usage with Formik and Yup

import * as yup from 'yup';import { useState } from 'react';import { Formik, Field, FieldProps } from 'formik';import { Button, Grid, Switch } from '@springtree/eva-suite-ui';import { UserTypeSelect } from '@springtree/eva-suite-composite';
interface IExampleFormValues {  userType?: number;}
const Example = () => {  const [isMulti, setIsMulti] = useState<boolean>(false);
  return (    <Formik<IExampleFormValues>      initialValues={{ userType: undefined }}      validationSchema={yup.object().shape({        userType: yup          .number()          .required('You need to select at least one user type!'),      })}      onSubmit={(values, formikHelpers) => {        console.log(values);        formikHelpers.setSubmitting(false);      }}    >      {({ submitForm, resetForm }) => (        <Grid container spacing={2} direction="column">          <Grid item>            <Switch              value={isMulti}              label="UserType multiple selection"              onChange={(newValue) => {                resetForm();                setIsMulti(newValue);              }}            ></Switch>          </Grid>          <Grid item>            <Field name="userType">              {({ field, form, meta }: FieldProps<number | undefined, IExampleFormValues>) => (                <UserTypeSelect                  name="userType"                  multiple={isMulti}                  value={field.value}                  onBlur={field.onBlur}                  error={!!meta.error && meta.touched}                  helperText={meta.touched ? meta.error : undefined}                  setValue={(newValue) =>                    form.setFieldValue('userType', newValue);                  }                />              )}            </Field>          </Grid>          <Grid item container justifyContent="flex-end">            <Grid item>              <Button variant="contained" onClick={submitForm}>Submit</Button>            </Grid>          </Grid>        </Grid>      )}    </Formik>  );}

Translations

Add these translations to the module. Make sure there are no duplicates.

{  "user-type-select.label": "User type",  "user-type-select.enum-value-labels.0": "None",  "user-type-select.enum-value-labels.1": "Employee",  "user-type-select.enum-value-labels.2": "Customer",  "user-type-select.enum-value-labels.4": "Anonymous",  "user-type-select.enum-value-labels.8": "Business",  "user-type-select.enum-value-labels.17": "System",  "user-type-select.enum-value-labels.32": "Migrated",  "user-type-select.enum-value-labels.64": "Debtor",  "user-type-select.enum-value-labels.256": "Limited Trust",  "user-type-select.enum-value-labels.512": "Tester",  "user-type-select.enum-value-labels.1024": "Removed By Request",}

References

---

1. Users in EVA User Documentation↩