assui 2.0.97 → 2.0.100

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 (13) hide show
  1. package/es/index.d.ts +2 -0
  2. package/es/index.js +1 -0
  3. package/es/label-input/demo/index.less +9 -0
  4. package/es/label-input/index.js +22 -10
  5. package/es/label-input/style/index.css +9 -14
  6. package/es/label-input/style/index.less +12 -19
  7. package/lib/index.d.ts +2 -0
  8. package/lib/index.js +9 -0
  9. package/lib/label-input/demo/index.less +9 -0
  10. package/lib/label-input/index.js +23 -10
  11. package/lib/label-input/style/index.css +9 -14
  12. package/lib/label-input/style/index.less +12 -19
  13. package/package.json +3 -3
package/es/index.d.ts CHANGED
@@ -38,6 +38,8 @@ export type { LabelInputProps } from './label-input';
38
38
  export { default as LabelInput } from './label-input';
39
39
  export type { LabelSelectProps } from './label-select';
40
40
  export { default as LabelSelect } from './label-select';
41
+ export type { LabelTextAreaProps } from './label-text-area';
42
+ export { default as LabelTextArea } from './label-text-area';
41
43
  export type { LabelRangePickerProps } from './label-range-picker';
42
44
  export { default as LabelRangePicker } from './label-range-picker';
43
45
  export type { LabelDatePickerProps } from './label-date-picker';
package/es/index.js CHANGED
@@ -19,6 +19,7 @@ export { default as TextArea } from './text-area';
19
19
  export { default as TextInput } from './text-input';
20
20
  export { default as LabelInput } from './label-input';
21
21
  export { default as LabelSelect } from './label-select';
22
+ export { default as LabelTextArea } from './label-text-area';
22
23
  export { default as LabelRangePicker } from './label-range-picker';
23
24
  export { default as LabelDatePicker } from './label-date-picker';
24
25
  export { default as LabelDescItem } from './label-desc-item';
package/es/label-input/demo/index.less ADDED
@@ -0,0 +1,9 @@
1
+ .form {
2
+ :global {
3
+ .ant-form-item-has-error {
4
+ .label-input-field {
5
+ border-color: #ff6b00;
6
+ }
7
+ }
8
+ }
9
+ }
package/es/label-input/index.js CHANGED
@@ -31,6 +31,21 @@ import { useControllableValue } from 'ahooks';
31
31
  import { trimStart } from 'lodash';
32
32
  import EyeFilled from 'a-icons/lib/EyeFilled';
33
33
  import EyeOutlined from 'a-icons/lib/EyeOutlined';
34
+ var PasswordSuffix = /*#__PURE__*/React.memo(function (_a) {
35
+ var inputType = _a.inputType,
36
+ onChangeInputType = _a.onChangeInputType;
37
+ var resultNode = inputType === 'password' ? /*#__PURE__*/React.createElement(EyeOutlined, {
38
+ onClick: function onClick() {
39
+ onChangeInputType('text');
40
+ }
41
+ }) : /*#__PURE__*/React.createElement(EyeFilled, {
42
+ className: "label-input-open-eye",
43
+ onClick: function onClick() {
44
+ onChangeInputType('password');
45
+ }
46
+ });
47
+ return resultNode;
48
+ });
34
49
 
35
50
  var LabelInput = function LabelInput(props) {
36
51
  var className = props.className,
@@ -82,15 +97,9 @@ var LabelInput = function LabelInput(props) {
82
97
  (_a = InputDomRef.current) === null || _a === void 0 ? void 0 : _a.focus();
83
98
  };
84
99
 
85
- var passwordSuffix = inputType === 'password' ? /*#__PURE__*/React.createElement(EyeOutlined, {
86
- onClick: function onClick() {
87
- setInputType('text');
88
- }
89
- }) : /*#__PURE__*/React.createElement(EyeFilled, {
90
- onClick: function onClick() {
91
- return setInputType('password');
92
- }
93
- });
100
+ var onChangeInputType = React.useCallback(function (nextInputType) {
101
+ setInputType(nextInputType);
102
+ }, []);
94
103
  return /*#__PURE__*/React.createElement("div", {
95
104
  className: classNames('label-input-control', className),
96
105
  id: id
@@ -120,7 +129,10 @@ var LabelInput = function LabelInput(props) {
120
129
  onClick: handleLabelClick
121
130
  }, label)), (suffix || isPasswordInput) && /*#__PURE__*/React.createElement("div", {
122
131
  className: "label-input-suffix"
123
- }, suffix || passwordSuffix)));
132
+ }, suffix || /*#__PURE__*/React.createElement(PasswordSuffix, {
133
+ inputType: inputType,
134
+ onChangeInputType: onChangeInputType
135
+ }))));
124
136
  };
