@pisell/private-materials 6.6.8 → 6.6.10

package/dist/es/pro/Selector/hooks/usePresetItemProps.js

@@ -0,0 +1,150 @@
+import { require_lodash } from "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js";
+import { useMemo } from "react";
+
+//#region src/pro/Selector/hooks/usePresetItemProps.ts
+var import_lodash = require_lodash();
+/**
+* 根据预设项生成 option Item 的 props
+*
+* 规则说明：
+* 1. variant='default': 使用 Card，borderless，horizontal，selectedType='none'，actionsPosition='left'
+*    1.1 preset.variant='1': renderContent={() => <span>{dataSource._label}</span>}
+*    1.2 preset.variant='2': renderContent={() => <span>{dataSource._label}</span>}
+* 2. variant='media': 使用 MediaItem
+*    2.1 preset.variant='1': size='small', showIndicator=false, 单选shape='circle'，多选shape='square'
+*    2.2 preset.variant='2': size='large', showIndicator=true, shape='circle'
+* 3. variant='card': 根据 itemLayout 区分横向和纵向
+*    3.1 横向（horizontal）:
+*        - preset.variant='2': selectedType='filled'
+*        - preset.variant='5': variant='borderless'
+*        - 默认样式: styles.container = { padding: 8 }
+*        - 使用 lodash merge 深度合并样式，itemProps.styles 优先级更高
+*    3.2 纵向（vertical）:
+*        - 统一使用 borderless，selectedType='none'
+*        - preset.variant='2': indicator 通过 corner 传入
+*    3.3 actions 处理:
+*        - 优先使用 numberSelector（如果存在）
+*        - 其次使用 indicator
+*        - 纵向且 preset.variant='2': indicator 放到 corner，actions 仅展示 numberSelector
+*/
+const usePresetItemProps = (params) => {
+	const { variant, itemLayout, preset, itemProps = {}, indicator: originIndicator, numberSelector, mode, disabled, selected } = params;
+	return useMemo(() => {
+		let mediaProps = {};
+		let cardProps = {};
+		let indicator = originIndicator;
+		const presetVariant = preset?.variant;
+		if (variant === "media") {
+			let presetProps = {};
+			if (presetVariant === "1") presetProps = {
+				size: "small",
+				showIndicator: false,
+				shape: mode === "single" ? "circle" : "square",
+				coverType: "text"
+			};
+			else if (presetVariant === "2") presetProps = {
+				size: "large",
+				showIndicator: true,
+				shape: "circle"
+			};
+			mediaProps = {
+				...presetProps,
+				...itemProps
+			};
+			return {
+				mediaProps,
+				cardProps
+			};
+		}
+		if (variant === "default") {
+			cardProps = {
+				variant: "borderless",
+				layout: "horizontal",
+				selectedType: "none",
+				actionsPosition: "left",
+				actions: numberSelector ? [numberSelector] : [indicator],
+				renderContent: presetVariant === "1" || presetVariant === "2" ? ({ dataSource }) => dataSource?._label : void 0,
+				...itemProps
+			};
+			return {
+				mediaProps,
+				cardProps
+			};
+		}
+		if (variant === "card") {
+			const isVertical = (itemProps?.layout || itemLayout || "horizontal") === "vertical";
+			let baseProps = {};
+			if (isVertical) {
+				const defaultStyles = { content: { minHeight: "264px" } };
+				baseProps = {
+					layout: "vertical",
+					variant: "borderless"
+				};
+				if (presetVariant === "2") {
+					const mergedStyles = (0, import_lodash.merge)({}, defaultStyles, itemProps?.styles);
+					cardProps = {
+						...baseProps,
+						corner: indicator,
+						actions: numberSelector ? [numberSelector] : [],
+						...itemProps,
+						styles: mergedStyles
+					};
+				} else {
+					const mergedStyles = (0, import_lodash.merge)({}, defaultStyles, itemProps?.styles);
+					cardProps = {
+						...baseProps,
+						actions: numberSelector ? [numberSelector] : [indicator],
+						...itemProps,
+						styles: mergedStyles
+					};
+				}
+			} else {
+				const defaultStyles = {
+					container: { padding: 8 },
+					content: {}
+				};
+				if (presetVariant === "1") {
+					defaultStyles.content.textAlign = "center";
+					baseProps = { selectedType: "outlined-bold" };
+					if (selected) defaultStyles.content.fontWeight = "600";
+					indicator = null;
+				} else if (presetVariant === "2") {
+					baseProps = { selectedType: "filled" };
+					indicator = selected ? indicator : null;
+				} else if (presetVariant === "5") baseProps = {
+					variant: "borderless",
+					selectedType: "none"
+				};
+				const mergedStyles = (0, import_lodash.merge)({}, defaultStyles, itemProps?.styles);
+				cardProps = {
+					...baseProps,
+					actions: numberSelector ? [numberSelector] : [indicator],
+					...itemProps,
+					styles: mergedStyles
+				};
+			}
+			return {
+				mediaProps,
+				cardProps
+			};
+		}
+		return {
+			mediaProps,
+			cardProps
+		};
+	}, [
+		variant,
+		itemLayout,
+		preset,
+		itemProps,
+		originIndicator,
+		numberSelector,
+		mode,
+		disabled,
+		selected
+	]);
+};
+var usePresetItemProps_default = usePresetItemProps;
+
+//#endregion
+export { usePresetItemProps_default as default };

