CreateUser.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import { makeStyles, Theme } from '@material-ui/core';
  2. import { FC, useMemo, useState } from 'react';
  3. import { useTranslation } from 'react-i18next';
  4. import DialogTemplate from '@/components/customDialog/DialogTemplate';
  5. import CustomInput from '@/components/customInput/CustomInput';
  6. import { ITextfieldConfig } from '@/components/customInput/Types';
  7. import { useFormValidation } from '@/hooks/Form';
  8. import { formatForm } from '@/utils/Form';
  9. import { CreateUserProps, CreateUserParams } from './Types';
  10. const useStyles = makeStyles((theme: Theme) => ({
  11. input: {
  12. margin: theme.spacing(3, 0, 0.5),
  13. },
  14. }));
  15. const CreateUser: FC<CreateUserProps> = ({ handleCreate, handleClose }) => {
  16. const { t: commonTrans } = useTranslation();
  17. const { t: userTrans } = useTranslation('user');
  18. const { t: btnTrans } = useTranslation('btn');
  19. const { t: warningTrans } = useTranslation('warning');
  20. const attuTrans = commonTrans('attu');
  21. const [form, setForm] = useState<CreateUserParams>({
  22. username: '',
  23. password: '',
  24. });
  25. const checkedForm = useMemo(() => {
  26. return formatForm(form);
  27. }, [form]);
  28. const { validation, checkIsValid, disabled } = useFormValidation(checkedForm);
  29. const classes = useStyles();
  30. const handleInputChange = (key: 'username' | 'password', value: string) => {
  31. setForm(v => ({ ...v, [key]: value }));
  32. };
  33. const createConfigs: ITextfieldConfig[] = [
  34. {
  35. label: attuTrans.username,
  36. key: 'username',
  37. onChange: (value: string) => handleInputChange('username', value),
  38. variant: 'filled',
  39. className: classes.input,
  40. placeholder: attuTrans.username,
  41. fullWidth: true,
  42. validations: [
  43. {
  44. rule: 'require',
  45. errorText: warningTrans('required', {
  46. name: attuTrans.username,
  47. }),
  48. },
  49. ],
  50. defaultValue: form.username,
  51. },
  52. {
  53. label: attuTrans.password,
  54. key: 'password',
  55. onChange: (value: string) => handleInputChange('password', value),
  56. variant: 'filled',
  57. className: classes.input,
  58. placeholder: attuTrans.password,
  59. fullWidth: true,
  60. type: 'password',
  61. validations: [
  62. {
  63. rule: 'require',
  64. errorText: warningTrans('required', {
  65. name: attuTrans.password,
  66. }),
  67. },
  68. ],
  69. defaultValue: form.username,
  70. },
  71. ];
  72. const handleCreateUser = () => {
  73. handleCreate(form);
  74. };
  75. return (
  76. <DialogTemplate
  77. title={userTrans('createTitle')}
  78. handleClose={handleClose}
  79. confirmLabel={btnTrans('create')}
  80. handleConfirm={handleCreateUser}
  81. confirmDisabled={disabled}
  82. >
  83. <>
  84. {createConfigs.map(v => (
  85. <CustomInput
  86. type="text"
  87. textConfig={v}
  88. checkValid={checkIsValid}
  89. validInfo={validation}
  90. key={v.label}
  91. />
  92. ))}
  93. </>
  94. </DialogTemplate>
  95. );
  96. };
  97. export default CreateUser;