@makeswift/runtime 0.0.20 → 0.1.0-next.0
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/Box.cjs.js +502 -0
- package/dist/Box.cjs.js.map +1 -0
- package/dist/Box.es.js +496 -0
- package/dist/Box.es.js.map +1 -0
- package/dist/Button.cjs.js +308 -0
- package/dist/Button.cjs.js.map +1 -0
- package/dist/Button.es.js +301 -0
- package/dist/Button.es.js.map +1 -0
- package/dist/Carousel.cjs.js +487 -0
- package/dist/Carousel.cjs.js.map +1 -0
- package/dist/Carousel.es.js +481 -0
- package/dist/Carousel.es.js.map +1 -0
- package/dist/Countdown.cjs.js +340 -0
- package/dist/Countdown.cjs.js.map +1 -0
- package/dist/Countdown.es.js +334 -0
- package/dist/Countdown.es.js.map +1 -0
- package/dist/Divider.cjs.js +115 -0
- package/dist/Divider.cjs.js.map +1 -0
- package/dist/Divider.es.js +109 -0
- package/dist/Divider.es.js.map +1 -0
- package/dist/Embed.cjs.js +129 -0
- package/dist/Embed.cjs.js.map +1 -0
- package/dist/Embed.es.js +123 -0
- package/dist/Embed.es.js.map +1 -0
- package/dist/Form.cjs.js +1705 -0
- package/dist/Form.cjs.js.map +1 -0
- package/dist/Form.es.js +1677 -0
- package/dist/Form.es.js.map +1 -0
- package/dist/Image.cjs2.js +148 -0
- package/dist/Image.cjs2.js.map +1 -0
- package/dist/Image.es2.js +141 -0
- package/dist/Image.es2.js.map +1 -0
- package/dist/Navigation.cjs.js +736 -0
- package/dist/Navigation.cjs.js.map +1 -0
- package/dist/Navigation.es.js +710 -0
- package/dist/Navigation.es.js.map +1 -0
- package/dist/Root.cjs.js +143 -0
- package/dist/Root.cjs.js.map +1 -0
- package/dist/Root.es.js +137 -0
- package/dist/Root.es.js.map +1 -0
- package/dist/SocialLinks.cjs.js +900 -0
- package/dist/SocialLinks.cjs.js.map +1 -0
- package/dist/SocialLinks.es.js +874 -0
- package/dist/SocialLinks.es.js.map +1 -0
- package/dist/Text.cjs.js +475 -0
- package/dist/Text.cjs.js.map +1 -0
- package/dist/Text.es.js +467 -0
- package/dist/Text.es.js.map +1 -0
- package/dist/Video.cjs.js +121 -0
- package/dist/Video.cjs.js.map +1 -0
- package/dist/Video.es.js +114 -0
- package/dist/Video.es.js.map +1 -0
- package/dist/builder.cjs.js +1 -0
- package/dist/builder.cjs.js.map +1 -1
- package/dist/builder.es.js +1 -0
- package/dist/builder.es.js.map +1 -1
- package/dist/color.cjs.js +8 -0
- package/dist/color.cjs.js.map +1 -0
- package/dist/color.es.js +6 -0
- package/dist/color.es.js.map +1 -0
- package/dist/components.cjs.js +81 -58
- package/dist/components.cjs.js.map +1 -1
- package/dist/components.es.js +42 -18
- package/dist/components.es.js.map +1 -1
- package/dist/control-serialization.cjs.js +1 -0
- package/dist/control-serialization.cjs.js.map +1 -1
- package/dist/control-serialization.es.js +1 -0
- package/dist/control-serialization.es.js.map +1 -1
- package/dist/controls.cjs.js +7 -5
- package/dist/controls.cjs.js.map +1 -1
- package/dist/controls.es.js +2 -1
- package/dist/controls.es.js.map +1 -1
- package/dist/cssMediaRules.cjs.js +222 -0
- package/dist/cssMediaRules.cjs.js.map +1 -0
- package/dist/cssMediaRules.es.js +213 -0
- package/dist/cssMediaRules.es.js.map +1 -0
- package/dist/descriptors.cjs.js.map +1 -1
- package/dist/descriptors.es.js +1 -1
- package/dist/descriptors.es.js.map +1 -1
- package/dist/image.cjs.js +6 -6
- package/dist/image.cjs.js.map +1 -1
- package/dist/image.es.js +6 -5
- package/dist/image.es.js.map +1 -1
- package/dist/index.cjs.js +1454 -7774
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs2.js +522 -0
- package/dist/index.cjs2.js.map +1 -0
- package/dist/index.cjs3.js +141 -0
- package/dist/index.cjs3.js.map +1 -0
- package/dist/index.cjs4.js +18 -0
- package/dist/index.cjs4.js.map +1 -0
- package/dist/index.es.js +1354 -7699
- package/dist/index.es.js.map +1 -1
- package/dist/index.es2.js +514 -0
- package/dist/index.es2.js.map +1 -0
- package/dist/index.es3.js +134 -0
- package/dist/index.es3.js.map +1 -0
- package/dist/index.es4.js +13 -0
- package/dist/index.es4.js.map +1 -0
- package/dist/main.cjs.js +1 -0
- package/dist/main.cjs.js.map +1 -1
- package/dist/main.es.js +1 -0
- package/dist/main.es.js.map +1 -1
- package/dist/next.cjs.js +20 -201
- package/dist/next.cjs.js.map +1 -1
- package/dist/next.es.js +13 -192
- package/dist/next.es.js.map +1 -1
- package/dist/placeholders.cjs.js +13 -0
- package/dist/placeholders.cjs.js.map +1 -0
- package/dist/placeholders.es.js +12 -0
- package/dist/placeholders.es.js.map +1 -0
- package/dist/react-builder-preview.cjs.js +23 -32
- package/dist/react-builder-preview.cjs.js.map +1 -1
- package/dist/react-builder-preview.es.js +13 -22
- package/dist/react-builder-preview.es.js.map +1 -1
- package/dist/react-page.cjs.js +5 -4
- package/dist/react-page.cjs.js.map +1 -1
- package/dist/react-page.es.js +3 -2
- package/dist/react-page.es.js.map +1 -1
- package/dist/react.cjs.js +17 -28
- package/dist/react.cjs.js.map +1 -1
- package/dist/react.es.js +9 -20
- package/dist/react.es.js.map +1 -1
- package/dist/types/components/builtin/Box/Box.d.ts +1 -4
- package/dist/types/components/builtin/Box/Box.d.ts.map +1 -1
- package/dist/types/components/builtin/Box/animations.d.ts +1 -8
- package/dist/types/components/builtin/Box/animations.d.ts.map +1 -1
- package/dist/types/components/builtin/Box/constants.d.ts +9 -0
- package/dist/types/components/builtin/Box/constants.d.ts.map +1 -0
- package/dist/types/components/builtin/Box/contants.d.ts +9 -0
- package/dist/types/components/builtin/Box/contants.d.ts.map +1 -0
- package/dist/types/components/builtin/Box/index.d.ts +2 -2
- package/dist/types/components/builtin/Box/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Box/register.d.ts +3 -0
- package/dist/types/components/builtin/Box/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Button/Button.d.ts +1 -4
- package/dist/types/components/builtin/Button/Button.d.ts.map +1 -1
- package/dist/types/components/builtin/Button/constants.d.ts +2 -0
- package/dist/types/components/builtin/Button/constants.d.ts.map +1 -0
- package/dist/types/components/builtin/Button/contants.d.ts +2 -0
- package/dist/types/components/builtin/Button/contants.d.ts.map +1 -0
- package/dist/types/components/builtin/Button/index.d.ts +1 -1
- package/dist/types/components/builtin/Button/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Button/register.d.ts +3 -0
- package/dist/types/components/builtin/Button/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Carousel/Carousel.d.ts +0 -3
- package/dist/types/components/builtin/Carousel/Carousel.d.ts.map +1 -1
- package/dist/types/components/builtin/Carousel/index.d.ts +1 -1
- package/dist/types/components/builtin/Carousel/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Carousel/register.d.ts +3 -0
- package/dist/types/components/builtin/Carousel/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Countdown/Countdown.d.ts +0 -3
- package/dist/types/components/builtin/Countdown/Countdown.d.ts.map +1 -1
- package/dist/types/components/builtin/Countdown/index.d.ts +1 -1
- package/dist/types/components/builtin/Countdown/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Countdown/register.d.ts +3 -0
- package/dist/types/components/builtin/Countdown/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Divider/Divider.d.ts +0 -3
- package/dist/types/components/builtin/Divider/Divider.d.ts.map +1 -1
- package/dist/types/components/builtin/Divider/index.d.ts +1 -1
- package/dist/types/components/builtin/Divider/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Divider/register.d.ts +3 -0
- package/dist/types/components/builtin/Divider/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Embed/Embed.d.ts +0 -3
- package/dist/types/components/builtin/Embed/Embed.d.ts.map +1 -1
- package/dist/types/components/builtin/Embed/index.d.ts +1 -1
- package/dist/types/components/builtin/Embed/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Embed/register.d.ts +3 -0
- package/dist/types/components/builtin/Embed/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Form/Form.d.ts +1 -10
- package/dist/types/components/builtin/Form/Form.d.ts.map +1 -1
- package/dist/types/components/builtin/Form/constants.d.ts +1 -0
- package/dist/types/components/builtin/Form/constants.d.ts.map +1 -0
- package/dist/types/components/builtin/Form/context/FormContext.d.ts +6 -0
- package/dist/types/components/builtin/Form/context/FormContext.d.ts.map +1 -1
- package/dist/types/components/builtin/Form/index.d.ts +1 -1
- package/dist/types/components/builtin/Form/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Form/register.d.ts +3 -0
- package/dist/types/components/builtin/Form/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Image/Image.d.ts +0 -3
- package/dist/types/components/builtin/Image/Image.d.ts.map +1 -1
- package/dist/types/components/builtin/Image/index.d.ts +1 -1
- package/dist/types/components/builtin/Image/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Image/register.d.ts +3 -0
- package/dist/types/components/builtin/Image/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Navigation/Navigation.d.ts +0 -3
- package/dist/types/components/builtin/Navigation/Navigation.d.ts.map +1 -1
- package/dist/types/components/builtin/Navigation/index.d.ts +1 -1
- package/dist/types/components/builtin/Navigation/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Navigation/register.d.ts +3 -0
- package/dist/types/components/builtin/Navigation/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Root/Root.d.ts +0 -2
- package/dist/types/components/builtin/Root/Root.d.ts.map +1 -1
- package/dist/types/components/builtin/Root/index.d.ts +1 -1
- package/dist/types/components/builtin/Root/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Root/register.d.ts +3 -0
- package/dist/types/components/builtin/Root/register.d.ts.map +1 -0
- package/dist/types/components/builtin/SocialLinks/SocialLinks.d.ts +0 -3
- package/dist/types/components/builtin/SocialLinks/SocialLinks.d.ts.map +1 -1
- package/dist/types/components/builtin/SocialLinks/index.d.ts +1 -1
- package/dist/types/components/builtin/SocialLinks/index.d.ts.map +1 -1
- package/dist/types/components/builtin/SocialLinks/register.d.ts +3 -0
- package/dist/types/components/builtin/SocialLinks/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Text/Text.d.ts +0 -3
- package/dist/types/components/builtin/Text/Text.d.ts.map +1 -1
- package/dist/types/components/builtin/Text/index.d.ts +1 -1
- package/dist/types/components/builtin/Text/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Text/register.d.ts +3 -0
- package/dist/types/components/builtin/Text/register.d.ts.map +1 -0
- package/dist/types/components/builtin/Video/Video.d.ts +0 -3
- package/dist/types/components/builtin/Video/Video.d.ts.map +1 -1
- package/dist/types/components/builtin/Video/index.d.ts +1 -1
- package/dist/types/components/builtin/Video/index.d.ts.map +1 -1
- package/dist/types/components/builtin/Video/register.d.ts +3 -0
- package/dist/types/components/builtin/Video/register.d.ts.map +1 -0
- package/dist/types/components/builtin/index.d.ts +1 -2
- package/dist/types/components/builtin/index.d.ts.map +1 -1
- package/dist/types/components/builtin/register.d.ts +3 -0
- package/dist/types/components/builtin/register.d.ts.map +1 -0
- package/dist/types/controls/image.d.ts +15 -3
- package/dist/types/controls/image.d.ts.map +1 -1
- package/dist/types/dynamic.d.ts +2 -0
- package/dist/types/dynamic.d.ts.map +1 -0
- package/dist/types/next/plugin.d.ts +3 -0
- package/dist/types/next/plugin.d.ts.map +1 -0
- package/dist/types/next.d.ts +12 -2
- package/dist/types/next.d.ts.map +1 -1
- package/dist/types/prop-controllers/descriptors.d.ts +2 -2
- package/dist/types/prop-controllers/descriptors.d.ts.map +1 -1
- package/dist/types/runtimes/react/controls/control.d.ts +2 -2
- package/dist/types/runtimes/react/controls/control.d.ts.map +1 -1
- package/dist/types/runtimes/react/controls/image.d.ts +12 -3
- package/dist/types/runtimes/react/controls/image.d.ts.map +1 -1
- package/dist/useBackgrounds.cjs.js +124 -0
- package/dist/useBackgrounds.cjs.js.map +1 -0
- package/dist/useBackgrounds.es.js +123 -0
- package/dist/useBackgrounds.es.js.map +1 -0
- package/dist/useBoxShadow.cjs.js +78 -0
- package/dist/useBoxShadow.cjs.js.map +1 -0
- package/dist/useBoxShadow.es.js +77 -0
- package/dist/useBoxShadow.es.js.map +1 -0
- package/dist/useMediaQuery.cjs.js +26 -0
- package/dist/useMediaQuery.cjs.js.map +1 -0
- package/dist/useMediaQuery.es.js +25 -0
- package/dist/useMediaQuery.es.js.map +1 -0
- package/dist/usePage.cjs.js +14 -0
- package/dist/usePage.cjs.js.map +1 -0
- package/dist/usePage.es.js +13 -0
- package/dist/usePage.es.js.map +1 -0
- package/dist/useTable.cjs.js +10 -0
- package/dist/useTable.cjs.js.map +1 -0
- package/dist/useTable.es.js +9 -0
- package/dist/useTable.es.js.map +1 -0
- package/next/plugin.js +1 -0
- package/package.json +4 -1
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
var React = require("react");
|
|
34
|
+
var next = require("./index.cjs.js");
|
|
35
|
+
function useBackgrounds(value) {
|
|
36
|
+
const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(next.isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
|
|
37
|
+
const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
|
|
38
|
+
if (background.type === "color" && background.payload != null) {
|
|
39
|
+
return [background.payload.swatchId];
|
|
40
|
+
}
|
|
41
|
+
if (background.type === "gradient" && background.payload != null) {
|
|
42
|
+
return background.payload.stops.map((stop) => stop.color && stop.color.swatchId).filter(next.isNonNullable);
|
|
43
|
+
}
|
|
44
|
+
if (background.type === "video" && background.payload != null) {
|
|
45
|
+
return [background.payload.maskColor && background.payload.maskColor.swatchId];
|
|
46
|
+
}
|
|
47
|
+
return null;
|
|
48
|
+
}).filter(next.isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []).filter(next.isNonNullable);
|
|
49
|
+
const skip = value == null;
|
|
50
|
+
const filesResult = next.useQuery(next.FILES_BY_ID, {
|
|
51
|
+
skip: skip || fileIds.length === 0,
|
|
52
|
+
variables: { ids: fileIds }
|
|
53
|
+
});
|
|
54
|
+
const swatchesResult = next.useQuery(next.SWATCHES_BY_ID, {
|
|
55
|
+
skip: skip || swatchIds.length === 0,
|
|
56
|
+
variables: { ids: swatchIds }
|
|
57
|
+
});
|
|
58
|
+
return React.useMemo(() => {
|
|
59
|
+
const { data: filesData = {} } = filesResult;
|
|
60
|
+
const { data: swatchesData = {} } = swatchesResult;
|
|
61
|
+
if (value == null || filesResult.error != null || swatchesResult.error != null) {
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
const { files = [] } = filesData;
|
|
65
|
+
const { swatches = [] } = swatchesData;
|
|
66
|
+
return value.map((_a) => {
|
|
67
|
+
var _b = _a, { value: backgrounds } = _b, restOfValue = __objRest(_b, ["value"]);
|
|
68
|
+
return __spreadProps(__spreadValues({}, restOfValue), {
|
|
69
|
+
value: backgrounds.map((bg) => {
|
|
70
|
+
if (bg.type === "image" && bg.payload != null && bg.payload.imageId != null) {
|
|
71
|
+
const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
|
|
72
|
+
const file = files.find((f) => f && f.id === imageId);
|
|
73
|
+
return file && {
|
|
74
|
+
id: bg.id,
|
|
75
|
+
type: "image",
|
|
76
|
+
payload: __spreadProps(__spreadValues({}, restOfPayload), {
|
|
77
|
+
publicUrl: file.publicUrl,
|
|
78
|
+
dimensions: file.dimensions
|
|
79
|
+
})
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
if (bg.type === "color" && bg.payload != null) {
|
|
83
|
+
const { swatchId, alpha } = bg.payload;
|
|
84
|
+
const swatch = swatches.find((s) => s && s.id === swatchId);
|
|
85
|
+
return { id: bg.id, type: "color", payload: { swatch, alpha } };
|
|
86
|
+
}
|
|
87
|
+
if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
|
|
88
|
+
return {
|
|
89
|
+
id: bg.id,
|
|
90
|
+
type: "gradient",
|
|
91
|
+
payload: {
|
|
92
|
+
angle: bg.payload.angle,
|
|
93
|
+
isRadial: bg.payload.isRadial,
|
|
94
|
+
stops: bg.payload.stops.map((_b2) => {
|
|
95
|
+
var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
|
|
96
|
+
return __spreadProps(__spreadValues({}, restOfStop), {
|
|
97
|
+
color: color && {
|
|
98
|
+
swatch: swatches.find((s) => s && s.id === color.swatchId),
|
|
99
|
+
alpha: color.alpha
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
})
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
if (bg.type === "video" && bg.payload != null) {
|
|
107
|
+
const _d = bg.payload, { maskColor } = _d, restOfPayload = __objRest(_d, ["maskColor"]);
|
|
108
|
+
const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
|
|
109
|
+
return {
|
|
110
|
+
id: bg.id,
|
|
111
|
+
type: "video",
|
|
112
|
+
payload: __spreadProps(__spreadValues({}, restOfPayload), {
|
|
113
|
+
maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
|
|
114
|
+
})
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
return null;
|
|
118
|
+
}).filter(Boolean)
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
}, [filesResult, swatchesResult, value]);
|
|
122
|
+
}
|
|
123
|
+
exports.useBackgrounds = useBackgrounds;
|
|
124
|
+
//# sourceMappingURL=useBackgrounds.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBackgrounds.cjs.js","sources":["../src/components/hooks/useBackgrounds.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ColorValue as Color } from '../utils/types'\nimport { ResponsiveValue } from '../../prop-controllers'\nimport { FILES_BY_ID, SWATCHES_BY_ID } from '../utils/queries'\nimport { isNonNullable } from '../utils/isNonNullable'\nimport { BackgroundsValue as ResponsiveBackgroundsValue } from '../../prop-controllers/descriptors'\nimport { useQuery } from '../../api/react'\n\ntype BackgroundColorData = Color\n\ntype BackgroundGradientStopData = {\n id: string\n location: number\n color: Color | null | undefined\n}\n\ntype BackgroundGradientData = {\n angle: number\n isRadial: boolean\n stops: Array<BackgroundGradientStopData>\n}\n\ntype BackgroundImageData = {\n publicUrl?: string\n dimensions: { width: number; height: number } | null\n position: {\n x: number\n y: number\n }\n size: 'cover' | 'contain' | 'auto'\n repeat: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'\n opacity?: number\n parallax?: number\n}\n\ntype BackgroundVideoData = {\n url: string\n maskColor: Color | null | undefined\n aspectRatio: 'wide' | 'standard'\n opacity: number\n zoom: number\n parallax: number\n}\n\ntype BackgroundData =\n | { id: string; type: 'color'; payload: BackgroundColorData | null | undefined }\n | { id: string; type: 'image'; payload: BackgroundImageData | null | undefined }\n | { id: string; type: 'gradient'; payload: BackgroundGradientData | null | undefined }\n | { id: string; type: 'video'; payload: BackgroundVideoData | null | undefined }\n\ntype BackgroundsData = Array<BackgroundData>\n\nexport type BackgroundsPropControllerData = ResponsiveValue<BackgroundsData>\n\nexport function useBackgrounds(\n value: ResponsiveBackgroundsValue | null | undefined,\n): BackgroundsPropControllerData | null | undefined {\n const fileIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background =>\n background.type === 'image' && background.payload != null\n ? background.payload.imageId\n : null,\n )\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), [] as string[]),\n )\n .reduce((a, b) => a.concat(b), [])\n const swatchIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background => {\n if (background.type === 'color' && background.payload != null) {\n return [background.payload.swatchId]\n }\n\n if (background.type === 'gradient' && background.payload != null) {\n return background.payload.stops\n .map(stop => stop.color && stop.color.swatchId)\n .filter(isNonNullable)\n }\n\n if (background.type === 'video' && background.payload != null) {\n return [background.payload.maskColor && background.payload.maskColor.swatchId]\n }\n\n return null\n })\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), []),\n )\n .reduce((a, b) => a.concat(b), [])\n .filter(isNonNullable)\n const skip = value == null\n const filesResult = useQuery(FILES_BY_ID, {\n skip: skip || fileIds.length === 0,\n variables: { ids: fileIds },\n })\n const swatchesResult = useQuery(SWATCHES_BY_ID, {\n skip: skip || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n return useMemo(() => {\n const { data: filesData = {} } = filesResult\n const { data: swatchesData = {} } = swatchesResult\n\n if (value == null || filesResult.error != null || swatchesResult.error != null) {\n return null\n }\n\n const { files = [] } = filesData\n const { swatches = [] } = swatchesData\n\n return value.map(({ value: backgrounds, ...restOfValue }) => ({\n ...restOfValue,\n value: backgrounds\n .map(bg => {\n if (bg.type === 'image' && bg.payload != null && bg.payload.imageId != null) {\n const { imageId, ...restOfPayload } = bg.payload\n const file = files.find((f: any) => f && f.id === imageId)\n\n return (\n file && {\n id: bg.id,\n type: 'image',\n payload: {\n ...restOfPayload,\n publicUrl: file.publicUrl,\n dimensions: file.dimensions,\n },\n }\n )\n }\n\n if (bg.type === 'color' && bg.payload != null) {\n const { swatchId, alpha } = bg.payload\n const swatch = swatches.find((s: any) => s && s.id === swatchId)\n\n return { id: bg.id, type: 'color', payload: { swatch, alpha } }\n }\n\n if (bg.type === 'gradient' && bg.payload != null && bg.payload.stops.length > 0) {\n return {\n id: bg.id,\n type: 'gradient',\n payload: {\n angle: bg.payload.angle,\n isRadial: bg.payload.isRadial,\n stops: bg.payload.stops.map(({ color, ...restOfStop }) => ({\n ...restOfStop,\n color: color && {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n })),\n },\n }\n }\n\n if (bg.type === 'video' && bg.payload != null) {\n const { maskColor, ...restOfPayload } = bg.payload\n const swatch = maskColor && swatches.find((s: any) => s && s.id === maskColor.swatchId)\n\n return {\n id: bg.id,\n type: 'video',\n payload: {\n ...restOfPayload,\n maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha },\n },\n }\n }\n\n return null\n })\n .filter(Boolean),\n }))\n }, [filesResult, swatchesResult, value])\n}\n"],"names":["isNonNullable","useQuery","FILES_BY_ID","SWATCHES_BY_ID","useMemo"],"mappings":"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"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import { useMemo } from "react";
|
|
33
|
+
import { i as isNonNullable, c as useQuery, F as FILES_BY_ID, S as SWATCHES_BY_ID } from "./index.es.js";
|
|
34
|
+
function useBackgrounds(value) {
|
|
35
|
+
const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
|
|
36
|
+
const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
|
|
37
|
+
if (background.type === "color" && background.payload != null) {
|
|
38
|
+
return [background.payload.swatchId];
|
|
39
|
+
}
|
|
40
|
+
if (background.type === "gradient" && background.payload != null) {
|
|
41
|
+
return background.payload.stops.map((stop) => stop.color && stop.color.swatchId).filter(isNonNullable);
|
|
42
|
+
}
|
|
43
|
+
if (background.type === "video" && background.payload != null) {
|
|
44
|
+
return [background.payload.maskColor && background.payload.maskColor.swatchId];
|
|
45
|
+
}
|
|
46
|
+
return null;
|
|
47
|
+
}).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []).filter(isNonNullable);
|
|
48
|
+
const skip = value == null;
|
|
49
|
+
const filesResult = useQuery(FILES_BY_ID, {
|
|
50
|
+
skip: skip || fileIds.length === 0,
|
|
51
|
+
variables: { ids: fileIds }
|
|
52
|
+
});
|
|
53
|
+
const swatchesResult = useQuery(SWATCHES_BY_ID, {
|
|
54
|
+
skip: skip || swatchIds.length === 0,
|
|
55
|
+
variables: { ids: swatchIds }
|
|
56
|
+
});
|
|
57
|
+
return useMemo(() => {
|
|
58
|
+
const { data: filesData = {} } = filesResult;
|
|
59
|
+
const { data: swatchesData = {} } = swatchesResult;
|
|
60
|
+
if (value == null || filesResult.error != null || swatchesResult.error != null) {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
const { files = [] } = filesData;
|
|
64
|
+
const { swatches = [] } = swatchesData;
|
|
65
|
+
return value.map((_a) => {
|
|
66
|
+
var _b = _a, { value: backgrounds } = _b, restOfValue = __objRest(_b, ["value"]);
|
|
67
|
+
return __spreadProps(__spreadValues({}, restOfValue), {
|
|
68
|
+
value: backgrounds.map((bg) => {
|
|
69
|
+
if (bg.type === "image" && bg.payload != null && bg.payload.imageId != null) {
|
|
70
|
+
const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
|
|
71
|
+
const file = files.find((f) => f && f.id === imageId);
|
|
72
|
+
return file && {
|
|
73
|
+
id: bg.id,
|
|
74
|
+
type: "image",
|
|
75
|
+
payload: __spreadProps(__spreadValues({}, restOfPayload), {
|
|
76
|
+
publicUrl: file.publicUrl,
|
|
77
|
+
dimensions: file.dimensions
|
|
78
|
+
})
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
if (bg.type === "color" && bg.payload != null) {
|
|
82
|
+
const { swatchId, alpha } = bg.payload;
|
|
83
|
+
const swatch = swatches.find((s) => s && s.id === swatchId);
|
|
84
|
+
return { id: bg.id, type: "color", payload: { swatch, alpha } };
|
|
85
|
+
}
|
|
86
|
+
if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
|
|
87
|
+
return {
|
|
88
|
+
id: bg.id,
|
|
89
|
+
type: "gradient",
|
|
90
|
+
payload: {
|
|
91
|
+
angle: bg.payload.angle,
|
|
92
|
+
isRadial: bg.payload.isRadial,
|
|
93
|
+
stops: bg.payload.stops.map((_b2) => {
|
|
94
|
+
var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
|
|
95
|
+
return __spreadProps(__spreadValues({}, restOfStop), {
|
|
96
|
+
color: color && {
|
|
97
|
+
swatch: swatches.find((s) => s && s.id === color.swatchId),
|
|
98
|
+
alpha: color.alpha
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
})
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
if (bg.type === "video" && bg.payload != null) {
|
|
106
|
+
const _d = bg.payload, { maskColor } = _d, restOfPayload = __objRest(_d, ["maskColor"]);
|
|
107
|
+
const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
|
|
108
|
+
return {
|
|
109
|
+
id: bg.id,
|
|
110
|
+
type: "video",
|
|
111
|
+
payload: __spreadProps(__spreadValues({}, restOfPayload), {
|
|
112
|
+
maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
|
|
113
|
+
})
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
return null;
|
|
117
|
+
}).filter(Boolean)
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
}, [filesResult, swatchesResult, value]);
|
|
121
|
+
}
|
|
122
|
+
export { useBackgrounds as u };
|
|
123
|
+
//# sourceMappingURL=useBackgrounds.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBackgrounds.es.js","sources":["../src/components/hooks/useBackgrounds.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ColorValue as Color } from '../utils/types'\nimport { ResponsiveValue } from '../../prop-controllers'\nimport { FILES_BY_ID, SWATCHES_BY_ID } from '../utils/queries'\nimport { isNonNullable } from '../utils/isNonNullable'\nimport { BackgroundsValue as ResponsiveBackgroundsValue } from '../../prop-controllers/descriptors'\nimport { useQuery } from '../../api/react'\n\ntype BackgroundColorData = Color\n\ntype BackgroundGradientStopData = {\n id: string\n location: number\n color: Color | null | undefined\n}\n\ntype BackgroundGradientData = {\n angle: number\n isRadial: boolean\n stops: Array<BackgroundGradientStopData>\n}\n\ntype BackgroundImageData = {\n publicUrl?: string\n dimensions: { width: number; height: number } | null\n position: {\n x: number\n y: number\n }\n size: 'cover' | 'contain' | 'auto'\n repeat: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'\n opacity?: number\n parallax?: number\n}\n\ntype BackgroundVideoData = {\n url: string\n maskColor: Color | null | undefined\n aspectRatio: 'wide' | 'standard'\n opacity: number\n zoom: number\n parallax: number\n}\n\ntype BackgroundData =\n | { id: string; type: 'color'; payload: BackgroundColorData | null | undefined }\n | { id: string; type: 'image'; payload: BackgroundImageData | null | undefined }\n | { id: string; type: 'gradient'; payload: BackgroundGradientData | null | undefined }\n | { id: string; type: 'video'; payload: BackgroundVideoData | null | undefined }\n\ntype BackgroundsData = Array<BackgroundData>\n\nexport type BackgroundsPropControllerData = ResponsiveValue<BackgroundsData>\n\nexport function useBackgrounds(\n value: ResponsiveBackgroundsValue | null | undefined,\n): BackgroundsPropControllerData | null | undefined {\n const fileIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background =>\n background.type === 'image' && background.payload != null\n ? background.payload.imageId\n : null,\n )\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), [] as string[]),\n )\n .reduce((a, b) => a.concat(b), [])\n const swatchIds =\n value == null\n ? []\n : value\n .map(({ value: backgrounds }) =>\n backgrounds\n .map(background => {\n if (background.type === 'color' && background.payload != null) {\n return [background.payload.swatchId]\n }\n\n if (background.type === 'gradient' && background.payload != null) {\n return background.payload.stops\n .map(stop => stop.color && stop.color.swatchId)\n .filter(isNonNullable)\n }\n\n if (background.type === 'video' && background.payload != null) {\n return [background.payload.maskColor && background.payload.maskColor.swatchId]\n }\n\n return null\n })\n .filter(isNonNullable)\n .reduce((a, b) => a.concat(b), []),\n )\n .reduce((a, b) => a.concat(b), [])\n .filter(isNonNullable)\n const skip = value == null\n const filesResult = useQuery(FILES_BY_ID, {\n skip: skip || fileIds.length === 0,\n variables: { ids: fileIds },\n })\n const swatchesResult = useQuery(SWATCHES_BY_ID, {\n skip: skip || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n return useMemo(() => {\n const { data: filesData = {} } = filesResult\n const { data: swatchesData = {} } = swatchesResult\n\n if (value == null || filesResult.error != null || swatchesResult.error != null) {\n return null\n }\n\n const { files = [] } = filesData\n const { swatches = [] } = swatchesData\n\n return value.map(({ value: backgrounds, ...restOfValue }) => ({\n ...restOfValue,\n value: backgrounds\n .map(bg => {\n if (bg.type === 'image' && bg.payload != null && bg.payload.imageId != null) {\n const { imageId, ...restOfPayload } = bg.payload\n const file = files.find((f: any) => f && f.id === imageId)\n\n return (\n file && {\n id: bg.id,\n type: 'image',\n payload: {\n ...restOfPayload,\n publicUrl: file.publicUrl,\n dimensions: file.dimensions,\n },\n }\n )\n }\n\n if (bg.type === 'color' && bg.payload != null) {\n const { swatchId, alpha } = bg.payload\n const swatch = swatches.find((s: any) => s && s.id === swatchId)\n\n return { id: bg.id, type: 'color', payload: { swatch, alpha } }\n }\n\n if (bg.type === 'gradient' && bg.payload != null && bg.payload.stops.length > 0) {\n return {\n id: bg.id,\n type: 'gradient',\n payload: {\n angle: bg.payload.angle,\n isRadial: bg.payload.isRadial,\n stops: bg.payload.stops.map(({ color, ...restOfStop }) => ({\n ...restOfStop,\n color: color && {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n })),\n },\n }\n }\n\n if (bg.type === 'video' && bg.payload != null) {\n const { maskColor, ...restOfPayload } = bg.payload\n const swatch = maskColor && swatches.find((s: any) => s && s.id === maskColor.swatchId)\n\n return {\n id: bg.id,\n type: 'video',\n payload: {\n ...restOfPayload,\n maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha },\n },\n }\n }\n\n return null\n })\n .filter(Boolean),\n }))\n }, [filesResult, swatchesResult, value])\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
var next = require("./index.cjs.js");
|
|
34
|
+
const ShadowDefaultValue = {
|
|
35
|
+
inset: false,
|
|
36
|
+
offsetX: 0,
|
|
37
|
+
offsetY: 2,
|
|
38
|
+
blurRadius: 4,
|
|
39
|
+
spreadRadius: 0,
|
|
40
|
+
color: null
|
|
41
|
+
};
|
|
42
|
+
function useBoxShadow(value) {
|
|
43
|
+
const swatchIds = value == null ? [] : [
|
|
44
|
+
...Array.from(new Set(value.map(({ value: shadows }) => shadows.map(({ payload: { color } }) => color && color.swatchId)).reduce((a, b) => a.concat(b), []).filter(next.isNonNullable)))
|
|
45
|
+
];
|
|
46
|
+
const skip = value == null || swatchIds.length === 0;
|
|
47
|
+
const { error, data = {} } = next.useQuery(next.SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
|
|
48
|
+
if (value == null || error != null)
|
|
49
|
+
return null;
|
|
50
|
+
const { swatches = [] } = data;
|
|
51
|
+
return value.map((_a) => {
|
|
52
|
+
var _b = _a, { value: shadows } = _b, restOfValue = __objRest(_b, ["value"]);
|
|
53
|
+
return __spreadProps(__spreadValues({}, restOfValue), {
|
|
54
|
+
value: shadows.map((_a2) => {
|
|
55
|
+
var _b2 = _a2, {
|
|
56
|
+
payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius }
|
|
57
|
+
} = _b2, restOfShadow = __objRest(_b2, [
|
|
58
|
+
"payload"
|
|
59
|
+
]);
|
|
60
|
+
return __spreadProps(__spreadValues({}, restOfShadow), {
|
|
61
|
+
payload: {
|
|
62
|
+
color: color != null ? {
|
|
63
|
+
swatch: swatches.find((s) => s && s.id === color.swatchId),
|
|
64
|
+
alpha: color.alpha
|
|
65
|
+
} : null,
|
|
66
|
+
inset: inset != null ? inset : ShadowDefaultValue.inset,
|
|
67
|
+
offsetX: offsetX != null ? offsetX : ShadowDefaultValue.offsetX,
|
|
68
|
+
offsetY: offsetY != null ? offsetY : ShadowDefaultValue.offsetY,
|
|
69
|
+
blurRadius: blurRadius != null ? blurRadius : ShadowDefaultValue.blurRadius,
|
|
70
|
+
spreadRadius: spreadRadius != null ? spreadRadius : ShadowDefaultValue.spreadRadius
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
})
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
exports.useBoxShadow = useBoxShadow;
|
|
78
|
+
//# sourceMappingURL=useBoxShadow.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBoxShadow.cjs.js","sources":["../src/components/hooks/useBoxShadow.ts"],"sourcesContent":["import { isNonNullable } from '../utils/isNonNullable'\nimport type { ColorValue as Color } from '../utils/types'\nimport { SWATCHES_BY_ID } from '../utils/queries'\nimport type { ResponsiveValue } from '../../prop-controllers'\nimport type { ShadowsValue as ResponsiveShadowsValue } from '../../prop-controllers/descriptors'\nimport { useQuery } from '../../api/react'\n\ntype ShadowData = {\n id: string\n payload: {\n inset: boolean\n offsetX: number\n offsetY: number\n blurRadius: number\n spreadRadius: number\n color: Color | null | undefined\n }\n}\n\nconst ShadowDefaultValue = {\n inset: false,\n offsetX: 0,\n offsetY: 2,\n blurRadius: 4,\n spreadRadius: 0,\n color: null,\n} as const\n\nexport type BoxShadowData = Array<ShadowData>\n\nexport type BoxShadowPropControllerData = ResponsiveValue<BoxShadowData>\n\nexport function useBoxShadow(\n value: ResponsiveShadowsValue | null | undefined,\n): BoxShadowPropControllerData | null | undefined {\n const swatchIds =\n value == null\n ? []\n : [\n ...Array.from(\n new Set(\n value\n .map(({ value: shadows }) =>\n shadows.map(({ payload: { color } }) => color && color.swatchId),\n )\n .reduce((a, b) => a.concat(b), [])\n .filter(isNonNullable),\n ),\n ),\n ]\n\n const skip = value == null || swatchIds.length === 0\n const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } })\n\n if (value == null || error != null) return null\n\n const { swatches = [] } = data\n\n return value.map(({ value: shadows, ...restOfValue }) => ({\n ...restOfValue,\n value: shadows.map(\n ({\n payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius },\n ...restOfShadow\n }) => ({\n ...restOfShadow,\n payload: {\n color:\n color != null\n ? {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n }\n : null,\n inset: inset ?? ShadowDefaultValue.inset,\n offsetX: offsetX ?? ShadowDefaultValue.offsetX,\n offsetY: offsetY ?? ShadowDefaultValue.offsetY,\n blurRadius: blurRadius ?? ShadowDefaultValue.blurRadius,\n spreadRadius: spreadRadius ?? ShadowDefaultValue.spreadRadius,\n },\n }),\n ),\n }))\n}\n"],"names":["isNonNullable","useQuery","SWATCHES_BY_ID"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,qBAAqB;AAAA,EACzB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,OAAO;AACT;AAMO,sBACL,OACgD;AAChD,QAAM,YACJ,SAAS,OACL,KACA;AAAA,IACE,GAAG,MAAM,KACP,IAAI,IACF,MACG,IAAI,CAAC,EAAE,OAAO,cACb,QAAQ,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,SAAS,MAAM,QAAQ,CACjE,EACC,OAAO,CAAC,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,CAAA,CAAE,EAChC,OAAOA,KAAa,aAAA,CACzB,CACF;AAAA,EAAA;AAGR,QAAM,OAAO,SAAS,QAAQ,UAAU,WAAW;AACnD,QAAM,EAAE,OAAO,OAAO,OAAOC,KAAAA,SAASC,KAAAA,gBAAgB,EAAE,MAAM,WAAW,EAAE,KAAK,UAAA,EAAa,CAAA;AAEzF,MAAA,SAAS,QAAQ,SAAS;AAAa,WAAA;AAErC,QAAA,EAAE,WAAW,OAAO;AAE1B,SAAO,MAAM,IAAI,CAAC,OAAwC;AAAxC,iBAAE,SAAO,YAAT,IAAqB,wBAArB,IAAqB,CAAnB;AAAsC,4CACrD,cADqD;AAAA,MAExD,OAAO,QAAQ,IACb,CAAC,QAGM;AAHN,uBACC;AAAA,mBAAS,EAAE,OAAO,OAAO,SAAS,SAAS,YAAY;AAAA,YADxD,KAEI,yBAFJ,KAEI;AAAA,UADH;AAAA;AAEK,gDACF,eADE;AAAA,UAEL,SAAS;AAAA,YACP,OACE,SAAS,OACL;AAAA,cACE,QAAQ,SAAS,KAAK,CAAC,MAAW,KAAK,EAAE,OAAO,MAAM,QAAQ;AAAA,cAC9D,OAAO,MAAM;AAAA,YAAA,IAEf;AAAA,YACN,OAAO,wBAAS,mBAAmB;AAAA,YACnC,SAAS,4BAAW,mBAAmB;AAAA,YACvC,SAAS,4BAAW,mBAAmB;AAAA,YACvC,YAAY,kCAAc,mBAAmB;AAAA,YAC7C,cAAc,sCAAgB,mBAAmB;AAAA,UACnD;AAAA,QAAA;AAAA,OAEJ;AAAA,IACA;AAAA,GAAA;AACJ;;"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import { K as isNonNullable, q as useQuery, F as SWATCHES_BY_ID } from "./index.es.js";
|
|
33
|
+
const ShadowDefaultValue = {
|
|
34
|
+
inset: false,
|
|
35
|
+
offsetX: 0,
|
|
36
|
+
offsetY: 2,
|
|
37
|
+
blurRadius: 4,
|
|
38
|
+
spreadRadius: 0,
|
|
39
|
+
color: null
|
|
40
|
+
};
|
|
41
|
+
function useBoxShadow(value) {
|
|
42
|
+
const swatchIds = value == null ? [] : [
|
|
43
|
+
...Array.from(new Set(value.map(({ value: shadows }) => shadows.map(({ payload: { color } }) => color && color.swatchId)).reduce((a, b) => a.concat(b), []).filter(isNonNullable)))
|
|
44
|
+
];
|
|
45
|
+
const skip = value == null || swatchIds.length === 0;
|
|
46
|
+
const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
|
|
47
|
+
if (value == null || error != null)
|
|
48
|
+
return null;
|
|
49
|
+
const { swatches = [] } = data;
|
|
50
|
+
return value.map((_a) => {
|
|
51
|
+
var _b = _a, { value: shadows } = _b, restOfValue = __objRest(_b, ["value"]);
|
|
52
|
+
return __spreadProps(__spreadValues({}, restOfValue), {
|
|
53
|
+
value: shadows.map((_a2) => {
|
|
54
|
+
var _b2 = _a2, {
|
|
55
|
+
payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius }
|
|
56
|
+
} = _b2, restOfShadow = __objRest(_b2, [
|
|
57
|
+
"payload"
|
|
58
|
+
]);
|
|
59
|
+
return __spreadProps(__spreadValues({}, restOfShadow), {
|
|
60
|
+
payload: {
|
|
61
|
+
color: color != null ? {
|
|
62
|
+
swatch: swatches.find((s) => s && s.id === color.swatchId),
|
|
63
|
+
alpha: color.alpha
|
|
64
|
+
} : null,
|
|
65
|
+
inset: inset != null ? inset : ShadowDefaultValue.inset,
|
|
66
|
+
offsetX: offsetX != null ? offsetX : ShadowDefaultValue.offsetX,
|
|
67
|
+
offsetY: offsetY != null ? offsetY : ShadowDefaultValue.offsetY,
|
|
68
|
+
blurRadius: blurRadius != null ? blurRadius : ShadowDefaultValue.blurRadius,
|
|
69
|
+
spreadRadius: spreadRadius != null ? spreadRadius : ShadowDefaultValue.spreadRadius
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
})
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
export { useBoxShadow as u };
|
|
77
|
+
//# sourceMappingURL=useBoxShadow.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBoxShadow.es.js","sources":["../src/components/hooks/useBoxShadow.ts"],"sourcesContent":["import { isNonNullable } from '../utils/isNonNullable'\nimport type { ColorValue as Color } from '../utils/types'\nimport { SWATCHES_BY_ID } from '../utils/queries'\nimport type { ResponsiveValue } from '../../prop-controllers'\nimport type { ShadowsValue as ResponsiveShadowsValue } from '../../prop-controllers/descriptors'\nimport { useQuery } from '../../api/react'\n\ntype ShadowData = {\n id: string\n payload: {\n inset: boolean\n offsetX: number\n offsetY: number\n blurRadius: number\n spreadRadius: number\n color: Color | null | undefined\n }\n}\n\nconst ShadowDefaultValue = {\n inset: false,\n offsetX: 0,\n offsetY: 2,\n blurRadius: 4,\n spreadRadius: 0,\n color: null,\n} as const\n\nexport type BoxShadowData = Array<ShadowData>\n\nexport type BoxShadowPropControllerData = ResponsiveValue<BoxShadowData>\n\nexport function useBoxShadow(\n value: ResponsiveShadowsValue | null | undefined,\n): BoxShadowPropControllerData | null | undefined {\n const swatchIds =\n value == null\n ? []\n : [\n ...Array.from(\n new Set(\n value\n .map(({ value: shadows }) =>\n shadows.map(({ payload: { color } }) => color && color.swatchId),\n )\n .reduce((a, b) => a.concat(b), [])\n .filter(isNonNullable),\n ),\n ),\n ]\n\n const skip = value == null || swatchIds.length === 0\n const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } })\n\n if (value == null || error != null) return null\n\n const { swatches = [] } = data\n\n return value.map(({ value: shadows, ...restOfValue }) => ({\n ...restOfValue,\n value: shadows.map(\n ({\n payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius },\n ...restOfShadow\n }) => ({\n ...restOfShadow,\n payload: {\n color:\n color != null\n ? {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n }\n : null,\n inset: inset ?? ShadowDefaultValue.inset,\n offsetX: offsetX ?? ShadowDefaultValue.offsetX,\n offsetY: offsetY ?? ShadowDefaultValue.offsetY,\n blurRadius: blurRadius ?? ShadowDefaultValue.blurRadius,\n spreadRadius: spreadRadius ?? ShadowDefaultValue.spreadRadius,\n },\n }),\n ),\n }))\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,qBAAqB;AAAA,EACzB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,OAAO;AACT;AAMO,sBACL,OACgD;AAChD,QAAM,YACJ,SAAS,OACL,KACA;AAAA,IACE,GAAG,MAAM,KACP,IAAI,IACF,MACG,IAAI,CAAC,EAAE,OAAO,cACb,QAAQ,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,SAAS,MAAM,QAAQ,CACjE,EACC,OAAO,CAAC,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,CAAA,CAAE,EAChC,OAAO,aAAa,CACzB,CACF;AAAA,EAAA;AAGR,QAAM,OAAO,SAAS,QAAQ,UAAU,WAAW;AACnD,QAAM,EAAE,OAAO,OAAO,OAAO,SAAS,gBAAgB,EAAE,MAAM,WAAW,EAAE,KAAK,UAAA,EAAa,CAAA;AAEzF,MAAA,SAAS,QAAQ,SAAS;AAAa,WAAA;AAErC,QAAA,EAAE,WAAW,OAAO;AAE1B,SAAO,MAAM,IAAI,CAAC,OAAwC;AAAxC,iBAAE,SAAO,YAAT,IAAqB,wBAArB,IAAqB,CAAnB;AAAsC,4CACrD,cADqD;AAAA,MAExD,OAAO,QAAQ,IACb,CAAC,QAGM;AAHN,uBACC;AAAA,mBAAS,EAAE,OAAO,OAAO,SAAS,SAAS,YAAY;AAAA,YADxD,KAEI,yBAFJ,KAEI;AAAA,UADH;AAAA;AAEK,gDACF,eADE;AAAA,UAEL,SAAS;AAAA,YACP,OACE,SAAS,OACL;AAAA,cACE,QAAQ,SAAS,KAAK,CAAC,MAAW,KAAK,EAAE,OAAO,MAAM,QAAQ;AAAA,cAC9D,OAAO,MAAM;AAAA,YAAA,IAEf;AAAA,YACN,OAAO,wBAAS,mBAAmB;AAAA,YACnC,SAAS,4BAAW,mBAAmB;AAAA,YACvC,SAAS,4BAAW,mBAAmB;AAAA,YACvC,YAAY,kCAAc,mBAAmB;AAAA,YAC7C,cAAc,sCAAgB,mBAAmB;AAAA,UACnD;AAAA,QAAA;AAAA,OAEJ;AAAA,IACA;AAAA,GAAA;AACJ;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var React = require("react");
|
|
3
|
+
var next = require("./index.cjs.js");
|
|
4
|
+
function useMediaQuery(responsiveValue) {
|
|
5
|
+
const [deviceId, setDeviceId] = React.useState(next.DEVICES[0].id);
|
|
6
|
+
const { value } = next.findDeviceOverride(responsiveValue, deviceId) || {};
|
|
7
|
+
next.useIsomorphicLayoutEffect(() => {
|
|
8
|
+
if (responsiveValue == null || window == null)
|
|
9
|
+
return () => {
|
|
10
|
+
};
|
|
11
|
+
const cleanUpFns = next.DEVICES.map((device) => {
|
|
12
|
+
const mediaQueryList = window.matchMedia(next.getDeviceMediaQuery(device).replace("@media", ""));
|
|
13
|
+
const listener = () => {
|
|
14
|
+
if (mediaQueryList.matches)
|
|
15
|
+
setDeviceId(device.id);
|
|
16
|
+
};
|
|
17
|
+
listener();
|
|
18
|
+
mediaQueryList.addListener(listener);
|
|
19
|
+
return () => mediaQueryList.removeListener(listener);
|
|
20
|
+
});
|
|
21
|
+
return () => cleanUpFns.forEach((fn) => fn());
|
|
22
|
+
});
|
|
23
|
+
return value;
|
|
24
|
+
}
|
|
25
|
+
exports.useMediaQuery = useMediaQuery;
|
|
26
|
+
//# sourceMappingURL=useMediaQuery.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMediaQuery.cjs.js","sources":["../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState } from 'react'\n\nimport { DeviceOverride } from '../../prop-controllers'\nimport { DEVICES, findDeviceOverride, getDeviceMediaQuery } from '../utils/devices'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | void {\n const [deviceId, setDeviceId] = useState(DEVICES[0].id)\n const { value } = findDeviceOverride(responsiveValue, deviceId) || {}\n\n useIsomorphicLayoutEffect(() => {\n if (responsiveValue == null || window == null) return () => {}\n\n const cleanUpFns = DEVICES.map(device => {\n const mediaQueryList = window.matchMedia(getDeviceMediaQuery(device).replace('@media', ''))\n\n const listener = () => {\n if (mediaQueryList.matches) setDeviceId(device.id)\n }\n\n listener()\n mediaQueryList.addListener(listener)\n\n return () => mediaQueryList.removeListener(listener)\n })\n\n return () => cleanUpFns.forEach(fn => fn())\n })\n\n return value\n}\n"],"names":["useState","DEVICES","findDeviceOverride","useIsomorphicLayoutEffect","getDeviceMediaQuery"],"mappings":";;;AAQO,uBAA0B,iBAAsD;AACrF,QAAM,CAAC,UAAU,eAAeA,MAAAA,SAASC,KAAAA,QAAQ,GAAG,EAAE;AACtD,QAAM,EAAE,UAAUC,KAAAA,mBAAmB,iBAAiB,QAAQ,KAAK;AAEnEC,OAAAA,0BAA0B,MAAM;AAC1B,QAAA,mBAAmB,QAAQ,UAAU;AAAM,aAAO,MAAM;AAAA,MAAA;AAEtD,UAAA,aAAaF,KAAAA,QAAQ,IAAI,CAAU,WAAA;AACjC,YAAA,iBAAiB,OAAO,WAAWG,KAAA,oBAAoB,MAAM,EAAE,QAAQ,UAAU,EAAE,CAAC;AAE1F,YAAM,WAAW,MAAM;AACrB,YAAI,eAAe;AAAS,sBAAY,OAAO,EAAE;AAAA,MAAA;AAG1C;AACT,qBAAe,YAAY,QAAQ;AAE5B,aAAA,MAAM,eAAe,eAAe,QAAQ;AAAA,IAAA,CACpD;AAED,WAAO,MAAM,WAAW,QAAQ,CAAA,OAAM,GAAI,CAAA;AAAA,EAAA,CAC3C;AAEM,SAAA;AACT;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
import { y as DEVICES, z as findDeviceOverride, p as useIsomorphicLayoutEffect, J as getDeviceMediaQuery } from "./index.es.js";
|
|
3
|
+
function useMediaQuery(responsiveValue) {
|
|
4
|
+
const [deviceId, setDeviceId] = useState(DEVICES[0].id);
|
|
5
|
+
const { value } = findDeviceOverride(responsiveValue, deviceId) || {};
|
|
6
|
+
useIsomorphicLayoutEffect(() => {
|
|
7
|
+
if (responsiveValue == null || window == null)
|
|
8
|
+
return () => {
|
|
9
|
+
};
|
|
10
|
+
const cleanUpFns = DEVICES.map((device) => {
|
|
11
|
+
const mediaQueryList = window.matchMedia(getDeviceMediaQuery(device).replace("@media", ""));
|
|
12
|
+
const listener = () => {
|
|
13
|
+
if (mediaQueryList.matches)
|
|
14
|
+
setDeviceId(device.id);
|
|
15
|
+
};
|
|
16
|
+
listener();
|
|
17
|
+
mediaQueryList.addListener(listener);
|
|
18
|
+
return () => mediaQueryList.removeListener(listener);
|
|
19
|
+
});
|
|
20
|
+
return () => cleanUpFns.forEach((fn) => fn());
|
|
21
|
+
});
|
|
22
|
+
return value;
|
|
23
|
+
}
|
|
24
|
+
export { useMediaQuery as u };
|
|
25
|
+
//# sourceMappingURL=useMediaQuery.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMediaQuery.es.js","sources":["../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState } from 'react'\n\nimport { DeviceOverride } from '../../prop-controllers'\nimport { DEVICES, findDeviceOverride, getDeviceMediaQuery } from '../utils/devices'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | void {\n const [deviceId, setDeviceId] = useState(DEVICES[0].id)\n const { value } = findDeviceOverride(responsiveValue, deviceId) || {}\n\n useIsomorphicLayoutEffect(() => {\n if (responsiveValue == null || window == null) return () => {}\n\n const cleanUpFns = DEVICES.map(device => {\n const mediaQueryList = window.matchMedia(getDeviceMediaQuery(device).replace('@media', ''))\n\n const listener = () => {\n if (mediaQueryList.matches) setDeviceId(device.id)\n }\n\n listener()\n mediaQueryList.addListener(listener)\n\n return () => mediaQueryList.removeListener(listener)\n })\n\n return () => cleanUpFns.forEach(fn => fn())\n })\n\n return value\n}\n"],"names":[],"mappings":";;AAQO,uBAA0B,iBAAsD;AACrF,QAAM,CAAC,UAAU,eAAe,SAAS,QAAQ,GAAG,EAAE;AACtD,QAAM,EAAE,UAAU,mBAAmB,iBAAiB,QAAQ,KAAK;AAEnE,4BAA0B,MAAM;AAC1B,QAAA,mBAAmB,QAAQ,UAAU;AAAM,aAAO,MAAM;AAAA,MAAA;AAEtD,UAAA,aAAa,QAAQ,IAAI,CAAU,WAAA;AACjC,YAAA,iBAAiB,OAAO,WAAW,oBAAoB,MAAM,EAAE,QAAQ,UAAU,EAAE,CAAC;AAE1F,YAAM,WAAW,MAAM;AACrB,YAAI,eAAe;AAAS,sBAAY,OAAO,EAAE;AAAA,MAAA;AAG1C;AACT,qBAAe,YAAY,QAAQ;AAE5B,aAAA,MAAM,eAAe,eAAe,QAAQ;AAAA,IAAA,CACpD;AAED,WAAO,MAAM,WAAW,QAAQ,CAAA,OAAM,GAAI,CAAA;AAAA,EAAA,CAC3C;AAEM,SAAA;AACT;;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var index = require("./index.cjs.js");
|
|
3
|
+
function usePage(pageId) {
|
|
4
|
+
const { error, data = {} } = index.useQuery(index.PAGE_PATHNAMES_BY_ID, {
|
|
5
|
+
skip: pageId == null,
|
|
6
|
+
variables: { ids: [pageId] }
|
|
7
|
+
});
|
|
8
|
+
if (pageId == null || error != null)
|
|
9
|
+
return null;
|
|
10
|
+
const { pagePathnamesById: [page] = [] } = data;
|
|
11
|
+
return page;
|
|
12
|
+
}
|
|
13
|
+
exports.usePage = usePage;
|
|
14
|
+
//# sourceMappingURL=usePage.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePage.cjs.js","sources":["../src/components/hooks/usePage.ts"],"sourcesContent":["import { useQuery } from '../../api/react'\nimport { PAGE_PATHNAMES_BY_ID } from '../utils/queries'\n\ntype Page = {\n id: string\n pathname: string\n}\n\nexport function usePage(pageId: string | null | undefined): Page | null | undefined {\n const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {\n skip: pageId == null,\n variables: { ids: [pageId] },\n })\n\n if (pageId == null || error != null) return null\n\n const { pagePathnamesById: [page] = [] } = data\n\n return page\n}\n"],"names":["useQuery","PAGE_PATHNAMES_BY_ID"],"mappings":";;AAQO,iBAAiB,QAA4D;AAClF,QAAM,EAAE,OAAO,OAAO,CAAC,MAAMA,MAAAA,SAASC,MAAAA,sBAAsB;AAAA,IAC1D,MAAM,UAAU;AAAA,IAChB,WAAW,EAAE,KAAK,CAAC,MAAM,EAAE;AAAA,EAAA,CAC5B;AAEG,MAAA,UAAU,QAAQ,SAAS;AAAa,WAAA;AAE5C,QAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAO,MAAA;AAEpC,SAAA;AACT;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { m as useQuery, s as PAGE_PATHNAMES_BY_ID } from "./index.es.js";
|
|
2
|
+
function usePage(pageId) {
|
|
3
|
+
const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
|
|
4
|
+
skip: pageId == null,
|
|
5
|
+
variables: { ids: [pageId] }
|
|
6
|
+
});
|
|
7
|
+
if (pageId == null || error != null)
|
|
8
|
+
return null;
|
|
9
|
+
const { pagePathnamesById: [page] = [] } = data;
|
|
10
|
+
return page;
|
|
11
|
+
}
|
|
12
|
+
export { usePage as u };
|
|
13
|
+
//# sourceMappingURL=usePage.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePage.es.js","sources":["../src/components/hooks/usePage.ts"],"sourcesContent":["import { useQuery } from '../../api/react'\nimport { PAGE_PATHNAMES_BY_ID } from '../utils/queries'\n\ntype Page = {\n id: string\n pathname: string\n}\n\nexport function usePage(pageId: string | null | undefined): Page | null | undefined {\n const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {\n skip: pageId == null,\n variables: { ids: [pageId] },\n })\n\n if (pageId == null || error != null) return null\n\n const { pagePathnamesById: [page] = [] } = data\n\n return page\n}\n"],"names":[],"mappings":";AAQO,iBAAiB,QAA4D;AAClF,QAAM,EAAE,OAAO,OAAO,CAAC,MAAM,SAAS,sBAAsB;AAAA,IAC1D,MAAM,UAAU;AAAA,IAChB,WAAW,EAAE,KAAK,CAAC,MAAM,EAAE;AAAA,EAAA,CAC5B;AAEG,MAAA,UAAU,QAAQ,SAAS;AAAa,WAAA;AAE5C,QAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAO,MAAA;AAEpC,SAAA;AACT;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var index = require("./index.cjs.js");
|
|
3
|
+
function useTable(tableId) {
|
|
4
|
+
return index.useQuery(index.TABLE_BY_ID, {
|
|
5
|
+
skip: tableId == null,
|
|
6
|
+
variables: { id: tableId }
|
|
7
|
+
});
|
|
8
|
+
}
|
|
9
|
+
exports.useTable = useTable;
|
|
10
|
+
//# sourceMappingURL=useTable.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTable.cjs.js","sources":["../src/components/hooks/useTable.ts"],"sourcesContent":["import { useQuery } from '../../api/react'\nimport { TABLE_BY_ID } from '../utils/queries'\n\nexport type SingleLineTextTableColumn = {\n id: string\n name: string\n __typename: 'SingleLineTextTableColumn'\n}\n\nexport type LongTextTableColumn = {\n id: string\n name: string\n __typename: 'LongTextTableColumn'\n}\n\nexport type CheckboxTableColumn = {\n id: string\n name: string\n __typename: 'CheckboxTableColumn'\n}\n\nexport type MultipleSelectTableColumnOption = {\n id: string\n name: string\n}\n\nexport type MultipleSelectTableColumn = {\n id: string\n name: string\n options: Array<MultipleSelectTableColumnOption>\n __typename: 'MultipleSelectTableColumn'\n}\n\nexport type SingleSelectTableColumnOption = {\n id: string\n name: string\n}\n\nexport type SingleSelectTableColumn = {\n id: string\n name: string\n options: Array<SingleSelectTableColumnOption>\n __typename: 'SingleSelectTableColumn'\n}\n\nexport type PhoneNumberTableColumn = {\n id: string\n name: string\n __typename: 'PhoneNumberTableColumn'\n}\n\nexport type EmailTableColumn = {\n id: string\n name: string\n __typename: 'EmailTableColumn'\n}\n\nexport type URLTableColumn = {\n id: string\n name: string\n __typename: 'URLTableColumn'\n}\n\nexport type NumberTableColumn = {\n id: string\n name: string\n __typename: 'NumberTableColumn'\n}\n\nexport type TableColumn =\n | SingleLineTextTableColumn\n | LongTextTableColumn\n | CheckboxTableColumn\n | MultipleSelectTableColumn\n | SingleSelectTableColumn\n | PhoneNumberTableColumn\n | EmailTableColumn\n | URLTableColumn\n | NumberTableColumn\n\ntype Table = {\n id: string\n name: string\n columns: Array<TableColumn>\n}\n\nexport function useTable(tableId: string | null | undefined) {\n return useQuery<{ table: Table | null }>(TABLE_BY_ID, {\n skip: tableId == null,\n variables: { id: tableId },\n })\n}\n"],"names":["useQuery","TABLE_BY_ID"],"mappings":";;AAsFO,kBAAkB,SAAoC;AAC3D,SAAOA,MAAAA,SAAkCC,MAAAA,aAAa;AAAA,IACpD,MAAM,WAAW;AAAA,IACjB,WAAW,EAAE,IAAI,QAAQ;AAAA,EAAA,CAC1B;AACH;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTable.es.js","sources":["../src/components/hooks/useTable.ts"],"sourcesContent":["import { useQuery } from '../../api/react'\nimport { TABLE_BY_ID } from '../utils/queries'\n\nexport type SingleLineTextTableColumn = {\n id: string\n name: string\n __typename: 'SingleLineTextTableColumn'\n}\n\nexport type LongTextTableColumn = {\n id: string\n name: string\n __typename: 'LongTextTableColumn'\n}\n\nexport type CheckboxTableColumn = {\n id: string\n name: string\n __typename: 'CheckboxTableColumn'\n}\n\nexport type MultipleSelectTableColumnOption = {\n id: string\n name: string\n}\n\nexport type MultipleSelectTableColumn = {\n id: string\n name: string\n options: Array<MultipleSelectTableColumnOption>\n __typename: 'MultipleSelectTableColumn'\n}\n\nexport type SingleSelectTableColumnOption = {\n id: string\n name: string\n}\n\nexport type SingleSelectTableColumn = {\n id: string\n name: string\n options: Array<SingleSelectTableColumnOption>\n __typename: 'SingleSelectTableColumn'\n}\n\nexport type PhoneNumberTableColumn = {\n id: string\n name: string\n __typename: 'PhoneNumberTableColumn'\n}\n\nexport type EmailTableColumn = {\n id: string\n name: string\n __typename: 'EmailTableColumn'\n}\n\nexport type URLTableColumn = {\n id: string\n name: string\n __typename: 'URLTableColumn'\n}\n\nexport type NumberTableColumn = {\n id: string\n name: string\n __typename: 'NumberTableColumn'\n}\n\nexport type TableColumn =\n | SingleLineTextTableColumn\n | LongTextTableColumn\n | CheckboxTableColumn\n | MultipleSelectTableColumn\n | SingleSelectTableColumn\n | PhoneNumberTableColumn\n | EmailTableColumn\n | URLTableColumn\n | NumberTableColumn\n\ntype Table = {\n id: string\n name: string\n columns: Array<TableColumn>\n}\n\nexport function useTable(tableId: string | null | undefined) {\n return useQuery<{ table: Table | null }>(TABLE_BY_ID, {\n skip: tableId == null,\n variables: { id: tableId },\n })\n}\n"],"names":[],"mappings":";AAsFO,kBAAkB,SAAoC;AAC3D,SAAO,SAAkC,aAAa;AAAA,IACpD,MAAM,WAAW;AAAA,IACjB,WAAW,EAAE,IAAI,QAAQ;AAAA,EAAA,CAC1B;AACH;;"}
|
package/next/plugin.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('@makeswift/next-plugin')
|