125
137
 
126
138
  export default LabelInput;
package/es/label-input/style/index.css CHANGED
@@ -6,13 +6,8 @@
6
6
  color: #263241;
7
7
  font-size: 16px;
8
8
  line-height: 16px;
9
- border: 1px solid #e5e5e5;
10
- border-radius: 12px;
9
+ border: 0;
11
10
  outline: 0;
12
- transition: border 0.3s;
13
- }
14
- .label-input:focus {
15
- border-color: #ff6b00;
16
11
  }
17
12
  .label-input:focus + label,
18
13
  .label-input:not([data-value='0']) + label {
@@ -26,18 +21,13 @@
26
21
  .label-input-field {
27
22
  height: 52px;
28
23
  overflow: hidden;
24
+ border: 1px solid #e5e5e5;
25
+ border-radius: 12px;
26
+ transition: border 0.3s;
29
27
  }
30
28
  .label-input-affix {
31
29
  display: flex;
32
30
  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
31
  }
42
32
  .label-input-focused {
43
33
  border-color: #ff6b00;
@@ -47,7 +37,9 @@
47
37
  padding-left: 15px;
48
38
  }
49
39
  .label-input-suffix {
40
+ display: flex;
50
41
  flex-shrink: 0;
42
+ align-items: center;
51
43
  padding-right: 15px;
52
44
  color: #b3b3b3;
53
45
  font-weight: 500;
@@ -70,3 +62,6 @@
70
62
  cursor: text;
71
63
  transition: all 0.2s ease-out;
72
64
  }
65
+ .label-input-open-eye {
66
+ color: #ff6b00;
67
+ }
package/es/label-input/style/index.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @primary-color: #ff6b00;
2
- @color_dfe2e7: #dfe2e7;
2
+ @color_263241: #263241;
3
3
  @color_9aa5b5: #9aa5b5;
4
4
  @color_b3b3b3: #b3b3b3;
5
5
  @color_e5e5e5: #e5e5e5;
@@ -14,17 +14,11 @@
14
14
  width: 100%;
15
15
  height: 100%;
16
16
  padding: 24px 15px 8px 15px;
17
- color: #263241;
17
+ color: @color_263241;
18
18
  font-size: @font-size-lg;
19
19
  line-height: 16px;
20
- border: 1px solid @color_e5e5e5;
21
- border-radius: 12px;
20
+ border: 0;
22
21
  outline: 0;
23
- transition: border 0.3s;
24
-
25
- &:focus {
26
- border-color: @primary-color;
27
- }
28
22
 
29
23
  &:focus + label,
30
24
  &:not([data-value='0']) + label {
@@ -40,21 +34,14 @@
40
34
  &-field {
41
35
  height: 52px;
42
36
  overflow: hidden;
37
+ border: 1px solid @color_e5e5e5;
38
+ border-radius: 12px;
39
+ transition: border 0.3s;
43
40
  }
44
41
 
45
42
  &-affix {
46
43
  display: flex;
47
44
  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
45
  }
59
46
 
60
47
  &-focused {
@@ -67,7 +54,9 @@
67
54
  }
68
55
 
69
56
  &-suffix {
57
+ display: flex;
70
58
  flex-shrink: 0;
59
+ align-items: center;
71
60
  padding-right: 15px;
72
61
  color: @color_b3b3b3;
73
62
  font-weight: @font-weight-500;
@@ -92,4 +81,8 @@
92
81
  cursor: text;
93
82
  transition: all 0.2s ease-out;
94
83
  }
84
+
85
+ &-open-eye {
86
+ color: @primary-color;
87
+ }
95
88
  }
package/lib/index.d.ts CHANGED
@@ -38,6 +38,8 @@ export type { LabelInputProps } from './label-input';
38
38
  export { default as LabelInput } from './label-input';
39
39
  export type { LabelSelectProps } from './label-select';
40
40
  export { default as LabelSelect } from './label-select';
41
+ export type { LabelTextAreaProps } from './label-text-area';
42
+ export { default as LabelTextArea } from './label-text-area';
41
43
  export type { LabelRangePickerProps } from './label-range-picker';
42
44
  export { default as LabelRangePicker } from './label-range-picker';
43
45
  export type { LabelDatePickerProps } from './label-date-picker';
package/lib/index.js CHANGED
@@ -193,6 +193,15 @@ Object.defineProperty(exports, "LabelSelect", {
193
193
  }
194
194
  });
