assui 2.0.78 → 2.0.82
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/index.d.ts +3 -1
- package/es/index.js +1 -0
- package/es/keep-tab/index.js +1 -3
- package/es/label-desc-item/demo/index.less +9 -0
- package/es/label-desc-item/index.d.ts +13 -0
- package/es/label-desc-item/index.js +22 -0
- package/es/label-desc-item/style/index.css +23 -0
- package/es/label-desc-item/style/index.d.ts +1 -0
- package/es/label-desc-item/style/index.js +1 -0
- package/es/label-desc-item/style/index.less +26 -0
- package/es/label-input/index.d.ts +23 -0
- package/es/label-input/index.js +104 -0
- package/es/label-input/style/index.css +72 -0
- package/es/label-input/style/index.d.ts +1 -0
- package/es/label-input/style/index.js +1 -0
- package/es/label-input/style/index.less +95 -0
- package/es/label-select/index.d.ts +12 -0
- package/es/label-select/index.js +107 -0
- package/es/label-select/style/index.css +55 -0
- package/es/label-select/style/index.d.ts +2 -0
- package/es/label-select/style/index.js +2 -0
- package/es/label-select/style/index.less +69 -0
- package/es/label-text-area/index.d.ts +2 -0
- package/es/label-text-area/index.js +7 -0
- package/es/label-text-area/style/index.d.ts +1 -0
- package/es/label-text-area/style/index.js +0 -0
- package/es/rc-qrcode/index.d.ts +6 -6
- package/es/rc-qrcode/index.js +4 -4
- package/es/rc-qrcode/useQrcode.d.ts +1 -1
- package/es/rc-qrcode/useQrcode.js +4 -0
- package/lib/index.d.ts +3 -1
- package/lib/index.js +9 -0
- package/lib/keep-tab/index.js +1 -3
- package/lib/label-desc-item/demo/index.less +9 -0
- package/lib/label-desc-item/index.d.ts +13 -0
- package/lib/label-desc-item/index.js +35 -0
- package/lib/label-desc-item/style/index.css +23 -0
- package/lib/label-desc-item/style/index.d.ts +1 -0
- package/lib/label-desc-item/style/index.js +7 -0
- package/lib/label-desc-item/style/index.less +26 -0
- package/lib/label-input/index.d.ts +23 -0
- package/lib/label-input/index.js +119 -0
- package/lib/label-input/style/index.css +72 -0
- package/lib/label-input/style/index.d.ts +1 -0
- package/lib/label-input/style/index.js +7 -0
- package/lib/label-input/style/index.less +95 -0
- package/lib/label-select/index.d.ts +12 -0
- package/lib/label-select/index.js +126 -0
- package/lib/label-select/style/index.css +55 -0
- package/lib/label-select/style/index.d.ts +2 -0
- package/lib/label-select/style/index.js +9 -0
- package/lib/label-select/style/index.less +69 -0
- package/lib/label-text-area/index.d.ts +2 -0
- package/lib/label-text-area/index.js +19 -0
- package/lib/label-text-area/style/index.d.ts +1 -0
- package/lib/label-text-area/style/index.js +0 -0
- package/lib/rc-qrcode/index.d.ts +6 -6
- package/lib/rc-qrcode/index.js +4 -4
- package/lib/rc-qrcode/useQrcode.d.ts +1 -1
- package/lib/rc-qrcode/useQrcode.js +4 -0
- package/package.json +3 -3
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@import '~antd/es/style/themes/index';
|
|
2
|
+
|
|
3
|
+
@color_9aa5b5: #9aa5b5;
|
|
4
|
+
@font-size-base: 14px;
|
|
5
|
+
|
|
6
|
+
.label-select {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
|
|
11
|
+
.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
|
+
|
|
18
|
+
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
|
|
19
|
+
.ant-select-selector {
|
|
20
|
+
border-color: #ff6b00;
|
|
21
|
+
box-shadow: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ant-select-single.ant-select-show-arrow .ant-select-selection-item {
|
|
25
|
+
padding-top: 14px;
|
|
26
|
+
padding-left: 4px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ant-select-selection-search {
|
|
30
|
+
padding-top: 14px;
|
|
31
|
+
padding-left: 2px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ant-select-arrow {
|
|
35
|
+
top: 44%;
|
|
36
|
+
// position: relative;
|
|
37
|
+
// top: -2px;
|
|
38
|
+
width: 22px;
|
|
39
|
+
height: 22px;
|
|
40
|
+
color: #7d7d7d;
|
|
41
|
+
|
|
42
|
+
.spotecicon {
|
|
43
|
+
width: 22px;
|
|
44
|
+
height: 22px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&-text {
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 18px;
|
|
51
|
+
left: 16px;
|
|
52
|
+
z-index: 2;
|
|
53
|
+
height: 20px;
|
|
54
|
+
color: @color_9aa5b5;
|
|
55
|
+
font-size: @font-size-base;
|
|
56
|
+
line-height: 20px;
|
|
57
|
+
transform-origin: top left;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
transition: all 0.2s ease-out;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&-label-scale {
|
|
63
|
+
.label-select-text {
|
|
64
|
+
transform: translateY(-10px) scale(0.86);
|
|
65
|
+
cursor: text;
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
File without changes
|
package/es/rc-qrcode/index.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import type { QRCodeRenderersOptions, QRCodeSegment } from 'qrcode';
|
|
2
2
|
import QRCode from 'qrcode';
|
|
3
3
|
import useQrcode from './useQrcode';
|
|
4
|
-
export interface
|
|
4
|
+
export interface RcQrcodeProps {
|
|
5
5
|
/** 生成二维码的值 */
|
|
6
|
-
value: QRCodeSegment[];
|
|
6
|
+
value: QRCodeSegment[] | string;
|
|
7
7
|
/** qrcode的QRCodeRenderersOptions */
|
|
8
8
|
options: QRCodeRenderersOptions;
|
|
9
9
|
/** 获取HTMLCanvasElement */
|
|
10
10
|
getCanvasInstance: (result: HTMLCanvasElement) => void;
|
|
11
11
|
}
|
|
12
|
-
declare const
|
|
13
|
-
(props:
|
|
12
|
+
declare const RcQrcode: {
|
|
13
|
+
(props: RcQrcodeProps): JSX.Element;
|
|
14
14
|
defaultProps: {
|
|
15
15
|
value: string;
|
|
16
16
|
options: {};
|
|
17
17
|
};
|
|
18
|
-
useQrcode: (value: string | QRCodeSegment[], options
|
|
18
|
+
useQrcode: (value: string | QRCodeSegment[], options?: QRCode.QRCodeToDataURLOptions) => string;
|
|
19
19
|
};
|
|
20
|
-
export default
|
|
20
|
+
export default RcQrcode;
|
|
21
21
|
export { useQrcode };
|
package/es/rc-qrcode/index.js
CHANGED
|
@@ -19,7 +19,7 @@ import QRCode from 'qrcode';
|
|
|
19
19
|
import useMount from 'ahooks/lib/useMount';
|
|
20
20
|
import useQrcode from './useQrcode';
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var RcQrcode = function RcQrcode(props) {
|
|
23
23
|
var value = props.value,
|
|
24
24
|
options = props.options;
|
|
25
25
|
var domElRef = React.useRef(null);
|
|
@@ -48,10 +48,10 @@ var RcQRcode = function RcQRcode(props) {
|
|
|
48
48
|
});
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
RcQrcode.defaultProps = {
|
|
52
52
|
value: '',
|
|
53
53
|
options: {}
|
|
54
54
|
};
|
|
55
|
-
|
|
56
|
-
export default
|
|
55
|
+
RcQrcode.useQrcode = useQrcode;
|
|
56
|
+
export default RcQrcode;
|
|
57
57
|
export { useQrcode };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { QRCodeToDataURLOptions, QRCodeSegment } from 'qrcode';
|
|
2
2
|
declare type ValueTypes = string | QRCodeSegment[];
|
|
3
|
-
export declare const useQRCode: (value: ValueTypes, options
|
|
3
|
+
export declare const useQRCode: (value: ValueTypes, options?: QRCodeToDataURLOptions) => string;
|
|
4
4
|
export default useQRCode;
|
|
@@ -28,6 +28,10 @@ var __read = this && this.__read || function (o, n) {
|
|
|
28
28
|
import QRCode from 'qrcode';
|
|
29
29
|
import { useEffect, useState } from 'react';
|
|
30
30
|
export var useQRCode = function useQRCode(value, options) {
|
|
31
|
+
if (options === void 0) {
|
|
32
|
+
options = {};
|
|
33
|
+
}
|
|
34
|
+
|
|
31
35
|
var _a = __read(useState(''), 2),
|
|
32
36
|
dataURL = _a[0],
|
|
33
37
|
setDataURL = _a[1];
|
package/lib/index.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export type { StepNumberInputProps } from './step-number-input';
|
|
|
22
22
|
export { default as StepNumberInput } from './step-number-input';
|
|
23
23
|
export type { RcEchartPropsType } from './rc-echart';
|
|
24
24
|
export { default as RcEcharts } from './rc-echart';
|
|
25
|
-
export type {
|
|
25
|
+
export type { RcQrcodeProps } from './rc-qrcode';
|
|
26
26
|
export { default as RcQRcode } from './rc-qrcode';
|
|
27
27
|
export { default as RcTransitionGroup } from './rc-transition-group';
|
|
28
28
|
export type { SingleImgUploadProps } from './single-img-upload';
|
|
@@ -34,6 +34,8 @@ export type { TAreaProps } from './text-area';
|
|
|
34
34
|
export { default as TextArea } from './text-area';
|
|
35
35
|
export type { TextInputProps } from './text-input';
|
|
36
36
|
export { default as TextInput } from './text-input';
|
|
37
|
+
export type { LabelInputProps } from './label-input';
|
|
38
|
+
export { default as LabelInput } from './label-input';
|
|
37
39
|
export type { RichTextEditorProps } from './rich-text-editor';
|
|
38
40
|
export { default as RichTextEditor } from './rich-text-editor';
|
|
39
41
|
export { default as beautifulDnd } from './beautiful-dnd';
|
package/lib/index.js
CHANGED
|
@@ -175,6 +175,15 @@ Object.defineProperty(exports, "TextInput", {
|
|
|
175
175
|
}
|
|
176
176
|
});
|
|
177
177
|
|
|
178
|
+
var label_input_1 = require("./label-input");
|
|
179
|
+
|
|
180
|
+
Object.defineProperty(exports, "LabelInput", {
|
|
181
|
+
enumerable: true,
|
|
182
|
+
get: function get() {
|
|
183
|
+
return label_input_1["default"];
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
|
|
178
187
|
var rich_text_editor_1 = require("./rich-text-editor");
|
|
179
188
|
|
|
180
189
|
Object.defineProperty(exports, "RichTextEditor", {
|
package/lib/keep-tab/index.js
CHANGED
|
@@ -145,7 +145,7 @@ var KeepTab = function KeepTab(props) {
|
|
|
145
145
|
|
|
146
146
|
var arrayChildren = toArray_1["default"](children);
|
|
147
147
|
React.useEffect(function () {
|
|
148
|
-
var _a
|
|
148
|
+
var _a;
|
|
149
149
|
|
|
150
150
|
if (!('activeKey' in props)) {
|
|
151
151
|
var resultActiveTab = lodash_1.find(arrayChildren, {
|
|
@@ -156,8 +156,6 @@ var KeepTab = function KeepTab(props) {
|
|
|
156
156
|
setUrlParams((_a = {}, _a[saveActiveKeyName] = arrayChildren[0].key, _a));
|
|
157
157
|
setTabActiveKey(arrayChildren[0].key);
|
|
158
158
|
}
|
|
159
|
-
} else {
|
|
160
|
-
setUrlParams((_b = {}, _b[saveActiveKeyName] = tabActiveKey, _b));
|
|
161
159
|
}
|
|
162
160
|
}, [tabActiveKey]);
|
|
163
161
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare type DescItemProps = {
|
|
3
|
+
/** 自定义class */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** label 标签的文本 */
|
|
6
|
+
label?: React.ReactNode;
|
|
7
|
+
/** descItem的value */
|
|
8
|
+
value?: React.ReactNode;
|
|
9
|
+
/** 带有后缀的 item */
|
|
10
|
+
suffix?: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
declare const DescItem: React.FC<DescItemProps>;
|
|
13
|
+
export default DescItem;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __importDefault = this && this.__importDefault || function (mod) {
|
|
4
|
+
return mod && mod.__esModule ? mod : {
|
|
5
|
+
"default": mod
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
Object.defineProperty(exports, "__esModule", {
|
|
10
|
+
value: true
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var react_1 = __importDefault(require("react"));
|
|
14
|
+
|
|
15
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
16
|
+
|
|
17
|
+
var DescItem = function DescItem(props) {
|
|
18
|
+
var className = props.className,
|
|
19
|
+
label = props.label,
|
|
20
|
+
value = props.value,
|
|
21
|
+
suffix = props.suffix;
|
|
22
|
+
return react_1["default"].createElement("div", {
|
|
23
|
+
className: classnames_1["default"]('desc-item', className)
|
|
24
|
+
}, react_1["default"].createElement("div", {
|
|
25
|
+
className: "desc-item-left-content"
|
|
26
|
+
}, label && react_1["default"].createElement("div", {
|
|
27
|
+
className: "desc-item-label"
|
|
28
|
+
}, label), react_1["default"].createElement("div", {
|
|
29
|
+
className: "desc-item-value"
|
|
30
|
+
}, value)), suffix && react_1["default"].createElement("div", {
|
|
31
|
+
className: "desc-item-value"
|
|
32
|
+
}, suffix));
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
exports["default"] = DescItem;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.desc-item {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: space-between;
|
|
5
|
+
padding: 17px 16px;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
background-color: #f8f8f8;
|
|
8
|
+
border-radius: 12px;
|
|
9
|
+
}
|
|
10
|
+
.desc-item-left-content {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-shrink: 0;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
.desc-item-label {
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
margin-right: 10px;
|
|
18
|
+
color: #b3b3b3;
|
|
19
|
+
font-weight: 500;
|
|
20
|
+
}
|
|
21
|
+
.desc-item-value {
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.less';
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.desc-item {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: space-between;
|
|
5
|
+
padding: 17px 16px;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
background-color: #f8f8f8;
|
|
8
|
+
border-radius: 12px;
|
|
9
|
+
|
|
10
|
+
&-left-content {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-shrink: 0;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&-label {
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
margin-right: 10px;
|
|
19
|
+
color: #b3b3b3;
|
|
20
|
+
font-weight: 500;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-value {
|
|
24
|
+
font-weight: 500;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface LabelInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type' | 'onChange' | 'onFocus' | 'onBlur'> {
|
|
3
|
+
/** 自定义class */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** label 标签的文本 */
|
|
6
|
+
label?: React.ReactNode;
|
|
7
|
+
/** 输入框内容 */
|
|
8
|
+
value?: string;
|
|
9
|
+
/** 带有后缀的 input */
|
|
10
|
+
suffix?: React.ReactNode;
|
|
11
|
+
/** 带有前缀的 input */
|
|
12
|
+
prefix?: React.ReactNode;
|
|
13
|
+
/** 输入框内容变化时的回调 */
|
|
14
|
+
onChange?: (value: string) => void;
|
|
15
|
+
/** 输入框失去焦点的回调 */
|
|
16
|
+
onBlur?: (value: string) => void;
|
|
17
|
+
/** 输入框获取焦点的回调 */
|
|
18
|
+
onFocus?: (value: string) => void;
|
|
19
|
+
/** 组件dom id */
|
|
20
|
+
id?: string;
|
|
21
|
+
}
|
|
22
|
+
declare const LabelInput: React.FC<LabelInputProps>;
|
|
23
|
+
export default LabelInput;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __read = this && this.__read || function (o, n) {
|
|
4
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
5
|
+
if (!m) return o;
|
|
6
|
+
var i = m.call(o),
|
|
7
|
+
r,
|
|
8
|
+
ar = [],
|
|
9
|
+
e;
|
|
10
|
+
|
|
11
|
+
try {
|
|
12
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
|
|
13
|
+
ar.push(r.value);
|
|
14
|
+
}
|
|
15
|
+
} catch (error) {
|
|
16
|
+
e = {
|
|
17
|
+
error: error
|
|
18
|
+
};
|
|
19
|
+
} finally {
|
|
20
|
+
try {
|
|
21
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
22
|
+
} finally {
|
|
23
|
+
if (e) throw e.error;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return ar;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
var __importDefault = this && this.__importDefault || function (mod) {
|
|
31
|
+
return mod && mod.__esModule ? mod : {
|
|
32
|
+
"default": mod
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
Object.defineProperty(exports, "__esModule", {
|
|
37
|
+
value: true
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
var react_1 = __importDefault(require("react"));
|
|
41
|
+
|
|
42
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
43
|
+
|
|
44
|
+
var ahooks_1 = require("ahooks");
|
|
45
|
+
|
|
46
|
+
var lodash_1 = require("lodash");
|
|
47
|
+
|
|
48
|
+
var LabelInput = function LabelInput(props) {
|
|
49
|
+
var className = props.className,
|
|
50
|
+
prefix = props.prefix,
|
|
51
|
+
suffix = props.suffix,
|
|
52
|
+
label = props.label,
|
|
53
|
+
id = props.id,
|
|
54
|
+
onFocus = props.onFocus,
|
|
55
|
+
onBlur = props.onBlur;
|
|
56
|
+
|
|
57
|
+
var _a = __read(react_1["default"].useState(false), 2),
|
|
58
|
+
focused = _a[0],
|
|
59
|
+
setFocused = _a[1];
|
|
60
|
+
|
|
61
|
+
var _b = __read(ahooks_1.useControllableValue(props), 2),
|
|
62
|
+
value = _b[0],
|
|
63
|
+
setValue = _b[1];
|
|
64
|
+
|
|
65
|
+
var InputDomRef = react_1["default"].useRef(null);
|
|
66
|
+
|
|
67
|
+
var handleFocus = function handleFocus() {
|
|
68
|
+
setFocused(true);
|
|
69
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
var handleBlur = function handleBlur() {
|
|
73
|
+
setFocused(false);
|
|
74
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(value);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
var handleChange = function handleChange(e) {
|
|
78
|
+
var finallyValue = lodash_1.trimStart(e.target.value);
|
|
79
|
+
setValue(finallyValue);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
var handleLabelClick = function handleLabelClick() {
|
|
83
|
+
var _a;
|
|
84
|
+
|
|
85
|
+
(_a = InputDomRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
return react_1["default"].createElement("div", {
|
|
89
|
+
className: classnames_1["default"]('label-input-control', className),
|
|
90
|
+
id: id
|
|
91
|
+
}, react_1["default"].createElement("div", {
|
|
92
|
+
className: classnames_1["default"]('label-input-field', {
|
|
93
|
+
'label-input-affix': prefix || suffix,
|
|
94
|
+
'label-input-focused': focused
|
|
95
|
+
})
|
|
96
|
+
}, prefix && react_1["default"].createElement("div", {
|
|
97
|
+
className: "label-input-prefix"
|
|
98
|
+
}, prefix), react_1["default"].createElement("div", {
|
|
99
|
+
className: "label-input-warper"
|
|
100
|
+
}, react_1["default"].createElement("input", {
|
|
101
|
+
ref: function ref(el) {
|
|
102
|
+
return InputDomRef.current = el;
|
|
103
|
+
},
|
|
104
|
+
"data-value": value ? value.length : 0,
|
|
105
|
+
className: "label-input",
|
|
106
|
+
type: "text",
|
|
107
|
+
value: value,
|
|
108
|
+
onFocus: handleFocus,
|
|
109
|
+
onBlur: handleBlur,
|
|
110
|
+
onChange: handleChange
|
|
111
|
+
}), react_1["default"].createElement("label", {
|
|
112
|
+
className: "label-input-text",
|
|
113
|
+
onClick: handleLabelClick
|
|
114
|
+
}, label)), suffix && react_1["default"].createElement("div", {
|
|
115
|
+
className: "label-input-suffix"
|
|
116
|
+
}, suffix)));
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
exports["default"] = LabelInput;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
.label-input {
|
|
2
|
+
z-index: 1;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
padding: 24px 15px 8px 15px;
|
|
6
|
+
color: #263241;
|
|
7
|
+
font-size: 16px;
|
|
8
|
+
line-height: 16px;
|
|
9
|
+
border: 1px solid #e5e5e5;
|
|
10
|
+
border-radius: 12px;
|
|
11
|
+
outline: 0;
|
|
12
|
+
transition: border 0.3s;
|
|
13
|
+
}
|
|
14
|
+
.label-input:focus {
|
|
15
|
+
border-color: #ff6b00;
|
|
16
|
+
}
|
|
17
|
+
.label-input:focus + label,
|
|
18
|
+
.label-input:not([data-value='0']) + label {
|
|
19
|
+
transform: translateY(-10px) scale(0.86);
|
|
20
|
+
}
|
|
21
|
+
.label-input-control {
|
|
22
|
+
position: relative;
|
|
23
|
+
display: block;
|
|
24
|
+
width: 100%;
|
|
25
|
+
}
|
|
26
|
+
.label-input-field {
|
|
27
|
+
height: 56px;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
}
|
|
30
|
+
.label-input-affix {
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
border: 1px solid #dfe2e7;
|
|
34
|
+
border-radius: 6px;
|
|
35
|
+
}
|
|
36
|
+
.label-input-affix .label-input {
|
|
37
|
+
border: 0;
|
|
38
|
+
}
|
|
39
|
+
.label-input-affix .label-input:focus {
|
|
40
|
+
border: 0;
|
|
41
|
+
}
|
|
42
|
+
.label-input-focused {
|
|
43
|
+
border-color: #ff6b00;
|
|
44
|
+
}
|
|
45
|
+
.label-input-prefix {
|
|
46
|
+
flex-shrink: 0;
|
|
47
|
+
padding-left: 15px;
|
|
48
|
+
}
|
|
49
|
+
.label-input-suffix {
|
|
50
|
+
flex-shrink: 0;
|
|
51
|
+
padding-right: 15px;
|
|
52
|
+
color: #b3b3b3;
|
|
53
|
+
font-weight: 500;
|
|
54
|
+
}
|
|
55
|
+
.label-input-warper {
|
|
56
|
+
position: relative;
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100%;
|
|
59
|
+
}
|
|
60
|
+
.label-input-text {
|
|
61
|
+
position: absolute;
|
|
62
|
+
top: 16px;
|
|
63
|
+
left: 16px;
|
|
64
|
+
z-index: 2;
|
|
65
|
+
height: 20px;
|
|
66
|
+
color: #9aa5b5;
|
|
67
|
+
font-size: 14px;
|
|
68
|
+
line-height: 20px;
|
|
69
|
+
transform-origin: top left;
|
|
70
|
+
cursor: text;
|
|
71
|
+
transition: all 0.2s ease-out;
|
|
72
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.less';
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
@primary-color: #ff6b00;
|
|
2
|
+
@color_dfe2e7: #dfe2e7;
|
|
3
|
+
@color_9aa5b5: #9aa5b5;
|
|
4
|
+
@color_b3b3b3: #b3b3b3;
|
|
5
|
+
@color_e5e5e5: #e5e5e5;
|
|
6
|
+
|
|
7
|
+
@font-size-base: 14px;
|
|
8
|
+
@font-size-lg: @font-size-base + 2px;
|
|
9
|
+
|
|
10
|
+
@font-weight-500: 500;
|
|
11
|
+
|
|
12
|
+
.label-input {
|
|
13
|
+
z-index: 1;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
padding: 24px 15px 8px 15px;
|
|
17
|
+
color: #263241;
|
|
18
|
+
font-size: @font-size-lg;
|
|
19
|
+
line-height: 16px;
|
|
20
|
+
border: 1px solid @color_e5e5e5;
|
|
21
|
+
border-radius: 12px;
|
|
22
|
+
outline: 0;
|
|
23
|
+
transition: border 0.3s;
|
|
24
|
+
|
|
25
|
+
&:focus {
|
|
26
|
+
border-color: @primary-color;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:focus + label,
|
|
30
|
+
&:not([data-value='0']) + label {
|
|
31
|
+
transform: translateY(-10px) scale(0.86);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&-control {
|
|
35
|
+
position: relative;
|
|
36
|
+
display: block;
|
|
37
|
+
width: 100%;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&-field {
|
|
41
|
+
height: 56px;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&-affix {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
border: 1px solid @color_dfe2e7;
|
|
49
|
+
border-radius: 6px;
|
|
50
|
+
|
|
51
|
+
.label-input {
|
|
52
|
+
border: 0;
|
|
53
|
+
|
|
54
|
+
&:focus {
|
|
55
|
+
border: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&-focused {
|
|
61
|
+
border-color: @primary-color;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&-prefix {
|
|
65
|
+
flex-shrink: 0;
|
|
66
|
+
padding-left: 15px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&-suffix {
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
padding-right: 15px;
|
|
72
|
+
color: @color_b3b3b3;
|
|
73
|
+
font-weight: @font-weight-500;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&-warper {
|
|
77
|
+
position: relative;
|
|
78
|
+
width: 100%;
|
|
79
|
+
height: 100%;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&-text {
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 16px;
|
|
85
|
+
left: 16px;
|
|
86
|
+
z-index: 2;
|
|
87
|
+
height: 20px;
|
|
88
|
+
color: @color_9aa5b5;
|
|
89
|
+
font-size: @font-size-base;
|
|
90
|
+
line-height: 20px;
|
|
91
|
+
transform-origin: top left;
|
|
92
|
+
cursor: text;
|
|
93
|
+
transition: all 0.2s ease-out;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SelectProps } from 'antd/es/select';
|
|
3
|
+
declare const Option: import("rc-select/lib/Option").OptionFC;
|
|
4
|
+
export { Option };
|
|
5
|
+
export interface LabelSelectProps extends SelectProps<string> {
|
|
6
|
+
label: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare const LabelSelect: {
|
|
9
|
+
(props: LabelSelectProps): JSX.Element;
|
|
10
|
+
Option: import("rc-select/lib/Option").OptionFC;
|
|
11
|
+
};
|
|
12
|
+
export default LabelSelect;
|