@plasmicpkgs/plasmic-rich-components 1.0.169 → 1.0.170

package/skinny/rich-table/RichTable.d.ts

@@ -0,0 +1,46 @@
+import type { SizeType } from "antd/es/config-provider/SizeContext";
+import type { GetRowKey } from "antd/es/table/interface";
+import React, { ReactNode } from "react";
+import { BaseColumnConfig, FieldfulProps, RowFunc } from "../field-mappings";
+import { RowAction } from "../field-react-utils";
+export interface Action {
+    type: "edit" | "view" | "delete" | "custom";
+    label?: string;
+    moreMenu?: boolean;
+}
+export interface RichTableProps extends FieldfulProps<TableColumnConfig> {
+    defaultSize?: SizeType;
+    pagination?: boolean;
+    canSelectRows?: "none" | "click" | "single" | "multiple";
+    selectedRowKey?: string;
+    selectedRowKeys?: string[];
+    onRowSelectionChanged?: (rowKeys: string[], rows: any[]) => void;
+    onRowClick?: (rowKey: string, row: any, event: React.MouseEvent) => void;
+    rowKey?: string | GetRowKey<any>;
+    rowActions?: RowAction[];
+    title?: ReactNode;
+    addHref?: string;
+    actions?: Action[];
+    customActionChildren?: ReactNode;
+    pageSize?: number;
+    hideSearch?: boolean;
+    hideDensity?: boolean;
+    hideColumnPicker?: boolean;
+    hideExports?: boolean;
+    hideSelectionBar?: boolean;
+    scopeClassName?: string;
+    themeResetClassName?: string;
+}
+export declare function RichTable(props: RichTableProps): React.JSX.Element | null;
+interface StyleConfig {
+    styles: Record<string, any>;
+    align: "left" | "center" | "right";
+    freeze: "off" | "left" | "right";
+}
+export type TableColumnConfig = BaseColumnConfig & {
+    isEditableExpr: RowFunc<boolean>;
+    disableSorting: boolean;
+    sortByExpr?: RowFunc<any>;
+    formatting: StyleConfig;
+};
+export {};

package/skinny/rich-table/index.cjs.js

