83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import Card from "@material-ui/core/Card";
|
|
import Table from "@material-ui/core/Table";
|
|
import TableBody from "@material-ui/core/TableBody";
|
|
import TableCell from "@material-ui/core/TableCell";
|
|
import TableHead from "@material-ui/core/TableHead";
|
|
import TableRow from "@material-ui/core/TableRow";
|
|
import { storiesOf } from "@storybook/react";
|
|
import React from "react";
|
|
|
|
import Decorator from "../../storybook/Decorator";
|
|
import TableCellHeader, {
|
|
TableCellHeaderArrowDirection
|
|
} from "./TableCellHeader";
|
|
|
|
type Field = "name" | "type";
|
|
interface StoryProps {
|
|
direction: TableCellHeaderArrowDirection;
|
|
field?: Field;
|
|
onHeaderClick?: (field: Field) => void;
|
|
}
|
|
|
|
const Story: React.FC<StoryProps> = ({
|
|
direction,
|
|
field = "name",
|
|
onHeaderClick = () => undefined
|
|
}) => (
|
|
<Card style={{ margin: "auto", width: 400 }}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCellHeader
|
|
arrowPosition="right"
|
|
direction={field === "name" ? direction : undefined}
|
|
onClick={() => onHeaderClick("name")}
|
|
>
|
|
Name
|
|
</TableCellHeader>
|
|
<TableCellHeader
|
|
direction={field === "type" ? direction : undefined}
|
|
onClick={() => onHeaderClick("type")}
|
|
>
|
|
Type
|
|
</TableCellHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell>Apple Juice</TableCell>
|
|
<TableCell>Juice</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
);
|
|
const InteractiveStory: React.FC = () => {
|
|
const [direction, setDirection] = React.useState<
|
|
TableCellHeaderArrowDirection
|
|
>("asc");
|
|
const [field, setField] = React.useState<Field>("name");
|
|
|
|
const handleHeaderClick = (selectedField: Field) => {
|
|
if (field === selectedField) {
|
|
setDirection(direction === "asc" ? "desc" : "asc");
|
|
} else {
|
|
setField(selectedField);
|
|
setDirection("asc");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Story
|
|
direction={direction}
|
|
field={field}
|
|
onHeaderClick={handleHeaderClick}
|
|
/>
|
|
);
|
|
};
|
|
|
|
storiesOf("Generics / Table header", module)
|
|
.addDecorator(Decorator)
|
|
.add("ascending", () => <Story direction="asc" />)
|
|
.add("descending", () => <Story direction="desc" />)
|
|
.add("interactive", () => <InteractiveStory />);
|