kup-magic-box: added Chip, Button List and Tree.

smeup · Feb 21, 2022 · ab5e214 · ab5e214
1 parent f0234f3
commit ab5e214
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 6 deletions.
diff --git a/packages/ketchup/src/components/kup-button-list/readme.md b/packages/ketchup/src/components/kup-button-list/readme.md
@@ -79,6 +79,7 @@ Type: `Promise<void>`
  - [kup-box](../kup-box)
  - [kup-cell](../kup-cell)
  - [kup-data-table](../kup-data-table)
+ - [kup-magic-box](../kup-magic-box)
  - [kup-tree](../kup-tree)
 
 ### Depends on
@@ -99,6 +100,7 @@ graph TD;
   kup-box --> kup-button-list
   kup-cell --> kup-button-list
   kup-data-table --> kup-button-list
+  kup-magic-box --> kup-button-list
   kup-tree --> kup-button-list
   style kup-button-list fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md
@@ -79,6 +79,7 @@ Type: `Promise<void>`
 ### Used by
 
  - [kup-card](../kup-card)
+ - [kup-magic-box](../kup-magic-box)
 
 ### Depends on
 
@@ -90,6 +91,7 @@ graph TD;
   kup-chip --> kup-badge
   kup-badge --> kup-badge
   kup-card --> kup-chip
+  kup-magic-box --> kup-chip
   style kup-chip fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/ketchup/src/components/kup-magic-box/kup-magic-box-declarations.ts b/packages/ketchup/src/components/kup-magic-box/kup-magic-box-declarations.ts
@@ -11,8 +11,11 @@ export enum KupMagicBoxProps {
  */
 export enum MagicBoxDisplay {
     BOX = 'Box',
+    BUTTON_LIST = 'Button List',
     CHART = 'Chart',
+    CHIP = 'Chip',
     ECHART = 'Echart',
     DATATABLE = 'Datatable',
     JSON = 'JSON',
+    TREE = 'Tree',
 }
diff --git a/packages/ketchup/src/components/kup-magic-box/kup-magic-box.tsx b/packages/ketchup/src/components/kup-magic-box/kup-magic-box.tsx
@@ -188,12 +188,22 @@ export class KupMagicBox {
             const props: GenericObject = {};
             switch (this.display) {
                 case MagicBoxDisplay.BOX:
-                    props['data'] = this.data;
+                    props.data = this.data;
                     content.push(<kup-box {...props}></kup-box>);
                     break;
+                case MagicBoxDisplay.BUTTON_LIST:
+                    props.data = this.data;
+                    content.push(
+                        <kup-button-list {...props}></kup-button-list>
+                    );
+                    break;
+                case MagicBoxDisplay.CHIP:
+                    props.data = this.data;
+                    content.push(<kup-chip {...props}></kup-chip>);
+                    break;
                 case MagicBoxDisplay.CHART:
                 case MagicBoxDisplay.ECHART:
-                    props['data'] = this.data;
+                    props.data = this.data;
                     props['series'] = [];
                     for (
                         let index = 0;
@@ -230,24 +240,26 @@ export class KupMagicBox {
                     if (this.display === MagicBoxDisplay.CHART) {
                         content.push(<kup-chart {...props}></kup-chart>);
                     } else {
-                        //Echart series broken?
-                        props['series'] = null;
                         content.push(<kup-echart {...props}></kup-echart>);
                     }
                     break;
                 case MagicBoxDisplay.DATATABLE:
-                    props['data'] = this.data;
+                    props.data = this.data;
                     props['autoFillMissingCells'] = true;
                     content.push(<kup-data-table {...props}></kup-data-table>);
                     break;
                 case MagicBoxDisplay.JSON:
-                    props['data'] = this.data;
+                    props.data = this.data;
                     content.push(
                         <pre class="json">
                             {JSON.stringify(this.data, null, 2)}
                         </pre>
                     );
                     break;
+                case MagicBoxDisplay.TREE:
+                    props.data = this.data;
+                    content.push(<kup-tree {...props}></kup-tree>);
+                    break;
                 default:
                     this.kupManager.debug.logMessage(
                         this,

diff --git a/packages/ketchup/src/components/kup-magic-box/readme.md b/packages/ketchup/src/components/kup-magic-box/readme.md
@@ -51,9 +51,12 @@ Type: `Promise<void>`
 ### Depends on
 
 - [kup-box](../kup-box)
+- [kup-button-list](../kup-button-list)
+- [kup-chip](../kup-chip)
 - [kup-chart](../kup-chart)
 - [kup-echart](../kup-echart)
 - [kup-data-table](../kup-data-table)
+- [kup-tree](../kup-tree)
 - [kup-combobox](../kup-combobox)
 - [kup-button](../kup-button)
 - [kup-badge](../kup-badge)
@@ -62,9 +65,12 @@ Type: `Promise<void>`
 ```mermaid
 graph TD;
   kup-magic-box --> kup-box
+  kup-magic-box --> kup-button-list
+  kup-magic-box --> kup-chip
   kup-magic-box --> kup-chart
   kup-magic-box --> kup-echart
   kup-magic-box --> kup-data-table
+  kup-magic-box --> kup-tree
   kup-magic-box --> kup-combobox
   kup-magic-box --> kup-button
   kup-magic-box --> kup-badge

diff --git a/packages/ketchup/src/components/kup-tree/readme.md b/packages/ketchup/src/components/kup-tree/readme.md
@@ -239,6 +239,7 @@ Type: `Promise<void>`
 ### Used by
 
  - [kup-card](../kup-card)
+ - [kup-magic-box](../kup-magic-box)
  - [kup-tooltip](../kup-tooltip)
 
 ### Depends on
@@ -340,6 +341,7 @@ graph TD;
   kup-dropdown-button --> kup-list
   kup-dropdown-button --> kup-badge
   kup-tab-bar --> kup-badge
+  kup-magic-box --> kup-tree
   style kup-tree fill:#f9f,stroke:#333,stroke-width:4px
 ```