assui 2.0.101 → 2.0.102

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 (3) hide show
  1. package/es/label-input/index.js +11 -3
  2. package/lib/label-input/index.js +14 -5
  3. package/package.json +2 -2
package/es/label-input/index.js CHANGED
@@ -27,10 +27,11 @@ var __read = this && this.__read || function (o, n) {
27
27
 
28
28
  import React from 'react';
29
29
  import classNames from 'classnames';
30
- import { useControllableValue } from 'ahooks';
31
30
  import { trimStart } from 'lodash';
32
31
  import EyeFilled from 'a-icons/lib/EyeFilled';
33
32
  import EyeOutlined from 'a-icons/lib/EyeOutlined';
33
+ import useControllableValue from 'ahooks/lib/useControllableValue';
34
+ import useSize from 'ahooks/lib/useSize';
34
35
  var PasswordSuffix = /*#__PURE__*/React.memo(function (_a) {
35
36
  var inputType = _a.inputType,
36
37
  onChangeInputType = _a.onChangeInputType;
@@ -58,6 +59,8 @@ var LabelInput = function LabelInput(props) {
58
59
  _a = props.type,
59
60
  type = _a === void 0 ? 'text' : _a,
60
61
  maxLength = props.maxLength;
62
+ var labelDomRef = React.useRef(null);
63
+ var labelSize = useSize(labelDomRef);
61
64
 
62
65
  var _b = __read(React.useState(false), 2),
63
66
  focused = _b[0],
@@ -100,9 +103,13 @@ var LabelInput = function LabelInput(props) {
100
103
  var onChangeInputType = React.useCallback(function (nextInputType) {
101
104
  setInputType(nextInputType);
102
105
  }, []);
106
+ var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + 28 : undefined;
103
107
  return /*#__PURE__*/React.createElement("div", {
104
108
  className: classNames('label-input-control', className),
105
- id: id
109
+ id: id,
110
+ style: {
111
+ minWidth: controlMinWidth
112
+ }
106
113
  }, /*#__PURE__*/React.createElement("div", {
107
114
  className: classNames('label-input-field', {
108
115
  'label-input-affix': prefix || suffix || isPasswordInput,
@@ -126,7 +133,8 @@ var LabelInput = function LabelInput(props) {
126
133
  maxLength: maxLength
127
134
  }), /*#__PURE__*/React.createElement("label", {
128
135
  className: "label-input-text",
129
- onClick: handleLabelClick
136
+ onClick: handleLabelClick,
137
+ ref: labelDomRef
130
138
  }, label)), (suffix || isPasswordInput) && /*#__PURE__*/React.createElement("div", {
131
139
  className: "label-input-suffix"
132
140
  }, suffix || /*#__PURE__*/React.createElement(PasswordSuffix, {
package/lib/label-input/index.js CHANGED
@@ -41,14 +41,16 @@ var react_1 = __importDefault(require("react"));
41
41
 
42
42
  var classnames_1 = __importDefault(require("classnames"));
43
43
 
44
- var ahooks_1 = require("ahooks");
45
-
46
44
  var lodash_1 = require("lodash");
47
45
 
48
46
  var EyeFilled_1 = __importDefault(require("a-icons/lib/EyeFilled"));
49
47
 
50
48
  var EyeOutlined_1 = __importDefault(require("a-icons/lib/EyeOutlined"));
51
49
 
50
+ var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
51
+
52
+ var useSize_1 = __importDefault(require("ahooks/lib/useSize"));
53
+
52
54
  var PasswordSuffix = react_1["default"].memo(function (_a) {
53
55
  var inputType = _a.inputType,
54
56
  onChangeInputType = _a.onChangeInputType;
@@ -76,12 +78,14 @@ var LabelInput = function LabelInput(props) {
76
78
  _a = props.type,
77
79
  type = _a === void 0 ? 'text' : _a,
78
80
  maxLength = props.maxLength;
81
+ var labelDomRef = react_1["default"].useRef(null);
82
+ var labelSize = useSize_1["default"](labelDomRef);
79
83
 
80
84
  var _b = __read(react_1["default"].useState(false), 2),
81
85
  focused = _b[0],
82
86
  setFocused = _b[1];
83
87
 
84
- var _c = __read(ahooks_1.useControllableValue(props, {
88
+ var _c = __read(useControllableValue_1["default"](props, {
85
89
  defaultValue: ''
86
90
  }), 2),
87
91
  value = _c[0],
@@ -118,9 +122,13 @@ var LabelInput = function LabelInput(props) {
118
122
  var onChangeInputType = react_1["default"].useCallback(function (nextInputType) {
119
123
  setInputType(nextInputType);
120
124
  }, []);
125
+ var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + 28 : undefined;
121
126
  return react_1["default"].createElement("div", {
122
127
  className: classnames_1["default"]('label-input-control', className),
123
- id: id
128
+ id: id,
129
+ style: {
130
+ minWidth: controlMinWidth
131
+ }
124
132
  }, react_1["default"].createElement("div", {
125
133
  className: classnames_1["default"]('label-input-field', {
126
134
  'label-input-affix': prefix || suffix || isPasswordInput,
@@ -144,7 +152,8 @@ var LabelInput = function LabelInput(props) {
144
152
  maxLength: maxLength
145
153
  }), react_1["default"].createElement("label", {
146
154
  className: "label-input-text",
147
- onClick: handleLabelClick
155
+ onClick: handleLabelClick,
156
+ ref: labelDomRef
148
157
  }, label)), (suffix || isPasswordInput) && react_1["default"].createElement("div", {
149
158
  className: "label-input-suffix"
150
159
  }, suffix || react_1["default"].createElement(PasswordSuffix, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "assui",
3
- "version": "2.0.101",
3
+ "version": "2.0.102",
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": "991f9314697b8ec411190f2847813443f9727f5e"
72
+ "gitHead": "f4d12b46c9bb1353d9f155a97cc1f59bd2764f2d"
73
73
  }