@carbonorm/carbonreact 5.0.4 → 6.0.0

package/src/{CarbonReact.tsx → core/CarbonReact.tsx}

@@ -1,15 +1,13 @@
-import changed from "hoc/changed";
-import {GlobalHistory} from "hoc/GlobalHistory";
-import hexToRgb from "hoc/hexToRgb";
+import changed from "utils/changed";
+import {GlobalHistory} from "routing/GlobalHistory";
 import {Component, Context, createContext, ReactElement, ReactNode} from 'react';
 import {ToastContainer} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import BackendThrowable from 'components/Errors/BackendThrowable';
-import Nest from 'components/Nest/Nest';
-import {initialRestfulObjectsState, iRestfulObjectArrayTypes} from "variables/C6";
-import CarbonWebSocket, {iCarbonWebSocketProps} from "./components/WebSocket/CarbonWebSocket";
-import updateRestfulObjectArrays, {iUpdateRestfulObjectArrays} from "./hoc/updateRestfulObjectArrays";
-import deleteRestfulObjectArrays, {iDeleteRestfulObjectArrays} from "./hoc/deleteRestfulObjectArrays";
+import {initialRestfulObjectsState, iRestfulObjectArrayTypes} from "schema/C6";
+import CarbonWebSocket, {iCarbonWebSocketProps} from "components/WebSocket/CarbonWebSocket";
+import updateRestfulObjectArrays, {iUpdateRestfulObjectArrays} from "state/updateRestfulObjectArrays";
+import deleteRestfulObjectArrays, {iDeleteRestfulObjectArrays} from "state/deleteRestfulObjectArrays";
 import {BrowserRouter, HashRouter, MemoryRouter} from "react-router-dom";
 
 export type tStatefulApiData<T extends { [key: string]: any } = {}> = T[] | undefined | null;
@@ -51,6 +49,8 @@ export enum eRouterType {
     MemoryRouter,
 }
 
+const canUseDom = () => typeof window !== "undefined" && typeof document !== "undefined";
+
 abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactState> extends Component<{
     children?: ReactNode | ReactNode[],
     instanceId?: string,
@@ -105,7 +105,7 @@ abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactSta
         ...rest
     });
 
-    static lastLocation = window.location.pathname;
+    static lastLocation = typeof window === "undefined" ? "" : window.location.pathname;
 
     static whyDidYouRender = true;
 
