@pisell/private-materials 6.6.7 → 6.6.9

package/dist/lib/components/workSpaceList/components/AppearanceEdit/constants.js

@@ -0,0 +1,60 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+let __pisell_icon = require("@pisell/icon");
+
+//#region src/components/workSpaceList/components/AppearanceEdit/constants.ts
+const icons = [
+	{
+		name: "bank",
+		icon: __pisell_icon.Bank
+	},
+	{
+		name: "bank-note-02",
+		icon: __pisell_icon.BankNote02
+	},
+	{
+		name: "coins-04",
+		icon: __pisell_icon.Coins04
+	},
+	{
+		name: "coins-hand",
+		icon: __pisell_icon.CoinsHand
+	},
+	{
+		name: "coins-swap-02",
+		icon: __pisell_icon.CoinsSwap02
+	},
+	{
+		name: "credit-card-02",
+		icon: __pisell_icon.CreditCard02
+	},
+	{
+		name: "cryptocurrency-01",
+		icon: __pisell_icon.Cryptocurrency01
+	},
+	{
+		name: "currency-bitcoin",
+		icon: __pisell_icon.CurrencyBitcoin
+	},
+	{
+		name: "diamond-01",
+		icon: __pisell_icon.Diamond01
+	},
+	{
+		name: "gift-01",
+		icon: __pisell_icon.Gift01
+	},
+	{
+		name: "shopping-bag-01",
+		icon: __pisell_icon.ShoppingBag01
+	}
+];
+const iconMap = icons.reduce((p, c) => {
+	return {
+		...p,
+		[c.name]: c.icon
+	};
+}, {});
+
+//#endregion
+exports.iconMap = iconMap;
+exports.icons = icons;

package/dist/lib/components/workSpaceList/components/AppearanceEdit/index.js

@@ -0,0 +1,56 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_Color = require('./Color.js');
+const require_IconPanel = require('./IconPanel.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let antd = require("antd");
+let __pisell_materials = require("@pisell/materials");
+require("./index.less");
+
+//#region src/components/workSpaceList/components/AppearanceEdit/index.tsx
+const AppearanceEdit = (props, ref) => {
+	const { colorTitle, isShowName = true, name: propsName, color: propsColor, icon: propsIcon, style } = props;
+	const inputRef = (0, react.useRef)(null);
+	const [name, setName] = (0, react.useState)("Untitled Base");
+	const [color, setColor] = (0, react.useState)("#7F56D9");
+	const [icon, setIcon] = (0, react.useState)("");
+	(0, react.useEffect)(() => {
+		propsName && setName(propsName);
+		propsColor && setColor(propsColor);
+		propsIcon && setIcon(propsIcon);
+	}, [
+		propsName,
+		propsColor,
+		propsIcon
+	]);
+	(0, react.useEffect)(() => {
+		inputRef?.current?.focus({ cursor: "all" });
+	}, []);
+	(0, react.useImperativeHandle)(ref, () => ({ getDetail: () => {
+		return {
+			name,
+			color,
+			icon
+		};
+	} }));
+	return /* @__PURE__ */ react.default.createElement("div", {
+		className: "appearance-edit-wrap",
+		style
+	}, isShowName && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(__pisell_materials.Input, {
+		value: name,
+		onChange: (e) => setName(e.target.value),
+		ref: inputRef
+	}), /* @__PURE__ */ react.default.createElement(antd.Divider, null)), /* @__PURE__ */ react.default.createElement("div", null, colorTitle && /* @__PURE__ */ react.default.createElement("div", { className: "color-title" }, colorTitle), /* @__PURE__ */ react.default.createElement(require_Color.default, {
+		value: color,
+		onChange: setColor
+	})), /* @__PURE__ */ react.default.createElement(antd.Divider, null), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(require_IconPanel.default, {
+		value: icon,
+		onChange: setIcon,
+		color,
+		name
+	})));
+};
+var AppearanceEdit_default = (0, react.forwardRef)(AppearanceEdit);
+
+//#endregion
+exports.default = AppearanceEdit_default;

