Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-15 01:01:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

implement functionality to hide/show individual items

Browse Source
This commit is contained in:
Amruth Pillai
2020-03-28 22:19:11 +05:30
parent c287d9f289
commit 8a032845cf
16 changed files with 298 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/LeftSidebar/tabs/Extras.js
View File

@ -6,6 +6,7 @@ import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
import ItemActions from '../../../shared/ItemActions';
const ExtrasTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -52,6 +53,7 @@ const AddItem = ({ dispatch }) => {
const [isOpen, setOpen] = useState(false);
const [item, setItem] = useState({
id: uuidv4(),
enable: true,
key: '',
value: '',
});
@ -65,6 +67,7 @@ const AddItem = ({ dispatch }) => {
setItem({
id: uuidv4(),
enable: true,
key: '',
value: '',
});
@ -145,44 +148,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
onChange={v => onChange(`${identifier}.value`, v)}
/>
<div className="mt-6 flex justify-between">
<button
type="button"
onClick={() => deleteItem(dispatch, 'extras', item)}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex items-center">
<i className="material-icons mr-2 font-bold text-base">delete</i>
<span className="text-sm">Delete</span>
</div>
</button>
<div className="flex">
{!first && (
<button
type="button"
onClick={() => moveItemUp(dispatch, 'extras', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded mr-2"
>
<div className="flex items-center">
<i className="material-icons font-bold text-base">arrow_upward</i>
</div>
</button>
)}
{!last && (
<button
type="button"
onClick={() => moveItemDown(dispatch, 'extras', item)}
className="bg-gray-600 hover:bg-gray-700 text-white text-sm font-medium py-2 px-4 rounded"
>
<div className="flex items-center">
<i className="material-icons font-bold text-base">arrow_downward</i>
</div>
</button>
)}
</div>
</div>
<ItemActions
item={item}
onChange={onChange}
type="extras"
identifier={identifier}
dispatch={dispatch}
deleteItem={deleteItem}
first={first}
moveItemUp={moveItemUp}
last={last}
moveItemDown={moveItemDown}
/>
</div>
</div>
);