implement functionality to hide/show individual items

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

View File

@ -7,6 +7,7 @@ import TextArea from '../../../shared/TextArea';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
import ItemActions from '../../../shared/ItemActions';
const ReferencesTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -73,6 +74,7 @@ const AddItem = ({ dispatch }) => {
const [isOpen, setOpen] = useState(false);
const [item, setItem] = useState({
id: uuidv4(),
enable: true,
name: '',
position: '',
phone: '',
@ -89,6 +91,7 @@ const AddItem = ({ dispatch }) => {
setItem({
id: uuidv4(),
enable: true,
name: '',
position: '',
phone: '',
@ -222,44 +225,18 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
onChange={v => onChange(`${identifier}.description`, v)}
/>
<div className="flex justify-between">
<button
type="button"
onClick={() => deleteItem(dispatch, 'references', 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, 'references', 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, 'references', 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="references"
identifier={identifier}
dispatch={dispatch}
deleteItem={deleteItem}
first={first}
moveItemUp={moveItemUp}
last={last}
moveItemDown={moveItemDown}
/>
</div>
</div>
);