assui 2.0.101 → 2.0.104
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/label-input/index.d.ts +2 -0
- package/es/label-input/index.js +23 -13
- package/es/label-select/index.js +1 -1
- package/es/label-select-Tree/index.d.ts +10 -0
- package/es/label-select-Tree/index.js +103 -0
- package/es/label-select-Tree/style/index.css +56 -0
- package/es/label-select-Tree/style/index.d.ts +2 -0
- package/es/label-select-Tree/style/index.js +2 -0
- package/es/label-select-Tree/style/index.less +70 -0
- package/lib/label-input/index.d.ts +2 -0
- package/lib/label-input/index.js +25 -14
- package/lib/label-select/index.js +2 -2
- package/lib/label-select-Tree/index.d.ts +10 -0
- package/lib/label-select-Tree/index.js +119 -0
- package/lib/label-select-Tree/style/index.css +56 -0
- package/lib/label-select-Tree/style/index.d.ts +2 -0
- package/lib/label-select-Tree/style/index.js +9 -0
- package/lib/label-select-Tree/style/index.less +70 -0
- package/package.json +3 -3
package/es/label-input/index.js
CHANGED
|
@@ -27,10 +27,11 @@ var __read = this && this.__read || function (o, n) {
|
|
|
27
27
|
|
|
28
28
|
import React from 'react';
|
|
29
29
|
import classNames from 'classnames';
|
|
30
|
-
import { useControllableValue } from 'ahooks';
|
|
31
30
|
import { trimStart } from 'lodash';
|
|
32
31
|
import EyeFilled from 'a-icons/lib/EyeFilled';
|
|
33
32
|
import EyeOutlined from 'a-icons/lib/EyeOutlined';
|
|
33
|
+
import useControllableValue from 'ahooks/lib/useControllableValue';
|
|
34
|
+
import useSize from 'ahooks/lib/useSize';
|
|
34
35
|
var PasswordSuffix = /*#__PURE__*/React.memo(function (_a) {
|
|
35
36
|
var inputType = _a.inputType,
|
|
36
37
|
onChangeInputType = _a.onChangeInputType;
|
|
@@ -57,21 +58,25 @@ var LabelInput = function LabelInput(props) {
|
|
|
57
58
|
onBlur = props.onBlur,
|
|
58
59
|
_a = props.type,
|
|
59
60
|
type = _a === void 0 ? 'text' : _a,
|
|
60
|
-
maxLength = props.maxLength
|
|
61
|
+
maxLength = props.maxLength,
|
|
62
|
+
_b = props.baseMinWidth,
|
|
63
|
+
baseMinWidth = _b === void 0 ? 50 : _b;
|
|
64
|
+
var labelDomRef = React.useRef(null);
|
|
65
|
+
var labelSize = useSize(labelDomRef);
|
|
61
66
|
|
|
62
|
-
var
|
|
63
|
-
focused =
|
|
64
|
-
setFocused =
|
|
67
|
+
var _c = __read(React.useState(false), 2),
|
|
68
|
+
focused = _c[0],
|
|
69
|
+
setFocused = _c[1];
|
|
65
70
|
|
|
66
|
-
var
|
|
71
|
+
var _d = __read(useControllableValue(props, {
|
|
67
72
|
defaultValue: ''
|
|
68
73
|
}), 2),
|
|
69
|
-
value =
|
|
70
|
-
setValue =
|
|
74
|
+
value = _d[0],
|
|
75
|
+
setValue = _d[1];
|
|
71
76
|
|
|
72
|
-
var
|
|
73
|
-
inputType =
|
|
74
|
-
setInputType =
|
|
77
|
+
var _e = __read(React.useState(type), 2),
|
|
78
|
+
inputType = _e[0],
|
|
79
|
+
setInputType = _e[1];
|
|
75
80
|
|
|
76
81
|
var InputDomRef = React.useRef(null);
|
|
77
82
|
var isPasswordInput = type === 'password';
|
|
@@ -100,9 +105,13 @@ var LabelInput = function LabelInput(props) {
|
|
|
100
105
|
var onChangeInputType = React.useCallback(function (nextInputType) {
|
|
101
106
|
setInputType(nextInputType);
|
|
102
107
|
}, []);
|
|
108
|
+
var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + baseMinWidth : undefined;
|
|
103
109
|
return /*#__PURE__*/React.createElement("div", {
|
|
104
110
|
className: classNames('label-input-control', className),
|
|
105
|
-
id: id
|
|
111
|
+
id: id,
|
|
112
|
+
style: {
|
|
113
|
+
minWidth: controlMinWidth
|
|
114
|
+
}
|
|
106
115
|
}, /*#__PURE__*/React.createElement("div", {
|
|
107
116
|
className: classNames('label-input-field', {
|
|
108
117
|
'label-input-affix': prefix || suffix || isPasswordInput,
|
|
@@ -126,7 +135,8 @@ var LabelInput = function LabelInput(props) {
|
|
|
126
135
|
maxLength: maxLength
|
|
127
136
|
}), /*#__PURE__*/React.createElement("label", {
|
|
128
137
|
className: "label-input-text",
|
|
129
|
-
onClick: handleLabelClick
|
|
138
|
+
onClick: handleLabelClick,
|
|
139
|
+
ref: labelDomRef
|
|
130
140
|
}, label)), (suffix || isPasswordInput) && /*#__PURE__*/React.createElement("div", {
|
|
131
141
|
className: "label-input-suffix"
|
|
132
142
|
}, suffix || /*#__PURE__*/React.createElement(PasswordSuffix, {
|
package/es/label-select/index.js
CHANGED
|
@@ -46,7 +46,7 @@ import useControllableValue from 'ahooks/lib/useControllableValue';
|
|
|
46
46
|
import Select from 'antd/es/select';
|
|
47
47
|
import classNames from 'classnames';
|
|
48
48
|
import ArrowDropDownFilled from 'a-icons/lib/ArrowDropDownFilled';
|
|
49
|
-
import
|
|
49
|
+
import omit from 'lodash/omit';
|
|
50
50
|
var Option = Select.Option;
|
|
51
51
|
export { Option };
|
|
52
52
|
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TreeSelectProps } from 'antd/es/tree-select';
|
|
3
|
+
export interface LabelSelectProps extends TreeSelectProps<string> {
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
declare const LabelSelect: {
|
|
7
|
+
(props: LabelSelectProps): JSX.Element;
|
|
8
|
+
Option: new (text?: string | undefined, value?: string | undefined, defaultSelected?: boolean | undefined, selected?: boolean | undefined) => HTMLOptionElement;
|
|
9
|
+
};
|
|
10
|
+
export default LabelSelect;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
|
|
6
|
+
for (var p in s) {
|
|
7
|
+
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
var __read = this && this.__read || function (o, n) {
|
|
18
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
19
|
+
if (!m) return o;
|
|
20
|
+
var i = m.call(o),
|
|
21
|
+
r,
|
|
22
|
+
ar = [],
|
|
23
|
+
e;
|
|
24
|
+
|
|
25
|
+
try {
|
|
26
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
|
|
27
|
+
ar.push(r.value);
|
|
28
|
+
}
|
|
29
|
+
} catch (error) {
|
|
30
|
+
e = {
|
|
31
|
+
error: error
|
|
32
|
+
};
|
|
33
|
+
} finally {
|
|
34
|
+
try {
|
|
35
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
36
|
+
} finally {
|
|
37
|
+
if (e) throw e.error;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return ar;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
import React from 'react';
|
|
45
|
+
import useControllableValue from 'ahooks/lib/useControllableValue';
|
|
46
|
+
import TreeSelect from 'antd/es/tree-select';
|
|
47
|
+
import classNames from 'classnames';
|
|
48
|
+
import omit from 'lodash/omit';
|
|
49
|
+
|
|
50
|
+
var LabelSelect = function LabelSelect(props) {
|
|
51
|
+
var className = props.className,
|
|
52
|
+
label = props.label;
|
|
53
|
+
var selectRef = React.useRef(null);
|
|
54
|
+
|
|
55
|
+
var _a = __read(useControllableValue(props, {
|
|
56
|
+
valuePropName: 'open',
|
|
57
|
+
trigger: 'setOpen'
|
|
58
|
+
}), 2),
|
|
59
|
+
open = _a[0],
|
|
60
|
+
setOpen = _a[1];
|
|
61
|
+
|
|
62
|
+
var _b = __read(useControllableValue(props), 2),
|
|
63
|
+
value = _b[0],
|
|
64
|
+
setValue = _b[1];
|
|
65
|
+
|
|
66
|
+
var handleChange = function handleChange(nextValue) {
|
|
67
|
+
setValue(nextValue);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
var handleLabelClick = function handleLabelClick() {
|
|
71
|
+
var _a;
|
|
72
|
+
|
|
73
|
+
if (!open) {
|
|
74
|
+
setOpen(!open);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
(_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
var onDropdownVisibleChange = function onDropdownVisibleChange(nextOpen) {
|
|
81
|
+
setOpen(nextOpen);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
className: classNames({
|
|
86
|
+
'label-select': true,
|
|
87
|
+
'label-select-label-scale': open || value
|
|
88
|
+
}, className)
|
|
89
|
+
}, /*#__PURE__*/React.createElement(TreeSelect, __assign({}, omit(props, ['open', 'onChange', 'className', 'label']), {
|
|
90
|
+
open: open,
|
|
91
|
+
ref: selectRef,
|
|
92
|
+
size: "large",
|
|
93
|
+
className: "label-select-selector",
|
|
94
|
+
onChange: handleChange,
|
|
95
|
+
onDropdownVisibleChange: onDropdownVisibleChange
|
|
96
|
+
})), /*#__PURE__*/React.createElement("label", {
|
|
97
|
+
className: "label-select-text",
|
|
98
|
+
onClick: handleLabelClick
|
|
99
|
+
}, label));
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
export default LabelSelect;
|
|
103
|
+
LabelSelect.Option = Option;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/* stylelint-disable indentation */
|
|
2
|
+
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
|
3
|
+
/* stylelint-disable no-duplicate-selectors */
|
|
4
|
+
/* stylelint-disable */
|
|
5
|
+
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
|
6
|
+
.label-select {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
}
|
|
11
|
+
.label-select .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
|
|
12
|
+
height: 52px;
|
|
13
|
+
border: 1px solid #e5e5e5;
|
|
14
|
+
border-radius: 12px;
|
|
15
|
+
outline: none;
|
|
16
|
+
}
|
|
17
|
+
.label-select .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
|
|
18
|
+
border-color: #ff6b00;
|
|
19
|
+
box-shadow: none;
|
|
20
|
+
}
|
|
21
|
+
.label-select .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
|
|
22
|
+
padding-top: 14px;
|
|
23
|
+
padding-left: 4px;
|
|
24
|
+
}
|
|
25
|
+
.label-select .ant-select-selection-search {
|
|
26
|
+
padding-top: 14px;
|
|
27
|
+
padding-left: 2px;
|
|
28
|
+
}
|
|
29
|
+
.label-select .ant-select-arrow {
|
|
30
|
+
top: 44%;
|
|
31
|
+
width: 22px;
|
|
32
|
+
height: 22px;
|
|
33
|
+
color: #7d7d7d;
|
|
34
|
+
}
|
|
35
|
+
.label-select .ant-select-arrow .spotecicon {
|
|
36
|
+
width: 22px;
|
|
37
|
+
height: 22px;
|
|
38
|
+
}
|
|
39
|
+
.label-select-text {
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 18px;
|
|
42
|
+
left: 16px;
|
|
43
|
+
z-index: 2;
|
|
44
|
+
height: 20px;
|
|
45
|
+
color: #9aa5b5;
|
|
46
|
+
font-size: 14px;
|
|
47
|
+
line-height: 20px;
|
|
48
|
+
transform-origin: top left;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
transition: all 0.2s ease-out;
|
|
51
|
+
}
|
|
52
|
+
.label-select-label-scale .label-select-text {
|
|
53
|
+
transform: translateY(-10px) scale(0.86);
|
|
54
|
+
cursor: text;
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* stylelint-disable indentation */
|
|
2
|
+
@import '~antd/es/style/themes/index';
|
|
3
|
+
|
|
4
|
+
@color_9aa5b5: #9aa5b5;
|
|
5
|
+
@font-size-base: 14px;
|
|
6
|
+
|
|
7
|
+
.label-select {
|
|
8
|
+
position: relative;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
|
|
12
|
+
.@{ant-prefix}-select-single.@{ant-prefix}-select-lg:not(.@{ant-prefix}-select-customize-input)
|
|
13
|
+
.@{ant-prefix}-select-selector {
|
|
14
|
+
height: 52px;
|
|
15
|
+
border: 1px solid #e5e5e5;
|
|
16
|
+
border-radius: 12px;
|
|
17
|
+
outline: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.@{ant-prefix}-select-focused:not(.@{ant-prefix}-select-disabled).@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input)
|
|
21
|
+
.@{ant-prefix}-select-selector {
|
|
22
|
+
border-color: #ff6b00;
|
|
23
|
+
box-shadow: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.@{ant-prefix}-select-single.@{ant-prefix}-select-show-arrow
|
|
27
|
+
.@{ant-prefix}-select-selection-item {
|
|
28
|
+
padding-top: 14px;
|
|
29
|
+
padding-left: 4px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.@{ant-prefix}-select-selection-search {
|
|
33
|
+
padding-top: 14px;
|
|
34
|
+
padding-left: 2px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.@{ant-prefix}-select-arrow {
|
|
38
|
+
top: 44%;
|
|
39
|
+
width: 22px;
|
|
40
|
+
height: 22px;
|
|
41
|
+
color: #7d7d7d;
|
|
42
|
+
|
|
43
|
+
.spotecicon {
|
|
44
|
+
width: 22px;
|
|
45
|
+
height: 22px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-text {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 18px;
|
|
52
|
+
left: 16px;
|
|
53
|
+
z-index: 2;
|
|
54
|
+
height: 20px;
|
|
55
|
+
color: @color_9aa5b5;
|
|
56
|
+
font-size: @font-size-base;
|
|
57
|
+
line-height: 20px;
|
|
58
|
+
transform-origin: top left;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
transition: all 0.2s ease-out;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&-label-scale {
|
|
64
|
+
.label-select-text {
|
|
65
|
+
transform: translateY(-10px) scale(0.86);
|
|
66
|
+
cursor: text;
|
|
67
|
+
pointer-events: none;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
package/lib/label-input/index.js
CHANGED
|
@@ -41,14 +41,16 @@ var react_1 = __importDefault(require("react"));
|
|
|
41
41
|
|
|
42
42
|
var classnames_1 = __importDefault(require("classnames"));
|
|
43
43
|
|
|
44
|
-
var ahooks_1 = require("ahooks");
|
|
45
|
-
|
|
46
44
|
var lodash_1 = require("lodash");
|
|
47
45
|
|
|
48
46
|
var EyeFilled_1 = __importDefault(require("a-icons/lib/EyeFilled"));
|
|
49
47
|
|
|
50
48
|
var EyeOutlined_1 = __importDefault(require("a-icons/lib/EyeOutlined"));
|
|
51
49
|
|
|
50
|
+
var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
|
|
51
|
+
|
|
52
|
+
var useSize_1 = __importDefault(require("ahooks/lib/useSize"));
|
|
53
|
+
|
|
52
54
|
var PasswordSuffix = react_1["default"].memo(function (_a) {
|
|
53
55
|
var inputType = _a.inputType,
|
|
54
56
|
onChangeInputType = _a.onChangeInputType;
|
|
@@ -75,21 +77,25 @@ var LabelInput = function LabelInput(props) {
|
|
|
75
77
|
onBlur = props.onBlur,
|
|
76
78
|
_a = props.type,
|
|
77
79
|
type = _a === void 0 ? 'text' : _a,
|
|
78
|
-
maxLength = props.maxLength
|
|
80
|
+
maxLength = props.maxLength,
|
|
81
|
+
_b = props.baseMinWidth,
|
|
82
|
+
baseMinWidth = _b === void 0 ? 50 : _b;
|
|
83
|
+
var labelDomRef = react_1["default"].useRef(null);
|
|
84
|
+
var labelSize = useSize_1["default"](labelDomRef);
|
|
79
85
|
|
|
80
|
-
var
|
|
81
|
-
focused =
|
|
82
|
-
setFocused =
|
|
86
|
+
var _c = __read(react_1["default"].useState(false), 2),
|
|
87
|
+
focused = _c[0],
|
|
88
|
+
setFocused = _c[1];
|
|
83
89
|
|
|
84
|
-
var
|
|
90
|
+
var _d = __read(useControllableValue_1["default"](props, {
|
|
85
91
|
defaultValue: ''
|
|
86
92
|
}), 2),
|
|
87
|
-
value =
|
|
88
|
-
setValue =
|
|
93
|
+
value = _d[0],
|
|
94
|
+
setValue = _d[1];
|
|
89
95
|
|
|
90
|
-
var
|
|
91
|
-
inputType =
|
|
92
|
-
setInputType =
|
|
96
|
+
var _e = __read(react_1["default"].useState(type), 2),
|
|
97
|
+
inputType = _e[0],
|
|
98
|
+
setInputType = _e[1];
|
|
93
99
|
|
|
94
100
|
var InputDomRef = react_1["default"].useRef(null);
|
|
95
101
|
var isPasswordInput = type === 'password';
|
|
@@ -118,9 +124,13 @@ var LabelInput = function LabelInput(props) {
|
|
|
118
124
|
var onChangeInputType = react_1["default"].useCallback(function (nextInputType) {
|
|
119
125
|
setInputType(nextInputType);
|
|
120
126
|
}, []);
|
|
127
|
+
var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + baseMinWidth : undefined;
|
|
121
128
|
return react_1["default"].createElement("div", {
|
|
122
129
|
className: classnames_1["default"]('label-input-control', className),
|
|
123
|
-
id: id
|
|
130
|
+
id: id,
|
|
131
|
+
style: {
|
|
132
|
+
minWidth: controlMinWidth
|
|
133
|
+
}
|
|
124
134
|
}, react_1["default"].createElement("div", {
|
|
125
135
|
className: classnames_1["default"]('label-input-field', {
|
|
126
136
|
'label-input-affix': prefix || suffix || isPasswordInput,
|
|
@@ -144,7 +154,8 @@ var LabelInput = function LabelInput(props) {
|
|
|
144
154
|
maxLength: maxLength
|
|
145
155
|
}), react_1["default"].createElement("label", {
|
|
146
156
|
className: "label-input-text",
|
|
147
|
-
onClick: handleLabelClick
|
|
157
|
+
onClick: handleLabelClick,
|
|
158
|
+
ref: labelDomRef
|
|
148
159
|
}, label)), (suffix || isPasswordInput) && react_1["default"].createElement("div", {
|
|
149
160
|
className: "label-input-suffix"
|
|
150
161
|
}, suffix || react_1["default"].createElement(PasswordSuffix, {
|
|
@@ -64,7 +64,7 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
64
64
|
|
|
65
65
|
var ArrowDropDownFilled_1 = __importDefault(require("a-icons/lib/ArrowDropDownFilled"));
|
|
66
66
|
|
|
67
|
-
var
|
|
67
|
+
var omit_1 = __importDefault(require("lodash/omit"));
|
|
68
68
|
|
|
69
69
|
var Option = select_1["default"].Option;
|
|
70
70
|
exports.Option = Option;
|
|
@@ -108,7 +108,7 @@ var LabelSelect = function LabelSelect(props) {
|
|
|
108
108
|
'label-select': true,
|
|
109
109
|
'label-select-label-scale': open || value
|
|
110
110
|
}, className)
|
|
111
|
-
}, react_1["default"].createElement(select_1["default"], __assign({},
|
|
111
|
+
}, react_1["default"].createElement(select_1["default"], __assign({}, omit_1["default"](props, ['open', 'onChange', 'className', 'label']), {
|
|
112
112
|
open: open,
|
|
113
113
|
ref: selectRef,
|
|
114
114
|
size: "large",
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TreeSelectProps } from 'antd/es/tree-select';
|
|
3
|
+
export interface LabelSelectProps extends TreeSelectProps<string> {
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
declare const LabelSelect: {
|
|
7
|
+
(props: LabelSelectProps): JSX.Element;
|
|
8
|
+
Option: new (text?: string | undefined, value?: string | undefined, defaultSelected?: boolean | undefined, selected?: boolean | undefined) => HTMLOptionElement;
|
|
9
|
+
};
|
|
10
|
+
export default LabelSelect;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __assign = this && this.__assign || function () {
|
|
4
|
+
__assign = Object.assign || function (t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
|
|
8
|
+
for (var p in s) {
|
|
9
|
+
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
return __assign.apply(this, arguments);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
var __read = this && this.__read || function (o, n) {
|
|
20
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
21
|
+
if (!m) return o;
|
|
22
|
+
var i = m.call(o),
|
|
23
|
+
r,
|
|
24
|
+
ar = [],
|
|
25
|
+
e;
|
|
26
|
+
|
|
27
|
+
try {
|
|
28
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
|
|
29
|
+
ar.push(r.value);
|
|
30
|
+
}
|
|
31
|
+
} catch (error) {
|
|
32
|
+
e = {
|
|
33
|
+
error: error
|
|
34
|
+
};
|
|
35
|
+
} finally {
|
|
36
|
+
try {
|
|
37
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
38
|
+
} finally {
|
|
39
|
+
if (e) throw e.error;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return ar;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
var __importDefault = this && this.__importDefault || function (mod) {
|
|
47
|
+
return mod && mod.__esModule ? mod : {
|
|
48
|
+
"default": mod
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
Object.defineProperty(exports, "__esModule", {
|
|
53
|
+
value: true
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
var react_1 = __importDefault(require("react"));
|
|
57
|
+
|
|
58
|
+
var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
|
|
59
|
+
|
|
60
|
+
var tree_select_1 = __importDefault(require("antd/es/tree-select"));
|
|
61
|
+
|
|
62
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
63
|
+
|
|
64
|
+
var omit_1 = __importDefault(require("lodash/omit"));
|
|
65
|
+
|
|
66
|
+
var LabelSelect = function LabelSelect(props) {
|
|
67
|
+
var className = props.className,
|
|
68
|
+
label = props.label;
|
|
69
|
+
var selectRef = react_1["default"].useRef(null);
|
|
70
|
+
|
|
71
|
+
var _a = __read(useControllableValue_1["default"](props, {
|
|
72
|
+
valuePropName: 'open',
|
|
73
|
+
trigger: 'setOpen'
|
|
74
|
+
}), 2),
|
|
75
|
+
open = _a[0],
|
|
76
|
+
setOpen = _a[1];
|
|
77
|
+
|
|
78
|
+
var _b = __read(useControllableValue_1["default"](props), 2),
|
|
79
|
+
value = _b[0],
|
|
80
|
+
setValue = _b[1];
|
|
81
|
+
|
|
82
|
+
var handleChange = function handleChange(nextValue) {
|
|
83
|
+
setValue(nextValue);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var handleLabelClick = function handleLabelClick() {
|
|
87
|
+
var _a;
|
|
88
|
+
|
|
89
|
+
if (!open) {
|
|
90
|
+
setOpen(!open);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
(_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
var onDropdownVisibleChange = function onDropdownVisibleChange(nextOpen) {
|
|
97
|
+
setOpen(nextOpen);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
return react_1["default"].createElement("div", {
|
|
101
|
+
className: classnames_1["default"]({
|
|
102
|
+
'label-select': true,
|
|
103
|
+
'label-select-label-scale': open || value
|
|
104
|
+
}, className)
|
|
105
|
+
}, react_1["default"].createElement(tree_select_1["default"], __assign({}, omit_1["default"](props, ['open', 'onChange', 'className', 'label']), {
|
|
106
|
+
open: open,
|
|
107
|
+
ref: selectRef,
|
|
108
|
+
size: "large",
|
|
109
|
+
className: "label-select-selector",
|
|
110
|
+
onChange: handleChange,
|
|
111
|
+
onDropdownVisibleChange: onDropdownVisibleChange
|
|
112
|
+
})), react_1["default"].createElement("label", {
|
|
113
|
+
className: "label-select-text",
|
|
114
|
+
onClick: handleLabelClick
|
|
115
|
+
}, label));
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
exports["default"] = LabelSelect;
|
|
119
|
+
LabelSelect.Option = Option;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/* stylelint-disable indentation */
|
|
2
|
+
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
|
3
|
+
/* stylelint-disable no-duplicate-selectors */
|
|
4
|
+
/* stylelint-disable */
|
|
5
|
+
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
|
6
|
+
.label-select {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
}
|
|
11
|
+
.label-select .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
|
|
12
|
+
height: 52px;
|
|
13
|
+
border: 1px solid #e5e5e5;
|
|
14
|
+
border-radius: 12px;
|
|
15
|
+
outline: none;
|
|
16
|
+
}
|
|
17
|
+
.label-select .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
|
|
18
|
+
border-color: #ff6b00;
|
|
19
|
+
box-shadow: none;
|
|
20
|
+
}
|
|
21
|
+
.label-select .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
|
|
22
|
+
padding-top: 14px;
|
|
23
|
+
padding-left: 4px;
|
|
24
|
+
}
|
|
25
|
+
.label-select .ant-select-selection-search {
|
|
26
|
+
padding-top: 14px;
|
|
27
|
+
padding-left: 2px;
|
|
28
|
+
}
|
|
29
|
+
.label-select .ant-select-arrow {
|
|
30
|
+
top: 44%;
|
|
31
|
+
width: 22px;
|
|
32
|
+
height: 22px;
|
|
33
|
+
color: #7d7d7d;
|
|
34
|
+
}
|
|
35
|
+
.label-select .ant-select-arrow .spotecicon {
|
|
36
|
+
width: 22px;
|
|
37
|
+
height: 22px;
|
|
38
|
+
}
|
|
39
|
+
.label-select-text {
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 18px;
|
|
42
|
+
left: 16px;
|
|
43
|
+
z-index: 2;
|
|
44
|
+
height: 20px;
|
|
45
|
+
color: #9aa5b5;
|
|
46
|
+
font-size: 14px;
|
|
47
|
+
line-height: 20px;
|
|
48
|
+
transform-origin: top left;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
transition: all 0.2s ease-out;
|
|
51
|
+
}
|
|
52
|
+
.label-select-label-scale .label-select-text {
|
|
53
|
+
transform: translateY(-10px) scale(0.86);
|
|
54
|
+
cursor: text;
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* stylelint-disable indentation */
|
|
2
|
+
@import '~antd/es/style/themes/index';
|
|
3
|
+
|
|
4
|
+
@color_9aa5b5: #9aa5b5;
|
|
5
|
+
@font-size-base: 14px;
|
|
6
|
+
|
|
7
|
+
.label-select {
|
|
8
|
+
position: relative;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
|
|
12
|
+
.@{ant-prefix}-select-single.@{ant-prefix}-select-lg:not(.@{ant-prefix}-select-customize-input)
|
|
13
|
+
.@{ant-prefix}-select-selector {
|
|
14
|
+
height: 52px;
|
|
15
|
+
border: 1px solid #e5e5e5;
|
|
16
|
+
border-radius: 12px;
|
|
17
|
+
outline: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.@{ant-prefix}-select-focused:not(.@{ant-prefix}-select-disabled).@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input)
|
|
21
|
+
.@{ant-prefix}-select-selector {
|
|
22
|
+
border-color: #ff6b00;
|
|
23
|
+
box-shadow: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.@{ant-prefix}-select-single.@{ant-prefix}-select-show-arrow
|
|
27
|
+
.@{ant-prefix}-select-selection-item {
|
|
28
|
+
padding-top: 14px;
|
|
29
|
+
padding-left: 4px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.@{ant-prefix}-select-selection-search {
|
|
33
|
+
padding-top: 14px;
|
|
34
|
+
padding-left: 2px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.@{ant-prefix}-select-arrow {
|
|
38
|
+
top: 44%;
|
|
39
|
+
width: 22px;
|
|
40
|
+
height: 22px;
|
|
41
|
+
color: #7d7d7d;
|
|
42
|
+
|
|
43
|
+
.spotecicon {
|
|
44
|
+
width: 22px;
|
|
45
|
+
height: 22px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-text {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 18px;
|
|
52
|
+
left: 16px;
|
|
53
|
+
z-index: 2;
|
|
54
|
+
height: 20px;
|
|
55
|
+
color: @color_9aa5b5;
|
|
56
|
+
font-size: @font-size-base;
|
|
57
|
+
line-height: 20px;
|
|
58
|
+
transform-origin: top left;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
transition: all 0.2s ease-out;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&-label-scale {
|
|
64
|
+
.label-select-text {
|
|
65
|
+
transform: translateY(-10px) scale(0.86);
|
|
66
|
+
cursor: text;
|
|
67
|
+
pointer-events: none;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "assui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.104",
|
|
4
4
|
"description": "react ui library",
|
|
5
5
|
"author": "jason <usochen@gmail.com>",
|
|
6
6
|
"main": "./lib/index.js",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@ahooksjs/use-url-state": "^2.5.8",
|
|
34
34
|
"@tinymce/tinymce-react": "^3.13.0",
|
|
35
35
|
"@types/react-beautiful-dnd": "^13.1.2",
|
|
36
|
-
"a-icons": "^1.0.
|
|
36
|
+
"a-icons": "^1.0.54",
|
|
37
37
|
"ahooks": "^3.0.8",
|
|
38
38
|
"bignumber.js": "^9.0.1",
|
|
39
39
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"node": ">=10.0.0"
|
|
70
70
|
},
|
|
71
71
|
"license": "MIT",
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "1ff7b7b77d0e7f6e6f2cae223067ec1de498e5ef"
|
|
73
73
|
}
|