@fortawesome/free-solid-svg-icons#faSortNumericDown TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faSortNumericDown.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ItemPage.tsx From apps with MIT License | 4 votes |
|
function MaterialListingTable(props: {
region: Region;
usageData: MaterialUsageData[];
blacklistedColumnIndexes?: number[];
}) {
let { region, usageData, blacklistedColumnIndexes } = props;
blacklistedColumnIndexes = blacklistedColumnIndexes ?? [];
const NO_SORT = -1;
enum SortingOrder {
ASC = 1,
DESC = -1,
}
let [currentSortingKey, setSortingKey] = React.useState<number>(NO_SORT);
let [currentSortingOrder, setSortingOrder] = React.useState<SortingOrder>(SortingOrder.DESC);
let usageDataColumnsWithServantColumn = [
{
extractor: (usage: MaterialUsageColumn) => (usage as MaterialUsageData).collectionNo,
title: "Servant",
colspan: 2,
},
...usageDataColumns,
];
let header = usageDataColumnsWithServantColumn
.map((field, index) => {
if (index === currentSortingKey)
return (
<Button
variant=""
style={{ outline: "none" }}
onClick={() =>
setSortingOrder(
currentSortingOrder === SortingOrder.ASC ? SortingOrder.DESC : SortingOrder.ASC
)
}
>
{field.title}
{currentSortingKey !== NO_SORT ? (
currentSortingOrder === SortingOrder.ASC ? (
<>
<FontAwesomeIcon icon={faSortNumericDown} />
</>
) : (
<>
<FontAwesomeIcon icon={faSortNumericDownAlt} />
</>
)
) : null}
</Button>
);
return (
<Button
variant=""
style={{ outline: "none" }}
onClick={() => {
setSortingOrder(SortingOrder.DESC);
setSortingKey(index);
}}
>
{field.title}
</Button>
);
})
.map((element, index) => (
<th key={index} colSpan={usageDataColumnsWithServantColumn[index].colspan}>
{element}
</th>
))
// we concated above, shift everything by one
.filter((_, index) => !blacklistedColumnIndexes!.includes(index - 1));
if (currentSortingKey !== NO_SORT)
usageData = usageData.slice().sort((a, b) => {
let sortingInformation = usageDataColumnsWithServantColumn[currentSortingKey];
let [value1, value2] = [sortingInformation.extractor(a), sortingInformation.extractor(b)];
return (value1 - value2) * currentSortingOrder;
});
return (
<Table hover responsive className={"materialUsage"}>
<thead>
<tr>{header}</tr>
{usageData
.filter((servantUsage) => getTotalUsage(servantUsage, blacklistedColumnIndexes) > 0)
.map((servantUsage) => {
const route = `/${region}/servant/${servantUsage.collectionNo}/materials`;
return (
<tr key={servantUsage.collectionNo}>
<td className="faceIcon">
<Link to={route}>
<FaceIcon location={servantUsage.face} height={50} />
</Link>
</td>
<td className="materialOwner">
<Link to={route}>{servantUsage.name}</Link>
</td>
{usageDataColumns
.map((field) => (
<td key={field.title}>
{field?.displayExtractor?.(servantUsage) ??
field?.extractor(servantUsage, blacklistedColumnIndexes)}
</td>
))
.filter((_, index) => !blacklistedColumnIndexes!.includes(index))}
</tr>
);
})}
</thead>
</Table>
);
}
Example #2
| Source File: WarsPage.tsx From apps with MIT License | 4 votes |
|
render() {
if (this.state.error) return <ErrorStatus error={this.state.error} />;
if (this.state.loading) return <Loading />;
const currentSortingOrder = this.state.sort;
const wars = this.wars().sort((w1, w2) => (currentSortingOrder ? -1 : 1) * (w1.id - w2.id)),
results = wars.slice(this.state.perPage * this.state.page, this.state.perPage * (this.state.page + 1));
const pageNavigator = this.paginator(wars.length);
return (
<div id="wars" className="listing-page">
<Row>
<Col md={12} lg={4} id="item-type">
<ButtonGroup>
{[WarType.MAIN, WarType.CHALDEA_GATE, WarType.OTHER].map((warType) => {
return (
<Button
variant={
this.state.activeWarTypeFilters.includes(warType)
? "success"
: "outline-dark"
}
key={warType}
onClick={(_) => {
this.toggleWarTypeFilter(warType);
this.setState({ page: 0 });
}}
>
{warType.toString()}
</Button>
);
})}
</ButtonGroup>
</Col>
<Col md={12} lg={3} id="item-search">
<Form inline>
<Form.Control
placeholder={"Search"}
value={this.state.search ?? ""}
onChange={(ev: ChangeEvent) => {
this.setState({
search: ev.target.value,
page: 0,
});
}}
/>
</Form>
</Col>
</Row>
<Row>
<Col sm={12}>{pageNavigator}</Col>
</Row>
<hr />
<Table striped bordered hover responsive>
<thead>
<tr>
<th className="col-center">
<Button
variant=""
style={{ outline: "none" }}
onClick={() =>
this.setState({
sort: currentSortingOrder ? SortingOrder.ASC : SortingOrder.DESC,
})
}
>
{currentSortingOrder ? (
<FontAwesomeIcon icon={faSortNumericDownAlt} />
) : (
<FontAwesomeIcon icon={faSortNumericDown} />
)}
</Button>
</th>
<th>War Name</th>
<th>Event</th>
</tr>
</thead>
<tbody>
{results.map((war) => {
const route = `/${this.props.region}/war/${war.id}`;
return (
<tr key={war.id}>
<td className="col-center">
<Link to={route}>{war.id}</Link>
</td>
<td>
<Link to={route}>{war.longName}</Link>
</td>
<td>
{war.eventId !== 0 ? (
<Link to={`/${this.props.region}/event/${war.eventId}`}>
{war.eventName !== "" ? war.eventName : `Event ${war.eventId}`}
</Link>
) : (
""
)}
</td>
</tr>
);
})}
</tbody>
</Table>
{pageNavigator}
</div>
);
}
