@licklist/design 0.44.476-dev.12 → 0.44.476-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/events/event-statistic-modal/EventStatisticModal.js +1 -1
- package/dist/iframe/order-process/components/BookingSummary/BookingSummary.d.ts +1 -1
- package/dist/iframe/order-process/components/BookingSummary/BookingSummary.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/BookingSummary.js +1 -1
- package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.js +1 -1
- package/dist/iframe/order-process/components/BookingSummary/types/index.d.ts +1 -2
- package/dist/iframe/order-process/components/BookingSummary/types/index.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts +4 -0
- package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/utils/index.js +1 -1
- package/dist/iframe/payment/order-items-table/OrderItemsTable.js +1 -1
- package/dist/iframe/payment/payment-form/PaymentForm.js +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/product-set/form/StepsControl.js +1 -1
- package/dist/sales/manual-booking/select-menu/SelectMenu.d.ts.map +1 -1
- package/dist/sales/manual-booking/select-menu/SelectMenu.js +1 -1
- package/dist/sales/notes/NotesTableRow.d.ts.map +1 -1
- package/dist/sales/notes/NotesTableRow.js +1 -1
- package/dist/sales/notes/note-form/NoteForm.d.ts.map +1 -1
- package/dist/sales/notes/note-form/NoteForm.js +1 -1
- package/dist/setting/dashboard/snippets/card/SnippetCard.js +1 -1
- package/dist/styles/iframe-events/Event.scss +2 -0
- package/dist/styles/packages.scss +0 -1
- package/dist/styles/sales/Notes.scss +4 -0
- package/dist/table/TableHelperComponent.d.ts +3 -2
- package/dist/table/TableHelperComponent.d.ts.map +1 -1
- package/dist/table/index.d.ts +0 -1
- package/dist/table/index.d.ts.map +1 -1
- package/dist/table/utils/index.d.ts +0 -1
- package/dist/table/utils/index.d.ts.map +1 -1
- package/dist/table/utils/index.js +1 -1
- package/package.json +1 -2
- package/src/iframe/order-process/OrderProcess.stories.tsx +5 -2
- package/src/iframe/order-process/components/BookingSummary/BookingSummary.stories.tsx +2 -2
- package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx +13 -6
- package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx +12 -4
- package/src/iframe/order-process/components/BookingSummary/types/index.ts +1 -2
- package/src/iframe/order-process/components/BookingSummary/utils/index.ts +21 -0
- package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx +1 -9
- package/src/index.ts +0 -1
- package/src/product-set/form/StepsControl.tsx +1 -1
- package/src/sales/manual-booking/select-menu/SelectMenu.tsx +1 -3
- package/src/sales/notes/NotesTableRow.tsx +6 -11
- package/src/sales/notes/note-form/NoteForm.tsx +3 -21
- package/src/styles/iframe-events/Event.scss +2 -0
- package/src/styles/packages.scss +0 -1
- package/src/styles/sales/Notes.scss +4 -0
- package/src/table/Table.stories.tsx +1 -127
- package/src/table/TableHelperComponent.tsx +1 -3
- package/src/table/index.ts +0 -1
- package/src/table/utils/index.ts +0 -2
- package/dist/customers/components/filter/CustomerFilter.d.ts +0 -14
- package/dist/customers/components/filter/CustomerFilter.d.ts.map +0 -1
- package/dist/customers/components/filter/CustomerFilter.js +0 -1
- package/dist/customers/components/filter/index.d.ts +0 -3
- package/dist/customers/components/filter/index.d.ts.map +0 -1
- package/dist/customers/components/index.d.ts +0 -2
- package/dist/customers/components/index.d.ts.map +0 -1
- package/dist/customers/index.d.ts +0 -2
- package/dist/customers/index.d.ts.map +0 -1
- package/dist/styles/customers/Filter.scss +0 -34
- package/dist/styles/customers/_index.scss +0 -1
- package/dist/table/ReactTableHelperComponent.d.ts +0 -12
- package/dist/table/ReactTableHelperComponent.d.ts.map +0 -1
- package/dist/table/ReactTableHelperComponent.js +0 -1
- package/dist/table/hooks/useTableQueryOptions.d.ts +0 -20
- package/dist/table/hooks/useTableQueryOptions.d.ts.map +0 -1
- package/dist/table/hooks/useTableQueryOptions.js +0 -1
- package/dist/table/types.d.ts +0 -41
- package/dist/table/types.d.ts.map +0 -1
- package/src/customers/components/filter/CustomerFilter.stories.tsx +0 -19
- package/src/customers/components/filter/CustomerFilter.tsx +0 -50
- package/src/customers/components/filter/index.ts +0 -2
- package/src/customers/components/index.ts +0 -1
- package/src/customers/index.ts +0 -1
- package/src/styles/customers/Filter.scss +0 -34
- package/src/styles/customers/_index.scss +0 -1
- package/src/table/ReactTableHelperComponent.tsx +0 -321
- package/src/table/hooks/useTableQueryOptions.ts +0 -49
- package/src/table/types.ts +0 -47
package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
|
+
import { Order } from "../../../../../../types";
|
|
3
4
|
import { BookingSummaryProps } from "../../types";
|
|
4
|
-
import { cartSumByOrderProducts } from "../../utils";
|
|
5
|
+
import { sanitizeFormValues, cartSumByOrderProducts } from "../../utils";
|
|
5
6
|
import { SummaryTotalBlock } from "./components/SummaryTotalBlock";
|
|
6
7
|
|
|
7
8
|
export const SummaryTotal = ({
|
|
@@ -14,10 +15,17 @@ export const SummaryTotal = ({
|
|
|
14
15
|
"formValues" | "totalWithDiscount" | "transactionFee" | "isFreePayment"
|
|
15
16
|
>) => {
|
|
16
17
|
const { t } = useTranslation("Design");
|
|
17
|
-
const orderProducts = useMemo(() => {
|
|
18
|
-
const
|
|
18
|
+
const [, orderProducts] = useMemo(() => {
|
|
19
|
+
const { numberOfPeople, ...orderProducts } = sanitizeFormValues(formValues);
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
const products = Object.keys(orderProducts).map(
|
|
22
|
+
(productId) => orderProducts[productId]
|
|
23
|
+
) as Order[];
|
|
24
|
+
|
|
25
|
+
return [
|
|
26
|
+
numberOfPeople as number,
|
|
27
|
+
products.filter((prod) => prod.quantity !== 0),
|
|
28
|
+
];
|
|
21
29
|
}, [formValues]);
|
|
22
30
|
|
|
23
31
|
const cartSum = isFreePayment
|
|
@@ -8,7 +8,7 @@ export type BookingSummaryProps = {
|
|
|
8
8
|
date: string;
|
|
9
9
|
menuSteps: MenuStep[];
|
|
10
10
|
formValues: {
|
|
11
|
-
[key: string]: Order;
|
|
11
|
+
[key: string]: Order | number;
|
|
12
12
|
};
|
|
13
13
|
totalWithDiscount?: number;
|
|
14
14
|
isNotShownPeopleAmount?: boolean;
|
|
@@ -18,5 +18,4 @@ export type BookingSummaryProps = {
|
|
|
18
18
|
isFreePayment?: boolean;
|
|
19
19
|
productsWithErrors?: ProductQuantityCheckResponse["products"];
|
|
20
20
|
isLoading?: boolean;
|
|
21
|
-
peopleAmount: number;
|
|
22
21
|
};
|
|
@@ -1,4 +1,25 @@
|
|
|
1
1
|
import { Order } from "../../../../../types";
|
|
2
|
+
import { BookingSummaryProps } from "../types";
|
|
3
|
+
|
|
4
|
+
export const sanitizeFormValues = (
|
|
5
|
+
formValues: BookingSummaryProps["formValues"]
|
|
6
|
+
) =>
|
|
7
|
+
Object.keys(formValues).reduce(
|
|
8
|
+
(
|
|
9
|
+
prevValues: {
|
|
10
|
+
[key: string]: Order | number;
|
|
11
|
+
},
|
|
12
|
+
currentKey: string
|
|
13
|
+
) => {
|
|
14
|
+
const value = formValues[currentKey];
|
|
15
|
+
if (value) {
|
|
16
|
+
return { ...prevValues, [currentKey]: value };
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return prevValues;
|
|
20
|
+
},
|
|
21
|
+
{}
|
|
22
|
+
);
|
|
2
23
|
|
|
3
24
|
export const cartSumByOrderProducts = (orderProducts: Order[]) =>
|
|
4
25
|
orderProducts.reduce((prevSumValue: number, product) => {
|
|
@@ -174,12 +174,7 @@ const OrderProcessContextProvider: React.FC = ({ children }) => {
|
|
|
174
174
|
|
|
175
175
|
return (
|
|
176
176
|
<OrderProcessContext.Provider
|
|
177
|
-
value={{
|
|
178
|
-
orderFormValues,
|
|
179
|
-
setOrderFormValues,
|
|
180
|
-
formValues,
|
|
181
|
-
setFormValues,
|
|
182
|
-
}}
|
|
177
|
+
value={{ orderFormValues, setOrderFormValues, formValues, setFormValues }}
|
|
183
178
|
>
|
|
184
179
|
{children}
|
|
185
180
|
</OrderProcessContext.Provider>
|
|
@@ -408,8 +403,6 @@ const MENU_STEPS = [
|
|
|
408
403
|
|
|
409
404
|
export function Default() {
|
|
410
405
|
const { formValues, setFormValues } = useContext(OrderProcessContext);
|
|
411
|
-
const [peopleAmount] = useState(0);
|
|
412
|
-
|
|
413
406
|
return (
|
|
414
407
|
<div className="snippet">
|
|
415
408
|
<OrderProcessContextProvider>
|
|
@@ -441,7 +434,6 @@ export function Default() {
|
|
|
441
434
|
<BookingSummary
|
|
442
435
|
date="29 Sept 2022 at 09:00"
|
|
443
436
|
menuSteps={menuSteps as any}
|
|
444
|
-
peopleAmount={peopleAmount}
|
|
445
437
|
formValues={formValues}
|
|
446
438
|
totalWithDiscount={5}
|
|
447
439
|
eventName="Glam!"
|
package/src/index.ts
CHANGED
|
@@ -32,9 +32,7 @@ export const SelectMenu = ({
|
|
|
32
32
|
<div>
|
|
33
33
|
{(!menus || !menus.length) && !isLoading ? (
|
|
34
34
|
<div className="no-results-content">
|
|
35
|
-
<span className="no-results-found">
|
|
36
|
-
{t("App:noResultsFoundForSelectedDate")}
|
|
37
|
-
</span>
|
|
35
|
+
<span className="no-results-found">{t("App:noResultsFound")}</span>
|
|
38
36
|
</div>
|
|
39
37
|
) : (
|
|
40
38
|
<>
|
|
@@ -6,11 +6,7 @@ import { useTranslation } from "react-i18next";
|
|
|
6
6
|
import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
|
|
7
7
|
import { capitalize } from "lodash";
|
|
8
8
|
import { DateTime } from "luxon";
|
|
9
|
-
import {
|
|
10
|
-
DATE_TIME_FORMAT,
|
|
11
|
-
DATE_TIME_FULL_FORMAT,
|
|
12
|
-
} from "@licklist/core/dist/Config";
|
|
13
|
-
import { getClientTimeZone } from "@licklist/core/dist/Services";
|
|
9
|
+
import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
|
|
14
10
|
import { ConfirmModal } from "../../modals";
|
|
15
11
|
import { MenuButton } from "../../table";
|
|
16
12
|
import { Icon } from "../../static";
|
|
@@ -26,11 +22,10 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
|
|
|
26
22
|
const popoverId = useId();
|
|
27
23
|
const [isOverlayVisibile, setIsOverlayVisible] = useState(false);
|
|
28
24
|
|
|
29
|
-
const date = DateTime.fromFormat(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
.toFormat(DATE_TIME_FORMAT);
|
|
25
|
+
const date = DateTime.fromFormat(
|
|
26
|
+
note.updatedAt,
|
|
27
|
+
DATE_TIME_FULL_FORMAT
|
|
28
|
+
).toFormat(DATE_FORMAT);
|
|
34
29
|
|
|
35
30
|
return (
|
|
36
31
|
<tr onClick={onClick}>
|
|
@@ -38,7 +33,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
|
|
|
38
33
|
<td className="note-author">
|
|
39
34
|
{capitalize(note.user.firstName)} {capitalize(note.user.lastName)}
|
|
40
35
|
</td>
|
|
41
|
-
<td className="
|
|
36
|
+
<td className="note-date">{date}</td>
|
|
42
37
|
<td>
|
|
43
38
|
<div className="controls">
|
|
44
39
|
<span className="btn btn-sm eye">
|
|
@@ -19,12 +19,7 @@ export const NoteForm = ({
|
|
|
19
19
|
onClose,
|
|
20
20
|
defaultValues = { note: "" },
|
|
21
21
|
}: NoteFormProps) => {
|
|
22
|
-
const {
|
|
23
|
-
register,
|
|
24
|
-
handleSubmit,
|
|
25
|
-
formState: { errors },
|
|
26
|
-
setValue,
|
|
27
|
-
} = useForm<FormModel>({
|
|
22
|
+
const { register, handleSubmit } = useForm<FormModel>({
|
|
28
23
|
mode: "onChange",
|
|
29
24
|
defaultValues,
|
|
30
25
|
});
|
|
@@ -42,18 +37,9 @@ export const NoteForm = ({
|
|
|
42
37
|
<Form.Control
|
|
43
38
|
as="textarea"
|
|
44
39
|
rows={5}
|
|
45
|
-
isInvalid={!!errors.note}
|
|
46
40
|
placeholder={t("writeYourNoteHere")}
|
|
47
|
-
{...register("note"
|
|
48
|
-
required: {
|
|
49
|
-
value: true,
|
|
50
|
-
message: t("Validation:fieldRequired"),
|
|
51
|
-
},
|
|
52
|
-
})}
|
|
41
|
+
{...register("note")}
|
|
53
42
|
/>
|
|
54
|
-
<Form.Control.Feedback type="invalid">
|
|
55
|
-
{errors.note?.message}
|
|
56
|
-
</Form.Control.Feedback>
|
|
57
43
|
</Form.Group>
|
|
58
44
|
|
|
59
45
|
<footer className="d-flex">
|
|
@@ -66,11 +52,7 @@ export const NoteForm = ({
|
|
|
66
52
|
>
|
|
67
53
|
{t("close")}
|
|
68
54
|
</Button>
|
|
69
|
-
<Button
|
|
70
|
-
variant="danger"
|
|
71
|
-
className="ml-2"
|
|
72
|
-
onClick={() => setValue("note", "")}
|
|
73
|
-
>
|
|
55
|
+
<Button type="reset" variant="danger" className="ml-2">
|
|
74
56
|
{t("delete")}
|
|
75
57
|
</Button>
|
|
76
58
|
</footer>
|
|
@@ -91,9 +91,11 @@
|
|
|
91
91
|
|
|
92
92
|
&__select-product {
|
|
93
93
|
width: 10.5rem !important;
|
|
94
|
+
margin-top: 1rem;
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
&__unselect-product {
|
|
98
|
+
margin-top: 1rem;
|
|
97
99
|
width: 10.5rem !important;
|
|
98
100
|
background-color: $snippet-elements-button-color !important;
|
|
99
101
|
color: $snippet-elements-button-background-color !important;
|
package/src/styles/packages.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
|
|
2
2
|
import { Meta, Story } from "@storybook/react";
|
|
3
3
|
import { range } from "lodash";
|
|
4
|
-
import React
|
|
4
|
+
import React from "react";
|
|
5
5
|
import { Router } from "../auth/Router";
|
|
6
6
|
import {
|
|
7
7
|
FilterHelperComponent as FilterHelper,
|
|
@@ -19,13 +19,6 @@ import {
|
|
|
19
19
|
TableHelperComponent as TableHelper,
|
|
20
20
|
TableHelperComponentProps,
|
|
21
21
|
} from "./TableHelperComponent";
|
|
22
|
-
import {
|
|
23
|
-
ReactTableHelperComponent as ReactTableHelper,
|
|
24
|
-
ReactTableHelperComponentProps,
|
|
25
|
-
ReactTableHelperRow,
|
|
26
|
-
ReactTableHelperComponentRef,
|
|
27
|
-
} from "./ReactTableHelperComponent";
|
|
28
|
-
import { flexRender } from "./utils/index";
|
|
29
22
|
|
|
30
23
|
export default {
|
|
31
24
|
title: "Table",
|
|
@@ -52,40 +45,6 @@ export const PerPageHelperComponent: Story<PerPageHelperComponentProps> = (
|
|
|
52
45
|
args
|
|
53
46
|
) => <PerPageHelper {...args} />;
|
|
54
47
|
|
|
55
|
-
export const ReactTableHelperComponent: Story<
|
|
56
|
-
ReactTableHelperComponentProps<any>
|
|
57
|
-
> = (args) => (
|
|
58
|
-
<>
|
|
59
|
-
<Router>
|
|
60
|
-
<ReactTableHelper {...args} />
|
|
61
|
-
</Router>
|
|
62
|
-
</>
|
|
63
|
-
);
|
|
64
|
-
|
|
65
|
-
const ComponentInsideRouter = (args) => {
|
|
66
|
-
const ref = useRef<ReactTableHelperComponentRef>(null);
|
|
67
|
-
|
|
68
|
-
return (
|
|
69
|
-
<ReactTableHelper
|
|
70
|
-
{...args}
|
|
71
|
-
ref={ref}
|
|
72
|
-
externalFilters={{ uniqField: "uniqField" }}
|
|
73
|
-
/>
|
|
74
|
-
);
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
export const ReactTableHelperComponentWithColumns: Story<
|
|
78
|
-
ReactTableHelperComponentProps<any>
|
|
79
|
-
> = (args) => {
|
|
80
|
-
return (
|
|
81
|
-
<>
|
|
82
|
-
<Router>
|
|
83
|
-
<ComponentInsideRouter {...args} />
|
|
84
|
-
</Router>
|
|
85
|
-
</>
|
|
86
|
-
);
|
|
87
|
-
};
|
|
88
|
-
|
|
89
48
|
const getPaginator = (perPage, items = 100) =>
|
|
90
49
|
({
|
|
91
50
|
current_page: 1,
|
|
@@ -139,88 +98,3 @@ TableHelperComponent.args = {
|
|
|
139
98
|
PaginationHelperComponent.args = {
|
|
140
99
|
paginator: getPaginator(24, 100),
|
|
141
100
|
};
|
|
142
|
-
|
|
143
|
-
ReactTableHelperComponent.args = {
|
|
144
|
-
isLoading: false,
|
|
145
|
-
headers: [
|
|
146
|
-
{
|
|
147
|
-
title: "ID",
|
|
148
|
-
key: "id",
|
|
149
|
-
isSortable: true,
|
|
150
|
-
width: "600px",
|
|
151
|
-
},
|
|
152
|
-
"Title",
|
|
153
|
-
"Description",
|
|
154
|
-
"Action",
|
|
155
|
-
],
|
|
156
|
-
paginator: getPaginator(24, 10),
|
|
157
|
-
renderItemFn: (row) => {
|
|
158
|
-
return (
|
|
159
|
-
<tr key={row.id}>
|
|
160
|
-
<td>{row.id}</td>
|
|
161
|
-
<td>{row.title}</td>
|
|
162
|
-
<td>{row.description}</td>
|
|
163
|
-
<td>ADD | REMOVE</td>
|
|
164
|
-
</tr>
|
|
165
|
-
);
|
|
166
|
-
},
|
|
167
|
-
striped: false,
|
|
168
|
-
bordered: false,
|
|
169
|
-
displayShowingSection: false,
|
|
170
|
-
initialOptions: {
|
|
171
|
-
page: 1,
|
|
172
|
-
perPage: 10,
|
|
173
|
-
sortKey: "id",
|
|
174
|
-
sortDirection: "desc",
|
|
175
|
-
filter: "",
|
|
176
|
-
},
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
ReactTableHelperComponentWithColumns.args = {
|
|
180
|
-
isLoading: false,
|
|
181
|
-
columns: [
|
|
182
|
-
{
|
|
183
|
-
accessorKey: "id",
|
|
184
|
-
header: () => "CustomHeader",
|
|
185
|
-
},
|
|
186
|
-
{
|
|
187
|
-
accessorKey: "title",
|
|
188
|
-
header: () => "SuperTitle",
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
accessorKey: "description",
|
|
192
|
-
header: () => "AwesomeDescription",
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
accessorKey: "actions",
|
|
196
|
-
header: () => "Incredible Actions",
|
|
197
|
-
},
|
|
198
|
-
],
|
|
199
|
-
sortableColumns: ["id"],
|
|
200
|
-
paginator: getPaginator(24, 10),
|
|
201
|
-
renderRow: (row: ReactTableHelperRow<any>) => {
|
|
202
|
-
return (
|
|
203
|
-
<tr key={row.id}>
|
|
204
|
-
{row.getVisibleCells().map((cell) => {
|
|
205
|
-
return (
|
|
206
|
-
<td key={cell.id}>
|
|
207
|
-
{cell.column.id === "actions"
|
|
208
|
-
? "ADD | REMOVE"
|
|
209
|
-
: flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
210
|
-
</td>
|
|
211
|
-
);
|
|
212
|
-
})}
|
|
213
|
-
</tr>
|
|
214
|
-
);
|
|
215
|
-
},
|
|
216
|
-
striped: false,
|
|
217
|
-
bordered: false,
|
|
218
|
-
displayShowingSection: false,
|
|
219
|
-
initialOptions: {
|
|
220
|
-
page: 1,
|
|
221
|
-
perPage: 10,
|
|
222
|
-
sortKey: "id",
|
|
223
|
-
sortDirection: "desc",
|
|
224
|
-
filter: "",
|
|
225
|
-
},
|
|
226
|
-
};
|
|
@@ -14,7 +14,6 @@ import { FilterHelperComponent } from "./FilterHelperComponent";
|
|
|
14
14
|
import { PaginationHelperComponent } from "./PaginationHelperComponent";
|
|
15
15
|
import { PerPageHelperComponent } from "./PerPageHelperComponent";
|
|
16
16
|
import { getFilterOptionsValue } from "./utils";
|
|
17
|
-
import { ExtendedTableOptions } from "./types";
|
|
18
17
|
|
|
19
18
|
export interface TableHelperComponentProps {
|
|
20
19
|
headers: ITableHeader[];
|
|
@@ -32,6 +31,7 @@ export interface TableHelperComponentProps {
|
|
|
32
31
|
initialOptions?: Partial<ITableProps>;
|
|
33
32
|
}
|
|
34
33
|
|
|
34
|
+
export type ExtendedTableOptions = ITableProps & { [key: string]: any };
|
|
35
35
|
// @TODO Refactor? component to get less complexity
|
|
36
36
|
// with query filter params. Now External filters use only in
|
|
37
37
|
// one place of Dashboard.
|
|
@@ -42,8 +42,6 @@ export interface TableHelperComponentProps {
|
|
|
42
42
|
|
|
43
43
|
/**
|
|
44
44
|
* TableHelperComponent
|
|
45
|
-
* @deprecated use new ReactTableHelperComponent
|
|
46
|
-
* for default tables
|
|
47
45
|
* @param props
|
|
48
46
|
* @constructor
|
|
49
47
|
*/
|
package/src/table/index.ts
CHANGED
package/src/table/utils/index.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
|
|
2
2
|
import TableService from "@licklist/plugins/dist/services/Table/TableService";
|
|
3
3
|
|
|
4
|
-
export { flexRender } from "@tanstack/react-table";
|
|
5
|
-
|
|
6
4
|
const DEFAULT_QUERY_VALUES: { [key in keyof ITableProps]: string | number } = {
|
|
7
5
|
page: TableService.DEFAULT_PAGE,
|
|
8
6
|
perPage: TableService.DEFAULT_PER_PAGE,
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare type CustomerFilterValues = {
|
|
3
|
-
first_name: string;
|
|
4
|
-
last_name: string;
|
|
5
|
-
email: string;
|
|
6
|
-
phone: string;
|
|
7
|
-
};
|
|
8
|
-
export interface CustomerFilterProps {
|
|
9
|
-
values: CustomerFilterValues;
|
|
10
|
-
onChange: (values: CustomerFilterValues) => void;
|
|
11
|
-
}
|
|
12
|
-
export declare const CustomerFilter: ({ values, onChange }: CustomerFilterProps) => JSX.Element;
|
|
13
|
-
export {};
|
|
14
|
-
//# sourceMappingURL=CustomerFilter.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CustomerFilter.d.ts","sourceRoot":"","sources":["../../../../src/customers/components/filter/CustomerFilter.tsx"],"names":[],"mappings":";AAKA,aAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AASF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,cAAc,yBAA0B,mBAAmB,gBAyBvE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=e(require("react")),a=require("react-i18next"),s=require("../../../static/TextField.js"),i=e(require("clsx")),n={first_name:"firstName",last_name:"lastName",email:"email",phone:"phone"};exports.CustomerFilter=function(e){var l=e.values,u=e.onChange,c=a.useTranslation(["Design"]).t;return r.createElement("div",{className:"customers-filter d-flex"},r.createElement("div",{className:"d-flex customers-filter-items"},Object.keys(n).map((function(e){var a=c(n[e]);return r.createElement(s.TextField,{key:e,className:i("mb-0"),type:"text",label:a,value:l[e],onChange:function(r){var a;return u(t.__assign(t.__assign({},l),((a={})[e]=r.target.value,a)))}})}))))};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/customers/components/filter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/customers/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/customers/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
.customers-filter {
|
|
2
|
-
gap: 0.5rem;
|
|
3
|
-
|
|
4
|
-
@include media-breakpoint-down(sm) {
|
|
5
|
-
label {
|
|
6
|
-
font-size: 0.8rem;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@include media-breakpoint-up(md) {
|
|
11
|
-
label {
|
|
12
|
-
font-size: 0.9rem;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@include media-breakpoint-up(lg) {
|
|
17
|
-
label {
|
|
18
|
-
font-size: 1rem;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@include media-breakpoint-down(lg) {
|
|
23
|
-
flex-direction: column;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.customers-filter-items {
|
|
27
|
-
gap: 0.5rem;
|
|
28
|
-
|
|
29
|
-
@include media-breakpoint-down(xs) {
|
|
30
|
-
flex-direction: column;
|
|
31
|
-
gap: 0rem;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import "./Filter.scss";
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Ref, ReactElement } from "react";
|
|
2
|
-
import { TableComponentProps, TableComponentPropsWithOldTableData, TableComponentPropsWithReactTableData, ExtendedTableOptions } from "./types";
|
|
3
|
-
export type { ReactTableHelperRow } from "./types";
|
|
4
|
-
export declare type ReactTableHelperComponentProps<T extends object> = TableComponentProps<T> & (TableComponentPropsWithOldTableData<T> | TableComponentPropsWithReactTableData<T>);
|
|
5
|
-
export declare type ReactTableHelperComponentRef = {
|
|
6
|
-
options: ExtendedTableOptions | null;
|
|
7
|
-
};
|
|
8
|
-
declare const ReactTableHelperComponent: <T extends object>(props: ReactTableHelperComponentProps<T> & {
|
|
9
|
-
ref?: Ref<ReactTableHelperComponentRef>;
|
|
10
|
-
}) => ReactElement;
|
|
11
|
-
export { ReactTableHelperComponent };
|
|
12
|
-
//# sourceMappingURL=ReactTableHelperComponent.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ReactTableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/ReactTableHelperComponent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,GAAG,EACH,YAAY,EACb,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,mBAAmB,EACnB,mCAAmC,EACnC,qCAAqC,EAErC,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,oBAAY,8BAA8B,CAAC,CAAC,SAAS,MAAM,IACzD,mBAAmB,CAAC,CAAC,CAAC,GACpB,CACI,mCAAmC,CAAC,CAAC,CAAC,GACtC,qCAAqC,CAAC,CAAC,CAAC,CAC3C,CAAC;AAEN,oBAAY,4BAA4B,GAAG;IACzC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACtC,CAAC;AA4QF,QAAA,MAAM,yBAAyB;UAIrB,IAAI,4BAA4B,CAAC;MAEtC,YAAY,CAAC;AAElB,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),s=require("react-bootstrap"),l=e(require("clsx")),u=require("lodash"),c=require("./FilterHelperComponent.js"),d=require("./PaginationHelperComponent.js"),p=e(require("@licklist/plugins/dist/services/Table/TableService")),m=require("./PerPageHelperComponent.js"),g=require("@tanstack/react-table");require("./utils/index.js");var f=require("./hooks/useTableQueryOptions.js");var _=r.forwardRef((function(e,_){var v,C,y=e.paginator,h=e.headers,E=e.renderItemFn,b=e.isLoading,S=e.striped,q=void 0===S||S,w=e.bordered,R=void 0===w||w,P=e.displaySearchBar,k=void 0===P||P,F=e.displayPerPageSelect,H=void 0===F||F,T=e.displayShowingSection,x=void 0===T||T,L=e.externalFilters,D=void 0===L?{}:L,O=e.initialOptions,j=void 0===O?{}:O,N=e.columns,I=e.sortableColumns,K=void 0===I?[]:I,M=e.renderRow,A=t.__rest(e,["paginator","headers","renderItemFn","isLoading","striped","bordered","displaySearchBar","displayPerPageSelect","displayShowingSection","externalFilters","initialOptions","columns","sortableColumns","renderRow"]),U=i.useLocation().pathname,B=f.useTableQueryOptions({initialOptions:j,externalFilters:D}),G=B.sortKey,Q=B.sortDirection,V=B.options,z=B.setOptions,J=B.optionsCache,W=B.setOptionsCache,X=B.cachedExternalFilters,Y=B.setCachedExternalFilters,Z=r.useMemo((function(){return N||h?N&&!h?N.map((function(e){var r=e.accessorKey,n=K.includes(r);return t.__assign(t.__assign({},e),{meta:{className:p.getHeaderClasses({isSortable:n,key:r,title:r},G,Q),onClick:n?function(){return re(r)}:void 0}})})):h.map((function(e){return"string"==typeof e?{accessorKey:e.toLowerCase(),header:function(){return e},meta:{className:p.getHeaderClasses(e,G,Q)}}:{accessorKey:(null==e?void 0:e.key)||e.title.toLowerCase(),header:function(){return e.title},meta:{onClick:function(){return e.isSortable&&re(e.key)},className:p.getHeaderClasses(e,G,Q),style:{width:(null==e?void 0:e.width)||"auto"}}}})):[]}),[h,N,G,Q,K]),$=g.useReactTable(t.__assign({data:y.data,columns:Z,getCoreRowModel:g.getCoreRowModel()},A)),ee=$.getHeaderGroups,te=$.getRowModel;r.useImperativeHandle(_,(function(){return{options:V}})),r.useEffect((function(){if(!u.isEqual(J,V)||!u.isEqual(X,D)){W(V),Y(D);var e=new URLSearchParams(t.__assign(t.__assign({},V),D));a.redirectTo([U,e.toString()].join("?"))}}),[U,V,D]);var re=function(e){var r=p.DEFAULT_SORT_DIRECTION;z(G===e?function(n){return r=p.getSortDirection(n.sortDirection,r),t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})}:function(n){return t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})})};return n.createElement("div",{className:l("table-helper",b?"py-5":"py-1")},n.createElement(o.LoaderIndicator,{isLoaded:!b},n.createElement(s.Row,null,n.createElement(s.Col,null,H&&n.createElement(m.PerPageHelperComponent,{onChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(v=null==y?void 0:y.per_page)&&void 0!==v?v:p.DEFAULT_PER_PAGE})),n.createElement(s.Col,null,k&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){z((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(C=V.filter)&&void 0!==C?C:""}))),n.createElement(s.Row,null,n.createElement(s.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(s.Table,{striped:q,bordered:R,hover:!0},n.createElement("thead",null,ee().map((function(e){return n.createElement("tr",{key:e.id},e.headers.map((function(e){var t=e.column.columnDef.meta;return n.createElement("th",{key:e.id,className:null==t?void 0:t.className,onClick:null==t?void 0:t.onClick,style:null==t?void 0:t.style},g.flexRender(e.column.columnDef.header,e.getContext()))})))}))),n.createElement("tbody",null,te().rows.map((function(e,t){return E?E(e.original,t):M(e)}))))))),n.createElement(d.PaginationHelperComponent,{displayShowingSection:x,paginator:y,onPageChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))}));exports.ReactTableHelperComponent=_;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { TableComponentProps, ExtendedTableOptions } from "../types";
|
|
3
|
-
export declare const useTableQueryOptions: <T extends object>({ initialOptions, externalFilters, }: Pick<TableComponentProps<T>, "initialOptions" | "externalFilters">) => {
|
|
4
|
-
page: number;
|
|
5
|
-
perPage: number;
|
|
6
|
-
sortKey: string;
|
|
7
|
-
sortDirection: string;
|
|
8
|
-
filter: string;
|
|
9
|
-
optionsCache: ExtendedTableOptions;
|
|
10
|
-
setOptionsCache: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
|
|
11
|
-
options: ExtendedTableOptions;
|
|
12
|
-
setOptions: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
|
|
13
|
-
cachedExternalFilters: {
|
|
14
|
-
[key: string]: any;
|
|
15
|
-
};
|
|
16
|
-
setCachedExternalFilters: import("react").Dispatch<import("react").SetStateAction<{
|
|
17
|
-
[key: string]: any;
|
|
18
|
-
}>>;
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=useTableQueryOptions.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableQueryOptions.d.ts","sourceRoot":"","sources":["../../../src/table/hooks/useTableQueryOptions.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CA2ChC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),i=(e(r),e(require("@licklist/plugins/dist/hooks/Query/useQuery"))),s=require("../utils/index.js");exports.useTableQueryOptions=function(e){var o=e.initialOptions,a=void 0===o?{}:o,n=e.externalFilters,l=void 0===n?{}:n,u=i(),p=Number(s.getFilterOptionsValue(u,a,"page")),c=Number(s.getFilterOptionsValue(u,a,"perPage")),g=String(s.getFilterOptionsValue(u,a,"sortKey")),d=String(s.getFilterOptionsValue(u,a,"sortDirection")),O=String(s.getFilterOptionsValue(u,a,"filter")),f=t.__read(r.useState(),2),y=f[0],F=f[1],_=t.__read(r.useState({page:p,perPage:c,sortKey:g,sortDirection:d,filter:O}),2),b=_[0],x=_[1],S=t.__read(r.useState(l),2);return{page:p,perPage:c,sortKey:g,sortDirection:d,filter:O,optionsCache:y,setOptionsCache:F,options:b,setOptions:x,cachedExternalFilters:S[0],setCachedExternalFilters:S[1]}};
|
package/dist/table/types.d.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { ReactNode, CSSProperties } from "react";
|
|
2
|
-
import { TableOptions, ColumnDef, Row as TableRow } from "@tanstack/react-table";
|
|
3
|
-
import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
|
|
4
|
-
import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
|
|
5
|
-
import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
|
|
6
|
-
export declare type ReactTableHelperRow<T extends object> = TableRow<T>;
|
|
7
|
-
export declare type ExtendedTableOptions = ITableProps & {
|
|
8
|
-
[key: string]: any;
|
|
9
|
-
};
|
|
10
|
-
export interface TableComponentProps<T extends object> extends Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel"> {
|
|
11
|
-
paginator?: ILengthAwarePaginator<T>;
|
|
12
|
-
isLoading?: boolean;
|
|
13
|
-
striped?: boolean;
|
|
14
|
-
bordered?: boolean;
|
|
15
|
-
displaySearchBar?: boolean;
|
|
16
|
-
displayPerPageSelect?: boolean;
|
|
17
|
-
displayShowingSection?: boolean;
|
|
18
|
-
externalFilters?: {
|
|
19
|
-
[key: string]: any;
|
|
20
|
-
};
|
|
21
|
-
initialOptions?: Partial<ITableProps>;
|
|
22
|
-
sortableColumns?: string[];
|
|
23
|
-
}
|
|
24
|
-
export declare type TableColumnMeta = {
|
|
25
|
-
onClick?: () => void;
|
|
26
|
-
className?: string;
|
|
27
|
-
style?: CSSProperties;
|
|
28
|
-
};
|
|
29
|
-
export declare type TableComponentPropsWithOldTableData<T extends object> = {
|
|
30
|
-
headers: ITableHeader[];
|
|
31
|
-
renderItemFn: (row: T, index: number) => void;
|
|
32
|
-
columns?: never;
|
|
33
|
-
renderRow?: never;
|
|
34
|
-
};
|
|
35
|
-
export declare type TableComponentPropsWithReactTableData<T extends object> = {
|
|
36
|
-
headers?: never;
|
|
37
|
-
renderItemFn?: never;
|
|
38
|
-
columns: ColumnDef<T, any>[];
|
|
39
|
-
renderRow: (row: ReactTableHelperRow<T>) => ReactNode;
|
|
40
|
-
};
|
|
41
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,YAAY,EACZ,SAAS,EACT,GAAG,IAAI,QAAQ,EAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAElF,oBAAY,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEhE,oBAAY,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC;AAExE,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,CACnD,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,iBAAiB,CAAC;IACrE,SAAS,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,oBAAY,mCAAmC,CAAC,CAAC,SAAS,MAAM,IAAI;IAClE,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEF,oBAAY,qCAAqC,CAAC,CAAC,SAAS,MAAM,IAAI;IACpE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CACvD,CAAC"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Meta, Story } from "@storybook/react";
|
|
3
|
-
import { CustomerFilter, CustomerFilterProps } from "./CustomerFilter";
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: "Customers/Filter",
|
|
7
|
-
component: CustomerFilter,
|
|
8
|
-
} as Meta;
|
|
9
|
-
|
|
10
|
-
export const Default: Story<CustomerFilterProps> = () => {
|
|
11
|
-
const [values, setValues] = useState({
|
|
12
|
-
first_name: "",
|
|
13
|
-
last_name: "",
|
|
14
|
-
email: "",
|
|
15
|
-
phone: "",
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
return <CustomerFilter values={values} onChange={setValues} />;
|
|
19
|
-
};
|