@aloudata/aloudata-design 0.2.0-beta.16 → 0.2.0-beta.17

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.
Files changed (9) hide show
  1. package/es/Input/style/index.less +40 -0
  2. package/es/Select/BaseSelect.js +0 -2
  3. package/es/Select/OptionsList/index.js +11 -19
  4. package/es/Select/style/index.less +16 -3
  5. package/lib/Input/style/index.less +40 -0
  6. package/lib/Select/BaseSelect.js +0 -2
  7. package/lib/Select/OptionsList/index.js +10 -19
  8. package/lib/Select/style/index.less +16 -3
  9. package/package.json +1 -1
package/es/Input/style/index.less CHANGED
@@ -8,6 +8,8 @@
8
8
  .ant-input {
9
9
  color: @NL0;
10
10
  border-radius: @border-radius-base;
11
+ font-size: 12px;
12
+ height: 28px;
11
13
 
12
14
  &::placeholder {
13
15
  color: @NL50;
@@ -15,6 +17,9 @@
15
17
 
16
18
  &-prefix {
17
19
  color: @NL30;
20
+ font-weight: 400;
21
+ font-size: 12px;
22
+ line-height: 16px;
18
23
  }
19
24
 
20
25
  &-suffix {
@@ -39,10 +44,19 @@
39
44
 
40
45
  &-sm {
41
46
  border-radius: @border-radius-sm;
47
+ font-size: 12px;
48
+ height: 24px;
49
+ }
50
+
51
+ &-lg {
52
+ height: 32px;
53
+ font-size: 14px;
42
54
  }
43
55
 
44
56
  &-affix-wrapper {
45
57
  border-radius: @border-radius-base;
58
+ padding: 0 12px;
59
+ height: 28px;
46
60
 
47
61
  &-hover,
48
62
  &-focused,
@@ -53,10 +67,23 @@
53
67
  .ant-input {
54
68
  border-radius: 0;
55
69
  caret-color: @B40;
70
+ height: 100%;
71
+ }
72
+
73
+ &-lg {
74
+ padding: 4px 11px;
75
+ height: 32px;
76
+ font-size: 14px;
56
77
  }
57
78
 
58
79
  &-sm {
59
80
  border-radius: @border-radius-sm;
81
+ padding: 0 12px;
82
+ height: 24px;
83
+
84
+ .ant-input-sm {
85
+ height: 22px;
86
+ }
60
87
  }
61
88
  }
62
89
  }
@@ -65,3 +92,16 @@
65
92
  .ald-iconfont('\e616');
66
93
  }
67
94
  }
