@gem-sdk/core 1.23.14 → 1.23.20
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.
|
@@ -2,11 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var useSWR = require('swr');
|
|
6
|
-
var productValueLabel_generated = require('../graphql/queries/product-value-label.generated.js');
|
|
7
|
-
var variantPresets = require('../components/src/product/helpers/variant-presets.js');
|
|
8
5
|
var shop = require('./shop.js');
|
|
9
|
-
var useFetchHandle = require('./useFetchHandle.js');
|
|
10
6
|
|
|
11
7
|
const initialSwatchOptionValue = {
|
|
12
8
|
label: '',
|
|
@@ -18,35 +14,16 @@ const initialGlobalSwatchesData = {
|
|
|
18
14
|
optionType: '',
|
|
19
15
|
optionValues: []
|
|
20
16
|
};
|
|
21
|
-
let swatchChange = false;
|
|
22
|
-
let colorChange = false;
|
|
23
17
|
const useSwatchesOptions = (options)=>{
|
|
24
|
-
const fetcher = useFetchHandle.useFetchHandle();
|
|
25
18
|
const { swatches } = shop.useSwatches();
|
|
26
|
-
const { data: productOptionName } = useSWR({}, async ()=>fetchProductValueLabel(fetcher), {});
|
|
27
|
-
const swatchesTitleList = [];
|
|
28
|
-
swatches?.forEach((el)=>{
|
|
29
|
-
swatchesTitleList.push(el.optionTitle);
|
|
30
|
-
});
|
|
31
|
-
productOptionName?.productOptionName?.forEach((el)=>{
|
|
32
|
-
if (!swatchesTitleList.includes(el)) {
|
|
33
|
-
swatchChange = true;
|
|
34
|
-
swatches?.push({
|
|
35
|
-
optionTitle: el,
|
|
36
|
-
optionType: 'rectangle_list',
|
|
37
|
-
optionValues: []
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
19
|
if (!options) return [];
|
|
42
|
-
|
|
43
|
-
const result = options?.map((option)=>{
|
|
20
|
+
return options?.map((option)=>{
|
|
44
21
|
const swatchOption = swatches?.find((sw)=>sw?.optionTitle === option?.name) || {
|
|
45
22
|
...initialGlobalSwatchesData
|
|
46
23
|
};
|
|
47
24
|
return {
|
|
48
25
|
...option,
|
|
49
|
-
optionType: swatchOption
|
|
26
|
+
optionType: swatchOption ? swatchOption.optionType : '',
|
|
50
27
|
values: option.values?.map((val)=>{
|
|
51
28
|
const swatchValue = swatchOption && swatchOption?.optionValues?.find((swatOp)=>swatOp?.label === val?.label) || {
|
|
52
29
|
...initialSwatchOptionValue
|
|
@@ -59,78 +36,6 @@ const useSwatchesOptions = (options)=>{
|
|
|
59
36
|
})
|
|
60
37
|
};
|
|
61
38
|
});
|
|
62
|
-
if (swatches?.length && (swatchChange || colorChange)) {
|
|
63
|
-
window?.parent?.postMessage?.(JSON.stringify({
|
|
64
|
-
type: 'update-swatches',
|
|
65
|
-
swatches
|
|
66
|
-
}), '*');
|
|
67
|
-
swatchChange = false;
|
|
68
|
-
colorChange = false;
|
|
69
|
-
return [];
|
|
70
|
-
}
|
|
71
|
-
return result;
|
|
72
|
-
};
|
|
73
|
-
const getColorDefault = (label, color)=>{
|
|
74
|
-
const colorByLabel = label ? variantPresets.colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
75
|
-
const colorArray = colorByLabel ? [
|
|
76
|
-
colorByLabel
|
|
77
|
-
] : [];
|
|
78
|
-
const firstColor = color?.[0];
|
|
79
|
-
if (!firstColor && colorArray.length) colorChange = true;
|
|
80
|
-
return firstColor ? [
|
|
81
|
-
firstColor
|
|
82
|
-
] : colorArray;
|
|
83
|
-
};
|
|
84
|
-
const getProductOptionsLabelByName = (options, name)=>{
|
|
85
|
-
const labels = [];
|
|
86
|
-
const optionByName = options.find((op)=>op.name === name);
|
|
87
|
-
optionByName?.values.forEach((val)=>{
|
|
88
|
-
labels.push(val.label ?? '');
|
|
89
|
-
});
|
|
90
|
-
return labels;
|
|
91
|
-
};
|
|
92
|
-
const getSwatchesOptionsLabel = (options)=>{
|
|
93
|
-
const labels = [];
|
|
94
|
-
options.forEach((op)=>{
|
|
95
|
-
labels.push(op.label ?? '');
|
|
96
|
-
return;
|
|
97
|
-
});
|
|
98
|
-
return labels;
|
|
99
|
-
};
|
|
100
|
-
const setDefaultSwatches = (swatches, options)=>{
|
|
101
|
-
if (swatches) {
|
|
102
|
-
swatches?.map((sw)=>{
|
|
103
|
-
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
104
|
-
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
105
|
-
productLabels.forEach((label)=>{
|
|
106
|
-
if (!swLabels.includes(label)) {
|
|
107
|
-
sw.optionValues.push({
|
|
108
|
-
label,
|
|
109
|
-
colors: getColorDefault(label),
|
|
110
|
-
imageUrl: ''
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
sw.optionValues.map((op)=>{
|
|
115
|
-
return {
|
|
116
|
-
...op,
|
|
117
|
-
colors: getColorDefault(op.label, op.colors)
|
|
118
|
-
};
|
|
119
|
-
});
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
return swatches;
|
|
123
|
-
};
|
|
124
|
-
const fetchProductValueLabel = async (fetcher)=>{
|
|
125
|
-
const initVariables = {};
|
|
126
|
-
const query = async (variables)=>{
|
|
127
|
-
const response = await fetcher([
|
|
128
|
-
productValueLabel_generated.ProductOptionNameDocument,
|
|
129
|
-
variables
|
|
130
|
-
]);
|
|
131
|
-
return response;
|
|
132
|
-
};
|
|
133
|
-
return query(initVariables);
|
|
134
39
|
};
|
|
135
40
|
|
|
136
41
|
exports.default = useSwatchesOptions;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import useSWR from 'swr';
|
|
2
|
-
import { ProductOptionNameDocument } from '../graphql/queries/product-value-label.generated.js';
|
|
3
|
-
import { colorPreset } from '../components/src/product/helpers/variant-presets.js';
|
|
4
1
|
import { useSwatches } from './shop.js';
|
|
5
|
-
import { useFetchHandle } from './useFetchHandle.js';
|
|
6
2
|
|
|
7
3
|
const initialSwatchOptionValue = {
|
|
8
4
|
label: '',
|
|
@@ -14,35 +10,16 @@ const initialGlobalSwatchesData = {
|
|
|
14
10
|
optionType: '',
|
|
15
11
|
optionValues: []
|
|
16
12
|
};
|
|
17
|
-
let swatchChange = false;
|
|
18
|
-
let colorChange = false;
|
|
19
13
|
const useSwatchesOptions = (options)=>{
|
|
20
|
-
const fetcher = useFetchHandle();
|
|
21
14
|
const { swatches } = useSwatches();
|
|
22
|
-
const { data: productOptionName } = useSWR({}, async ()=>fetchProductValueLabel(fetcher), {});
|
|
23
|
-
const swatchesTitleList = [];
|
|
24
|
-
swatches?.forEach((el)=>{
|
|
25
|
-
swatchesTitleList.push(el.optionTitle);
|
|
26
|
-
});
|
|
27
|
-
productOptionName?.productOptionName?.forEach((el)=>{
|
|
28
|
-
if (!swatchesTitleList.includes(el)) {
|
|
29
|
-
swatchChange = true;
|
|
30
|
-
swatches?.push({
|
|
31
|
-
optionTitle: el,
|
|
32
|
-
optionType: 'rectangle_list',
|
|
33
|
-
optionValues: []
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
15
|
if (!options) return [];
|
|
38
|
-
|
|
39
|
-
const result = options?.map((option)=>{
|
|
16
|
+
return options?.map((option)=>{
|
|
40
17
|
const swatchOption = swatches?.find((sw)=>sw?.optionTitle === option?.name) || {
|
|
41
18
|
...initialGlobalSwatchesData
|
|
42
19
|
};
|
|
43
20
|
return {
|
|
44
21
|
...option,
|
|
45
|
-
optionType: swatchOption
|
|
22
|
+
optionType: swatchOption ? swatchOption.optionType : '',
|
|
46
23
|
values: option.values?.map((val)=>{
|
|
47
24
|
const swatchValue = swatchOption && swatchOption?.optionValues?.find((swatOp)=>swatOp?.label === val?.label) || {
|
|
48
25
|
...initialSwatchOptionValue
|
|
@@ -55,78 +32,6 @@ const useSwatchesOptions = (options)=>{
|
|
|
55
32
|
})
|
|
56
33
|
};
|
|
57
34
|
});
|
|
58
|
-
if (swatches?.length && (swatchChange || colorChange)) {
|
|
59
|
-
window?.parent?.postMessage?.(JSON.stringify({
|
|
60
|
-
type: 'update-swatches',
|
|
61
|
-
swatches
|
|
62
|
-
}), '*');
|
|
63
|
-
swatchChange = false;
|
|
64
|
-
colorChange = false;
|
|
65
|
-
return [];
|
|
66
|
-
}
|
|
67
|
-
return result;
|
|
68
|
-
};
|
|
69
|
-
const getColorDefault = (label, color)=>{
|
|
70
|
-
const colorByLabel = label ? colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
71
|
-
const colorArray = colorByLabel ? [
|
|
72
|
-
colorByLabel
|
|
73
|
-
] : [];
|
|
74
|
-
const firstColor = color?.[0];
|
|
75
|
-
if (!firstColor && colorArray.length) colorChange = true;
|
|
76
|
-
return firstColor ? [
|
|
77
|
-
firstColor
|
|
78
|
-
] : colorArray;
|
|
79
|
-
};
|
|
80
|
-
const getProductOptionsLabelByName = (options, name)=>{
|
|
81
|
-
const labels = [];
|
|
82
|
-
const optionByName = options.find((op)=>op.name === name);
|
|
83
|
-
optionByName?.values.forEach((val)=>{
|
|
84
|
-
labels.push(val.label ?? '');
|
|
85
|
-
});
|
|
86
|
-
return labels;
|
|
87
|
-
};
|
|
88
|
-
const getSwatchesOptionsLabel = (options)=>{
|
|
89
|
-
const labels = [];
|
|
90
|
-
options.forEach((op)=>{
|
|
91
|
-
labels.push(op.label ?? '');
|
|
92
|
-
return;
|
|
93
|
-
});
|
|
94
|
-
return labels;
|
|
95
|
-
};
|
|
96
|
-
const setDefaultSwatches = (swatches, options)=>{
|
|
97
|
-
if (swatches) {
|
|
98
|
-
swatches?.map((sw)=>{
|
|
99
|
-
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
100
|
-
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
101
|
-
productLabels.forEach((label)=>{
|
|
102
|
-
if (!swLabels.includes(label)) {
|
|
103
|
-
sw.optionValues.push({
|
|
104
|
-
label,
|
|
105
|
-
colors: getColorDefault(label),
|
|
106
|
-
imageUrl: ''
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
sw.optionValues.map((op)=>{
|
|
111
|
-
return {
|
|
112
|
-
...op,
|
|
113
|
-
colors: getColorDefault(op.label, op.colors)
|
|
114
|
-
};
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
return swatches;
|
|
119
|
-
};
|
|
120
|
-
const fetchProductValueLabel = async (fetcher)=>{
|
|
121
|
-
const initVariables = {};
|
|
122
|
-
const query = async (variables)=>{
|
|
123
|
-
const response = await fetcher([
|
|
124
|
-
ProductOptionNameDocument,
|
|
125
|
-
variables
|
|
126
|
-
]);
|
|
127
|
-
return response;
|
|
128
|
-
};
|
|
129
|
-
return query(initVariables);
|
|
130
35
|
};
|
|
131
36
|
|
|
132
37
|
export { useSwatchesOptions as default };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9730,26 +9730,7 @@ declare const useSuspenseFetch: <T>(key: string | any[], promise: () => Promise<
|
|
|
9730
9730
|
data: T;
|
|
9731
9731
|
};
|
|
9732
9732
|
|
|
9733
|
-
declare const useSwatchesOptions: (options?: ProductOption[]) =>
|
|
9734
|
-
optionType: string;
|
|
9735
|
-
values: {
|
|
9736
|
-
colors: string[];
|
|
9737
|
-
imageUrl: string;
|
|
9738
|
-
baseID?: Maybe<string>;
|
|
9739
|
-
createdAt?: any;
|
|
9740
|
-
deletedAt?: any;
|
|
9741
|
-
id: string;
|
|
9742
|
-
isDefault?: Maybe<boolean>;
|
|
9743
|
-
label?: Maybe<string>;
|
|
9744
|
-
platform?: Maybe<ProductOptionValuePlatform>;
|
|
9745
|
-
position?: Maybe<number>;
|
|
9746
|
-
sortOrder?: Maybe<number>;
|
|
9747
|
-
updatedAt?: any;
|
|
9748
|
-
}[];
|
|
9749
|
-
id: string;
|
|
9750
|
-
name?: Maybe<string>;
|
|
9751
|
-
position?: Maybe<number>;
|
|
9752
|
-
}[];
|
|
9733
|
+
declare const useSwatchesOptions: (options?: ProductOption[]) => ProductOption[];
|
|
9753
9734
|
|
|
9754
9735
|
declare const useInitialSwatchesOptions: (options?: ProductOption[]) => never[] | undefined;
|
|
9755
9736
|
|