@carbonorm/carbonreact 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonorm/carbonreact",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -13,6 +13,7 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.3.1",
     "classnames": "^2.3.2",
+    "heic2any": "^0.0.4",
     "qs": "^6.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/CarbonReact.tsx

@@ -13,7 +13,7 @@ import {initialRestfulObjectsState, iRestfulObjectArrayTypes} from "variables/C6
 
 
 // our central container, single page application is best with the DigApi
-export interface iCarbonORMState {
+export interface iCarbonReactState {
     alertsWaiting: any[],
     websocketEvents: MessageEvent[],
     websocketData: any[],
@@ -21,21 +21,21 @@ export interface iCarbonORMState {
     backendThrowable: any[],
 }
 
-export const initialRequiredCarbonORMState: iCarbonORMState = {
+export const initialRequiredCarbonORMState: iCarbonReactState = {
     alertsWaiting: [],
     backendThrowable: [],
     websocketData: [],
     websocketEvents: [],
 }
 
-export const initialCarbonORMState: iCarbonORMState = {
+export const initialCarbonReactState: iCarbonReactState = {
     ...initialRequiredCarbonORMState,
     ...initialRestfulObjectsState,
 }
 
 export default class CarbonReact<P = {}, S = {}> extends React.Component<{
     children?: ReactNode | ReactNode[],
-} & P, ( iRestfulObjectArrayTypes |& S ) & iCarbonORMState> {
+} & P, ( iRestfulObjectArrayTypes |& S ) & iCarbonReactState> {
 
     static instance: CarbonReact;
 
@@ -49,7 +49,7 @@ export default class CarbonReact<P = {}, S = {}> extends React.Component<{
 
         super(props);
 
-        this.state = initialCarbonORMState as unknown as iCarbonORMState & S;
+        this.state = initialCarbonReactState as unknown as iCarbonReactState & S;
 
         CarbonReact.instance = this;
 
@@ -72,7 +72,7 @@ export default class CarbonReact<P = {}, S = {}> extends React.Component<{
 
     shouldComponentUpdate(
         nextProps: Readonly<any>,
-        nextState: Readonly<iCarbonORMState>,
+        nextState: Readonly<iCarbonReactState>,
         _nextContext: any): boolean {
 
         changed(this.constructor.name + ' (DigApi)', 'props', this.props, nextProps);
@@ -82,7 +82,7 @@ export default class CarbonReact<P = {}, S = {}> extends React.Component<{
 
     }
 
-    componentDidUpdate(_prevProps: Readonly<any>, _prevState: Readonly<iCarbonORMState>, _snapshot?: any) {
+    componentDidUpdate(_prevProps: Readonly<any>, _prevState: Readonly<iCarbonReactState>, _snapshot?: any) {
         if (CarbonReact.lastLocation !== location.pathname) {
             CarbonReact.lastLocation = location.pathname;
             const websocket = this.state.websocket;

package/src/hoc/deleteRestfulObjectArrays.tsx

@@ -1,10 +1,10 @@
-import CarbonReact, {iCarbonORMState} from "CarbonReact";
+import CarbonReact, {iCarbonReactState} from "CarbonReact";
 import {iRestfulObjectArrayTypes, tRestfulObjectValues} from "variables/C6";
 
 
 //ObjectType, UniqueIdType extends keyof ObjectType
 export default function deleteRestfulObjectArrays<ObjectType = tRestfulObjectValues, ObjectArrayTypes = iRestfulObjectArrayTypes>
-(dataOrCallback: ((prev: Readonly<iCarbonORMState>) => ObjectType[]) | ObjectType[],
+(dataOrCallback: ((prev: Readonly<iCarbonReactState>) => ObjectType[]) | ObjectType[],
  stateKey: keyof ObjectArrayTypes,
  uniqueObjectId: keyof ObjectType,
  callback?: () => void): void {

package/src/hoc/updateRestfulObjectArrays.tsx

@@ -1,5 +1,5 @@
 import CarbonReact, {
-    iCarbonORMState
+    iCarbonReactState
 } from "CarbonReact";
 import {iRestfulObjectArrayTypes, tRestfulObjectValues} from "variables/C6";
 
@@ -20,8 +20,8 @@ export enum eUpdateInsertMethod {
  * @param callback - if you want to do something with the updated state, you can pass a callback here. Run as the second
  *  parameter of setState.
  */
-export default function updateRestfulObjectArray<ObjectType = tRestfulObjectValues, ObjectArrayTypes = iRestfulObjectArrayTypes>
-(dataOrCallback: ((prev: Readonly<iCarbonORMState>) => ObjectType[]) | ObjectType[],
+export default function updateRestfulObjectArrays<ObjectType = tRestfulObjectValues, ObjectArrayTypes = iRestfulObjectArrayTypes>
+(dataOrCallback: ((prev: Readonly<iCarbonReactState>) => ObjectType[]) | ObjectType[],
  stateKey: keyof ObjectArrayTypes,
  uniqueObjectId: keyof ObjectType,
  insertUpdateOrder: eUpdateInsertMethod = eUpdateInsertMethod.LAST,

package/src/hoc/uploadImage.tsx

@@ -1,6 +1,6 @@
 // @link https://stackoverflow.com/questions/6735414/php-data-uri-to-file
 // @link https://www.tutorialspoint.com/convert-image-to-data-uri-with-javascript
-import {ChangeEvent} from "react";
+import {ChangeEvent, lazy} from "react";
 import {toast} from "react-toastify";
 
 
@@ -40,40 +40,69 @@ export async function toDataURL(src: string, fileType: string, callback: (dataUr
 
 }
 
-export function uploadImageChange(event: ChangeEvent<HTMLInputElement>,
-uploadCallback: ((imageDataUri: string) => void)) {
+export async function uploadImageChange(event: ChangeEvent<HTMLInputElement>,
+                                        uploadCallback: (dataUriBase64: string) => void) {
 
-    if (event.target.files !== null && event.target.files[0]) {
+    if (event.target.files === null || undefined === event.target?.files?.[0]) {
 
-        Object.keys(event.target.files).forEach((index) => {
+        toast.error('Please upload a valid image file type (jpg, jpeg, png, gif, heic).');
 
-            const file = event.target.files?.[index];
+        return;
+
+    }
+
+    Object.keys(event.target.files).forEach((index) => {
+
+        (async () => {
+            let file = event.target.files?.[index];
 
             // loop through all files and create data url then post to postPost
-            if (file.type.match('image.*')) {
+            if (false === file.type.match('image.*')) {
 
-                // get file extension
-                const fileExtension = file.name.split('.').pop();
+                toast.error('Please upload a valid image file type (jpg, jpeg, png, gif, heic). (E_IMAGE_*<>' + file.type + ')');
 
-                // check file extension is valid data uri
-                if (fileExtension !== 'jpg' && fileExtension !== 'jpeg' && fileExtension !== 'png' && fileExtension !== 'gif') {
+                return;
 
-                    toast.error('Please upload a valid image file type (jpg, jpeg, png, gif).');
+            }
 
-                    return;
+            // get file extension
+            const fileExtension = file.name.split('.').pop();
 
-                }
+            // check file extension is valid data uri
+            if (fileExtension !== 'jpg'
+                && fileExtension !== 'jpeg'
+                && fileExtension !== 'heic'
+                && fileExtension !== 'png'
+                && fileExtension !== 'gif') {
 
+                toast.error('Please upload a valid image file type (jpg, jpeg, png, gif, heic). (E_IMAGE_EXT)');
 
-                // @link https://github.com/palantir/tslint/issues/4653
-                // @link https://github.com/Microsoft/TypeScript/issues/13376#issuecomment-273289748
-                void toDataURL(URL.createObjectURL(file), file.type, uploadCallback);
+                return;
 
             }
 
-        });
+            const isHeic = fileExtension === 'heic';
+
+            if (isHeic) {
+
+                // todo - this should be code split and lazy loaded, but doesn't work
+                // look up code splitting, it could be an issue with rewired
+                file = (await lazy(() => require("heic2any")))({
+                    blob: file,
+                    toType: "image/webp",
+                    quality: 1.0, // 0.5 cuts the quality and size by half
+                });
+
+            }
+
+            // @link https://github.com/palantir/tslint/issues/4653
+            // @link https://github.com/Microsoft/TypeScript/issues/13376#issuecomment-273289748
+            void toDataURL(URL.createObjectURL(file), 'image/webp', uploadCallback);
+
+        })();
+
+    });
 
-    }
 
 }
 
@@ -81,12 +110,28 @@ uploadCallback: ((imageDataUri: string) => void)) {
 // dataUriEncoded is the base64 encoded string which is posted in column post_content
 export default function uploadImage(uploadCallback: (dataUriBase64: string) => void) {
     return () => {
+
         const input: HTMLInputElement = document.createElement('input')
+
         input.type = 'file'
-        input.accept = 'image/*'
-        input.onchange = (e: Event): any => {
-            uploadImageChange(e as unknown as ChangeEvent<HTMLInputElement>, uploadCallback)
-        }
+
+        input.accept = 'image/*, .heic'
+
+        input.style.display = 'none'
+
+        // the element must be appended to the document to work on safari
+        // @link https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only
+        document.body.appendChild(input);
+
+        // safari also requires addEventListener rather than .onChange
+        input.addEventListener('change', (e) => {
+
+            console.log('upload image event', e)
+
+            void uploadImageChange(e as unknown as ChangeEvent<HTMLInputElement>, uploadCallback)
+
+        })
+
         input.click()
     }
 }