-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #388 from Smithsonian/develop
v0.9.8
- Loading branch information
Showing
88 changed files
with
1,971 additions
and
1,156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
191 changes: 191 additions & 0 deletions
191
client/src/pages/Ingestion/components/Metadata/Control/SubtitleControl.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| import React from 'react'; | ||
| import { SubtitleFields, eSubtitleOption } from '../../../../../store/metadata/metadata.types'; | ||
| import { Box, makeStyles, Typography, Table, TableBody, TableCell, TableContainer, TableRow, fade } from '@material-ui/core'; | ||
| import { RiCheckboxBlankCircleLine, RiRecordCircleFill } from 'react-icons/ri'; | ||
| import { grey } from '@material-ui/core/colors'; | ||
| import { palette } from '../../../../../theme'; | ||
| import { DebounceInput } from 'react-debounce-input'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| interface SubtitleControlProps { | ||
| subtitles: SubtitleFields; | ||
| objectName: string; | ||
| onSelectSubtitle: (id: number) => void; | ||
| onUpdateCustomSubtitle: (event: React.ChangeEvent<HTMLInputElement>, id: number) => void; | ||
| hasPrimaryTheme: boolean | ||
| } | ||
|
|
||
| const useStyles = makeStyles(({ palette, typography }) => ({ | ||
| container: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| backgroundColor: (hasPrimaryTheme) => hasPrimaryTheme ? palette.primary.light : palette.secondary.light, | ||
| width: 'fit-content', | ||
| minWidth: 300 | ||
| }, | ||
| selected: { | ||
| cursor: 'pointer', | ||
| }, | ||
| cell: { | ||
| border: 'none', | ||
| padding: '1px 10px', | ||
| maxHeight: 22 | ||
| }, | ||
| labelCell: { | ||
| width: 30 | ||
| }, | ||
| optionContainer: { | ||
| display: 'flex', | ||
| padding: '0 16px 0 0', | ||
| alignItems: 'center' | ||
| }, | ||
| input: { | ||
| height: 20, | ||
| border: `1px solid ${fade(palette.primary.contrastText, 0.4)}`, | ||
| fontFamily: typography.fontFamily, | ||
| fontSize: '0.8rem', | ||
| padding: '0px 10px', | ||
| borderRadius: 5, | ||
| }, | ||
| text: { | ||
| fontSize: '0.8rem' | ||
| } | ||
| })); | ||
|
|
||
| function SubtitleControl(props: SubtitleControlProps): React.ReactElement { | ||
| const { objectName, subtitles, onUpdateCustomSubtitle, onSelectSubtitle, hasPrimaryTheme } = props; | ||
| const classes = useStyles(hasPrimaryTheme); | ||
| const selectedSubtitle = subtitles.find(subtitle => subtitle.selected === true)?.value; | ||
| const selectedSubtitlesName = selectedSubtitle ? `: ${selectedSubtitle}` : ''; | ||
| const sortedSubtitles: SubtitleFields = subtitles.sort((a, b) => a.subtitleOption - b.subtitleOption); | ||
|
|
||
|
|
||
| const renderSubtitleOptions = (subtitles: SubtitleFields): React.ReactElement => { | ||
| // console.log('subtitles', subtitles,'objectName', objectName); | ||
| // Case: forced | ||
| if (subtitles.some(option => option.subtitleOption === eSubtitleOption.eForced)) | ||
| return ( | ||
| <TableRow> | ||
| <TableCell className={clsx(classes.labelCell, classes.cell)}> | ||
| <Typography className={classes.text}>Name:</Typography> | ||
| </TableCell> | ||
| <TableCell className={classes.cell} style={{ height: 24 }}> | ||
| <Typography className={classes.text}>{`${objectName}${selectedSubtitlesName}`}</Typography> | ||
| </TableCell> | ||
| </TableRow> | ||
| ); | ||
|
|
||
| // Case: optional subtitle | ||
| if (objectName && subtitles.length === 1 && subtitles.find(option => option.subtitleOption === eSubtitleOption.eInput)) { | ||
| const { id, value } = subtitles[0]; | ||
| return ( | ||
| <> | ||
| <TableRow> | ||
| <TableCell className={clsx(classes.labelCell, classes.cell)}> | ||
| <Typography className={classes.text}>Name:</Typography> | ||
| </TableCell> | ||
| <TableCell className={classes.cell} style={{ height: 24 }}> | ||
| <Typography className={classes.text}>{`${objectName}${selectedSubtitlesName}`}</Typography> | ||
| </TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell className={clsx(classes.labelCell, classes.cell)}> | ||
| <Typography className={classes.text}>Subtitle:</Typography> | ||
| </TableCell> | ||
| <TableCell className={classes.cell} style={{ height: 24 }}> | ||
| <DebounceInput | ||
| onChange={(e) => onUpdateCustomSubtitle(e, id)} | ||
| element='input' | ||
| value={value} | ||
| className={classes.input} | ||
| debounceTimeout={400} | ||
| title={`subtitle-input-${value}`} | ||
| /> | ||
| </TableCell> | ||
| </TableRow> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| // Case: mandatory name input | ||
| if (subtitles.length === 1 && subtitles.find(option => option.subtitleOption === eSubtitleOption.eInput)) { | ||
| const { id, value } = subtitles[0]; | ||
| return ( | ||
| <TableRow> | ||
| <TableCell className={clsx(classes.labelCell, classes.cell)}> | ||
| <Typography className={classes.text}>Name:</Typography> | ||
| </TableCell> | ||
| <TableCell className={classes.cell} style={{ height: 24 }}> | ||
| <DebounceInput | ||
| onChange={(e) => onUpdateCustomSubtitle(e, id)} | ||
| element='input' | ||
| value={value} | ||
| className={classes.input} | ||
| debounceTimeout={400} | ||
| title={`subtitle-input-${value}`} | ||
| /> | ||
| </TableCell> | ||
| </TableRow> | ||
| ); | ||
| } | ||
|
|
||
| // Case: mixed | ||
| const options = ( | ||
| <> | ||
| <TableRow> | ||
| <TableCell className={clsx(classes.labelCell, classes.cell)}> | ||
| <Typography className={classes.text}>Name:</Typography> | ||
| </TableCell> | ||
| <TableCell className={classes.cell} style={{ height: 24 }}> | ||
| <Typography className={classes.text}>{`${objectName}${selectedSubtitlesName}`}</Typography> | ||
| </TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell className={clsx(classes.labelCell, classes.cell)}> | ||
| <Typography className={classes.text}>Subtitle:</Typography> | ||
| </TableCell> | ||
| <TableCell className={classes.cell}> | ||
| <div style={{ display: 'flex', height: 24 }}> | ||
| { | ||
| sortedSubtitles.map(({ selected, value, id, subtitleOption }, key) => ( | ||
| <div className={classes.optionContainer} key={key}> | ||
| {!selected && <RiCheckboxBlankCircleLine className={classes.selected} onClick={() => onSelectSubtitle(id)} size={18} color={grey[400]} />} | ||
| {selected && <RiRecordCircleFill className={classes.selected} onClick={() => onSelectSubtitle(id)} size={18} color={palette.primary.main} />} | ||
| {subtitleOption === eSubtitleOption.eNone && <Typography className={classes.text}>None</Typography>} | ||
| {subtitleOption === eSubtitleOption.eInherit && <Typography className={classes.text}>{value.length ? value : 'None'}</Typography>} | ||
| {subtitleOption === eSubtitleOption.eInput && ( | ||
| <DebounceInput | ||
| onChange={(e) => onUpdateCustomSubtitle(e, id)} | ||
| element='input' | ||
| value={value} | ||
| className={classes.input} | ||
| debounceTimeout={400} | ||
| title={`subtitle-input-${value}`} | ||
| /> | ||
| )} | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| </TableCell> | ||
| </TableRow> | ||
| </> | ||
| ); | ||
|
|
||
| return <React.Fragment>{options}</React.Fragment>; | ||
| }; | ||
|
|
||
| return ( | ||
| <Box className={classes.container}> | ||
| <TableContainer> | ||
| <Table> | ||
| <TableBody> | ||
| {renderSubtitleOptions(subtitles)} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| export default SubtitleControl; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.