Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15312 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15312 Rev 15314
Línea 1... Línea 1...
1 
/* eslint-disable no-mixed-spaces-and-tabs */
 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import React from 'react'
 2 
import React from 'react'
3 
import { useState } from 'react'
 3 
import { useEffect, useState, useCallback } from 'react'
Línea -... Línea 4...
- 
 
 4 
 
- 
 
 5 
const sortData = ({ tableData, sortKey, reverse }) => {
- 
 
 6 
	let sortedData
- 
 
 7 
 
- 
 
 8 
	if (!sortKey) return tableData
- 
 
 9 
 
- 
 
 10 
	sortedData = tableData.sort((a, b) => {
- 
 
 11 
		if (typeof a[sortKey] === 'string') {
- 
 
 12 
			return a[sortKey].toLowerCase() < b[sortKey].toLowerCase() && -1
- 
 
 13 
		}
- 
 
 14 
		return a[sortKey] - b[sortKey]
- 
 
 15 
	})
- 
 
 16 
 
- 
 
 17 
	if (reverse) return sortedData.reverse()
- 
 
 18 
 
- 
 
 19 
	return sortedData
- 
 
 20 
}
4 
 
 21 
 
5 
const SortButton = ({ onClick }) => {
 22 
const SortButton = ({ reverse, columnKey, sortKey, onClick }) => {
6 
	return (
 23 
	return (
- 
 
 24 
		<button onClick={onClick} className="btn p-0">
- 
 
 25 
			{
7 
		<button onClick={onClick} className="btn p-0">
 26 
				(sortKey === columnKey) && reverse
- 
 
 27 
					? <i className='fa fa-angle-down ml-2' />
- 
 
 28 
					: <i className='fa fa-angle-up ml-2' />
8 
			<i className='fa fa-angle-down ml-2' />
 29 
			}
9 
		</button>
 30 
		</button>
10 
	)
 31 
	)
Línea 11... Línea 32...
11 
}
 32 
}
Línea 12... Línea 33...
12 
 
 33 
 
- 
 
 34 
const Table = ({ data = [], headers, setData, children }) => {
- 
 
 35 
 
- 
 
 36 
	const [sortKey, setSortKey] = useState('name')
- 
 
 37 
	const [reverse, setReverse] = useState(false)
- 
 
 38 
 
- 
 
 39 
	const sortedData = useCallback(
- 
 
 40 
		() => sortData({ tableData: data, sortKey, reverse: reverse }),
- 
 
 41 
		[data, sortKey, reverse]
- 
 
 42 
	)
- 
 
 43 
 
- 
 
 44 
	const changeSort = (key) => {
- 
 
 45 
		setReverse(!reverse)
- 
 
 46 
		setSortKey(key)
- 
 
 47 
	}
- 
 
 48 
 
Línea 13... Línea 49...
13 
const Table = ({ headers, children }) => {
 49 
	useEffect(() => {
14 
 
 50 
		setData(sortedData())
15 
	const [sortKey, setSortKey] = useState('name')
 51 
	}, [sortKey, reverse])
16 
 
 52 
 
Línea 22... Línea 58...
22 
						<th key={row.key} className="text-vertical-middle">
 58 
						<th key={row.key} className="text-vertical-middle">
23 
							{row.label}
 59 
							{row.label}
24 
							{row.isSorteable &&
 60 
							{row.isSorteable &&
25 
								<SortButton
 61 
								<SortButton
26 
									columnKey={row.key}
 62 
									columnKey={row.key}
27 
									onClick={() => setSortKey(row.key)}
 63 
									onClick={() => changeSort(row.key)}
28 
									sortKey={sortKey}
 64 
									sortKey={sortKey}
- 
 
 65 
									reverse={reverse}
29 
								/>
 66 
								/>
30 
							}
 67 
							}
31 
						</th>
 68 
						</th>
32 
					)}
 69 
					)}
33 
				</tr>
 70 
				</tr>