Proyectos de Subversion LeadersLinked - Backend

Rev

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

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