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. 137
      striker-ui/components/Files/FileInfo.tsx
  2. 29
      striker-ui/package-lock.json
  3. 4
      striker-ui/package.json

137
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,45 +41,49 @@ const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
onChange: undefined,
};
const StyledTextField = styled(TextField)({
[`& .${inputLabelClasses.root}`]: {
color: GREY,
const StyledInputLabel = styled(InputLabel)({
color: GREY,
[`&.${inputClasses.focused}`]: {
backgroundColor: BLUE,
borderRadius: BORDER_RADIUS,
color: TEXT,
padding: '.1em .6em',
},
[`&.${inputLabelClasses.focused}`]: {
backgroundColor: GREY,
borderRadius: BORDER_RADIUS,
color: BLACK,
padding: '.1em .6em',
},
});
[`& .${outlinedInputClasses.root}`]: {
color: GREY,
const StyledOutlinedInput = styled(OutlinedInput)({
color: GREY,
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: UNSELECTED,
},
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: UNSELECTED,
},
'&:hover': {
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: GREY,
},
'&:hover': {
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: GREY,
},
},
[`&.${inputClasses.focused}`]: {
color: TEXT,
[`&.${outlinedInputClasses.focused}`]: {
color: TEXT,
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: BLUE,
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: GREY,
'& legend': {
paddingRight: '1.2em',
},
'& legend': {
paddingRight: '1.2em',
},
},
},
});
const StyledSelect = styled(Select)({
[`& .${selectClasses.icon}`]: {
color: GREY,
},
});
const FileLocationActiveCheckbox = styled(Checkbox)({
color: RED,
@ -93,38 +101,55 @@ 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 (
<FormControl>
<StyledTextField
defaultValue={fileName}
disabled={isReadonly}
id="file-name"
label="File name"
onChange={({ target: { value } }) =>
onChange?.call(null, { fileName: value })
}
/>
{fileType && (
<Select
defaultValue={fileType}
<FormGroup sx={{ '> :not(:first-child)': { marginTop: '1em' } }}>
<FormControl>
<StyledInputLabel htmlFor={fileNameElementId} variant="outlined">
{fileNameElementLabel}
</StyledInputLabel>
<StyledOutlinedInput
defaultValue={fileName}
disabled={isReadonly}
id="file-type"
label="File type"
id={fileNameElementId}
label={fileNameElementLabel}
onChange={({ target: { value } }) =>
onChange?.call(null, { fileType: value as FileType })
onChange?.call(null, { fileName: value })
}
sx={{ color: TEXT }}
>
{UPLOAD_FILE_TYPES_ARRAY.map(
([fileTypeKey, [, fileTypeDisplayString]]) => {
return (
<MenuItem key={fileTypeKey} value={fileTypeKey}>
{fileTypeDisplayString}
</MenuItem>
);
},
)}
</Select>
/>
</FormControl>
{fileType && (
<FormControl>
<StyledInputLabel htmlFor={fileTypeElementId} variant="outlined">
{fileTypeElementLabel}
</StyledInputLabel>
<StyledSelect
defaultValue={fileType}
disabled={isReadonly}
id={fileTypeElementId}
input={<StyledOutlinedInput label={fileTypeElementLabel} />}
onChange={({ target: { value } }) =>
onChange?.call(null, { fileType: value as FileType })
}
>
{UPLOAD_FILE_TYPES_ARRAY.map(
([fileTypeKey, [, fileTypeDisplayString]]) => {
return (
<MenuItem key={fileTypeKey} value={fileTypeKey}>
{fileTypeDisplayString}
</MenuItem>
);
},
)}
</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