@plasmicpkgs/plasmic-rich-components 1.0.50 → 1.0.52

package/dist/plasmic-rich-components.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
 import { LogoutOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
@@ -64,37 +64,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 
 function useIsClient() {
   var _useState = useState(false),
@@ -1090,14 +1059,6 @@ var defaultColumnConfig = function defaultColumnConfig() {
 };
 function deriveFieldConfigs(specifiedFieldsPartial, schema) {
   var _schema$fields;
-  // Ugly: when adding a new item to an array from Plasmic Studio UI, no way to specify default values for the new item,
-  // so we have to do it here. The only one we need is the random key.
-  for (var _iterator = _createForOfIteratorHelperLoose(specifiedFieldsPartial), _step; !(_step = _iterator()).done;) {
-    var field = _step.value;
-    if (!field.key) {
-      field.key = mkShortId();
-    }
-  }
   var schemaFields = (_schema$fields = schema == null ? void 0 : schema.fields) != null ? _schema$fields : [];
   var fieldById = mkIdMap(schemaFields);
   var specifiedFieldIds = new Set(withoutNils(specifiedFieldsPartial.map(function (f) {
@@ -1105,6 +1066,7 @@ function deriveFieldConfigs(specifiedFieldsPartial, schema) {
   })));
   function defaultColumnConfigForField(field) {
     return _extends({}, defaultColumnConfig(), {
+      key: field.id,
       fieldId: field.id,
       title: field.label || field.id,
       expr: function expr(currentItem) {
@@ -1112,10 +1074,12 @@ function deriveFieldConfigs(specifiedFieldsPartial, schema) {
       }
     });
   }
-  var keptSpecifiedFields = specifiedFieldsPartial.flatMap(function (f) {
+  var keptSpecifiedFields = specifiedFieldsPartial.flatMap(function (f, index) {
     var fieldId = f.fieldId;
     if (!fieldId) {
-      return [_extends({}, defaultColumnConfig(), f)];
+      return [_extends({}, defaultColumnConfig(), {
+        key: index
+      }, f)];
     }
     var field = fieldById.get(fieldId);
     // Drop configs with fieldIds no longer in the data.
@@ -1209,8 +1173,13 @@ function normalizeData(rawData) {
     schema: schema
   });
 }
+/**
+ * Render booleans, objects, arrays, etc. as JSON repr.
+ */
+function safeRender(x) {
+  return x === undefined || x === null ? "" : typeof x === "string" ? x : typeof x === "number" ? x.toString() : JSON.stringify(x);
+}
 function RichTable(props) {
-  var _data$data;
   var className = props.className,
     _props$data = props.data,
     rawData = _props$data === void 0 ? {
@@ -1224,6 +1193,8 @@ function RichTable(props) {
         }]
       }
     } : _props$data,
+    _props$pagination = props.pagination,
+    pagination = _props$pagination === void 0 ? true : _props$pagination,
     defaultSize = props.defaultSize,
     fields = props.fields,
     setControlContextData = props.setControlContextData,
@@ -1231,10 +1202,12 @@ function RichTable(props) {
     addHref = props.addHref,
     actions = props.actions,
     customActionChildren = props.customActionChildren,
-    _props$showSearch = props.showSearch,
-    showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
     _props$pageSize = props.pageSize,
-    pageSize = _props$pageSize === void 0 ? 20 : _props$pageSize;
+    pageSize = _props$pageSize === void 0 ? 20 : _props$pageSize,
+    hideSearch = props.hideSearch,
+    hideDensity = props.hideDensity,
+    hideColumnPicker = props.hideColumnPicker,
+    hideExports = props.hideExports;
   var data = normalizeData(rawData);
   var _useState = useState(""),
     search = _useState[0],
@@ -1291,7 +1264,7 @@ function RichTable(props) {
             }, React.createElement(DataProvider, {
               name: "currentColumn",
               data: value
-            }, cconfig.expr ? cconfig.expr(record) : record)));
+            }, safeRender(cconfig.expr ? cconfig.expr(record) : value))));
           }
         };
         return columnDefinition;
@@ -1341,50 +1314,76 @@ function RichTable(props) {
         normalized: normalized,
         columnDefinitions: columnDefinitions
       };
-    }, [fields, data, setControlContextData, Math.random()]),
-    columnDefinitions = _React$useMemo.columnDefinitions;
+    }, [fields, data, setControlContextData]),
+    columnDefinitions = _React$useMemo.columnDefinitions,
+    normalized = _React$useMemo.normalized;
   var actionRef = useRef();
