seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): customize file type select in file info

Browse Source
main
Tsu-ba-me 3 years ago
parent 387222ebdb
commit bf7e786c03
3 changed files with 112 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      striker-ui/components/Files/FileInfo.tsx
  2. 29
      striker-ui/package-lock.json
  3. 4
      striker-ui/package.json

65
striker-ui/components/Files/FileInfo.tsx
Unescape View File

@ -3,20 +3,24 @@ import {
checkboxClasses,
FormControl,
FormControlLabel,
inputClasses,
FormGroup,
InputLabel,
inputLabelClasses,
MenuItem,
OutlinedInput,
outlinedInputClasses,
Select,
selectClasses,
styled,
TextField,
} from '@mui/material';
import {
Sync as SyncIcon,
SyncDisabled as SyncDisabledIcon,
} from '@mui/icons-material';
import { v4 as uuidv4 } from 'uuid';
import {
BLACK,
BLUE,
BORDER_RADIUS,
GREY,
@ -37,19 +41,18 @@ const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
onChange: undefined,
};
const StyledTextField = styled(TextField)({
[`& .${inputLabelClasses.root}`]: {
const StyledInputLabel = styled(InputLabel)({
color: GREY,
[`&.${inputClasses.focused}`]: {
backgroundColor: BLUE,
[`&.${inputLabelClasses.focused}`]: {
backgroundColor: GREY,
borderRadius: BORDER_RADIUS,
color: TEXT,
color: BLACK,
padding: '.1em .6em',
},
},
});
[`& .${outlinedInputClasses.root}`]: {
const StyledOutlinedInput = styled(OutlinedInput)({
color: GREY,
[`& .${outlinedInputClasses.notchedOutline}`]: {
@ -62,17 +65,22 @@ const StyledTextField = styled(TextField)({
},
},
[`&.${inputClasses.focused}`]: {
[`&.${outlinedInputClasses.focused}`]: {
color: TEXT,
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: BLUE,
borderColor: GREY,
'& legend': {
paddingRight: '1.2em',
},
},
},
});
const StyledSelect = styled(Select)({
[`& .${selectClasses.icon}`]: {
color: GREY,
},
});
@ -93,27 +101,43 @@ const FileInfo = (
onChange,
}: FileInfoProps = FILE_INFO_DEFAULT_PROPS as FileInfoProps,
): JSX.Element => {
const idExtension = uuidv4();
const fileNameElementId = `file-name-${idExtension}`;
const fileNameElementLabel = 'File name';
const fileTypeElementId = `file-type-${idExtension}`;
const fileTypeElementLabel = 'File type';
return (
<FormGroup sx={{ '> :not(:first-child)': { marginTop: '1em' } }}>
<FormControl>
<StyledTextField
<StyledInputLabel htmlFor={fileNameElementId} variant="outlined">
{fileNameElementLabel}
</StyledInputLabel>
<StyledOutlinedInput
defaultValue={fileName}
disabled={isReadonly}
id="file-name"
label="File name"
id={fileNameElementId}
label={fileNameElementLabel}
onChange={({ target: { value } }) =>
onChange?.call(null, { fileName: value })
}
/>
</FormControl>
{fileType && (
<Select
<FormControl>
<StyledInputLabel htmlFor={fileTypeElementId} variant="outlined">
{fileTypeElementLabel}
</StyledInputLabel>
<StyledSelect
defaultValue={fileType}
disabled={isReadonly}
id="file-type"
label="File type"
id={fileTypeElementId}
input={<StyledOutlinedInput label={fileTypeElementLabel} />}
onChange={({ target: { value } }) =>
onChange?.call(null, { fileType: value as FileType })
}
sx={{ color: TEXT }}
>
{UPLOAD_FILE_TYPES_ARRAY.map(
([fileTypeKey, [, fileTypeDisplayString]]) => {
@ -124,7 +148,8 @@ const FileInfo = (
);
},
)}
</Select>
</StyledSelect>
</FormControl>
)}
{fileLocations.map(
(
@ -154,7 +179,7 @@ const FileInfo = (
/>
),
)}
</FormControl>
</FormGroup>
);
};

29
striker-ui/package-lock.json generated
Unescape View File

@ -26,7 +26,8 @@
"pretty-bytes": "^5.6.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"swr": "^0.5.6"
"swr": "^0.5.6",
"uuid": "^8.3.2"
},
"devDependencies": {
"@commitlint/cli": "^12.1.4",
@ -34,6 +35,7 @@
"@types/node": "^15.12.2",
"@types/novnc-core": "^0.1.3",
"@types/react": "^17.0.11",
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^4.27.0",
"@typescript-eslint/parser": "^4.27.0",
"eslint": "^7.28.0",
@ -1619,6 +1621,12 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/uuid": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
"dev": true
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "4.33.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
@ -6270,6 +6278,14 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
},
"node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/v8-compile-cache": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@ -7527,6 +7543,12 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/uuid": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
"dev": true
},
"@typescript-eslint/eslint-plugin": {
"version": "4.33.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
@ -10960,6 +10982,11 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
},
"uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
},
"v8-compile-cache": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

4
striker-ui/package.json
Unescape View File

@ -30,7 +30,8 @@
"pretty-bytes": "^5.6.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"swr": "^0.5.6"
"swr": "^0.5.6",
"uuid": "^8.3.2"
},
"devDependencies": {
"@commitlint/cli": "^12.1.4",
@ -38,6 +39,7 @@
"@types/node": "^15.12.2",
"@types/novnc-core": "^0.1.3",
"@types/react": "^17.0.11",
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^4.27.0",
"@typescript-eslint/parser": "^4.27.0",
"eslint": "^7.28.0",

Write Preview
Loading…
Cancel
Save