assui 2.0.80 → 2.0.81

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 (49) hide show
  1. package/es/index.d.ts +2 -0
  2. package/es/index.js +1 -0
  3. package/es/keep-tab/index.js +0 -6
  4. package/es/label-desc-item/demo/index.less +9 -0
  5. package/es/label-desc-item/index.d.ts +13 -0
  6. package/es/label-desc-item/index.js +22 -0
  7. package/es/label-desc-item/style/index.css +23 -0
  8. package/es/label-desc-item/style/index.d.ts +1 -0
  9. package/es/label-desc-item/style/index.js +1 -0
  10. package/es/label-desc-item/style/index.less +26 -0
  11. package/es/label-input/index.d.ts +23 -0
  12. package/es/label-input/index.js +104 -0
  13. package/es/label-input/style/index.css +72 -0
  14. package/es/label-input/style/index.d.ts +1 -0
  15. package/es/label-input/style/index.js +1 -0
  16. package/es/label-input/style/index.less +95 -0
  17. package/es/label-select/index.d.ts +2 -0
  18. package/es/label-select/index.js +27 -0
  19. package/es/label-select/style/index.d.ts +1 -0
  20. package/es/label-select/style/index.js +1 -0
  21. package/es/label-text-area/index.d.ts +2 -0
  22. package/es/label-text-area/index.js +7 -0
  23. package/es/label-text-area/style/index.d.ts +1 -0
  24. package/es/label-text-area/style/index.js +0 -0
  25. package/lib/index.d.ts +2 -0
  26. package/lib/index.js +9 -0
  27. package/lib/keep-tab/index.js +0 -6
  28. package/lib/label-desc-item/demo/index.less +9 -0
  29. package/lib/label-desc-item/index.d.ts +13 -0
  30. package/lib/label-desc-item/index.js +35 -0
  31. package/lib/label-desc-item/style/index.css +23 -0
  32. package/lib/label-desc-item/style/index.d.ts +1 -0
  33. package/lib/label-desc-item/style/index.js +7 -0
  34. package/lib/label-desc-item/style/index.less +26 -0
  35. package/lib/label-input/index.d.ts +23 -0
  36. package/lib/label-input/index.js +119 -0
  37. package/lib/label-input/style/index.css +72 -0
  38. package/lib/label-input/style/index.d.ts +1 -0
  39. package/lib/label-input/style/index.js +7 -0
  40. package/lib/label-input/style/index.less +95 -0
  41. package/lib/label-select/index.d.ts +2 -0
  42. package/lib/label-select/index.js +41 -0
  43. package/lib/label-select/style/index.d.ts +1 -0
  44. package/lib/label-select/style/index.js +7 -0
  45. package/lib/label-text-area/index.d.ts +2 -0
  46. package/lib/label-text-area/index.js +19 -0
  47. package/lib/label-text-area/style/index.d.ts +1 -0
  48. package/lib/label-text-area/style/index.js +0 -0
  49. package/package.json +3 -3
package/es/index.d.ts CHANGED
@@ -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/es/index.js CHANGED
@@ -17,5 +17,6 @@ export { default as sortableHoc } from './sortable-hoc';
17
17
  export { default as SplitPane } from './split-pane';
18
18
  export { default as TextArea } from './text-area';
19
19
  export { default as TextInput } from './text-input';
20
+ export { default as LabelInput } from './label-input';
20
21
  export { default as RichTextEditor } from './rich-text-editor';
21
22
  export { default as beautifulDnd } from './beautiful-dnd';
@@ -102,12 +102,6 @@ var KeepTab = function KeepTab(props) {
102
102
  setUrlParams((_a = {}, _a[saveActiveKeyName] = arrayChildren[0].key, _a));
103
103
  setTabActiveKey(arrayChildren[0].key);
104
104
  }
105
- } else {
106
- setTimeout(function () {
107
- var _a;
108
-
109
- setUrlParams((_a = {}, _a[saveActiveKeyName] = tabActiveKey, _a));
110
- }, 50);
111
105
  }
112
106
  }, [tabActiveKey]);
113
107
 
