Import.tsx 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { useTranslation } from 'react-i18next';
  2. import Typography from '@material-ui/core/Typography';
  3. import { makeStyles, Theme, Divider } from '@material-ui/core';
  4. import CustomSelector from '../../components/customSelector/CustomSelector';
  5. import { Option } from '../../components/customSelector/Types';
  6. const getStyles = makeStyles((theme: Theme) => ({
  7. tip: {
  8. color: theme.palette.milvusGrey.dark,
  9. },
  10. selectorWrapper: {
  11. display: 'flex',
  12. justifyContent: 'space-between',
  13. alignItems: 'center',
  14. '& .selector': {
  15. flexBasis: '40%',
  16. minWidth: '256px',
  17. },
  18. '& .divider': {
  19. width: '20px',
  20. margin: theme.spacing(0, 4),
  21. color: theme.palette.milvusGrey.dark,
  22. },
  23. },
  24. uploadWrapper: {
  25. backgroundColor: '#f9f9f9',
  26. padding: theme.spacing(1),
  27. },
  28. }));
  29. const InsertImport = () => {
  30. const { t: insertTrans } = useTranslation('insert');
  31. const { t: collectionTrans } = useTranslation('collection');
  32. const { t: partitionTrans } = useTranslation('partition');
  33. const classes = getStyles();
  34. const collectionOptions: Option[] = [
  35. {
  36. label: 'a',
  37. value: 'a',
  38. },
  39. {
  40. label: 'b',
  41. value: 'b',
  42. },
  43. ];
  44. const partitionOptions: Option[] = [
  45. {
  46. label: 'a',
  47. value: 'a',
  48. },
  49. {
  50. label: 'b',
  51. value: 'b',
  52. },
  53. ];
  54. const handleCollectionChange = () => {};
  55. const handlePartitionChange = () => {};
  56. return (
  57. <section>
  58. <Typography className={classes.tip}>
  59. {insertTrans('targetTip')}
  60. </Typography>
  61. <form className={classes.selectorWrapper}>
  62. <CustomSelector
  63. options={collectionOptions}
  64. classes={{ root: 'selector' }}
  65. value={''}
  66. variant="filled"
  67. label={collectionTrans('collection')}
  68. onChange={handleCollectionChange}
  69. />
  70. <Divider classes={{ root: 'divider' }} />
  71. <CustomSelector
  72. options={partitionOptions}
  73. classes={{ root: 'selector' }}
  74. value={''}
  75. variant="filled"
  76. label={partitionTrans('partition')}
  77. onChange={handlePartitionChange}
  78. />
  79. </form>
  80. <div className={classes.uploadWrapper}></div>
  81. </section>
  82. );
  83. };
  84. export default InsertImport;