51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import ColumnPicker, {
|
|
ColumnPickerProps
|
|
} from "@saleor/components/ColumnPicker";
|
|
import { ColumnPickerChoice } from "@saleor/components/ColumnPicker/ColumnPickerContent";
|
|
import CardDecorator from "@saleor/storybook/CardDecorator";
|
|
import { storiesOf } from "@storybook/react";
|
|
import React from "react";
|
|
|
|
import Decorator from "../../Decorator";
|
|
|
|
const columns: ColumnPickerChoice[] = [
|
|
{ label: "Name", value: "name" },
|
|
{ label: "Value", value: "value" },
|
|
{ label: "Type", value: "type" },
|
|
{ label: "Size", value: "size" },
|
|
{ label: "Status", value: "isPublished" },
|
|
{ label: "Price", value: "price" },
|
|
{ label: "Digital", value: "isDigital" },
|
|
...Array(15)
|
|
.fill(0)
|
|
.map((_, index) => ({
|
|
label: "Attribute " + (index + 1),
|
|
value: "attribute_" + index
|
|
}))
|
|
];
|
|
|
|
const props: ColumnPickerProps = {
|
|
columns,
|
|
defaultColumns: [1, 3].map(index => columns[index].value),
|
|
initialColumns: [1, 3, 4, 6].map(index => columns[index].value),
|
|
initialOpen: true,
|
|
onSave: () => undefined
|
|
};
|
|
|
|
storiesOf("Generics / Column picker", module)
|
|
.addDecorator(storyFn => (
|
|
<div style={{ display: "flex ", justifyContent: "center" }}>
|
|
{storyFn()}
|
|
</div>
|
|
))
|
|
.addDecorator(CardDecorator)
|
|
.addDecorator(Decorator)
|
|
.add("default", () => <ColumnPicker {...props} />)
|
|
.add("loading", () => (
|
|
<ColumnPicker
|
|
{...props}
|
|
loading={true}
|
|
hasMore={true}
|
|
onFetchMore={() => undefined}
|
|
/>
|
|
));
|