@aloudata/aloudata-design 0.2.0-beta.19 → 0.2.0-beta.21
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/es/Button/style/index.less +47 -8
- package/es/Input/components/Input/index.d.ts +2 -1
- package/es/Input/components/Input/index.js +1 -0
- package/es/Input/style/index.less +5 -4
- package/es/Select/BaseSelect.js +13 -1
- package/es/Select/OptionsList/index.js +1 -1
- package/es/Select/Selector/index.js +5 -3
- package/es/Select/style/index.less +2 -1
- package/es/Table/index.d.ts +1 -1
- package/es/Table/index.js +10 -5
- package/es/Table/interface.d.ts +4 -1
- package/es/Table/style/index.less +11 -13
- package/lib/Button/style/index.less +47 -8
- package/lib/Input/components/Input/index.d.ts +2 -1
- package/lib/Input/components/Input/index.js +1 -0
- package/lib/Input/style/index.less +5 -4
- package/lib/Select/BaseSelect.js +13 -1
- package/lib/Select/OptionsList/index.js +1 -1
- package/lib/Select/Selector/index.js +5 -3
- package/lib/Select/style/index.less +2 -1
- package/lib/Table/index.d.ts +1 -1
- package/lib/Table/index.js +10 -5
- package/lib/Table/interface.d.ts +4 -1
- package/lib/Table/style/index.less +11 -13
- package/package.json +3 -2
|
@@ -44,8 +44,15 @@
|
|
|
44
44
|
border-radius: @border-radius-base;
|
|
45
45
|
text-shadow: @text-shadow;
|
|
46
46
|
|
|
47
|
+
&:focus {
|
|
48
|
+
background-color: @B40;
|
|
49
|
+
border-color: @B40;
|
|
50
|
+
box-shadow: none;
|
|
51
|
+
border-radius: @border-radius-base;
|
|
52
|
+
text-shadow: @text-shadow;
|
|
53
|
+
}
|
|
54
|
+
|
|
47
55
|
&:hover,
|
|
48
|
-
&:focus,
|
|
49
56
|
&:active,
|
|
50
57
|
&.ant-btn-loading {
|
|
51
58
|
background-color: @B20;
|
|
@@ -57,6 +64,7 @@
|
|
|
57
64
|
background-color: @NL90;
|
|
58
65
|
border-color: transparent;
|
|
59
66
|
color: @NL80;
|
|
67
|
+
cursor: default;
|
|
60
68
|
|
|
61
69
|
&:hover,
|
|
62
70
|
&:focus,
|
|
@@ -75,13 +83,15 @@
|
|
|
75
83
|
text-shadow: @text-shadow;
|
|
76
84
|
box-shadow: unset;
|
|
77
85
|
|
|
78
|
-
&:
|
|
79
|
-
background-color: @
|
|
80
|
-
border-color: @
|
|
86
|
+
&:focus {
|
|
87
|
+
background-color: @SC40;
|
|
88
|
+
border-color: @SC40;
|
|
81
89
|
color: @ND0;
|
|
90
|
+
text-shadow: @text-shadow;
|
|
91
|
+
box-shadow: unset;
|
|
82
92
|
}
|
|
83
93
|
|
|
84
|
-
&:
|
|
94
|
+
&:hover,
|
|
85
95
|
&:active,
|
|
86
96
|
&.ant-btn-loading {
|
|
87
97
|
background-color: @SC20;
|
|
@@ -93,6 +103,7 @@
|
|
|
93
103
|
background-color: @NL90;
|
|
94
104
|
border-color: transparent;
|
|
95
105
|
color: @NL80;
|
|
106
|
+
cursor: default;
|
|
96
107
|
|
|
97
108
|
&:hover,
|
|
98
109
|
&:focus,
|
|
@@ -112,8 +123,16 @@
|
|
|
112
123
|
border-radius: @border-radius-base;
|
|
113
124
|
text-shadow: @text-shadow;
|
|
114
125
|
|
|
126
|
+
&:focus {
|
|
127
|
+
background-color: @BG100;
|
|
128
|
+
border-color: @NL90;
|
|
129
|
+
color: @NL30;
|
|
130
|
+
box-shadow: none;
|
|
131
|
+
border-radius: @border-radius-base;
|
|
132
|
+
text-shadow: @text-shadow;
|
|
133
|
+
}
|
|
134
|
+
|
|
115
135
|
&:hover,
|
|
116
|
-
&:focus,
|
|
117
136
|
&:active,
|
|
118
137
|
&.ant-btn-loading {
|
|
119
138
|
background-color: @NL97;
|
|
@@ -125,6 +144,7 @@
|
|
|
125
144
|
background-color: @BG100;
|
|
126
145
|
border-color: @NL90;
|
|
127
146
|
color: @NL80;
|
|
147
|
+
cursor: default;
|
|
128
148
|
|
|
129
149
|
&:hover,
|
|
130
150
|
&:focus,
|
|
@@ -144,8 +164,16 @@
|
|
|
144
164
|
border-radius: @border-radius-base;
|
|
145
165
|
text-shadow: @text-shadow;
|
|
146
166
|
|
|
167
|
+
&:focus {
|
|
168
|
+
background-color: @BG100;
|
|
169
|
+
border-color: @BG100;
|
|
170
|
+
color: @NL30;
|
|
171
|
+
box-shadow: none;
|
|
172
|
+
border-radius: @border-radius-base;
|
|
173
|
+
text-shadow: @text-shadow;
|
|
174
|
+
}
|
|
175
|
+
|
|
147
176
|
&:hover,
|
|
148
|
-
&:focus,
|
|
149
177
|
&:active,
|
|
150
178
|
&.ant-btn-loading {
|
|
151
179
|
background-color: @NL97;
|
|
@@ -157,6 +185,7 @@
|
|
|
157
185
|
background-color: transparent;
|
|
158
186
|
border-color: transparent;
|
|
159
187
|
color: @NL80;
|
|
188
|
+
cursor: default;
|
|
160
189
|
|
|
161
190
|
&:hover,
|
|
162
191
|
&:focus,
|
|
@@ -177,8 +206,17 @@
|
|
|
177
206
|
border-radius: @border-radius-base;
|
|
178
207
|
text-shadow: @text-shadow;
|
|
179
208
|
|
|
209
|
+
&:focus {
|
|
210
|
+
background-color: @BG100;
|
|
211
|
+
border-color: @BG100;
|
|
212
|
+
color: @B40;
|
|
213
|
+
font-weight: 400;
|
|
214
|
+
box-shadow: none;
|
|
215
|
+
border-radius: @border-radius-base;
|
|
216
|
+
text-shadow: @text-shadow;
|
|
217
|
+
}
|
|
218
|
+
|
|
180
219
|
&:hover,
|
|
181
|
-
&:focus,
|
|
182
220
|
&:active,
|
|
183
221
|
&.ant-btn-loading {
|
|
184
222
|
background-color: @BG100;
|
|
@@ -190,6 +228,7 @@
|
|
|
190
228
|
background-color: transparent;
|
|
191
229
|
border-color: transparent;
|
|
192
230
|
color: @NL80;
|
|
231
|
+
cursor: default;
|
|
193
232
|
|
|
194
233
|
&:hover,
|
|
195
234
|
&:focus,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import type { InputProps
|
|
2
|
+
import type { InputProps } from 'antd/lib/input/Input';
|
|
3
|
+
import type { InputRef } from 'rc-input';
|
|
3
4
|
interface IShowCountProps {
|
|
4
5
|
formatter: (args: {
|
|
5
6
|
count: number;
|
|
@@ -88,9 +88,10 @@
|
|
|
88
88
|
height: 22px;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
91
|
+
|
|
92
|
+
.ant-input-suffix {
|
|
93
|
+
.anticon-close-circle.ant-input-clear-icon {
|
|
94
|
+
.ald-iconfont('\e616');
|
|
95
|
+
}
|
|
95
96
|
}
|
|
96
97
|
}
|
package/es/Select/BaseSelect.js
CHANGED
|
@@ -113,7 +113,19 @@ export var Select = function Select(props, ref) {
|
|
|
113
113
|
activeIndex = _useState10[0],
|
|
114
114
|
setActiveIndex = _useState10[1];
|
|
115
115
|
|
|
116
|
-
var
|
|
116
|
+
var initOptionChecked = function initOptionChecked() {
|
|
117
|
+
if (Array.isArray(value)) {
|
|
118
|
+
return value;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
if (value === null) {
|
|
122
|
+
return [];
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
return [value];
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
var _useState11 = useState(initOptionChecked()),
|
|
117
129
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
118
130
|
optionChecked = _useState12[0],
|
|
119
131
|
setOptionChecked = _useState12[1]; // Exhibition value (tempvalue + value);
|
|
@@ -93,7 +93,7 @@ var OptionsList = function OptionsList(props, ref) {
|
|
|
93
93
|
}, [selected]); // 部分选中
|
|
94
94
|
// 全部列表选项选中
|
|
95
95
|
|
|
96
|
-
var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length); // ”全部“选项是否选中
|
|
96
|
+
var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length) || (selected === null || selected === void 0 ? void 0 : selected.length) === ZERO_LENGTH; // ”全部“选项是否选中
|
|
97
97
|
|
|
98
98
|
var allOptionChecked = isAllChecked && Array.isArray(optionChecked) && optionChecked.length === ZERO_LENGTH; // 点击全选
|
|
99
99
|
|
|
@@ -175,8 +175,10 @@ var Selector = function Selector(props, ref) {
|
|
|
175
175
|
return [].concat(_toConsumableArray(prev), [curr, ',']);
|
|
176
176
|
}, []);
|
|
177
177
|
|
|
178
|
-
if (Array.isArray(value) && value.length === filteredOptions.length
|
|
179
|
-
return /*#__PURE__*/React.createElement("span",
|
|
178
|
+
if (Array.isArray(value) && (value.length === filteredOptions.length || isEmpty(value))) {
|
|
179
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
180
|
+
className: "multipleAll"
|
|
181
|
+
}, "\u5168\u90E8");
|
|
180
182
|
}
|
|
181
183
|
|
|
182
184
|
var renderItem = function renderItem(valueItem) {
|
|
@@ -243,7 +245,7 @@ var Selector = function Selector(props, ref) {
|
|
|
243
245
|
}, /*#__PURE__*/React.createElement("div", {
|
|
244
246
|
className: classnames("".concat(prefix, "-values-wrapper")),
|
|
245
247
|
ref: selectValuesRef
|
|
246
|
-
}, multiple ? renderMultipleValue() : renderSingleValue(), renderPlaceHolder())), /*#__PURE__*/React.createElement("div", {
|
|
248
|
+
}, multiple ? renderMultipleValue() : renderSingleValue(), !multiple && renderPlaceHolder())), /*#__PURE__*/React.createElement("div", {
|
|
247
249
|
"aria-hidden": "true",
|
|
248
250
|
className: classnames("".concat(prefix, "-arrow"), _defineProperty({}, "".concat(prefix, "-arrow-focused"), visible)),
|
|
249
251
|
onClick: showClose ? onAllClearClick : undefined
|
|
@@ -293,6 +293,7 @@
|
|
|
293
293
|
|
|
294
294
|
&-values-wrapper {
|
|
295
295
|
line-height: 26px;
|
|
296
|
+
font-size: 12px;
|
|
296
297
|
}
|
|
297
298
|
|
|
298
299
|
&-selector-label {
|
|
@@ -472,7 +473,7 @@
|
|
|
472
473
|
border-color: @NL90;
|
|
473
474
|
// background-color: @BG100;
|
|
474
475
|
border-radius: 4px;
|
|
475
|
-
|
|
476
|
+
box-shadow: none;
|
|
476
477
|
// &::after {
|
|
477
478
|
// // border-color: @B40;
|
|
478
479
|
// }
|
package/es/Table/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ITableProps } from './interface';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<ITableProps<Record<string, unknown>>, "onChange" | "loading" | "data" | "columns" | "total" | "renderHeaderLeft" | "renderHeaderRight" | "onRowSelected" | "loadMore" | "hasNextPage" | "sortable" | "defaultSort" | "resizeColumn" | "sortDirections" | "showHeader" | "innerScroll" | "scrollThreshold" | "rowKey"> & React.RefAttributes<unknown>>;
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<ITableProps<Record<string, unknown>>, "onChange" | "loading" | "data" | "ellipsis" | "columns" | "total" | "renderHeaderLeft" | "renderHeaderRight" | "onRowSelected" | "loadMore" | "hasNextPage" | "sortable" | "defaultSort" | "resizeColumn" | "sortDirections" | "showHeader" | "innerScroll" | "scrollThreshold" | "rowClassName" | "renderEmpty" | "rowKey"> & React.RefAttributes<unknown>>;
|
|
4
4
|
export default _default;
|
package/es/Table/index.js
CHANGED
|
@@ -62,6 +62,11 @@ function Table(_ref, ref) {
|
|
|
62
62
|
innerScroll = _ref$innerScroll === void 0 ? false : _ref$innerScroll,
|
|
63
63
|
_ref$scrollThreshold = _ref.scrollThreshold,
|
|
64
64
|
scrollThreshold = _ref$scrollThreshold === void 0 ? '150px' : _ref$scrollThreshold,
|
|
65
|
+
_ref$rowClassName = _ref.rowClassName,
|
|
66
|
+
rowClassName = _ref$rowClassName === void 0 ? '' : _ref$rowClassName,
|
|
67
|
+
_ref$ellipsis = _ref.ellipsis,
|
|
68
|
+
ellipsis = _ref$ellipsis === void 0 ? true : _ref$ellipsis,
|
|
69
|
+
renderEmpty = _ref.renderEmpty,
|
|
65
70
|
rowKey = _ref.rowKey;
|
|
66
71
|
|
|
67
72
|
var _React$useState = React.useState(null),
|
|
@@ -185,9 +190,7 @@ function Table(_ref, ref) {
|
|
|
185
190
|
data: data,
|
|
186
191
|
disableMultiSort: true,
|
|
187
192
|
disableSortBy: !sortable,
|
|
188
|
-
getRowId:
|
|
189
|
-
return rowKey;
|
|
190
|
-
} : rowKey,
|
|
193
|
+
getRowId: rowKey,
|
|
191
194
|
initialState: {
|
|
192
195
|
sortBy: getInitSortBy()
|
|
193
196
|
}
|
|
@@ -364,13 +367,15 @@ function Table(_ref, ref) {
|
|
|
364
367
|
}
|
|
365
368
|
|
|
366
369
|
if (!loading && !rows.length) {
|
|
367
|
-
return /*#__PURE__*/React.createElement(Empty, {
|
|
370
|
+
return renderEmpty ? renderEmpty() : /*#__PURE__*/React.createElement(Empty, {
|
|
368
371
|
description: "\u5F53\u524D\u65E0\u6570\u636E"
|
|
369
372
|
});
|
|
370
373
|
}
|
|
371
374
|
|
|
372
375
|
var renderRowList = function renderRowList() {
|
|
373
376
|
return data.map(function (item, index) {
|
|
377
|
+
var _classnames;
|
|
378
|
+
|
|
374
379
|
var row = rows[index];
|
|
375
380
|
prepareRow(row);
|
|
376
381
|
|
|
@@ -380,7 +385,7 @@ function Table(_ref, ref) {
|
|
|
380
385
|
|
|
381
386
|
return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, rowProps), {}, {
|
|
382
387
|
style: _objectSpread({}, rowStyle),
|
|
383
|
-
className: classnames("".concat(prefixCls, "-row"),
|
|
388
|
+
className: classnames("".concat(prefixCls, "-row"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId), _defineProperty(_classnames, rowClassName, rowClassName), _defineProperty(_classnames, "".concat(prefixCls, "-row-ellipsis"), ellipsis), _classnames)),
|
|
384
389
|
onClick: function onClick() {
|
|
385
390
|
return onRowClick(row);
|
|
386
391
|
},
|
package/es/Table/interface.d.ts
CHANGED
|
@@ -35,5 +35,8 @@ export interface ITableProps<T extends object> {
|
|
|
35
35
|
innerScroll?: boolean;
|
|
36
36
|
ref?: React.RefObject<unknown>;
|
|
37
37
|
scrollThreshold?: string | number;
|
|
38
|
-
rowKey?:
|
|
38
|
+
rowKey?: ((row: any) => string);
|
|
39
|
+
rowClassName?: string;
|
|
40
|
+
ellipsis?: boolean;
|
|
41
|
+
renderEmpty?: () => React.ReactNode;
|
|
39
42
|
}
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
overflow: hidden;
|
|
13
|
-
user-select: none;
|
|
14
13
|
|
|
15
14
|
&-page-loading {
|
|
16
15
|
opacity: 0;
|
|
@@ -31,9 +30,7 @@
|
|
|
31
30
|
text-align: left;
|
|
32
31
|
border-bottom: 1px solid @NL95;
|
|
33
32
|
word-break: break-all;
|
|
34
|
-
|
|
35
|
-
padding: 11.5px 12px;
|
|
36
|
-
align-items: center;
|
|
33
|
+
padding: 12px;
|
|
37
34
|
|
|
38
35
|
&-content {
|
|
39
36
|
flex: 1;
|
|
@@ -42,6 +39,15 @@
|
|
|
42
39
|
|
|
43
40
|
&-row {
|
|
44
41
|
max-width: 100%;
|
|
42
|
+
height: 40px;
|
|
43
|
+
|
|
44
|
+
&-ellipsis {
|
|
45
|
+
.ant-block-table-cell {
|
|
46
|
+
overflow: hidden;
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
45
51
|
}
|
|
46
52
|
|
|
47
53
|
&-thead {
|
|
@@ -52,19 +58,17 @@
|
|
|
52
58
|
&-sorting {
|
|
53
59
|
color: @B40;
|
|
54
60
|
}
|
|
55
|
-
// border: 1px solid red;
|
|
56
61
|
|
|
57
62
|
.ant-block-table-bar {
|
|
58
63
|
position: absolute;
|
|
59
64
|
top: 50%;
|
|
60
|
-
right:
|
|
65
|
+
right: -12px;
|
|
61
66
|
z-index: 1;
|
|
62
67
|
display: inline-block;
|
|
63
68
|
width: 12px;
|
|
64
69
|
height: 12px;
|
|
65
70
|
transform: translateY(-50%);
|
|
66
71
|
touch-action: none;
|
|
67
|
-
padding-left: 5px;
|
|
68
72
|
|
|
69
73
|
&::after {
|
|
70
74
|
display: block;
|
|
@@ -105,12 +109,6 @@
|
|
|
105
109
|
background-color: @BBG97;
|
|
106
110
|
}
|
|
107
111
|
}
|
|
108
|
-
|
|
109
|
-
&:last-of-type {
|
|
110
|
-
.ant-block-table-cell {
|
|
111
|
-
border-bottom: 1px solid transparent;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
112
|
}
|
|
115
113
|
}
|
|
116
114
|
|
|
@@ -44,8 +44,15 @@
|
|
|
44
44
|
border-radius: @border-radius-base;
|
|
45
45
|
text-shadow: @text-shadow;
|
|
46
46
|
|
|
47
|
+
&:focus {
|
|
48
|
+
background-color: @B40;
|
|
49
|
+
border-color: @B40;
|
|
50
|
+
box-shadow: none;
|
|
51
|
+
border-radius: @border-radius-base;
|
|
52
|
+
text-shadow: @text-shadow;
|
|
53
|
+
}
|
|
54
|
+
|
|
47
55
|
&:hover,
|
|
48
|
-
&:focus,
|
|
49
56
|
&:active,
|
|
50
57
|
&.ant-btn-loading {
|
|
51
58
|
background-color: @B20;
|
|
@@ -57,6 +64,7 @@
|
|
|
57
64
|
background-color: @NL90;
|
|
58
65
|
border-color: transparent;
|
|
59
66
|
color: @NL80;
|
|
67
|
+
cursor: default;
|
|
60
68
|
|
|
61
69
|
&:hover,
|
|
62
70
|
&:focus,
|
|
@@ -75,13 +83,15 @@
|
|
|
75
83
|
text-shadow: @text-shadow;
|
|
76
84
|
box-shadow: unset;
|
|
77
85
|
|
|
78
|
-
&:
|
|
79
|
-
background-color: @
|
|
80
|
-
border-color: @
|
|
86
|
+
&:focus {
|
|
87
|
+
background-color: @SC40;
|
|
88
|
+
border-color: @SC40;
|
|
81
89
|
color: @ND0;
|
|
90
|
+
text-shadow: @text-shadow;
|
|
91
|
+
box-shadow: unset;
|
|
82
92
|
}
|
|
83
93
|
|
|
84
|
-
&:
|
|
94
|
+
&:hover,
|
|
85
95
|
&:active,
|
|
86
96
|
&.ant-btn-loading {
|
|
87
97
|
background-color: @SC20;
|
|
@@ -93,6 +103,7 @@
|
|
|
93
103
|
background-color: @NL90;
|
|
94
104
|
border-color: transparent;
|
|
95
105
|
color: @NL80;
|
|
106
|
+
cursor: default;
|
|
96
107
|
|
|
97
108
|
&:hover,
|
|
98
109
|
&:focus,
|
|
@@ -112,8 +123,16 @@
|
|
|
112
123
|
border-radius: @border-radius-base;
|
|
113
124
|
text-shadow: @text-shadow;
|
|
114
125
|
|
|
126
|
+
&:focus {
|
|
127
|
+
background-color: @BG100;
|
|
128
|
+
border-color: @NL90;
|
|
129
|
+
color: @NL30;
|
|
130
|
+
box-shadow: none;
|
|
131
|
+
border-radius: @border-radius-base;
|
|
132
|
+
text-shadow: @text-shadow;
|
|
133
|
+
}
|
|
134
|
+
|
|
115
135
|
&:hover,
|
|
116
|
-
&:focus,
|
|
117
136
|
&:active,
|
|
118
137
|
&.ant-btn-loading {
|
|
119
138
|
background-color: @NL97;
|
|
@@ -125,6 +144,7 @@
|
|
|
125
144
|
background-color: @BG100;
|
|
126
145
|
border-color: @NL90;
|
|
127
146
|
color: @NL80;
|
|
147
|
+
cursor: default;
|
|
128
148
|
|
|
129
149
|
&:hover,
|
|
130
150
|
&:focus,
|
|
@@ -144,8 +164,16 @@
|
|
|
144
164
|
border-radius: @border-radius-base;
|
|
145
165
|
text-shadow: @text-shadow;
|
|
146
166
|
|
|
167
|
+
&:focus {
|
|
168
|
+
background-color: @BG100;
|
|
169
|
+
border-color: @BG100;
|
|
170
|
+
color: @NL30;
|
|
171
|
+
box-shadow: none;
|
|
172
|
+
border-radius: @border-radius-base;
|
|
173
|
+
text-shadow: @text-shadow;
|
|
174
|
+
}
|
|
175
|
+
|
|
147
176
|
&:hover,
|
|
148
|
-
&:focus,
|
|
149
177
|
&:active,
|
|
150
178
|
&.ant-btn-loading {
|
|
151
179
|
background-color: @NL97;
|
|
@@ -157,6 +185,7 @@
|
|
|
157
185
|
background-color: transparent;
|
|
158
186
|
border-color: transparent;
|
|
159
187
|
color: @NL80;
|
|
188
|
+
cursor: default;
|
|
160
189
|
|
|
161
190
|
&:hover,
|
|
162
191
|
&:focus,
|
|
@@ -177,8 +206,17 @@
|
|
|
177
206
|
border-radius: @border-radius-base;
|
|
178
207
|
text-shadow: @text-shadow;
|
|
179
208
|
|
|
209
|
+
&:focus {
|
|
210
|
+
background-color: @BG100;
|
|
211
|
+
border-color: @BG100;
|
|
212
|
+
color: @B40;
|
|
213
|
+
font-weight: 400;
|
|
214
|
+
box-shadow: none;
|
|
215
|
+
border-radius: @border-radius-base;
|
|
216
|
+
text-shadow: @text-shadow;
|
|
217
|
+
}
|
|
218
|
+
|
|
180
219
|
&:hover,
|
|
181
|
-
&:focus,
|
|
182
220
|
&:active,
|
|
183
221
|
&.ant-btn-loading {
|
|
184
222
|
background-color: @BG100;
|
|
@@ -190,6 +228,7 @@
|
|
|
190
228
|
background-color: transparent;
|
|
191
229
|
border-color: transparent;
|
|
192
230
|
color: @NL80;
|
|
231
|
+
cursor: default;
|
|
193
232
|
|
|
194
233
|
&:hover,
|
|
195
234
|
&:focus,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import type { InputProps
|
|
2
|
+
import type { InputProps } from 'antd/lib/input/Input';
|
|
3
|
+
import type { InputRef } from 'rc-input';
|
|
3
4
|
interface IShowCountProps {
|
|
4
5
|
formatter: (args: {
|
|
5
6
|
count: number;
|
|
@@ -37,6 +37,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
return /*#__PURE__*/_react.default.createElement(_Input.default, _objectSpread(_objectSpread({}, rest), {}, {
|
|
40
|
+
// @ts-ignore
|
|
40
41
|
ref: ref,
|
|
41
42
|
size: getInputSize(size),
|
|
42
43
|
bordered: true,
|
|
@@ -88,9 +88,10 @@
|
|
|
88
88
|
height: 22px;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
91
|
+
|
|
92
|
+
.ant-input-suffix {
|
|
93
|
+
.anticon-close-circle.ant-input-clear-icon {
|
|
94
|
+
.ald-iconfont('\e616');
|
|
95
|
+
}
|
|
95
96
|
}
|
|
96
97
|
}
|
package/lib/Select/BaseSelect.js
CHANGED
|
@@ -139,7 +139,19 @@ var Select = function Select(props, ref) {
|
|
|
139
139
|
activeIndex = _useState10[0],
|
|
140
140
|
setActiveIndex = _useState10[1];
|
|
141
141
|
|
|
142
|
-
var
|
|
142
|
+
var initOptionChecked = function initOptionChecked() {
|
|
143
|
+
if (Array.isArray(value)) {
|
|
144
|
+
return value;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
if (value === null) {
|
|
148
|
+
return [];
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
return [value];
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
var _useState11 = (0, _react.useState)(initOptionChecked()),
|
|
143
155
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
144
156
|
optionChecked = _useState12[0],
|
|
145
157
|
setOptionChecked = _useState12[1]; // Exhibition value (tempvalue + value);
|
|
@@ -110,7 +110,7 @@ var OptionsList = function OptionsList(props, ref) {
|
|
|
110
110
|
}, [selected]); // 部分选中
|
|
111
111
|
// 全部列表选项选中
|
|
112
112
|
|
|
113
|
-
var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length); // ”全部“选项是否选中
|
|
113
|
+
var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length) || (selected === null || selected === void 0 ? void 0 : selected.length) === ZERO_LENGTH; // ”全部“选项是否选中
|
|
114
114
|
|
|
115
115
|
var allOptionChecked = isAllChecked && Array.isArray(optionChecked) && optionChecked.length === ZERO_LENGTH; // 点击全选
|
|
116
116
|
|
|
@@ -197,8 +197,10 @@ var Selector = function Selector(props, ref) {
|
|
|
197
197
|
return [].concat(_toConsumableArray(prev), [curr, ',']);
|
|
198
198
|
}, []);
|
|
199
199
|
|
|
200
|
-
if (Array.isArray(value) && value.length === filteredOptions.length
|
|
201
|
-
return /*#__PURE__*/_react.default.createElement("span",
|
|
200
|
+
if (Array.isArray(value) && (value.length === filteredOptions.length || (0, _lodash.isEmpty)(value))) {
|
|
201
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
202
|
+
className: "multipleAll"
|
|
203
|
+
}, "\u5168\u90E8");
|
|
202
204
|
}
|
|
203
205
|
|
|
204
206
|
var renderItem = function renderItem(valueItem) {
|
|
@@ -265,7 +267,7 @@ var Selector = function Selector(props, ref) {
|
|
|
265
267
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
266
268
|
className: (0, _classnames3.default)("".concat(prefix, "-values-wrapper")),
|
|
267
269
|
ref: selectValuesRef
|
|
268
|
-
}, multiple ? renderMultipleValue() : renderSingleValue(), renderPlaceHolder())), /*#__PURE__*/_react.default.createElement("div", {
|
|
270
|
+
}, multiple ? renderMultipleValue() : renderSingleValue(), !multiple && renderPlaceHolder())), /*#__PURE__*/_react.default.createElement("div", {
|
|
269
271
|
"aria-hidden": "true",
|
|
270
272
|
className: (0, _classnames3.default)("".concat(prefix, "-arrow"), _defineProperty({}, "".concat(prefix, "-arrow-focused"), visible)),
|
|
271
273
|
onClick: showClose ? onAllClearClick : undefined
|
|
@@ -293,6 +293,7 @@
|
|
|
293
293
|
|
|
294
294
|
&-values-wrapper {
|
|
295
295
|
line-height: 26px;
|
|
296
|
+
font-size: 12px;
|
|
296
297
|
}
|
|
297
298
|
|
|
298
299
|
&-selector-label {
|
|
@@ -472,7 +473,7 @@
|
|
|
472
473
|
border-color: @NL90;
|
|
473
474
|
// background-color: @BG100;
|
|
474
475
|
border-radius: 4px;
|
|
475
|
-
|
|
476
|
+
box-shadow: none;
|
|
476
477
|
// &::after {
|
|
477
478
|
// // border-color: @B40;
|
|
478
479
|
// }
|
package/lib/Table/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ITableProps } from './interface';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<ITableProps<Record<string, unknown>>, "onChange" | "loading" | "data" | "columns" | "total" | "renderHeaderLeft" | "renderHeaderRight" | "onRowSelected" | "loadMore" | "hasNextPage" | "sortable" | "defaultSort" | "resizeColumn" | "sortDirections" | "showHeader" | "innerScroll" | "scrollThreshold" | "rowKey"> & React.RefAttributes<unknown>>;
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<ITableProps<Record<string, unknown>>, "onChange" | "loading" | "data" | "ellipsis" | "columns" | "total" | "renderHeaderLeft" | "renderHeaderRight" | "onRowSelected" | "loadMore" | "hasNextPage" | "sortable" | "defaultSort" | "resizeColumn" | "sortDirections" | "showHeader" | "innerScroll" | "scrollThreshold" | "rowClassName" | "renderEmpty" | "rowKey"> & React.RefAttributes<unknown>>;
|
|
4
4
|
export default _default;
|
package/lib/Table/index.js
CHANGED
|
@@ -84,6 +84,11 @@ function Table(_ref, ref) {
|
|
|
84
84
|
innerScroll = _ref$innerScroll === void 0 ? false : _ref$innerScroll,
|
|
85
85
|
_ref$scrollThreshold = _ref.scrollThreshold,
|
|
86
86
|
scrollThreshold = _ref$scrollThreshold === void 0 ? '150px' : _ref$scrollThreshold,
|
|
87
|
+
_ref$rowClassName = _ref.rowClassName,
|
|
88
|
+
rowClassName = _ref$rowClassName === void 0 ? '' : _ref$rowClassName,
|
|
89
|
+
_ref$ellipsis = _ref.ellipsis,
|
|
90
|
+
ellipsis = _ref$ellipsis === void 0 ? true : _ref$ellipsis,
|
|
91
|
+
renderEmpty = _ref.renderEmpty,
|
|
87
92
|
rowKey = _ref.rowKey;
|
|
88
93
|
|
|
89
94
|
var _React$useState = _react.default.useState(null),
|
|
@@ -207,9 +212,7 @@ function Table(_ref, ref) {
|
|
|
207
212
|
data: data,
|
|
208
213
|
disableMultiSort: true,
|
|
209
214
|
disableSortBy: !sortable,
|
|
210
|
-
getRowId:
|
|
211
|
-
return rowKey;
|
|
212
|
-
} : rowKey,
|
|
215
|
+
getRowId: rowKey,
|
|
213
216
|
initialState: {
|
|
214
217
|
sortBy: getInitSortBy()
|
|
215
218
|
}
|
|
@@ -388,13 +391,15 @@ function Table(_ref, ref) {
|
|
|
388
391
|
}
|
|
389
392
|
|
|
390
393
|
if (!loading && !rows.length) {
|
|
391
|
-
return /*#__PURE__*/_react.default.createElement(_Empty.default, {
|
|
394
|
+
return renderEmpty ? renderEmpty() : /*#__PURE__*/_react.default.createElement(_Empty.default, {
|
|
392
395
|
description: "\u5F53\u524D\u65E0\u6570\u636E"
|
|
393
396
|
});
|
|
394
397
|
}
|
|
395
398
|
|
|
396
399
|
var renderRowList = function renderRowList() {
|
|
397
400
|
return data.map(function (item, index) {
|
|
401
|
+
var _classnames;
|
|
402
|
+
|
|
398
403
|
var row = rows[index];
|
|
399
404
|
prepareRow(row);
|
|
400
405
|
|
|
@@ -404,7 +409,7 @@ function Table(_ref, ref) {
|
|
|
404
409
|
|
|
405
410
|
return /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, rowProps), {}, {
|
|
406
411
|
style: _objectSpread({}, rowStyle),
|
|
407
|
-
className: (0, _classnames7.default)("".concat(prefixCls, "-row"),
|
|
412
|
+
className: (0, _classnames7.default)("".concat(prefixCls, "-row"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId), _defineProperty(_classnames, rowClassName, rowClassName), _defineProperty(_classnames, "".concat(prefixCls, "-row-ellipsis"), ellipsis), _classnames)),
|
|
408
413
|
onClick: function onClick() {
|
|
409
414
|
return onRowClick(row);
|
|
410
415
|
},
|
package/lib/Table/interface.d.ts
CHANGED
|
@@ -35,5 +35,8 @@ export interface ITableProps<T extends object> {
|
|
|
35
35
|
innerScroll?: boolean;
|
|
36
36
|
ref?: React.RefObject<unknown>;
|
|
37
37
|
scrollThreshold?: string | number;
|
|
38
|
-
rowKey?:
|
|
38
|
+
rowKey?: ((row: any) => string);
|
|
39
|
+
rowClassName?: string;
|
|
40
|
+
ellipsis?: boolean;
|
|
41
|
+
renderEmpty?: () => React.ReactNode;
|
|
39
42
|
}
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
height: 100%;
|
|
12
12
|
overflow: hidden;
|
|
13
|
-
user-select: none;
|
|
14
13
|
|
|
15
14
|
&-page-loading {
|
|
16
15
|
opacity: 0;
|
|
@@ -31,9 +30,7 @@
|
|
|
31
30
|
text-align: left;
|
|
32
31
|
border-bottom: 1px solid @NL95;
|
|
33
32
|
word-break: break-all;
|
|
34
|
-
|
|
35
|
-
padding: 11.5px 12px;
|
|
36
|
-
align-items: center;
|
|
33
|
+
padding: 12px;
|
|
37
34
|
|
|
38
35
|
&-content {
|
|
39
36
|
flex: 1;
|
|
@@ -42,6 +39,15 @@
|
|
|
42
39
|
|
|
43
40
|
&-row {
|
|
44
41
|
max-width: 100%;
|
|
42
|
+
height: 40px;
|
|
43
|
+
|
|
44
|
+
&-ellipsis {
|
|
45
|
+
.ant-block-table-cell {
|
|
46
|
+
overflow: hidden;
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
45
51
|
}
|
|
46
52
|
|
|
47
53
|
&-thead {
|
|
@@ -52,19 +58,17 @@
|
|
|
52
58
|
&-sorting {
|
|
53
59
|
color: @B40;
|
|
54
60
|
}
|
|
55
|
-
// border: 1px solid red;
|
|
56
61
|
|
|
57
62
|
.ant-block-table-bar {
|
|
58
63
|
position: absolute;
|
|
59
64
|
top: 50%;
|
|
60
|
-
right:
|
|
65
|
+
right: -12px;
|
|
61
66
|
z-index: 1;
|
|
62
67
|
display: inline-block;
|
|
63
68
|
width: 12px;
|
|
64
69
|
height: 12px;
|
|
65
70
|
transform: translateY(-50%);
|
|
66
71
|
touch-action: none;
|
|
67
|
-
padding-left: 5px;
|
|
68
72
|
|
|
69
73
|
&::after {
|
|
70
74
|
display: block;
|
|
@@ -105,12 +109,6 @@
|
|
|
105
109
|
background-color: @BBG97;
|
|
106
110
|
}
|
|
107
111
|
}
|
|
108
|
-
|
|
109
|
-
&:last-of-type {
|
|
110
|
-
.ant-block-table-cell {
|
|
111
|
-
border-bottom: 1px solid transparent;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
112
|
}
|
|
115
113
|
}
|
|
116
114
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aloudata/aloudata-design",
|
|
3
|
-
"version": "0.2.0-beta.
|
|
3
|
+
"version": "0.2.0-beta.21",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"start": "dumi dev",
|
|
6
6
|
"docs:build": "dumi build",
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"antd": "^4.18.6",
|
|
54
54
|
"classnames": "^2.3.1",
|
|
55
55
|
"lodash": "^4.17.21",
|
|
56
|
+
"rc-input": "^0.0.1-alpha.6",
|
|
56
57
|
"rc-menu": "^9.3.2",
|
|
57
58
|
"rc-overflow": "^1.2.3",
|
|
58
59
|
"rc-resize-observer": "^1.2.0",
|
|
@@ -85,7 +86,7 @@
|
|
|
85
86
|
"eslint-plugin-jsx-a11y": "^6.4.1",
|
|
86
87
|
"eslint-plugin-react": "^7.24.0",
|
|
87
88
|
"eslint-plugin-react-hooks": "^4.2.0",
|
|
88
|
-
"father-build": "^1.
|
|
89
|
+
"father-build": "^1.22.1",
|
|
89
90
|
"gh-pages": "^3.0.0",
|
|
90
91
|
"husky": "^3.0.9",
|
|
91
92
|
"lint-staged": "^10.0.7",
|