package/dist/es/pro/Selector/hooks/usePresetProps.js

@@ -0,0 +1,102 @@
+import { useMemo } from "react";
+
+//#region src/pro/Selector/hooks/usePresetProps.ts
+const VARIANT_MAP = {
+	["default"]: [
+		"1",
+		"2",
+		"3",
+		"4"
+	],
+	["select"]: ["1"],
+	["card"]: [
+		"1",
+		"2",
+		"3",
+		"4",
+		"5"
+	],
+	["media"]: ["1", "2"]
+};
+const EMPTY_CONFIG = {};
+const COL_CONFIG_MAP = {
+	default: {
+		"1": "100%",
+		"2": "auto",
+		"3": "100%",
+		"4": "auto"
+	},
+	card: {
+		"1": "209px",
+		"2": "209px",
+		"3": "100%",
+		"4": "325px",
+		"5": "100%"
+	},
+	media: {
+		"1": "auto",
+		"2": "auto"
+	}
+};
+/**
+* 根据预设配置生成 grid 和 indicatorProps
+*
+* Grid 规则：
+* - 根据 variant 和 preset.variant 计算布局配置
+*
+* IndicatorProps 规则：
+* 1. 当 variant='card' 且 preset.variant='2' 时，indicator 默认 variant='filled'
+* 2. 当 variant='media' 时，indicator 默认 variant='filled'
+* 3. 外部传入的 indicatorProps 优先级更高（会合并到预设配置中）
+*/
+const usePresetProps = ({ layout, mode = "single", preset, itemLayout = "horizontal", variant = "default", indicatorProps }) => {
+	return useMemo(() => {
+		let layoutConfig = null;
+		if (variant === "select") layoutConfig = null;
+		else if (layout) layoutConfig = layout;
+		else {
+			let presetVariant = (VARIANT_MAP[variant] || []).includes(preset?.variant || "") ? preset?.variant : "1";
+			const colConfig = COL_CONFIG_MAP[variant];
+			if (colConfig) {
+				const baseWidth = colConfig[presetVariant];
+				if (baseWidth) if (baseWidth === "auto") layoutConfig = {
+					type: "flex",
+					direction: "row",
+					wrap: true
+				};
+				else if (baseWidth === "100%") layoutConfig = {
+					type: "flex",
+					direction: "column",
+					wrap: false
+				};
+				else layoutConfig = {
+					type: "grid",
+					baseWidth,
+					wrap: true
+				};
+				else layoutConfig = EMPTY_CONFIG;
+			} else layoutConfig = EMPTY_CONFIG;
+		}
+		let computedIndicatorProps = {};
+		if (variant === "media" || variant === "card" && preset?.variant === "2") computedIndicatorProps = { variant: "filled" };
+		if (indicatorProps) computedIndicatorProps = {
+			...computedIndicatorProps,
+			...indicatorProps
+		};
+		return {
+			layout: layoutConfig,
+			indicatorProps: computedIndicatorProps
+		};
+	}, [
+		JSON.stringify(preset),
+		itemLayout,
+		variant,
+		layout,
+		mode,
+		JSON.stringify(indicatorProps)
+	]);
+};
+var usePresetProps_default = usePresetProps;
+
+//#endregion
+export { usePresetProps_default as default };