@@ -0,0 +1,9 @@
1
+ .label-desc {
2
+ margin-top: 10px;
3
+
4
+ :global {
5
+ .desc-item-label {
6
+ color: #ff6b00;
7
+ }
8
+ }
9
+ }
@@ -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,22 @@
1
+ import React from 'react';
2
+ import classNames from 'classnames';
3
+
4
+ var DescItem = function DescItem(props) {
5
+ var className = props.className,
6
+ label = props.label,
7
+ value = props.value,
8
+ suffix = props.suffix;
9
+ return /*#__PURE__*/React.createElement("div", {
10
+ className: classNames('desc-item', className)
11
+ }, /*#__PURE__*/React.createElement("div", {
12
+ className: "desc-item-left-content"
13
+ }, label && /*#__PURE__*/React.createElement("div", {
14
+ className: "desc-item-label"
15
+ }, label), /*#__PURE__*/React.createElement("div", {
16
+ className: "desc-item-value"
17
+ }, value)), suffix && /*#__PURE__*/React.createElement("div", {
18
+ className: "desc-item-value"
19
+ }, suffix));
20
+ };
21
+
22
+ export 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 @@
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,104 @@
1
+ var __read = this && this.__read || function (o, n) {
2
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
3
+ if (!m) return o;
4
+ var i = m.call(o),
5
+ r,
6
+ ar = [],
7
+ e;
8
+
9
+ try {
10
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
11
+ ar.push(r.value);
12
+ }
13
+ } catch (error) {
14
+ e = {
15
+ error: error
16
+ };
17
+ } finally {
18
+ try {
19
+ if (r && !r.done && (m = i["return"])) m.call(i);
20
+ } finally {
21
+ if (e) throw e.error;
22
+ }
23
+ }
24
+
25
+ return ar;
26
+ };
27
+
28
+ import React from 'react';
29
+ import classNames from 'classnames';
30
+ import { useControllableValue } from 'ahooks';
31
+ import { trimStart } from 'lodash';
32
+
33
+ var LabelInput = function LabelInput(props) {
34
+ var className = props.className,
35
+ prefix = props.prefix,
36
+ suffix = props.suffix,
37
+ label = props.label,
38
+ id = props.id,
39
+ onFocus = props.onFocus,
40
+ onBlur = props.onBlur;
41
+
42
+ var _a = __read(React.useState(false), 2),
43
+ focused = _a[0],
44
+ setFocused = _a[1];
45
+
46
+ var _b = __read(useControllableValue(props), 2),
47
+ value = _b[0],
48
+ setValue = _b[1];
49
+
50
+ var InputDomRef = React.useRef(null);
51
+
52
+ var handleFocus = function handleFocus() {
53
+ setFocused(true);
54
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
55
+ };
56
+
57
+ var handleBlur = function handleBlur() {
58
+ setFocused(false);
59
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(value);
60
+ };
61
+
62
+ var handleChange = function handleChange(e) {
63
+ var finallyValue = trimStart(e.target.value);
64
+ setValue(finallyValue);
65
+ };
66
+
67
+ var handleLabelClick = function handleLabelClick() {
68
+ var _a;
69
+
70
+ (_a = InputDomRef.current) === null || _a === void 0 ? void 0 : _a.focus();
71
+ };
72
+
73
+ return /*#__PURE__*/React.createElement("div", {
74
+ className: classNames('label-input-control', className),
75
+ id: id
76
+ }, /*#__PURE__*/React.createElement("div", {
77
+ className: classNames('label-input-field', {
78
+ 'label-input-affix': prefix || suffix,
79
+ 'label-input-focused': focused
80
+ })
81
+ }, prefix && /*#__PURE__*/React.createElement("div", {
82
+ className: "label-input-prefix"
83
+ }, prefix), /*#__PURE__*/React.createElement("div", {
84
+ className: "label-input-warper"
85
+ }, /*#__PURE__*/React.createElement("input", {
86
+ ref: function ref(el) {
87
+ return InputDomRef.current = el;
88
+ },
89
+ "data-value": value ? value.length : 0,
90
+ className: "label-input",
91
+ type: "text",
92
+ value: value,
93
+ onFocus: handleFocus,
94
+ onBlur: handleBlur,
95
+ onChange: handleChange
96
+ }), /*#__PURE__*/React.createElement("label", {
97
+ className: "label-input-text",
98
+ onClick: handleLabelClick
99
+ }, label)), suffix && /*#__PURE__*/React.createElement("div", {
100
+ className: "label-input-suffix"
101
+ }, suffix)));
102
+ };
103
+
104
+ export 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: 18px;
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 @@
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: 18px;
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,2 @@
1
+ declare const LabelSelect: () => JSX.Element;
2
+ export default LabelSelect;
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+ import Select from 'antd/es/select';
3
+ var Option = Select.Option;
4
+
5
+ var LabelSelect = function LabelSelect() {
6
+ function handleChange(value) {
7
+ console.log("selected " + value);
8
+ }
9
+
10
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
11
+ style: {
12
+ width: 120
13
+ },
14
+ onChange: handleChange
15
+ }, /*#__PURE__*/React.createElement(Option, {
16
+ value: "jack"
17
+ }, "Jack"), /*#__PURE__*/React.createElement(Option, {
18
+ value: "lucy"
19
+ }, "Lucy"), /*#__PURE__*/React.createElement(Option, {
20
+ value: "disabled",
21
+ disabled: true
22
+ }, "Disabled"), /*#__PURE__*/React.createElement(Option, {
23
+ value: "Yiminghe"
24
+ }, "yiminghe")));
25
+ };
26
+
27
+ export default LabelSelect;
@@ -0,0 +1 @@
1
+ import 'antd/es/select/style';
@@ -0,0 +1 @@
1
+ import 'antd/es/select/style';
@@ -0,0 +1,2 @@
1
+ declare const LabelTextArea: () => JSX.Element;
2
+ export default LabelTextArea;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+
3
+ var LabelTextArea = function LabelTextArea() {
4
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("textarea", null));
5
+ };
6
+
7
+ export default LabelTextArea;
File without changes
package/lib/index.d.ts CHANGED
@@ -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", {
@@ -156,12 +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
- setTimeout(function () {
161
- var _a;
162
-
163
- setUrlParams((_a = {}, _a[saveActiveKeyName] = tabActiveKey, _a));
164
- }, 50);
165
159
  }
