@pisell/private-materials 6.6.7 → 6.6.9

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

@@ -0,0 +1,14 @@
+import { SelectionValue, SelectorGroupProps } from "./types.js";
+import React from "react";
+import "./selectorGroup.less";
+
+//#region src/pro/Selector/SelectorGroup.d.ts
+type SelectorGroupRef = {
+  getValues: (includeHidden?: boolean) => Record<string, SelectionValue>;
+  setValues: (values: Record<string, SelectionValue>) => void;
+  validate: () => Promise<Record<string, never>>;
+  reset: () => void;
+};
+declare const SelectorGroup: React.ForwardRefExoticComponent<Omit<SelectorGroupProps, "ref"> & React.RefAttributes<SelectorGroupRef>>;
+//#endregion
+export { SelectorGroup };

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

@@ -0,0 +1,404 @@
+import { require_lodash } from "../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js";
+import useEngineContext_default from "../../hooks/useEngineContext.js";
+import CategorySkeleton_default from "../../plus/productSelect/CategoryTabs/CategorySkeleton.js";
+import CategoryTabs_default from "../../plus/productSelect/CategoryTabs/index.js";
+import { getOffsetTopRelativeToScrollContainer } from "../../plus/productSelect/utils.js";
+import locales_default from "./locales.js";
+import Selector_default from "./Selector.js";
+import { computeAutoHiddenGroups, computeEffects, generateSimpleUUID, getSelectedSet, normalizeRules, pruneValuesByAllowOnly } from "./utils/index.js";
+import { IntersectionItem, IntersectionObserverProvider } from "./components/IntersectionObserver.js";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { locales } from "@pisell/utils";
+import classNames from "classnames";
+import "./selectorGroup.less";
+
+//#region src/pro/Selector/SelectorGroup.tsx
+var import_lodash = require_lodash();
+const DEFAULT_DATASOURCE = [];
+const SelectorGroup = forwardRef((props, ref) => {
+	const context = useEngineContext_default();
+	locales.init(locales_default, context?.appHelper?.utils?.storage?.get("umi_locale") || "en");
+	const { linkageRules, allowedValuesPolicy = "strict", preserve: preserveDefault = false, style } = props;
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const isManualChangeIndexRef = useRef(false);
+	const containerRef = useRef(null);
+	const _uniqueId = useRef(generateSimpleUUID().substring(0, 8)).current;
+	const groupRefs = useRef({});
+	const reducer = (state$1, action) => {
+		switch (action.type) {
+			case "commit": return action.payload;
+			case "patch": return {
+				...state$1,
+				...action.payload
+			};
+			default: return state$1;
+		}
+	};
+	const [state, dispatch] = useReducer(reducer, {
+		values: {},
+		visibleGroups: {},
+		optionEffects: {}
+	});
+	useEffect(() => {
+		const initial = (props?.value ?? props?.defaultValue) || {};
+		if (initial && typeof initial === "object") applyValues({ ...initial });
+	}, []);
+	const normalizedRules = useMemo(() => normalizeRules(linkageRules), [useMemo(() => {
+		try {
+			return JSON.stringify(linkageRules ?? null);
+		} catch {
+			return String(linkageRules);
+		}
+	}, [linkageRules])]);
+	const autoHiddenGroups = useMemo(() => computeAutoHiddenGroups(normalizedRules), [normalizedRules]);
+	const dataSource = useMemo(() => {
+		if (Array.isArray(props.dataSource)) return props.dataSource.filter((item) => !!item && item.id !== void 0);
+		return DEFAULT_DATASOURCE;
+	}, [props.dataSource]);
+	const stateRef = useRef(state);
+	const dataSourceRef = useRef(dataSource);
+	useEffect(() => {
+		stateRef.current = state;
+	}, [state]);
+	useEffect(() => {
+		dataSourceRef.current = dataSource;
+	}, [dataSource]);
+	const hasInitializedVisibilityRef = useRef(false);
+	useEffect(() => {
+		if (!hasInitializedVisibilityRef.current && (!state.visibleGroups || Object.keys(state.visibleGroups).length === 0)) {
+			const initVisible = {};
+			(dataSource || []).forEach((group) => {
+				const gid = String(group.id ?? "");
+				initVisible[gid] = autoHiddenGroups.has(gid) ? false : true;
+			});
+			hasInitializedVisibilityRef.current = true;
+			dispatch({
+				type: "patch",
+				payload: { visibleGroups: initVisible }
+			});
+		}
+	}, [dataSource, autoHiddenGroups]);
+	const lastEmittedRef = useRef(null);
+	const applyValues = useCallback((nextValues, visibleOverride) => {
+		const maskValues = (vals, visibleMap) => {
+			const out = { ...vals || {} };
+			(dataSource || []).forEach((group) => {
+				const gid = String(group.id ?? "");
+				const preserve = typeof group.preserve === "boolean" ? group.preserve : preserveDefault;
+				if (visibleMap[gid] === false && preserve === false) out[gid] = void 0;
+			});
+			return out;
+		};
+		const { visibleGroups: newVisible, optionEffects: newEffects } = computeEffects(dataSource, normalizedRules, maskValues(nextValues, visibleOverride || state.visibleGroups));
+		let finalValues = nextValues;
+		let finalVisible = newVisible;
+		let finalEffects = newEffects;
+		if (allowedValuesPolicy === "strict") {
+			const pruned = pruneValuesByAllowOnly(nextValues, newEffects);
+			if (!(0, import_lodash.isEqual)(pruned, nextValues)) {
+				finalValues = pruned;
+				const recomputed = computeEffects(dataSource, normalizedRules, maskValues(finalValues, newVisible));
+				finalVisible = recomputed.visibleGroups;
+				finalEffects = recomputed.optionEffects;
+			}
+		}
+		if (!((0, import_lodash.isEqual)(state.values, finalValues) && (0, import_lodash.isEqual)(state.visibleGroups, finalVisible) && (0, import_lodash.isEqual)(state.optionEffects, finalEffects))) dispatch({
+			type: "commit",
+			payload: {
+				values: { ...finalValues || {} },
+				visibleGroups: finalVisible,
+				optionEffects: finalEffects
+			}
+		});
+		if (typeof props?.onChange === "function") {
+			const out = {};
+			(dataSource || []).forEach((group) => {
+				const gid = String(group.id ?? "");
+				const preserve = typeof group.preserve === "boolean" ? group.preserve : preserveDefault;
+				if (finalVisible[gid] === false && preserve === false) return;
+				const v = finalValues[gid];
+				if (v !== void 0) out[gid] = v;
+			});
+			if (!(0, import_lodash.isEqual)(lastEmittedRef.current, out)) {
+				lastEmittedRef.current = out;
+				props.onChange(out);
+			}
+		}
+	}, [
+		dataSource,
+		normalizedRules,
+		allowedValuesPolicy,
+		preserveDefault,
+		state.visibleGroups,
+		state.values,
+		state.optionEffects,
+		props?.onChange
+	]);
+	const getValuesInternal = useCallback((includeHidden, visibleOverride) => {
+		if (includeHidden) return { ...state.values || {} };
+		const visibleMap = visibleOverride || state.visibleGroups;
+		const result = {};
+		(dataSource || []).forEach((group) => {
+			const gid = String(group.id ?? "");
+			const preserve = typeof group.preserve === "boolean" ? group.preserve : preserveDefault;
+			if (visibleMap[gid] === false && preserve === false) return;
+			const v = state.values[gid];
+			if (v !== void 0) result[gid] = v;
+		});
+		return result;
+	}, [
+		dataSource,
+		state.visibleGroups,
+		preserveDefault,
+		state.values
+	]);
+	useEffect(() => {
+		applyValues({ ...state.values || {} });
+	}, [
+		dataSource,
+		normalizedRules,
+		allowedValuesPolicy
+	]);
+	useEffect(() => {
+		const external = props?.value;
+		if (external && typeof external === "object") {
+			const prev = state.values || {};
+			const next = external || {};
+			if (!(0, import_lodash.isEqual)(prev, next)) applyValues({ ...next });
+		}
+	}, [props?.value]);
+	const handleGroupChange = useCallback((groupId, v) => {
+		applyValues({
+			...state.values || {},
+			[groupId]: v
+		});
+	}, [state.values, applyValues]);
+	const _categories = useMemo(() => {
+		return dataSource.filter((item) => state.visibleGroups[String(item.id ?? "")] !== false).map((item) => {
+			return {
+				...item,
+				key: String(item.id ?? ""),
+				label: item.title
+			};
+		});
+	}, [dataSource, state.visibleGroups]);
+	const debounceIndicator = useCallback((delay) => {
+		isManualChangeIndexRef.current = true;
+		const timeoutId = setTimeout(() => {
+			isManualChangeIndexRef.current = false;
+		}, delay);
+		return () => clearTimeout(timeoutId);
+	}, []);
+	const switchCategory = useCallback((key) => {
+		setActiveIndex(_categories.findIndex((item) => item.key === key));
+		debounceIndicator(300);
+		const categoryIndex = dataSource.findIndex((item) => String(item.id) === key);
+		let _scrollParent = null;
+		if (typeof props.customScrollParent === "string") _scrollParent = document.querySelector(props.customScrollParent);
+		else _scrollParent = props.customScrollParent || containerRef.current;
+		if (!_scrollParent || !containerRef.current) return;
+		const target = document.getElementById(`pisell-pro-selector-${key}`);
+		if (!target) return;
+		const batchSelectorWrapper = document.querySelector(`.pisell-batch-selector-${_uniqueId}`);
+		const tabsHeight = document.getElementById(`pisell-batch-selector-${_uniqueId}_tabs`)?.offsetHeight || 0;
+		const extraOffset = 0;
+		if (categoryIndex === 0) {
+			if (batchSelectorWrapper) {
+				const wrapperOffsetTop = getOffsetTopRelativeToScrollContainer(batchSelectorWrapper, _scrollParent);
+				_scrollParent.scrollTop = wrapperOffsetTop - extraOffset;
+			}
+			return;
+		} else {
+			const listOffsetTop = getOffsetTopRelativeToScrollContainer(target, _scrollParent);
+			_scrollParent.scrollTop = listOffsetTop - tabsHeight - extraOffset;
+		}
+	}, [
+		_categories,
+		dataSource,
+		debounceIndicator,
+		props.customScrollParent,
+		_uniqueId
+	]);
+	useImperativeHandle(ref, () => ({
+		getValues: (includeHidden) => getValuesInternal(includeHidden),
+		setValues: (values) => {
+			applyValues({ ...values || {} });
+		},
+		validate: async () => {
+			const currentDataSource = dataSourceRef.current || [];
+			const currentVisibleGroups = stateRef.current.visibleGroups;
+			const validateGroup = async (ds) => {
+				const gid = String(ds.id ?? "");
+				const successResult = {
+					gid,
+					ok: true,
+					errors: []
+				};
+				if (currentVisibleGroups[gid] === false) return successResult;
+				const inst = groupRefs.current[gid];
+				if (!inst?.validate) return successResult;
+				try {
+					await inst.validate();
+					return successResult;
+				} catch (errors) {
+					return {
+						gid,
+						ok: false,
+						errors: Array.isArray(errors) ? errors : errors ? [errors] : []
+					};
+				}
+			};
+			const results = await Promise.all(currentDataSource.map(validateGroup));
+			const errorsByGroup = {};
+			let firstErrorGID;
+			for (const result of results) if (!result.ok && result.errors.length > 0) {
+				errorsByGroup[result.gid] = result.errors;
+				if (!firstErrorGID) firstErrorGID = result.gid;
+			}
+			if (Object.keys(errorsByGroup).length > 0) {
+				if (props.scrollToFirstError !== false && firstErrorGID) switchCategory(firstErrorGID);
+				return Promise.reject(errorsByGroup);
+			}
+			return Promise.resolve({});
+		},
+		reset: () => {
+			applyValues({ ...props?.defaultValue || {} });
+			Object.keys(groupRefs.current).forEach((gid) => {
+				groupRefs.current[gid]?.reset?.();
+			});
+		},
+		clear: () => {
+			applyValues({});
+			Object.keys(groupRefs.current).forEach((gid) => {
+				groupRefs.current[gid]?.clear?.();
+			});
+		}
+	}), [
+		getValuesInternal,
+		applyValues,
+		props.scrollToFirstError,
+		props?.defaultValue,
+		switchCategory
+	]);
+	const patchedDataSourceMap = useMemo(() => {
+		const map = {};
+		(dataSource || []).forEach((group) => {
+			const gid = String(group.id ?? "");
+			const fieldValue = group?.fieldNames?.value || "value";
+			const effects = state.optionEffects[gid];
+			map[gid] = (Array.isArray(group.dataSource) ? group.dataSource : []).map((opt) => {
+				const val = opt[fieldValue];
+				return effects?.allowOnly && !effects.allowOnly.has(val) ? {
+					...opt,
+					disabled: true
+				} : opt;
+			});
+		});
+		return map;
+	}, [dataSource, state.optionEffects]);
+	const validationMaps = useMemo(() => {
+		const titleTipMap = {};
+		const customValidatorMap = {};
+		(dataSource || []).forEach((group) => {
+			const gid = String(group.id ?? "");
+			const req = state.optionEffects[gid]?.requireOneOf;
+			if (req) {
+				const currentSel = getSelectedSet(state.values?.[gid]);
+				titleTipMap[gid] = [...req.values].some((v) => currentSel.has(v)) ? void 0 : req.tip || locales.getText("pisell2.pro.selector.validate.requireOneOf-msg");
+				customValidatorMap[gid] = async (value) => {
+					const sel = getSelectedSet(value);
+					if (![...req.values].some((v) => sel.has(v))) throw {
+						type: "requireOneOf",
+						message: req.message || locales.getText("pisell2.pro.selector.validate.requireOneOf-msg")
+					};
+				};
+			} else {
+				titleTipMap[gid] = void 0;
+				customValidatorMap[gid] = void 0;
+			}
+		});
+		return {
+			titleTipMap,
+			customValidatorMap
+		};
+	}, [
+		dataSource,
+		state.optionEffects,
+		state.values
+	]);
+	const activeKey = useMemo(() => {
+		return _categories[activeIndex]?.key;
+	}, [activeIndex, _categories]);
+	const renderTabs = () => {
+		if (props.tabProps?.visible === false) return null;
+		if ((props.dataSource || []).length <= 1) return null;
+		return /* @__PURE__ */ React.createElement(CategoryTabs_default, {
+			activeKey: activeKey ? String(activeKey) : "",
+			items: _categories,
+			onChange: switchCategory,
+			loading: props.loading,
+			skeleton: /* @__PURE__ */ React.createElement(CategorySkeleton_default, null),
+			id: `pisell-batch-selector-${_uniqueId}_tabs`
+		});
+	};
+	const _content = useMemo(() => {
+		return /* @__PURE__ */ React.createElement("div", { className: `pisell-batch-selector__content` }, dataSource.filter((item) => state.visibleGroups[String(item.id ?? "")] !== false).map((item, index) => {
+			const gid = String(item.id ?? "");
+			const headerProps = item.headerProps || item.titleProps || {};
+			return /* @__PURE__ */ React.createElement(IntersectionItem, {
+				key: gid,
+				index
+			}, /* @__PURE__ */ React.createElement(Selector_default, {
+				...item,
+				ref: (el) => {
+					if (el) groupRefs.current[gid] = el;
+					else delete groupRefs.current[gid];
+				},
+				value: state.values?.[gid],
+				onChange: (v) => {
+					handleGroupChange(gid, v);
+					item.onChange?.(v);
+				},
+				ruleConfig: {
+					...item.ruleConfig,
+					customValidator: validationMaps.customValidatorMap[gid]
+				},
+				dataSource: patchedDataSourceMap[gid],
+				headerProps: {
+					...headerProps,
+					...validationMaps.titleTipMap[gid] === void 0 ? {} : { tip: {
+						...headerProps?.tip || {},
+						text: validationMaps.titleTipMap[gid],
+						visible: headerProps?.tip?.visible ?? true
+					} }
+				}
+			}));
+		}));
+	}, [
+		dataSource,
+		state.visibleGroups,
+		state.values,
+		patchedDataSourceMap,
+		validationMaps,
+		groupRefs,
+		handleGroupChange
+	]);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames("pisell-batch-selector", `pisell-batch-selector-${_uniqueId}`),
+		ref: containerRef,
+		style
+	}, renderTabs(), /* @__PURE__ */ React.createElement(IntersectionObserverProvider, {
+		rootMargin: "-70px 0px 0px 0px",
+		disabled: props.tabProps?.visible === false,
+		onFirstVisibleIndexChange: (index) => {
+			if (!isManualChangeIndexRef.current) {
+				if (index === -1 || index === activeIndex) return;
+				setActiveIndex(index);
+			}
+		}
+	}, _content));
+});
+var SelectorGroup_default = SelectorGroup;
+
+//#endregion
+export { SelectorGroup_default as default };