@plasmicpkgs/plasmic-cms 0.0.31 → 0.0.37

package/dist/plasmic-cms.esm.js

@@ -1,7 +1,8 @@
-import registerGlobalContext from '@plasmicapp/host/registerGlobalContext';
 import registerComponent from '@plasmicapp/host/registerComponent';
+import registerGlobalContext from '@plasmicapp/host/registerGlobalContext';
 import { useSelector, DataProvider, useDataEnv, repeatedElement } from '@plasmicapp/host';
 import { usePlasmicQueryData } from '@plasmicapp/query';
+import dayjs from 'dayjs';
 import React from 'react';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -1347,13 +1348,13 @@ function mkTableOptions(tables) {
     };
   });
 }
-function mkFieldOptions(tables, tableId, types) {
+function mkFieldOptions(tables, tableIdentifier, types) {
   if (!tables) {
     return [];
   }
 
   var table = tables.find(function (t) {
-    return t.identifier === tableId;
+    return t.identifier === tableIdentifier;
   });
 
   if (!table) {
@@ -1377,7 +1378,8 @@ function mkFieldOptions(tables, tableId, types) {
 }
 
 var _excluded = ["children"],
-    _excluded2 = ["className", "table", "field", "setControlContextData"];
+    _excluded2 = ["className", "table", "field", "dateFormat", "setControlContextData"],
+    _excluded3 = ["table", "field", "valueProp", "children", "setControlContextData"];
 var modulePath = "@plasmicpkgs/plasmic-cms";
 var componentPrefix = "hostless-plasmic-cms";
 var fetcherComponentPropMetas = {
@@ -1446,15 +1448,6 @@ function CmsCredentialsProvider(_ref) {
       config = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   config.host = config.host || defaultHost;
-
-  if (!config.databaseId) {
-    throw new Error("You must specify the CMS database ID to use.");
-  }
-
-  if (!config.databaseToken) {
-    throw new Error("You must specify the token of the CMS database you are using.");
-  }
-
   return React.createElement(DatabaseProvider, {
     config: config
   }, React.createElement(TablesFetcher, null, children));
@@ -1472,9 +1465,21 @@ function TablesFetcher(_ref2) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            return _context.abrupt("return", mkApi(databaseConfig).fetchTables());
+            if (isDatabaseConfigured(databaseConfig)) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return", []);
 
-          case 1:
+          case 2:
+            _context.next = 4;
+            return mkApi(databaseConfig).fetchTables();
+
+          case 4:
+            return _context.abrupt("return", _context.sent);
+
+          case 5:
           case "end":
             return _context.stop();
         }
@@ -1492,7 +1497,7 @@ function TablesFetcher(_ref2) {
 
 var cmsQueryLoaderMeta = {
   name: componentPrefix + "-query-loader",
-  displayName: "CMS Query Loader",
+  displayName: "CMS Data Loader",
   importName: "CmsQueryLoader",
   importPath: modulePath,
   props: {
@@ -1545,6 +1550,11 @@ var cmsQueryLoaderMeta = {
     }
   }
 };
+
+function isDatabaseConfigured(config) {
+  return (config == null ? void 0 : config.databaseId) && (config == null ? void 0 : config.databaseToken);
+}
+
 function CmsQueryLoader(_ref5) {
   var table = _ref5.table,
       children = _ref5.children,
@@ -1582,27 +1592,35 @@ function CmsQueryLoader(_ref5) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
+            if (isDatabaseConfigured(databaseConfig)) {
+              _context2.next = 2;
+              break;
+            }
+
+            throw new Error("You must specify the CMS ID and API key");
+
+          case 2:
             if (table) {
-              _context2.next = 4;
+              _context2.next = 6;
               break;
             }
 
-            throw new Error("You must select a table to query");
+            throw new Error("You must select a model to query");
 
-          case 4:
+          case 6:
             if (!(tables && !tables.find(function (t) {
               return t.identifier === table;
             }))) {
-              _context2.next = 6;
+              _context2.next = 8;
               break;
             }
 
-            throw new Error("There is no table called \"" + table + "\"");
+            throw new Error("There is no model called \"" + table + "\"");
 
-          case 6:
+          case 8:
             return _context2.abrupt("return", mkApi(databaseConfig).query(table, params));
 
-          case 7:
+          case 9:
           case "end":
             return _context2.stop();
         }
@@ -1620,7 +1638,7 @@ function CmsQueryLoader(_ref5) {
 }
 var cmsRowRepeaterMeta = {
   name: componentPrefix + "-row-repeater",
-  displayName: "CMS Row Repeater",
+  displayName: "CMS Entry Repeater",
   importName: "CmsRowRepeater",
   importPath: modulePath,
   props: {
@@ -1666,9 +1684,169 @@ function CmsRowRepeater(_ref7) {
     }, repeatedElement(index === 0, children));
   }));
 }
+var cmsQueryRepeaterMeta = {
+  name: componentPrefix + "-query-repeater",
+  displayName: "CMS Data Loader",
+  description: "Fetches CMS data and repeats content of children once for every row fetched.",
+  importName: "CmsQueryRepeater",
+  importPath: modulePath,
+  props: {
+    children: {
+      type: "slot",
+      defaultValue: {
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: componentPrefix + "-row-field"
+        }]
+      }
+    },
+    table: {
+      type: "choice",
+      displayName: "Model",
+      description: "CMS model (table) to query.",
+      options: function options(_, ctx) {
+        return mkTableOptions(ctx == null ? void 0 : ctx.tables);
+      }
+    },
+    useDraft: {
+      type: "boolean",
+      displayName: "Use drafts?",
+      description: "If set, also query unpublished content.",
+      defaultValue: false
+    },
+    where: {
+      type: "object",
+      displayName: "Filter",
+      description: "Filter clause, in JSON format.",
+      hidden: function hidden() {
+        return true;
+      }
+    },
+    orderBy: {
+      type: "choice",
+      displayName: "Order by",
+      description: "Field to order by.",
+      options: function options(_ref8, ctx) {
+        var table = _ref8.table;
+        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, table);
+      }
+    },
+    desc: {
+      type: "boolean",
+      displayName: "Sort descending?",
+      description: 'Sort descending by "Order by" field.',
+      defaultValue: false
+    },
+    limit: {
+      type: "number",
+      displayName: "Limit",
+      description: "Maximum number of entries to fetch (0 for unlimited).",
+      defaultValue: 0
+    }
+  }
+};
+function CmsQueryRepeater(_ref9) {
+  var table = _ref9.table,
+      children = _ref9.children,
+      setControlContextData = _ref9.setControlContextData,
+      where = _ref9.where,
+      useDraft = _ref9.useDraft,
+      orderBy = _ref9.orderBy,
+      desc = _ref9.desc,
+      limit = _ref9.limit;
+  var databaseConfig = useDatabase();
+  var tables = useTables();
+
+  if (tables) {
+    // TODO: Only include table if __plasmic_cms_row_{table} exists.
+    setControlContextData == null ? void 0 : setControlContextData({
+      tables: tables
+    });
+  }
+
+  var params = {
+    where: where,
+    useDraft: useDraft,
+    orderBy: orderBy,
+    desc: desc,
+    limit: limit
+  };
+  var cacheKey = JSON.stringify({
+    component: "CmsQueryLoader",
+    table: table,
+    databaseConfig: databaseConfig,
+    params: params
+  });
+  var maybeData = usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
+    return runtime_1.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            if (isDatabaseConfigured(databaseConfig)) {
+              _context3.next = 2;
+              break;
+            }
+
+            throw new Error("You must specify a CMS ID and API key");
+
+          case 2:
+            if (table) {
+              _context3.next = 6;
+              break;
+            }
+
+            if (!(!tables || tables.length === 0)) {
+              _context3.next = 5;
+              break;
+            }
+
+            throw new Error("You must select a model to query");
+
+          case 5:
+            table = tables[0].identifier;
+
+          case 6:
+            if (!(tables && !tables.find(function (t) {
+              return t.identifier === table;
+            }))) {
+              _context3.next = 8;
+              break;
+            }
+
+            throw new Error("There is no model called \"" + table + "\"");
+
+          case 8:
+            return _context3.abrupt("return", mkApi(databaseConfig).query(table, params));
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  return renderMaybeData(maybeData, function (rows) {
+    if (rows.length === 0) {
+      return React.createElement("div", null, "No matching entries found.");
+    }
+
+    return React.createElement(QueryResultProvider, {
+      table: table,
+      rows: rows
+    }, rows.map(function (row, index) {
+      return React.createElement(RowProvider, {
+        table: table,
+        row: row
+      }, repeatedElement(index === 0, children));
+    }));
+  }, {
+    hideIfNotFound: false
+  });
+}
 var cmsRowFieldMeta = {
   name: componentPrefix + "-row-field",
-  displayName: "CMS Row Field",
+  displayName: "CMS Entry Field",
   importName: "CmsRowField",
   importPath: modulePath,
   props: {
@@ -1684,36 +1862,117 @@ var cmsRowFieldMeta = {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref8, ctx) {
+      options: function options(_ref11, ctx) {
         var _ctx$table;
 
-        var table = _ref8.table;
-        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table = ctx == null ? void 0 : ctx.table) != null ? _ctx$table : table, ["number", "boolean", "text", "long-text", "date-time", "rich-text"]);
+        var table = _ref11.table;
+        return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table = ctx == null ? void 0 : ctx.table) != null ? _ctx$table : table, ["number", "boolean", "text", "long-text", "date-time", "rich-text", "image"]);
       }
