@mittwald/flow-react-components 0.2.0-alpha.771 → 0.2.0-alpha.773
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/CHANGELOG.md +16 -0
- package/dist/assets/doc-properties.json +800 -637
- package/dist/css/all.css +1 -1
- package/dist/js/_virtual/_.locale.json@72ba2ce40f190df671686fec50c04ddf.mjs +10 -2
- package/dist/js/_virtual/_.locale.json@72ba2ce40f190df671686fec50c04ddf.mjs.map +1 -1
- package/dist/js/_virtual/_.locale.json@849e6f494125ee27df10a461562fa893.mjs +8 -0
- package/dist/js/_virtual/_.locale.json@849e6f494125ee27df10a461562fa893.mjs.map +1 -0
- package/dist/js/default.mjs +1 -0
- package/dist/js/default.mjs.map +1 -1
- package/dist/js/flr-universal.mjs +2 -1
- package/dist/js/flr-universal.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ImageCropper/ImageCropper.mjs +74 -0
- package/dist/js/packages/components/src/components/ImageCropper/ImageCropper.mjs.map +1 -0
- package/dist/js/packages/components/src/components/ImageCropper/ImageCropper.module.scss.mjs +11 -0
- package/dist/js/packages/components/src/components/ImageCropper/ImageCropper.module.scss.mjs.map +1 -0
- package/dist/js/packages/components/src/components/ImageCropper/lib/getCroppedImageFile.mjs +45 -0
- package/dist/js/packages/components/src/components/ImageCropper/lib/getCroppedImageFile.mjs.map +1 -0
- package/dist/js/packages/components/src/components/List/model/filter/Filter.mjs +0 -3
- package/dist/js/packages/components/src/components/List/model/filter/Filter.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Slider/Slider.mjs +28 -21
- package/dist/js/packages/components/src/components/Slider/Slider.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Slider/Slider.module.scss.mjs +3 -1
- package/dist/js/packages/components/src/components/Slider/Slider.module.scss.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs +19 -0
- package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/useImageSrc.mjs +29 -0
- package/dist/js/packages/components/src/lib/hooks/useImageSrc.mjs.map +1 -0
- package/dist/types/components/ImageCropper/ImageCropper.d.ts +19 -0
- package/dist/types/components/ImageCropper/ImageCropper.d.ts.map +1 -0
- package/dist/types/components/ImageCropper/index.d.ts +3 -0
- package/dist/types/components/ImageCropper/index.d.ts.map +1 -0
- package/dist/types/components/ImageCropper/lib/getCroppedImageFile.d.ts +3 -0
- package/dist/types/components/ImageCropper/lib/getCroppedImageFile.d.ts.map +1 -0
- package/dist/types/components/ImageCropper/stories/Default.stories.d.ts +9 -0
- package/dist/types/components/ImageCropper/stories/Default.stories.d.ts.map +1 -0
- package/dist/types/components/ImageCropper/view.d.ts +8 -0
- package/dist/types/components/ImageCropper/view.d.ts.map +1 -0
- package/dist/types/components/List/model/filter/Filter.d.ts.map +1 -1
- package/dist/types/components/Slider/Slider.d.ts +4 -0
- package/dist/types/components/Slider/Slider.d.ts.map +1 -1
- package/dist/types/components/Slider/stories/Default.stories.d.ts +1 -1
- package/dist/types/components/Slider/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/public.d.ts +1 -0
- package/dist/types/components/public.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/Field.d.ts.map +1 -1
- package/dist/types/lib/hooks/useImageSrc.d.ts +2 -0
- package/dist/types/lib/hooks/useImageSrc.d.ts.map +1 -0
- package/dist/types/views/ImageCropperView.d.ts +5 -0
- package/dist/types/views/ImageCropperView.d.ts.map +1 -0
- package/package.json +7 -6
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
const locales = {"de-DE": { "
|
|
3
|
+
const locales = {"de-DE": { "max": (args) => `Maximale Anzahl von ${args.number} erreicht`,
|
|
4
|
+
"maxLength": (args) => `Bitte gib höchstens ${args.number} Zeichen ein`,
|
|
5
|
+
"min": (args) => `Minimale Anzahl von ${args.number} noch nicht erreicht`,
|
|
4
6
|
"minLength": (args) => `Bitte gib mindestens ${args.number} Zeichen ein`,
|
|
5
|
-
|
|
7
|
+
"pattern": (args) => `Entspricht nicht dem erwarteten Format: ${args.pattern}`,
|
|
8
|
+
"required": `Dieses Feld ist erforderlich`,
|
|
9
|
+
},"en-US": { "max": (args) => `Maximum number of ${args.number} reached`,
|
|
10
|
+
"maxLength": (args) => `Please enter at most ${args.number} characters`,
|
|
11
|
+
"min": (args) => `Minimum number of ${args.number} has not yet been reached`,
|
|
6
12
|
"minLength": (args) => `Please enter at least ${args.number} characters`,
|
|
13
|
+
"pattern": (args) => `Does not match the expected format: ${args.pattern}`,
|
|
14
|
+
"required": `This field is required`,
|
|
7
15
|
}};
|
|
8
16
|
|
|
9
17
|
export { locales as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_.locale.json@72ba2ce40f190df671686fec50c04ddf.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_.locale.json@72ba2ce40f190df671686fec50c04ddf.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_.locale.json@849e6f494125ee27df10a461562fa893.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/dist/js/default.mjs
CHANGED
|
@@ -203,6 +203,7 @@ export { IconUnavailable } from './packages/components/src/components/Icon/compo
|
|
|
203
203
|
export { IconWarning } from './packages/components/src/components/Icon/components/icons/IconWarning.mjs';
|
|
204
204
|
export { IllustratedMessage } from './packages/components/src/components/IllustratedMessage/IllustratedMessage.mjs';
|
|
205
205
|
export { Image } from './packages/components/src/components/Image/Image.mjs';
|
|
206
|
+
export { ImageCropper } from './packages/components/src/components/ImageCropper/ImageCropper.mjs';
|
|
206
207
|
export { Initials } from './packages/components/src/components/Initials/Initials.mjs';
|
|
207
208
|
export { InlineCode } from './packages/components/src/components/InlineCode/InlineCode.mjs';
|
|
208
209
|
export { IntlProvider } from './packages/components/src/components/IntlProvider/IntlProvider.mjs';
|
package/dist/js/default.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -193,6 +193,8 @@ import './packages/components/src/components/Icon/components/IconSetProvider.mjs
|
|
|
193
193
|
import './packages/components/src/components/Icon/Icon.mjs';
|
|
194
194
|
import './packages/components/src/components/IllustratedMessage/IllustratedMessage.mjs';
|
|
195
195
|
import './packages/components/src/components/Image/Image.mjs';
|
|
196
|
+
import 'react-easy-crop';
|
|
197
|
+
import './packages/components/src/components/Slider/Slider.mjs';
|
|
196
198
|
import './packages/components/src/components/Initials/Initials.mjs';
|
|
197
199
|
import './packages/components/src/components/Label/Label.mjs';
|
|
198
200
|
import './packages/components/src/components/LayoutCard/LayoutCard.mjs';
|
|
@@ -241,7 +243,6 @@ import './packages/components/src/components/SegmentedControl/components/Segment
|
|
|
241
243
|
import './packages/components/src/components/Select/Select.mjs';
|
|
242
244
|
export { SettingsProvider } from './packages/components/src/components/SettingsProvider/SettingsProvider.mjs';
|
|
243
245
|
import './packages/components/src/components/Kbd/Kbd.mjs';
|
|
244
|
-
import './packages/components/src/components/Slider/Slider.mjs';
|
|
245
246
|
import './packages/components/src/components/SuspenseTrigger/SuspenseTrigger.mjs';
|
|
246
247
|
import './packages/components/src/components/Switch/Switch.mjs';
|
|
247
248
|
import './packages/components/src/components/Tabs/Tabs.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"flr-universal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { useState, useEffectEvent, useEffect } from 'react';
|
|
5
|
+
import Cropper from 'react-easy-crop';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import styles from './ImageCropper.module.scss.mjs';
|
|
8
|
+
import { Slider } from '../Slider/Slider.mjs';
|
|
9
|
+
import { getCroppedImageFile } from './lib/getCroppedImageFile.mjs';
|
|
10
|
+
import { useLocalizedStringFormatter } from 'react-aria';
|
|
11
|
+
import locales from '../../../../../_virtual/_.locale.json@849e6f494125ee27df10a461562fa893.mjs';
|
|
12
|
+
import { useImageSrc } from '../../lib/hooks/useImageSrc.mjs';
|
|
13
|
+
|
|
14
|
+
const ImageCropper = (props) => {
|
|
15
|
+
const {
|
|
16
|
+
image,
|
|
17
|
+
className,
|
|
18
|
+
onCropComplete,
|
|
19
|
+
width = 300,
|
|
20
|
+
height = 300,
|
|
21
|
+
aspectRatio,
|
|
22
|
+
...rest
|
|
23
|
+
} = props;
|
|
24
|
+
const imageSrc = useImageSrc(image);
|
|
25
|
+
const [crop, setCrop] = useState({ x: 0, y: 0 });
|
|
26
|
+
const [zoom, setZoom] = useState(1);
|
|
27
|
+
const [croppedAreaPixels, setCroppedAreaPixels] = useState();
|
|
28
|
+
const rootClassName = clsx(styles.imageCropper, className);
|
|
29
|
+
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
30
|
+
const onCropAreaPixelsChange = useEffectEvent(async () => {
|
|
31
|
+
if (croppedAreaPixels) {
|
|
32
|
+
const croppedImageFile = await getCroppedImageFile(
|
|
33
|
+
imageSrc,
|
|
34
|
+
croppedAreaPixels
|
|
35
|
+
);
|
|
36
|
+
if (onCropComplete) {
|
|
37
|
+
onCropComplete(croppedImageFile);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
void onCropAreaPixelsChange();
|
|
43
|
+
}, [croppedAreaPixels]);
|
|
44
|
+
return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: { width }, children: [
|
|
45
|
+
/* @__PURE__ */ jsx("div", { className: styles.cropperContainer, style: { height }, children: /* @__PURE__ */ jsx(
|
|
46
|
+
Cropper,
|
|
47
|
+
{
|
|
48
|
+
aspect: aspectRatio,
|
|
49
|
+
crop,
|
|
50
|
+
image: imageSrc,
|
|
51
|
+
onCropChange: setCrop,
|
|
52
|
+
zoom,
|
|
53
|
+
onZoomChange: setZoom,
|
|
54
|
+
onCropComplete: (_, croppedAreaPixels2) => setCroppedAreaPixels(croppedAreaPixels2),
|
|
55
|
+
...rest
|
|
56
|
+
}
|
|
57
|
+
) }),
|
|
58
|
+
/* @__PURE__ */ jsx(
|
|
59
|
+
Slider,
|
|
60
|
+
{
|
|
61
|
+
minValue: 1,
|
|
62
|
+
maxValue: 3,
|
|
63
|
+
step: 0.01,
|
|
64
|
+
value: zoom,
|
|
65
|
+
sliderOnly: true,
|
|
66
|
+
onChange: (zoom2) => setZoom(zoom2),
|
|
67
|
+
"aria-label": stringFormatter.format("zoom")
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
] });
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export { ImageCropper };
|
|
74
|
+
//# sourceMappingURL=ImageCropper.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageCropper.mjs","sources":["../../../../../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type FC,\n useEffect,\n useEffectEvent,\n useState,\n} from \"react\";\nimport Cropper, { type Area, type CropperProps } from \"react-easy-crop\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./ImageCropper.module.scss\";\nimport { Slider } from \"@/components/Slider\";\nimport { getCroppedImageFile } from \"@/components/ImageCropper/lib/getCroppedImageFile\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { useImageSrc } from \"@/lib/hooks/useImageSrc\";\n\nexport interface ImageCropperProps\n extends PropsWithClassName, Partial<Pick<CropperProps, \"cropShape\">> {\n /** The image file to crop. */\n image?: File | string;\n /** Callback on crop complete. */\n onCropComplete?: (croppedImage: File) => void;\n /** The width of the component. @default 300 */\n width?: CSSProperties[\"width\"];\n /** The height of the component. @default 300 */\n height?: CSSProperties[\"height\"];\n /** The aspect ratio of the crop shape. */\n aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const ImageCropper: FC<ImageCropperProps> = (props) => {\n const {\n image,\n className,\n onCropComplete,\n width = 300,\n height = 300,\n aspectRatio,\n ...rest\n } = props;\n\n const imageSrc = useImageSrc(image);\n\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [zoom, setZoom] = useState(1);\n const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area>();\n\n const rootClassName = clsx(styles.imageCropper, className);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const onCropAreaPixelsChange = useEffectEvent(async () => {\n if (croppedAreaPixels) {\n const croppedImageFile = await getCroppedImageFile(\n imageSrc,\n croppedAreaPixels,\n );\n if (onCropComplete) {\n onCropComplete(croppedImageFile);\n }\n }\n });\n\n useEffect(() => {\n void onCropAreaPixelsChange();\n }, [croppedAreaPixels]);\n\n return (\n <div className={rootClassName} style={{ width }}>\n <div className={styles.cropperContainer} style={{ height }}>\n <Cropper\n aspect={aspectRatio}\n crop={crop}\n image={imageSrc}\n onCropChange={setCrop}\n zoom={zoom}\n onZoomChange={setZoom}\n onCropComplete={(_, croppedAreaPixels) =>\n setCroppedAreaPixels(croppedAreaPixels)\n }\n {...rest}\n />\n </div>\n <Slider\n minValue={1}\n maxValue={3}\n step={0.01}\n value={zoom}\n sliderOnly\n onChange={(zoom) => setZoom(zoom as number)}\n aria-label={stringFormatter.format(\"zoom\")}\n />\n </div>\n );\n};\n\nexport default ImageCropper;\n"],"names":["croppedAreaPixels","zoom"],"mappings":";;;;;;;;;;;AAgCO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA,GAAQ,GAAA;AAAA,IACR,MAAA,GAAS,GAAA;AAAA,IACT,WAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAA,GAAW,YAAY,KAAK,CAAA;AAElC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,CAAS,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA,EAAe;AAEjE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,sBAAA,GAAyB,eAAe,YAAY;AACxD,IAAA,IAAI,iBAAA,EAAmB;AACrB,MAAA,MAAM,mBAAmB,MAAM,mBAAA;AAAA,QAC7B,QAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,cAAA,CAAe,gBAAgB,CAAA;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,KAAK,sBAAA,EAAuB;AAAA,EAC9B,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,eAAe,KAAA,EAAO,EAAE,OAAM,EAC5C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,kBAAkB,KAAA,EAAO,EAAE,QAAO,EACvD,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,WAAA;AAAA,QACR,IAAA;AAAA,QACA,KAAA,EAAO,QAAA;AAAA,QACP,YAAA,EAAc,OAAA;AAAA,QACd,IAAA;AAAA,QACA,YAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAgB,CAAC,CAAA,EAAGA,kBAAAA,KAClB,qBAAqBA,kBAAiB,CAAA;AAAA,QAEvC,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,QAAA,EAAU,CAAA;AAAA,QACV,IAAA,EAAM,IAAA;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,UAAA,EAAU,IAAA;AAAA,QACV,QAAA,EAAU,CAACC,KAAAA,KAAS,OAAA,CAAQA,KAAc,CAAA;AAAA,QAC1C,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,MAAM;AAAA;AAAA;AAC3C,GAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
const imageCropper = "flow--image-cropper";
|
|
4
|
+
const cropperContainer = "flow--image-cropper--cropper-container";
|
|
5
|
+
const styles = {
|
|
6
|
+
imageCropper: imageCropper,
|
|
7
|
+
cropperContainer: cropperContainer
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { cropperContainer, styles as default, imageCropper };
|
|
11
|
+
//# sourceMappingURL=ImageCropper.module.scss.mjs.map
|
package/dist/js/packages/components/src/components/ImageCropper/ImageCropper.module.scss.mjs.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageCropper.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
function getCroppedImageFile(imageSrc, pixelCrop) {
|
|
4
|
+
return new Promise((resolve, reject) => {
|
|
5
|
+
const image = new Image();
|
|
6
|
+
image.crossOrigin = "anonymous";
|
|
7
|
+
image.src = imageSrc;
|
|
8
|
+
image.onload = () => {
|
|
9
|
+
const canvas = document.createElement("canvas");
|
|
10
|
+
canvas.width = pixelCrop.width;
|
|
11
|
+
canvas.height = pixelCrop.height;
|
|
12
|
+
const ctx = canvas.getContext("2d");
|
|
13
|
+
if (!ctx) {
|
|
14
|
+
reject(new Error("Failed to get canvas context"));
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
ctx.drawImage(
|
|
18
|
+
image,
|
|
19
|
+
pixelCrop.x,
|
|
20
|
+
pixelCrop.y,
|
|
21
|
+
pixelCrop.width,
|
|
22
|
+
pixelCrop.height,
|
|
23
|
+
0,
|
|
24
|
+
0,
|
|
25
|
+
pixelCrop.width,
|
|
26
|
+
pixelCrop.height
|
|
27
|
+
);
|
|
28
|
+
canvas.toBlob((blob) => {
|
|
29
|
+
if (!blob) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const file = new File([blob], "cropped-image.png", {
|
|
33
|
+
type: "image/png"
|
|
34
|
+
});
|
|
35
|
+
resolve(file);
|
|
36
|
+
}, "image/png");
|
|
37
|
+
};
|
|
38
|
+
image.onerror = () => {
|
|
39
|
+
reject(new Error("Failed to load image"));
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export { getCroppedImageFile };
|
|
45
|
+
//# sourceMappingURL=getCroppedImageFile.mjs.map
|
package/dist/js/packages/components/src/components/ImageCropper/lib/getCroppedImageFile.mjs.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getCroppedImageFile.mjs","sources":["../../../../../../../../src/components/ImageCropper/lib/getCroppedImageFile.ts"],"sourcesContent":["import type { Area } from \"react-easy-crop\";\n\nexport function getCroppedImageFile(\n imageSrc: string,\n pixelCrop: Area,\n): Promise<File> {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.src = imageSrc;\n\n image.onload = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n reject(new Error(\"Failed to get canvas context\"));\n return;\n }\n\n ctx.drawImage(\n image,\n pixelCrop.x,\n pixelCrop.y,\n pixelCrop.width,\n pixelCrop.height,\n 0,\n 0,\n pixelCrop.width,\n pixelCrop.height,\n );\n\n canvas.toBlob((blob) => {\n if (!blob) {\n return;\n }\n\n const file = new File([blob], \"cropped-image.png\", {\n type: \"image/png\",\n });\n resolve(file);\n }, \"image/png\");\n };\n\n image.onerror = () => {\n reject(new Error(\"Failed to load image\"));\n };\n });\n}\n"],"names":[],"mappings":"AAEO,SAAS,mBAAA,CACd,UACA,SAAA,EACe;AACf,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAA,KAAW;AACtC,IAAA,MAAM,KAAA,GAAQ,IAAI,KAAA,EAAM;AACxB,IAAA,KAAA,CAAM,WAAA,GAAc,WAAA;AACpB,IAAA,KAAA,CAAM,GAAA,GAAM,QAAA;AAEZ,IAAA,KAAA,CAAM,SAAS,MAAM;AACnB,MAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAC9C,MAAA,MAAA,CAAO,QAAQ,SAAA,CAAU,KAAA;AACzB,MAAA,MAAA,CAAO,SAAS,SAAA,CAAU,MAAA;AAC1B,MAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAA;AAElC,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,MAAA,CAAO,IAAI,KAAA,CAAM,8BAA8B,CAAC,CAAA;AAChD,QAAA;AAAA,MACF;AAEA,MAAA,GAAA,CAAI,SAAA;AAAA,QACF,KAAA;AAAA,QACA,SAAA,CAAU,CAAA;AAAA,QACV,SAAA,CAAU,CAAA;AAAA,QACV,SAAA,CAAU,KAAA;AAAA,QACV,SAAA,CAAU,MAAA;AAAA,QACV,CAAA;AAAA,QACA,CAAA;AAAA,QACA,SAAA,CAAU,KAAA;AAAA,QACV,SAAA,CAAU;AAAA,OACZ;AAEA,MAAA,MAAA,CAAO,MAAA,CAAO,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,CAAC,IAAA,EAAM;AACT,UAAA;AAAA,QACF;AAEA,QAAA,MAAM,OAAO,IAAI,IAAA,CAAK,CAAC,IAAI,GAAG,mBAAA,EAAqB;AAAA,UACjD,IAAA,EAAM;AAAA,SACP,CAAA;AACD,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MACd,GAAG,WAAW,CAAA;AAAA,IAChB,CAAA;AAEA,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,MAAA,CAAO,IAAI,KAAA,CAAM,sBAAsB,CAAC,CAAA;AAAA,IAC1C,CAAA;AAAA,EACF,CAAC,CAAA;AACH;;;;"}
|
|
@@ -80,9 +80,6 @@ class Filter {
|
|
|
80
80
|
return this.getStoredSelectedIds(options)?.map((id) => this.values.find((v) => v.id === id)).filter((v) => v !== void 0);
|
|
81
81
|
}
|
|
82
82
|
static storeFilters(list, options) {
|
|
83
|
-
if (!list.filters.some((f) => f.hasChanges())) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
83
|
const data = Object.fromEntries(
|
|
87
84
|
list.filters.map((filter) => [
|
|
88
85
|
filter.storageKey,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.mjs","sources":["../../../../../../../../../src/components/List/model/filter/Filter.ts"],"sourcesContent":["import type {\n Column,\n ColumnDef,\n ColumnFilter,\n InitialTableState,\n} from \"@tanstack/react-table\";\nimport type List from \"@/components/List/model/List\";\nimport { getProperty } from \"dot-prop\";\nimport type {\n FilterMatcher,\n FilterMode,\n FilterShape,\n FilterUpdatedCallback,\n} from \"@/components/List/model/filter/types\";\nimport type {\n PropertyName,\n PropertyValueRenderMethod,\n} from \"@/components/List/model/types\";\nimport { customPropertyPrefix } from \"@/components/List/model/types\";\nimport { difference, unique } from \"remeda\";\nimport { FilterValue } from \"@/components/List/model/filter/FilterValue\";\nimport { toArray } from \"@/lib/array/toArray\";\nimport type { ListSettingsStoreOperationOptions } from \"../ListSettingsStore\";\n\nconst equalsPropertyMatcher: FilterMatcher<unknown, never, never> = (\n filterValue,\n propertyValue,\n) => filterValue === propertyValue;\n\nconst stringCastRenderMethod: PropertyValueRenderMethod<unknown> = (value) =>\n String(value);\n\nexport class Filter<\n T = never,\n TProp extends PropertyName<T> = never,\n TMatchValue = never,\n> {\n private _values?: FilterValue[] | undefined;\n private _valuesFromTableState?: FilterValue[];\n public readonly list: List<T>;\n public readonly property: TProp;\n public readonly mode: FilterMode;\n public readonly matcher: FilterMatcher<T, never, never>;\n public readonly renderItem: PropertyValueRenderMethod<TMatchValue>;\n public readonly name?: string;\n public readonly autosave: boolean;\n public readonly manualSave: boolean;\n private onFilterChangeCallbacks = new Set<FilterUpdatedCallback>();\n private readonly defaultSelectedValues?: FilterValue[];\n public readonly priority: \"primary\" | \"secondary\";\n public readonly storageKey: string;\n\n public constructor(list: List<T>, shape: FilterShape<T, TProp, TMatchValue>) {\n const {\n autosave = list.settingsStorageDefaults?.filters?.autosave ?? false,\n manualSave = list.settingsStorageDefaults?.filters?.manualSave ?? true,\n property,\n mode = \"some\",\n values,\n matcher = equalsPropertyMatcher,\n renderItem = stringCastRenderMethod,\n priority = \"primary\",\n name,\n defaultSelected,\n onChange,\n } = shape;\n\n this.list = list;\n this.autosave = autosave;\n this.manualSave = manualSave;\n this.property = property;\n this.storageKey = String(property);\n this.mode = mode;\n this._values = values?.map((v) => FilterValue.create(this, v));\n this.matcher = matcher;\n this.renderItem = renderItem;\n this.name = name;\n this.priority = priority;\n this.defaultSelectedValues = defaultSelected?.map((v) =>\n FilterValue.create(this, v),\n );\n if (onChange) {\n this.onFilterChangeCallbacks.add(onChange);\n }\n }\n\n public updateInitialState(initialState: InitialTableState) {\n const initialIds = this.getInitialSelectedIds();\n\n if (initialIds?.length) {\n initialState.columnFilters = [\n ...(initialState.columnFilters ?? []),\n {\n id: this.property as string,\n value: initialIds,\n },\n ];\n }\n }\n\n private getInitialSelectedIds() {\n return (\n this.getStoredSelectedIds({\n autosave: this.autosave,\n manualSave: this.manualSave,\n }) ?? this.defaultSelectedValues?.map((v) => v.id)\n );\n }\n\n private getStoredSelectedIds(options: ListSettingsStoreOperationOptions) {\n return this.list.settingsStorage?.get(\"activeFilters\", options)?.[\n this.storageKey\n ];\n }\n\n private getStoredSelectedValues(options: ListSettingsStoreOperationOptions) {\n return this.getStoredSelectedIds(options)\n ?.map((id) => this.values.find((v) => v.id === id))\n .filter((v): v is FilterValue => v !== undefined);\n }\n\n public static storeFilters<T>(\n list: List<T>,\n options: ListSettingsStoreOperationOptions,\n ) {\n if (!list.filters.some((f) => f.hasChanges())) {\n return;\n }\n\n const data = Object.fromEntries(\n list.filters.map((filter) => [\n filter.storageKey,\n filter.getArrayValue().map((v) => v.id),\n ]),\n );\n\n list.settingsStorage?.store(\"activeFilters\", data, options);\n }\n\n public updateTableColumnDef(def: ColumnDef<T>): void {\n def.enableColumnFilter = true;\n def.filterFn = this.getReactTableFilterFn();\n }\n\n private getReactTableFilterFn(): ColumnDef<T>[\"filterFn\"] {\n return (row, _, filterValue) => {\n const propertyAsString = this.property as string;\n\n const filterBy = propertyAsString.startsWith(customPropertyPrefix)\n ? row.original\n : getProperty(row.original, propertyAsString);\n\n return this.checkFilterMatches(filterBy, filterValue);\n };\n }\n\n private checkFilterMatches(\n property: unknown,\n filterValueInput: unknown,\n ): boolean {\n if (filterValueInput === null) {\n return true;\n }\n\n const predicate = (filterValue: FilterValue) =>\n this.matcher(filterValue.value as never, property as never);\n\n const toFilterValue = (something: unknown) =>\n FilterValue.create(this, something);\n\n if (this.mode === \"all\") {\n return toArray(filterValueInput).map(toFilterValue).every(predicate);\n } else if (this.mode === \"some\") {\n const filterArr = toArray(filterValueInput);\n return (\n filterArr.length === 0 || filterArr.map(toFilterValue).some(predicate)\n );\n } else if (this.mode === \"one\") {\n const oneValue = Array.isArray(filterValueInput)\n ? filterValueInput[0]\n : filterValueInput;\n return predicate(toFilterValue(oneValue));\n }\n\n throw new Error(`Unknown filter mode '${this.mode}'`);\n }\n\n protected getTableColumnFilter(): ColumnFilter | undefined {\n return this.list.reactTable.table\n .getState()\n .columnFilters.find((f) => f.id === this.property);\n }\n\n private getTableColumn(): Column<T> {\n return this.list.reactTable.getTableColumn(this.property);\n }\n\n public getValue(): unknown {\n return this.getTableColumnFilter()?.value ?? null;\n }\n\n private getValuesFromTableState() {\n return unique(\n Array.from(this.getTableColumn().getFacetedUniqueValues().keys())\n .flatMap((v) => v)\n .filter((v) => v !== undefined && v !== null),\n ).map((v) => FilterValue.create(this, v));\n }\n\n private checkIfValueIsUnknown(value: FilterValue) {\n const isKnown = this.values.some((v) => v.id === value.id);\n return !isKnown;\n }\n\n public deleteUnknownFilterValues() {\n if (this.values === this.valuesFromTableState) {\n return;\n }\n\n for (const currentValues of this.getArrayValue()) {\n if (this.checkIfValueIsUnknown(currentValues)) {\n this.deactivateValue(currentValues);\n }\n }\n }\n\n public get values(): FilterValue[] {\n return this._values ?? this.valuesFromTableState;\n }\n\n private get valuesFromTableState(): FilterValue[] {\n if (!this._valuesFromTableState) {\n this._valuesFromTableState = this.getValuesFromTableState();\n }\n return this._valuesFromTableState;\n }\n\n public getArrayValue(): FilterValue[] {\n const value = this.getValue();\n return value === null\n ? []\n : toArray(value).map((v) => FilterValue.create(this, v));\n }\n\n public isValueActive(value: FilterValue): boolean {\n return this.getArrayValue().some((v) => v.equals(value));\n }\n\n public isActive(): boolean {\n return this.getArrayValue().length > 0;\n }\n\n public deactivateValue(value: FilterValue): void {\n const currentValueAsArray = this.getArrayValue();\n\n let updatedValue: FilterValue[] | FilterValue | null;\n\n if (this.mode === \"all\" || this.mode === \"some\") {\n updatedValue = currentValueAsArray.filter((v) => !v.equals(value));\n } else {\n updatedValue = null;\n }\n\n this.list.reactTable\n .getTableColumn(this.property)\n .setFilterValue(updatedValue);\n\n this.callOnChangedHandlers(updatedValue);\n }\n\n private callOnChangedHandlers(\n newValue: FilterValue[] | FilterValue | null,\n ): void {\n const values = toArray(newValue).map((v) => v?.value);\n this.onFilterChangeCallbacks.forEach((cb) => cb(values));\n }\n\n public hasChanges(): boolean {\n const currentIds = this.getArrayValue().map((v) => v.id);\n\n const defaultIds =\n this.getStoredSelectedIds({ autosave: false }) ??\n this.defaultSelectedValues?.map((v) => v.id) ??\n [];\n\n return (\n currentIds.length !== defaultIds.length ||\n difference(currentIds, defaultIds).length > 0\n );\n }\n\n public isStoringAvailable(): boolean {\n return !!this.list.settingsStorage && this.manualSave;\n }\n\n public resetValues(): void {\n let resetTo: FilterValue[] | FilterValue | null;\n\n const storedValues =\n this.getStoredSelectedValues({ autosave: false }) ??\n this.defaultSelectedValues;\n\n if (storedValues) {\n resetTo = storedValues;\n } else {\n if (this.mode === \"all\" || this.mode === \"some\") {\n resetTo = [];\n } else {\n resetTo = null;\n }\n }\n\n this.list.reactTable.getTableColumn(this.property).setFilterValue(resetTo);\n this.callOnChangedHandlers(resetTo);\n }\n\n public clear(): void {\n this.list.reactTable.getTableColumn(this.property).setFilterValue(null);\n this.callOnChangedHandlers(null);\n }\n\n public toggleValue(newValue: FilterValue): void {\n const currentValueAsArray = this.getArrayValue();\n\n let updatedValue: FilterValue[] | FilterValue | null;\n\n if (this.mode === \"all\" || this.mode === \"some\") {\n if (newValue.isActive) {\n updatedValue = currentValueAsArray.filter((v) => !v.equals(newValue));\n } else {\n updatedValue = [...currentValueAsArray, newValue];\n }\n } else {\n updatedValue = newValue.isActive ? null : newValue;\n }\n\n this.list.reactTable\n .getTableColumn(this.property)\n .setFilterValue(updatedValue);\n this.callOnChangedHandlers(updatedValue);\n }\n\n public onFilterUpdated(cb: () => unknown): void {\n this.onFilterChangeCallbacks.add(cb);\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Filter.mjs","sources":["../../../../../../../../../src/components/List/model/filter/Filter.ts"],"sourcesContent":["import type {\n Column,\n ColumnDef,\n ColumnFilter,\n InitialTableState,\n} from \"@tanstack/react-table\";\nimport type List from \"@/components/List/model/List\";\nimport { getProperty } from \"dot-prop\";\nimport type {\n FilterMatcher,\n FilterMode,\n FilterShape,\n FilterUpdatedCallback,\n} from \"@/components/List/model/filter/types\";\nimport type {\n PropertyName,\n PropertyValueRenderMethod,\n} from \"@/components/List/model/types\";\nimport { customPropertyPrefix } from \"@/components/List/model/types\";\nimport { difference, unique } from \"remeda\";\nimport { FilterValue } from \"@/components/List/model/filter/FilterValue\";\nimport { toArray } from \"@/lib/array/toArray\";\nimport type { ListSettingsStoreOperationOptions } from \"../ListSettingsStore\";\n\nconst equalsPropertyMatcher: FilterMatcher<unknown, never, never> = (\n filterValue,\n propertyValue,\n) => filterValue === propertyValue;\n\nconst stringCastRenderMethod: PropertyValueRenderMethod<unknown> = (value) =>\n String(value);\n\nexport class Filter<\n T = never,\n TProp extends PropertyName<T> = never,\n TMatchValue = never,\n> {\n private _values?: FilterValue[] | undefined;\n private _valuesFromTableState?: FilterValue[];\n public readonly list: List<T>;\n public readonly property: TProp;\n public readonly mode: FilterMode;\n public readonly matcher: FilterMatcher<T, never, never>;\n public readonly renderItem: PropertyValueRenderMethod<TMatchValue>;\n public readonly name?: string;\n public readonly autosave: boolean;\n public readonly manualSave: boolean;\n private onFilterChangeCallbacks = new Set<FilterUpdatedCallback>();\n private readonly defaultSelectedValues?: FilterValue[];\n public readonly priority: \"primary\" | \"secondary\";\n public readonly storageKey: string;\n\n public constructor(list: List<T>, shape: FilterShape<T, TProp, TMatchValue>) {\n const {\n autosave = list.settingsStorageDefaults?.filters?.autosave ?? false,\n manualSave = list.settingsStorageDefaults?.filters?.manualSave ?? true,\n property,\n mode = \"some\",\n values,\n matcher = equalsPropertyMatcher,\n renderItem = stringCastRenderMethod,\n priority = \"primary\",\n name,\n defaultSelected,\n onChange,\n } = shape;\n\n this.list = list;\n this.autosave = autosave;\n this.manualSave = manualSave;\n this.property = property;\n this.storageKey = String(property);\n this.mode = mode;\n this._values = values?.map((v) => FilterValue.create(this, v));\n this.matcher = matcher;\n this.renderItem = renderItem;\n this.name = name;\n this.priority = priority;\n this.defaultSelectedValues = defaultSelected?.map((v) =>\n FilterValue.create(this, v),\n );\n if (onChange) {\n this.onFilterChangeCallbacks.add(onChange);\n }\n }\n\n public updateInitialState(initialState: InitialTableState) {\n const initialIds = this.getInitialSelectedIds();\n\n if (initialIds?.length) {\n initialState.columnFilters = [\n ...(initialState.columnFilters ?? []),\n {\n id: this.property as string,\n value: initialIds,\n },\n ];\n }\n }\n\n private getInitialSelectedIds() {\n return (\n this.getStoredSelectedIds({\n autosave: this.autosave,\n manualSave: this.manualSave,\n }) ?? this.defaultSelectedValues?.map((v) => v.id)\n );\n }\n\n private getStoredSelectedIds(options: ListSettingsStoreOperationOptions) {\n return this.list.settingsStorage?.get(\"activeFilters\", options)?.[\n this.storageKey\n ];\n }\n\n private getStoredSelectedValues(options: ListSettingsStoreOperationOptions) {\n return this.getStoredSelectedIds(options)\n ?.map((id) => this.values.find((v) => v.id === id))\n .filter((v): v is FilterValue => v !== undefined);\n }\n\n public static storeFilters<T>(\n list: List<T>,\n options: ListSettingsStoreOperationOptions,\n ) {\n const data = Object.fromEntries(\n list.filters.map((filter) => [\n filter.storageKey,\n filter.getArrayValue().map((v) => v.id),\n ]),\n );\n\n list.settingsStorage?.store(\"activeFilters\", data, options);\n }\n\n public updateTableColumnDef(def: ColumnDef<T>): void {\n def.enableColumnFilter = true;\n def.filterFn = this.getReactTableFilterFn();\n }\n\n private getReactTableFilterFn(): ColumnDef<T>[\"filterFn\"] {\n return (row, _, filterValue) => {\n const propertyAsString = this.property as string;\n\n const filterBy = propertyAsString.startsWith(customPropertyPrefix)\n ? row.original\n : getProperty(row.original, propertyAsString);\n\n return this.checkFilterMatches(filterBy, filterValue);\n };\n }\n\n private checkFilterMatches(\n property: unknown,\n filterValueInput: unknown,\n ): boolean {\n if (filterValueInput === null) {\n return true;\n }\n\n const predicate = (filterValue: FilterValue) =>\n this.matcher(filterValue.value as never, property as never);\n\n const toFilterValue = (something: unknown) =>\n FilterValue.create(this, something);\n\n if (this.mode === \"all\") {\n return toArray(filterValueInput).map(toFilterValue).every(predicate);\n } else if (this.mode === \"some\") {\n const filterArr = toArray(filterValueInput);\n return (\n filterArr.length === 0 || filterArr.map(toFilterValue).some(predicate)\n );\n } else if (this.mode === \"one\") {\n const oneValue = Array.isArray(filterValueInput)\n ? filterValueInput[0]\n : filterValueInput;\n return predicate(toFilterValue(oneValue));\n }\n\n throw new Error(`Unknown filter mode '${this.mode}'`);\n }\n\n protected getTableColumnFilter(): ColumnFilter | undefined {\n return this.list.reactTable.table\n .getState()\n .columnFilters.find((f) => f.id === this.property);\n }\n\n private getTableColumn(): Column<T> {\n return this.list.reactTable.getTableColumn(this.property);\n }\n\n public getValue(): unknown {\n return this.getTableColumnFilter()?.value ?? null;\n }\n\n private getValuesFromTableState() {\n return unique(\n Array.from(this.getTableColumn().getFacetedUniqueValues().keys())\n .flatMap((v) => v)\n .filter((v) => v !== undefined && v !== null),\n ).map((v) => FilterValue.create(this, v));\n }\n\n private checkIfValueIsUnknown(value: FilterValue) {\n const isKnown = this.values.some((v) => v.id === value.id);\n return !isKnown;\n }\n\n public deleteUnknownFilterValues() {\n if (this.values === this.valuesFromTableState) {\n return;\n }\n\n for (const currentValues of this.getArrayValue()) {\n if (this.checkIfValueIsUnknown(currentValues)) {\n this.deactivateValue(currentValues);\n }\n }\n }\n\n public get values(): FilterValue[] {\n return this._values ?? this.valuesFromTableState;\n }\n\n private get valuesFromTableState(): FilterValue[] {\n if (!this._valuesFromTableState) {\n this._valuesFromTableState = this.getValuesFromTableState();\n }\n return this._valuesFromTableState;\n }\n\n public getArrayValue(): FilterValue[] {\n const value = this.getValue();\n return value === null\n ? []\n : toArray(value).map((v) => FilterValue.create(this, v));\n }\n\n public isValueActive(value: FilterValue): boolean {\n return this.getArrayValue().some((v) => v.equals(value));\n }\n\n public isActive(): boolean {\n return this.getArrayValue().length > 0;\n }\n\n public deactivateValue(value: FilterValue): void {\n const currentValueAsArray = this.getArrayValue();\n\n let updatedValue: FilterValue[] | FilterValue | null;\n\n if (this.mode === \"all\" || this.mode === \"some\") {\n updatedValue = currentValueAsArray.filter((v) => !v.equals(value));\n } else {\n updatedValue = null;\n }\n\n this.list.reactTable\n .getTableColumn(this.property)\n .setFilterValue(updatedValue);\n\n this.callOnChangedHandlers(updatedValue);\n }\n\n private callOnChangedHandlers(\n newValue: FilterValue[] | FilterValue | null,\n ): void {\n const values = toArray(newValue).map((v) => v?.value);\n this.onFilterChangeCallbacks.forEach((cb) => cb(values));\n }\n\n public hasChanges(): boolean {\n const currentIds = this.getArrayValue().map((v) => v.id);\n\n const defaultIds =\n this.getStoredSelectedIds({ autosave: false }) ??\n this.defaultSelectedValues?.map((v) => v.id) ??\n [];\n\n return (\n currentIds.length !== defaultIds.length ||\n difference(currentIds, defaultIds).length > 0\n );\n }\n\n public isStoringAvailable(): boolean {\n return !!this.list.settingsStorage && this.manualSave;\n }\n\n public resetValues(): void {\n let resetTo: FilterValue[] | FilterValue | null;\n\n const storedValues =\n this.getStoredSelectedValues({ autosave: false }) ??\n this.defaultSelectedValues;\n\n if (storedValues) {\n resetTo = storedValues;\n } else {\n if (this.mode === \"all\" || this.mode === \"some\") {\n resetTo = [];\n } else {\n resetTo = null;\n }\n }\n\n this.list.reactTable.getTableColumn(this.property).setFilterValue(resetTo);\n this.callOnChangedHandlers(resetTo);\n }\n\n public clear(): void {\n this.list.reactTable.getTableColumn(this.property).setFilterValue(null);\n this.callOnChangedHandlers(null);\n }\n\n public toggleValue(newValue: FilterValue): void {\n const currentValueAsArray = this.getArrayValue();\n\n let updatedValue: FilterValue[] | FilterValue | null;\n\n if (this.mode === \"all\" || this.mode === \"some\") {\n if (newValue.isActive) {\n updatedValue = currentValueAsArray.filter((v) => !v.equals(newValue));\n } else {\n updatedValue = [...currentValueAsArray, newValue];\n }\n } else {\n updatedValue = newValue.isActive ? null : newValue;\n }\n\n this.list.reactTable\n .getTableColumn(this.property)\n .setFilterValue(updatedValue);\n this.callOnChangedHandlers(updatedValue);\n }\n\n public onFilterUpdated(cb: () => unknown): void {\n this.onFilterChangeCallbacks.add(cb);\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
6
6
|
import * as Aria from 'react-aria-components';
|
|
@@ -31,6 +31,8 @@ const Slider = flowComponent("Slider", (props) => {
|
|
|
31
31
|
showInitialMarker,
|
|
32
32
|
isReadOnly,
|
|
33
33
|
ref,
|
|
34
|
+
step,
|
|
35
|
+
sliderOnly,
|
|
34
36
|
...rest
|
|
35
37
|
} = props;
|
|
36
38
|
const rootClassName = clsx(
|
|
@@ -51,7 +53,8 @@ const Slider = flowComponent("Slider", (props) => {
|
|
|
51
53
|
Label: {
|
|
52
54
|
unstyled: true,
|
|
53
55
|
tunnelId: "label",
|
|
54
|
-
...fieldPropsContext.Label
|
|
56
|
+
...fieldPropsContext.Label,
|
|
57
|
+
className: styles.label
|
|
55
58
|
}
|
|
56
59
|
};
|
|
57
60
|
return /* @__PURE__ */ jsx("div", { ...fieldProps, children: /* @__PURE__ */ jsx(
|
|
@@ -61,10 +64,12 @@ const Slider = flowComponent("Slider", (props) => {
|
|
|
61
64
|
className: rootClassName,
|
|
62
65
|
isDisabled,
|
|
63
66
|
defaultValue,
|
|
67
|
+
step,
|
|
64
68
|
children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
|
|
65
69
|
/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }),
|
|
66
|
-
/* @__PURE__ */ jsxs("div", { className: styles.text, children: [
|
|
70
|
+
!sliderOnly && /* @__PURE__ */ jsxs("div", { className: styles.text, children: [
|
|
67
71
|
/* @__PURE__ */ jsx(Aria.SliderOutput, { className: styles.value }),
|
|
72
|
+
" ",
|
|
68
73
|
/* @__PURE__ */ jsx(TunnelExit, { id: "label" })
|
|
69
74
|
] }),
|
|
70
75
|
/* @__PURE__ */ jsx(Aria.SliderTrack, { className: styles.track, children: ({ state }) => /* @__PURE__ */ jsxs(
|
|
@@ -83,24 +88,26 @@ const Slider = flowComponent("Slider", (props) => {
|
|
|
83
88
|
}
|
|
84
89
|
},
|
|
85
90
|
children: [
|
|
86
|
-
/* @__PURE__ */
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
91
|
+
!sliderOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
92
|
+
/* @__PURE__ */ jsx(
|
|
93
|
+
Button,
|
|
94
|
+
{
|
|
95
|
+
onPress: () => state.decrementThumb(0, step),
|
|
96
|
+
"aria-label": stringFormatter.format("slider.decrement"),
|
|
97
|
+
className: styles.decrement,
|
|
98
|
+
children: /* @__PURE__ */ jsx(IconMinus, {})
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ jsx(
|
|
102
|
+
Button,
|
|
103
|
+
{
|
|
104
|
+
onPress: () => state.incrementThumb(0, step),
|
|
105
|
+
"aria-label": stringFormatter.format("slider.increment"),
|
|
106
|
+
className: styles.increment,
|
|
107
|
+
children: /* @__PURE__ */ jsx(IconPlus, {})
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
] }),
|
|
104
111
|
/* @__PURE__ */ jsx(
|
|
105
112
|
"div",
|
|
106
113
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.mjs","sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n showInitialMarker?: boolean;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n isInvalid?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n unstyled: true,\n tunnelId: \"label\",\n ...fieldPropsContext.Label,\n },\n };\n\n return (\n <div {...fieldProps}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n >\n <TunnelProvider>\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n <div className={styles.text}>\n
|
|
1
|
+
{"version":3,"file":"Slider.mjs","sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SliderProps\n extends\n FlowComponentProps<HTMLInputElement>,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"name\"> {\n /** Whether the marker for the initial value should be visible */\n showInitialMarker?: boolean;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n /** Whether the component is invalid. */\n isInvalid?: boolean;\n /** Hide Buttons, Label and Value */\n sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n step,\n sliderOnly,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const objectRef = useObjectRef(ref);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n unstyled: true,\n tunnelId: \"label\",\n ...fieldPropsContext.Label,\n className: styles.label,\n },\n };\n\n return (\n <div {...fieldProps}>\n <Aria.Slider\n {...rest}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n step={step}\n >\n <TunnelProvider>\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n {!sliderOnly && (\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />{\" \"}\n <TunnelExit id=\"label\" />\n </div>\n )}\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n },\n }}\n >\n {!sliderOnly && (\n <>\n <Button\n onPress={() => state.decrementThumb(0, step)}\n aria-label={stringFormatter.format(\"slider.decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n <Button\n onPress={() => state.incrementThumb(0, step)}\n aria-label={stringFormatter.format(\"slider.increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n </>\n )}\n\n <div\n className={styles.fill}\n style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n }}\n />\n )}\n <Aria.SliderThumb\n inputRef={objectRef}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n <FieldErrorView />\n </PropsContextProvider>\n </TunnelProvider>\n </Aria.Slider>\n </div>\n );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
const slider = "flow--slider";
|
|
4
4
|
const text = "flow--slider--text";
|
|
5
5
|
const value = "flow--slider--value";
|
|
6
|
+
const label = "flow--slider--label";
|
|
6
7
|
const track = "flow--slider--track";
|
|
7
8
|
const fill = "flow--slider--fill";
|
|
8
9
|
const initialMarker = "flow--slider--initial-marker";
|
|
@@ -14,6 +15,7 @@ const styles = {
|
|
|
14
15
|
slider: slider,
|
|
15
16
|
text: text,
|
|
16
17
|
value: value,
|
|
18
|
+
label: label,
|
|
17
19
|
track: track,
|
|
18
20
|
fill: fill,
|
|
19
21
|
initialMarker: initialMarker,
|
|
@@ -23,5 +25,5 @@ const styles = {
|
|
|
23
25
|
disabled: disabled
|
|
24
26
|
};
|
|
25
27
|
|
|
26
|
-
export { decrement, styles as default, disabled, fill, handle, increment, initialMarker, slider, text, track, value };
|
|
28
|
+
export { decrement, styles as default, disabled, fill, handle, increment, initialMarker, label, slider, text, track, value };
|
|
27
29
|
//# sourceMappingURL=Slider.module.scss.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs
CHANGED
|
@@ -19,6 +19,25 @@ function Field(props) {
|
|
|
19
19
|
...props,
|
|
20
20
|
rules: {
|
|
21
21
|
...props.rules,
|
|
22
|
+
min: typeof rest.rules?.min === "number" ? {
|
|
23
|
+
value: rest.rules.min,
|
|
24
|
+
message: stringFormatter.format("min", {
|
|
25
|
+
number: rest.rules.min
|
|
26
|
+
})
|
|
27
|
+
} : rest.rules?.min,
|
|
28
|
+
max: typeof rest.rules?.max === "number" ? {
|
|
29
|
+
value: rest.rules.max,
|
|
30
|
+
message: stringFormatter.format("max", {
|
|
31
|
+
number: rest.rules.max
|
|
32
|
+
})
|
|
33
|
+
} : rest.rules?.max,
|
|
34
|
+
required: typeof rest.rules?.required === "boolean" ? stringFormatter.format("required") : rest.rules?.required,
|
|
35
|
+
pattern: rest.rules?.pattern instanceof RegExp ? {
|
|
36
|
+
value: rest.rules.pattern,
|
|
37
|
+
message: stringFormatter.format("pattern", {
|
|
38
|
+
pattern: rest.rules.pattern.source
|
|
39
|
+
})
|
|
40
|
+
} : rest.rules?.pattern,
|
|
22
41
|
minLength: typeof rest.rules?.minLength === "number" ? {
|
|
23
42
|
value: rest.rules.minLength,
|
|
24
43
|
message: stringFormatter.format("minLength", {
|
package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.mjs","sources":["../../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { type PropsWithChildren } from \"react\";\nimport {\n type ControllerProps,\n type FieldValues,\n useController,\n type UseFormReturn,\n useWatch,\n} from \"react-hook-form\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useUpdateFormDefaultValue } from \"@/integrations/react-hook-form/components/Field/hooks/useUpdateFormDefaultValue\";\n\nexport interface FieldProps<T extends FieldValues>\n extends Omit<ControllerProps<T>, \"render\">, PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n const { children, name, defaultValue, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const controller = useController({\n ...props,\n rules: {\n ...props.rules,\n minLength:\n typeof rest.rules?.minLength === \"number\"\n ? {\n value: rest.rules.minLength,\n message: stringFormatter.format(\"minLength\", {\n number: rest.rules.minLength,\n }),\n }\n : rest.rules?.minLength,\n maxLength:\n typeof rest.rules?.maxLength === \"number\"\n ? {\n value: rest.rules.maxLength,\n message: stringFormatter.format(\"maxLength\", {\n number: rest.rules.maxLength,\n }),\n }\n : rest.rules?.maxLength,\n },\n });\n const formContext = useFormContext<T>();\n\n useUpdateFormDefaultValue(props, formContext.form);\n\n /**\n * We don't use controller.field.value here, because it doesn't update when\n * the form value is updated outside of this field (e.g. when setting values\n * with form.setValue or resetting the form), and the Field unmounts in\n * between. This is generally a feature of React Hook Form, but this breaks\n * dynamic forms where fields are conditionally rendered.\n *\n * By using formContext.form.watch(name), we ensure that the field value is\n * always in sync with the form state. See:\n * https://react-hook-form.com/api/usecontroller/controller/\n */\n const value =\n useWatch({\n control: formContext.form.control,\n name,\n }) ?? controller.field.value;\n\n const isFieldInvalid = controller.fieldState.invalid;\n\n const fieldProps = {\n ...controller.field,\n value,\n name,\n form: formContext.id,\n isRequired: !!rest.rules?.required,\n isReadOnly: formContext.isReadOnly,\n validationBehavior: \"aria\" as const,\n defaultValue,\n isInvalid: isFieldInvalid,\n children: dynamic((p) => {\n return (\n <>\n {p.children}\n <FieldErrorView>\n {controller.fieldState.error?.message}\n </FieldErrorView>\n </>\n );\n }),\n };\n\n const propsContext: PropsContext = {\n Autocomplete: {\n SearchField: fieldProps,\n TextField: fieldProps,\n },\n SearchField: fieldProps,\n TextField: fieldProps,\n TextArea: fieldProps,\n MarkdownEditor: fieldProps,\n CodeEditor: fieldProps,\n Checkbox: {\n ...fieldProps,\n isSelected: value,\n },\n CheckboxGroup: {\n ...fieldProps,\n },\n CheckboxButton: {\n ...fieldProps,\n isSelected: value,\n },\n FileField: fieldProps,\n FileDropZone: fieldProps,\n NumberField: fieldProps,\n RadioGroup: fieldProps,\n Switch: {\n ...fieldProps,\n isSelected: value,\n },\n Slider: fieldProps,\n PasswordCreationField: fieldProps,\n DatePicker: fieldProps,\n DateRangePicker: fieldProps,\n TimeField: fieldProps,\n SegmentedControl: fieldProps,\n Select: {\n ...fieldProps,\n selectedKey: value,\n },\n ComboBox: {\n ...fieldProps,\n selectedKey: value,\n },\n Rating: fieldProps,\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[\n controller.fieldState,\n controller.field,\n value,\n formContext.isReadOnly,\n ]}\n >\n {children}\n </PropsContextProvider>\n );\n}\n\nexport const typedField = <T extends FieldValues>(\n ignoredForm: UseFormReturn<T> | UseFormReturn<T>[\"control\"],\n): typeof Field<T> => Field;\n\nexport default Field;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Field.mjs","sources":["../../../../../../../../../src/integrations/react-hook-form/components/Field/Field.tsx"],"sourcesContent":["import { useFormContext } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { type PropsWithChildren } from \"react\";\nimport {\n type ControllerProps,\n type FieldValues,\n useController,\n type UseFormReturn,\n useWatch,\n} from \"react-hook-form\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useUpdateFormDefaultValue } from \"@/integrations/react-hook-form/components/Field/hooks/useUpdateFormDefaultValue\";\n\nexport interface FieldProps<T extends FieldValues>\n extends Omit<ControllerProps<T>, \"render\">, PropsWithChildren {}\n\nexport function Field<T extends FieldValues>(props: FieldProps<T>) {\n const { children, name, defaultValue, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const controller = useController({\n ...props,\n rules: {\n ...props.rules,\n min:\n typeof rest.rules?.min === \"number\"\n ? {\n value: rest.rules.min,\n message: stringFormatter.format(\"min\", {\n number: rest.rules.min,\n }),\n }\n : rest.rules?.min,\n max:\n typeof rest.rules?.max === \"number\"\n ? {\n value: rest.rules.max,\n message: stringFormatter.format(\"max\", {\n number: rest.rules.max,\n }),\n }\n : rest.rules?.max,\n required:\n typeof rest.rules?.required === \"boolean\"\n ? stringFormatter.format(\"required\")\n : rest.rules?.required,\n pattern:\n rest.rules?.pattern instanceof RegExp\n ? {\n value: rest.rules.pattern,\n message: stringFormatter.format(\"pattern\", {\n pattern: rest.rules.pattern.source,\n }),\n }\n : rest.rules?.pattern,\n minLength:\n typeof rest.rules?.minLength === \"number\"\n ? {\n value: rest.rules.minLength,\n message: stringFormatter.format(\"minLength\", {\n number: rest.rules.minLength,\n }),\n }\n : rest.rules?.minLength,\n maxLength:\n typeof rest.rules?.maxLength === \"number\"\n ? {\n value: rest.rules.maxLength,\n message: stringFormatter.format(\"maxLength\", {\n number: rest.rules.maxLength,\n }),\n }\n : rest.rules?.maxLength,\n },\n });\n const formContext = useFormContext<T>();\n\n useUpdateFormDefaultValue(props, formContext.form);\n\n /**\n * We don't use controller.field.value here, because it doesn't update when\n * the form value is updated outside of this field (e.g. when setting values\n * with form.setValue or resetting the form), and the Field unmounts in\n * between. This is generally a feature of React Hook Form, but this breaks\n * dynamic forms where fields are conditionally rendered.\n *\n * By using formContext.form.watch(name), we ensure that the field value is\n * always in sync with the form state. See:\n * https://react-hook-form.com/api/usecontroller/controller/\n */\n const value =\n useWatch({\n control: formContext.form.control,\n name,\n }) ?? controller.field.value;\n\n const isFieldInvalid = controller.fieldState.invalid;\n\n const fieldProps = {\n ...controller.field,\n value,\n name,\n form: formContext.id,\n isRequired: !!rest.rules?.required,\n isReadOnly: formContext.isReadOnly,\n validationBehavior: \"aria\" as const,\n defaultValue,\n isInvalid: isFieldInvalid,\n children: dynamic((p) => {\n return (\n <>\n {p.children}\n <FieldErrorView>\n {controller.fieldState.error?.message}\n </FieldErrorView>\n </>\n );\n }),\n };\n\n const propsContext: PropsContext = {\n Autocomplete: {\n SearchField: fieldProps,\n TextField: fieldProps,\n },\n SearchField: fieldProps,\n TextField: fieldProps,\n TextArea: fieldProps,\n MarkdownEditor: fieldProps,\n CodeEditor: fieldProps,\n Checkbox: {\n ...fieldProps,\n isSelected: value,\n },\n CheckboxGroup: {\n ...fieldProps,\n },\n CheckboxButton: {\n ...fieldProps,\n isSelected: value,\n },\n FileField: fieldProps,\n FileDropZone: fieldProps,\n NumberField: fieldProps,\n RadioGroup: fieldProps,\n Switch: {\n ...fieldProps,\n isSelected: value,\n },\n Slider: fieldProps,\n PasswordCreationField: fieldProps,\n DatePicker: fieldProps,\n DateRangePicker: fieldProps,\n TimeField: fieldProps,\n SegmentedControl: fieldProps,\n Select: {\n ...fieldProps,\n selectedKey: value,\n },\n ComboBox: {\n ...fieldProps,\n selectedKey: value,\n },\n Rating: fieldProps,\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[\n controller.fieldState,\n controller.field,\n value,\n formContext.isReadOnly,\n ]}\n >\n {children}\n </PropsContextProvider>\n );\n}\n\nexport const typedField = <T extends FieldValues>(\n ignoredForm: UseFormReturn<T> | UseFormReturn<T>[\"control\"],\n): typeof Field<T> => Field;\n\nexport default Field;\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { useState, useEffectEvent, useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
const useImageSrc = (image) => {
|
|
6
|
+
const [imageSrc, setImageSrc] = useState("");
|
|
7
|
+
const onImageChange = useEffectEvent(() => {
|
|
8
|
+
if (image) {
|
|
9
|
+
if (typeof image === "string") {
|
|
10
|
+
setImageSrc(image);
|
|
11
|
+
} else {
|
|
12
|
+
const reader = new FileReader();
|
|
13
|
+
reader.onload = () => {
|
|
14
|
+
if (typeof reader.result === "string") {
|
|
15
|
+
setImageSrc(reader.result);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
reader.readAsDataURL(image);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
onImageChange();
|
|
24
|
+
}, [image]);
|
|
25
|
+
return imageSrc;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { useImageSrc };
|
|
29
|
+
//# sourceMappingURL=useImageSrc.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useImageSrc.mjs","sources":["../../../../../../../src/lib/hooks/useImageSrc.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useState } from \"react\";\n\nexport const useImageSrc = (image?: string | File) => {\n const [imageSrc, setImageSrc] = useState<string>(\"\");\n\n const onImageChange = useEffectEvent(() => {\n if (image) {\n if (typeof image === \"string\") {\n setImageSrc(image);\n } else {\n const reader = new FileReader();\n reader.onload = () => {\n if (typeof reader.result === \"string\") {\n setImageSrc(reader.result);\n }\n };\n reader.readAsDataURL(image);\n }\n }\n });\n\n useEffect(() => {\n onImageChange();\n }, [image]);\n\n return imageSrc;\n};\n"],"names":[],"mappings":";;AAEO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA0B;AACpD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,EAAE,CAAA;AAEnD,EAAA,MAAM,aAAA,GAAgB,eAAe,MAAM;AACzC,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,MACnB,CAAA,MAAO;AACL,QAAA,MAAM,MAAA,GAAS,IAAI,UAAA,EAAW;AAC9B,QAAA,MAAA,CAAO,SAAS,MAAM;AACpB,UAAA,IAAI,OAAO,MAAA,CAAO,MAAA,KAAW,QAAA,EAAU;AACrC,YAAA,WAAA,CAAY,OAAO,MAAM,CAAA;AAAA,UAC3B;AAAA,QACF,CAAA;AACA,QAAA,MAAA,CAAO,cAAc,KAAK,CAAA;AAAA,MAC5B;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,QAAA;AACT;;;;"}
|