@saasquatch/mint-components 1.5.0-8 → 1.5.0-80

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -2,7 +2,8 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { ReferralTableView, } from "./sqm-referral-table-view";
+import { GenericTableView, } from "../../tables/GenericTableView";
+import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
 import { useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
@@ -10,7 +11,7 @@ import { useReferralTable } from "./useReferralTable";
 export class ReferralTable {
   constructor() {
     /** @uiName Number of referrals per page */
-    this.perPage = 3;
+    this.perPage = 4;
     /** @uiName Show column labels */
     this.showLabels = true;
     /** @uiName Previous button text  */
@@ -19,16 +20,29 @@ export class ReferralTable {
     this.moreLabel = "Next";
     /** @uiName Show Referred by user in table  */
     this.showReferrer = false;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.hiddenColumns = "0";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.smBreakpoint = 634;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 899;
+    /** @uiName Empty State Image Link  */
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png";
+    /** @uiName Empty State Title  */
+    this.emptyStateHeader = "View your referral details";
+    /** @uiName Empty State Text  */
+    this.emptyStateText = "Track the status of your referrals and rewards earned by referring friends";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h(EmptySlot, null);
+    const empty = (h(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useReferraltableDemo(this)
       : useReferralTable(this, empty, loading);
-    return (h(ReferralTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+    console.log("elemente", elements);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
   static get is() { return "sqm-referral-table"; }
   static get encapsulation() { return "shadow"; }
@@ -72,7 +86,7 @@ export class ReferralTable {
       },
       "attribute": "per-page",
       "reflect": false,
-      "defaultValue": "3"
+      "defaultValue": "4"
     },
     "showLabels": {
       "type": "boolean",
@@ -158,20 +172,146 @@ export class ReferralTable {
       "reflect": false,
       "defaultValue": "false"
     },
+    "hiddenColumns": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hidden-columns",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "smBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "sm-breakpoint",
+      "reflect": false,
+      "defaultValue": "634"
+    },
+    "mdBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "md-breakpoint",
+      "reflect": false,
+      "defaultValue": "899"
+    },
+    "emptyStateImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Image Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-image",
+      "reflect": false,
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png\""
+    },
+    "emptyStateHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header",
+      "reflect": false,
+      "defaultValue": "\"View your referral details\""
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-text",
+      "reflect": false,
+      "defaultValue": "\"Track the status of your referrals and rewards earned by referring friends\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<ReferralTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; loading: boolean; hasNext: boolean; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; referralData?: Referral[]; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "original": "DemoData<GenericTableViewProps>",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "ReferralTableViewProps": {
+          "GenericTableViewProps": {
             "location": "import",
-            "path": "./sqm-referral-table-view"
+            "path": "../../tables/GenericTableView"
           }
         }
       },
@@ -203,7 +343,7 @@ function LoadingRow() {
       h("sl-skeleton", null))));
 }
 function useReferraltableDemo(props) {
-  return deepmerge({
+  const demoProps = deepmerge({
     states: {
       hasPrev: false,
       hasNext: false,
@@ -222,17 +362,43 @@ function useReferraltableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: h(EmptySlot, null),
+      emptyElement: (h(EmptySlot, { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", emptyStateHeader: "View your referral details", emptyStateText: "Track the status of your referrals and rewards earned by referring\r\n\t\tfriends" })),
       loadingElement: h(LoadingSlot, null),
-      // FIXME: Even in demo mode, this should use real column names!
-      columns: [h("div", null, "Example"), h("div", null, "Example"), h("div", null, "Example")],
-      rows: [],
+      columns: [
+        h("div", null, "User"),
+        h("div", null, "Referral Status"),
+        h("div", null, "Rewards"),
+      ],
+      rows: [
+        [
+          h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
+          h("sqm-referral-table-status-cell", { statusText: "Completed", converted: true }),
+          h(PendingNoUnpend, null),
+        ],
+        [
+          h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
+          h("sqm-referral-table-status-cell", { statusText: "In Progress", converted: false }),
+          h(AvailableNoExpiry, null),
+        ],
+        [
+          h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+          h("sqm-referral-table-status-cell", { statusText: "Completed", converted: true }),
+          h(Cancelled, null),
+        ],
+      ],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  console.log("PROPS", demoProps);
+  return demoProps;
 }
-function EmptySlot() {
-  return (h("slot", { name: "empty" },
-    h("div", { style: { width: "100%" } },
-      h("sqm-text", null,
-        h("h3", { style: { color: "#777777" } }, "No Referrals Yet")))));
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
+  return (h("div", { slot: "empty", style: { display: "contents" } },
+    h("sqm-table-row", null,
+      h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
+        h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+          h("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }),
+          h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+            h("sqm-text", { slot: "label" },
+              h("h3", null, emptyStateHeader)),
+            h("sqm-text", { slot: "content" }, emptyStateText)))))));
 }