Implemented Group TSX Component. See #43

lib/definitions/generated/hatchery-editor.d.ts

@@ -3368,26 +3368,6 @@ declare module Animate {
         textfield: Component;
     }
 }
-declare module Animate {
-    /**
-    * A small holder div that emulates C# style grids. Use the content variable instead of the group directly
-    */
-    class Group extends Component {
-        private heading;
-        content: Component;
-        constructor(text: any, parent: any);
-        /**
-        * Gets or sets the label text
-        * @param {string} val The text for this label
-        * @returns {string} The text for this label
-        */
-        text(val: any): JQuery;
-        /**
-        * This will cleanup the <Group>.
-        */
-        dispose(): void;
-    }
-}
 declare module Animate {
     /**
     * A wrapper class for checkboxes
@@ -5177,6 +5157,25 @@ declare module Animate {
         currentCanvas: Canvas;
     }
 }
+declare module Animate {
+    interface IGroupProps extends React.HTMLAttributes {
+        label: string;
+    }
+    /**
+     * A simple wrapper for a group Component
+     */
+    class Group extends React.Component<IGroupProps, any> {
+        /**
+         * Creates an instance of the group
+         */
+        constructor(props: IGroupProps);
+        /**
+         * Creates the component elements
+         * @returns {JSX.Element}
+         */
+        render(): JSX.Element;
+    }
+}
 declare module Animate {
     /**
     * This small class is used to group property grid elements together

lib/general-css/colours.scss

@@ -21,6 +21,8 @@ $background-secondary: #eee;
 $background-workspace: #D2DBE8;
 $background-dark: #86A1C3;
 
+$border-primary: #ddd;
+
 $input: #eee;
 $input-darker: #dcdcdc;
 $input-error : #F9DDDD;

lib/gui/group/group.tsx

@@ -0,0 +1,34 @@
+module Animate {
+
+    export interface IGroupProps extends React.HTMLAttributes {
+        label: string;
+    }
+
+    /**
+     * A simple wrapper for a group Component
+     */
+    export class Group extends React.Component<IGroupProps, any> {
+
+        /**
+         * Creates an instance of the group
+         */
+        constructor(props: IGroupProps) {
+            super(props);
+        }
+
+        /**
+         * Creates the component elements
+         * @returns {JSX.Element}
+         */
+        render(): JSX.Element {
+            const props : IVInputProps  = Object.assign({}, this.props);
+            let className = 'group' + (this.props.className ? (' ' + this.props.className) : '');
+            return <div {...props} className={className}>
+                <div className='group-header'>{this.props.label}</div>
+                <div className='group-content'>
+                    {this.props.children}
+                </div>
+            </div>
+        }
+    }
+}

lib/gui/group/style.scss

@@ -0,0 +1,16 @@
+.group {
+    position: relative;
+    margin: 20px 10px 10px 10px;
+    padding: 10px;
+    border: 1px solid $border-primary;
+    background: $background-primary;
+
+    .group-header {
+        background: inherit;
+        position: absolute;
+        top: -15px;
+        padding: 3px 10px 0 10px;
+        left: 8px;
+        font-weight: bold;
+    }
+}

lib/main.scss

@@ -162,22 +162,6 @@ Please only put css rules in here for layout related requirements.
     margin: 0px 5px 0  0;
 }
 
-/**
-* GROUP
-*/
-.group {
-    position: relative;
-    margin: 20px 10px 10px 10px;
-    padding: 10px;
-}
-.group-header {
-    position: absolute;
-    top: -15px;
-    padding: 3px 10px 0 10px;
-    left: 8px;
-    font-weight: bold;
-}
-
 /**
 * Context Menu
 */
@@ -330,6 +314,7 @@ body {
     width:50%;
 }
 
+@import 'gui/group/style.scss';
 @import 'gui/forms/options-form/style.scss';
 @import 'gui/window/style.scss';
 @import 'gui/list/style.scss';
@@ -960,9 +945,7 @@ a:active, a:hover {
     color:#aaa;
 }
 
-.group {
-    border: 1px solid #ddd;
-}
+
 .window-header {
     color: #fff;
 }

tsconfig.json

@@ -79,7 +79,7 @@
     "lib/gui/label.ts",
     "lib/gui/button.ts",
     "lib/gui/input-box.ts",
-    "lib/gui/group.ts",
+
     "lib/gui/checkbox.ts",
     "lib/gui/label-val.ts",
     "lib/gui/listview-item.ts",
@@ -120,6 +120,7 @@
     "lib/gui/tabs/script-tab.ts",
     "lib/gui/tabs/scene-tab.ts",
     "lib/gui/tabs/canvas-tab.ts",
+    "lib/gui/group/group.tsx",
     "lib/gui/property-grid-group.ts",
     "lib/gui/property-editors/pg-textbox.ts",
     "lib/gui/property-editors/pg-number.ts",