Dialog.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import { useContext } from 'react';
  2. import { useTranslation } from 'react-i18next';
  3. import { Typography } from '@material-ui/core';
  4. import { rootContext } from '../context/Root';
  5. import { CollectionView } from '../pages/collections/Types';
  6. import { PartitionView } from '../pages/partitions/Types';
  7. import { StatusEnum } from '../components/status/Types';
  8. // handle release and load dialog
  9. export interface DialogHookProps {
  10. type: 'partition' | 'collection';
  11. }
  12. export const useDialogHook = (props: DialogHookProps) => {
  13. const { type } = props;
  14. const { setDialog } = useContext(rootContext);
  15. const { t: dialogTrans } = useTranslation('dialog');
  16. const { t: btnTrans } = useTranslation('btn');
  17. const { t: partitionTrans } = useTranslation('partition');
  18. const { t: collectionTrans } = useTranslation('collection');
  19. const name =
  20. type === 'collection'
  21. ? collectionTrans('collection')
  22. : partitionTrans('partition');
  23. const actionsMap = {
  24. release: {
  25. title: dialogTrans('releaseTitle', { type: name }),
  26. component: (
  27. <Typography className="dialog-content">
  28. {dialogTrans('releaseContent', { type: name })}
  29. </Typography>
  30. ),
  31. confirmLabel: btnTrans('release'),
  32. },
  33. load: {
  34. title: dialogTrans('loadTitle', { type: name }),
  35. component: (
  36. <Typography className="dialog-content">
  37. {dialogTrans('loadContent', { type: name })}
  38. </Typography>
  39. ),
  40. confirmLabel: btnTrans('load'),
  41. },
  42. };
  43. const handleAction = (
  44. data: PartitionView | CollectionView,
  45. cb: (data: any) => Promise<any>
  46. ) => {
  47. const actionType: 'release' | 'load' =
  48. data._status === StatusEnum.loaded ? 'release' : 'load';
  49. const { title, component, confirmLabel } = actionsMap[actionType];
  50. setDialog({
  51. open: true,
  52. type: 'notice',
  53. params: {
  54. title,
  55. component,
  56. confirmLabel,
  57. confirm: () => cb(data),
  58. },
  59. });
  60. };
  61. return {
  62. handleAction,
  63. };
  64. };