@zat-design/sisyphus-react 4.0.8 → 4.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.css +1 -1
- package/dist/less.esm.css +1 -1
- package/es/ProForm/components/combination/Group/style/index.less +4 -2
- package/es/ProForm/components/combination/Group/utils/index.d.ts +17 -17
- package/es/ProIcon/index.js +183 -167
- package/es/ProLayout/components/ProFooter/index.js +1 -1
- package/es/ProLayout/index.js +1 -2
- package/es/ProStep/components/Step/index.js +1 -1
- package/es/ProStep/style/index.less +4 -2
- package/es/ProThemeTools/component/ProTools/index.js +108 -89
- package/es/ProThemeTools/context/ThemeContext.d.ts +10 -0
- package/es/ProThemeTools/context/ThemeContext.js +28 -0
- package/es/ProThemeTools/index.js +37 -12
- package/es/ProThemeTools/utils/index.d.ts +9 -1
- package/es/ProThemeTools/utils/index.js +84 -5
- package/lib/ProForm/components/combination/Group/style/index.less +4 -2
- package/lib/ProForm/components/combination/Group/utils/index.d.ts +13 -13
- package/lib/ProIcon/index.js +182 -168
- package/lib/ProLayout/components/ProFooter/index.js +1 -1
- package/lib/ProLayout/index.js +1 -2
- package/lib/ProStep/components/Step/index.js +1 -1
- package/lib/ProStep/style/index.less +4 -2
- package/lib/ProThemeTools/component/ProTools/index.js +108 -90
- package/lib/ProThemeTools/context/ThemeContext.d.ts +10 -0
- package/lib/ProThemeTools/context/ThemeContext.js +31 -2
- package/lib/ProThemeTools/index.js +35 -10
- package/lib/ProThemeTools/utils/index.d.ts +9 -1
- package/lib/ProThemeTools/utils/index.js +86 -6
- package/package.json +1 -1
|
@@ -314,7 +314,8 @@
|
|
|
314
314
|
.@{ant-prefix}-input,
|
|
315
315
|
.@{ant-prefix}-select .@{ant-prefix}-select-selector,
|
|
316
316
|
.@{ant-prefix}-input-number,
|
|
317
|
-
.@{ant-prefix}-input-number-input
|
|
317
|
+
.@{ant-prefix}-input-number-input,
|
|
318
|
+
.@{ant-prefix}-picker{
|
|
318
319
|
// 重置z-index确保正确的层级关系
|
|
319
320
|
position: relative;
|
|
320
321
|
// 重置圆角
|
|
@@ -337,7 +338,8 @@
|
|
|
337
338
|
.@{ant-prefix}-input,
|
|
338
339
|
.@{ant-prefix}-select .@{ant-prefix}-select-selector,
|
|
339
340
|
.@{ant-prefix}-input-number,
|
|
340
|
-
.@{ant-prefix}-input-number-input
|
|
341
|
+
.@{ant-prefix}-input-number-input,
|
|
342
|
+
.@{ant-prefix}-picker{
|
|
341
343
|
border-top-right-radius: 6px;
|
|
342
344
|
border-bottom-right-radius: 6px;
|
|
343
345
|
}
|
|
@@ -75,46 +75,45 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
|
|
|
75
75
|
confirm?: boolean | import("antd").ModalFuncProps | import("../../../render/propsType").FunctionArgs<any, boolean | import("antd").ModalFuncProps>;
|
|
76
76
|
show?: boolean | ReactiveFunction<any, boolean>;
|
|
77
77
|
component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
|
|
78
|
+
style?: React.CSSProperties;
|
|
78
79
|
trim?: boolean;
|
|
79
80
|
normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
|
|
80
81
|
children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
|
|
81
|
-
id?: string;
|
|
82
82
|
className?: string;
|
|
83
83
|
hidden?: boolean;
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
layout?: import("antd/es/form/Form").FormItemLayout;
|
|
85
|
+
help?: React.ReactNode;
|
|
86
|
+
vertical?: boolean;
|
|
87
|
+
preserve?: boolean;
|
|
86
88
|
prefixCls?: string;
|
|
87
|
-
|
|
89
|
+
onReset?: () => void;
|
|
88
90
|
status?: "" | "warning" | "error" | "success" | "validating";
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
id?: string;
|
|
92
|
+
rootClassName?: string;
|
|
93
|
+
isView?: boolean;
|
|
94
|
+
getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
|
|
95
|
+
desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
|
|
94
96
|
htmlFor?: string;
|
|
97
|
+
colon?: boolean;
|
|
95
98
|
labelAlign?: import("antd/es/form/interface").FormLabelAlign;
|
|
96
|
-
|
|
99
|
+
labelCol?: import("antd").ColProps;
|
|
97
100
|
getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
|
|
98
101
|
shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
|
|
99
102
|
trigger?: string;
|
|
103
|
+
validateTrigger?: string | false | string[];
|
|
100
104
|
validateDebounce?: number;
|
|
101
105
|
valuePropName?: string;
|
|
102
|
-
getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
|
|
103
106
|
messageVariables?: Record<string, string>;
|
|
104
107
|
initialValue?: any;
|
|
105
108
|
onMetaChange?: (meta: import("@rc-component/form/lib/Field").MetaEvent) => void;
|
|
106
109
|
isListField?: boolean;
|
|
107
110
|
isList?: boolean;
|
|
108
|
-
upperCase?: boolean;
|
|
109
|
-
desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
|
|
110
|
-
isView?: boolean;
|
|
111
111
|
noStyle?: boolean;
|
|
112
112
|
hasFeedback?: boolean | {
|
|
113
113
|
icons: import("antd/es/form/FormItem").FeedbackIcons;
|
|
114
114
|
};
|
|
115
115
|
validateStatus?: "" | "warning" | "error" | "success" | "validating";
|
|
116
|
-
|
|
117
|
-
help?: React.ReactNode;
|
|
116
|
+
wrapperCol?: import("antd").ColProps;
|
|
118
117
|
fieldId?: string;
|
|
119
118
|
valueType?: import("../../../render/propsType").ProFormValueType;
|
|
120
119
|
switchValue?: [any, any];
|
|
@@ -124,6 +123,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
|
|
|
124
123
|
index?: number;
|
|
125
124
|
}) => string | React.ReactElement<any, any>;
|
|
126
125
|
viewType?: import("../../../render/propsType").ViewType;
|
|
126
|
+
upperCase?: boolean;
|
|
127
127
|
toISOString?: boolean;
|
|
128
128
|
toCSTString?: boolean;
|
|
129
129
|
clearNotShow?: boolean;
|
|
@@ -141,7 +141,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
|
|
|
141
141
|
* 创建组件属性
|
|
142
142
|
*/
|
|
143
143
|
export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
|
|
144
|
-
componentProps: import("lodash").Omit<any, "format" | "
|
|
144
|
+
componentProps: import("lodash").Omit<any, "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow" | "precision">;
|
|
145
145
|
formItemTransform: {
|
|
146
146
|
getValueProps: any;
|
|
147
147
|
normalize: any;
|
package/es/ProIcon/index.js
CHANGED
|
@@ -23,8 +23,53 @@ import { iconMap } from "./config";
|
|
|
23
23
|
import { onBeforeInjection } from "./utils";
|
|
24
24
|
import locale from "../locale";
|
|
25
25
|
import "./symbolIcon.js";
|
|
26
|
+
|
|
27
|
+
// 提取主题色相关辅助函数
|
|
26
28
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
27
29
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
30
|
+
var extractThemeColor = target => {
|
|
31
|
+
var _target$attributes, _styleAttr$value, _match$;
|
|
32
|
+
if (!target) return null;
|
|
33
|
+
var styleAttr = Object.values((_target$attributes = target.attributes) !== null && _target$attributes !== void 0 ? _target$attributes : {})
|
|
34
|
+
// @ts-ignore
|
|
35
|
+
.find(item => item.nodeName === 'style');
|
|
36
|
+
if (!styleAttr) return null;
|
|
37
|
+
|
|
38
|
+
// @ts-ignore
|
|
39
|
+
var match = (_styleAttr$value = styleAttr.value) === null || _styleAttr$value === void 0 ? void 0 : _styleAttr$value.match(/--zaui-brand:(.*?);/);
|
|
40
|
+
return (match === null || match === void 0 || (_match$ = match[1]) === null || _match$ === void 0 ? void 0 : _match$.trim()) || null;
|
|
41
|
+
};
|
|
42
|
+
var updateThemeColor = (newColor, dispatch, primaryColor) => {
|
|
43
|
+
if (!newColor) return;
|
|
44
|
+
dispatch({
|
|
45
|
+
type: 'set',
|
|
46
|
+
payload: {
|
|
47
|
+
theme: {
|
|
48
|
+
primaryColor,
|
|
49
|
+
qiankunPrimaryColor: newColor
|
|
50
|
+
},
|
|
51
|
+
forms: {}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
var getMainAppWindow = () => {
|
|
56
|
+
if (window.parent === window) {
|
|
57
|
+
return window;
|
|
58
|
+
}
|
|
59
|
+
var currentWindow = window;
|
|
60
|
+
while (currentWindow.parent !== currentWindow) {
|
|
61
|
+
// @ts-ignore
|
|
62
|
+
currentWindow = currentWindow.parent;
|
|
63
|
+
}
|
|
64
|
+
return currentWindow;
|
|
65
|
+
};
|
|
66
|
+
var handleMutation = (mutationsList, dispatch, primaryColor, qiankunPrimaryColor) => {
|
|
67
|
+
var targetEntries = mutationsList[0];
|
|
68
|
+
if (!(targetEntries !== null && targetEntries !== void 0 && targetEntries.target)) return;
|
|
69
|
+
var newColor = extractThemeColor(targetEntries.target);
|
|
70
|
+
if (!newColor || qiankunPrimaryColor === newColor) return;
|
|
71
|
+
updateThemeColor(newColor, dispatch, primaryColor);
|
|
72
|
+
};
|
|
28
73
|
var ProIcon = props => {
|
|
29
74
|
var _window, _window2;
|
|
30
75
|
var _useProConfig = useProConfig(),
|
|
@@ -116,27 +161,36 @@ var ProIcon = props => {
|
|
|
116
161
|
var _text = children;
|
|
117
162
|
// svg图标对应文本
|
|
118
163
|
var iconText = tooltip || '';
|
|
119
|
-
var typeIsExistAndIncludeEnglish = _type && /[a-zA-Z]/.test(_type);
|
|
120
164
|
|
|
121
|
-
//
|
|
122
|
-
|
|
123
|
-
if (
|
|
124
|
-
var target = mergedMapList.find(item => item['text-cn'] ===
|
|
165
|
+
// 文本和类型映射处理函数
|
|
166
|
+
var resolveIconMapping = (isIconMode, type, text, mergedMapList, targetTextFill) => {
|
|
167
|
+
if (isIconMode && !type && text) {
|
|
168
|
+
var target = mergedMapList.find(item => item['text-cn'] === text || item['text-en'] === text);
|
|
125
169
|
if (target) {
|
|
126
|
-
|
|
127
|
-
|
|
170
|
+
return {
|
|
171
|
+
type: target.type,
|
|
172
|
+
text: target[targetTextFill]
|
|
173
|
+
};
|
|
128
174
|
}
|
|
129
175
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
// 模式为button下,对传入的type进行icon-指定语言 映射
|
|
133
|
-
if (!isIconMode) {
|
|
134
|
-
if (typeIsExistAndIncludeEnglish) {
|
|
135
|
-
var _target = mergedMapList.find(item => item.type === _type);
|
|
176
|
+
if (!isIconMode && type && /[a-zA-Z]/.test(type)) {
|
|
177
|
+
var _target = mergedMapList.find(item => item.type === type);
|
|
136
178
|
if (_target) {
|
|
137
|
-
|
|
179
|
+
return {
|
|
180
|
+
text: _target[targetTextFill]
|
|
181
|
+
};
|
|
138
182
|
}
|
|
139
183
|
}
|
|
184
|
+
return null;
|
|
185
|
+
};
|
|
186
|
+
var mappingResult = resolveIconMapping(isIconMode, type, _text, mergedMapList, targetTextFill);
|
|
187
|
+
if (mappingResult) {
|
|
188
|
+
if (mappingResult.type) {
|
|
189
|
+
_type = mappingResult.type;
|
|
190
|
+
iconText = mappingResult.text || '';
|
|
191
|
+
} else if (mappingResult.text) {
|
|
192
|
+
_text = mappingResult.text;
|
|
193
|
+
}
|
|
140
194
|
}
|
|
141
195
|
var svgProps = {
|
|
142
196
|
className: proIconClassNames,
|
|
@@ -147,105 +201,112 @@ var ProIcon = props => {
|
|
|
147
201
|
}, rotateStyle), style)
|
|
148
202
|
};
|
|
149
203
|
|
|
204
|
+
// 应用颜色到 SVG 路径元素
|
|
205
|
+
var applyColorToPaths = (svg, color) => {
|
|
206
|
+
var paths = svg.querySelectorAll('path, circle, rect, polygon, ellipse');
|
|
207
|
+
paths.forEach(path => {
|
|
208
|
+
var currentFill = path.getAttribute('fill');
|
|
209
|
+
if (!currentFill || currentFill === 'currentColor') {
|
|
210
|
+
path.setAttribute('fill', color);
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
// 应用颜色到 SVG
|
|
216
|
+
var applyColorToSvg = function applyColorToSvg(svg, color) {
|
|
217
|
+
var isComponentString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
218
|
+
if (!color) {
|
|
219
|
+
svg.style.color = 'currentColor';
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
svg.setAttribute('fill', color);
|
|
223
|
+
svg.style.color = color;
|
|
224
|
+
|
|
225
|
+
// 组件字符串类型需要遍历所有路径元素设置 fill
|
|
226
|
+
if (isComponentString) {
|
|
227
|
+
applyColorToPaths(svg, color);
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
// 创建 SVG beforeInjection 处理函数
|
|
232
|
+
var createSvgBeforeInjection = function createSvgBeforeInjection() {
|
|
233
|
+
var isComponentString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
234
|
+
return svg => {
|
|
235
|
+
// 设置 SVG 的宽高和属性
|
|
236
|
+
svg.setAttribute('width', String(size));
|
|
237
|
+
svg.setAttribute('height', String(size));
|
|
238
|
+
svg.setAttribute('aria-hidden', 'true');
|
|
239
|
+
|
|
240
|
+
// 应用旋转
|
|
241
|
+
if (rotate) {
|
|
242
|
+
var transform = svg.getAttribute('transform') || '';
|
|
243
|
+
svg.setAttribute('transform', `${transform} rotate(${rotate})`);
|
|
244
|
+
svg.style.transform = `rotate(${rotate}deg)`;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
// 应用颜色
|
|
248
|
+
applyColorToSvg(svg, color, isComponentString);
|
|
249
|
+
|
|
250
|
+
// 应用自定义样式
|
|
251
|
+
if (style) {
|
|
252
|
+
Object.keys(style).forEach(key => {
|
|
253
|
+
svg.style[key] = style[key];
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
// 应用 actionMap 的主题配置
|
|
258
|
+
onBeforeInjection({
|
|
259
|
+
svg,
|
|
260
|
+
actionMap,
|
|
261
|
+
primaryColor: isQiankun ? qiankunPrimaryColor : primaryColor
|
|
262
|
+
});
|
|
263
|
+
};
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
// 渲染自定义组件 icon
|
|
267
|
+
var renderComponentIcon = (component, svgProps, color, onClick) => {
|
|
268
|
+
var componentProps = _objectSpread(_objectSpread({}, svgProps), {}, {
|
|
269
|
+
style: _objectSpread({
|
|
270
|
+
color
|
|
271
|
+
}, svgProps === null || svgProps === void 0 ? void 0 : svgProps.style),
|
|
272
|
+
onClick,
|
|
273
|
+
'aria-hidden': 'true'
|
|
274
|
+
});
|
|
275
|
+
return /*#__PURE__*/React.isValidElement(component) ? /*#__PURE__*/React.cloneElement(component, componentProps) : /*#__PURE__*/React.createElement(component, componentProps);
|
|
276
|
+
};
|
|
277
|
+
|
|
150
278
|
// 渲染 icon 的优先级:component > src > type
|
|
151
|
-
var
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
// 字符串类型:当作 SVG 文件路径处理,使用 ReactSVG 加载
|
|
156
|
-
icon = /*#__PURE__*/_jsx(ReactSVG, {
|
|
279
|
+
var renderIcon = () => {
|
|
280
|
+
// component 字符串类型:当作 SVG 文件路径处理
|
|
281
|
+
if (component && typeof component === 'string') {
|
|
282
|
+
return /*#__PURE__*/_jsx(ReactSVG, {
|
|
157
283
|
className: proIconClassNames
|
|
158
284
|
// @ts-ignore
|
|
159
285
|
,
|
|
160
286
|
onClick: onClick,
|
|
161
287
|
src: component,
|
|
162
|
-
beforeInjection:
|
|
163
|
-
// 设置 SVG 的宽高
|
|
164
|
-
svg.setAttribute('width', String(size));
|
|
165
|
-
svg.setAttribute('height', String(size));
|
|
166
|
-
svg.setAttribute('aria-hidden', 'true');
|
|
167
|
-
|
|
168
|
-
// 应用旋转
|
|
169
|
-
if (rotate) {
|
|
170
|
-
var transform = svg.getAttribute('transform') || '';
|
|
171
|
-
svg.setAttribute('transform', `${transform} rotate(${rotate})`);
|
|
172
|
-
svg.style.transform = `rotate(${rotate}deg)`;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
// 应用颜色 - 设置 fill 和 currentColor
|
|
176
|
-
if (color) {
|
|
177
|
-
svg.setAttribute('fill', color);
|
|
178
|
-
svg.style.color = color;
|
|
179
|
-
// 遍历所有路径元素,设置 fill
|
|
180
|
-
var paths = svg.querySelectorAll('path, circle, rect, polygon, ellipse');
|
|
181
|
-
paths.forEach(path => {
|
|
182
|
-
var currentFill = path.getAttribute('fill');
|
|
183
|
-
// 只修改使用 currentColor 或没有设置 fill 的元素
|
|
184
|
-
if (!currentFill || currentFill === 'currentColor') {
|
|
185
|
-
path.setAttribute('fill', color);
|
|
186
|
-
}
|
|
187
|
-
});
|
|
188
|
-
} else {
|
|
189
|
-
// 没有指定颜色时,使用 currentColor
|
|
190
|
-
svg.style.color = 'currentColor';
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
// 应用自定义样式
|
|
194
|
-
if (style) {
|
|
195
|
-
Object.keys(style).forEach(key => {
|
|
196
|
-
svg.style[key] = style[key];
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
// 应用 actionMap 的主题配置
|
|
201
|
-
onBeforeInjection({
|
|
202
|
-
svg,
|
|
203
|
-
actionMap,
|
|
204
|
-
primaryColor: isQiankun ? qiankunPrimaryColor : primaryColor
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
});
|
|
208
|
-
} else {
|
|
209
|
-
// 处理自定义组件
|
|
210
|
-
var componentProps = _objectSpread(_objectSpread({}, svgProps), {}, {
|
|
211
|
-
style: _objectSpread({
|
|
212
|
-
color
|
|
213
|
-
}, svgProps === null || svgProps === void 0 ? void 0 : svgProps.style),
|
|
214
|
-
onClick,
|
|
215
|
-
'aria-hidden': 'true'
|
|
288
|
+
beforeInjection: createSvgBeforeInjection(true)
|
|
216
289
|
});
|
|
290
|
+
}
|
|
217
291
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
icon = /*#__PURE__*/React.cloneElement(component, componentProps);
|
|
222
|
-
} else {
|
|
223
|
-
// 组件类型:直接渲染
|
|
224
|
-
var ComponentType = component;
|
|
225
|
-
icon = /*#__PURE__*/_jsx(ComponentType, _objectSpread({}, componentProps));
|
|
226
|
-
}
|
|
292
|
+
// component 组件类型或实例(排除字符串类型)
|
|
293
|
+
if (component && typeof component !== 'string') {
|
|
294
|
+
return renderComponentIcon(component, svgProps, color, onClick);
|
|
227
295
|
}
|
|
228
|
-
|
|
229
|
-
//
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
svg.setAttribute('fill', color);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}));
|
|
246
|
-
} else {
|
|
247
|
-
// 使用 symbol icon
|
|
248
|
-
icon = /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
|
|
296
|
+
|
|
297
|
+
// src 类型:使用 ReactSVG 加载外部 SVG
|
|
298
|
+
if (src) {
|
|
299
|
+
return /*#__PURE__*/_jsx(ReactSVG, _objectSpread(_objectSpread({}, svgProps), {}, {
|
|
300
|
+
// @ts-ignore
|
|
301
|
+
onClick: onClick,
|
|
302
|
+
"aria-hidden": "true",
|
|
303
|
+
src: src,
|
|
304
|
+
beforeInjection: createSvgBeforeInjection()
|
|
305
|
+
}));
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
// symbol icon
|
|
309
|
+
return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
|
|
249
310
|
style: _objectSpread({
|
|
250
311
|
color
|
|
251
312
|
}, svgProps === null || svgProps === void 0 ? void 0 : svgProps.style),
|
|
@@ -255,7 +316,8 @@ var ProIcon = props => {
|
|
|
255
316
|
xlinkHref: `#icon-${_type}`
|
|
256
317
|
})
|
|
257
318
|
}));
|
|
258
|
-
}
|
|
319
|
+
};
|
|
320
|
+
var icon = renderIcon();
|
|
259
321
|
|
|
260
322
|
// 判断 RenderIcon 是否会被外层 Button 包裹
|
|
261
323
|
// 如果会被包裹(isExtendButtonMode && isIconMode),则内部不使用 Button,避免 button 嵌套
|
|
@@ -292,69 +354,23 @@ var ProIcon = props => {
|
|
|
292
354
|
})
|
|
293
355
|
}));
|
|
294
356
|
useEffect(() => {
|
|
357
|
+
var _themeConfig$data;
|
|
295
358
|
// 处于主子应用情况下才会执行下方逻辑,主题色的变更以主框架的为准
|
|
296
|
-
if (actionMap
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
if (qiankunPrimaryColor !== value) {
|
|
312
|
-
dispatch({
|
|
313
|
-
type: 'set',
|
|
314
|
-
payload: {
|
|
315
|
-
theme: {
|
|
316
|
-
primaryColor,
|
|
317
|
-
qiankunPrimaryColor: value === null || value === void 0 ? void 0 : value.trim()
|
|
318
|
-
},
|
|
319
|
-
forms: {}
|
|
320
|
-
}
|
|
321
|
-
});
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
});
|
|
327
|
-
var zaAccessibilityTarget = document.documentElement;
|
|
328
|
-
if (window.parent === window) {
|
|
329
|
-
// 在最顶层的window环境中,可以直接使用document
|
|
330
|
-
zaAccessibilityTarget = document.documentElement;
|
|
331
|
-
} else {
|
|
332
|
-
// 向上遍历直到找到主应用的window
|
|
333
|
-
var currentWindow = window;
|
|
334
|
-
while (currentWindow.parent !== currentWindow) {
|
|
335
|
-
// @ts-ignore
|
|
336
|
-
currentWindow = currentWindow.parent;
|
|
337
|
-
}
|
|
338
|
-
zaAccessibilityTarget = currentWindow.document.documentElement;
|
|
339
|
-
}
|
|
340
|
-
observer.observe(zaAccessibilityTarget, {
|
|
341
|
-
attributes: true,
|
|
342
|
-
attributeFilter: ['style']
|
|
343
|
-
});
|
|
344
|
-
// 未变更时及初始化时
|
|
345
|
-
var extendFromMainColor = themeConfig === null || themeConfig === void 0 || (_themeConfig$data = themeConfig.data) === null || _themeConfig$data === void 0 ? void 0 : _themeConfig$data.zauiBrand;
|
|
346
|
-
if (extendFromMainColor && qiankunPrimaryColor !== extendFromMainColor) {
|
|
347
|
-
dispatch({
|
|
348
|
-
type: 'set',
|
|
349
|
-
payload: {
|
|
350
|
-
theme: {
|
|
351
|
-
primaryColor,
|
|
352
|
-
qiankunPrimaryColor: extendFromMainColor
|
|
353
|
-
},
|
|
354
|
-
forms: {}
|
|
355
|
-
}
|
|
356
|
-
});
|
|
357
|
-
}
|
|
359
|
+
if (!actionMap || !isQiankun) return;
|
|
360
|
+
observer = new MutationObserver(mutationsList => {
|
|
361
|
+
handleMutation(mutationsList, dispatch, primaryColor, qiankunPrimaryColor);
|
|
362
|
+
});
|
|
363
|
+
var mainWindow = getMainAppWindow();
|
|
364
|
+
var zaAccessibilityTarget = mainWindow.document.documentElement;
|
|
365
|
+
observer.observe(zaAccessibilityTarget, {
|
|
366
|
+
attributes: true,
|
|
367
|
+
attributeFilter: ['style']
|
|
368
|
+
});
|
|
369
|
+
|
|
370
|
+
// 未变更时及初始化时
|
|
371
|
+
var extendFromMainColor = themeConfig === null || themeConfig === void 0 || (_themeConfig$data = themeConfig.data) === null || _themeConfig$data === void 0 ? void 0 : _themeConfig$data.zauiBrand;
|
|
372
|
+
if (extendFromMainColor && qiankunPrimaryColor !== extendFromMainColor) {
|
|
373
|
+
updateThemeColor(extendFromMainColor, dispatch, primaryColor);
|
|
358
374
|
}
|
|
359
375
|
}, []);
|
|
360
376
|
useEffect(() => {
|
|
@@ -14,7 +14,7 @@ var ProFooter = props => {
|
|
|
14
14
|
className = props.className,
|
|
15
15
|
children = props.children,
|
|
16
16
|
_props$zIndex = props.zIndex,
|
|
17
|
-
zIndex = _props$zIndex === void 0 ?
|
|
17
|
+
zIndex = _props$zIndex === void 0 ? 98 : _props$zIndex,
|
|
18
18
|
_props$sideDom = props.sideDom,
|
|
19
19
|
sideDom = _props$sideDom === void 0 ? '.pro-layout-sider-nav' : _props$sideDom,
|
|
20
20
|
_props$contentDom = props.contentDom,
|
package/es/ProLayout/index.js
CHANGED
|
@@ -11,7 +11,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
11
11
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
12
|
/* eslint-disable func-call-spacing */
|
|
13
13
|
/* eslint-disable no-spaced-func */
|
|
14
|
-
import { message } from 'antd';
|
|
15
14
|
import { createContext, useMemo, useRef, useCallback } from 'react';
|
|
16
15
|
import classNames from 'classnames';
|
|
17
16
|
import { useSetState, useToggle, useDeepCompareEffect } from 'ahooks';
|
|
@@ -92,7 +91,7 @@ var ProLayout = props => {
|
|
|
92
91
|
}, [props.collapsed]);
|
|
93
92
|
useDeepCompareEffect(() => {
|
|
94
93
|
if (Array.isArray(dataSource) && !dataSource.length) {
|
|
95
|
-
return
|
|
94
|
+
return;
|
|
96
95
|
}
|
|
97
96
|
var userData = transformMenus(dataSource, pathPrefix);
|
|
98
97
|
// 确保 menus 始终是一个数组
|
|
@@ -59,7 +59,7 @@ export var Step = _ref => {
|
|
|
59
59
|
setOnOff(false);
|
|
60
60
|
};
|
|
61
61
|
return /*#__PURE__*/_jsxs("div", {
|
|
62
|
-
className: `pro-step ${onOff ? 'open' : 'closed'}`,
|
|
62
|
+
className: `pro-step ${onOff ? 'pro-step-open' : 'pro-step-closed'}`,
|
|
63
63
|
style: _objectSpread({
|
|
64
64
|
top: fixedTop !== null && fixedTop !== void 0 ? fixedTop : 0,
|
|
65
65
|
maxHeight: `calc(100vh - ${fixedTop}px)`
|
|
@@ -115,6 +115,7 @@
|
|
|
115
115
|
align-items: center;
|
|
116
116
|
justify-content: center;
|
|
117
117
|
width: 48px;
|
|
118
|
+
min-width: 48px;
|
|
118
119
|
height: 100%;
|
|
119
120
|
|
|
120
121
|
> svg {
|
|
@@ -168,6 +169,7 @@
|
|
|
168
169
|
|
|
169
170
|
> .pro-step-menu-name {
|
|
170
171
|
color: #0a0a0a;
|
|
172
|
+
text-align: left;
|
|
171
173
|
|
|
172
174
|
&.disabled {
|
|
173
175
|
color: #626366;
|
|
@@ -208,11 +210,11 @@
|
|
|
208
210
|
}
|
|
209
211
|
}
|
|
210
212
|
|
|
211
|
-
&.open {
|
|
213
|
+
&.pro-step-open {
|
|
212
214
|
width: 200px;
|
|
213
215
|
}
|
|
214
216
|
|
|
215
|
-
&.closed {
|
|
217
|
+
&.pro-step-closed {
|
|
216
218
|
width: 48px;
|
|
217
219
|
}
|
|
218
220
|
}
|