95
+
96
+ .ant-input-password {
97
+ &-large {
98
+ // font-size: 14px;
99
+ // height: 32px;
100
+
101
+ .ant-input-lg {
102
+ // height: 20px;
103
+ // line-height: 20px;
104
+ // align-items: center;
105
+ }
106
+ }
107
+ }
package/es/Select/BaseSelect.js CHANGED
@@ -48,7 +48,6 @@ export var Select = function Select(props, ref) {
48
48
  label = props.label,
49
49
  className = props.className,
50
50
  style = props.style,
51
- optionStyle = props.optionStyle,
52
51
  groupStyle = props.groupStyle,
53
52
  _props$allowClear = props.allowClear,
54
53
  allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
@@ -314,7 +313,6 @@ export var Select = function Select(props, ref) {
314
313
  visible: visible,
315
314
  hasGroup: hasGroup,
316
315
  groupStyle: groupStyle,
317
- optionStyle: optionStyle,
318
316
  searchType: "no-search",
319
317
  placeholder: placeholder,
320
318
  data: flattenOptions,
package/es/Select/OptionsList/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["input", "prefixCls", "data", "groupStyle", "height", "itemHeight", "selected", "optionChecked", "tempValue", "value", "placeholder", "notFoundContent", "onValueChange", "onTempValueChange", "setTempValue", "onInputChange", "onOptionClick", "activeIndex", "multiple", "visible", "style", "setActiveIndex"];
1
+ var _excluded = ["input", "prefixCls", "data", "groupStyle", "height", "itemHeight", "selected", "optionChecked", "tempValue", "value", "placeholder", "notFoundContent", "onValueChange", "onTempValueChange", "setTempValue", "onInputChange", "onOptionClick", "activeIndex", "multiple", "visible", "setActiveIndex"];
2
2
 
3
3
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
4
 
@@ -25,17 +25,19 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
25
25
  /* eslint-disable @typescript-eslint/no-use-before-define */
26
26
  import React, { useCallback, useImperativeHandle, useMemo, useRef, useEffect } from 'react';
27
27
  import classnames from 'classnames';
28
- import VirtualList from '../VirtualList';
29
- import { ForwardRenderGroup, ForwardRenderOption, ForwardRenderTooltip, RenderLabelIcon } from './OptionItem';
28
+ import { ForwardRenderOption, ForwardRenderTooltip, RenderLabelIcon } from './OptionItem';
30
29
  var ZERO_LENGTH = 0;
31
30
  var DEFAULT_ACTIVE_INDEX = -1;
31
+ var DEFAULT_LIST_HEIGHT = 256;
32
+ var DEFAULT_LIST_PADDING = 8;
32
33
 
33
34
  var OptionsList = function OptionsList(props, ref) {
34
35
  var input = props.input,
35
36
  prefixCls = props.prefixCls,
36
37
  data = props.data,
37
38
  groupStyle = props.groupStyle,
38
- height = props.height,
39
+ _props$height = props.height,
40
+ height = _props$height === void 0 ? DEFAULT_LIST_HEIGHT : _props$height,
39
41
  itemHeight = props.itemHeight,
40
42
  selected = props.selected,
41
43
  optionChecked = props.optionChecked,
@@ -51,7 +53,6 @@ var OptionsList = function OptionsList(props, ref) {
51
53
  activeIndex = props.activeIndex,
52
54
  multiple = props.multiple,
53
55
  visible = props.visible,
54
- style = props.style,
55
56
  setActiveIndex = props.setActiveIndex,
56
57
  restProps = _objectWithoutProperties(props, _excluded);
57
58
 
@@ -146,7 +147,9 @@ var OptionsList = function OptionsList(props, ref) {
146
147
 
147
148
  return /*#__PURE__*/React.createElement("div", {
148
149
  className: "".concat(prefixCls, "-list"),
149
- style: style,
150
+ style: {
151
+ height: "".concat(height - DEFAULT_LIST_PADDING, "px")
152
+ },
150
153
  ref: OptionListRef,
151
154
  role: "list",
152
155
  "aria-hidden": "true",
@@ -155,19 +158,8 @@ var OptionsList = function OptionsList(props, ref) {
155
158
  onMouseLeave: function onMouseLeave() {
156
159
  return setActiveIndex(DEFAULT_ACTIVE_INDEX);
157
160
  }
158
- }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? /*#__PURE__*/React.createElement(VirtualList, _objectSpread({
159
- itemKey: "value",
160
- prefixCls: prefixCls,
161
- ref: VirtualListRef,
162
- data: data,
163
- height: height,
164
- itemHeight: itemHeight
165
- }, restProps), function (option, index) {
166
- return option.isSelectOptGroup ? /*#__PURE__*/React.createElement(ForwardRenderGroup, {
167
- option: option,
168
- prefixCls: prefixCls,
169
- groupStyle: groupStyle
170
- }) : /*#__PURE__*/React.createElement(ForwardRenderTooltip, {
161
+ }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? data.map(function (option, index) {
162
+ return /*#__PURE__*/React.createElement(ForwardRenderTooltip, {
171
163
  tooltip: option === null || option === void 0 ? void 0 : option.tooltip,
172
164
  render: /*#__PURE__*/React.createElement(ForwardRenderOption, _objectSpread({
173
165
  option: option,
package/es/Select/style/index.less CHANGED
@@ -56,7 +56,7 @@
56
56
  overflow: hidden;
57
57
  border: 1px solid transparent;
58
58
  border-radius: @border-radius-base;
59
- padding: 0 36px 0 12px;
59
+ padding: 0 36px 0 11px;
60
60
  outline: none;
61
61
  transition: all 0.2s;
62
62
  cursor: pointer;
@@ -162,7 +162,7 @@
162
162
 
163
163
  &-text {
164
164
  overflow: hidden;
165
- font-size: 14px;
165
+ font-size: @select-input-fontSize-sm;
166
166
  line-height: 22px;
167
167
  white-space: nowrap;
168
168
  text-overflow: ellipsis;
@@ -197,7 +197,7 @@
197
197
 
198
198
  &-text {
199
199
  overflow: hidden;
200
- font-size: 14px;
200
+ font-size: @select-input-fontSize-sm;
201
201
  line-height: 22px;
202
202
  white-space: nowrap;
203
203
  text-overflow: ellipsis;
@@ -209,6 +209,7 @@
209
209
  top: 0;
210
210
  left: 0;
211
211
  color: @select-placeholder-color;
212
+ font-size: @select-input-fontSize-sm;
212
213
  }
213
214
 
214
215
  &-input {
@@ -283,6 +284,7 @@
283
284
  }
284
285
 
285
286
  &-large {
287
+ height: @height-lg;
286
288
  .@{select-prefix-cls-legacy} {
287
289
  &-selector {
288
290
  min-height: @height-lg;
@@ -310,6 +312,14 @@
310
312
  &-input-tags {
311
313
  top: 0;
312
314
  }
315
+
316
+ &-placeholder {
317
+ font-size: @select-input-fontSize;
318
+ }
319
+
320
+ &-item-text {
321
+ font-size: @select-input-fontSize;
322
+ }
313
323
  }
314
324
  }
315
325
 
@@ -406,6 +416,8 @@
406
416
  // min-width: 160px;
407
417
  // padding: 16px 0 16px 8px;
408
418
  outline: none;
419
+ overflow-y: scroll;
420
+ overflow-y: overlay;
409
421
  }
410
422
 
411
423
  .@{select-prefix-cls-legacy}-list-option {
@@ -434,6 +446,7 @@
434
446
  transform: translateY(-50%);
435
447
  left: 12px;
436
448
  color: @B40;
449
+ margin-top: 2px;
437
450
 
438
451
  &-checkbox {
439
452
  .@{component-prefix}-checkbox-inner {
package/lib/Input/style/index.less CHANGED
@@ -8,6 +8,8 @@
8
8
  .ant-input {
9
9
  color: @NL0;
10
10
  border-radius: @border-radius-base;
11
+ font-size: 12px;
12
+ height: 28px;
11
13
 
12
14
  &::placeholder {
13
15
  color: @NL50;
@@ -15,6 +17,9 @@
15
17
 
16
18
  &-prefix {
17
19
  color: @NL30;
20
+ font-weight: 400;
21
+ font-size: 12px;
22
+ line-height: 16px;
18
23
  }
19
24
 
20
25
  &-suffix {
@@ -39,10 +44,19 @@
39
44
 
40
45
  &-sm {
41
46
  border-radius: @border-radius-sm;
47
+ font-size: 12px;
48
+ height: 24px;
49
+ }
50
+
51
+ &-lg {
52
+ height: 32px;
53
+ font-size: 14px;
42
54
  }
43
55
 
44
56
  &-affix-wrapper {
45
57
  border-radius: @border-radius-base;
58
+ padding: 0 12px;
59
+ height: 28px;
46
60
 
47
61
  &-hover,
48
62
  &-focused,
@@ -53,10 +67,23 @@
53
67
  .ant-input {
54
68
  border-radius: 0;
55
69
  caret-color: @B40;
70
+ height: 100%;
71
+ }
72
+
73
+ &-lg {
74
+ padding: 4px 11px;
75
+ height: 32px;
76
+ font-size: 14px;
56
77
  }
57
78
 
58
79
  &-sm {
59
80
  border-radius: @border-radius-sm;
81
+ padding: 0 12px;
82
+ height: 24px;
83
+
84
+ .ant-input-sm {
85
+ height: 22px;
86
+ }
60
87
  }
61
88
  }
62
89
  }
@@ -65,3 +92,16 @@
65
92
  .ald-iconfont('\e616');
66
93
  }
67
94
  }
95
+
96
+ .ant-input-password {
97
+ &-large {
98
+ // font-size: 14px;
99
+ // height: 32px;
100
+
101
+ .ant-input-lg {
102
+ // height: 20px;
103
+ // line-height: 20px;
104
+ // align-items: center;
105
+ }
106
+ }
107
+ }
package/lib/Select/BaseSelect.js CHANGED
@@ -74,7 +74,6 @@ var Select = function Select(props, ref) {
74
74
  label = props.label,
75
75
  className = props.className,
76
76
  style = props.style,
77
- optionStyle = props.optionStyle,
78
77
  groupStyle = props.groupStyle,
79
78
  _props$allowClear = props.allowClear,
80
79
  allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
@@ -341,7 +340,6 @@ var Select = function Select(props, ref) {
341
340
  visible: visible,
342
341
  hasGroup: hasGroup,
343
342
  groupStyle: groupStyle,
344
- optionStyle: optionStyle,
345
343
  searchType: "no-search",
346
344
  placeholder: placeholder,
347
345
  data: flattenOptions,
package/lib/Select/OptionsList/index.js CHANGED
@@ -11,11 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _classnames2 = _interopRequireDefault(require("classnames"));
13
13
 
14
- var _VirtualList = _interopRequireDefault(require("../VirtualList"));
15
-
16
14
  var _OptionItem = require("./OptionItem");
17
15
 
18
- var _excluded = ["input", "prefixCls", "data", "groupStyle", "height", "itemHeight", "selected", "optionChecked", "tempValue", "value", "placeholder", "notFoundContent", "onValueChange", "onTempValueChange", "setTempValue", "onInputChange", "onOptionClick", "activeIndex", "multiple", "visible", "style", "setActiveIndex"];
16
+ var _excluded = ["input", "prefixCls", "data", "groupStyle", "height", "itemHeight", "selected", "optionChecked", "tempValue", "value", "placeholder", "notFoundContent", "onValueChange", "onTempValueChange", "setTempValue", "onInputChange", "onOptionClick", "activeIndex", "multiple", "visible", "setActiveIndex"];
19
17
 
20
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
19
 
@@ -47,13 +45,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
47
45
 
48
46
  var ZERO_LENGTH = 0;
49
47
  var DEFAULT_ACTIVE_INDEX = -1;
48
+ var DEFAULT_LIST_HEIGHT = 256;
49
+ var DEFAULT_LIST_PADDING = 8;
50
50
 
51
51
  var OptionsList = function OptionsList(props, ref) {
52
52
  var input = props.input,
53
53
  prefixCls = props.prefixCls,
54
54
  data = props.data,
55
55
  groupStyle = props.groupStyle,
56
- height = props.height,
56
+ _props$height = props.height,
57
+ height = _props$height === void 0 ? DEFAULT_LIST_HEIGHT : _props$height,
57
58
  itemHeight = props.itemHeight,
58
59
  selected = props.selected,
59
60
  optionChecked = props.optionChecked,
@@ -69,7 +70,6 @@ var OptionsList = function OptionsList(props, ref) {
69
70
  activeIndex = props.activeIndex,
70
71
  multiple = props.multiple,
71
72
  visible = props.visible,
72
- style = props.style,
73
73
  setActiveIndex = props.setActiveIndex,
74
74
  restProps = _objectWithoutProperties(props, _excluded);
75
75
 
@@ -164,7 +164,9 @@ var OptionsList = function OptionsList(props, ref) {
164
164
 
165
165
  return /*#__PURE__*/_react.default.createElement("div", {
166
166
  className: "".concat(prefixCls, "-list"),
167
- style: style,
167
+ style: {
168
+ height: "".concat(height - DEFAULT_LIST_PADDING, "px")
169
+ },
168
170
  ref: OptionListRef,
169
171
  role: "list",
170
172
  "aria-hidden": "true",
@@ -173,19 +175,8 @@ var OptionsList = function OptionsList(props, ref) {
173
175
  onMouseLeave: function onMouseLeave() {
174
176
  return setActiveIndex(DEFAULT_ACTIVE_INDEX);
175
177
  }
176
- }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? /*#__PURE__*/_react.default.createElement(_VirtualList.default, _objectSpread({
177
- itemKey: "value",
178
- prefixCls: prefixCls,
179
- ref: VirtualListRef,
180
- data: data,
181
- height: height,
182
- itemHeight: itemHeight
183
- }, restProps), function (option, index) {
184
- return option.isSelectOptGroup ? /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderGroup, {
185
- option: option,
186
- prefixCls: prefixCls,
187
- groupStyle: groupStyle
188
- }) : /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderTooltip, {
178
+ }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? data.map(function (option, index) {
179
+ return /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderTooltip, {
189
180
  tooltip: option === null || option === void 0 ? void 0 : option.tooltip,
190
181
  render: /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderOption, _objectSpread({
191
182
  option: option,
package/lib/Select/style/index.less CHANGED
@@ -56,7 +56,7 @@
56
56
  overflow: hidden;
57
57
  border: 1px solid transparent;
58
58
  border-radius: @border-radius-base;
59
- padding: 0 36px 0 12px;
59
+ padding: 0 36px 0 11px;
60
60
  outline: none;
61
61
  transition: all 0.2s;
62
62
  cursor: pointer;
@@ -162,7 +162,7 @@
162
162
 
163
163
  &-text {
164
164
  overflow: hidden;
165
- font-size: 14px;
165
+ font-size: @select-input-fontSize-sm;
166
166
  line-height: 22px;
167
167
  white-space: nowrap;
168
168
  text-overflow: ellipsis;
@@ -197,7 +197,7 @@
197
197
 
198
198
  &-text {
199
199
  overflow: hidden;
200
- font-size: 14px;
200
+ font-size: @select-input-fontSize-sm;
201
201
  line-height: 22px;
202
202
  white-space: nowrap;
203
203
  text-overflow: ellipsis;
@@ -209,6 +209,7 @@
209
209
  top: 0;
210
210
  left: 0;
211
211
  color: @select-placeholder-color;
212
+ font-size: @select-input-fontSize-sm;
212
213
  }
213
214
 
214
215
  &-input {
@@ -283,6 +284,7 @@
283
284
  }
284
285
 
285
286
  &-large {
287
+ height: @height-lg;
286
288
  .@{select-prefix-cls-legacy} {
287
289
  &-selector {
288
290
  min-height: @height-lg;
@@ -310,6 +312,14 @@
310
312
  &-input-tags {
311
313
  top: 0;
312
314
  }
315
+
316
+ &-placeholder {
317
+ font-size: @select-input-fontSize;
318
+ }
319
+
320
+ &-item-text {
321
+ font-size: @select-input-fontSize;
322
+ }
313
323
  }
314
324
  }
315
325
 
@@ -406,6 +416,8 @@
406
416
  // min-width: 160px;
407
417
  // padding: 16px 0 16px 8px;
408
418
  outline: none;
419
+ overflow-y: scroll;
420
+ overflow-y: overlay;
409
421
  }
410
422
 
411
423
  .@{select-prefix-cls-legacy}-list-option {
@@ -434,6 +446,7 @@
434
446
  transform: translateY(-50%);
435
447
  left: 12px;
436
448
  color: @B40;
449
+ margin-top: 2px;
437
450
 
438
451
  &-checkbox {
439
452
  .@{component-prefix}-checkbox-inner {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aloudata/aloudata-design",
3
- "version": "0.2.0-beta.16",
3
+ "version": "0.2.0-beta.17",
4
4
  "scripts": {
5
5
  "start": "dumi dev",
6
6
  "docs:build": "dumi build",