@soppiya/app-bridge 1.0.7 → 1.0.9
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/components/articles-picker/api/query.d.ts +8 -0
- package/dist/components/articles-picker/api/query.js +22 -0
- package/dist/components/articles-picker/model/useArticles.d.ts +30 -0
- package/dist/components/articles-picker/model/useArticles.js +46 -0
- package/dist/components/articles-picker/ui/ArticlesPicker.d.ts +9 -0
- package/dist/components/articles-picker/ui/ArticlesPicker.js +107 -0
- package/dist/components/articles-picker/ui/ProductPicker.stories.d.ts +17 -0
- package/dist/components/articles-picker/ui/ProductPicker.stories.js +13 -0
- package/dist/components/blogs-picker/api/query.d.ts +8 -0
- package/dist/components/blogs-picker/api/query.js +22 -0
- package/dist/components/blogs-picker/model/useBlogs.d.ts +30 -0
- package/dist/components/blogs-picker/model/useBlogs.js +46 -0
- package/dist/components/blogs-picker/ui/BlogsPicker.d.ts +9 -0
- package/dist/components/blogs-picker/ui/BlogsPicker.js +107 -0
- package/dist/components/blogs-picker/ui/BlogsPicker.stories.d.ts +17 -0
- package/dist/components/blogs-picker/ui/BlogsPicker.stories.js +13 -0
- package/dist/components/collections-pciker/api/query.d.ts +5 -0
- package/dist/components/collections-pciker/api/query.js +22 -0
- package/dist/components/collections-pciker/model/useCollections.d.ts +29 -0
- package/dist/components/collections-pciker/model/useCollections.js +32 -0
- package/dist/components/collections-pciker/ui/CollectionPicker.d.ts +9 -0
- package/dist/components/collections-pciker/ui/CollectionPicker.js +105 -0
- package/dist/components/collections-pciker/ui/CollectionPicker.stories.d.ts +17 -0
- package/dist/components/collections-pciker/ui/CollectionPicker.stories.js +13 -0
- package/dist/components/index.d.ts +4 -3
- package/dist/components/index.js +4 -4
- package/dist/components/meta-data/api/query.d.ts +4 -0
- package/dist/components/meta-data/api/query.js +14 -0
- package/dist/components/meta-data/index.d.ts +0 -0
- package/dist/components/meta-data/index.js +0 -0
- package/dist/components/meta-data/model/meta.types.d.ts +7 -0
- package/dist/components/meta-data/model/meta.types.js +33 -0
- package/dist/components/meta-data/model/schema.d.ts +0 -0
- package/dist/components/meta-data/model/schema.js +0 -0
- package/dist/components/meta-data/model/useGetMetaFields.d.ts +12 -0
- package/dist/components/meta-data/model/useGetMetaFields.js +18 -0
- package/dist/components/meta-data/ui/ArticleRefMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/ArticleRefMetaField.js +37 -0
- package/dist/components/meta-data/ui/BlogRefMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/BlogRefMetaField.js +37 -0
- package/dist/components/meta-data/ui/BooleanMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/BooleanMetaField.js +27 -0
- package/dist/components/meta-data/ui/CollectionRefMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/CollectionRefMetaField.js +36 -0
- package/dist/components/meta-data/ui/ColorMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/ColorMetaField.js +17 -0
- package/dist/components/meta-data/ui/DateAndTimeMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/DateAndTimeMetaField.js +34 -0
- package/dist/components/meta-data/ui/DateMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/DateMetaField.js +33 -0
- package/dist/components/meta-data/ui/FloatMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/FloatMetaField.js +23 -0
- package/dist/components/meta-data/ui/MetaData.d.ts +13 -0
- package/dist/components/meta-data/ui/MetaData.js +45 -0
- package/dist/components/meta-data/ui/MetaData.stories.d.ts +10 -0
- package/dist/components/meta-data/ui/MetaData.stories.js +136 -0
- package/dist/components/meta-data/ui/MetaDataItem.d.ts +16 -0
- package/dist/components/meta-data/ui/MetaDataItem.js +247 -0
- package/dist/components/meta-data/ui/MetaDataTypePopup.d.ts +11 -0
- package/dist/components/meta-data/ui/MetaDataTypePopup.js +62 -0
- package/dist/components/meta-data/ui/MultilineTextMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/MultilineTextMetaField.js +15 -0
- package/dist/components/meta-data/ui/NumberMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/NumberMetaField.js +19 -0
- package/dist/components/meta-data/ui/PageRefMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/PageRefMetaField.js +6 -0
- package/dist/components/meta-data/ui/ProductRefMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/ProductRefMetaField.js +37 -0
- package/dist/components/meta-data/ui/SingleLineTextMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/SingleLineTextMetaField.js +18 -0
- package/dist/components/meta-data/ui/VariantRefMetaField.d.ts +3 -0
- package/dist/components/meta-data/ui/VariantRefMetaField.js +45 -0
- package/dist/components/products-picker/api/query.d.ts +8 -0
- package/dist/components/products-picker/api/query.js +24 -0
- package/dist/components/products-picker/index.d.ts +1 -0
- package/dist/components/products-picker/index.js +2 -0
- package/dist/components/products-picker/model/useProducts.d.ts +30 -0
- package/dist/components/products-picker/model/useProducts.js +46 -0
- package/dist/components/products-picker/ui/ProductPicker.d.ts +9 -0
- package/dist/components/products-picker/ui/ProductPicker.js +107 -0
- package/dist/components/products-picker/ui/ProductsPicker.stories.d.ts +17 -0
- package/dist/components/products-picker/ui/ProductsPicker.stories.js +13 -0
- package/dist/components/savebar/SaveBar.d.ts +2 -1
- package/dist/components/savebar/SaveBar.js +2 -1
- package/dist/components/variants-picker/api/query.d.ts +1 -0
- package/dist/components/variants-picker/api/query.js +2 -2
- package/dist/components/variants-picker/model/useVariants.d.ts +3 -0
- package/dist/components/variants-picker/model/useVariants.js +6 -3
- package/dist/components/variants-picker/ui/VariantsPicker.d.ts +2 -1
- package/dist/components/variants-picker/ui/VariantsPicker.js +3 -2
- package/dist/components/variants-picker/ui/VariantsPicker.stories.d.ts +2 -1
- package/dist/index.d.ts +2 -2
- package/dist/shared/graphql/gql.d.ts +27 -2
- package/dist/shared/graphql/gql.js +7 -2
- package/dist/shared/graphql/graphql.d.ts +2270 -108
- package/dist/shared/graphql/graphql.js +2058 -297
- package/dist/shared/loading/Loading.d.ts +2 -0
- package/dist/shared/loading/Loading.js +11 -0
- package/dist/shared/loading/index.d.ts +1 -0
- package/dist/shared/loading/index.js +2 -0
- package/dist/styles.css +85 -0
- package/package.json +4 -2
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { graphql } from "../../../shared/graphql/index.js";
|
|
2
|
+
const productsQuery = graphql(`
|
|
3
|
+
query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {
|
|
4
|
+
products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {
|
|
5
|
+
pageInfo {
|
|
6
|
+
endCursor
|
|
7
|
+
hasNextPage
|
|
8
|
+
hasPreviousPage
|
|
9
|
+
startCursor
|
|
10
|
+
}
|
|
11
|
+
edges {
|
|
12
|
+
node {
|
|
13
|
+
_id
|
|
14
|
+
title
|
|
15
|
+
image {
|
|
16
|
+
_id
|
|
17
|
+
url
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
`);
|
|
24
|
+
export { productsQuery };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ProductsPicker } from "./ui/ProductPicker";
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ProductFilterKeys } from "../../../shared/graphql/graphql";
|
|
2
|
+
type Props = {
|
|
3
|
+
skip?: boolean;
|
|
4
|
+
first?: number;
|
|
5
|
+
query?: string | null;
|
|
6
|
+
filterKeys?: ProductFilterKeys;
|
|
7
|
+
};
|
|
8
|
+
export declare const useProducts: (props?: Props) => {
|
|
9
|
+
products: {
|
|
10
|
+
__typename: "Product";
|
|
11
|
+
_id?: string | null;
|
|
12
|
+
title?: string | null;
|
|
13
|
+
image?: {
|
|
14
|
+
__typename: "Media";
|
|
15
|
+
_id?: string | null;
|
|
16
|
+
url?: string | null;
|
|
17
|
+
} | null;
|
|
18
|
+
}[] | undefined;
|
|
19
|
+
pageInfo: {
|
|
20
|
+
__typename: "PageInfo";
|
|
21
|
+
endCursor?: string | null;
|
|
22
|
+
hasNextPage?: boolean | null;
|
|
23
|
+
hasPreviousPage?: boolean | null;
|
|
24
|
+
startCursor?: string | null;
|
|
25
|
+
} | null | undefined;
|
|
26
|
+
isLoadingProducts: boolean;
|
|
27
|
+
error: import("@apollo/client").ErrorLike | undefined;
|
|
28
|
+
fetchMoreProducts: () => void;
|
|
29
|
+
};
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { useQuery } from "@apollo/client/react";
|
|
2
|
+
import { productsQuery } from "../api/query.js";
|
|
3
|
+
const useProducts = (props = {})=>{
|
|
4
|
+
const { first, query, filterKeys, skip } = props;
|
|
5
|
+
const { data, loading: isLoadingProducts, error, fetchMore } = useQuery(productsQuery, {
|
|
6
|
+
skip,
|
|
7
|
+
variables: {
|
|
8
|
+
first,
|
|
9
|
+
query,
|
|
10
|
+
filterKeys
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
const products = data?.products?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
|
|
14
|
+
const pageInfo = data?.products?.pageInfo;
|
|
15
|
+
const fetchMoreProducts = ()=>{
|
|
16
|
+
if (!pageInfo?.hasNextPage) return;
|
|
17
|
+
fetchMore({
|
|
18
|
+
variables: {
|
|
19
|
+
first,
|
|
20
|
+
query,
|
|
21
|
+
filterKeys,
|
|
22
|
+
after: pageInfo.endCursor
|
|
23
|
+
},
|
|
24
|
+
updateQuery (prev, { fetchMoreResult }) {
|
|
25
|
+
if (!fetchMoreResult.products?.edges || !prev.products?.edges) return prev;
|
|
26
|
+
return {
|
|
27
|
+
products: {
|
|
28
|
+
...fetchMoreResult.products,
|
|
29
|
+
edges: [
|
|
30
|
+
...prev.products.edges,
|
|
31
|
+
...fetchMoreResult.products.edges
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
return {
|
|
39
|
+
products,
|
|
40
|
+
pageInfo,
|
|
41
|
+
isLoadingProducts,
|
|
42
|
+
error,
|
|
43
|
+
fetchMoreProducts
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
export { useProducts };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type Props = {
|
|
2
|
+
title?: string;
|
|
3
|
+
initialIds?: string[];
|
|
4
|
+
limit?: number;
|
|
5
|
+
onClose?: () => void;
|
|
6
|
+
onOk?: (products: string[]) => void;
|
|
7
|
+
};
|
|
8
|
+
declare const ProductsPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default ProductsPicker;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { InfinityScroll } from "../../infinity-scroll/index.js";
|
|
3
|
+
import { useFilterQuery } from "../../../shared/lib/index.js";
|
|
4
|
+
import { BlockStack, Box, Button, Checkbox, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
|
|
5
|
+
import lodash from "lodash";
|
|
6
|
+
import { useState } from "react";
|
|
7
|
+
import { useProducts } from "../model/useProducts.js";
|
|
8
|
+
const ProductsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
|
|
9
|
+
const [selectedVariant, setSelectedVariant] = useState(initialIds);
|
|
10
|
+
const { query, debounceQuery, onChangeQuery } = useFilterQuery();
|
|
11
|
+
const { products, pageInfo, isLoadingProducts, fetchMoreProducts } = useProducts({
|
|
12
|
+
first: 20,
|
|
13
|
+
query: debounceQuery
|
|
14
|
+
});
|
|
15
|
+
const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedVariant.length : selectedVariant.length >= limit;
|
|
16
|
+
const handleSelectVariant = (productId)=>{
|
|
17
|
+
selectedVariant.includes(productId) ? setSelectedVariant((prev)=>prev.filter((id)=>productId !== id)) : setSelectedVariant((prev)=>[
|
|
18
|
+
...prev,
|
|
19
|
+
productId
|
|
20
|
+
]);
|
|
21
|
+
};
|
|
22
|
+
const handleOk = ()=>{
|
|
23
|
+
if (lodash.isFunction(onOk)) onOk(selectedVariant);
|
|
24
|
+
};
|
|
25
|
+
const buttonsJSX = /*#__PURE__*/ jsx(InlineStack, {
|
|
26
|
+
gap: 50,
|
|
27
|
+
justifyContent: "end",
|
|
28
|
+
children: /*#__PURE__*/ jsx(Button, {
|
|
29
|
+
disabled: lodash.isEmpty(selectedVariant) || !isSelected,
|
|
30
|
+
onClick: handleOk,
|
|
31
|
+
children: "Add"
|
|
32
|
+
})
|
|
33
|
+
});
|
|
34
|
+
return /*#__PURE__*/ jsx(Modal, {
|
|
35
|
+
open: true,
|
|
36
|
+
title: title || "Products",
|
|
37
|
+
bodyPadding: 0,
|
|
38
|
+
buttons: buttonsJSX,
|
|
39
|
+
onClose: onClose,
|
|
40
|
+
children: /*#__PURE__*/ jsxs(BlockStack, {
|
|
41
|
+
children: [
|
|
42
|
+
/*#__PURE__*/ jsx(Box, {
|
|
43
|
+
className: "border-b border-b-[#ebebeb]! h",
|
|
44
|
+
padding: 60,
|
|
45
|
+
children: /*#__PURE__*/ jsx(Input, {
|
|
46
|
+
size: "sm",
|
|
47
|
+
type: "search",
|
|
48
|
+
value: query ?? "",
|
|
49
|
+
onChange: (event)=>onChangeQuery(event.target.value)
|
|
50
|
+
})
|
|
51
|
+
}),
|
|
52
|
+
isLoadingProducts ? /*#__PURE__*/ jsx(InlineStack, {
|
|
53
|
+
justifyContent: "center",
|
|
54
|
+
padding: 80,
|
|
55
|
+
children: /*#__PURE__*/ jsx(Spinner, {
|
|
56
|
+
size: "md"
|
|
57
|
+
})
|
|
58
|
+
}) : /*#__PURE__*/ jsxs(BlockStack, {
|
|
59
|
+
children: [
|
|
60
|
+
products?.map((product)=>/*#__PURE__*/ jsxs(InlineStack, {
|
|
61
|
+
stack: "full",
|
|
62
|
+
className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
|
|
63
|
+
gapX: 60,
|
|
64
|
+
padding: 60,
|
|
65
|
+
onClick: ()=>handleSelectVariant(String(product._id)),
|
|
66
|
+
children: [
|
|
67
|
+
/*#__PURE__*/ jsxs(InlineStack, {
|
|
68
|
+
alignItems: "center",
|
|
69
|
+
gapX: 60,
|
|
70
|
+
children: [
|
|
71
|
+
/*#__PURE__*/ jsx(Box, {
|
|
72
|
+
children: /*#__PURE__*/ jsx(Checkbox, {
|
|
73
|
+
checked: selectedVariant.includes(String(product._id)),
|
|
74
|
+
onChange: ()=>{}
|
|
75
|
+
})
|
|
76
|
+
}),
|
|
77
|
+
/*#__PURE__*/ jsx(Box, {
|
|
78
|
+
children: /*#__PURE__*/ jsx(Image, {
|
|
79
|
+
size: "xs",
|
|
80
|
+
url: String(product.image?.url)
|
|
81
|
+
})
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
}),
|
|
85
|
+
/*#__PURE__*/ jsx(BlockStack, {
|
|
86
|
+
gapY: 30,
|
|
87
|
+
justifyContent: "center",
|
|
88
|
+
children: /*#__PURE__*/ jsx(Text, {
|
|
89
|
+
size: "sm",
|
|
90
|
+
color: "secondary",
|
|
91
|
+
truncate: "truncate-1",
|
|
92
|
+
children: product.title
|
|
93
|
+
})
|
|
94
|
+
})
|
|
95
|
+
]
|
|
96
|
+
}, product._id)),
|
|
97
|
+
pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
|
|
98
|
+
onFetch: fetchMoreProducts
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
})
|
|
102
|
+
]
|
|
103
|
+
})
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
const ProductPicker = ProductsPicker;
|
|
107
|
+
export { ProductPicker as default };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
declare const meta: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: ({ title, initialIds, limit, onClose, onOk }: {
|
|
4
|
+
title?: string;
|
|
5
|
+
initialIds?: string[];
|
|
6
|
+
limit?: number;
|
|
7
|
+
onClose?: () => void;
|
|
8
|
+
onOk?: (products: string[]) => void;
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
export declare const Default: {
|
|
13
|
+
args: {
|
|
14
|
+
primary: boolean;
|
|
15
|
+
label: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import ProductPicker from "./ProductPicker.js";
|
|
2
|
+
const meta = {
|
|
3
|
+
title: "Example/ProductsPicker",
|
|
4
|
+
component: ProductPicker
|
|
5
|
+
};
|
|
6
|
+
const ProductsPicker_stories = meta;
|
|
7
|
+
const Default = {
|
|
8
|
+
args: {
|
|
9
|
+
primary: true,
|
|
10
|
+
label: "Button"
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
export { Default, ProductsPicker_stories as default };
|
|
@@ -2,10 +2,11 @@ interface IProps {
|
|
|
2
2
|
open?: boolean;
|
|
3
3
|
confirmationOnLeave?: boolean;
|
|
4
4
|
children?: React.ReactNode;
|
|
5
|
+
loading?: boolean;
|
|
5
6
|
onDiscard?: () => void;
|
|
6
7
|
onSave?: () => void;
|
|
7
8
|
onShow?: () => void;
|
|
8
9
|
onHide?: () => void;
|
|
9
10
|
}
|
|
10
|
-
declare const SaveBar: ({ open, confirmationOnLeave, children, onDiscard, onSave, onHide, onShow
|
|
11
|
+
declare const SaveBar: ({ open, confirmationOnLeave, loading, children, onDiscard, onSave, onHide, onShow }: IProps) => null;
|
|
11
12
|
export default SaveBar;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { useEffect } from "react";
|
|
2
|
-
const SaveBar = ({ open, confirmationOnLeave, children, onDiscard, onSave, onHide, onShow })=>{
|
|
2
|
+
const SaveBar = ({ open, confirmationOnLeave, loading, children, onDiscard, onSave, onHide, onShow })=>{
|
|
3
3
|
useEffect(()=>{
|
|
4
4
|
window.initSaveBar({
|
|
5
5
|
open,
|
|
6
6
|
children: open ? children : null,
|
|
7
|
+
loading,
|
|
7
8
|
confirmationOnLeave,
|
|
8
9
|
onDiscard,
|
|
9
10
|
onSave,
|
|
@@ -4,4 +4,5 @@ export declare const variantsQuery: import("@graphql-typed-document-node/core").
|
|
|
4
4
|
first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
|
|
5
5
|
last?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
|
|
6
6
|
query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
|
|
7
|
+
filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").VariantFilterKeys>;
|
|
7
8
|
}>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { graphql } from "../../../shared/graphql/index.js";
|
|
2
2
|
const variantsQuery = graphql(`
|
|
3
|
-
query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String) {
|
|
4
|
-
variants(after: $after, before: $before, first: $first, last: $last, query: $query) {
|
|
3
|
+
query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {
|
|
4
|
+
variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {
|
|
5
5
|
pageInfo {
|
|
6
6
|
endCursor
|
|
7
7
|
hasNextPage
|
|
@@ -2,12 +2,14 @@ import { useQuery } from "@apollo/client/react";
|
|
|
2
2
|
import { useRef } from "react";
|
|
3
3
|
import { variantsQuery } from "../api/query.js";
|
|
4
4
|
const useVariants = (props = {})=>{
|
|
5
|
-
const { first, query } = props;
|
|
5
|
+
const { skip, first, query, filterKeys } = props;
|
|
6
6
|
const refArray = useRef([]);
|
|
7
7
|
const { data, loading: isLoadingVariants, error, fetchMore } = useQuery(variantsQuery, {
|
|
8
|
+
skip,
|
|
8
9
|
variables: {
|
|
9
10
|
first,
|
|
10
|
-
query
|
|
11
|
+
query,
|
|
12
|
+
filterKeys
|
|
11
13
|
}
|
|
12
14
|
});
|
|
13
15
|
const variants = data?.variants?.edges?.map((edge)=>edge?.node).filter((node)=>null != node) ?? refArray.current;
|
|
@@ -18,7 +20,8 @@ const useVariants = (props = {})=>{
|
|
|
18
20
|
variables: {
|
|
19
21
|
first,
|
|
20
22
|
query,
|
|
21
|
-
after: pageInfo.endCursor
|
|
23
|
+
after: pageInfo.endCursor,
|
|
24
|
+
filterKeys
|
|
22
25
|
},
|
|
23
26
|
updateQuery (prev, { fetchMoreResult }) {
|
|
24
27
|
if (!fetchMoreResult.variants?.edges || !prev.variants?.edges) return prev;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
type Props = {
|
|
2
2
|
title?: string;
|
|
3
3
|
initialIds?: string[];
|
|
4
|
+
limit?: number;
|
|
4
5
|
onClose?: () => void;
|
|
5
6
|
onOk?: (variants: string[]) => void;
|
|
6
7
|
};
|
|
7
|
-
declare const VariantsPicker: ({ title, initialIds, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare const VariantsPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export default VariantsPicker;
|
|
@@ -5,13 +5,14 @@ import { Badge, BlockStack, Box, Button, Checkbox, Image, InlineStack, Input, Mo
|
|
|
5
5
|
import lodash from "lodash";
|
|
6
6
|
import { useState } from "react";
|
|
7
7
|
import { useVariants } from "../model/useVariants.js";
|
|
8
|
-
const VariantsPicker = ({ title, initialIds = [], onClose, onOk })=>{
|
|
8
|
+
const VariantsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
|
|
9
9
|
const [selectedVariant, setSelectedVariant] = useState(initialIds);
|
|
10
10
|
const { query, debounceQuery, onChangeQuery } = useFilterQuery();
|
|
11
11
|
const { variants, pageInfo, isLoadingVariants, fetchMoreVariants } = useVariants({
|
|
12
12
|
first: 20,
|
|
13
13
|
query: debounceQuery
|
|
14
14
|
});
|
|
15
|
+
const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedVariant.length : selectedVariant.length >= limit;
|
|
15
16
|
const handleSelectVariant = (variantId)=>{
|
|
16
17
|
selectedVariant.includes(variantId) ? setSelectedVariant((prev)=>prev.filter((id)=>variantId !== id)) : setSelectedVariant((prev)=>[
|
|
17
18
|
...prev,
|
|
@@ -25,7 +26,7 @@ const VariantsPicker = ({ title, initialIds = [], onClose, onOk })=>{
|
|
|
25
26
|
gap: 50,
|
|
26
27
|
justifyContent: "end",
|
|
27
28
|
children: /*#__PURE__*/ jsx(Button, {
|
|
28
|
-
disabled: lodash.isEmpty(selectedVariant),
|
|
29
|
+
disabled: lodash.isEmpty(selectedVariant) || !isSelected,
|
|
29
30
|
onClick: handleOk,
|
|
30
31
|
children: "Add"
|
|
31
32
|
})
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
declare const meta: {
|
|
2
2
|
title: string;
|
|
3
|
-
component: ({ title, initialIds, onClose, onOk }: {
|
|
3
|
+
component: ({ title, initialIds, limit, onClose, onOk }: {
|
|
4
4
|
title?: string;
|
|
5
5
|
initialIds?: string[];
|
|
6
|
+
limit?: number;
|
|
6
7
|
onClose?: () => void;
|
|
7
8
|
onOk?: (variants: string[]) => void;
|
|
8
9
|
}) => import("react/jsx-runtime").JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "./styles.css";
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
2
|
+
export * from "./components";
|
|
3
|
+
export * from "./hooks";
|
|
@@ -12,12 +12,17 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
|
|
|
12
12
|
* Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
|
|
13
13
|
*/
|
|
14
14
|
type Documents = {
|
|
15
|
+
"query Articles($filterKeys: ArticleFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n articles(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}": typeof types.ArticlesDocument;
|
|
16
|
+
"query Blogs($filterKeys: BlogFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n blogs(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n}": typeof types.BlogsDocument;
|
|
17
|
+
"query Collections($skip: Int, $filterKeys: CollectionFilterKeys, $query: String) {\n collections(skip: $skip, filterKeys: $filterKeys, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}": typeof types.CollectionsDocument;
|
|
15
18
|
"\n query Medias(\n $after: ID\n $before: ID\n $first: Int\n $last: Int\n $query: String\n $reverse: Boolean\n $sortKey: MediaSortKeys\n $filterKeys: MediaFilterKeys\n ) {\n medias(\n after: $after\n before: $before\n first: $first\n last: $last\n query: $query\n reverse: $reverse\n sortKey: $sortKey\n filterKeys: $filterKeys\n ) {\n edges {\n node {\n _id\n file_name\n url\n size\n type\n mimetype\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n }\n": typeof types.MediasDocument;
|
|
16
19
|
"\n query StoragePlan {\n plan {\n storage\n package {\n _id\n storage\n }\n }\n }\n": typeof types.StoragePlanDocument;
|
|
17
20
|
"\n query MediaUsage {\n mediaUsage\n }\n": typeof types.MediaUsageDocument;
|
|
18
21
|
"\n mutation AddMedias($input: [Upload!]!) {\n addMedias(input: $input) {\n _id\n file_name\n url\n size\n }\n }\n": typeof types.AddMediasDocument;
|
|
19
22
|
"\n mutation DeleteMedias($cursors: [ID!]!) {\n deleteMedias(cursors: $cursors) {\n message\n }\n }\n": typeof types.DeleteMediasDocument;
|
|
20
|
-
"
|
|
23
|
+
"query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n metafields(filterKeys: $filterKeys, first: $first) {\n edges {\n node {\n _id\n entry\n name\n type\n }\n }\n }\n}": typeof types.MetafieldsDocument;
|
|
24
|
+
"\n query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {\n products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n }\n": typeof types.ProductsDocument;
|
|
25
|
+
"\n query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {\n variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n option1\n option2\n option3\n image {\n _id\n url\n }\n product {\n _id\n title\n }\n }\n }\n }\n }\n": typeof types.VariantsDocument;
|
|
21
26
|
};
|
|
22
27
|
declare const documents: Documents;
|
|
23
28
|
/**
|
|
@@ -33,6 +38,18 @@ declare const documents: Documents;
|
|
|
33
38
|
* Please regenerate the types.
|
|
34
39
|
*/
|
|
35
40
|
export declare function graphql(source: string): unknown;
|
|
41
|
+
/**
|
|
42
|
+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
|
43
|
+
*/
|
|
44
|
+
export declare function graphql(source: "query Articles($filterKeys: ArticleFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n articles(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}"): (typeof documents)["query Articles($filterKeys: ArticleFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n articles(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}"];
|
|
45
|
+
/**
|
|
46
|
+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
|
47
|
+
*/
|
|
48
|
+
export declare function graphql(source: "query Blogs($filterKeys: BlogFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n blogs(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n}"): (typeof documents)["query Blogs($filterKeys: BlogFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n blogs(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n}"];
|
|
49
|
+
/**
|
|
50
|
+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
|
51
|
+
*/
|
|
52
|
+
export declare function graphql(source: "query Collections($skip: Int, $filterKeys: CollectionFilterKeys, $query: String) {\n collections(skip: $skip, filterKeys: $filterKeys, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}"): (typeof documents)["query Collections($skip: Int, $filterKeys: CollectionFilterKeys, $query: String) {\n collections(skip: $skip, filterKeys: $filterKeys, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}"];
|
|
36
53
|
/**
|
|
37
54
|
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
|
38
55
|
*/
|
|
@@ -56,6 +73,14 @@ export declare function graphql(source: "\n mutation DeleteMedias($cursors: [ID
|
|
|
56
73
|
/**
|
|
57
74
|
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
|
58
75
|
*/
|
|
59
|
-
export declare function graphql(source: "
|
|
76
|
+
export declare function graphql(source: "query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n metafields(filterKeys: $filterKeys, first: $first) {\n edges {\n node {\n _id\n entry\n name\n type\n }\n }\n }\n}"): (typeof documents)["query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n metafields(filterKeys: $filterKeys, first: $first) {\n edges {\n node {\n _id\n entry\n name\n type\n }\n }\n }\n}"];
|
|
77
|
+
/**
|
|
78
|
+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
|
79
|
+
*/
|
|
80
|
+
export declare function graphql(source: "\n query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {\n products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n }\n"): (typeof documents)["\n query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {\n products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n }\n"];
|
|
81
|
+
/**
|
|
82
|
+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
|
83
|
+
*/
|
|
84
|
+
export declare function graphql(source: "\n query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {\n variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n option1\n option2\n option3\n image {\n _id\n url\n }\n product {\n _id\n title\n }\n }\n }\n }\n }\n"): (typeof documents)["\n query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {\n variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n option1\n option2\n option3\n image {\n _id\n url\n }\n product {\n _id\n title\n }\n }\n }\n }\n }\n"];
|
|
60
85
|
export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
|
|
61
86
|
export {};
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
import { AddMediasDocument, DeleteMediasDocument, MediaUsageDocument, MediasDocument, StoragePlanDocument, VariantsDocument } from "./graphql.js";
|
|
1
|
+
import { AddMediasDocument, ArticlesDocument, BlogsDocument, CollectionsDocument, DeleteMediasDocument, MediaUsageDocument, MediasDocument, MetafieldsDocument, ProductsDocument, StoragePlanDocument, VariantsDocument } from "./graphql.js";
|
|
2
2
|
const documents = {
|
|
3
|
+
"query Articles($filterKeys: ArticleFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n articles(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}": ArticlesDocument,
|
|
4
|
+
"query Blogs($filterKeys: BlogFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n blogs(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n}": BlogsDocument,
|
|
5
|
+
"query Collections($skip: Int, $filterKeys: CollectionFilterKeys, $query: String) {\n collections(skip: $skip, filterKeys: $filterKeys, query: $query) {\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}": CollectionsDocument,
|
|
3
6
|
"\n query Medias(\n $after: ID\n $before: ID\n $first: Int\n $last: Int\n $query: String\n $reverse: Boolean\n $sortKey: MediaSortKeys\n $filterKeys: MediaFilterKeys\n ) {\n medias(\n after: $after\n before: $before\n first: $first\n last: $last\n query: $query\n reverse: $reverse\n sortKey: $sortKey\n filterKeys: $filterKeys\n ) {\n edges {\n node {\n _id\n file_name\n url\n size\n type\n mimetype\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n }\n": MediasDocument,
|
|
4
7
|
"\n query StoragePlan {\n plan {\n storage\n package {\n _id\n storage\n }\n }\n }\n": StoragePlanDocument,
|
|
5
8
|
"\n query MediaUsage {\n mediaUsage\n }\n": MediaUsageDocument,
|
|
6
9
|
"\n mutation AddMedias($input: [Upload!]!) {\n addMedias(input: $input) {\n _id\n file_name\n url\n size\n }\n }\n": AddMediasDocument,
|
|
7
10
|
"\n mutation DeleteMedias($cursors: [ID!]!) {\n deleteMedias(cursors: $cursors) {\n message\n }\n }\n": DeleteMediasDocument,
|
|
8
|
-
"
|
|
11
|
+
"query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {\n metafields(filterKeys: $filterKeys, first: $first) {\n edges {\n node {\n _id\n entry\n name\n type\n }\n }\n }\n}": MetafieldsDocument,
|
|
12
|
+
"\n query Products($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: ProductFilterKeys) {\n products(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n title\n image {\n _id\n url\n }\n }\n }\n }\n }\n": ProductsDocument,
|
|
13
|
+
"\n query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String,$filterKeys: VariantFilterKeys) {\n variants(after: $after, before: $before, first: $first, last: $last, query: $query,filterKeys: $filterKeys) {\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n edges {\n node {\n _id\n option1\n option2\n option3\n image {\n _id\n url\n }\n product {\n _id\n title\n }\n }\n }\n }\n }\n": VariantsDocument
|
|
9
14
|
};
|
|
10
15
|
function graphql(source) {
|
|
11
16
|
return documents[source] ?? {};
|