166
160
  }, [tabActiveKey]);
167
161
 
@@ -0,0 +1,9 @@
1
+ .label-desc {
2
+ margin-top: 10px;
3
+
4
+ :global {
5
+ .desc-item-label {
6
+ color: #ff6b00;
7
+ }
8
+ }
9
+ }
@@ -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,7 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ require("./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: 18px;
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,7 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ require("./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: 18px;
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,2 @@
1
+ declare const LabelSelect: () => JSX.Element;
2
+ export default LabelSelect;
@@ -0,0 +1,41 @@
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 select_1 = __importDefault(require("antd/es/select"));
16
+
17
+ var Option = select_1["default"].Option;
18
+
19
+ var LabelSelect = function LabelSelect() {
20
+ function handleChange(value) {
21
+ console.log("selected " + value);
22
+ }
23
+
24
+ return react_1["default"].createElement("div", null, react_1["default"].createElement(select_1["default"], {
25
+ style: {
26
+ width: 120
27
+ },
28
+ onChange: handleChange
29
+ }, react_1["default"].createElement(Option, {
30
+ value: "jack"
31
+ }, "Jack"), react_1["default"].createElement(Option, {
32
+ value: "lucy"
33
+ }, "Lucy"), react_1["default"].createElement(Option, {
34
+ value: "disabled",
35
+ disabled: true
36
+ }, "Disabled"), react_1["default"].createElement(Option, {
37
+ value: "Yiminghe"
38
+ }, "yiminghe")));
39
+ };
40
+
41
+ exports["default"] = LabelSelect;
@@ -0,0 +1 @@
1
+ import 'antd/es/select/style';
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ require("antd/es/select/style");
@@ -0,0 +1,2 @@
1
+ declare const LabelTextArea: () => JSX.Element;
2
+ export default LabelTextArea;
@@ -0,0 +1,19 @@
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 LabelTextArea = function LabelTextArea() {
16
+ return react_1["default"].createElement("div", null, react_1["default"].createElement("textarea", null));
17
+ };
18
+
19
+ exports["default"] = LabelTextArea;
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "assui",
3
- "version": "2.0.80",
3
+ "version": "2.0.81",
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.43",
36
+ "a-icons": "^1.0.44",
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": "05f837927f2f7f2f045757c1da82ff1e2b9e4956"
72
+ "gitHead": "d304fe5cca5c83ffc8065c08b0fb7e332da17349"
73
73
  }