@zat-design/sisyphus-react 3.12.1 → 3.13.1-beta.1

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/README.md CHANGED
@@ -1,5 +1,3 @@
1
- # 西西弗组件库预览地址
2
-
3
1
  [西西弗组件库预览地址](https://procomponents.zhongan.io/)
4
2
 
5
3
  ## 快速上手
@@ -1848,6 +1848,9 @@
1848
1848
  .pro-table .ant-table-cell-with-append > div {
1849
1849
  display: inline-block;
1850
1850
  }
1851
+ .pro-table .ant-table-content > table .ant-table-cell-fix-left-last:after {
1852
+ width: 8px;
1853
+ }
1851
1854
  .pro-table .ant-table-content > table .ant-table-summary {
1852
1855
  color: var(--zaui-text, #343434);
1853
1856
  font-weight: 600;
@@ -2368,6 +2371,10 @@ div.pro-textarea-view::after {
2368
2371
  .pro-form-list .pro-form-list-action > .ant-space-item:first-child > .ant-btn-link {
2369
2372
  margin-left: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
2370
2373
  }
2374
+ .pro-form-list .pro-form-list-action .ant-btn {
2375
+ -webkit-transition: none;
2376
+ transition: none;
2377
+ }
2371
2378
  .pro-form-list .pro-form-list-drag-handle {
2372
2379
  display: -webkit-box;
2373
2380
  display: -webkit-flex;
package/dist/less.esm.css CHANGED
@@ -1848,6 +1848,9 @@
1848
1848
  .pro-table .ant-table-cell-with-append > div {
1849
1849
  display: inline-block;
1850
1850
  }
1851
+ .pro-table .ant-table-content > table .ant-table-cell-fix-left-last:after {
1852
+ width: 8px;
1853
+ }
1851
1854
  .pro-table .ant-table-content > table .ant-table-summary {
1852
1855
  color: var(--zaui-text, #343434);
1853
1856
  font-weight: 600;
@@ -2368,6 +2371,10 @@ div.pro-textarea-view::after {
2368
2371
  .pro-form-list .pro-form-list-action > .ant-space-item:first-child > .ant-btn-link {
2369
2372
  margin-left: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size, 1));
2370
2373
  }
2374
+ .pro-form-list .pro-form-list-action .ant-btn {
2375
+ -webkit-transition: none;
2376
+ transition: none;
2377
+ }
2371
2378
  .pro-form-list .pro-form-list-drag-handle {
2372
2379
  display: -webkit-box;
2373
2380
  display: -webkit-flex;
@@ -34,6 +34,10 @@
34
34
  & > .@{ant-prefix}-space-item:first-child > .@{ant-prefix}-btn-link {
35
35
  margin-left: @zaui-space-size-sm;
36
36
  }
37
+
38
+ & .@{ant-prefix}-btn {
39
+ transition: none;
40
+ }
37
41
  }
38
42
 
39
43
  .pro-form-list-drag-handle {
@@ -27,8 +27,9 @@ import { useFieldProps } from './utils/useFieldProps';
27
27
  import locale from '../locale';
28
28
  import useWatch from './utils/useWatch';
29
29
  import FormsProvider, { useContextForms, useForms } from '../FormsProvider';
30
+ import { useStep } from '../ProStep';
30
31
  var ProForm = function ProForm(props, ref) {
31
- var _localStorage, _ref2;
32
+ var _localStorage, _ref3;
32
33
  var _props$mode = props.mode,
33
34
  mode = _props$mode === void 0 ? 'search' : _props$mode,
34
35
  span = props.span,
@@ -78,11 +79,15 @@ var ProForm = function ProForm(props, ref) {
78
79
  var _ref = useProDrawerFormContext() || {},
79
80
  _ref$source = _ref.source,
80
81
  source = _ref$source === void 0 ? '' : _ref$source;
82
+ // stepSource: 用于区分是哪个组件调用,用于错误提示
83
+ var _ref2 = useStep() || {},
84
+ _ref2$source = _ref2.source,
85
+ stepSource = _ref2$source === void 0 ? '' : _ref2$source;
81
86
  var _useForm = useForm(originForm, {
82
87
  scrollToError: scrollToError,
83
88
  optimize: optimize,
84
89
  formKey: formKey,
85
- source: source || 'ProForm'
90
+ source: source || stepSource || 'ProForm'
86
91
  }),
87
92
  _useForm2 = _slicedToArray(_useForm, 1),
88
93
  form = _useForm2[0];
@@ -220,7 +225,7 @@ var ProForm = function ProForm(props, ref) {
220
225
  className: cls,
221
226
  form: form
222
227
  }, formProps), omit(config, ['isDiffAll'])), otherProps), {}, {
223
- labelAlign: (_ref2 = labelAlign !== null && labelAlign !== void 0 ? labelAlign : config.labelAlign) !== null && _ref2 !== void 0 ? _ref2 : 'left',
228
+ labelAlign: (_ref3 = labelAlign !== null && labelAlign !== void 0 ? labelAlign : config.labelAlign) !== null && _ref3 !== void 0 ? _ref3 : 'left',
224
229
  onValuesChange: handleValuesChange,
225
230
  onFinish: handleFinish,
226
231
  initialValues: _initialValues,
@@ -7,7 +7,7 @@ import _Form from "antd/es/form";
7
7
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
8
8
  import { useContext } from 'react';
9
9
  import { filterInternalFields } from './index';
10
- import { handleScrollToError } from '../../ProEditTable/utils/tools';
10
+ import { handleScrollToError as handleScrollToErrorProEditTable } from '../../ProEditTable/utils/tools';
11
11
  import { FormsContext } from '../../FormsProvider';
12
12
  export var useForm = function useForm(originForm, options) {
13
13
  // 如果没有form实例可以直接把options放在第一个参数位置
@@ -121,7 +121,7 @@ export var useForm = function useForm(originForm, options) {
121
121
  behavior: 'smooth'
122
122
  });
123
123
  }
124
- handleScrollToError();
124
+ handleScrollToErrorProEditTable();
125
125
  throw _context.t0;
126
126
  case 23:
127
127
  case "end":
@@ -1,7 +1,17 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
2
  import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
3
3
  /* eslint-disable no-restricted-syntax */
4
- import _ from 'lodash';
4
+ import _, { isNumber } from 'lodash';
5
+ /**
6
+ * 查找选择器名称的值
7
+ * @param list 表单列表
8
+ * @param selectName 选择器名称
9
+ * @param value 选择器值
10
+ * @param dataSource 数据源
11
+ * @param labelInValue 是否为labelInValue模式
12
+ * @param fieldNames 字段名
13
+ * @param mode 模式
14
+ */
5
15
  var findSelectNameValues = function findSelectNameValues(_ref) {
6
16
  var _ref$list = _ref.list,
7
17
  list = _ref$list === void 0 ? [] : _ref$list,
@@ -56,11 +66,13 @@ export var getSelectList = function getSelectList(_ref2) {
56
66
  var name = otherProps.name,
57
67
  listName = otherProps.listName,
58
68
  form = otherProps.form;
69
+ // 修复formlist无法过滤的问题
70
+ var _name = Array.isArray(name) && isNumber(name[0]) ? listName : name;
59
71
  var firstNumberIndex = listName.lastIndexOf(listName.findLast(function (item) {
60
72
  return typeof item === 'number';
61
73
  }));
62
- var fatherName = (name || listName).slice(0, firstNumberIndex);
63
- var selectName = (name || listName).slice(firstNumberIndex + 1);
74
+ var fatherName = (_name || listName).slice(0, firstNumberIndex);
75
+ var selectName = (_name || listName).slice(firstNumberIndex + 1);
64
76
  return findSelectNameValues({
65
77
  list: form.getFieldValue(fatherName) || [],
66
78
  selectName: selectName,
@@ -8,35 +8,6 @@ import React from 'react';
8
8
  import { forceVisible } from 'react-lazyload';
9
9
  import { useStep } from '../../index';
10
10
  import { getLoadedMap } from '../../utils';
11
- /**
12
- * 检查错误列表并返回第一个错误项
13
- * @param arr DOM元素数组
14
- * @returns 错误元素信息
15
- */
16
- var checkErrorList = function checkErrorList(arr) {
17
- for (var i = 0; i < arr.length; i++) {
18
- if (arr[i].className.includes('errored')) {
19
- return {
20
- errorDom: arr[i],
21
- index: i
22
- };
23
- }
24
- }
25
- return null;
26
- };
27
- /**
28
- * 查找第一个错误的DOM元素
29
- * @returns 错误元素信息
30
- */
31
- var findFirstErrorDom = function findFirstErrorDom() {
32
- var errorList = document.querySelectorAll('.pro-step-com-menu-item');
33
- var hasErrorItem = document.querySelectorAll('.pro-step-com-menu-item .errored');
34
- var hasFormError = document.querySelector('.ant-form-item-explain-error');
35
- if ((hasErrorItem === null || hasErrorItem === void 0 ? void 0 : hasErrorItem.length) && !hasFormError) {
36
- return checkErrorList(errorList);
37
- }
38
- return null;
39
- };
40
11
  /**
41
12
  * 检查所有模块是否已加载完成
42
13
  * @param data 模块加载数据
@@ -83,11 +54,6 @@ var Listener = function Listener(_ref) {
83
54
  values = _context.sent;
84
55
  setTimeout(function () {
85
56
  var localData = localStorage.getItem('cache-pro-step');
86
- var _ref3 = findFirstErrorDom() || {},
87
- errorDom = _ref3.errorDom;
88
- if (errorDom) {
89
- errorDom.click();
90
- }
91
57
  if (localData !== 'false') {
92
58
  var _children$props, _children$props$onCli;
93
59
  children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : (_children$props$onCli = _children$props.onClick) === null || _children$props$onCli === void 0 ? void 0 : _children$props$onCli.call(_children$props, values);
@@ -99,7 +65,7 @@ var Listener = function Listener(_ref) {
99
65
  return _context.stop();
100
66
  }
101
67
  }, _callee);
102
- })), 3000)
68
+ })), 1000)
103
69
  }));
104
70
  };
105
71
  export default Listener;
@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
9
  import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
10
10
  import { debounce } from 'lodash';
11
11
  import { useSetState, useLocalStorageState } from 'ahooks';
12
- import { handleScroll } from './utils';
12
+ import { handleScroll, handleScrollError } from './utils';
13
13
  import Step from './components/Step';
14
14
  import Item from './components/Item';
15
15
  import Listener from './components/Listener';
@@ -37,11 +37,8 @@ var ProStep = function ProStep(_ref) {
37
37
  _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
38
38
  setLocalData = _useLocalStorageState2[1];
39
39
  var ids = Object.keys(registerMap.current);
40
- var targetOffset = resetProps.targetOffset,
41
- _resetProps$collapse = resetProps.collapse,
40
+ var _resetProps$collapse = resetProps.collapse,
42
41
  collapse = _resetProps$collapse === void 0 ? false : _resetProps$collapse,
43
- _resetProps$scrollToE = resetProps.scrollToError,
44
- scrollToError = _resetProps$scrollToE === void 0 ? true : _resetProps$scrollToE,
45
42
  _resetProps$lazyLoad = resetProps.lazyLoad,
46
43
  lazyLoad = _resetProps$lazyLoad === void 0 ? false : _resetProps$lazyLoad;
47
44
  var dataSource = useMemo(function () {
@@ -147,22 +144,6 @@ var ProStep = function ProStep(_ref) {
147
144
  });
148
145
  }
149
146
  };
150
- var handleScrollError = function handleScrollError(data) {
151
- var errorModuleKeys = Object.keys(data).reverse();
152
- if (errorModuleKeys === null || errorModuleKeys === void 0 ? void 0 : errorModuleKeys.length) {
153
- var _dataSource$find;
154
- var firstErrorModuleKey = (_dataSource$find = dataSource.find(function (item) {
155
- var moduleKey = errorModuleKeys.find(function (child) {
156
- return child === item.code;
157
- });
158
- return data[moduleKey];
159
- })) === null || _dataSource$find === void 0 ? void 0 : _dataSource$find.code;
160
- firstErrorModuleKey && handleScroll(firstErrorModuleKey, {
161
- targetOffset: targetOffset,
162
- scrollToError: scrollToError
163
- });
164
- }
165
- };
166
147
  var notify = /*#__PURE__*/function () {
167
148
  var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(params) {
168
149
  var _ref7, excludes, triggerIds, events, res, nextErrorCollection;
@@ -193,7 +174,7 @@ var ProStep = function ProStep(_ref) {
193
174
  setState({
194
175
  errorCollection: nextErrorCollection
195
176
  });
196
- handleScrollError(nextErrorCollection);
177
+ handleScrollError();
197
178
  return _context2.abrupt("return", res);
198
179
  case 12:
199
180
  case "end":
@@ -231,7 +212,7 @@ var ProStep = function ProStep(_ref) {
231
212
  setState({
232
213
  errorCollection: nextErrorCollection
233
214
  });
234
- handleScrollError(nextErrorCollection);
215
+ handleScrollError();
235
216
  return _context3.abrupt("return", result);
236
217
  case 10:
237
218
  case "end":
@@ -252,7 +233,8 @@ var ProStep = function ProStep(_ref) {
252
233
  triggerTo: triggerTo,
253
234
  handleScroll: handleScroll,
254
235
  lazyLoad: lazyLoad,
255
- unNotify: unNotify
236
+ unNotify: unNotify,
237
+ source: 'ProStep'
256
238
  },
257
239
  children: _jsxs("div", {
258
240
  className: "pro-step-wrapper",
@@ -104,6 +104,8 @@ export interface ProStepContextType {
104
104
  lazyLoad?: boolean | any;
105
105
  /** 取消注册函数 */
106
106
  unNotify: (keys: string | string[]) => void;
107
+ /** 来源 */
108
+ source?: string;
107
109
  }
108
110
  /**
109
111
  * 注册参数类型
@@ -175,16 +177,6 @@ export interface ListenerProps {
175
177
  /** 允许其他任意属性 */
176
178
  [key: string]: any;
177
179
  }
178
- /**
179
- * 错误结果类型
180
- * @interface ErrorResult
181
- */
182
- export interface ErrorResult {
183
- /** 错误DOM元素 */
184
- errorDom: HTMLElement | null;
185
- /** 索引 */
186
- index: number;
187
- }
188
180
  /**
189
181
  * 锚点SVG属性类型
190
182
  * @interface AnchorSvgProps
@@ -1,7 +1,11 @@
1
1
  import React from 'react';
2
2
  import type { LoadedMapType } from '../propsType';
3
3
  /**
4
- * 处理滚动到指定元素位置
4
+ * 滚动到错误位置, 延迟200ms解决ProForm错误还未生成
5
+ */
6
+ export declare const handleScrollError: (dom?: HTMLElement) => void;
7
+ /**
8
+ * 处理滚动到指定元素位置, 如发现有错误, 则优先滚动到错误位置
5
9
  * @param id 目标元素的ID
6
10
  * @param options 滚动选项
7
11
  */
@@ -1,7 +1,21 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
2
  import { debounce, pick } from 'lodash';
3
3
  /**
4
- * 处理滚动到指定元素位置
4
+ * 滚动到错误位置, 延迟200ms解决ProForm错误还未生成
5
+ */
6
+ export var handleScrollError = function handleScrollError(dom) {
7
+ setTimeout(function () {
8
+ var errorDom = dom || document.querySelector('[class*="form-item-has-error"]');
9
+ if (errorDom) {
10
+ errorDom.scrollIntoView({
11
+ behavior: 'smooth',
12
+ block: 'center'
13
+ });
14
+ }
15
+ }, 200);
16
+ };
17
+ /**
18
+ * 处理滚动到指定元素位置, 如发现有错误, 则优先滚动到错误位置
5
19
  * @param id 目标元素的ID
6
20
  * @param options 滚动选项
7
21
  */
@@ -13,12 +27,20 @@ export var handleScroll = function handleScroll(id, options) {
13
27
  if (!scrollToError) return;
14
28
  var dom = document.querySelector("#".concat(id));
15
29
  if (dom) {
16
- setTimeout(debounce(function () {
17
- window.scrollTo({
18
- top: dom.offsetTop - targetOffset,
19
- behavior: 'smooth'
20
- });
21
- }, 100), 0);
30
+ // 查找指定id下的错误表单项
31
+ var errorDom = dom.querySelector('[class*="form-item-has-error"]');
32
+ if (errorDom && scrollToError) {
33
+ // 如果发现错误表单项,执行handleScrollError函数
34
+ handleScrollError(errorDom);
35
+ } else {
36
+ // 如果没有错误表单项,则滚动到指定元素位置
37
+ setTimeout(debounce(function () {
38
+ window.scrollTo({
39
+ top: dom.offsetTop - targetOffset,
40
+ behavior: 'smooth'
41
+ });
42
+ }, 100), 0);
43
+ }
22
44
  }
23
45
  };
24
46
  /**
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import type { ProStepTabType, ProStepTabResultType } from './propsType';
3
+ /**
4
+ * 步骤化Tab管理钩子,用于管理多步骤表单或流程的切换和验证
5
+ *
6
+ * @param {ProStepTabType} props 配置参数
7
+ * @returns {ProStepTabResultType} 返回步骤Tab相关方法和状态
8
+ */
9
+ export declare function useStepTab(props?: ProStepTabType): ProStepTabResultType;
10
+ /**
11
+ * 在子组件中获取父级 StepTab 实例的钩子
12
+ * @returns {ProStepTabResultType} 步骤Tab实例
13
+ */
14
+ export declare function useStepTabInstance(): ProStepTabResultType;
15
+ interface ProStepTabComponent extends React.FC<React.PropsWithChildren<ProStepTabType>> {
16
+ useStepTabInstance: typeof useStepTabInstance;
17
+ }
18
+ /**
19
+ * ProStepTab 组件
20
+ */
21
+ declare const ProStepTab: ProStepTabComponent;
22
+ export default ProStepTab;