@pisell/private-materials 3.1.2 → 3.2.1

package/lib/components/workSpaceList/components/Card/constants.js

@@ -0,0 +1,85 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/workSpaceList/components/Card/constants.tsx
+var constants_exports = {};
+__export(constants_exports, {
+  items: () => items
+});
+module.exports = __toCommonJS(constants_exports);
+var import_react = __toESM(require("react"));
+var import_icon = require("@pisell/icon");
+var items = [
+  {
+    key: "rename",
+    label: "Rename base",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icon.Edit03, null)
+  },
+  /*
+  {
+    key: 'share',
+    label: 'Share base',
+    icon: <InfoCircleOutlined />,
+  },
+  {
+    key: 'duplicate',
+    label: 'Duplicate base',
+    icon: <CopyOutlined />,
+  },
+  {
+    key: 'move',
+    label: 'Move base',
+    icon: <VerticalLeftOutlined />,
+  },
+  */
+  {
+    key: "customize",
+    label: "Customize appearance",
+    icon: /* @__PURE__ */ import_react.default.createElement(import_icon.MagicWand02, null)
+  }
+  // {
+  //   type: 'divider',
+  // },
+  // {
+  //   key: 'settings',
+  //   label: 'Settings',
+  //   icon: <SettingOutlined />,
+  // },
+  // {
+  //   type: 'divider',
+  // },
+  // {
+  //   key: 'delete',
+  //   label: 'Delete base',
+  //   icon: <Trash01 />,
+  // },
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  items
+});

package/lib/components/workSpaceList/components/Card/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.less';
+export interface CardProps {
+    name: string;
+    describe: string;
+    created_at: string;
+    icon: string;
+    color: string;
+    onRefresh?: () => void;
+    onDeleteBase?: (id: number) => void;
+    onUpdateBase?: (params: {
+        name?: string;
+        color?: string;
+        icon?: string;
+        id?: number;
+    }) => void;
+    id: number;
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/lib/components/workSpaceList/components/Card/index.js

@@ -0,0 +1,224 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/workSpaceList/components/Card/index.tsx
+var Card_exports = {};
+__export(Card_exports, {
+  default: () => Card_default
+});
+module.exports = __toCommonJS(Card_exports);
+var import_AppearanceEdit = __toESM(require("./../AppearanceEdit"));
+var import_AppearanceShow = __toESM(require("./../AppearanceShow"));
+var import_Modal = __toESM(require("./../Modal"));
+var import_antdConfirmPromise = require("./../Modal/antdConfirmPromise");
+var import_constants = require("./../Card/constants");
+var import_EditableString = __toESM(require("./../EditableString"));
+var import_icons = require("@ant-design/icons");
+var import_useEngineContext = __toESM(require("./../../../../hooks/useEngineContext"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+var stopPropagation = (e) => {
+  e.stopPropagation();
+};
+var titleMap = {
+  duplicate: () => `Duplicate "Untitled Base"`,
+  move: "Move Untitled Base to another workspace"
+};
+var DuplicateContent = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "duplicate-content-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "appearance-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_AppearanceShow.default, { icon: "Un", color: "#7F56D9", size: 72, fontSize: 30 })), /* @__PURE__ */ import_react.default.createElement(import_materials.Input, null), /* @__PURE__ */ import_react.default.createElement(import_materials.Space, { className: "duplicate-records" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Switch, { defaultChecked: true }), /* @__PURE__ */ import_react.default.createElement("span", null, "Duplicate records")));
+};
+var MoveContent = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "move-content-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", null, "Choose workspace"), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Select,
+    {
+      className: "select",
+      options: [
+        {
+          label: "Workspace 1",
+          value: 1
+        },
+        {
+          label: "Workspace 2",
+          value: 2
+        }
+      ]
+    }
+  ));
+};
+var Card = (props) => {
+  const {
+    name,
+    describe,
+    created_at,
+    icon,
+    color,
+    id,
+    onDeleteBase,
+    onUpdateBase
+  } = props;
+  const context = (0, import_useEngineContext.default)();
+  const { pushV2AdminPage } = context.appHelper.utils.getApp().history;
+  const [editing, setEditing] = (0, import_react.useState)(false);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [popoverOpen, setPopoverOpen] = (0, import_react.useState)(false);
+  const [currentType, setCurrentType] = (0, import_react.useState)("");
+  const cardRef = (0, import_react.useRef)(null);
+  const appearanceEditRef = (0, import_react.useRef)(null);
+  const onClick = async ({ key, domEvent }) => {
+    domEvent.stopPropagation();
+    if (key === "rename") {
+      setEditing(true);
+    } else if (key === "share") {
+    } else if (key === "duplicate") {
+      setOpen(true);
+      setCurrentType("duplicate");
+    } else if (key === "move") {
+      setOpen(true);
+      setCurrentType("move");
+    } else if (key === "customize") {
+      setPopoverOpen(true);
+    } else if (key === "settings") {
+    } else if (key === "delete") {
+      await (0, import_antdConfirmPromise.antdConfirmPromise)({
+        type: "confirm",
+        title: "Are you sure you want to delete Untitled Base?",
+        content: "This operation can cause all data in the Base to be deleted.",
+        okText: "Delete base"
+      });
+      onDeleteBase == null ? void 0 : onDeleteBase(id);
+    }
+  };
+  const handleNameChange = (val) => {
+    setEditing(false);
+    if (name === val) return;
+    onUpdateBase == null ? void 0 : onUpdateBase({
+      id,
+      name: val
+    });
+  };
+  const handleOk = () => {
+  };
+  const title = (0, import_react.useMemo)(() => {
+    const result = titleMap[currentType];
+    return (0, import_utils.isFunction)(result) ? result() : result;
+  }, [currentType]);
+  const content = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_AppearanceEdit.default,
+      {
+        name,
+        color,
+        icon,
+        isShowName: false,
+        colorTitle: "Edit icon appearance",
+        ref: appearanceEditRef
+      }
+    );
+  }, [name, color, icon]);
+  const handleOpenChange = async (o) => {
+    var _a;
+    if (!o) {
+      setPopoverOpen(o);
+      const detail = (_a = appearanceEditRef.current) == null ? void 0 : _a.getDetail();
+      const newBase = {
+        id,
+        color: detail == null ? void 0 : detail.color,
+        icon: (detail == null ? void 0 : detail.icon) || "",
+        name: detail == null ? void 0 : detail.name
+      };
+      if (JSON.stringify(newBase) === JSON.stringify({
+        id,
+        color,
+        icon: icon || "",
+        name
+      }))
+        return;
+      onUpdateBase == null ? void 0 : onUpdateBase({
+        id,
+        color: detail == null ? void 0 : detail.color,
+        icon: detail == null ? void 0 : detail.icon,
+        name: detail == null ? void 0 : detail.name
+      });
+    }
+  };
+  const handleCardClick = () => {
+    pushV2AdminPage(`/lowcode/${id}`);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Popover,
+    {
+      placement: "bottomLeft",
+      content,
+      open: popoverOpen,
+      arrow: false,
+      onOpenChange: handleOpenChange,
+      destroyTooltipOnHide: true,
+      trigger: "click"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "card-wrap", ref: cardRef, onClick: handleCardClick }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_AppearanceShow.default,
+      {
+        icon,
+        color,
+        name,
+        size: 72,
+        fontSize: 30
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "right" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "line-1" }, /* @__PURE__ */ import_react.default.createElement("span", { onClick: editing && stopPropagation }, /* @__PURE__ */ import_react.default.createElement(
+      import_EditableString.default,
+      {
+        editing,
+        editable: false,
+        text: name || "",
+        onChange: handleNameChange
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Dropdown,
+      {
+        menu: { items: import_constants.items, onClick },
+        placement: "bottomRight"
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "operate-wrap", onClick: stopPropagation }, /* @__PURE__ */ import_react.default.createElement(import_icons.EllipsisOutlined, null))
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "line-2" }, created_at)), /* @__PURE__ */ import_react.default.createElement(
+      import_Modal.default,
+      {
+        open,
+        title,
+        width: 400,
+        evenlyButton: true,
+        onCancel: () => setOpen(false),
+        onOk: handleOk
+      },
+      currentType === "duplicate" && /* @__PURE__ */ import_react.default.createElement(DuplicateContent, null),
+      currentType === "move" && /* @__PURE__ */ import_react.default.createElement(MoveContent, null)
+    ))
+  );
+};
+var Card_default = Card;