package/dist/es/pro/Selector/hooks/useSelectionController.js

@@ -0,0 +1,290 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { locales } from "@pisell/utils";
+import { useControllableValue } from "ahooks";
+
+//#region src/pro/Selector/hooks/useSelectionController.ts
+function useSelectionController(props) {
+	const { dataSource = [], ruleConfig, fieldNames, mode = "single", valueType = "primitive" } = props || {};
+	const [values, setValues] = useControllableValue(props);
+	const valuesRef = useRef(values);
+	valuesRef.current = values;
+	const [errors, setErrors] = useState([]);
+	const [validated, setValidated] = useState(false);
+	const normalizedOptions = useMemo(() => {
+		return dataSource.map((option) => ({
+			...option,
+			_key: option[fieldNames?.value || "value"],
+			_label: option[fieldNames?.label || "label"],
+			_cover: option[fieldNames?.cover || "cover"]
+		}));
+	}, [dataSource, fieldNames]);
+	const mutexGroups = useMemo(() => {
+		const groups = [];
+		const m = ruleConfig?.mutex;
+		if (Array.isArray(m)) m.forEach((g) => {
+			if (Array.isArray(g) && g.length > 0) groups.push(g);
+		});
+		return groups;
+	}, [ruleConfig]);
+	const mutexIndex = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		mutexGroups.forEach((group, idx) => {
+			group.forEach((k) => {
+				const arr = map.get(k) || [];
+				arr.push(idx);
+				map.set(k, arr);
+			});
+		});
+		return map;
+	}, [mutexGroups]);
+	const normalizedValues = useMemo(() => {
+		if (!values) return [];
+		if (Array.isArray(values)) return values.map((item) => {
+			if (typeof item === "object" && item !== null) return {
+				...item,
+				value: item.value,
+				quantity: item.quantity || 1
+			};
+			return {
+				value: item,
+				quantity: 1
+			};
+		});
+		if (typeof values === "object" && values !== null) {
+			const objValue = values;
+			return [{
+				...objValue,
+				value: objValue.value,
+				quantity: objValue.quantity || 1
+			}];
+		}
+		return [{
+			value: values,
+			quantity: 1
+		}];
+	}, [values]);
+	const quantityInfo = useMemo(() => {
+		const selectedCount = normalizedValues.reduce((sum, item) => sum + (item.quantity || 0), 0);
+		const showQuantity = (Array.isArray(dataSource) ? dataSource : dataSource || []).some((opt) => typeof opt?.ruleConfig?.max === "number" && opt.ruleConfig.max > 1 || typeof opt?.ruleConfig?.min === "number" && opt.ruleConfig.min > 1);
+		return {
+			maxReached: typeof ruleConfig?.max === "number" && ruleConfig.max > 0 && selectedCount >= ruleConfig.max,
+			showQuantity,
+			remainingCount: typeof ruleConfig?.max === "number" && ruleConfig.max > 0 ? Math.max(0, ruleConfig.max - selectedCount) : Infinity,
+			selectedCount
+		};
+	}, [
+		normalizedValues,
+		dataSource,
+		ruleConfig?.max
+	]);
+	const getOptionState = useCallback((optionKey) => {
+		const found = normalizedValues.find((item) => item.value === optionKey);
+		return {
+			selected: !!found,
+			quantity: found?.quantity || 0
+		};
+	}, [normalizedValues]);
+	const options = useMemo(() => {
+		return normalizedOptions.map((option) => {
+			const state = getOptionState(option._key);
+			const disabled = quantityInfo.maxReached && !state.selected;
+			return {
+				...option,
+				selected: state.selected,
+				quantity: state.quantity,
+				disabled: option.disabled || disabled
+			};
+		});
+	}, [
+		normalizedOptions,
+		getOptionState,
+		quantityInfo.maxReached
+	]);
+	const validate = async () => {
+		const errors$1 = [];
+		const { required, min, max, customValidator } = ruleConfig || {};
+		const values$1 = valuesRef.current;
+		let currentNormalizedValues = [];
+		if (values$1) if (Array.isArray(values$1)) currentNormalizedValues = values$1.map((item) => {
+			if (typeof item === "object" && item !== null) return {
+				...item,
+				value: item.value,
+				quantity: item.quantity || 1
+			};
+			return {
+				value: item,
+				quantity: 1
+			};
+		});
+		else if (typeof values$1 === "object" && values$1 !== null) {
+			const objValue = values$1;
+			currentNormalizedValues = [{
+				...objValue,
+				value: objValue.value,
+				quantity: objValue.quantity || 1
+			}];
+		} else currentNormalizedValues = [{
+			value: values$1,
+			quantity: 1
+		}];
+		const totalQuantity = currentNormalizedValues.reduce((sum, item) => sum + (item.quantity || 0), 0);
+		if (required) {
+			if (mode === "single" && !values$1) errors$1.push({
+				type: "required",
+				message: locales.getText("pisell2.pro.selector.validate.required-msg")
+			});
+			else if (mode === "multiple" && (!values$1 || Array.isArray(values$1) && values$1.length === 0)) errors$1.push({
+				type: "required",
+				message: locales.getText("pisell2.pro.selector.validate.required-msg")
+			});
+		}
+		if (typeof min === "number" && totalQuantity < min) errors$1.push({
+			type: "min",
+			message: locales.getText("pisell2.pro.selector.validate.min-selection")(min)
+		});
+		if (typeof max === "number" && totalQuantity > max) errors$1.push({
+			type: "max",
+			message: locales.getText("pisell2.pro.selector.validate.max-selection")(max)
+		});
+		options.forEach((option) => {
+			const quantity = currentNormalizedValues.find((item) => item.value === option._key)?.quantity || 0;
+			const { _label } = option;
+			const _min = option?.ruleConfig?.min;
+			const _max = option?.ruleConfig?.max;
+			if (typeof _min === "number" && quantity < _min) errors$1.push({
+				type: "min",
+				message: locales.getText("pisell2.pro.selector.validate.min-selection")(_min, _label),
+				_key: option._key
+			});
+			if (typeof _max === "number" && quantity > _max) errors$1.push({
+				type: "max",
+				message: locales.getText("pisell2.pro.selector.validate.max-selection")(_max, _label),
+				_key: option._key
+			});
+		});
+		if (mutexGroups.length > 0) {
+			const selectedKeys = (Array.isArray(values$1) ? values$1 : values$1 ? [values$1] : []).map((v) => typeof v === "object" && v !== null ? v.value : v);
+			mutexGroups.forEach((group) => {
+				if (selectedKeys.filter((k) => group.includes(k)).length > 1) errors$1.push({
+					type: "mutex",
+					message: "Only one option can be selected in the same mutex group"
+				});
+			});
+		}
+		if (typeof customValidator === "function") try {
+			await customValidator(values$1);
+		} catch (e) {
+			const type = e?.type === "requireOneOf" ? "requireOneOf" : e?.type || "custom";
+			const message = e?.message || "Validation failed";
+			errors$1.push({
+				type,
+				message
+			});
+		}
+		setErrors(errors$1);
+		setValidated(true);
+		return errors$1.length === 0 ? Promise.resolve() : Promise.reject(errors$1);
+	};
+	const buildOutputValue = useCallback((newNormalizedValues) => {
+		if (newNormalizedValues.length === 0) return mode === "single" ? void 0 : [];
+		if (mode === "single") {
+			const item = newNormalizedValues[0];
+			if (valueType === "primitive") return item.value;
+			return { ...item };
+		}
+		if (valueType === "primitive") return newNormalizedValues.map((item) => item.value);
+		return newNormalizedValues.map((item) => {
+			return { ...item };
+		});
+	}, [
+		mode,
+		valueType,
+		quantityInfo.showQuantity
+	]);
+	const _onChange = useCallback((optionKey, data) => {
+		let newNormalizedValues = [...normalizedValues];
+		const existingIndex = newNormalizedValues.findIndex((item) => item.value === optionKey);
+		if (data?.quantity !== void 0 && data.quantity <= 0) {
+			if (existingIndex >= 0) newNormalizedValues.splice(existingIndex, 1);
+		} else {
+			if (existingIndex >= 0) newNormalizedValues[existingIndex] = {
+				...newNormalizedValues[existingIndex],
+				...data
+			};
+			else {
+				const newItem = {
+					value: optionKey,
+					quantity: data.quantity || 1,
+					...data
+				};
+				if (mode === "single") newNormalizedValues = [newItem];
+				else newNormalizedValues.push(newItem);
+			}
+			const groupIdxList = mutexIndex.get(optionKey) || [];
+			if (groupIdxList.length > 0) {
+				const keepKey = optionKey;
+				const toRemove = /* @__PURE__ */ new Set();
+				groupIdxList.forEach((gi) => {
+					(mutexGroups[gi] || []).forEach((k) => {
+						if (k !== keepKey) toRemove.add(k);
+					});
+				});
+				if (toRemove.size > 0) newNormalizedValues = newNormalizedValues.filter((item) => !toRemove.has(item.value));
+			}
+		}
+		const outputValue = buildOutputValue(newNormalizedValues);
+		setValues(outputValue);
+		valuesRef.current = outputValue;
+		if (ruleConfig?.autoValidate) try {
+			validate();
+		} catch (error) {}
+	}, [
+		normalizedValues,
+		mode,
+		buildOutputValue,
+		setValues,
+		mutexIndex,
+		mutexGroups,
+		ruleConfig?.autoValidate
+	]);
+	const clear = useCallback(() => {
+		setValues(mode === "single" ? void 0 : []);
+		setErrors([]);
+	}, [
+		mode,
+		setValues,
+		setErrors
+	]);
+	const actions = {
+		toggle: (optionKey) => {
+			_onChange(optionKey, { quantity: getOptionState(optionKey).selected ? 0 : 1 });
+		},
+		update: (optionKey, payload) => _onChange(optionKey, payload),
+		setValue: (value) => setValues(value),
+		clear,
+		validate,
+		reset: useCallback(() => {
+			if (props && props.defaultValue !== void 0) setValues(props.defaultValue);
+			else clear();
+			setErrors([]);
+		}, [
+			props,
+			clear,
+			setValues,
+			setErrors
+		])
+	};
+	return {
+		state: {
+			errors,
+			validated,
+			values,
+			options,
+			quantityInfo
+		},
+		actions
+	};
+}
+
+//#endregion
+export { useSelectionController as default };

