React 16x - قسمت 13 - طراحی یک گرید - بخش 3 - مرتب سازی اطلاعات
نویسنده: وحید نصیری
تاریخ: ۱۳۹۸/۰۹/۰۹ ۸:۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
class MoviesTable extends Component {
render() {
const { movies, onDelete, onLike } = this.props; import Like from "./common/like";
// ...
<Like liked={movie.liked} onClick={() => onLike(movie)} /> <button
onClick={() => onDelete(movie)}
className="btn btn-danger btn-sm"
>
Delete
</button> import MoviesTable from "./moviesTable";
<MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
/> return (
<div className="row">
<div className="col-3">
<ListGroup
items={this.state.genres}
onItemSelect={this.handleGenreSelect}
selectedItem={this.state.selectedGenre}
/>
</div>
<div className="col">
<p>Showing {totalCount} movies in the database.</p>
<MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
/>
<Pagination
itemsCount={totalCount}
pageSize={this.state.pageSize}
onPageChange={this.handlePageChange}
currentPage={this.state.currentPage}
/>
</div>
</div>
); class MoviesTable extends Component {
render() {
const { movies, onDelete, onLike, onSort } = this.props; return (
<table className="table">
<thead>
<tr>
<th style={{ cursor: "pointer" }} onClick={() => onSort("title")}>Title</th>
<th style={{ cursor: "pointer" }} onClick={() => onSort("genre.name")}>Genre</th>
<th style={{ cursor: "pointer" }} onClick={() => onSort("numberInStock")}>Stock</th>
<th style={{ cursor: "pointer" }} onClick={() => onSort("dailyRentalRate")}>Rate</th>
<th />
<th />
</tr>
</thead> <MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
onSort={this.handleSort}
/> handleSort = column => {
console.log("handleSort", column);
}; handleSort = path => {
console.log("handleSort", path);
this.setState({ sortColumn: { path, order: "asc" } });
}; class Movies extends Component {
state = {
// ...
sortColumn: { path:"title", order: "asc" }
}; getPagedData() {
const {
pageSize,
currentPage,
selectedGenre,
movies: allMovies,
sortColumn
} = this.state;
let filteredMovies =
selectedGenre && selectedGenre._id
? allMovies.filter(m => m.genre._id === selectedGenre._id)
: allMovies;
filteredMovies = filteredMovies.sort((movie1, movie2) =>
movie1[sortColumn.path] > movie2[sortColumn.path]
? sortColumn.order === "asc"
? 1
: -1
: movie2[sortColumn.path] > movie1[sortColumn.path]
? sortColumn.order === "asc"
? -1
: 1
: 0
);
const first = (currentPage - 1) * pageSize;
const last = first + pageSize;
const pagedMovies = filteredMovies.slice(first, last);
return { totalCount: filteredMovies.length, data: pagedMovies };
} handleSort = path => {
console.log("handleSort", path);
const sortColumn = { ...this.state.sortColumn };
if (sortColumn.path === path) {
sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
} else {
sortColumn.path = path;
sortColumn.order = "asc";
}
this.setState({ sortColumn });
}; class MoviesTable extends Component {
raiseSort = path => {
console.log("raiseSort", path);
const sortColumn = { ...this.props.sortColumn };
if (sortColumn.path === path) {
sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
} else {
sortColumn.path = path;
sortColumn.order = "asc";
}
this.props.onSort(sortColumn);
}; <MoviesTable
movies={movies}
onDelete={this.handleDelete}
onLike={this.handleLike}
onSort={this.handleSort}
sortColumn={this.state.sortColumn}
/> return (
<table className="table">
<thead>
<tr>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("title")}>Title</th>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("genre.name")}>Genre</th>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("numberInStock")}>Stock</th>
<th style={{ cursor: "pointer" }} onClick={() => this.raiseSort("dailyRentalRate")}>Rate</th>
<th />
<th />
</tr>
</thead> const sortBy = ({ order = 'asc', path }) => order === 'asc'
? (a, b) => ((a, b) => a > b || -(a < b))(getValue(a, path), getValue(b, path))
: (a, b) => ((a, b) => b > a || -(b < a))(getValue(a, path), getValue(b, path)),
getValue = (object, keys) => keys.split('.').reduce((o, k) => o[k], object);
filteredMovies = filteredMovies.sort(sortBy({path:sortColumn.path,order:sortColumn.order}));