@carbonorm/carbonreact 2.0.0 → 2.0.2

package/src/CarbonReact.tsx

@@ -8,12 +8,12 @@ import {ToastContainer} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 import BackendThrowable from 'components/Errors/BackendThrowable';
 import Nest from 'components/Nest/Nest';
-import {initialRestfulObjectArrayTypes, iRestfulObjectArrayTypes} from "variables/C6";
+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,22 +21,21 @@ export interface iCarbonORMState {
     backendThrowable: any[],
 }
 
-export const initialRequiredState: iCarbonORMState = {
+export const initialRequiredCarbonORMState: iCarbonReactState = {
     alertsWaiting: [],
     backendThrowable: [],
     websocketData: [],
     websocketEvents: [],
 }
 
-export const initialCarbonORMState: iCarbonORMState = {
-    ...initialRestfulObjectArrayTypes,
-    ...initialRequiredState,
-
+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;
 
@@ -50,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;
 
@@ -73,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);
@@ -83,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,18 +1,20 @@
-import CarbonReact, {iCarbonORMState, iRestfulObjectArrayTypes, tRestfulObjectValues} from "CarbonReact";
+import CarbonReact, {iCarbonReactState} from "CarbonReact";
+import {iRestfulObjectArrayTypes, tRestfulObjectValues} from "variables/C6";
 
 
 //ObjectType, UniqueIdType extends keyof ObjectType
-export default function deleteRestfulObjectArrays<ObjectType extends tRestfulObjectValues>
-(dataOrCallback: ((prev: Readonly<iCarbonORMState>) => ObjectType[]) | ObjectType[],
- stateKey: keyof iRestfulObjectArrayTypes,
+export default function deleteRestfulObjectArrays<ObjectType = tRestfulObjectValues, ObjectArrayTypes = iRestfulObjectArrayTypes>
+(dataOrCallback: ((prev: Readonly<iCarbonReactState>) => ObjectType[]) | ObjectType[],
+ stateKey: keyof ObjectArrayTypes,
  uniqueObjectId: keyof ObjectType,
  callback?: () => void): void {
 
-    return CarbonReact.instance.setState((previousBootstrapState): {} => {
+    return CarbonReact.instance.setState((previousBootstrapState ): {} => {
 
         let newOrReplacementData: ObjectType[] = dataOrCallback instanceof Function ? dataOrCallback(previousBootstrapState) : dataOrCallback;
 
-        const previousStateProperty = previousBootstrapState[stateKey] as ObjectType[];
+        // @ts-ignore
+        const previousStateProperty = previousBootstrapState[stateKey];
 
         return {
             [stateKey]: null === previousBootstrapState ? null : [

package/src/hoc/updateRestfulObjectArrays.tsx

@@ -1,8 +1,7 @@
 import CarbonReact, {
-    iCarbonORMState,
-    iRestfulObjectArrayTypes,
-    tRestfulObjectValues
+    iCarbonReactState
 } from "CarbonReact";
+import {iRestfulObjectArrayTypes, tRestfulObjectValues} from "variables/C6";
 
 
 export enum eUpdateInsertMethod {
@@ -21,9 +20,9 @@ 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 extends tRestfulObjectValues>
-(dataOrCallback: ((prev: Readonly<iCarbonORMState>) => ObjectType[]) | ObjectType[],
- stateKey: keyof iRestfulObjectArrayTypes,
+export default function updateRestfulObjectArray<ObjectType = tRestfulObjectValues, ObjectArrayTypes = iRestfulObjectArrayTypes>
+(dataOrCallback: ((prev: Readonly<iCarbonReactState>) => ObjectType[]) | ObjectType[],
+ stateKey: keyof ObjectArrayTypes,
  uniqueObjectId: keyof ObjectType,
  insertUpdateOrder: eUpdateInsertMethod = eUpdateInsertMethod.LAST,
  callback?: () => void): void {
@@ -34,7 +33,8 @@ export default function updateRestfulObjectArray<ObjectType extends tRestfulObje
 
         let newOrReplacementData: ObjectType[] = dataOrCallback instanceof Function ? dataOrCallback(previousBootstrapState) : dataOrCallback;
 
-        const previousStateProperty = previousBootstrapState[stateKey] as ObjectType[];
+        // @ts-ignore
+        const previousStateProperty = previousBootstrapState[stateKey];
 
         let updatedData = newOrReplacementData.map(value => {
             return {

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()
     }
 }

package/src/index.ts

@@ -12,8 +12,6 @@ export { default as BackendThrowable } from "./components/Errors/BackendThrowabl
 export * from "./components/Errors/BackendThrowable";
 export { default as ErrorHttpCode } from "./components/Errors/ErrorHttpCode";
 export * from "./components/Errors/ErrorHttpCode";
-export { default as Localhost } from "./components/Errors/Localhost";
-export * from "./components/Errors/Localhost";
 export { default as PageNotFound } from "./components/Errors/PageNotFound";
 export * from "./components/Errors/PageNotFound";
 export { default as Loading } from "./components/Loading/Loading";

package/src/variables/C6.tsx

@@ -1802,7 +1802,7 @@ export interface iRestfulObjectArrayTypes {
     users: tStatefulApiData<iUsers>,
 }
 
-export const initialRestfulObjectArrayTypes: iRestfulObjectArrayTypes = {
+export const initialRestfulObjectsState: iRestfulObjectArrayTypes = {
 
     carbons: undefined,
     comments: undefined,
@@ -1832,3 +1832,5 @@ export type tRestfulObjectArrayValues = iRestfulObjectArrayTypes[tRestfulObjectA
 export type tRestfulObjectValues = tRestfulObjectArrayValues[number];
 
 
+
+

package/dist/components/Errors/Localhost.d.ts

@@ -1 +0,0 @@
-export default function Localhost(): import("react/jsx-runtime").JSX.Element;