package/lib/components/workSpaceList/components/Card/index.less

@@ -0,0 +1,68 @@
+.card-wrap {
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid var(--gray-300, #d0d5dd);
+  background: var(--base-white, #fff);
+  display: flex;
+  cursor: pointer;
+  .right {
+    margin-left: 20px;
+    padding: 8px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    .line-1 {
+      color: var(--gray-900, #101828);
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      .operate-wrap {
+        display: flex;
+        visibility: hidden;
+        align-items: center;
+        justify-content: center;
+        height: 36px;
+        width: 36px;
+        border-radius: 8px;
+        background: var(--gray-50, #f9fafb);
+      }
+    }
+    .line-2 {
+      color: var(--gray-600, #475467);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+  &:hover {
+    .operate-wrap {
+      visibility: visible !important;
+    }
+  }
+}
+.duplicate-content-wrap {
+  padding-top: 24px;
+  .appearance-wrap {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  .duplicate-records {
+    margin: 32px 0;
+    display: flex;
+    align-items: center;
+  }
+}
+.move-content-wrap {
+  margin-top: 20px;
+  .select {
+    width: 100%;
+    margin-top: 6px;
+    margin-bottom: 20px;
+  }
+}

package/lib/components/workSpaceList/components/CardList/index.d.ts

@@ -0,0 +1,17 @@
+import { CardProps } from './../Card';
+import { CreateBaseModalProps } from './../CreateBaseModal';
+import React from 'react';
+import './index.less';
+export interface CardListProps {
+    /** 等待数据接口修改ts类型 */
+    data: any[];
+    onAddBase: CreateBaseModalProps['onAddBase'];
+    onRefresh?: () => void;
+    onDeleteBase?: (id: number) => void;
+    onUpdateBase?: CardProps['onUpdateBase'];
+    onLoadMore?: () => void;
+    scrollRef?: any;
+    isDetail: boolean;
+}
+declare const CardList: React.FC<CardListProps>;
+export default CardList;

package/lib/components/workSpaceList/components/CardList/index.js

@@ -0,0 +1,89 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/workSpaceList/components/CardList/index.tsx
+var CardList_exports = {};
+__export(CardList_exports, {
+  default: () => CardList_default
+});
+module.exports = __toCommonJS(CardList_exports);
+var import_Card = __toESM(require("./../Card"));
+var import_CreateBaseModal = __toESM(require("./../CreateBaseModal"));
+var import_materials = require("@pisell/materials");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+var Empty = (props) => {
+  const { onAddBase } = props;
+  const [open, setOpen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "styles-empty" }, /* @__PURE__ */ import_react.default.createElement("div", null, "This workspace is empty"), /* @__PURE__ */ import_react.default.createElement("div", null, "Get started by creating a new base"), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "primary", onClick: () => setOpen(true) }, "Create a base"), /* @__PURE__ */ import_react.default.createElement(
+    import_CreateBaseModal.default,
+    {
+      onAddBase,
+      open,
+      onCancel: () => setOpen(false)
+    }
+  ));
+};
+var CardList = (props) => {
+  const {
+    data,
+    onAddBase,
+    onRefresh,
+    onDeleteBase,
+    onUpdateBase,
+    scrollRef,
+    isDetail
+  } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)({
+        "card-list-wrap": !!data.length,
+        "card-list-in-workspace": !isDetail
+      }),
+      ref: scrollRef
+    },
+    !data.length ? /* @__PURE__ */ import_react.default.createElement(Empty, { onAddBase }) : data.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      import_Card.default,
+      {
+        id: item.id,
+        key: item.name,
+        icon: item.icon,
+        color: item.color,
+        describe: item.describe,
+        name: item.name,
+        created_at: item.created_at,
+        onRefresh,
+        onDeleteBase,
+        onUpdateBase
+      }
+    ))
+  );
+};
+var CardList_default = CardList;