195
195
 
196
+ var label_text_area_1 = require("./label-text-area");
197
+
198
+ Object.defineProperty(exports, "LabelTextArea", {
199
+ enumerable: true,
200
+ get: function get() {
201
+ return label_text_area_1["default"];
202
+ }
203
+ });
204
+
196
205
  var label_range_picker_1 = require("./label-range-picker");
197
206
 
198
207
  Object.defineProperty(exports, "LabelRangePicker", {
package/lib/label-input/demo/index.less ADDED
@@ -0,0 +1,9 @@
1
+ .form {
2
+ :global {
3
+ .ant-form-item-has-error {
4
+ .label-input-field {
5
+ border-color: #ff6b00;
6
+ }
7
+ }
8
+ }
9
+ }
package/lib/label-input/index.js CHANGED
@@ -49,6 +49,22 @@ var EyeFilled_1 = __importDefault(require("a-icons/lib/EyeFilled"));
49
49
 
50
50
  var EyeOutlined_1 = __importDefault(require("a-icons/lib/EyeOutlined"));
51
51
 
52
+ var PasswordSuffix = react_1["default"].memo(function (_a) {
53
+ var inputType = _a.inputType,
54
+ onChangeInputType = _a.onChangeInputType;
55
+ var resultNode = inputType === 'password' ? react_1["default"].createElement(EyeOutlined_1["default"], {
56
+ onClick: function onClick() {
57
+ onChangeInputType('text');
58
+ }
59
+ }) : react_1["default"].createElement(EyeFilled_1["default"], {
60
+ className: "label-input-open-eye",
61
+ onClick: function onClick() {
62
+ onChangeInputType('password');
63
+ }
64
+ });
65
+ return resultNode;
66
+ });
67
+
52
68
  var LabelInput = function LabelInput(props) {
53
69
  var className = props.className,
54
70
  prefix = props.prefix,
@@ -99,15 +115,9 @@ var LabelInput = function LabelInput(props) {
99
115
  (_a = InputDomRef.current) === null || _a === void 0 ? void 0 : _a.focus();
100
116
  };
101
117
 
102
- var passwordSuffix = inputType === 'password' ? react_1["default"].createElement(EyeOutlined_1["default"], {
103
- onClick: function onClick() {
104
- setInputType('text');
105
- }
106
- }) : react_1["default"].createElement(EyeFilled_1["default"], {
107
- onClick: function onClick() {
108
- return setInputType('password');
109
- }
110
- });
118
+ var onChangeInputType = react_1["default"].useCallback(function (nextInputType) {
119
+ setInputType(nextInputType);
120
+ }, []);
111
121
  return react_1["default"].createElement("div", {
112
122
  className: classnames_1["default"]('label-input-control', className),
113
123
  id: id
@@ -137,7 +147,10 @@ var LabelInput = function LabelInput(props) {
137
147
  onClick: handleLabelClick
138
148
  }, label)), (suffix || isPasswordInput) && react_1["default"].createElement("div", {
139
149
  className: "label-input-suffix"
140
- }, suffix || passwordSuffix)));
150
+ }, suffix || react_1["default"].createElement(PasswordSuffix, {
151
+ inputType: inputType,
152
+ onChangeInputType: onChangeInputType
153
+ }))));
141
154
  };
