-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update add item modal, add links, update edit form
- Loading branch information
Showing
23 changed files
with
862 additions
and
275 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { makeStyles } from '@material-ui/core'; | ||
| import { Map } from 'immutable'; | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
|
|
||
| const useStyles = makeStyles(() => ({ | ||
| iframe: { | ||
| width: '100%', | ||
| height: '100%', | ||
| border: 'none', | ||
| }, | ||
| })); | ||
|
|
||
| const LinkItem = ({ item }) => { | ||
| const classes = useStyles(); | ||
|
|
||
| // if available, display specific player | ||
| const html = item.getIn(['extra', 'embeddedLinkItem', 'html']); | ||
| if (html) { | ||
| // eslint-disable-next-line react/no-danger | ||
| return <div dangerouslySetInnerHTML={{ __html: html }} />; | ||
| } | ||
|
|
||
| // default case is an iframe with given link | ||
| const url = item.getIn(['extra', 'embeddedLinkItem', 'url']); | ||
| const name = item.get('name'); | ||
| return <iframe className={classes.iframe} title={name} src={url} />; | ||
| }; | ||
|
|
||
| LinkItem.propTypes = { | ||
| item: PropTypes.instanceOf(Map).isRequired, | ||
| }; | ||
|
|
||
| export default LinkItem; |
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,72 @@ | ||
| import React from 'react'; | ||
| import { makeStyles, TextField } from '@material-ui/core'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { | ||
| ITEM_FORM_DESCRIPTION_INPUT_ID, | ||
| ITEM_FORM_NAME_INPUT_ID, | ||
| } from '../../../config/selectors'; | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| shortInputField: { | ||
| width: '50%', | ||
| }, | ||
| addedMargin: { | ||
| marginTop: theme.spacing(2), | ||
| }, | ||
| })); | ||
|
|
||
| const BaseForm = ({ onChange, item }) => { | ||
| const { t } = useTranslation(); | ||
| const classes = useStyles(); | ||
|
|
||
| const handleNameInput = (event) => { | ||
| onChange({ ...item, name: event.target.value }); | ||
| // eslint-disable-next-line no-console | ||
| console.log(event.target.value); | ||
| }; | ||
|
|
||
| const handleDescriptionInput = (event) => { | ||
| onChange({ ...item, description: event.target.value }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <TextField | ||
| autoFocus | ||
| margin="dense" | ||
| id={ITEM_FORM_NAME_INPUT_ID} | ||
| label={t('Name')} | ||
| value={item?.name} | ||
| onChange={handleNameInput} | ||
| className={classes.shortInputField} | ||
| /> | ||
| <TextField | ||
| id={ITEM_FORM_DESCRIPTION_INPUT_ID} | ||
| margin="dense" | ||
| label={t('Description')} | ||
| value={item?.description} | ||
| onChange={handleDescriptionInput} | ||
| multiline | ||
| rows={4} | ||
| rowsMax={4} | ||
| fullWidth | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| BaseForm.propTypes = { | ||
| onChange: PropTypes.string.isRequired, | ||
| item: PropTypes.shape({ | ||
| name: PropTypes.string, | ||
| description: PropTypes.string, | ||
| extra: PropTypes.shape({ | ||
| embeddedLinkItem: PropTypes.shape({ | ||
| url: PropTypes.string, | ||
| }), | ||
| }), | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| export default BaseForm; |
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,51 @@ | ||
| import React from 'react'; | ||
| import { TextField } from '@material-ui/core'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { isValidURL } from '../../../utils/item'; | ||
| import BaseForm from './BaseItemForm'; | ||
|
|
||
| function LinkForm({ onChange, item }) { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const handleLinkInput = (event) => { | ||
| // todo: check url validity | ||
| onChange({ | ||
| ...item, | ||
| extra: { embeddedLinkItem: { url: event.target.value } }, | ||
| }); | ||
| }; | ||
|
|
||
| const { url } = item.extra?.embeddedLinkItem || {}; | ||
| const isLinkInvalid = url?.length && !isValidURL(url); | ||
|
|
||
| return ( | ||
| <> | ||
| <BaseForm onChange={onChange} item={item} /> | ||
| <TextField | ||
| error={isLinkInvalid} | ||
| autoFocus | ||
| margin="dense" | ||
| label={t('Link')} | ||
| value={url} | ||
| onChange={handleLinkInput} | ||
| helperText={Boolean(isLinkInvalid) && t('This link is not valid')} | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| LinkForm.propTypes = { | ||
| onChange: PropTypes.string.isRequired, | ||
| item: PropTypes.shape({ | ||
| name: PropTypes.string, | ||
| description: PropTypes.string, | ||
| extra: PropTypes.shape({ | ||
| embeddedLinkItem: PropTypes.shape({ | ||
| url: PropTypes.string, | ||
| }), | ||
| }), | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| export default LinkForm; |
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,55 @@ | ||
| import React from 'react'; | ||
| import { useTranslation, withTranslation } from 'react-i18next'; | ||
| import PropTypes from 'prop-types'; | ||
| import TextField from '@material-ui/core/TextField'; | ||
| import { ITEM_TYPES } from '../../../config/constants'; | ||
| import { ITEM_FORM_IMAGE_INPUT_ID } from '../../../config/selectors'; | ||
| import BaseItemForm from './BaseItemForm'; | ||
|
|
||
| const ItemForm = ({ onChange, item }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const handleImageUrlInput = (event) => { | ||
| onChange({ ...item, extra: { image: event.target.value } }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <BaseItemForm onChange={onChange} item={item} /> | ||
| {ITEM_TYPES.FILE !== item?.type && ( | ||
| <TextField | ||
| id={ITEM_FORM_IMAGE_INPUT_ID} | ||
| margin="dense" | ||
| label={t('Image (URL)')} | ||
| value={item?.extra?.image} | ||
| onChange={handleImageUrlInput} | ||
| fullWidth | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| ItemForm.propTypes = { | ||
| onChange: PropTypes.func.isRequired, | ||
| classes: PropTypes.shape({ | ||
| shortInputField: PropTypes.string.isRequired, | ||
| dialogContent: PropTypes.string.isRequired, | ||
| addedMargin: PropTypes.string.isRequired, | ||
| }).isRequired, | ||
| item: PropTypes.shape({ | ||
| name: PropTypes.string, | ||
| description: PropTypes.string, | ||
| type: PropTypes.string, | ||
| extra: PropTypes.shape({ | ||
| image: PropTypes.string, | ||
| }), | ||
| }), | ||
| }; | ||
|
|
||
| ItemForm.defaultProps = { | ||
| item: {}, | ||
| }; | ||
|
|
||
| const TranslatedComponent = withTranslation()(ItemForm); | ||
| export default TranslatedComponent; |
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.