package/lib/components/workSpaceList/components/CardList/index.less

@@ -0,0 +1,21 @@
+.card-list-wrap {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(286px, auto));
+  grid-gap: 24px;
+  overflow: auto;
+}
+.card-list-in-workspace {
+  max-height: calc((114px + 24px) * 2);
+  overflow: hidden;
+}
+.styles-empty {
+  text-align: center;
+  color: var(--gray-600, #475467);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  & > div {
+    margin-bottom: 24px;
+  }
+}

package/lib/components/workSpaceList/components/CreateBaseModal/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CreateBaseModalProps {
+    open: boolean;
+    onCancel: () => void;
+    onAddBase: (params: {
+        name: string;
+        icon: string;
+        color: string;
+    }) => void;
+}
+declare const CreateBaseModal: React.FC<CreateBaseModalProps>;
+export default CreateBaseModal;

package/lib/components/workSpaceList/components/CreateBaseModal/index.js

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/workSpaceList/components/CreateBaseModal/index.tsx
+var CreateBaseModal_exports = {};
+__export(CreateBaseModal_exports, {
+  default: () => CreateBaseModal_default
+});
+module.exports = __toCommonJS(CreateBaseModal_exports);
+var import_AppearanceEdit = __toESM(require("./../AppearanceEdit"));
+var import_Modal = __toESM(require("../Modal"));
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var CreateBaseModal = (props) => {
+  const { open, onCancel, onAddBase } = props;
+  const appearanceEditRef = (0, import_react.useRef)(null);
+  const handleAdd = async () => {
+    var _a;
+    const { name, color, icon } = ((_a = appearanceEditRef.current) == null ? void 0 : _a.getDetail()) || {};
+    if (!name) {
+      import_antd.message.error("Please fill in the name");
+      return;
+    }
+    await onAddBase({
+      name,
+      color,
+      icon
+    });
+    onCancel();
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Modal.default,
+    {
+      open,
+      title: "Create a base",
+      evenlyButton: false,
+      onCancel,
+      onOk: handleAdd,
+      okText: "Create",
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_AppearanceEdit.default, { style: { padding: "20px 0px" }, ref: appearanceEditRef })
+  );
+};
+var CreateBaseModal_default = CreateBaseModal;

package/lib/components/workSpaceList/components/EditableString/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+interface EditableString {
+    text: string;
+    style?: React.CSSProperties;
+    onChange?: (value: string) => void;
+    editable?: boolean;
+    editing?: boolean;
+    maxLength?: number;
+    className?: string;
+    ellipsis?: {
+        row: number;
+    };
+}
+/**
+ * 可编辑string
+ * @param props
+ * @constructor
+ */
+declare const EditableString: React.FC<EditableString>;
+export default EditableString;