assui 2.0.82 → 2.0.83

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 (31) hide show
  1. package/es/label-date-picker/index.d.ts +7 -0
  2. package/es/label-date-picker/index.js +107 -0
  3. package/es/label-date-picker/style/index.css +44 -0
  4. package/es/label-date-picker/style/index.d.ts +2 -0
  5. package/es/label-date-picker/style/index.js +2 -0
  6. package/es/label-date-picker/style/index.less +53 -0
  7. package/es/label-range-picker/index.d.ts +7 -0
  8. package/es/label-range-picker/index.js +111 -0
  9. package/es/label-range-picker/style/index.css +61 -0
  10. package/es/label-range-picker/style/index.d.ts +2 -0
  11. package/es/label-range-picker/style/index.js +2 -0
  12. package/es/label-range-picker/style/index.less +74 -0
  13. package/es/label-select/index.js +1 -1
  14. package/es/label-select/style/index.css +1 -0
  15. package/es/label-select/style/index.less +9 -8
  16. package/lib/label-date-picker/index.d.ts +7 -0
  17. package/lib/label-date-picker/index.js +123 -0
  18. package/lib/label-date-picker/style/index.css +44 -0
  19. package/lib/label-date-picker/style/index.d.ts +2 -0
  20. package/lib/label-date-picker/style/index.js +9 -0
  21. package/lib/label-date-picker/style/index.less +53 -0
  22. package/lib/label-range-picker/index.d.ts +7 -0
  23. package/lib/label-range-picker/index.js +128 -0
  24. package/lib/label-range-picker/style/index.css +61 -0
  25. package/lib/label-range-picker/style/index.d.ts +2 -0
  26. package/lib/label-range-picker/style/index.js +9 -0
  27. package/lib/label-range-picker/style/index.less +74 -0
  28. package/lib/label-select/index.js +3 -3
  29. package/lib/label-select/style/index.css +1 -0
  30. package/lib/label-select/style/index.less +9 -8
  31. package/package.json +3 -3
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { DatePickerProps } from 'antd/es/date-picker';
3
+ export interface LabelDatePickerProps extends Omit<DatePickerProps, 'label'> {
4
+ label: React.ReactNode;
5
+ }
6
+ declare const LabelDatePicker: React.FC<LabelDatePickerProps>;
7
+ export default LabelDatePicker;
@@ -0,0 +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
+
44
+ import React from 'react';
45
+ import useControllableValue from 'ahooks/lib/useControllableValue';
46
+ import DatePicker from 'antd/es/date-picker';
47
+ import CalendarOutlined from 'a-icons/lib/CalendarOutlined';
48
+ import classNames from 'classnames';
49
+
50
+ var LabelDatePicker = function LabelDatePicker(props) {
51
+ var className = props.className,
52
+ label = props.label;
53
+ var datePickerRef = 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 = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
78
+ };
79
+
80
+ var onBlur = function onBlur() {
81
+ setOpen(false);
82
+ };
83
+
84
+ var onOpenChange = function onOpenChange(nextOpen) {
85
+ setOpen(nextOpen);
86
+ };
87
+
88
+ return /*#__PURE__*/React.createElement("div", {
89
+ className: classNames({
90
+ 'label-date-picker': true,
91
+ 'label-date-picker-label-scale': open || value
92
+ }, className)
93
+ }, /*#__PURE__*/React.createElement(DatePicker, __assign({}, props, {
94
+ open: open,
95
+ onChange: handleChange,
96
+ ref: datePickerRef,
97
+ onOpenChange: onOpenChange,
98
+ onBlur: onBlur,
99
+ placeholder: "",
100
+ suffixIcon: /*#__PURE__*/React.createElement(CalendarOutlined, null)
101
+ })), /*#__PURE__*/React.createElement("label", {
102
+ className: "label-date-picker-text",
103
+ onClick: handleLabelClick
104
+ }, label));
105
+ };
106
+
107
+ export default LabelDatePicker;
@@ -0,0 +1,44 @@
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-date-picker {
6
+ position: relative;
7
+ height: 100%;
8
+ }
9
+ .label-date-picker .ant-picker {
10
+ height: 52px;
11
+ border: 1px solid #e5e5e5;
12
+ border-radius: 12px;
13
+ outline: none;
14
+ }
15
+ .label-date-picker .ant-picker-input input {
16
+ padding-top: 16px;
17
+ padding-left: 4px;
18
+ }
19
+ .label-date-picker .ant-picker-focused {
20
+ border-color: #ff6b00;
21
+ box-shadow: none;
22
+ }
23
+ .label-date-picker .ant-picker-suffix .spotecicon {
24
+ width: 14px;
25
+ color: #323232;
26
+ }
27
+ .label-date-picker-text {
28
+ position: absolute;
29
+ top: 18px;
30
+ left: 16px;
31
+ z-index: 2;
32
+ height: 20px;
33
+ color: #9aa5b5;
34
+ font-size: 14px;
35
+ line-height: 20px;
36
+ transform-origin: top left;
37
+ cursor: pointer;
38
+ transition: all 0.2s ease-out;
39
+ }
40
+ .label-date-picker-label-scale .label-date-picker-text {
41
+ transform: translateY(-10px) scale(0.86);
42
+ cursor: text;
43
+ pointer-events: none;
44
+ }
@@ -0,0 +1,2 @@
1
+ import 'antd/es/date-picker/style';
2
+ import './index.less';
@@ -0,0 +1,2 @@
1
+ import 'antd/es/date-picker/style';
2
+ import './index.less';
@@ -0,0 +1,53 @@
1
+ @import '~antd/es/style/themes/index';
2
+
3
+ @color_9aa5b5: #9aa5b5;
4
+ @font-size-base: 14px;
5
+
6
+ .label-date-picker {
7
+ position: relative;
8
+ height: 100%;
9
+
10
+ .@{ant-prefix}-picker {
11
+ height: 52px;
12
+ border: 1px solid #e5e5e5;
13
+ border-radius: 12px;
14
+ outline: none;
15
+
16
+ &-input input {
17
+ padding-top: 16px;
18
+ padding-left: 4px;
19
+ }
20
+
21
+ &-focused {
22
+ border-color: #ff6b00;
23
+ box-shadow: none;
24
+ }
25
+
26
+ &-suffix .spotecicon {
27
+ width: 14px;
28
+ color: #323232;
29
+ }
30
+ }
31
+
32
+ &-text {
33
+ position: absolute;
34
+ top: 18px;
35
+ left: 16px;
36
+ z-index: 2;
37
+ height: 20px;
38
+ color: @color_9aa5b5;
39
+ font-size: @font-size-base;
40
+ line-height: 20px;
41
+ transform-origin: top left;
42
+ cursor: pointer;
43
+ transition: all 0.2s ease-out;
44
+ }
45
+
46
+ &-label-scale {
47
+ .label-date-picker-text {
48
+ transform: translateY(-10px) scale(0.86);
49
+ cursor: text;
50
+ pointer-events: none;
51
+ }
52
+ }
53
+ }
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { RangePickerProps } from 'antd/es/date-picker';
3
+ export interface LabelRangePickerProps extends Omit<RangePickerProps, 'label'> {
4
+ label: React.ReactNode;
5
+ }
6
+ declare const LabelDatePicker: React.FC<LabelRangePickerProps>;
7
+ export default LabelDatePicker;
@@ -0,0 +1,111 @@
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 DatePicker from 'antd/es/date-picker';
47
+ import classNames from 'classnames';
48
+ import CalendarOutlined from 'a-icons/lib/CalendarOutlined';
49
+ var RangePicker = DatePicker.RangePicker;
50
+
51
+ var LabelDatePicker = function LabelDatePicker(props) {
52
+ var className = props.className,
53
+ label = props.label;
54
+ var datePickerRef = React.useRef(null);
55
+
56
+ var _a = __read(useControllableValue(props, {
57
+ valuePropName: 'open',
58
+ trigger: 'setOpen'
59
+ }), 2),
60
+ open = _a[0],
61
+ setOpen = _a[1];
62
+
63
+ var _b = __read(useControllableValue(props), 2),
64
+ value = _b[0],
65
+ setValue = _b[1];
66
+
67
+ var handleChange = function handleChange(nextValue) {
68
+ setValue(nextValue);
69
+ };
70
+
71
+ var handleLabelClick = function handleLabelClick() {
72
+ var _a;
73
+
74
+ if (!open) {
75
+ setOpen(!open);
76
+ }
77
+
78
+ (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
79
+ };
80
+
81
+ var onBlur = function onBlur() {
82
+ setOpen(false);
83
+ };
84
+
85
+ var onOpenChange = function onOpenChange(nextOpen) {
86
+ setOpen(nextOpen);
87
+ };
88
+
89
+ return /*#__PURE__*/React.createElement("div", {
90
+ className: classNames({
91
+ 'label-range-picker': true,
92
+ 'label-range-picker-label-scale': open || value
93
+ }, className)
94
+ }, /*#__PURE__*/React.createElement(RangePicker, __assign({
95
+ format: "YYYY.MM.DD",
96
+ allowEmpty: [true, true]
97
+ }, props, {
98
+ separator: "\u2013",
99
+ open: open,
100
+ onChange: handleChange,
101
+ ref: datePickerRef,
102
+ onOpenChange: onOpenChange,
103
+ onBlur: onBlur,
104
+ suffixIcon: /*#__PURE__*/React.createElement(CalendarOutlined, null)
105
+ })), /*#__PURE__*/React.createElement("label", {
106
+ className: "label-range-picker-text",
107
+ onClick: handleLabelClick
108
+ }, label));
109
+ };
110
+
111
+ export default LabelDatePicker;
@@ -0,0 +1,61 @@
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-range-picker {
6
+ position: relative;
7
+ height: 100%;
8
+ }
9
+ .label-range-picker .ant-picker {
10
+ height: 52px;
11
+ border: 1px solid #e5e5e5;
12
+ border-radius: 12px;
13
+ outline: none;
14
+ }
15
+ .label-range-picker .ant-picker-input input {
16
+ width: 85px;
17
+ padding-top: 16px;
18
+ padding-left: 4px;
19
+ }
20
+ .label-range-picker .ant-picker-focused {
21
+ border-color: #ff6b00;
22
+ box-shadow: none;
23
+ }
24
+ .label-range-picker .ant-picker-range-separator {
25
+ position: relative;
26
+ top: 8px;
27
+ padding: 0;
28
+ }
29
+ .label-range-picker .ant-picker-range-separator,
30
+ .label-range-picker .ant-picker-input {
31
+ opacity: 0;
32
+ }
33
+ .label-range-picker .ant-picker-active-bar {
34
+ display: none;
35
+ }
36
+ .label-range-picker .ant-picker-suffix .spotecicon {
37
+ width: 14px;
38
+ color: #323232;
39
+ }
40
+ .label-range-picker-text {
41
+ position: absolute;
42
+ top: 18px;
43
+ left: 16px;
44
+ z-index: 2;
45
+ height: 20px;
46
+ color: #9aa5b5;
47
+ font-size: 14px;
48
+ line-height: 20px;
49
+ transform-origin: top left;
50
+ cursor: pointer;
51
+ transition: all 0.2s ease-out;
52
+ }
53
+ .label-range-picker-label-scale .ant-picker-range-separator,
54
+ .label-range-picker-label-scale .ant-picker-input {
55
+ opacity: 1;
56
+ }
57
+ .label-range-picker-label-scale .label-range-picker-text {
58
+ transform: translateY(-11px) scale(0.86);
59
+ cursor: text;
60
+ pointer-events: none;
61
+ }
@@ -0,0 +1,2 @@
1
+ import 'antd/es/date-picker/style';
2
+ import './index.less';
@@ -0,0 +1,2 @@
1
+ import 'antd/es/date-picker/style';
2
+ import './index.less';
@@ -0,0 +1,74 @@
1
+ @import '~antd/es/style/themes/index';
2
+
3
+ @color_9aa5b5: #9aa5b5;
4
+ @font-size-base: 14px;
5
+
6
+ .label-range-picker {
7
+ position: relative;
8
+ height: 100%;
9
+
10
+ .@{ant-prefix}-picker {
11
+ height: 52px;
12
+ border: 1px solid #e5e5e5;
13
+ border-radius: 12px;
14
+ outline: none;
15
+
16
+ &-input input {
17
+ width: 85px;
18
+ padding-top: 16px;
19
+ padding-left: 4px;
20
+ }
21
+
22
+ &-focused {
23
+ border-color: #ff6b00;
24
+ box-shadow: none;
25
+ }
26
+
27
+ &-range-separator {
28
+ position: relative;
29
+ top: 8px;
30
+ padding: 0;
31
+ }
32
+
33
+ &-range-separator,
34
+ &-input {
35
+ opacity: 0;
36
+ }
37
+
38
+ &-active-bar {
39
+ display: none;
40
+ }
41
+
42
+ &-suffix .spotecicon {
43
+ width: 14px;
44
+ color: #323232;
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
+ .@{ant-prefix}-picker-range-separator,
64
+ .@{ant-prefix}-picker-input {
65
+ opacity: 1;
66
+ }
67
+
68
+ .label-range-picker-text {
69
+ transform: translateY(-11px) scale(0.86);
70
+ cursor: text;
71
+ pointer-events: none;
72
+ }
73
+ }
74
+ }
@@ -42,7 +42,7 @@ var __read = this && this.__read || function (o, n) {
42
42
  };
43
43
 
44
44
  import React from 'react';
45
- import { useControllableValue } from 'ahooks';
45
+ 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';
@@ -1,3 +1,4 @@
1
+ /* stylelint-disable indentation */
1
2
  /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
3
  /* stylelint-disable no-duplicate-selectors */
3
4
  /* stylelint-disable */
@@ -1,3 +1,4 @@
1
+ /* stylelint-disable indentation */
1
2
  @import '~antd/es/style/themes/index';
2
3
 
3
4
  @color_9aa5b5: #9aa5b5;
@@ -8,33 +9,33 @@
8
9
  width: 100%;
9
10
  height: 100%;
10
11
 
11
- .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
12
+ .@{ant-prefix}-select-single.@{ant-prefix}-select-lg:not(.@{ant-prefix}-select-customize-input)
13
+ .@{ant-prefix}-select-selector {
12
14
  height: 52px;
13
15
  border: 1px solid #e5e5e5;
14
16
  border-radius: 12px;
15
17
  outline: none;
16
18
  }
17
19
 
18
- .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
19
- .ant-select-selector {
20
+ .@{ant-prefix}-select-focused:not(.@{ant-prefix}-select-disabled).@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input)
21
+ .@{ant-prefix}-select-selector {
20
22
  border-color: #ff6b00;
21
23
  box-shadow: none;
22
24
  }
23
25
 
24
- .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
26
+ .@{ant-prefix}-select-single.@{ant-prefix}-select-show-arrow
27
+ .@{ant-prefix}-select-selection-item {
25
28
  padding-top: 14px;
26
29
  padding-left: 4px;
27
30
  }
28
31
 
29
- .ant-select-selection-search {
32
+ .@{ant-prefix}-select-selection-search {
30
33
  padding-top: 14px;
31
34
  padding-left: 2px;
32
35
  }
33
36
 
34
- .ant-select-arrow {
37
+ .@{ant-prefix}-select-arrow {
35
38
  top: 44%;
36
- // position: relative;
37
- // top: -2px;
38
39
  width: 22px;
39
40
  height: 22px;
40
41
  color: #7d7d7d;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { DatePickerProps } from 'antd/es/date-picker';
3
+ export interface LabelDatePickerProps extends Omit<DatePickerProps, 'label'> {
4
+ label: React.ReactNode;
5
+ }
6
+ declare const LabelDatePicker: React.FC<LabelDatePickerProps>;
7
+ export default LabelDatePicker;
@@ -0,0 +1,123 @@
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 date_picker_1 = __importDefault(require("antd/es/date-picker"));
61
+
62
+ var CalendarOutlined_1 = __importDefault(require("a-icons/lib/CalendarOutlined"));
63
+
64
+ var classnames_1 = __importDefault(require("classnames"));
65
+
66
+ var LabelDatePicker = function LabelDatePicker(props) {
67
+ var className = props.className,
68
+ label = props.label;
69
+ var datePickerRef = 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 = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
94
+ };
95
+
96
+ var onBlur = function onBlur() {
97
+ setOpen(false);
98
+ };
99
+
100
+ var onOpenChange = function onOpenChange(nextOpen) {
101
+ setOpen(nextOpen);
102
+ };
103
+
104
+ return react_1["default"].createElement("div", {
105
+ className: classnames_1["default"]({
106
+ 'label-date-picker': true,
107
+ 'label-date-picker-label-scale': open || value
108
+ }, className)
109
+ }, react_1["default"].createElement(date_picker_1["default"], __assign({}, props, {
110
+ open: open,
111
+ onChange: handleChange,
112
+ ref: datePickerRef,
113
+ onOpenChange: onOpenChange,
114
+ onBlur: onBlur,
115
+ placeholder: "",
116
+ suffixIcon: react_1["default"].createElement(CalendarOutlined_1["default"], null)
117
+ })), react_1["default"].createElement("label", {
118
+ className: "label-date-picker-text",
119
+ onClick: handleLabelClick
120
+ }, label));
121
+ };
122
+
123
+ exports["default"] = LabelDatePicker;
@@ -0,0 +1,44 @@
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-date-picker {
6
+ position: relative;
7
+ height: 100%;
8
+ }
9
+ .label-date-picker .ant-picker {
10
+ height: 52px;
11
+ border: 1px solid #e5e5e5;
12
+ border-radius: 12px;
13
+ outline: none;
14
+ }
15
+ .label-date-picker .ant-picker-input input {
16
+ padding-top: 16px;
17
+ padding-left: 4px;
18
+ }
19
+ .label-date-picker .ant-picker-focused {
20
+ border-color: #ff6b00;
21
+ box-shadow: none;
22
+ }
23
+ .label-date-picker .ant-picker-suffix .spotecicon {
24
+ width: 14px;
25
+ color: #323232;
26
+ }
27
+ .label-date-picker-text {
28
+ position: absolute;
29
+ top: 18px;
30
+ left: 16px;
31
+ z-index: 2;
32
+ height: 20px;
33
+ color: #9aa5b5;
34
+ font-size: 14px;
35
+ line-height: 20px;
36
+ transform-origin: top left;
37
+ cursor: pointer;
38
+ transition: all 0.2s ease-out;
39
+ }
40
+ .label-date-picker-label-scale .label-date-picker-text {
41
+ transform: translateY(-10px) scale(0.86);
42
+ cursor: text;
43
+ pointer-events: none;
44
+ }
@@ -0,0 +1,2 @@
1
+ import 'antd/es/date-picker/style';
2
+ import './index.less';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ require("antd/es/date-picker/style");
8
+
9
+ require("./index.less");
@@ -0,0 +1,53 @@
1
+ @import '~antd/es/style/themes/index';
2
+
3
+ @color_9aa5b5: #9aa5b5;
4
+ @font-size-base: 14px;
5
+
6
+ .label-date-picker {
7
+ position: relative;
8
+ height: 100%;
9
+
10
+ .@{ant-prefix}-picker {
11
+ height: 52px;
12
+ border: 1px solid #e5e5e5;
13
+ border-radius: 12px;
14
+ outline: none;
15
+
16
+ &-input input {
17
+ padding-top: 16px;
18
+ padding-left: 4px;
19
+ }
20
+
21
+ &-focused {
22
+ border-color: #ff6b00;
23
+ box-shadow: none;
24
+ }
25
+
26
+ &-suffix .spotecicon {
27
+ width: 14px;
28
+ color: #323232;
29
+ }
30
+ }
31
+
32
+ &-text {
33
+ position: absolute;
34
+ top: 18px;
35
+ left: 16px;
36
+ z-index: 2;
37
+ height: 20px;
38
+ color: @color_9aa5b5;
39
+ font-size: @font-size-base;
40
+ line-height: 20px;
41
+ transform-origin: top left;
42
+ cursor: pointer;
43
+ transition: all 0.2s ease-out;
44
+ }
45
+
46
+ &-label-scale {
47
+ .label-date-picker-text {
48
+ transform: translateY(-10px) scale(0.86);
49
+ cursor: text;
50
+ pointer-events: none;
51
+ }
52
+ }
53
+ }
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { RangePickerProps } from 'antd/es/date-picker';
3
+ export interface LabelRangePickerProps extends Omit<RangePickerProps, 'label'> {
4
+ label: React.ReactNode;
5
+ }
6
+ declare const LabelDatePicker: React.FC<LabelRangePickerProps>;
7
+ export default LabelDatePicker;
@@ -0,0 +1,128 @@
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 date_picker_1 = __importDefault(require("antd/es/date-picker"));
61
+
62
+ var classnames_1 = __importDefault(require("classnames"));
63
+
64
+ var CalendarOutlined_1 = __importDefault(require("a-icons/lib/CalendarOutlined"));
65
+
66
+ var RangePicker = date_picker_1["default"].RangePicker;
67
+
68
+ var LabelDatePicker = function LabelDatePicker(props) {
69
+ var className = props.className,
70
+ label = props.label;
71
+ var datePickerRef = react_1["default"].useRef(null);
72
+
73
+ var _a = __read(useControllableValue_1["default"](props, {
74
+ valuePropName: 'open',
75
+ trigger: 'setOpen'
76
+ }), 2),
77
+ open = _a[0],
78
+ setOpen = _a[1];
79
+
80
+ var _b = __read(useControllableValue_1["default"](props), 2),
81
+ value = _b[0],
82
+ setValue = _b[1];
83
+
84
+ var handleChange = function handleChange(nextValue) {
85
+ setValue(nextValue);
86
+ };
87
+
88
+ var handleLabelClick = function handleLabelClick() {
89
+ var _a;
90
+
91
+ if (!open) {
92
+ setOpen(!open);
93
+ }
94
+
95
+ (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
96
+ };
97
+
98
+ var onBlur = function onBlur() {
99
+ setOpen(false);
100
+ };
101
+
102
+ var onOpenChange = function onOpenChange(nextOpen) {
103
+ setOpen(nextOpen);
104
+ };
105
+
106
+ return react_1["default"].createElement("div", {
107
+ className: classnames_1["default"]({
108
+ 'label-range-picker': true,
109
+ 'label-range-picker-label-scale': open || value
110
+ }, className)
111
+ }, react_1["default"].createElement(RangePicker, __assign({
112
+ format: "YYYY.MM.DD",
113
+ allowEmpty: [true, true]
114
+ }, props, {
115
+ separator: "\u2013",
116
+ open: open,
117
+ onChange: handleChange,
118
+ ref: datePickerRef,
119
+ onOpenChange: onOpenChange,
120
+ onBlur: onBlur,
121
+ suffixIcon: react_1["default"].createElement(CalendarOutlined_1["default"], null)
122
+ })), react_1["default"].createElement("label", {
123
+ className: "label-range-picker-text",
124
+ onClick: handleLabelClick
125
+ }, label));
126
+ };
127
+
128
+ exports["default"] = LabelDatePicker;
@@ -0,0 +1,61 @@
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-range-picker {
6
+ position: relative;
7
+ height: 100%;
8
+ }
9
+ .label-range-picker .ant-picker {
10
+ height: 52px;
11
+ border: 1px solid #e5e5e5;
12
+ border-radius: 12px;
13
+ outline: none;
14
+ }
15
+ .label-range-picker .ant-picker-input input {
16
+ width: 85px;
17
+ padding-top: 16px;
18
+ padding-left: 4px;
19
+ }
20
+ .label-range-picker .ant-picker-focused {
21
+ border-color: #ff6b00;
22
+ box-shadow: none;
23
+ }
24
+ .label-range-picker .ant-picker-range-separator {
25
+ position: relative;
26
+ top: 8px;
27
+ padding: 0;
28
+ }
29
+ .label-range-picker .ant-picker-range-separator,
30
+ .label-range-picker .ant-picker-input {
31
+ opacity: 0;
32
+ }
33
+ .label-range-picker .ant-picker-active-bar {
34
+ display: none;
35
+ }
36
+ .label-range-picker .ant-picker-suffix .spotecicon {
37
+ width: 14px;
38
+ color: #323232;
39
+ }
40
+ .label-range-picker-text {
41
+ position: absolute;
42
+ top: 18px;
43
+ left: 16px;
44
+ z-index: 2;
45
+ height: 20px;
46
+ color: #9aa5b5;
47
+ font-size: 14px;
48
+ line-height: 20px;
49
+ transform-origin: top left;
50
+ cursor: pointer;
51
+ transition: all 0.2s ease-out;
52
+ }
53
+ .label-range-picker-label-scale .ant-picker-range-separator,
54
+ .label-range-picker-label-scale .ant-picker-input {
55
+ opacity: 1;
56
+ }
57
+ .label-range-picker-label-scale .label-range-picker-text {
58
+ transform: translateY(-11px) scale(0.86);
59
+ cursor: text;
60
+ pointer-events: none;
61
+ }
@@ -0,0 +1,2 @@
1
+ import 'antd/es/date-picker/style';
2
+ import './index.less';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ require("antd/es/date-picker/style");
8
+
9
+ require("./index.less");
@@ -0,0 +1,74 @@
1
+ @import '~antd/es/style/themes/index';
2
+
3
+ @color_9aa5b5: #9aa5b5;
4
+ @font-size-base: 14px;
5
+
6
+ .label-range-picker {
7
+ position: relative;
8
+ height: 100%;
9
+
10
+ .@{ant-prefix}-picker {
11
+ height: 52px;
12
+ border: 1px solid #e5e5e5;
13
+ border-radius: 12px;
14
+ outline: none;
15
+
16
+ &-input input {
17
+ width: 85px;
18
+ padding-top: 16px;
19
+ padding-left: 4px;
20
+ }
21
+
22
+ &-focused {
23
+ border-color: #ff6b00;
24
+ box-shadow: none;
25
+ }
26
+
27
+ &-range-separator {
28
+ position: relative;
29
+ top: 8px;
30
+ padding: 0;
31
+ }
32
+
33
+ &-range-separator,
34
+ &-input {
35
+ opacity: 0;
36
+ }
37
+
38
+ &-active-bar {
39
+ display: none;
40
+ }
41
+
42
+ &-suffix .spotecicon {
43
+ width: 14px;
44
+ color: #323232;
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
+ .@{ant-prefix}-picker-range-separator,
64
+ .@{ant-prefix}-picker-input {
65
+ opacity: 1;
66
+ }
67
+
68
+ .label-range-picker-text {
69
+ transform: translateY(-11px) scale(0.86);
70
+ cursor: text;
71
+ pointer-events: none;
72
+ }
73
+ }
74
+ }
@@ -56,7 +56,7 @@ exports.Option = void 0;
56
56
 
57
57
  var react_1 = __importDefault(require("react"));
58
58
 
59
- var ahooks_1 = require("ahooks");
59
+ var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
60
60
 
61
61
  var select_1 = __importDefault(require("antd/es/select"));
62
62
 
@@ -74,14 +74,14 @@ var LabelSelect = function LabelSelect(props) {
74
74
  label = props.label;
75
75
  var selectRef = react_1["default"].useRef(null);
76
76
 
77
- var _a = __read(ahooks_1.useControllableValue(props, {
77
+ var _a = __read(useControllableValue_1["default"](props, {
78
78
  valuePropName: 'open',
79
79
  trigger: 'setOpen'
80
80
  }), 2),
81
81
  open = _a[0],
82
82
  setOpen = _a[1];
83
83
 
84
- var _b = __read(ahooks_1.useControllableValue(props), 2),
84
+ var _b = __read(useControllableValue_1["default"](props), 2),
85
85
  value = _b[0],
86
86
  setValue = _b[1];
87
87
 
@@ -1,3 +1,4 @@
1
+ /* stylelint-disable indentation */
1
2
  /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
3
  /* stylelint-disable no-duplicate-selectors */
3
4
  /* stylelint-disable */
@@ -1,3 +1,4 @@
1
+ /* stylelint-disable indentation */
1
2
  @import '~antd/es/style/themes/index';
2
3
 
3
4
  @color_9aa5b5: #9aa5b5;
@@ -8,33 +9,33 @@
8
9
  width: 100%;
9
10
  height: 100%;
10
11
 
11
- .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
12
+ .@{ant-prefix}-select-single.@{ant-prefix}-select-lg:not(.@{ant-prefix}-select-customize-input)
13
+ .@{ant-prefix}-select-selector {
12
14
  height: 52px;
13
15
  border: 1px solid #e5e5e5;
14
16
  border-radius: 12px;
15
17
  outline: none;
16
18
  }
17
19
 
18
- .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
19
- .ant-select-selector {
20
+ .@{ant-prefix}-select-focused:not(.@{ant-prefix}-select-disabled).@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input)
21
+ .@{ant-prefix}-select-selector {
20
22
  border-color: #ff6b00;
21
23
  box-shadow: none;
22
24
  }
23
25
 
24
- .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
26
+ .@{ant-prefix}-select-single.@{ant-prefix}-select-show-arrow
27
+ .@{ant-prefix}-select-selection-item {
25
28
  padding-top: 14px;
26
29
  padding-left: 4px;
27
30
  }
28
31
 
29
- .ant-select-selection-search {
32
+ .@{ant-prefix}-select-selection-search {
30
33
  padding-top: 14px;
31
34
  padding-left: 2px;
32
35
  }
33
36
 
34
- .ant-select-arrow {
37
+ .@{ant-prefix}-select-arrow {
35
38
  top: 44%;
36
- // position: relative;
37
- // top: -2px;
38
39
  width: 22px;
39
40
  height: 22px;
40
41
  color: #7d7d7d;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "assui",
3
- "version": "2.0.82",
3
+ "version": "2.0.83",
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.44",
36
+ "a-icons": "^1.0.45",
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": "29449b7d1c74e1e8b9e32f38ac5a57aba3119418"
72
+ "gitHead": "67f1406572bd820d237358bdbc188d94002a48e0"
73
73
  }