+  var _useState2 = useState(undefined),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var finalData = useMemo(function () {
+    var _data$data;
+    var filtered = data == null ? void 0 : (_data$data = data.data) == null ? void 0 : _data$data.filter(function (row) {
+      return fastStringify(Object.values(row)).toLowerCase().includes(search);
+    });
+    var sorted = state != null && state.sorter.column ?
+    // We use .sort() rather than sortBy to use localeCompare
+    function () {
+      var _normalized$find$expr;
+      var expr = (_normalized$find$expr = normalized.find(function (cconfig) {
+        var _state$sorter$column;
+        return cconfig.key === (state == null ? void 0 : (_state$sorter$column = state.sorter.column) == null ? void 0 : _state$sorter$column.key);
+      }).expr) != null ? _normalized$find$expr : function (x) {
+        return x;
+      };
+      return (filtered != null ? filtered : []).sort(function (aa, bb) {
+        var _expr, _expr2;
+        var a = (_expr = expr(aa)) != null ? _expr : null,
+          b = (_expr2 = expr(bb)) != null ? _expr2 : null;
+        // Default nil to '' here because A < null < z which is weird.
+        return typeof a === "string" ? a.localeCompare(b != null ? b : "") : typeof b === "string" ? -b.localeCompare(a != null ? a : "") : a - b;
+      });
+    }() : filtered;
+    var reversed = (state == null ? void 0 : state.sorter.order) === "descend" ? sorted == null ? void 0 : sorted.reverse() : sorted;
+    return reversed;
+  }, [data, normalized, state, search]);
   var isClient = useIsClient();
   if (!isClient) {
     return null;
   }
-  // return <NestedTest {...{ fields }} />;
   return React.createElement(React.Fragment, null, React.createElement(ProTable, {
     actionRef: actionRef,
     className: className,
     columns: columnDefinitions,
-    dataSource: data == null ? void 0 : (_data$data = data.data) == null ? void 0 : _data$data.filter(function (row) {
-      return fastStringify(Object.values(row)).toLowerCase().includes(search);
-    }),
+    onChange: function onChange(_pagination, _filters, sorter, _extra) {
+      setState({
+        sorter: sorter
+      });
+    },
+    dataSource: finalData,
     rowKey: "id",
     defaultSize: defaultSize,
-    // request={() =>
-    //   Promise.resolve({
-    //     data: data?.data?.filter((row) =>
-    //       fastStringify(row).toLowerCase().includes(search)
-    //     ),
-    //     success: true,
-    //   })
-    // }
     editable: {
       type: "multiple"
     },
     search: false,
     options: {
-      setting: {
+      setting: hideColumnPicker ? false : {
         listsHeight: 400
-      }
+      },
+      reload: false,
+      density: !hideDensity
     },
-    pagination: {
+    pagination: pagination ? {
       pageSize: pageSize,
       onChange: function onChange(page) {
         return console.log(page);
       }
-    },
+    } : false,
     dateFormatter: "string",
     headerTitle: title,
     toolbar: {
-      search: showSearch ? {
+      search: !hideSearch ? {
         value: search,
         onChange: function onChange(e) {
           return setSearch(e.target.value);
@@ -1399,7 +1398,7 @@ function RichTable(props) {
         icon: React.createElement(PlusOutlined, null),
         type: "primary",
         href: addHref
-      }, "Add"), React.createElement(Dropdown, {
+      }, "Add"), !hideExports && React.createElement(Dropdown, {
         key: "menu",
         menu: {
           items: [{
@@ -1514,17 +1513,15 @@ var dataTableMeta = {
       options: ["large", "middle", "small"],
       defaultValueHint: "large"
     },
-    // TODO
-    // pagination: {
-    //   type: "boolean",
-    //   defaultValueHint: true,
-    // },
     pageSize: {
       type: "number",
       defaultValueHint: 20
     },
     fields: {
       type: "array",
+      hidden: function hidden(ps) {
+        return !ps.data;
+      },
       unstable__keyFunc: function unstable__keyFunc(x) {
         return x.key;
       },
@@ -1594,6 +1591,27 @@ var dataTableMeta = {
           }
         }
       }
+    },
+    pagination: {
+      type: "boolean",
+      advanced: true,
+      defaultValueHint: true
+    },
+    hideSearch: {
+      type: "boolean",
+      advanced: true
+    },
+    hideExports: {
+      type: "boolean",
+      advanced: true
+    },
+    hideDensity: {
+      type: "boolean",
+      advanced: true
+    },
+    hideColumnPicker: {
+      type: "boolean",
+      advanced: true
     }
   },
   importName: "RichTable",