style and class

package.json

@@ -1,7 +1,7 @@
 {
   "name": "graph",
   "widgetName": "Graph",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "My widget description",
   "packagePath": "mendixcn",
   "author": "wengao.liu@siemens.com",

src/Graph.tsx

@@ -1,18 +1,21 @@
-import { useMemo } from "react";
+// import { useMemo } from "react";
 import { GraphContainerProps } from "../typings/GraphProps";
-import { ValueStatus } from "mendix";
+// import { ValueStatus } from "mendix";
+import classNames from "classnames";
+
+import "./ui/index.scss";
 
 export default function (props: GraphContainerProps) {
     console.log(props);
-    const value = useMemo(() => {
-        if (props.attribute && props.attribute.status === ValueStatus.Available) {
-            return props.attribute.value;
-        }
-    }, [props.attribute]);
+    // const value = useMemo(() => {
+    //     if (props.attribute && props.attribute.status === ValueStatus.Available) {
+    //         return props.attribute.value;
+    //     }
+    // }, [props.attribute]);
 
     return (
-        <div>
-            hello {props.sampleText} and your value is {value}
+        <div style={props.style} className={classNames("mendixcn-graph", props.class)}>
+            hello {props.sampleText} and your value is
         </div>
     );
 }

src/Graph.xml

@@ -11,7 +11,7 @@
                 <caption>Default value</caption>
                 <description>Sample text input</description>
             </property>
-            <property key="attribute" type="attribute" required="false">
+            <!-- <property key="attribute" type="attribute" required="false">
                 <caption>Attribute</caption>
                 <description></description>
                 <attributeTypes>
@@ -28,7 +28,7 @@
                 <attributeTypes>
                     <attributeType name="String" />
                 </attributeTypes>
-            </property>
+            </property> -->
         </propertyGroup>
     </properties>
 </widget>

typings/GraphProps.d.ts

@@ -4,17 +4,13 @@
  * @author Mendix UI Content Team
  */
 import { CSSProperties } from "react";
-import { EditableValue, ListValue, ListAttributeValue } from "mendix";
 
 export interface GraphContainerProps {
     name: string;
     class: string;
     style?: CSSProperties;
     tabIndex?: number;
     sampleText: string;
-    attribute?: EditableValue<string>;
-    datasource: ListValue;
-    att2?: ListAttributeValue<string>;
 }
 
 export interface GraphPreviewProps {
@@ -23,7 +19,4 @@ export interface GraphPreviewProps {
     styleObject?: CSSProperties;
     readOnly: boolean;
     sampleText: string;
-    attribute: string;
-    datasource: {} | { type: string } | null;
-    att2: string;
 }