@oneblink/apps-react 5.1.0-beta.1 → 5.1.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.
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import SignatureCanvas from 'react-signature-canvas';
3
+ import useResizeObserver from 'use-resize-observer';
3
4
  import scrollingService from '../services/scrolling-service';
4
5
  import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
5
6
  import OnLoading from '../components/renderer/OnLoading';
@@ -26,7 +27,10 @@ export default React.memo(FormElementSignature);
26
27
  const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChange, }) {
27
28
  const canvasRef = React.useRef(null);
28
29
  const [isEmpty, setIsEmpty] = React.useState(true);
29
- const [canvasDimensions, setCanvasDimensions] = React.useState({});
30
+ const [canvasDimensions, setCanvasDimensions] = React.useState({
31
+ width: undefined,
32
+ height: undefined,
33
+ });
30
34
  const handleClear = React.useCallback(() => {
31
35
  if (canvasRef.current) {
32
36
  console.log('Clearing signature...');
@@ -53,28 +57,9 @@ const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChang
53
57
  setIsEmpty(false);
54
58
  }
55
59
  }, [isEmpty]);
56
- // HANDLE RESIZE
57
- React.useEffect(() => {
58
- const signatureCanvas = canvasRef.current;
59
- if (!signatureCanvas)
60
- return;
61
- const resize = () => {
62
- const parentDiv = signatureCanvas.getCanvas().parentNode;
63
- if (parentDiv) {
64
- setCanvasDimensions({
65
- // @ts-expect-error ???
66
- width: parentDiv.clientWidth,
67
- // @ts-expect-error ???
68
- height: parentDiv.clientHeight,
69
- });
70
- }
71
- };
72
- window.addEventListener('resize', resize);
73
- resize();
74
- return () => {
75
- window.removeEventListener('resize', resize);
76
- };
77
- }, [canvasRef]);
60
+ const { ref } = useResizeObserver({
61
+ onResize: setCanvasDimensions,
62
+ });
78
63
  // REACTIVE DISABLING OF CANVAS
79
64
  React.useEffect(() => {
80
65
  if (!canvasRef.current)
@@ -87,7 +72,7 @@ const SignatureDrawing = React.memo(function SignatureDrawing({ element, onChang
87
72
  }
88
73
  }, [canvasRef, element.readOnly]);
89
74
  return (React.createElement(React.Fragment, null,
90
- React.createElement("div", null,
75
+ React.createElement("div", { ref: ref },
91
76
  React.createElement(SignatureCanvas, { ref: canvasRef, canvasProps: {
92
77
  ...canvasDimensions,
93
78
  className: 'input ob-signature__control cypress-signature-control signature-pad',
@@ -1 +1 @@
1
- {"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\n\ntype Props = {\n id: string\n element: FormTypes.DrawElement\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n setIsDirty,\n isDirty,\n}: Props) {\n const isPageVisible = useIsPageVisible()\n\n const handleChange = React.useCallback<\n FormElementValueChangeHandler<FormElementBinaryStorageValue>\n >(\n (formElement, newValue) => {\n setIsDirty()\n onChange(formElement, newValue)\n },\n [onChange, setIsDirty],\n )\n\n return (\n <div className=\"cypress-signature-element\">\n <FormElementLabelContainer\n className=\"ob-signature\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n {value ? (\n <SignatureDisplay\n element={element}\n value={value}\n onChange={handleChange}\n />\n ) : isPageVisible ? (\n <SignatureDrawing element={element} onChange={handleChange} />\n ) : null}\n </div>\n\n {(isDirty || displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n element,\n onChange,\n}: {\n element: Props['element']\n onChange: Props['onChange']\n}) {\n const canvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isEmpty, setIsEmpty] = React.useState(true)\n const [canvasDimensions, setCanvasDimensions] = React.useState({})\n\n const handleClear = React.useCallback(() => {\n if (canvasRef.current) {\n console.log('Clearing signature...')\n canvasRef.current.clear()\n }\n setIsEmpty(true)\n }, [])\n\n const handleDone = React.useCallback(async () => {\n if (!canvasRef.current) return\n const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n // Convert base64 data uri to blob and send it on its way\n const blob = await canvasToBlob(trimmedCanvas)\n onChange(element, {\n value: prepareNewAttachment(blob, 'signature.png', element),\n })\n }, [element, onChange])\n\n // HANDLING CANVAS CHANGE\n const handleEndDraw = React.useCallback(() => {\n if (window.cordova) {\n scrollingService.enableScrolling()\n }\n if (isEmpty) {\n setIsEmpty(false)\n }\n }, [isEmpty])\n\n // HANDLE RESIZE\n React.useEffect(() => {\n const signatureCanvas = canvasRef.current\n if (!signatureCanvas) return\n const resize = () => {\n const parentDiv = signatureCanvas.getCanvas().parentNode\n if (parentDiv) {\n setCanvasDimensions({\n // @ts-expect-error ???\n width: parentDiv.clientWidth,\n // @ts-expect-error ???\n height: parentDiv.clientHeight,\n })\n }\n }\n window.addEventListener('resize', resize)\n resize()\n\n return () => {\n window.removeEventListener('resize', resize)\n }\n }, [canvasRef])\n\n // REACTIVE DISABLING OF CANVAS\n React.useEffect(() => {\n if (!canvasRef.current) return\n if (element.readOnly) {\n canvasRef.current.off()\n } else {\n canvasRef.current.on()\n }\n }, [canvasRef, element.readOnly])\n\n return (\n <>\n <div>\n <SignatureCanvas\n ref={canvasRef}\n canvasProps={{\n ...canvasDimensions,\n className:\n 'input ob-signature__control cypress-signature-control signature-pad',\n // @ts-expect-error ???\n disabled: element.readOnly,\n }}\n onEnd={handleEndDraw}\n onBegin={\n window.cordova ? scrollingService.disableScrolling : undefined\n }\n />\n </div>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={handleClear}\n disabled={element.readOnly || isEmpty}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n onClick={handleDone}\n disabled={element.readOnly || isEmpty}\n >\n Save Signature\n </button>\n </div>\n </>\n )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n element,\n value,\n onChange,\n}: {\n element: Props['element']\n value: Props['value']\n onChange: Props['onChange']\n}) {\n const result = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, {\n value: attachment,\n })\n },\n [element, onChange],\n ),\n )\n\n const handleRetry = React.useMemo(() => {\n if (!value || typeof value !== 'object') return\n\n if (value.type === 'ERROR' && value.data) {\n return () => {\n onChange(element, {\n value: {\n type: 'NEW',\n _id: value._id,\n data: value.data,\n fileName: value.fileName,\n isPrivate: value.isPrivate,\n },\n })\n }\n }\n }, [element, onChange, value])\n\n return (\n <>\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <DisplayImage {...result} />\n </div>\n </figure>\n\n <div className=\"buttons ob-buttons\">\n {result.uploadErrorMessage && handleRetry && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n onClick={handleRetry}\n >\n Retry\n </button>\n )}\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={() =>\n onChange(element, {\n value: undefined,\n })\n }\n disabled={element.readOnly}\n >\n Clear\n </button>\n </div>\n </>\n )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n uploadErrorMessage,\n isUploading,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n progress,\n}: ReturnType<typeof useAttachment>) {\n if (uploadErrorMessage) {\n return (\n <>\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your signature failed to upload, please use the <b>Retry</b> or{' '}\n <b>Clear</b> buttons below.\n </p>\n </>\n )\n }\n\n if (loadImageUrlError) {\n return (\n <>\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadImageUrlError.message}</p>\n </>\n )\n }\n\n if (isLoadingImageUrl) {\n return <OnLoading small className=\"cypress-signature-loading-image\" />\n }\n\n if (imageUrl) {\n return (\n <>\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingImageUrl={isLoadingImageUrl}\n loadImageUrlError={loadImageUrlError}\n isUploading={isUploading}\n imageUrl={imageUrl}\n progress={progress}\n />\n </span>\n <img\n src={imageUrl}\n className=\"cypress-signature-image ob-signature__img\"\n />\n <ProgressBar progress={progress} isShowing={isUploading} />\n </>\n )\n }\n\n return <ImagePreviewUnavailable />\n})\n"]}
1
+ {"version":3,"file":"FormElementSignature.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSignature.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport SignatureCanvas from 'react-signature-canvas'\nimport useResizeObserver, { ObservedSize } from 'use-resize-observer'\nimport { FormTypes } from '@oneblink/types'\n\nimport scrollingService from '../services/scrolling-service'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport { prepareNewAttachment } from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport { IsDirtyProps } from '../types/form'\n\ntype Props = {\n id: string\n element: FormTypes.DrawElement\n value: FormElementBinaryStorageValue\n onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementSignature({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n setIsDirty,\n isDirty,\n}: Props) {\n const isPageVisible = useIsPageVisible()\n\n const handleChange = React.useCallback<\n FormElementValueChangeHandler<FormElementBinaryStorageValue>\n >(\n (formElement, newValue) => {\n setIsDirty()\n onChange(formElement, newValue)\n },\n [onChange, setIsDirty],\n )\n\n return (\n <div className=\"cypress-signature-element\">\n <FormElementLabelContainer\n className=\"ob-signature\"\n id={id}\n element={element}\n required={element.required}\n >\n <div className=\"control\">\n {value ? (\n <SignatureDisplay\n element={element}\n value={value}\n onChange={handleChange}\n />\n ) : isPageVisible ? (\n <SignatureDrawing element={element} onChange={handleChange} />\n ) : null}\n </div>\n\n {(isDirty || displayValidationMessage) && !!validationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementSignature)\n\nconst SignatureDrawing = React.memo(function SignatureDrawing({\n element,\n onChange,\n}: {\n element: Props['element']\n onChange: Props['onChange']\n}) {\n const canvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isEmpty, setIsEmpty] = React.useState(true)\n const [canvasDimensions, setCanvasDimensions] = React.useState<ObservedSize>({\n width: undefined,\n height: undefined,\n })\n\n const handleClear = React.useCallback(() => {\n if (canvasRef.current) {\n console.log('Clearing signature...')\n canvasRef.current.clear()\n }\n setIsEmpty(true)\n }, [])\n\n const handleDone = React.useCallback(async () => {\n if (!canvasRef.current) return\n const trimmedCanvas = canvasRef.current.getTrimmedCanvas()\n\n // Convert base64 data uri to blob and send it on its way\n const blob = await canvasToBlob(trimmedCanvas)\n onChange(element, {\n value: prepareNewAttachment(blob, 'signature.png', element),\n })\n }, [element, onChange])\n\n // HANDLING CANVAS CHANGE\n const handleEndDraw = React.useCallback(() => {\n if (window.cordova) {\n scrollingService.enableScrolling()\n }\n if (isEmpty) {\n setIsEmpty(false)\n }\n }, [isEmpty])\n\n const { ref } = useResizeObserver<HTMLDivElement>({\n onResize: setCanvasDimensions,\n })\n\n // REACTIVE DISABLING OF CANVAS\n React.useEffect(() => {\n if (!canvasRef.current) return\n if (element.readOnly) {\n canvasRef.current.off()\n } else {\n canvasRef.current.on()\n }\n }, [canvasRef, element.readOnly])\n\n return (\n <>\n <div ref={ref}>\n <SignatureCanvas\n ref={canvasRef}\n canvasProps={{\n ...canvasDimensions,\n className:\n 'input ob-signature__control cypress-signature-control signature-pad',\n // @ts-expect-error ???\n disabled: element.readOnly,\n }}\n onEnd={handleEndDraw}\n onBegin={\n window.cordova ? scrollingService.disableScrolling : undefined\n }\n />\n </div>\n\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={handleClear}\n disabled={element.readOnly || isEmpty}\n >\n Clear\n </button>\n <button\n type=\"button\"\n className=\"button ob-button ob-button__done is-primary cypress-done-signature-button\"\n onClick={handleDone}\n disabled={element.readOnly || isEmpty}\n >\n Save Signature\n </button>\n </div>\n </>\n )\n})\n\nconst SignatureDisplay = React.memo(function SignatureDisplay({\n element,\n value,\n onChange,\n}: {\n element: Props['element']\n value: Props['value']\n onChange: Props['onChange']\n}) {\n const result = useAttachment(\n value,\n element,\n React.useCallback(\n (id, attachment) => {\n onChange(element, {\n value: attachment,\n })\n },\n [element, onChange],\n ),\n )\n\n const handleRetry = React.useMemo(() => {\n if (!value || typeof value !== 'object') return\n\n if (value.type === 'ERROR' && value.data) {\n return () => {\n onChange(element, {\n value: {\n type: 'NEW',\n _id: value._id,\n data: value.data,\n fileName: value.fileName,\n isPrivate: value.isPrivate,\n },\n })\n }\n }\n }, [element, onChange, value])\n\n return (\n <>\n <figure className=\"ob-figure\">\n <div className=\"figure-content\">\n <DisplayImage {...result} />\n </div>\n </figure>\n\n <div className=\"buttons ob-buttons\">\n {result.uploadErrorMessage && handleRetry && (\n <button\n type=\"button\"\n className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n onClick={handleRetry}\n >\n Retry\n </button>\n )}\n <button\n type=\"button\"\n className=\"button ob-button is-light ob-button__clear cypress-clear-signature\"\n onClick={() =>\n onChange(element, {\n value: undefined,\n })\n }\n disabled={element.readOnly}\n >\n Clear\n </button>\n </div>\n </>\n )\n})\n\nconst DisplayImage = React.memo(function DisplayImage({\n uploadErrorMessage,\n isUploading,\n isLoadingImageUrl,\n imageUrl,\n loadImageUrlError,\n progress,\n}: ReturnType<typeof useAttachment>) {\n if (uploadErrorMessage) {\n return (\n <>\n <h3 className=\"title is-3\">Upload Failed</h3>\n <p>\n Your signature failed to upload, please use the <b>Retry</b> or{' '}\n <b>Clear</b> buttons below.\n </p>\n </>\n )\n }\n\n if (loadImageUrlError) {\n return (\n <>\n <h3 className=\"title is-3\">Preview Failed</h3>\n <p>{loadImageUrlError.message}</p>\n </>\n )\n }\n\n if (isLoadingImageUrl) {\n return <OnLoading small className=\"cypress-signature-loading-image\" />\n }\n\n if (imageUrl) {\n return (\n <>\n <span className=\"ob-figure__status\">\n <AttachmentStatus\n isLoadingImageUrl={isLoadingImageUrl}\n loadImageUrlError={loadImageUrlError}\n isUploading={isUploading}\n imageUrl={imageUrl}\n progress={progress}\n />\n </span>\n <img\n src={imageUrl}\n className=\"cypress-signature-image ob-signature__img\"\n />\n <ProgressBar progress={progress} isShowing={isUploading} />\n </>\n )\n }\n\n return <ImagePreviewUnavailable />\n})\n"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oneblink/apps-react",
3
3
  "description": "Helper functions for OneBlink apps in ReactJS.",
4
- "version": "5.1.0-beta.1",
4
+ "version": "5.1.0",
5
5
  "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
6
6
  "bugs": {
7
7
  "url": "https://github.com/oneblink/apps-react/issues"
@@ -36,6 +36,7 @@
36
36
  "react-signature-canvas": "^1.0.6",
37
37
  "react-table": "^7.8.0",
38
38
  "sanitize-html": "^2.10.0",
39
+ "use-resize-observer": "^9.1.0",
39
40
  "uuid": "^9.0.0",
40
41
  "validate.js": "^0.13.1",
41
42
  "xml2js": "^0.4.23"