@@ -157,10 +157,10 @@ abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactSta
     }
 
     componentDidUpdate(_prevProps: Readonly<P>, _prevState: Readonly<S>, _snapshot?: any) {
-        if (CarbonReact.lastLocation !== location.pathname) {
+        if (typeof location !== "undefined" && CarbonReact.lastLocation !== location.pathname) {
             CarbonReact.lastLocation = location.pathname;
             const websocket = this.state.websocket;
-            if (websocket?.readyState === WebSocket.OPEN) {
+            if (typeof WebSocket !== "undefined" && websocket?.readyState === WebSocket.OPEN) {
                 websocket.send(location.pathname);
                 console.log(location.pathname);
             }
@@ -168,7 +168,8 @@ abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactSta
     }
 
     reactRouterContext(children: ReactElement) {
-        switch (this.props.routerType ?? eRouterType.BrowserRouter) {
+        const routerType = this.props.routerType ?? (canUseDom() ? eRouterType.BrowserRouter : eRouterType.MemoryRouter);
+        switch (routerType) {
             case eRouterType.BrowserRouter:
                 return <BrowserRouter>{children}</BrowserRouter>
             case eRouterType.MemoryRouter:
@@ -183,31 +184,24 @@ abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactSta
     render(): ReactElement {
         console.log('CarbonORM TSX RENDER');
 
-        const colorHex = '#' + Math.random().toString(16).slice(-6);
-
-        console.log('%c color (' + colorHex + ')', 'color: ' + colorHex);
-
-        const nest = <Nest position={'fixed'} backgroundColor={''} color={hexToRgb(colorHex)} count={100}/>;
+        const canUseDomNow = canUseDom();
 
         if (this.state.backendThrowable.length > 0) {
-            return <>
-                {nest}
-                <BackendThrowable instance={this}/>
-            </>;
+            return <BackendThrowable instance={this}/>;
         }
 
         this.context = createContext(this.state)
         const Context = this.context.Provider;
 
         return this.reactRouterContext(<>
-            <GlobalHistory/>
-            {this.props.websocket &&
+            {canUseDomNow && <GlobalHistory/>}
+            {canUseDomNow && this.props.websocket &&
                 <CarbonWebSocket<P, S> {...(false !== this.props.websocket ? this.props.websocket : {})}
                                        instance={this}/>}
             <Context value={this.state}>
                 {this.props.children}
             </Context>
-            <ToastContainer/>
+            {canUseDomNow && <ToastContainer/>}
         </>);
     }
 }

package/src/{hoc → dom}/isEdgeBrowser.tsx

@@ -3,5 +3,7 @@
 // Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) \
 // Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.26
 
-const isEdgeBrowser = window.navigator.userAgent.indexOf("Edg") > -1
-export default isEdgeBrowser
+const isEdgeBrowser = typeof window !== "undefined"
+    && typeof window.navigator !== "undefined"
+    && window.navigator.userAgent.indexOf("Edg") > -1
+export default isEdgeBrowser

package/src/{hoc → dom}/setCookies.tsx

@@ -11,7 +11,7 @@ export default function setCookies(cookies: string[], req: AxiosResponse | undef
             .replace("HttpOnly", "")
             .replace("secure", "");
 
-        if (document === undefined || document === null) {
+        if (typeof document === "undefined" || document === null) {
 
             const getStackTrace = function () {
                 let obj: any = {};

package/src/env/getEnv.ts

@@ -0,0 +1,29 @@
+function getProcessEnv(key: string): string | undefined {
+    // works in node + most polyfills
+    return typeof process !== "undefined" ? process.env?.[key] : undefined;
+}
+
+function getViteEnv(key: string): string | undefined {
+    // IMPORTANT:
+    // this file must be ESM-compatible in any environment where it's executed
+    // because import.meta may not even parse in CJS contexts
+    // @ts-ignore
+    return typeof import.meta !== "undefined" ? import.meta.env?.[key] : undefined;
+}
+
+export function getEnv<T = string>(key: string, fallback?: T): T {
+    // Prefer process.env in SSR/node (secrets, runtime config)
+    const proc = getProcessEnv(key);
+    if (proc !== undefined) return proc as T;
+
+    // Vite client / build-time vars
+    try {
+        const vite = getViteEnv(key);
+        if (vite !== undefined) return vite as T;
+    } catch {
+        // ignore
+    }
+
+    if (fallback !== undefined) return fallback;
+    throw new Error(`Missing required environment variable: ${key}`);
+}

package/src/env/isProduction.tsx

@@ -0,0 +1,6 @@
+import {getEnv} from "./getEnv";
+
+// @ts-ignore
+const isProduction = () => getEnv("NODE_ENV", "") === "production"
+
+export default isProduction

package/src/{hoc → hooks}/windowDimensions.tsx

@@ -1,6 +1,10 @@
 import { useState, useEffect } from 'react';
 
 function getWindowDimensions() {
+    if (typeof window === "undefined") {
+        return { width: 0, height: 0 };
+    }
+
     const { innerWidth: width, innerHeight: height } = window;
     return {
         width,
@@ -12,6 +16,10 @@ export default function useWindowDimensions() {
     const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
 
     useEffect(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+
         function handleResize() {
             setWindowDimensions(getWindowDimensions());
         }
@@ -21,4 +29,4 @@ export default function useWindowDimensions() {
     }, []);
 
     return windowDimensions;
-}
+}

package/src/index.ts

@@ -2,13 +2,8 @@
  * @file Automatically generated by barrelsby.
  */
 
-export { default as CarbonReact } from "./CarbonReact";
-export * from "./CarbonReact";
-export { default as getStatefulObjectWithWhere } from "./api/hoc/getStatefulObjectWithWhere";
-export * from "./api/hoc/getStatefulObjectWithWhere";
-export * from "./api/hoc/useEffectOnce";
-export { default as watchInputElementChangeEvent } from "./api/hoc/watchInputElementChangeEvent";
-export * from "./api/hoc/watchInputElementChangeEvent";
+export { default as getStatefulObjectWithWhere } from "./api/getStatefulObjectWithWhere";
+export * from "./api/getStatefulObjectWithWhere";
 export { default as Alert } from "./components/Alert/Alert";
 export * from "./components/Alert/Alert";
 export { default as AccessDenied } from "./components/Errors/AccessDenied";
@@ -21,46 +16,48 @@ export { default as PageNotFound } from "./components/Errors/PageNotFound";
 export * from "./components/Errors/PageNotFound";
 export { default as Loading } from "./components/Loading/Loading";
 export * from "./components/Loading/Loading";
-export { default as Nest } from "./components/Nest/Nest";
-export * from "./components/Nest/Nest";
 export { default as OutsideClickHandler } from "./components/OutsideClickHandler/OutsideClickHandler";
 export * from "./components/OutsideClickHandler/OutsideClickHandler";
 export { default as Popup } from "./components/Popup/Popup";
 export * from "./components/Popup/Popup";
 export { default as CarbonWebSocket } from "./components/WebSocket/CarbonWebSocket";
 export * from "./components/WebSocket/CarbonWebSocket";
-export * from "./hoc/GlobalHistory";
-export * from "./hoc/KeysMatching";
-export * from "./hoc/SubsetMatching";
-export { default as addValidSQL } from "./hoc/addValidSQL";
-export * from "./hoc/addValidSQL";
-export { default as changed } from "./hoc/changed";
-export * from "./hoc/changed";
-export { default as deleteRestfulObjectArrays } from "./hoc/deleteRestfulObjectArrays";
-export * from "./hoc/deleteRestfulObjectArrays";
-export { default as getStyles } from "./hoc/getStyles";
-export * from "./hoc/getStyles";
-export { default as hexToRgb } from "./hoc/hexToRgb";
-export * from "./hoc/hexToRgb";
-export { default as isEdgeBrowser } from "./hoc/isEdgeBrowser";
-export * from "./hoc/isEdgeBrowser";
-export * from "./hoc/parseMultipleJson";
-export { default as scrollIntoView } from "./hoc/scrollIntoView";
-export * from "./hoc/scrollIntoView";
-export { default as setCookies } from "./hoc/setCookies";
-export * from "./hoc/setCookies";
-export { default as setUrl } from "./hoc/setUrl";
-export * from "./hoc/setUrl";
-export { default as setupTests } from "./hoc/setupTests";
-export * from "./hoc/setupTests";
-export { default as updateRestfulObjectArrays } from "./hoc/updateRestfulObjectArrays";
-export * from "./hoc/updateRestfulObjectArrays";
-export { default as uploadImage } from "./hoc/uploadImage";
-export * from "./hoc/uploadImage";
-export { default as validSQL } from "./hoc/validSQL";
-export * from "./hoc/validSQL";
-export { default as windowDimensions } from "./hoc/windowDimensions";
-export * from "./hoc/windowDimensions";
-export * from "./variables/C6";
-export { default as isProduction } from "./variables/isProduction";
-export * from "./variables/isProduction";
+export { default as CarbonReact } from "./core/CarbonReact";
+export * from "./core/CarbonReact";
+export { default as isEdgeBrowser } from "./dom/isEdgeBrowser";
+export * from "./dom/isEdgeBrowser";
+export { default as scrollIntoView } from "./dom/scrollIntoView";
+export * from "./dom/scrollIntoView";
+export { default as setCookies } from "./dom/setCookies";
+export * from "./dom/setCookies";
+export { default as uploadImage } from "./dom/uploadImage";
+export * from "./dom/uploadImage";
+export { default as watchInputElementChangeEvent } from "./dom/watchInputElementChangeEvent";
+export * from "./dom/watchInputElementChangeEvent";
+export * from "./env/getEnv";
+export { default as isProduction } from "./env/isProduction";
+export * from "./env/isProduction";
+export * from "./hooks/useEffectOnce";
+export { default as windowDimensions } from "./hooks/windowDimensions";
+export * from "./hooks/windowDimensions";
+export * from "./routing/GlobalHistory";
+export * from "./schema/C6";
+export { default as deleteRestfulObjectArrays } from "./state/deleteRestfulObjectArrays";
+export * from "./state/deleteRestfulObjectArrays";
+export { default as updateRestfulObjectArrays } from "./state/updateRestfulObjectArrays";
+export * from "./state/updateRestfulObjectArrays";
+export { default as getStyles } from "./styles/getStyles";
+export * from "./styles/getStyles";
+export { default as addValidSQL } from "./testing/addValidSQL";
+export * from "./testing/addValidSQL";
+export { default as setupTests } from "./testing/setupTests";
+export * from "./testing/setupTests";
+export { default as validSQL } from "./testing/validSQL";
+export * from "./testing/validSQL";
+export * from "./types/KeysMatching";
+export * from "./types/SubsetMatching";
+export { default as changed } from "./utils/changed";
+export * from "./utils/changed";
+export { default as hexToRgb } from "./utils/hexToRgb";
+export * from "./utils/hexToRgb";
+export * from "./utils/parseMultipleJson";

package/src/{variables → schema}/C6.tsx

@@ -1,4 +1,4 @@
-import { tStatefulApiData } from "CarbonReact";
+import { tStatefulApiData } from "core/CarbonReact";
 
 export interface stringMap {
     [key: string]: string;
@@ -3301,4 +3301,3 @@ export const initialRestfulObjectsState: iRestfulObjectArrayTypes = {
 
 export type tRestfulObjectArrayValues = iRestfulObjectArrayTypes[keyof iRestfulObjectArrayTypes];
 
-

package/src/{hoc → state}/deleteRestfulObjectArrays.tsx

@@ -1,5 +1,5 @@
-import CarbonReact, { iCarbonReactState, tStatefulApiData } from "CarbonReact";
-import { KeysMatching } from "./KeysMatching";
+import CarbonReact, { iCarbonReactState, tStatefulApiData } from "core/CarbonReact";
+import { KeysMatching } from "types/KeysMatching";
 
 export interface iDeleteRestfulObjectArrays<
     ObjectType extends {

package/src/{hoc → state}/updateRestfulObjectArrays.tsx

@@ -1,6 +1,6 @@
-import CarbonReact, { iCarbonReactState, tStatefulApiData } from "CarbonReact";
-import { KeysMatching } from "./KeysMatching";
-import { SubsetMatching } from "./SubsetMatching";
+import CarbonReact, { iCarbonReactState, tStatefulApiData } from "core/CarbonReact";
+import { KeysMatching } from "types/KeysMatching";
+import { SubsetMatching } from "types/SubsetMatching";
 
 export enum eUpdateInsertMethod {
     REPLACE,

package/src/{hoc → styles}/getStyles.tsx

@@ -1,9 +1,13 @@
 import classNames from "classnames";
-import BootstrapStyle from "variables/bootstrap.module.css"
+import BootstrapStyle from "styles/bootstrap.module.css"
 import Styles from "style.module.css"
 
 export const getRootStyleValue = (property = '--dig_primary_color') : string => {
 
+    if (typeof document === "undefined" || typeof getComputedStyle === "undefined") {
+        return "";
+    }
+
     return getComputedStyle(document.documentElement)
         .getPropertyValue(property).trim();
 
@@ -41,4 +45,4 @@ export default function getStyles<iCSS extends {}>(overrides: iCSS = {} as iCSS)
 
     return mergeStyles(dropStyles, overrides)
 
-}
+}

package/src/{hoc → testing}/setupTests.tsx

@@ -1,7 +1,9 @@
 import {axiosInstance, checkAllRequestsComplete, isVerbose} from "@carbonorm/carbonnode";
-import {waitFor} from "@testing-library/react";
+import {createRequire} from "module";
 import ValidSQL, {validSQL} from "./validSQL";
 
+const require = createRequire(import.meta.url);
+
 export default function ({sqlDirectory = './logs/rest/', logsDirectory = './logs/tests/'}: {
     sqlDirectory?: string,
     logsDirectory?: string
@@ -9,6 +11,7 @@ export default function ({sqlDirectory = './logs/rest/', logsDirectory = './logs
 
     const fs = require("fs");
     const {inspect} = require("util");
+    const {waitFor} = require("@testing-library/react");
 
     const originalWindowLocation = window.location.href
 

package/dist/components/Nest/Nest.d.ts

@@ -1,49 +0,0 @@
-import React from "react";
-export declare const range: (n: any) => number[];
-interface iTwoD {
-    max: number;
-    x: number | null;
-    y: number | null;
-}
-interface iTwoDAnimated extends iTwoD {
-    ya: number;
-    xa: number;
-}
-type NestProps = typeof Nest.defaultProps & {
-    children?: any;
-    position: "relative" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "-webkit-sticky" | "absolute" | "fixed" | "static" | "sticky";
-};
-export default class Nest extends React.Component<NestProps, {}> {
-    static defaultProps: {
-        backgroundColor: string;
-        display: string;
-        top: number;
-        left: number;
-        zIndex: number;
-        count: number;
-        opacity: number;
-        overflow: string;
-        color: string;
-        pointColor: string;
-        position: string;
-    };
-    canvas?: HTMLCanvasElement;
-    all: Array<iTwoDAnimated | iTwoD>;
-    points?: Array<iTwoDAnimated>;
-    current: iTwoD;
-    constructor(props: any);
-    canvasContext?: CanvasRenderingContext2D;
-    componentDidMount(): void;
-    randomPoints: () => {
-        x: number;
-        y: number;
-        xa: number;
-        ya: number;
-        max: number;
-    }[];
-    tid: number;
-    drawCanvas: () => void;
-    destroy(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export {};

package/dist/hoc/setUrl.d.ts

@@ -1 +0,0 @@
-export default function setUrl(host?: string, https?: boolean): void;

package/dist/variables/isProduction.d.ts

@@ -1,2 +0,0 @@
-declare const isProduction: boolean;
-export default isProduction;

package/src/components/Nest/Nest.tsx

@@ -1,241 +0,0 @@
-import {toastOptions} from "@carbonorm/carbonnode";
-import React from "react";
-import {toast} from "react-toastify";
-
-export const range = n =>
-    new Array(n).fill(0).map((_, idx) => idx);
-
-//export const canvasStyle = config =>
-//    `display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:${config.zIndex};opacity:${config.opacity}`;
-
-interface iTwoD {
-    max: number,
-    x: number | null,
-    y: number | null,
-}
-
-interface iTwoDAnimated extends iTwoD {
-    ya: number,
-    xa: number
-}
-
-type NestProps = typeof Nest.defaultProps & {
-    children?: any;
-    position: "relative" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "-webkit-sticky" | "absolute" | "fixed" | "static" | "sticky",
-};
-
-// @link https://sites.google.com/site/webglbook/home/chapter-3
-export default class Nest extends React.Component<NestProps, {
-    // updating react state will re-run the render method.
-    // this is un necessary overhead with canvas apps.
-}> {
-    static defaultProps = {
-        backgroundColor: "white",
-        display:"block",
-        top: 0,
-        left: 0,
-        zIndex: -1,
-        count: 99,
-        opacity: 0.5,
-        overflow: "hidden",
-        color: '255,255,255',
-        pointColor: '255,0,0',
-        position: "relative"
-    };
-
-    canvas?: HTMLCanvasElement;
-
-    all: Array<iTwoDAnimated | iTwoD> = [];
-
-    points?: Array<iTwoDAnimated>;
-
-    current: iTwoD = {
-        x: 0, // current mouse x
-        y: 0, // current mouse y
-        max: 20000 // circle radius squared
-    };
-
-    constructor(props) {
-        super(props);
-        this.state ={}
-    }
-
-    canvasContext ?: CanvasRenderingContext2D;
-
-    componentDidMount() {
-
-        this.canvas = document.getElementById('2d') as HTMLCanvasElement;
-
-        this.canvasContext = this.canvas.getContext('2d') || undefined;
-
-        if (undefined === this.canvasContext) {
-
-            toast.warn('Your browser does not support Canvas! Some features may not work as expected.', toastOptions)
-
-            return;
-
-        }
-
-        this.points = this.randomPoints();
-
-        this.all = this.all?.concat(this.points,
-            [this.current]
-        );
-
-        if (undefined === this.canvas) {
-
-            toast.error('Failed to load Canvas! Some features may not work as expected.', toastOptions)
-
-
-            return;
-        }
-
-        document.onmousemove = e => {
-            this.current.x = e.clientX; // - this.el.offsetLeft + document.scrollingElement.scrollLeft; // 当存在横向滚动条时，x坐标再往右移动滚动条拉动的距离
-            this.current.y = e.clientY; // - this.el.offsetTop + document.scrollingElement.scrollTop; // 当存在纵向滚动条时，y坐标再往下移动滚动条拉动的距离
-        };
-
-        this.canvas.onmouseout = () => {
-            this.current.x = null;
-            this.current.y = null;
-        };
-
-        this.drawCanvas()
-
-    }
-
-    randomPoints = () => {
-        return range(this.props.count).map(() => ({
-            x: Math.random() * window.innerWidth,
-            y: Math.random() * window.innerHeight,
-            xa: 2 * Math.random() - 1, // 随机运动返现
-            ya: 2 * Math.random() - 1,
-            max: 6000 // Adhesion distance
-        }));
-    };
-
-
-    tid = 0;
-
-    drawCanvas = () => {
-
-        const context = this.canvasContext;
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-        const current = this.current;
-        const points = this.points;
-        const all = this.all;
-
-        if (undefined === context
-            || undefined === current
-            || undefined === points
-        ) {
-            alert('context, current, or points was undefined. quitting.')
-
-            return;
-        }
-
-        context.clearRect(0, 0, width, height);
-
-        // random line and current position associative array
-        let e, i, d, x_dist, y_dist, dist; // temporary node
-
-        // Iterate through each point
-        points.forEach((r, idx) => {
-
-            r.x = r.x || 0;
-
-            r.y = r.y || 0;
-
-            r.x += r.xa;
-
-            r.y += r.ya; // move
-
-            r.xa *= r.x > width || r.x < 0 ? -1 : 1;
-
-            r.ya *= r.y > height || r.y < 0 ? -1 : 1; // Hit the boundary, bounce back
-
-            context.fillStyle = `rgba(${this.props.pointColor})`;
-
-            context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); // Draw a point with a width and height of 1
-
-            // start from next point
-            for (i = idx + 1; i < all.length; i++) {
-
-                e = all[i];
-
-                if (null !== e.x && null !== e.y) {
-
-                    x_dist = r.x - e.x; // x-axis distance l
-
-                    y_dist = r.y - e.y; // y-axis n
-
-                    dist = x_dist * x_dist + y_dist * y_dist; // total distance, m
-
-                    if (dist > e.max) {
-                        continue;
-                    }
-
-                    if (e === current && dist >= e.max / 2) {
-
-                        r.x -= 0.03 * x_dist;
-
-                        r.y -= 0.03 * y_dist;
-
-                    }
-
-                    d = (e.max - dist) / e.max;
-
-                    context.beginPath();
-
-                    context.lineWidth = d / 2;
-
-                    context.strokeStyle = `rgba(${this.props.color},${d + 0.2})`;
-
-                    context.moveTo(r.x, r.y);
-
-                    context.lineTo(e.x, e.y);
-
-                    context.stroke();
-
-                }
-
-            }
-
-        });
-
-        requestAnimationFrame(this.drawCanvas);
-
-    }
-
-    destroy() {
-
-        cancelAnimationFrame(this.tid);
-
-    }
-
-    render() {
-
-        return (
-            <div>
-                {this.props.children}
-                <canvas
-                    id={"2d"}
-                    width={window.innerWidth}
-                    height={window.innerHeight}
-                    style={{
-                        backgroundColor: this.props.backgroundColor,
-                        display:this.props.display,
-                        position: this.props.position,
-                        top: this.props.top,
-                        left: this.props.left,
-                        overflow: this.props.overflow,
-                        zIndex: this.props.zIndex,
-                        opacity: this.props.opacity
-                    }}/>
-            </div>
-        );
-    }
-
-}
-