+    },
+    dateFormat: {
+      type: "choice",
+      displayName: "Date Format",
+      hidden: function hidden(_ref12, ctx) {
+        var field = _ref12.field;
+
+        if (!ctx) {
+          return true;
+        }
+
+        var tableIdentifier = ctx.table,
+            tables = ctx.tables;
+        var table = tables == null ? void 0 : tables.find(function (t) {
+          return t.identifier === tableIdentifier;
+        });
+
+        if (!table) {
+          return true;
+        }
+
+        var fieldMeta = table.schema.fields.find(function (f) {
+          return f.identifier === field;
+        });
+
+        if (!fieldMeta) {
+          return true;
+        }
+
+        return fieldMeta.type !== "date-time";
+      },
+      options: [{
+        label: "July 26, 2014",
+        value: "MMMM D, YYYY"
+      }, {
+        label: "July 26, 2014 10:02 PM",
+        value: "MMMM D, YYYY h:mm A"
+      }, {
+        label: "Jul 26, 2014",
+        value: "MMM D, YYYY"
+      }, {
+        label: "Jul 26, 2014 10:02 PM",
+        value: "MMM D, YYYY h:mm A"
+      }, {
+        label: "Saturday, July 26, 2014",
+        value: "dddd, MMMM D, YYYY"
+      }, {
+        label: "7/26/2014",
+        value: "M/D/YYYY"
+      }, {
+        label: "7/26/2014 10:02 PM",
+        value: "M/D/YYYY h:mm A"
+      }, {
+        label: "26/7/2014",
+        value: "D/M/YYYY"
+      }, {
+        label: "26/7/2014 10:02 PM",
+        value: "D/M/YYYY h:mm A"
+      }, {
+        label: "7/26/14",
+        value: "M/D/YY"
+      }, {
+        label: "7/26/14 10:02 PM",
+        value: "M/D/YY h:mm A"
+      }, {
+        label: "26/7/14",
+        value: "D/M/YY"
+      }, {
+        label: "26/7/14 10:02 PM",
+        value: "D/M/YY h:mm A"
+      }]
     }
   }
 };
-function CmsRowField(_ref9) {
+function CmsRowField(_ref13) {
   var _res$row$data;
 
-  var className = _ref9.className,
-      table = _ref9.table,
-      field = _ref9.field,
-      setControlContextData = _ref9.setControlContextData,
-      rest = _objectWithoutPropertiesLoose(_ref9, _excluded2);
+  var className = _ref13.className,
+      table = _ref13.table,
+      field = _ref13.field,
+      dateFormat = _ref13.dateFormat,
+      setControlContextData = _ref13.setControlContextData,
+      rest = _objectWithoutPropertiesLoose(_ref13, _excluded2);
 
   var tables = useTables();
   var res = useRow(table);
 
-  if (!res || !res.row) {
-    return React.createElement("div", null, "Error: No CMS Row found");
+  if (!res) {
+    return React.createElement("div", {
+      className: className
+    }, "Field ", table != null ? table : "Unknown Model", ".", field != null ? field : "Unknown Field");
+  }
+
+  if (!res.row) {
+    return React.createElement("div", {
+      className: className
+    }, "Error: No CMS Entry found");
   }
 
   if (tables) {
     // TODO: Only include table if __plasmic_cms_row_{table} exists.
     setControlContextData == null ? void 0 : setControlContextData({
       tables: tables,
-      table: res.table
+      table: res.table,
+      row: res.row
     });
   }
 
@@ -1721,14 +1980,23 @@ function CmsRowField(_ref9) {
     table: res.table,
     tables: tables,
     field: field,
-    typeFilters: ["text"]
+    typeFilters: ["text", "long-text", "rich-text"]
   });
 
   if (!fieldMeta) {
-    return React.createElement("div", null, "Error: No field to display");
+    throw new Error("Please select an entry field to display.");
   }
 
   var data = (_res$row$data = res.row.data) == null ? void 0 : _res$row$data[fieldMeta.identifier];
+
+  if (!data) {
+    return null;
+  }
+
+  if (fieldMeta.type === "date-time" && dateFormat) {
+    data = dayjs(data).format(dateFormat);
+  }
+
   return data ? renderValue(data, fieldMeta.type, _extends({
     className: className
   }, rest)) : null;
@@ -1791,7 +2059,7 @@ function renderValue(value, type, props) {
 
 var cmsRowLinkMeta = {
   name: componentPrefix + "-row-link",
-  displayName: "CMS Row Link",
+  displayName: "CMS Entry Link",
   importName: "CmsRowLink",
   importPath: modulePath,
   props: {
@@ -1815,10 +2083,10 @@ var cmsRowLinkMeta = {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref10, ctx) {
+      options: function options(_ref14, ctx) {
         var _ctx$table2;
 
-        var table = _ref10.table;
+        var table = _ref14.table;
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table2 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table2 : table);
       }
     },
@@ -1830,14 +2098,14 @@ var cmsRowLinkMeta = {
     }
   }
 };
-function CmsRowLink(_ref11) {
+function CmsRowLink(_ref15) {
   var _res$row$data2;
 
-  var table = _ref11.table,
-      field = _ref11.field,
-      hrefProp = _ref11.hrefProp,
-      children = _ref11.children,
-      setControlContextData = _ref11.setControlContextData;
+  var table = _ref15.table,
+      field = _ref15.field,
+      hrefProp = _ref15.hrefProp,
+      children = _ref15.children,
+      setControlContextData = _ref15.setControlContextData;
   var tables = useTables();
   var res = useRow(table);
 
@@ -1882,7 +2150,7 @@ function CmsRowLink(_ref11) {
 }
 var cmsRowImageMeta = {
   name: componentPrefix + "-row-image",
-  displayName: "CMS Row Image",
+  displayName: "CMS Entry Image",
   importName: "CmsRowImage",
   importPath: modulePath,
   props: {
@@ -1905,10 +2173,10 @@ var cmsRowImageMeta = {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref12, ctx) {
+      options: function options(_ref16, ctx) {
         var _ctx$table3;
 
-        var table = _ref12.table;
+        var table = _ref16.table;
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table3 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table3 : table);
       }
     },
@@ -1920,14 +2188,14 @@ var cmsRowImageMeta = {
     }
   }
 };
-function CmsRowImage(_ref13) {
+function CmsRowImage(_ref17) {
   var _res$row$data3;
 
-  var table = _ref13.table,
-      field = _ref13.field,
-      srcProp = _ref13.srcProp,
-      children = _ref13.children,
-      setControlContextData = _ref13.setControlContextData;
+  var table = _ref17.table,
+      field = _ref17.field,
+      srcProp = _ref17.srcProp,
+      children = _ref17.children,
+      setControlContextData = _ref17.setControlContextData;
   var tables = useTables();
   var res = useRow(table);
 
@@ -1978,7 +2246,7 @@ function CmsRowImage(_ref13) {
 }
 var cmsRowFieldValueMeta = {
   name: componentPrefix + "-row-value",
-  displayName: "CMS Row Value",
+  displayName: "CMS Entry Value",
   importName: "CmsRowValue",
   importPath: modulePath,
   props: {
@@ -1997,10 +2265,10 @@ var cmsRowFieldValueMeta = {
       type: "choice",
       displayName: "Field",
       description: "Field (from model schema) to use.",
-      options: function options(_ref14, ctx) {
+      options: function options(_ref18, ctx) {
         var _ctx$table4;
 
-        var table = _ref14.table;
+        var table = _ref18.table;
         return mkFieldOptions(ctx == null ? void 0 : ctx.tables, (_ctx$table4 = ctx == null ? void 0 : ctx.table) != null ? _ctx$table4 : table);
       }
     },
@@ -2012,14 +2280,16 @@ var cmsRowFieldValueMeta = {
     }
   }
 };
-function CmsRowFieldValue(_ref15) {
+function CmsRowFieldValue(_ref19) {
   var _res$row$data4;
 
-  var table = _ref15.table,
-      field = _ref15.field,
-      valueProp = _ref15.valueProp,
-      children = _ref15.children,
-      setControlContextData = _ref15.setControlContextData;
+  var table = _ref19.table,
+      field = _ref19.field,
+      valueProp = _ref19.valueProp,
+      children = _ref19.children,
+      setControlContextData = _ref19.setControlContextData,
+      rest = _objectWithoutPropertiesLoose(_ref19, _excluded3);
+
   var tables = useTables();
   var res = useRow(table);
 
@@ -2049,9 +2319,9 @@ function CmsRowFieldValue(_ref15) {
   var value = ((_res$row$data4 = res.row.data) == null ? void 0 : _res$row$data4[fieldMeta.identifier]) || "";
   var childrenWithProps = React.Children.map(children, function (child) {
     if (React.isValidElement(child)) {
-      var _React$cloneElement4;
+      var _extends2;
 
-      return React.cloneElement(child, (_React$cloneElement4 = {}, _React$cloneElement4[valueProp] = value, _React$cloneElement4));
+      return React.cloneElement(child, _extends({}, rest, (_extends2 = {}, _extends2[valueProp] = value, _extends2)));
     }
 
     return child;
@@ -2092,13 +2362,13 @@ var cmsRowLoaderMeta = {
     }
   }, fetcherComponentPropMetas)
 };
-function CmsRowLoader(_ref16) {
-  var table = _ref16.table,
-      row = _ref16.row,
-      children = _ref16.children,
-      useDraft = _ref16.useDraft,
-      hideIfNotFound = _ref16.hideIfNotFound,
-      setControlContextData = _ref16.setControlContextData;
+function CmsRowLoader(_ref20) {
+  var table = _ref20.table,
+      row = _ref20.row,
+      children = _ref20.children,
+      useDraft = _ref20.useDraft,
+      hideIfNotFound = _ref20.hideIfNotFound,
+      setControlContextData = _ref20.setControlContextData;
   var databaseConfig = useDatabase();
   var tables = useTables();
 
@@ -2115,13 +2385,13 @@ function CmsRowLoader(_ref16) {
     databaseConfig: databaseConfig,
     useDraft: useDraft
   });
-  var maybeData = usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-    return runtime_1.wrap(function _callee3$(_context3) {
+  var maybeData = usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
+    return runtime_1.wrap(function _callee4$(_context4) {
       while (1) {
-        switch (_context3.prev = _context3.next) {
+        switch (_context4.prev = _context4.next) {
           case 0:
             if (table) {
-              _context3.next = 2;
+              _context4.next = 2;
               break;
             }
 
@@ -2129,25 +2399,25 @@ function CmsRowLoader(_ref16) {
 
           case 2:
             if (row) {
-              _context3.next = 4;
+              _context4.next = 4;
               break;
             }
 
             throw new Error("You must specify an entry name to fetch.");
 
           case 4:
-            _context3.next = 6;
+            _context4.next = 6;
             return mkApi(databaseConfig).fetchRow(table, row, useDraft);
 
           case 6:
-            return _context3.abrupt("return", _context3.sent);
+            return _context4.abrupt("return", _context4.sent);
 
           case 7:
           case "end":
-            return _context3.stop();
+            return _context4.stop();
         }
       }
-    }, _callee3);
+    }, _callee4);
   })));
   return renderMaybeData(maybeData, function (row) {
     return React.createElement(RowProvider, {
@@ -2178,11 +2448,11 @@ function registerAll(loader) {
     }
   };
 
-  _registerGlobalContext(CmsCredentialsProvider, cmsCredentialsProviderMeta);
+  _registerGlobalContext(CmsCredentialsProvider, cmsCredentialsProviderMeta); // _registerComponent(CmsQueryLoader, cmsQueryLoaderMeta);
+  // _registerComponent(CmsRowRepeater, cmsRowRepeaterMeta);
 
-  _registerComponent(CmsQueryLoader, cmsQueryLoaderMeta);
 
-  _registerComponent(CmsRowRepeater, cmsRowRepeaterMeta);
+  _registerComponent(CmsQueryRepeater, cmsQueryRepeaterMeta);
 
   _registerComponent(CmsRowField, cmsRowFieldMeta);
 
@@ -2190,10 +2460,9 @@ function registerAll(loader) {
 
   _registerComponent(CmsRowImage, cmsRowImageMeta);
 
-  _registerComponent(CmsRowFieldValue, cmsRowFieldValueMeta);
+  _registerComponent(CmsRowFieldValue, cmsRowFieldValueMeta); // _registerComponent(CmsRowLoader, cmsRowLoaderMeta);
 
-  _registerComponent(CmsRowLoader, cmsRowLoaderMeta);
 }
 
-export { CmsCredentialsProvider, CmsQueryLoader, CmsRowField, CmsRowFieldValue, CmsRowImage, CmsRowLink, CmsRowLoader, CmsRowRepeater, cmsCredentialsProviderMeta, cmsQueryLoaderMeta, cmsRowFieldMeta, cmsRowFieldValueMeta, cmsRowImageMeta, cmsRowLinkMeta, cmsRowLoaderMeta, cmsRowRepeaterMeta, registerAll };
+export { CmsCredentialsProvider, CmsQueryLoader, CmsQueryRepeater, CmsRowField, CmsRowFieldValue, CmsRowImage, CmsRowLink, CmsRowLoader, CmsRowRepeater, cmsCredentialsProviderMeta, cmsQueryLoaderMeta, cmsQueryRepeaterMeta, cmsRowFieldMeta, cmsRowFieldValueMeta, cmsRowImageMeta, cmsRowLinkMeta, cmsRowLoaderMeta, cmsRowRepeaterMeta, registerAll };
 //# sourceMappingURL=plasmic-cms.esm.js.map