package/dist/lib/components/workSpaceList/components/AppearanceEdit/index.less

@@ -0,0 +1,12 @@
+.appearance-edit-wrap {
+  width: 475px;
+  padding: 20px 12px;
+  .color-title {
+    color: var(--gray-900, #101828);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    margin-bottom: 20px;
+  }
+}

package/dist/lib/components/workSpaceList/components/AppearanceShow/index.js

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_constants = require('../AppearanceEdit/constants.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+require("./index.less");
+
+//#region src/components/workSpaceList/components/AppearanceShow/index.tsx
+const AppearanceShow = (props) => {
+	const { color, icon, size = 20, fontSize = 14, name } = props;
+	const Icon = (0, react.useMemo)(() => {
+		return require_constants.iconMap[icon];
+	}, [icon]);
+	return /* @__PURE__ */ react.default.createElement("div", {
+		className: "appearance-wrap",
+		style: {
+			background: color || "#7F56D9",
+			height: size,
+			width: size,
+			fontSize
+		}
+	}, Icon ? /* @__PURE__ */ react.default.createElement(Icon, null) : name?.slice(0, 2));
+};
+var AppearanceShow_default = AppearanceShow;
+
+//#endregion
+exports.default = AppearanceShow_default;

package/dist/lib/components/workSpaceList/components/AppearanceShow/index.less

@@ -0,0 +1,7 @@
+.appearance-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  color: #fff;
+}

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

@@ -0,0 +1,18 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_icon = require("@pisell/icon");
+
+//#region src/components/workSpaceList/components/Card/constants.tsx
+const items = [{
+	key: "rename",
+	label: "Rename base",
+	icon: /* @__PURE__ */ react.default.createElement(__pisell_icon.Edit03, null)
+}, {
+	key: "customize",
+	label: "Customize appearance",
+	icon: /* @__PURE__ */ react.default.createElement(__pisell_icon.MagicWand02, null)
+}];
+
+//#endregion
+exports.items = items;

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

@@ -0,0 +1,171 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_useEngineContext = require('../../../../hooks/useEngineContext.js');
+const require_index = require('../AppearanceShow/index.js');
+const require_index$1 = require('../AppearanceEdit/index.js');
+const require_index$2 = require('../Modal/index.js');
+const require_antdConfirmPromise = require('../Modal/antdConfirmPromise.js');
+const require_constants = require('./constants.js');
+const require_index$3 = require('../EditableString/index.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_utils = require("@pisell/utils");
+let __pisell_materials = require("@pisell/materials");
+let __ant_design_icons = require("@ant-design/icons");
+require("./index.less");
+
+//#region src/components/workSpaceList/components/Card/index.tsx
+const stopPropagation = (e) => {
+	e.stopPropagation();
+};
+const titleMap = {
+	duplicate: () => `Duplicate "Untitled Base"`,
+	move: "Move Untitled Base to another workspace"
+};
+const DuplicateContent = () => {
+	return /* @__PURE__ */ react.default.createElement("div", { className: "duplicate-content-wrap" }, /* @__PURE__ */ react.default.createElement("div", { className: "appearance-wrap" }, /* @__PURE__ */ react.default.createElement(require_index.default, {
+		icon: "Un",
+		color: "#7F56D9",
+		size: 72,
+		fontSize: 30
+	})), /* @__PURE__ */ react.default.createElement(__pisell_materials.Input, null), /* @__PURE__ */ react.default.createElement(__pisell_materials.Space, { className: "duplicate-records" }, /* @__PURE__ */ react.default.createElement(__pisell_materials.Switch, { defaultChecked: true }), /* @__PURE__ */ react.default.createElement("span", null, "Duplicate records")));
+};
+const MoveContent = () => {
+	return /* @__PURE__ */ react.default.createElement("div", { className: "move-content-wrap" }, /* @__PURE__ */ react.default.createElement("div", null, "Choose workspace"), /* @__PURE__ */ react.default.createElement(__pisell_materials.Select, {
+		className: "select",
+		options: [{
+			label: "Workspace 1",
+			value: 1
+		}, {
+			label: "Workspace 2",
+			value: 2
+		}]
+	}));
+};
+const Card = (props) => {
+	const { name, describe, created_at, icon, color, id, onDeleteBase, onUpdateBase } = props;
+	const { pushV2AdminPage } = require_useEngineContext.default().appHelper.utils.getApp().history;
+	const [editing, setEditing] = (0, react.useState)(false);
+	const [open, setOpen] = (0, react.useState)(false);
+	const [popoverOpen, setPopoverOpen] = (0, react.useState)(false);
+	const [currentType, setCurrentType] = (0, react.useState)("");
+	const cardRef = (0, react.useRef)(null);
+	const appearanceEditRef = (0, 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 require_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?.(id);
+		}
+	};
+	const handleNameChange = (val) => {
+		setEditing(false);
+		if (name === val) return;
+		onUpdateBase?.({
+			id,
+			name: val
+		});
+	};
+	const handleOk = () => {};
+	const title = (0, react.useMemo)(() => {
+		const result = titleMap[currentType];
+		return (0, __pisell_utils.isFunction)(result) ? result() : result;
+	}, [currentType]);
+	const content = (0, react.useMemo)(() => {
+		return /* @__PURE__ */ react.default.createElement(require_index$1.default, {
+			name,
+			color,
+			icon,
+			isShowName: false,
+			colorTitle: "Edit icon appearance",
+			ref: appearanceEditRef
+		});
+	}, [
+		name,
+		color,
+		icon
+	]);
+	const handleOpenChange = async (o) => {
+		if (!o) {
+			setPopoverOpen(o);
+			const detail = appearanceEditRef.current?.getDetail();
+			const newBase = {
+				id,
+				color: detail?.color,
+				icon: detail?.icon || "",
+				name: detail?.name
+			};
+			if (JSON.stringify(newBase) === JSON.stringify({
+				id,
+				color,
+				icon: icon || "",
+				name
+			})) return;
+			onUpdateBase?.({
+				id,
+				color: detail?.color,
+				icon: detail?.icon,
+				name: detail?.name
+			});
+		}
+	};
+	const handleCardClick = () => {
+		pushV2AdminPage(`/lowcode/${id}`);
+	};
+	return /* @__PURE__ */ react.default.createElement(__pisell_materials.Popover, {
+		placement: "bottomLeft",
+		content,
+		open: popoverOpen,
+		arrow: false,
+		onOpenChange: handleOpenChange,
+		destroyTooltipOnHide: true,
+		trigger: "click"
+	}, /* @__PURE__ */ react.default.createElement("div", {
+		className: "card-wrap",
+		ref: cardRef,
+		onClick: handleCardClick
+	}, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(require_index.default, {
+		icon,
+		color,
+		name,
+		size: 72,
+		fontSize: 30
+	})), /* @__PURE__ */ react.default.createElement("div", { className: "right" }, /* @__PURE__ */ react.default.createElement("div", { className: "line-1" }, /* @__PURE__ */ react.default.createElement("span", { onClick: editing && stopPropagation }, /* @__PURE__ */ react.default.createElement(require_index$3.default, {
+		editing,
+		editable: false,
+		text: name || "",
+		onChange: handleNameChange
+	})), /* @__PURE__ */ react.default.createElement(__pisell_materials.Dropdown, {
+		menu: {
+			items: require_constants.items,
+			onClick
+		},
+		placement: "bottomRight"
+	}, /* @__PURE__ */ react.default.createElement("span", {
+		className: "operate-wrap",
+		onClick: stopPropagation
+	}, /* @__PURE__ */ react.default.createElement(__ant_design_icons.EllipsisOutlined, null)))), /* @__PURE__ */ react.default.createElement("div", { className: "line-2" }, created_at)), /* @__PURE__ */ react.default.createElement(require_index$2.default, {
+		open,
+		title,
+		width: 400,
+		evenlyButton: true,
+		onCancel: () => setOpen(false),
+		onOk: handleOk
+	}, currentType === "duplicate" && /* @__PURE__ */ react.default.createElement(DuplicateContent, null), currentType === "move" && /* @__PURE__ */ react.default.createElement(MoveContent, null))));
+};
+var Card_default = Card;
+
+//#endregion
+exports.default = Card_default;

