assui 2.0.81 → 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 +1 -1
- package/es/label-input/style/index.css +1 -1
- package/es/label-input/style/index.less +1 -1
- package/es/label-select/index.d.ts +11 -1
- package/es/label-select/index.js +100 -20
- package/es/label-select/style/index.css +55 -0
- package/es/label-select/style/index.d.ts +1 -0
- package/es/label-select/style/index.js +2 -1
- package/es/label-select/style/index.less +69 -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 +1 -1
- package/lib/label-input/style/index.css +1 -1
- package/lib/label-input/style/index.less +1 -1
- package/lib/label-select/index.d.ts +11 -1
- package/lib/label-select/index.js +105 -20
- package/lib/label-select/style/index.css +55 -0
- package/lib/label-select/style/index.d.ts +1 -0
- package/lib/label-select/style/index.js +3 -1
- package/lib/label-select/style/index.less +69 -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 +2 -2
package/es/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';
|
|
@@ -1,2 +1,12 @@
|
|
|
1
|
-
|
|
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
|
+
};
|
|
2
12
|
export default LabelSelect;
|
package/es/label-select/index.js
CHANGED
|
@@ -1,27 +1,107 @@
|
|
|
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
|
+
|
|
1
44
|
import React from 'react';
|
|
45
|
+
import { useControllableValue } from 'ahooks';
|
|
2
46
|
import Select from 'antd/es/select';
|
|
47
|
+
import classNames from 'classnames';
|
|
48
|
+
import ArrowDropDownFilled from 'a-icons/lib/ArrowDropDownFilled';
|
|
49
|
+
import { omit } from 'lodash';
|
|
3
50
|
var Option = Select.Option;
|
|
51
|
+
export { Option };
|
|
4
52
|
|
|
5
|
-
var LabelSelect = function LabelSelect() {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
53
|
+
var LabelSelect = function LabelSelect(props) {
|
|
54
|
+
var className = props.className,
|
|
55
|
+
label = props.label;
|
|
56
|
+
var selectRef = React.useRef(null);
|
|
57
|
+
|
|
58
|
+
var _a = __read(useControllableValue(props, {
|
|
59
|
+
valuePropName: 'open',
|
|
60
|
+
trigger: 'setOpen'
|
|
61
|
+
}), 2),
|
|
62
|
+
open = _a[0],
|
|
63
|
+
setOpen = _a[1];
|
|
64
|
+
|
|
65
|
+
var _b = __read(useControllableValue(props), 2),
|
|
66
|
+
value = _b[0],
|
|
67
|
+
setValue = _b[1];
|
|
68
|
+
|
|
69
|
+
var handleChange = function handleChange(nextValue) {
|
|
70
|
+
setValue(nextValue);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
var handleLabelClick = function handleLabelClick() {
|
|
74
|
+
var _a;
|
|
75
|
+
|
|
76
|
+
if (!open) {
|
|
77
|
+
setOpen(!open);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
(_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
var onDropdownVisibleChange = function onDropdownVisibleChange(nextOpen) {
|
|
84
|
+
setOpen(nextOpen);
|
|
85
|
+
};
|
|
9
86
|
|
|
10
|
-
return /*#__PURE__*/React.createElement("div",
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}, /*#__PURE__*/React.createElement(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
87
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
88
|
+
className: classNames({
|
|
89
|
+
'label-select': true,
|
|
90
|
+
'label-select-label-scale': open || value
|
|
91
|
+
}, className)
|
|
92
|
+
}, /*#__PURE__*/React.createElement(Select, __assign({}, omit(props, ['open', 'onChange', 'className', 'label']), {
|
|
93
|
+
open: open,
|
|
94
|
+
ref: selectRef,
|
|
95
|
+
size: "large",
|
|
96
|
+
className: "label-select-selector",
|
|
97
|
+
onChange: handleChange,
|
|
98
|
+
onDropdownVisibleChange: onDropdownVisibleChange,
|
|
99
|
+
suffixIcon: /*#__PURE__*/React.createElement(ArrowDropDownFilled, null)
|
|
100
|
+
})), /*#__PURE__*/React.createElement("label", {
|
|
101
|
+
className: "label-select-text",
|
|
102
|
+
onClick: handleLabelClick
|
|
103
|
+
}, label));
|
|
25
104
|
};
|
|
26
105
|
|
|
27
|
-
export default LabelSelect;
|
|
106
|
+
export default LabelSelect;
|
|
107
|
+
LabelSelect.Option = Option;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
|
2
|
+
/* stylelint-disable no-duplicate-selectors */
|
|
3
|
+
/* stylelint-disable */
|
|
4
|
+
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
|
5
|
+
.label-select {
|
|
6
|
+
position: relative;
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
}
|
|
10
|
+
.label-select .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
|
|
11
|
+
height: 52px;
|
|
12
|
+
border: 1px solid #e5e5e5;
|
|
13
|
+
border-radius: 12px;
|
|
14
|
+
outline: none;
|
|
15
|
+
}
|
|
16
|
+
.label-select .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
|
|
17
|
+
border-color: #ff6b00;
|
|
18
|
+
box-shadow: none;
|
|
19
|
+
}
|
|
20
|
+
.label-select .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
|
|
21
|
+
padding-top: 14px;
|
|
22
|
+
padding-left: 4px;
|
|
23
|
+
}
|
|
24
|
+
.label-select .ant-select-selection-search {
|
|
25
|
+
padding-top: 14px;
|
|
26
|
+
padding-left: 2px;
|
|
27
|
+
}
|
|
28
|
+
.label-select .ant-select-arrow {
|
|
29
|
+
top: 44%;
|
|
30
|
+
width: 22px;
|
|
31
|
+
height: 22px;
|
|
32
|
+
color: #7d7d7d;
|
|
33
|
+
}
|
|
34
|
+
.label-select .ant-select-arrow .spotecicon {
|
|
35
|
+
width: 22px;
|
|
36
|
+
height: 22px;
|
|
37
|
+
}
|
|
38
|
+
.label-select-text {
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: 18px;
|
|
41
|
+
left: 16px;
|
|
42
|
+
z-index: 2;
|
|
43
|
+
height: 20px;
|
|
44
|
+
color: #9aa5b5;
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
line-height: 20px;
|
|
47
|
+
transform-origin: top left;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
transition: all 0.2s ease-out;
|
|
50
|
+
}
|
|
51
|
+
.label-select-label-scale .label-select-text {
|
|
52
|
+
transform: translateY(-10px) scale(0.86);
|
|
53
|
+
cursor: text;
|
|
54
|
+
pointer-events: none;
|
|
55
|
+
}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
import 'antd/es/select/style';
|
|
1
|
+
import 'antd/es/select/style';
|
|
2
|
+
import './index.less';
|
|
@@ -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
|
+
}
|
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';
|
|
@@ -1,2 +1,12 @@
|
|
|
1
|
-
|
|
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
|
+
};
|
|
2
12
|
export default LabelSelect;
|
|
@@ -1,5 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
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
|
+
|
|
3
46
|
var __importDefault = this && this.__importDefault || function (mod) {
|
|
4
47
|
return mod && mod.__esModule ? mod : {
|
|
5
48
|
"default": mod
|
|
@@ -9,33 +52,75 @@ var __importDefault = this && this.__importDefault || function (mod) {
|
|
|
9
52
|
Object.defineProperty(exports, "__esModule", {
|
|
10
53
|
value: true
|
|
11
54
|
});
|
|
55
|
+
exports.Option = void 0;
|
|
12
56
|
|
|
13
57
|
var react_1 = __importDefault(require("react"));
|
|
14
58
|
|
|
59
|
+
var ahooks_1 = require("ahooks");
|
|
60
|
+
|
|
15
61
|
var select_1 = __importDefault(require("antd/es/select"));
|
|
16
62
|
|
|
63
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
64
|
+
|
|
65
|
+
var ArrowDropDownFilled_1 = __importDefault(require("a-icons/lib/ArrowDropDownFilled"));
|
|
66
|
+
|
|
67
|
+
var lodash_1 = require("lodash");
|
|
68
|
+
|
|
17
69
|
var Option = select_1["default"].Option;
|
|
70
|
+
exports.Option = Option;
|
|
18
71
|
|
|
19
|
-
var LabelSelect = function LabelSelect() {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
72
|
+
var LabelSelect = function LabelSelect(props) {
|
|
73
|
+
var className = props.className,
|
|
74
|
+
label = props.label;
|
|
75
|
+
var selectRef = react_1["default"].useRef(null);
|
|
76
|
+
|
|
77
|
+
var _a = __read(ahooks_1.useControllableValue(props, {
|
|
78
|
+
valuePropName: 'open',
|
|
79
|
+
trigger: 'setOpen'
|
|
80
|
+
}), 2),
|
|
81
|
+
open = _a[0],
|
|
82
|
+
setOpen = _a[1];
|
|
83
|
+
|
|
84
|
+
var _b = __read(ahooks_1.useControllableValue(props), 2),
|
|
85
|
+
value = _b[0],
|
|
86
|
+
setValue = _b[1];
|
|
87
|
+
|
|
88
|
+
var handleChange = function handleChange(nextValue) {
|
|
89
|
+
setValue(nextValue);
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
var handleLabelClick = function handleLabelClick() {
|
|
93
|
+
var _a;
|
|
94
|
+
|
|
95
|
+
if (!open) {
|
|
96
|
+
setOpen(!open);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
(_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
var onDropdownVisibleChange = function onDropdownVisibleChange(nextOpen) {
|
|
103
|
+
setOpen(nextOpen);
|
|
104
|
+
};
|
|
23
105
|
|
|
24
|
-
return react_1["default"].createElement("div",
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}, react_1["default"].createElement(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
106
|
+
return react_1["default"].createElement("div", {
|
|
107
|
+
className: classnames_1["default"]({
|
|
108
|
+
'label-select': true,
|
|
109
|
+
'label-select-label-scale': open || value
|
|
110
|
+
}, className)
|
|
111
|
+
}, react_1["default"].createElement(select_1["default"], __assign({}, lodash_1.omit(props, ['open', 'onChange', 'className', 'label']), {
|
|
112
|
+
open: open,
|
|
113
|
+
ref: selectRef,
|
|
114
|
+
size: "large",
|
|
115
|
+
className: "label-select-selector",
|
|
116
|
+
onChange: handleChange,
|
|
117
|
+
onDropdownVisibleChange: onDropdownVisibleChange,
|
|
118
|
+
suffixIcon: react_1["default"].createElement(ArrowDropDownFilled_1["default"], null)
|
|
119
|
+
})), react_1["default"].createElement("label", {
|
|
120
|
+
className: "label-select-text",
|
|
121
|
+
onClick: handleLabelClick
|
|
122
|
+
}, label));
|
|
39
123
|
};
|
|
40
124
|
|
|
41
|
-
exports["default"] = LabelSelect;
|
|
125
|
+
exports["default"] = LabelSelect;
|
|
126
|
+
LabelSelect.Option = Option;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
|
|
2
|
+
/* stylelint-disable no-duplicate-selectors */
|
|
3
|
+
/* stylelint-disable */
|
|
4
|
+
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
|
|
5
|
+
.label-select {
|
|
6
|
+
position: relative;
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
}
|
|
10
|
+
.label-select .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
|
|
11
|
+
height: 52px;
|
|
12
|
+
border: 1px solid #e5e5e5;
|
|
13
|
+
border-radius: 12px;
|
|
14
|
+
outline: none;
|
|
15
|
+
}
|
|
16
|
+
.label-select .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
|
|
17
|
+
border-color: #ff6b00;
|
|
18
|
+
box-shadow: none;
|
|
19
|
+
}
|
|
20
|
+
.label-select .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
|
|
21
|
+
padding-top: 14px;
|
|
22
|
+
padding-left: 4px;
|
|
23
|
+
}
|
|
24
|
+
.label-select .ant-select-selection-search {
|
|
25
|
+
padding-top: 14px;
|
|
26
|
+
padding-left: 2px;
|
|
27
|
+
}
|
|
28
|
+
.label-select .ant-select-arrow {
|
|
29
|
+
top: 44%;
|
|
30
|
+
width: 22px;
|
|
31
|
+
height: 22px;
|
|
32
|
+
color: #7d7d7d;
|
|
33
|
+
}
|
|
34
|
+
.label-select .ant-select-arrow .spotecicon {
|
|
35
|
+
width: 22px;
|
|
36
|
+
height: 22px;
|
|
37
|
+
}
|
|
38
|
+
.label-select-text {
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: 18px;
|
|
41
|
+
left: 16px;
|
|
42
|
+
z-index: 2;
|
|
43
|
+
height: 20px;
|
|
44
|
+
color: #9aa5b5;
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
line-height: 20px;
|
|
47
|
+
transform-origin: top left;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
transition: all 0.2s ease-out;
|
|
50
|
+
}
|
|
51
|
+
.label-select-label-scale .label-select-text {
|
|
52
|
+
transform: translateY(-10px) scale(0.86);
|
|
53
|
+
cursor: text;
|
|
54
|
+
pointer-events: none;
|
|
55
|
+
}
|
|
@@ -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
|
+
}
|
package/lib/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/lib/rc-qrcode/index.js
CHANGED
|
@@ -71,7 +71,7 @@ var useQrcode_1 = __importDefault(require("./useQrcode"));
|
|
|
71
71
|
|
|
72
72
|
exports.useQrcode = useQrcode_1["default"];
|
|
73
73
|
|
|
74
|
-
var
|
|
74
|
+
var RcQrcode = function RcQrcode(props) {
|
|
75
75
|
var value = props.value,
|
|
76
76
|
options = props.options;
|
|
77
77
|
var domElRef = React.useRef(null);
|
|
@@ -100,9 +100,9 @@ var RcQRcode = function RcQRcode(props) {
|
|
|
100
100
|
});
|
|
101
101
|
};
|
|
102
102
|
|
|
103
|
-
|
|
103
|
+
RcQrcode.defaultProps = {
|
|
104
104
|
value: '',
|
|
105
105
|
options: {}
|
|
106
106
|
};
|
|
107
|
-
|
|
108
|
-
exports["default"] =
|
|
107
|
+
RcQrcode.useQrcode = useQrcode_1["default"];
|
|
108
|
+
exports["default"] = RcQrcode;
|
|
@@ -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;
|
|
@@ -43,6 +43,10 @@ var qrcode_1 = __importDefault(require("qrcode"));
|
|
|
43
43
|
var react_1 = require("react");
|
|
44
44
|
|
|
45
45
|
exports.useQRCode = function (value, options) {
|
|
46
|
+
if (options === void 0) {
|
|
47
|
+
options = {};
|
|
48
|
+
}
|
|
49
|
+
|
|
46
50
|
var _a = __read(react_1.useState(''), 2),
|
|
47
51
|
dataURL = _a[0],
|
|
48
52
|
setDataURL = _a[1];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "assui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.82",
|
|
4
4
|
"description": "react ui library",
|
|
5
5
|
"author": "jason <usochen@gmail.com>",
|
|
6
6
|
"main": "./lib/index.js",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"node": ">=10.0.0"
|
|
70
70
|
},
|
|
71
71
|
"license": "MIT",
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "29449b7d1c74e1e8b9e32f38ac5a57aba3119418"
|
|
73
73
|
}
|