package/dist/es/pro/Selector/index.d.ts

@@ -0,0 +1,12 @@
+import { ExprRule, GroupItem, HeaderProps, ItemLayout, ItemProps, LayoutConfig, LayoutType, OptionItem, OptionKey, PresetConfig, RenderItemProps, RuleConfig, SelectionValue, SelectionValueMultiple, SelectionValueObject, SelectionValueSingle, SelectorGroupProps, SelectorProps, SelectorVariant } from "./types.js";
+import { Item } from "./Item.js";
+import { SelectorGroup } from "./SelectorGroup.js";
+
+//#region src/pro/Selector/index.d.ts
+type SelectorComponentType = React.ForwardRefExoticComponent<SelectorProps<OptionKey> & React.RefAttributes<any>> & {
+  Group: typeof SelectorGroup;
+  Item: typeof Item;
+};
+declare const Selector: SelectorComponentType;
+//#endregion
+export { Selector };

package/dist/es/pro/Selector/index.js

@@ -0,0 +1,12 @@
+import Item_default from "./Item.js";
+import Selector_default from "./Selector.js";
+import SelectorGroup_default from "./SelectorGroup.js";
+
+//#region src/pro/Selector/index.tsx
+const Selector = Selector_default;
+Selector.Group = SelectorGroup_default;
+Selector.Item = Item_default;
+var Selector_default$1 = Selector;
+
+//#endregion
+export { Selector_default$1 as default };

