Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 09:41:31 +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

14
src/shared/Checkbox.js
View File

@ -1,16 +1,20 @@
import React from 'react';
const Checkbox = ({ checked, onChange }) => {
const Checkbox = ({ checked, onChange, icon = 'check', size = '2rem' }) => {
return (
<div className="bg-white border-2 rounded border-gray-400 hover:border-gray-500 w-8 h-8 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer">
<div
className="bg-white border-2 rounded border-gray-400 hover:border-gray-500 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer"
style={{ width: size, height: size }}
>
<input
type="checkbox"
className="w-8 h-8 opacity-0 absolute cursor-pointer"
style={{ width: size, height: size }}
className="opacity-0 absolute cursor-pointer"
checked={checked}
onChange={e => onChange(e.target.checked)}
/>
<i className="material-icons fill-current hidden text-lg font-bold text-gray-800 cursor-pointer">
check
<i className="material-icons fill-current hidden text-sm font-bold text-gray-800 cursor-pointer">
{icon}
</i>
</div>
);

68
src/shared/ItemActions.js Normal file
View File

@ -0,0 +1,68 @@
import React from 'react';
import Checkbox from './Checkbox';
const ItemActions = ({
item,
onChange,
type,
identifier,
dispatch,
deleteItem,
first,
moveItemUp,
last,
moveItemDown,
}) => {
return (
<div className="flex justify-between">
<div className="flex items-center">
<Checkbox
size="2.25rem"
checked={item.enable}
onChange={v => {
onChange(`${identifier}.enable`, v);
}}
/>
<button
type="button"
onClick={() => deleteItem(dispatch, type, item)}
className="ml-2 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>
<div className="flex">
{!first && (
<button
type="button"
onClick={() => moveItemUp(dispatch, type, 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, type, 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>
);
};
export default ItemActions;