@@ -0,0 +1,598 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var commonPropTypes = require('../common-prop-types-5f1fd4b0.cjs.js');
+var formatting = require('../formatting-327e0658.cjs.js');
+var utils = require('../utils-65c486f0.cjs.js');
+var icons = require('@ant-design/icons');
+var proComponents = require('@ant-design/pro-components');
+var dataSources = require('@plasmicapp/data-sources');
+var antd = require('antd');
+var csvWriterBrowser = require('csv-writer-browser');
+var fastStringify = require('fast-stringify');
+var React = require('react');
+var common = require('../common-e1d76791.cjs.js');
+var fieldReactUtils = require('../field-react-utils-c717ec94.cjs.js');
+require('@plasmicpkgs/luxon-parser');
+require('lodash/get');
+require('@plasmicapp/host/registerComponent');
+require('@plasmicapp/host/registerGlobalContext');
+require('dayjs');
+require('dayjs/plugin/customParseFormat');
+require('@ctrl/tinycolor');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var fastStringify__default = /*#__PURE__*/_interopDefault(fastStringify);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+function RichTable(props) {
+  const {
+    className,
+    data: rawData = {
+      data: [],
+      schema: {
+        id: "inferred",
+        fields: [
+          {
+            id: "id",
+            type: "string",
+            readOnly: false
+          }
+        ]
+      }
+    },
+    // children,
+    pagination = true,
+    defaultSize,
+    title,
+    addHref,
+    pageSize = 10,
+    hideSearch,
+    hideDensity = true,
+    hideColumnPicker,
+    hideExports,
+    hideSelectionBar = true,
+    rowKey,
+    scopeClassName
+  } = props;
+  const normalizedData = dataSources.useNormalizedData(rawData);
+  const data = React.useMemo(() => {
+    if (!(normalizedData == null ? void 0 : normalizedData.data)) {
+      return normalizedData;
+    }
+    return __spreadProps$1(__spreadValues$1({}, normalizedData), { data: fieldReactUtils.tagDataArray(normalizedData.data) });
+  }, [normalizedData]);
+  const { columnDefinitions, normalized } = useColumnDefinitions(data, props);
+  const actionRef = React.useRef();
+  const { finalData, search, setSearch, setSortState } = fieldReactUtils.useSortedFilteredData(
+    data,
+    normalized
+  );
+  const rowSelectionProps = useRowSelectionProps(data, props);
+  const isClient = common.useIsClient();
+  if (!isClient) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: `${className} ${scopeClassName != null ? scopeClassName : ""}` }, /* @__PURE__ */ React__default.default.createElement(utils.ErrorBoundary, { canvasEnvId: props["data-plasmic-canvas-envs"] }, /* @__PURE__ */ React__default.default.createElement(
+    proComponents.ProTable,
+    __spreadProps$1(__spreadValues$1({
+      ErrorBoundary: false,
+      rowClassName: props.onRowClick || props.canSelectRows === "click" ? "plasmic-table-row-clickable" : void 0,
+      actionRef,
+      columns: columnDefinitions,
+      onChange: (_pagination, _filters, sorter, _extra) => {
+        setSortState({ sorter });
+      },
+      style: {
+        width: "100%"
+      },
+      cardProps: {
+        ghost: true
+      }
+    }, rowSelectionProps), {
+      dataSource: finalData,
+      rowKey: fieldReactUtils.deriveRowKey(data, rowKey),
+      defaultSize,
+      editable: { type: "multiple" },
+      search: false,
+      options: {
+        setting: hideColumnPicker ? false : {
+          listsHeight: 400
+        },
+        reload: false,
+        density: !hideDensity
+      },
+      pagination: pagination ? {
+        pageSize,
+        onChange: (page) => console.log(page),
+        showSizeChanger: false
+      } : false,
+      dateFormatter: "string",
+      headerTitle: title,
+      toolbar: {
+        search: !hideSearch ? {
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          onSearch: () => {
+            return;
+          },
+          placeholder: "Search"
+        } : void 0
+      },
+      toolBarRender: () => [
+        addHref && /* @__PURE__ */ React__default.default.createElement(
+          antd.Button,
+          {
+            key: "button",
+            icon: /* @__PURE__ */ React__default.default.createElement(icons.PlusOutlined, null),
+            type: "primary",
+            href: addHref
+          },
+          "Add"
+        ),
+        !hideExports && /* @__PURE__ */ React__default.default.createElement(ExportMenu, { data })
+      ].filter((x) => !!x)
+    })
+  )), /* @__PURE__ */ React__default.default.createElement(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `
+          :where(.css-dev-only-do-not-override-1p704s4).ant-pro-table-column-setting-overlay .ant-tree-treenode:hover .ant-pro-table-column-setting-list-item-option {
+            display: none;
+          }
+          .plasmic-table-row-clickable {
+            cursor: pointer;
+          }
+          .ant-pro-table-list-toolbar-right {
+            flex-wrap: initial;
+            flex-shrink: 0;
+          }
+          .ant-pro-table, .ant-pro-table > .ant-pro-card, .ant-pro-table .ant-table-wrapper, .ant-pro-table .ant-spin-nested-loading, .ant-pro-table .ant-table-container {
+            height: 100%;
+          }
+          .ant-pro-table .ant-spin-container {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+          }
+          .ant-pro-table .ant-table {
+            flex-grow: 1;
+            min-height: 0;
+          }
+          .ant-pro-table .ant-pagination {
+            flex-shrink: 0;
+          }
+          .ant-pro-table .ant-table-content {
+            overflow: auto !important;
+            height: 100%;
+          }
+          .ant-pro-table > .ant-pro-card > .ant-pro-card-body {
+            display: flex;
+            flex-direction: column;
+          }
+          .ant-pro-table .ant-table-wrapper {
+            flex-grow: 1;
+            min-height: 0;
+          }
+          .ant-pro-table .ant-table-thead > tr > th, .ant-pro-table .ant-table-thead > tr > td.ant-table-selection-column {
+            position: sticky;
+            top: 0;
+            z-index: 2;
+          }
+          .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-left, .ant-pro-table .ant-table-thead > tr > th.ant-table-cell-fix-right {
+            z-index: 3;
+          }
+          .ant-pro-table .ant-table-tbody > tr > td {
+            z-index: 0;
+          }
+          .ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-left,.ant-pro-table .ant-table-tbody > tr > td.ant-table-cell-fix-right {
+            z-index: 1;
+          }
+          ${scopeClassName && hideSelectionBar ? `
+          .${scopeClassName} .ant-pro-table-alert {
+            display: none;
+          }
+          ` : ""}
+      `
+      }
+    }
+  ));
+}
+const defaultColumnConfig = () => ({
+  key: utils.mkShortId(),
+  isEditableExpr: () => false,
+  disableSorting: false,
+  sortByExpr: void 0,
+  isHidden: false,
+  formatting: {
+    styles: {},
+    align: "left",
+    freeze: "off"
+  },
+  dataType: "auto"
+});
+function useColumnDefinitions(data, props) {
+  const { fields, setControlContextData, rowActions } = props;
+  return React__default.default.useMemo(() => {
+    const schema = data == null ? void 0 : data.schema;
+    if (!data || !schema) {
+      return { normalized: [], columnDefinitions: [] };
+    }
+    const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(fields != null ? fields : [], schema, (field) => __spreadValues$1(__spreadValues$1({}, defaultColumnConfig()), field && {
+      key: field.id,
+      fieldId: field.id,
+      title: field.label || field.id,
+      expr: (currentItem) => currentItem[field.id]
+    }));
+    setControlContextData == null ? void 0 : setControlContextData(__spreadProps$1(__spreadValues$1({}, data), { mergedFields, minimalFullLengthFields }));
+    const normalized = mergedFields;
+    const columnDefinitions = normalized.filter((cconfig) => !cconfig.isHidden).map((cconfig, _columnIndex, _columnsArray) => {
+      const columnDefinition = {
+        dataIndex: cconfig.fieldId,
+        title: cconfig.title,
+        // dataIndex: cconfig,
+        key: cconfig.key,
+        valueType: formatting.deriveValueType(cconfig),
+        // To come later
+        readonly: false,
+        sorter: true,
+        copyable: false,
+        ellipsis: false,
+        tip: void 0,
+        formItemProps: {
+          rules: []
+        },
+        disable: false,
+        valueEnum: void 0,
+        search: void 0,
+        hideInSearch: false,
+        renderFormItem: (_, { defaultRender }) => {
+          return defaultRender(_);
+        },
+        render: (value, record, rowIndex) => {
+          return formatting.renderValue(record, cconfig);
+        }
+      };
+      return columnDefinition;
+    });
+    const rowKey = props.rowKey;
+    if (rowActions && rowActions.length > 0) {
+      columnDefinitions.push({
+        title: "Actions",
+        valueType: "option",
+        key: "__plasmicActions",
+        fixed: "right",
+        className: props.themeResetClassName,
+        render: (_text, row) => [
+          ...fieldReactUtils.renderActions(rowActions, row, data, rowKey)
+        ]
+      });
+    }
+    return { normalized, columnDefinitions };
+  }, [fields, data, setControlContextData, rowActions]);
+}
+function useRowSelectionProps(data, props) {
+  const {
+    canSelectRows,
+    selectedRowKey,
+    selectedRowKeys,
+    onRowSelectionChanged,
+    rowKey,
+    onRowClick
+  } = props;
+  const deriveSelectedRowKeys = () => {
+    if (!canSelectRows || canSelectRows === "none" || !fieldReactUtils.deriveRowKey(data, rowKey)) {
+      return [];
+    }
+    if (canSelectRows === "multiple") {
+      return selectedRowKeys != null ? selectedRowKeys : [];
+    } else if (selectedRowKey) {
+      return [selectedRowKey];
+    } else {
+      return [];
+    }
+  };
+  const rowSelection = canSelectRows && canSelectRows !== "none" ? __spreadValues$1({
+    type: canSelectRows === "single" || canSelectRows === "click" ? "radio" : "checkbox",
+    selectedRowKeys: deriveSelectedRowKeys(),
+    onChange: (rowKeys, rows) => {
+      onRowSelectionChanged == null ? void 0 : onRowSelectionChanged(rowKeys, rows);
+    },
+    alwaysShowAlert: true
+  }, canSelectRows === "click" && {
+    renderCell: () => null,
+    columnWidth: 0,
+    columnTitle: null,
+    hideSelectAll: true
+  }) : void 0;
+  return {
+    rowSelection,
+    onRow: (row) => ({
+      onClick: (event) => {
+        const key = fieldReactUtils.deriveKeyOfRow(row, fieldReactUtils.deriveRowKey(data, rowKey));
+        if (key != null && !utils.isInteractable(event.target)) {
+          if (canSelectRows === "click") {
+            onRowSelectionChanged == null ? void 0 : onRowSelectionChanged([key], [row]);
+          }
+          onRowClick == null ? void 0 : onRowClick(key, row, event);
+        }
+      }
+    })
+  };
+}
+function ExportMenu(props) {
+  const { data } = props;
+  return /* @__PURE__ */ React__default.default.createElement(
+    antd.Dropdown,
+    {
+      key: "menu",
+      menu: {
+        items: [
+          {
+            label: "Download as CSV",
+            key: "csv",
+            onClick: async () => {
+              var _a, _b;
+              const writer = csvWriterBrowser.createObjectCsvStringifier({
+                header: (_b = (_a = data == null ? void 0 : data.schema) == null ? void 0 : _a.fields.map((f) => ({
+                  id: f.id,
+                  title: f.id
+                }))) != null ? _b : []
+              });
+              const dataStr = writer.getHeaderString() + writer.stringifyRecords(data == null ? void 0 : data.data);
+              const filename = "data.csv";
+              const blob = new Blob([dataStr], {
+                type: "text/csv;charset=utf-8;"
+              });
+              if (navigator.msSaveBlob) {
+                navigator.msSaveBlob(blob, filename);
+              } else {
+                const link = document.createElement("a");
+                if (link.download !== void 0) {
+                  const url = URL.createObjectURL(blob);
+                  link.setAttribute("href", url);
+                  link.setAttribute("download", filename);
+                  link.style.visibility = "hidden";
+                  document.body.appendChild(link);
+                  link.click();
+                  document.body.removeChild(link);
+                }
+              }
+            }
+          },
+          {
+            label: "Download as JSON",
+            key: "json",
+            onClick: () => {
+              const dataStr = fastStringify__default.default(data == null ? void 0 : data.data);
+              const dataUri = `data:application/json;charset=utf-8, ${encodeURIComponent(
+                dataStr
+              )}`;
+              const exportFileDefaultName = "data.json";
+              const linkElement = document.createElement("a");
+              linkElement.setAttribute("href", dataUri);
+              linkElement.setAttribute("download", exportFileDefaultName);
+              linkElement.click();
+            }
+          }
+        ]
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement(antd.Button, null, /* @__PURE__ */ React__default.default.createElement(icons.EllipsisOutlined, null))
+  );
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const tableHelpers = {
+  states: {
+    selectedRow: {
+      onChangeArgsToValue: (rowKeys, rows) => {
+        return rows[0];
+      }
+    },
+    selectedRows: {
+      onChangeArgsToValue: (rowKeys, rows) => {
+        return rows;
+      }
+    },
+    selectedRowKey: {
+      onChangeArgsToValue: (rowKeys, rows) => {
+        return rowKeys[0];
+      }
+    },
+    selectedRowKeys: {
+      onChangeArgsToValue: (rowKeys, rows) => {
+        return rowKeys;
+      }
+    }
+  }
+};
+const dataTableMeta = {
+  name: "hostless-rich-table",
+  displayName: "Table",
+  defaultStyles: {
+    width: "stretch",
+    padding: "16px",
+    maxHeight: "100%"
+  },
+  props: __spreadProps(__spreadValues({
+    data: commonPropTypes.dataProp(),
+    fields: formatting.buildFieldsPropType({}),
+    canSelectRows: {
+      type: "choice",
+      displayName: "Select rows?",
+      options: [
+        { label: "No", value: "none" },
+        { label: "By clicking a row", value: "click" },
+        { label: "Using radio buttons", value: "single" },
+        { label: "Using checkboxes", value: "multiple" }
+      ],
+      defaultValueHint: "none",
+      description: "Lets user select table rows by clicking on a row, or using radio buttons, or checkboxes if multiple rows can be selected together. If you have interactive elements in your row and you don't want clicking on them to select the row, you may use radio buttons instead."
+    },
+    rowKey: {
+      type: "string",
+      displayName: "Row key",
+      helpText: "Column key to use as row key; can also be a function that takes in a row and returns a key value",
+      hidden: (ps) => !ps.canSelectRows || ps.canSelectRows === "none"
+    },
+    selectedRowKey: {
+      type: "string",
+      displayName: "Selected Row Key",
+      hidden: (ps) => ps.canSelectRows !== "single" && ps.canSelectRows !== "click",
+      advanced: true
+    },
+    selectedRowKeys: {
+      type: "array",
+      displayName: "Selected Row Keys",
+      hidden: (ps) => ps.canSelectRows !== "multiple",
+      advanced: true
+    },
+    onRowSelectionChanged: {
+      type: "eventHandler",
+      displayName: "On row selection changed",
+      argTypes: [
+        { name: "rowKeys", type: "object" },
+        { name: "rows", type: "object" }
+      ]
+    },
+    onRowClick: commonPropTypes.onRowClickProp(),
+    rowActions: commonPropTypes.rowActionsProp(),
+    defaultSize: {
+      displayName: "Density",
+      type: "choice",
+      options: [
+        {
+          value: "large",
+          label: "Larger"
+        },
+        {
+          value: "middle",
+          label: "Medium"
+        },
+        {
+          value: "small",
+          label: "Compact"
+        }
+      ],
+      defaultValueHint: "large",
+      advanced: true
+    }
+  }, commonPropTypes.commonProps()), {
+    hideExports: {
+      type: "boolean",
+      description: "Hides the button for exporting table data to CSV",
+      advanced: true
+    },
+    hideDensity: {
+      type: "boolean",
+      description: "Hides the control for changing the density of the table",
+      advanced: true,
+      defaultValueHint: true
+    },
+    hideColumnPicker: {
+      type: "boolean",
+      description: "Hides the control for reordering and pinning columns",
+      advanced: true
+    },
+    hideSelectionBar: {
+      type: "boolean",
+      description: "Hides the toolbar that allows the user to clear selection",
+      advanced: true,
+      hidden: (ps) => !ps.canSelectRows || ps.canSelectRows === "none",
+      defaultValueHint: true
+    },
+    scopeClassName: {
+      type: "styleScopeClass",
+      scopeName: "instance"
+    },
+    themeResetClassName: {
+      type: "themeResetClass",
+      targetAllTags: true
+    }
+  }),
+  states: {
+    selectedRowKey: __spreadValues({
+      type: "writable",
+      valueProp: "selectedRowKey",
+      onChangeProp: "onRowSelectionChanged",
+      variableType: "text",
+      hidden: (ps) => !(ps.canSelectRows === "click" || ps.canSelectRows === "single")
+    }, tableHelpers.states.selectedRowKey),
+    selectedRowKeys: __spreadValues({
+      type: "writable",
+      valueProp: "selectedRowKeys",
+      onChangeProp: "onRowSelectionChanged",
+      variableType: "array",
+      hidden: (ps) => !(ps.canSelectRows === "multiple")
+    }, tableHelpers.states.selectedRowKeys),
+    selectedRow: __spreadValues({
+      type: "readonly",
+      onChangeProp: "onRowSelectionChanged",
+      variableType: "object",
+      hidden: (ps) => !(ps.canSelectRows === "click" || ps.canSelectRows === "single")
+    }, tableHelpers.states.selectedRow),
+    selectedRows: __spreadValues({
+      type: "readonly",
+      onChangeProp: "onRowSelectionChanged",
+      variableType: "array",
+      hidden: (ps) => !(ps.canSelectRows === "multiple")
+    }, tableHelpers.states.selectedRows)
+  },
+  componentHelpers: {
+    helpers: tableHelpers,
+    importName: "tableHelpers",
+    importPath: "@plasmicpkgs/plasmic-rich-components/skinny/rich-table"
+  },
+  importName: "RichTable",
+  importPath: "@plasmicpkgs/plasmic-rich-components/skinny/rich-table"
+};
+function registerRichTable(loader) {
+  utils.registerComponentHelper(loader, RichTable, dataTableMeta);
+}
+
+exports.RichTable = RichTable;
+exports.default = RichTable;
+exports.registerRichTable = registerRichTable;
+exports.tableHelpers = tableHelpers;
+//# sourceMappingURL=index.cjs.js.map