package/dist/es/pro/Selector/locales.js

@@ -0,0 +1,48 @@
+//#region src/pro/Selector/locales.ts
+var locales_default = {
+	en: {
+		"pisell2.pro.selector.mode.single": "Single choice",
+		"pisell2.pro.selector.mode.multiple": "Multiple choice",
+		"pisell2.pro.selector.validate.required-msg": "Please select",
+		"pisell2.pro.selector.validate.requireOneOf-msg": "This group must select one of the specified collections",
+		"pisell2.pro.selector.required-tag": "Required",
+		"pisell2.pro.selector.validate.min-selection": (min, label) => `Please select at least ${min} ${label || ""}`,
+		"pisell2.pro.selector.validate.max-selection": (max, label) => `Please select at most ${max} ${label || ""}`,
+		"pisell2.pro.selector.tip.min-max-selection": (min, max) => {
+			const _minText = min ? `At least ${min}` : "";
+			const _maxText = max ? `No more than ${max}` : "";
+			return `${_minText}${_minText && _maxText ? "," : ""}${_maxText ? " " : ""}${_maxText}`;
+		}
+	},
+	"zh-CN": {
+		"pisell2.pro.selector.mode.single": "单选",
+		"pisell2.pro.selector.mode.multiple": "多选",
+		"pisell2.pro.selector.validate.required-msg": "请选择",
+		"pisell2.pro.selector.validate.requireOneOf-msg": "该组必须选择指定集合之一",
+		"pisell2.pro.selector.required-tag": "必选",
+		"pisell2.pro.selector.validate.min-selection": (min, label) => `至少选择 ${min} 项 ${label || ""}`,
+		"pisell2.pro.selector.validate.max-selection": (max, label) => `最多选择 ${max} 项 ${label || ""}`,
+		"pisell2.pro.selector.tip.min-max-selection": (min, max) => {
+			const _minText = min ? `最少必选 ${min} 项` : "";
+			const _maxText = max ? `最多可选 ${max} 项` : "";
+			return `${_minText}${_minText && _maxText ? "," : ""}${_maxText ? " " : ""}${_maxText}`;
+		}
+	},
+	"zh-HK": {
+		"pisell2.pro.selector.mode.single": "單選",
+		"pisell2.pro.selector.mode.multiple": "多選",
+		"pisell2.pro.selector.validate.required-msg": "請選擇",
+		"pisell2.pro.selector.validate.requireOneOf-msg": "該組必須選擇指定集合之一",
+		"pisell2.pro.selector.required-tag": "必選",
+		"pisell2.pro.selector.validate.min-selection": (min, label) => `至少選擇 ${min} 項 ${label || ""}`,
+		"pisell2.pro.selector.validate.max-selection": (max, label) => `最多選擇 ${max} 項 ${label || ""}`,
+		"pisell2.pro.selector.tip.min-max-selection": (min, max) => {
+			const _minText = min ? `最少必選 ${min} 項` : "";
+			const _maxText = max ? `最多可選 ${max} 項` : "";
+			return `${_minText}${_minText && _maxText ? "," : ""}${_maxText ? " " : ""}${_maxText}`;
+		}
+	}
+};
+
+//#endregion
+export { locales_default as default };

package/dist/es/pro/Selector/selector.less

@@ -0,0 +1,45 @@
+.pisell-pro-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .pisell-pro-selector_header {
+    display: flex;
+    gap: 8px;
+  }
+
+  .pisell-pro-selector_header-content-wrapper {
+    overflow: hidden;
+  }
+
+  .pisell-pro-selector_header-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+
+    &-title {
+      font-size: 16px;
+      font-weight: 600;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .pisell-pro-selector-tip {
+    color: #475467;
+    display: inline-block;
+    margin-top: 4px;
+  }
+
+  .pisell-lowcode-select {
+    height: 48px;
+
+    .pisell-lowcode-select-selection-item {
+      height: 36px;
+      line-height: 34px;
+    }
+  }
+}

package/dist/es/pro/Selector/selectorGroup.less

@@ -0,0 +1,11 @@
+.pisell-batch-selector {
+  .pisell-product-select__tabs-wrapper {
+    padding: 16px 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+}