142
155
 
143
156
  exports["default"] = LabelInput;
package/lib/label-input/style/index.css CHANGED
@@ -6,13 +6,8 @@
6
6
  color: #263241;
7
7
  font-size: 16px;
8
8
  line-height: 16px;
9
- border: 1px solid #e5e5e5;
10
- border-radius: 12px;
9
+ border: 0;
11
10
  outline: 0;
12
- transition: border 0.3s;
13
- }
14
- .label-input:focus {
15
- border-color: #ff6b00;
16
11
  }
17
12
  .label-input:focus + label,
18
13
  .label-input:not([data-value='0']) + label {
@@ -26,18 +21,13 @@
26
21
  .label-input-field {
27
22
  height: 52px;
28
23
  overflow: hidden;
24
+ border: 1px solid #e5e5e5;
25
+ border-radius: 12px;
26
+ transition: border 0.3s;
29
27
  }
30
28
  .label-input-affix {
31
29
  display: flex;
32
30
  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
31
  }
42
32
  .label-input-focused {
43
33
  border-color: #ff6b00;
@@ -47,7 +37,9 @@
47
37
  padding-left: 15px;
48
38
  }
49
39
  .label-input-suffix {
40
+ display: flex;
50
41
  flex-shrink: 0;
42
+ align-items: center;
51
43
  padding-right: 15px;
52
44
  color: #b3b3b3;
53
45
  font-weight: 500;
@@ -70,3 +62,6 @@
70
62
  cursor: text;
71
63
  transition: all 0.2s ease-out;
72
64
  }
65
+ .label-input-open-eye {
66
+ color: #ff6b00;
67
+ }
package/lib/label-input/style/index.less CHANGED
@@ -1,5 +1,5 @@
1
1
  @primary-color: #ff6b00;
2
- @color_dfe2e7: #dfe2e7;
2
+ @color_263241: #263241;
3
3
  @color_9aa5b5: #9aa5b5;
4
4
  @color_b3b3b3: #b3b3b3;
5
5
  @color_e5e5e5: #e5e5e5;
@@ -14,17 +14,11 @@
14
14
  width: 100%;
15
15
  height: 100%;
16
16
  padding: 24px 15px 8px 15px;
17
- color: #263241;
17
+ color: @color_263241;
18
18
  font-size: @font-size-lg;
19
19
  line-height: 16px;
20
- border: 1px solid @color_e5e5e5;
21
- border-radius: 12px;
20
+ border: 0;
22
21
  outline: 0;
23
- transition: border 0.3s;
24
-
25
- &:focus {
26
- border-color: @primary-color;
27
- }
28
22
 
29
23
  &:focus + label,
30
24
  &:not([data-value='0']) + label {
@@ -40,21 +34,14 @@
40
34
  &-field {
41
35
  height: 52px;
42
36
  overflow: hidden;
37
+ border: 1px solid @color_e5e5e5;
38
+ border-radius: 12px;
39
+ transition: border 0.3s;
43
40
  }
44
41
 
45
42
  &-affix {
46
43
  display: flex;
47
44
  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
45
  }
59
46
 
60
47
  &-focused {
@@ -67,7 +54,9 @@
67
54
  }
68
55
 
69
56
  &-suffix {
57
+ display: flex;
70
58
  flex-shrink: 0;
59
+ align-items: center;
71
60
  padding-right: 15px;
72
61
  color: @color_b3b3b3;
73
62
  font-weight: @font-weight-500;
@@ -92,4 +81,8 @@
92
81
  cursor: text;
93
82
  transition: all 0.2s ease-out;
94
83
  }
84
+
85
+ &-open-eye {
86
+ color: @primary-color;
87
+ }
95
88
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "assui",
3
- "version": "2.0.97",
3
+ "version": "2.0.100",
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.50",
36
+ "a-icons": "^1.0.52",
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": "b4f5c717bd3010c951c09332fa56099483a6b852"
72
+ "gitHead": "a2ae036f7fb6b185af19bb40629502d4f58b5de9"
73
73
  }