Create.tsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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 { CreateDatabaseProps, CreateDatabaseParams } from './Types';
  10. const useStyles = makeStyles((theme: Theme) => ({
  11. input: {
  12. margin: theme.spacing(3, 0, 0.5),
  13. },
  14. }));
  15. const CreateUser: FC<CreateDatabaseProps> = ({ handleCreate, handleClose }) => {
  16. const { t: databaseTrans } = useTranslation('database');
  17. const { t: btnTrans } = useTranslation('btn');
  18. const { t: warningTrans } = useTranslation('warning');
  19. const [form, setForm] = useState<CreateDatabaseParams>({
  20. db_name: '',
  21. });
  22. const checkedForm = useMemo(() => {
  23. return formatForm(form);
  24. }, [form]);
  25. const { validation, checkIsValid, disabled } = useFormValidation(checkedForm);
  26. const classes = useStyles();
  27. const handleInputChange = (key: 'db_name', value: string) => {
  28. setForm(v => ({ ...v, [key]: value }));
  29. };
  30. const createConfigs: ITextfieldConfig[] = [
  31. {
  32. label: databaseTrans('database'),
  33. key: 'db_name',
  34. onChange: (value: string) => handleInputChange('db_name', value),
  35. variant: 'filled',
  36. className: classes.input,
  37. placeholder: databaseTrans('database'),
  38. fullWidth: true,
  39. validations: [
  40. {
  41. rule: 'require',
  42. errorText: warningTrans('required', {
  43. name: databaseTrans('databaseName'),
  44. }),
  45. },
  46. ],
  47. defaultValue: form.db_name,
  48. },
  49. ];
  50. const handleCreateDatabase = () => {
  51. handleCreate(form);
  52. };
  53. return (
  54. <DialogTemplate
  55. title={databaseTrans('createTitle')}
  56. handleClose={handleClose}
  57. confirmLabel={btnTrans('create')}
  58. handleConfirm={handleCreateDatabase}
  59. confirmDisabled={disabled}
  60. >
  61. <>
  62. {createConfigs.map(v => (
  63. <CustomInput
  64. type="text"
  65. textConfig={v}
  66. checkValid={checkIsValid}
  67. validInfo={validation}
  68. key={v.label}
  69. />
  70. ))}
  71. </>
  72. </DialogTemplate>
  73. );
  74. };
  75. export default CreateUser;