package/dist/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/dist/lib/components/workSpaceList/components/CardList/index.js

@@ -0,0 +1,48 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_index = require('../Card/index.js');
+const require_index$1 = require('../CreateBaseModal/index.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let __pisell_materials = require("@pisell/materials");
+require("./index.less");
+
+//#region src/components/workSpaceList/components/CardList/index.tsx
+const Empty = (props) => {
+	const { onAddBase } = props;
+	const [open, setOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ react.default.createElement("div", { className: "styles-empty" }, /* @__PURE__ */ react.default.createElement("div", null, "This workspace is empty"), /* @__PURE__ */ react.default.createElement("div", null, "Get started by creating a new base"), /* @__PURE__ */ react.default.createElement(__pisell_materials.Button, {
+		type: "primary",
+		onClick: () => setOpen(true)
+	}, "Create a base"), /* @__PURE__ */ react.default.createElement(require_index$1.default, {
+		onAddBase,
+		open,
+		onCancel: () => setOpen(false)
+	}));
+};
+const CardList = (props) => {
+	const { data, onAddBase, onRefresh, onDeleteBase, onUpdateBase, scrollRef, isDetail } = props;
+	return /* @__PURE__ */ react.default.createElement("div", {
+		className: (0, classnames.default)({
+			"card-list-wrap": !!data.length,
+			"card-list-in-workspace": !isDetail
+		}),
+		ref: scrollRef
+	}, !data.length ? /* @__PURE__ */ react.default.createElement(Empty, { onAddBase }) : data.map((item) => /* @__PURE__ */ react.default.createElement(require_index.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;
+
+//#endregion
+exports.default = CardList_default;

package/dist/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/dist/lib/components/workSpaceList/components/CreateBaseModal/index.js

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_index = require('../AppearanceEdit/index.js');
+const require_index$1 = require('../Modal/index.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let antd = require("antd");
+
+//#region src/components/workSpaceList/components/CreateBaseModal/index.tsx
+const CreateBaseModal = (props) => {
+	const { open, onCancel, onAddBase } = props;
+	const appearanceEditRef = (0, react.useRef)(null);
+	const handleAdd = async () => {
+		const { name, color, icon } = appearanceEditRef.current?.getDetail() || {};
+		if (!name) {
+			antd.message.error("Please fill in the name");
+			return;
+		}
+		await onAddBase({
+			name,
+			color,
+			icon
+		});
+		onCancel();
+	};
+	return /* @__PURE__ */ react.default.createElement(require_index$1.default, {
+		open,
+		title: "Create a base",
+		evenlyButton: false,
+		onCancel,
+		onOk: handleAdd,
+		okText: "Create",
+		destroyOnClose: true
+	}, /* @__PURE__ */ react.default.createElement(require_index.default, {
+		style: { padding: "20px 0px" },
+		ref: appearanceEditRef
+	}));
+};
+var CreateBaseModal_default = CreateBaseModal;
+
+//#endregion
+exports.default = CreateBaseModal_default;

package/dist/lib/components/workSpaceList/components/EditableString/index.js

@@ -0,0 +1,76 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_utils = require("@pisell/utils");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let __pisell_materials = require("@pisell/materials");
+let __pisell_icon = require("@pisell/icon");
+require("./index.less");
+
+//#region src/components/workSpaceList/components/EditableString/index.tsx
+/**
+* 可编辑string
+* @param props
+* @constructor
+*/
+const EditableString = (props) => {
+	const { text, style, onChange, editable, editing: editingProps, maxLength, className, ellipsis } = props;
+	const [editing, setEditing] = (0, react.useState)(false);
+	const [originText, setOriginText] = (0, react.useState)(text);
+	const [temporaryValue, setTemporaryValue] = (0, react.useState)(text);
+	const inputRef = (0, react.useRef)(null);
+	const textRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		setOriginText(text);
+		setTemporaryValue(text);
+	}, [text]);
+	(0, react.useEffect)(() => {
+		(0, __pisell_utils.isBoolean)(editingProps) && setEditing(editingProps);
+	}, [editingProps]);
+	(0, react.useEffect)(() => {
+		if (editing) setTimeout(() => {
+			inputRef.current?.focus();
+		});
+	}, [editing]);
+	(0, react.useEffect)(() => {
+		if (textRef.current) textRef.current.style.webkitLineClamp = ellipsis?.row;
+	}, [ellipsis, editing]);
+	const handleChangeText = () => {
+		if (!temporaryValue) return;
+		onChange?.(temporaryValue);
+		setEditing(false);
+	};
+	const handleEdit = () => {
+		setEditing(true);
+	};
+	return (0, react.useMemo)(() => {
+		if (editing) return /* @__PURE__ */ react.default.createElement("span", { style }, /* @__PURE__ */ react.default.createElement(__pisell_materials.Input, {
+			ref: inputRef,
+			value: temporaryValue,
+			onChange: (e) => setTemporaryValue(e.target.value),
+			onPressEnter: handleChangeText,
+			onBlur: handleChangeText,
+			maxLength
+		}));
+		return /* @__PURE__ */ react.default.createElement("div", {
+			style,
+			size: 16,
+			className: (0, classnames.default)(className, "edit-wrap")
+		}, /* @__PURE__ */ react.default.createElement("span", {
+			className: "text",
+			ref: textRef
+		}, temporaryValue), editable && temporaryValue && /* @__PURE__ */ react.default.createElement(__pisell_icon.Edit05, {
+			className: "edit-icon",
+			onClick: handleEdit
+		}));
+	}, [
+		editing,
+		temporaryValue,
+		ellipsis
+	]);
+};
+var EditableString_default = EditableString;
+
+//#endregion
+exports.default = EditableString_default;

package/dist/lib/components/workSpaceList/components/EditableString/index.less

@@ -0,0 +1,14 @@
+.edit-wrap {
+  display: flex;
+  .text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    margin-right: 16px;
+  }
+}
+.edit-icon {
+  color: var(--gray-400, #98A2B3);
+}

package/dist/lib/components/workSpaceList/components/Modal/antdConfirmPromise.js

@@ -0,0 +1,38 @@
+const require_index = require('./index.js');
+
+//#region src/components/workSpaceList/components/Modal/antdConfirmPromise.ts
+/**
+* 获取确定或者取消 true false 的promise
+* @param type confirm
+* @param otherProps
+*/
+function antdConfirmPromiseShell({ type = "confirm", ...otherProps }) {
+	return new Promise((resolve, reject) => {
+		require_index.default[type]({
+			onOk() {
+				resolve(true);
+			},
+			onCancel() {
+				resolve(false);
+			},
+			...otherProps
+		});
+	});
+}
+/**
+* 同步阻塞式确认弹窗
+* @param type
+* @param otherProps
+*/
+async function antdConfirmPromise({ type = "confirm", ...otherProps }) {
+	const result = await antdConfirmPromiseShell({
+		type,
+		...otherProps
+	});
+	return new Promise((resolve) => {
+		if (result) resolve();
+	});
+}
+
+//#endregion
+exports.antdConfirmPromise = antdConfirmPromise;