mirror of
https://github.com/pawelmalak/flame.git
synced 2025-07-25 22:09:36 +02:00
Added support for custom SVG icons
This commit is contained in:
unknown
parent
a01661d0d5
commit
1699146f79
14 changed files with 356 additions and 270 deletions
|
|
@ -1,11 +1,31 @@
|
|||
import { useState, SyntheticEvent, Fragment, ChangeEvent, useEffect } from 'react';
|
||||
import {
|
||||
useState,
|
||||
SyntheticEvent,
|
||||
Fragment,
|
||||
ChangeEvent,
|
||||
useEffect
|
||||
} from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
|
||||
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
|
||||
import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
|
||||
import {
|
||||
Bookmark,
|
||||
Category,
|
||||
GlobalState,
|
||||
NewBookmark,
|
||||
NewCategory,
|
||||
NewNotification
|
||||
} from '../../../interfaces';
|
||||
import { ContentType } from '../Bookmarks';
|
||||
import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, createNotification } from '../../../store/actions';
|
||||
import {
|
||||
getCategories,
|
||||
addCategory,
|
||||
addBookmark,
|
||||
updateCategory,
|
||||
updateBookmark,
|
||||
createNotification
|
||||
} from '../../../store/actions';
|
||||
import Button from '../../UI/Buttons/Button/Button';
|
||||
import classes from './BookmarkForm.module.css';
|
||||
|
||||
|
|
@ -22,8 +42,8 @@ interface ComponentProps {
|
|||
id: number,
|
||||
formData: NewBookmark | FormData,
|
||||
category: {
|
||||
prev: number,
|
||||
curr: number
|
||||
prev: number;
|
||||
curr: number;
|
||||
}
|
||||
) => void;
|
||||
createNotification: (notification: NewNotification) => void;
|
||||
|
|
@ -34,14 +54,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
const [customIcon, setCustomIcon] = useState<File | null>(null);
|
||||
const [categoryName, setCategoryName] = useState<NewCategory>({
|
||||
name: ''
|
||||
})
|
||||
});
|
||||
|
||||
const [formData, setFormData] = useState<NewBookmark>({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
|
||||
// Load category data if provided for editing
|
||||
useEffect(() => {
|
||||
|
|
@ -50,7 +70,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
} else {
|
||||
setCategoryName({ name: '' });
|
||||
}
|
||||
}, [props.category])
|
||||
}, [props.category]);
|
||||
|
||||
// Load bookmark data if provided for editing
|
||||
useEffect(() => {
|
||||
|
|
@ -60,16 +80,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
url: props.bookmark.url,
|
||||
categoryId: props.bookmark.categoryId,
|
||||
icon: props.bookmark.icon
|
||||
})
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
}
|
||||
}, [props.bookmark])
|
||||
}, [props.bookmark]);
|
||||
|
||||
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
|
||||
e.preventDefault();
|
||||
|
|
@ -84,7 +104,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
data.append('categoryId', `${formData.categoryId}`);
|
||||
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
if (!props.category && !props.bookmark) {
|
||||
// Add new
|
||||
|
|
@ -98,7 +118,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
props.createNotification({
|
||||
title: 'Error',
|
||||
message: 'Please select category'
|
||||
})
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -108,15 +128,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
} else {
|
||||
props.addBookmark(formData);
|
||||
}
|
||||
|
||||
|
||||
setFormData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: formData.categoryId,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
|
||||
setCustomIcon(null)
|
||||
setCustomIcon(null);
|
||||
}
|
||||
} else {
|
||||
// Update
|
||||
|
|
@ -128,23 +148,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
// Update bookmark
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
props.updateBookmark(
|
||||
props.bookmark.id,
|
||||
data,
|
||||
{
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
}
|
||||
)
|
||||
props.updateBookmark(props.bookmark.id, data, {
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
});
|
||||
} else {
|
||||
props.updateBookmark(
|
||||
props.bookmark.id,
|
||||
formData,
|
||||
{
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
}
|
||||
);
|
||||
props.updateBookmark(props.bookmark.id, formData, {
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
});
|
||||
}
|
||||
|
||||
setFormData({
|
||||
|
|
@ -152,36 +164,36 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
url: '',
|
||||
categoryId: -1,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
|
||||
setCustomIcon(null)
|
||||
setCustomIcon(null);
|
||||
}
|
||||
|
||||
props.modalHandler();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
|
||||
setFormData({
|
||||
...formData,
|
||||
categoryId: parseInt(e.target.value)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
if (e.target.files) {
|
||||
setCustomIcon(e.target.files[0]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let button = <Button>Submit</Button>
|
||||
let button = <Button>Submit</Button>;
|
||||
|
||||
if (!props.category && !props.bookmark) {
|
||||
if (props.contentType === ContentType.category) {
|
||||
|
|
@ -190,9 +202,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
button = <Button>Add new bookmark</Button>;
|
||||
}
|
||||
} else if (props.category) {
|
||||
button = <Button>Update category</Button>
|
||||
button = <Button>Update category</Button>;
|
||||
} else if (props.bookmark) {
|
||||
button = <Button>Update bookmark</Button>
|
||||
button = <Button>Update bookmark</Button>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -200,136 +212,133 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
modalHandler={props.modalHandler}
|
||||
formHandler={formSubmitHandler}
|
||||
>
|
||||
{props.contentType === ContentType.category
|
||||
? (
|
||||
<Fragment>
|
||||
{props.contentType === ContentType.category ? (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryName'>Category Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='categoryName'
|
||||
id='categoryName'
|
||||
placeholder='Social Media'
|
||||
required
|
||||
value={categoryName.name}
|
||||
onChange={e => setCategoryName({ name: e.target.value })}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='name'>Bookmark Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
id='name'
|
||||
placeholder='Reddit'
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='url'>Bookmark URL</label>
|
||||
<input
|
||||
type='text'
|
||||
name='url'
|
||||
id='url'
|
||||
placeholder='reddit.com'
|
||||
required
|
||||
value={formData.url}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
<a
|
||||
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{' '}
|
||||
Check supported URL formats
|
||||
</a>
|
||||
</span>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryId'>Bookmark Category</label>
|
||||
<select
|
||||
name='categoryId'
|
||||
id='categoryId'
|
||||
required
|
||||
onChange={e => selectChangeHandler(e)}
|
||||
value={formData.categoryId}
|
||||
>
|
||||
<option value={-1}>Select category</option>
|
||||
{props.categories.map((category: Category): JSX.Element => {
|
||||
return (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</InputGroup>
|
||||
{!useCustomIcon ? (
|
||||
// mdi
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryName'>Category Name</label>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='text'
|
||||
name='categoryName'
|
||||
id='categoryName'
|
||||
placeholder='Social Media'
|
||||
required
|
||||
value={categoryName.name}
|
||||
onChange={(e) => setCategoryName({ name: e.target.value })}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Fragment>
|
||||
)
|
||||
: (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='name'>Bookmark Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
id='name'
|
||||
placeholder='Reddit'
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='url'>Bookmark URL</label>
|
||||
<input
|
||||
type='text'
|
||||
name='url'
|
||||
id='url'
|
||||
placeholder='reddit.com'
|
||||
required
|
||||
value={formData.url}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
name='icon'
|
||||
id='icon'
|
||||
placeholder='book-open-outline'
|
||||
value={formData.icon}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
<a
|
||||
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{' '}Check supported URL formats
|
||||
Use icon name from MDI.
|
||||
<a href='https://materialdesignicons.com/' target='blank'>
|
||||
{' '}
|
||||
Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryId'>Bookmark Category</label>
|
||||
<select
|
||||
name='categoryId'
|
||||
id='categoryId'
|
||||
required
|
||||
onChange={(e) => selectChangeHandler(e)}
|
||||
value={formData.categoryId}
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}
|
||||
>
|
||||
<option value={-1}>Select category</option>
|
||||
{props.categories.map((category: Category): JSX.Element => {
|
||||
return (
|
||||
<option
|
||||
key={category.id}
|
||||
value={category.id}
|
||||
>
|
||||
{category.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>
|
||||
{!useCustomIcon
|
||||
// mdi
|
||||
? (<InputGroup>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='text'
|
||||
name='icon'
|
||||
id='icon'
|
||||
placeholder='book-open-outline'
|
||||
value={formData.icon}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
Use icon name from MDI.
|
||||
<a
|
||||
href='https://materialdesignicons.com/'
|
||||
target='blank'>
|
||||
{' '}Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>)
|
||||
// custom
|
||||
: (<InputGroup>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='file'
|
||||
name='icon'
|
||||
id='icon'
|
||||
onChange={(e) => fileChangeHandler(e)}
|
||||
accept='.jpg,.jpeg,.png'
|
||||
/>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>)
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
) : (
|
||||
// custom
|
||||
<InputGroup>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='file'
|
||||
name='icon'
|
||||
id='icon'
|
||||
onChange={e => fileChangeHandler(e)}
|
||||
accept='.jpg,.jpeg,.png,.svg'
|
||||
/>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}
|
||||
>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
{button}
|
||||
</ModalForm>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
categories: state.bookmark.categories
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const dispatchMap = {
|
||||
getCategories,
|
||||
|
|
@ -338,6 +347,6 @@ const dispatchMap = {
|
|||
updateCategory,
|
||||
updateBookmark,
|
||||
createNotification
|
||||
}
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, dispatchMap)(BookmarkForm);
|
||||
export default connect(mapStateToProps, dispatchMap)(BookmarkForm);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue