@plasmicpkgs/plasmic-cms 0.0.30 → 0.0.35

package/dist/components.d.ts

@@ -2,7 +2,7 @@ import { CanvasComponentProps, ComponentMeta } from "@plasmicapp/host/registerCo
 import { GlobalContextMeta } from "@plasmicapp/host/registerGlobalContext";
 import React from "react";
 import { DatabaseConfig, QueryParams } from "./api";
-import { ApiCmsTable } from "./schema";
+import { ApiCmsRow, ApiCmsTable } from "./schema";
 interface FetcherComponentProps {
     hideIfNotFound?: boolean;
 }
@@ -26,15 +26,23 @@ interface CmsRowRepeaterProps extends CanvasComponentProps<TablesContextData> {
 }
 export declare const cmsRowRepeaterMeta: ComponentMeta<CmsRowRepeaterProps>;
 export declare function CmsRowRepeater({ table, children, setControlContextData, }: CmsRowRepeaterProps): JSX.Element;
+interface CmsQueryRepeaterProps extends QueryParams, CanvasComponentProps<TablesContextData> {
+    children?: React.ReactNode;
+    table?: string;
+}
+export declare const cmsQueryRepeaterMeta: ComponentMeta<CmsQueryRepeaterProps>;
+export declare function CmsQueryRepeater({ table, children, setControlContextData, where, useDraft, orderBy, desc, limit, }: CmsQueryLoaderProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 interface CmsRowFieldProps extends CanvasComponentProps<TablesContextData & {
     table: string;
+    row: ApiCmsRow;
 }> {
     table?: string;
     field?: string;
     className?: string;
+    dateFormat?: string;
 }
 export declare const cmsRowFieldMeta: ComponentMeta<CmsRowFieldProps>;
-export declare function CmsRowField({ className, table, field, setControlContextData, ...rest }: CmsRowFieldProps): JSX.Element | null;
+export declare function CmsRowField({ className, table, field, dateFormat, setControlContextData, ...rest }: CmsRowFieldProps): JSX.Element | null;
 interface TableContextData extends TablesContextData {
     table?: string;
 }
@@ -61,7 +69,7 @@ interface CmsRowFieldValueProps extends CanvasComponentProps<TableContextData> {
     children: React.ReactNode;
 }
 export declare const cmsRowFieldValueMeta: ComponentMeta<CmsRowFieldValueProps>;
-export declare function CmsRowFieldValue({ table, field, valueProp, children, setControlContextData, }: CmsRowFieldValueProps): React.ReactElement | null;
+export declare function CmsRowFieldValue({ table, field, valueProp, children, setControlContextData, ...rest }: CmsRowFieldValueProps): React.ReactElement | null;
 interface CmsRowLoaderProps extends CanvasComponentProps<TablesContextData>, FetcherComponentProps {
     table: string;
     row: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import registerGlobalContext from "@plasmicapp/host/registerGlobalContext";
 import registerComponent from "@plasmicapp/host/registerComponent";
+import registerGlobalContext from "@plasmicapp/host/registerGlobalContext";
 export declare function registerAll(loader?: {
     registerComponent: typeof registerComponent;
     registerGlobalContext: typeof registerGlobalContext;

package/dist/plasmic-cms.cjs.development.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var registerGlobalContext = _interopDefault(require('@plasmicapp/host/registerGlobalContext'));
 var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
+var registerGlobalContext = _interopDefault(require('@plasmicapp/host/registerGlobalContext'));
 var host = require('@plasmicapp/host');
 var query = require('@plasmicapp/query');
+var dayjs = _interopDefault(require('dayjs'));
 var React = _interopDefault(require('react'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -1353,13 +1354,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) {
@@ -1383,7 +1384,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 = {
@@ -1672,6 +1674,140 @@ function CmsRowRepeater(_ref7) {
     }, host.repeatedElement(index === 0, children));
   }));
 }
+var cmsQueryRepeaterMeta = {
+  name: componentPrefix + "-query-repeater",
+  displayName: "CMS Query 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: "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."
+    },
+    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 = query.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 (table) {
+              _context3.next = 4;
+              break;
+            }
+
+            throw new Error("You must select a table to query");
+
+          case 4:
+            if (!(tables && !tables.find(function (t) {
+              return t.identifier === table;
+            }))) {
+              _context3.next = 6;
+              break;
+            }
+
+            throw new Error("There is no table called \"" + table + "\"");
+
+          case 6:
+            return _context3.abrupt("return", mkApi(databaseConfig).query(table, params));
+
+          case 7:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  return renderMaybeData(maybeData, function (rows) {
+    return React.createElement(QueryResultProvider, {
+      table: table,
+      rows: rows
+    }, rows.map(function (row, index) {
+      return React.createElement(RowProvider, {
+        table: table,
+        row: row
+      }, host.repeatedElement(index === 0, children));
+    }));
+  }, {
+    hideIfNotFound: false
+  });
+}
 var cmsRowFieldMeta = {
   name: componentPrefix + "-row-field",
   displayName: "CMS Row Field",
@@ -1690,23 +1826,95 @@ 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;
+        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"]);
       }
+    },
+    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);
@@ -1719,7 +1927,8 @@ function CmsRowField(_ref9) {
     // 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
     });
   }
 
@@ -1735,6 +1944,15 @@ function CmsRowField(_ref9) {
   }
 
   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;
@@ -1821,10 +2039,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);
       }
     },
@@ -1836,14 +2054,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);
 
@@ -1911,10 +2129,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);
       }
     },
@@ -1926,14 +2144,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);
 
@@ -2003,10 +2221,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);
       }
     },
@@ -2018,14 +2236,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);
 
@@ -2055,9 +2275,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;
@@ -2098,13 +2318,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();
 
@@ -2121,13 +2341,13 @@ function CmsRowLoader(_ref16) {
     databaseConfig: databaseConfig,
     useDraft: useDraft
   });
-  var maybeData = query.usePlasmicQueryData(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-    return runtime_1.wrap(function _callee3$(_context3) {
+  var maybeData = query.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;
             }
 
@@ -2135,25 +2355,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, {
@@ -2184,11 +2404,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);
 
@@ -2196,13 +2416,13 @@ function registerAll(loader) {
 
   _registerComponent(CmsRowImage, cmsRowImageMeta);
 
-  _registerComponent(CmsRowFieldValue, cmsRowFieldValueMeta);
+  _registerComponent(CmsRowFieldValue, cmsRowFieldValueMeta); // _registerComponent(CmsRowLoader, cmsRowLoaderMeta);
 
-  _registerComponent(CmsRowLoader, cmsRowLoaderMeta);
 }
 
 exports.CmsCredentialsProvider = CmsCredentialsProvider;
 exports.CmsQueryLoader = CmsQueryLoader;
+exports.CmsQueryRepeater = CmsQueryRepeater;
 exports.CmsRowField = CmsRowField;
 exports.CmsRowFieldValue = CmsRowFieldValue;
 exports.CmsRowImage = CmsRowImage;
@@ -2211,6 +2431,7 @@ exports.CmsRowLoader = CmsRowLoader;
 exports.CmsRowRepeater = CmsRowRepeater;
 exports.cmsCredentialsProviderMeta = cmsCredentialsProviderMeta;
 exports.cmsQueryLoaderMeta = cmsQueryLoaderMeta;
+exports.cmsQueryRepeaterMeta = cmsQueryRepeaterMeta;
 exports.cmsRowFieldMeta = cmsRowFieldMeta;
 exports.cmsRowFieldValueMeta = cmsRowFieldValueMeta;
 exports.cmsRowImageMeta = cmsRowImageMeta;