yootd 0.2.21 → 0.2.23
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/tabs/index.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
4
|
-
var _excluded = ["size", "capsule", "className", "items", "onChange", "activeKey", "destroyInactiveTabPane", "isTabMargin"];
|
4
|
+
var _excluded = ["size", "capsule", "className", "items", "onChange", "activeKey", "defaultActiveKey", "destroyInactiveTabPane", "isTabMargin"];
|
5
5
|
import { Tabs as AntTabs, Radio } from 'antd';
|
6
6
|
import React, { useEffect, useState } from 'react';
|
7
7
|
import { useBem } from "../hooks/useBem";
|
@@ -14,16 +14,18 @@ export var TabsComponent = function TabsComponent(_ref) {
|
|
14
14
|
items = _ref.items,
|
15
15
|
_onChange = _ref.onChange,
|
16
16
|
activeKey = _ref.activeKey,
|
17
|
+
defaultActiveKey = _ref.defaultActiveKey,
|
17
18
|
_ref$destroyInactiveT = _ref.destroyInactiveTabPane,
|
18
19
|
destroyInactiveTabPane = _ref$destroyInactiveT === void 0 ? false : _ref$destroyInactiveT,
|
19
20
|
_ref$isTabMargin = _ref.isTabMargin,
|
20
21
|
isTabMargin = _ref$isTabMargin === void 0 ? true : _ref$isTabMargin,
|
21
22
|
rest = _objectWithoutProperties(_ref, _excluded);
|
22
23
|
var mb = useBem('tabs');
|
23
|
-
|
24
|
+
// const [key, setKey] = useState<string>();
|
25
|
+
var _useState = useState(activeKey !== null && activeKey !== void 0 ? activeKey : defaultActiveKey),
|
24
26
|
_useState2 = _slicedToArray(_useState, 2),
|
25
|
-
|
26
|
-
|
27
|
+
capsuleKey = _useState2[0],
|
28
|
+
setCapsuleKey = _useState2[1];
|
27
29
|
var _useState3 = useState(new Set()),
|
28
30
|
_useState4 = _slicedToArray(_useState3, 2),
|
29
31
|
renderKey = _useState4[0],
|
@@ -40,22 +42,28 @@ export var TabsComponent = function TabsComponent(_ref) {
|
|
40
42
|
// 默认为小尺寸
|
41
43
|
_className = "".concat(mb.b('large'));
|
42
44
|
}
|
45
|
+
console.log("capsuleKey", capsuleKey);
|
46
|
+
|
43
47
|
// 给key设置默认值
|
44
48
|
useEffect(function () {
|
45
|
-
if (
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
+
if (capsuleKey != null) {
|
50
|
+
setRenderKey(function (prev) {
|
51
|
+
var newSet = new Set(prev);
|
52
|
+
newSet.add(capsuleKey);
|
53
|
+
return newSet;
|
49
54
|
});
|
50
55
|
} else {
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
var _items$0$
|
55
|
-
|
56
|
+
setRenderKey(function (prev) {
|
57
|
+
var _items$;
|
58
|
+
var newSet = new Set(prev);
|
59
|
+
var firstKey = items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.key;
|
60
|
+
if (firstKey != null) {
|
61
|
+
newSet.add(firstKey);
|
62
|
+
}
|
63
|
+
return newSet;
|
56
64
|
});
|
57
65
|
}
|
58
|
-
}, [
|
66
|
+
}, [capsuleKey, items]);
|
59
67
|
return /*#__PURE__*/React.createElement("div", {
|
60
68
|
className: "".concat(mb)
|
61
69
|
}, capsule ? /*#__PURE__*/React.createElement("div", {
|
@@ -65,22 +73,30 @@ export var TabsComponent = function TabsComponent(_ref) {
|
|
65
73
|
style: {
|
66
74
|
paddingBottom: isTabMargin ? 16 : 0
|
67
75
|
}
|
68
|
-
}, /*#__PURE__*/React.createElement(Radio.Group, {
|
69
|
-
value:
|
76
|
+
}, /*#__PURE__*/React.createElement(Radio.Group, _extends({}, activeKey != null ? {
|
77
|
+
value: activeKey
|
78
|
+
} : {}, defaultActiveKey != null ? {
|
79
|
+
defaultValue: defaultActiveKey
|
80
|
+
} : {}, {
|
70
81
|
onChange: function onChange(e) {
|
71
|
-
setKey(e.target.value);
|
72
82
|
setRenderKey(function (pre) {
|
73
83
|
return pre.add(e.target.value);
|
74
84
|
});
|
85
|
+
if (activeKey == null) {
|
86
|
+
setCapsuleKey(e.target.value);
|
87
|
+
}
|
75
88
|
_onChange === null || _onChange === void 0 || _onChange(e.target.value);
|
76
|
-
}
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
89
|
+
},
|
90
|
+
block: true,
|
91
|
+
optionType: "button",
|
92
|
+
options: items === null || items === void 0 ? void 0 : items.map(function (item) {
|
93
|
+
return {
|
94
|
+
value: item.key,
|
95
|
+
label: item.label
|
96
|
+
};
|
97
|
+
})
|
82
98
|
}))), destroyInactiveTabPane ? /*#__PURE__*/React.createElement("div", null, items === null || items === void 0 || (_items$find = items.find(function (item) {
|
83
|
-
return item.key ===
|
99
|
+
return item.key === capsuleKey;
|
84
100
|
})) === null || _items$find === void 0 ? void 0 : _items$find.children) : /*#__PURE__*/React.createElement("div", {
|
85
101
|
className: "".concat(mb.b('capsule').e('value'))
|
86
102
|
}, items === null || items === void 0 || (_items$filter = items.filter(function (item) {
|
@@ -89,17 +105,17 @@ export var TabsComponent = function TabsComponent(_ref) {
|
|
89
105
|
return /*#__PURE__*/React.createElement("div", {
|
90
106
|
key: item.key,
|
91
107
|
style: {
|
92
|
-
display:
|
108
|
+
display: capsuleKey === item.key ? 'block' : 'none'
|
93
109
|
}
|
94
110
|
}, item.children);
|
95
111
|
}))) : /*#__PURE__*/React.createElement(AntTabs, _extends({
|
96
|
-
activeKey:
|
112
|
+
activeKey: activeKey,
|
113
|
+
defaultActiveKey: defaultActiveKey,
|
97
114
|
size: size,
|
98
115
|
items: items,
|
99
116
|
className: "".concat(className !== null && className !== void 0 ? className : '', " ").concat(_className, " ").concat(isTabMargin ? '' : mb.b('istabmargin'), " "),
|
100
117
|
destroyInactiveTabPane: destroyInactiveTabPane,
|
101
118
|
onChange: function onChange(e) {
|
102
|
-
setKey(e);
|
103
119
|
_onChange === null || _onChange === void 0 || _onChange(e);
|
104
120
|
}
|
105
121
|
}, rest)));
|
@@ -115,7 +115,8 @@ var InternalUpload = function InternalUpload(props, ref) {
|
|
115
115
|
url: item.filename,
|
116
116
|
uid: file.uid,
|
117
117
|
preview: item.filename,
|
118
|
-
status: 'done'
|
118
|
+
status: 'done',
|
119
|
+
size: file.size
|
119
120
|
});
|
120
121
|
});
|
121
122
|
onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(filteredList), _list));
|
@@ -142,7 +142,8 @@ var InternalUpload = function InternalUpload(props, ref) {
|
|
142
142
|
url: item.filename,
|
143
143
|
uid: file.uid,
|
144
144
|
preview: item.filename,
|
145
|
-
status: 'done'
|
145
|
+
status: 'done',
|
146
|
+
size: file.size
|
146
147
|
});
|
147
148
|
});
|
148
149
|
onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(fileList), _fileList));
|
@@ -6,6 +6,7 @@ import { useBem } from "../hooks/useBem";
|
|
6
6
|
import "./index.scss";
|
7
7
|
export var WithSearchForm = function WithSearchForm(_ref) {
|
8
8
|
var children = _ref.children;
|
9
|
+
var childrenArray = React.Children.toArray(children);
|
9
10
|
var mb = useBem('WithSearchForm');
|
10
11
|
// 外层dom实例
|
11
12
|
var formRef = useRef(null);
|
@@ -13,7 +14,7 @@ export var WithSearchForm = function WithSearchForm(_ref) {
|
|
13
14
|
var btnRef = useRef(null);
|
14
15
|
// 传进来的children dom数组实例
|
15
16
|
var childRefs = useRef([]);
|
16
|
-
var _useState = useState(
|
17
|
+
var _useState = useState(childrenArray.length),
|
17
18
|
_useState2 = _slicedToArray(_useState, 2),
|
18
19
|
visibleCount = _useState2[0],
|
19
20
|
setVisibleCount = _useState2[1];
|
@@ -23,7 +24,7 @@ export var WithSearchForm = function WithSearchForm(_ref) {
|
|
23
24
|
isExpanded = _useState4[0],
|
24
25
|
setIsExpanded = _useState4[1];
|
25
26
|
// 计算出应该显示的children数量
|
26
|
-
var _useState5 = useState(
|
27
|
+
var _useState5 = useState(childrenArray.length),
|
27
28
|
_useState6 = _slicedToArray(_useState5, 2),
|
28
29
|
calculatedCount = _useState6[0],
|
29
30
|
setCalculatedCount = _useState6[1];
|
@@ -70,7 +71,7 @@ export var WithSearchForm = function WithSearchForm(_ref) {
|
|
70
71
|
// 保存计算出的数量
|
71
72
|
setCalculatedCount(itemCount);
|
72
73
|
// 根据展开状态设置可见数量
|
73
|
-
setVisibleCount(isExpanded ?
|
74
|
+
setVisibleCount(isExpanded ? childrenArray.length : itemCount);
|
74
75
|
};
|
75
76
|
useEffect(function () {
|
76
77
|
// 创建 ResizeObserver 实例
|
@@ -85,12 +86,12 @@ export var WithSearchForm = function WithSearchForm(_ref) {
|
|
85
86
|
return function () {
|
86
87
|
resizeObserver.disconnect();
|
87
88
|
};
|
88
|
-
}, [
|
89
|
+
}, [childrenArray, isExpanded]);
|
89
90
|
|
90
91
|
// 处理展开/收起的点击事件
|
91
92
|
var handleExpandClick = function handleExpandClick() {
|
92
93
|
setIsExpanded(!isExpanded);
|
93
|
-
setVisibleCount(!isExpanded ?
|
94
|
+
setVisibleCount(!isExpanded ? childrenArray.length : calculatedCount);
|
94
95
|
};
|
95
96
|
return /*#__PURE__*/React.createElement("div", {
|
96
97
|
ref: formRef,
|
@@ -103,7 +104,7 @@ export var WithSearchForm = function WithSearchForm(_ref) {
|
|
103
104
|
flexWrap: 'wrap',
|
104
105
|
width: '100%'
|
105
106
|
}
|
106
|
-
},
|
107
|
+
}, childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.map(function (child, index) {
|
107
108
|
return /*#__PURE__*/React.createElement("div", {
|
108
109
|
key: "measure-".concat(index),
|
109
110
|
ref: function ref(el) {
|
@@ -113,7 +114,7 @@ export var WithSearchForm = function WithSearchForm(_ref) {
|
|
113
114
|
display: 'inline-block'
|
114
115
|
}
|
115
116
|
}, child);
|
116
|
-
})),
|
117
|
+
})), childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.slice(0, visibleCount), /*#__PURE__*/React.createElement("div", {
|
117
118
|
ref: btnRef
|
118
119
|
}, /*#__PURE__*/React.createElement(Form.Item, {
|
119
120
|
className: "mb-4"
|
@@ -123,7 +124,7 @@ export var WithSearchForm = function WithSearchForm(_ref) {
|
|
123
124
|
}, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
|
124
125
|
type: "default",
|
125
126
|
htmlType: "reset"
|
126
|
-
}, "\u91CD\u7F6E"), (
|
127
|
+
}, "\u91CD\u7F6E"), (childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.length) > calculatedCount ? /*#__PURE__*/React.createElement("span", {
|
127
128
|
className: "".concat(mb.e('expanded')),
|
128
129
|
onClick: handleExpandClick
|
129
130
|
}, isExpanded ? '收起' : '展开', ' ', /*#__PURE__*/React.createElement(DownOutlined, {
|