From 3827f8b8c18cc48bf7b6d327c431a449d5571e66 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 2 Sep 2019 11:02:56 +0200 Subject: [PATCH] Add table header with arrow --- .../TableCellHeader.stories.tsx | 83 ++++++ .../TableCellHeader/TableCellHeader.tsx | 70 +++++ src/components/TableCellHeader/index.ts | 2 + .../__snapshots__/Stories.test.ts.snap | 267 ++++++++++++++++++ 4 files changed, 422 insertions(+) create mode 100644 src/components/TableCellHeader/TableCellHeader.stories.tsx create mode 100644 src/components/TableCellHeader/TableCellHeader.tsx create mode 100644 src/components/TableCellHeader/index.ts diff --git a/src/components/TableCellHeader/TableCellHeader.stories.tsx b/src/components/TableCellHeader/TableCellHeader.stories.tsx new file mode 100644 index 000000000..f2d609822 --- /dev/null +++ b/src/components/TableCellHeader/TableCellHeader.stories.tsx @@ -0,0 +1,83 @@ +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 = ({ + direction, + field = "name", + onHeaderClick = () => undefined +}) => ( + + + + + onHeaderClick("name")} + > + Name + + onHeaderClick("type")} + > + Type + + + + + + Apple Juice + Juice + + +
+ +); +const InteractiveStory: React.FC = () => { + const [direction, setDirection] = React.useState< + TableCellHeaderArrowDirection + >("asc"); + const [field, setField] = React.useState("name"); + + const handleHeaderClick = (selectedField: Field) => { + if (field === selectedField) { + setDirection(direction === "asc" ? "desc" : "asc"); + } else { + setField(selectedField); + setDirection("asc"); + } + }; + + return ( + + ); +}; + +storiesOf("Generics / Table header", module) + .addDecorator(Decorator) + .add("ascending", () => ) + .add("descending", () => ) + .add("interactive", () => ); diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx new file mode 100644 index 000000000..e6011b30b --- /dev/null +++ b/src/components/TableCellHeader/TableCellHeader.tsx @@ -0,0 +1,70 @@ +import { Theme } from "@material-ui/core/styles"; +import TableCell, { TableCellProps } from "@material-ui/core/TableCell"; +import makeStyles from "@material-ui/styles/makeStyles"; +import classNames from "classnames"; +import React from "react"; + +import ArrowSort from "../../icons/ArrowSort"; + +const useStyles = makeStyles((theme: Theme) => ({ + arrow: { + transition: theme.transitions.duration.short + "ms" + }, + arrowLeft: { + marginLeft: -24 + }, + arrowUp: { + transform: "rotate(180deg)" + }, + label: { + alignSelf: "center", + display: "inline-block" + }, + labelContainer: { + display: "flex", + height: 24 + }, + root: { + cursor: "pointer" + } +})); + +export type TableCellHeaderArrowDirection = "asc" | "desc"; +export type TableCellHeaderArrowPosition = "left" | "right"; +export interface TableCellHeader extends TableCellProps { + arrowPosition?: TableCellHeaderArrowPosition; + direction?: TableCellHeaderArrowDirection; +} + +const TableCellHeader: React.FC = props => { + const classes = useStyles(props); + const { arrowPosition, children, className, direction, ...rest } = props; + + return ( + +
+ {!!direction && arrowPosition === "left" && ( + + )} +
{children}
+ {!!direction && arrowPosition === "right" && ( + + )} +
+ + ); +}; + +TableCellHeader.displayName = "TableCellHeader"; +TableCellHeader.defaultProps = { + arrowPosition: "left" +}; +export default TableCellHeader; diff --git a/src/components/TableCellHeader/index.ts b/src/components/TableCellHeader/index.ts new file mode 100644 index 000000000..cfd465863 --- /dev/null +++ b/src/components/TableCellHeader/index.ts @@ -0,0 +1,2 @@ +export { default } from "./TableCellHeader"; +export * from "./TableCellHeader"; diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index e25d6d037..9c1078adc 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -4591,6 +4591,273 @@ exports[`Storyshots Generics / StatusLabel when success 1`] = ` `; +exports[`Storyshots Generics / Table header ascending 1`] = ` +
+
+ + + + + + + + + + + + + +
+
+
+ Name +
+ +
+ 		+
+
+ Type +
+
+
+ Apple Juice + + Juice +
+
+
+`; + +exports[`Storyshots Generics / Table header descending 1`] = ` +
+
+ + + + + + + + + + + + + +
+
+
+ Name +
+ +
+ 		+
+
+ Type +
+
+
+ Apple Juice + + Juice +
+
+
+`; + +exports[`Storyshots Generics / Table header interactive 1`] = ` +
+
+ + + + + + + + + + + + + +
+
+
+ Name +
+ +
+ 		+
+
+ Type +
+
+
+ Apple Juice + + Juice +
+
+
+`; + exports[`Storyshots Generics / TablePagination both previous and next pages are available 1`] = `