assui 2.0.99 → 2.0.102

package/es/index.d.ts

@@ -38,10 +38,14 @@ export type { LabelInputProps } from './label-input';
 export { default as LabelInput } from './label-input';
 export type { LabelSelectProps } from './label-select';
 export { default as LabelSelect } from './label-select';
+export type { LabelTextAreaProps } from './label-text-area';
+export { default as LabelTextArea } from './label-text-area';
 export type { LabelRangePickerProps } from './label-range-picker';
 export { default as LabelRangePicker } from './label-range-picker';
 export type { LabelDatePickerProps } from './label-date-picker';
 export { default as LabelDatePicker } from './label-date-picker';
+export type { LabelCustomizeRangePickerProps } from './label-customize-range-picker';
+export { default as LabelCustomizeRangePicker } from './label-customize-range-picker';
 export type { LabelDescItemProps } from './label-desc-item';
 export { default as LabelDescItem } from './label-desc-item';
 export type { RichTextEditorProps } from './rich-text-editor';

package/es/index.js

@@ -19,8 +19,10 @@ export { default as TextArea } from './text-area';
 export { default as TextInput } from './text-input';
 export { default as LabelInput } from './label-input';
 export { default as LabelSelect } from './label-select';
+export { default as LabelTextArea } from './label-text-area';
 export { default as LabelRangePicker } from './label-range-picker';
 export { default as LabelDatePicker } from './label-date-picker';
+export { default as LabelCustomizeRangePicker } from './label-customize-range-picker';
 export { default as LabelDescItem } from './label-desc-item';
 export { default as RichTextEditor } from './rich-text-editor';
 export { default as beautifulDnd } from './beautiful-dnd';

package/es/label-input/demo/index.less

@@ -0,0 +1,9 @@
+.form {
+  :global {
+    .ant-form-item-has-error {
+      .label-input-field {
+        border-color: #ff6b00;
+      }
+    }
+  }
+}

package/es/label-input/index.js

@@ -27,10 +27,11 @@ var __read = this && this.__read || function (o, n) {
 
 import React from 'react';
 import classNames from 'classnames';
-import { useControllableValue } from 'ahooks';
 import { trimStart } from 'lodash';
 import EyeFilled from 'a-icons/lib/EyeFilled';
 import EyeOutlined from 'a-icons/lib/EyeOutlined';
+import useControllableValue from 'ahooks/lib/useControllableValue';
+import useSize from 'ahooks/lib/useSize';
 var PasswordSuffix = /*#__PURE__*/React.memo(function (_a) {
   var inputType = _a.inputType,
       onChangeInputType = _a.onChangeInputType;
@@ -39,6 +40,7 @@ var PasswordSuffix = /*#__PURE__*/React.memo(function (_a) {
       onChangeInputType('text');
     }
   }) : /*#__PURE__*/React.createElement(EyeFilled, {
+    className: "label-input-open-eye",
     onClick: function onClick() {
       onChangeInputType('password');
     }
@@ -57,6 +59,8 @@ var LabelInput = function LabelInput(props) {
       _a = props.type,
       type = _a === void 0 ? 'text' : _a,
       maxLength = props.maxLength;
+  var labelDomRef = React.useRef(null);
+  var labelSize = useSize(labelDomRef);
 
   var _b = __read(React.useState(false), 2),
       focused = _b[0],
@@ -99,9 +103,13 @@ var LabelInput = function LabelInput(props) {
   var onChangeInputType = React.useCallback(function (nextInputType) {
     setInputType(nextInputType);
   }, []);
+  var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + 28 : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('label-input-control', className),
-    id: id
+    id: id,
+    style: {
+      minWidth: controlMinWidth
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('label-input-field', {
       'label-input-affix': prefix || suffix || isPasswordInput,
@@ -125,7 +133,8 @@ var LabelInput = function LabelInput(props) {
     maxLength: maxLength
   }), /*#__PURE__*/React.createElement("label", {
     className: "label-input-text",
-    onClick: handleLabelClick
+    onClick: handleLabelClick,
+    ref: labelDomRef
   }, label)), (suffix || isPasswordInput) && /*#__PURE__*/React.createElement("div", {
     className: "label-input-suffix"
   }, suffix || /*#__PURE__*/React.createElement(PasswordSuffix, {

package/es/label-input/style/index.css

@@ -6,13 +6,8 @@
   color: #263241;
   font-size: 16px;
   line-height: 16px;
-  border: 1px solid #e5e5e5;
-  border-radius: 12px;
+  border: 0;
   outline: 0;
-  transition: border 0.3s;
-}
-.label-input:focus {
-  border-color: #ff6b00;
 }
 .label-input:focus + label,
 .label-input:not([data-value='0']) + label {
@@ -26,18 +21,13 @@
 .label-input-field {
   height: 52px;
   overflow: hidden;
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+  transition: border 0.3s;
 }
 .label-input-affix {
   display: flex;
   align-items: center;
-  border: 1px solid #dfe2e7;
-  border-radius: 6px;
-}
-.label-input-affix .label-input {
-  border: 0;
-}
-.label-input-affix .label-input:focus {
-  border: 0;
 }
 .label-input-focused {
   border-color: #ff6b00;
@@ -47,7 +37,9 @@
   padding-left: 15px;
 }
 .label-input-suffix {
+  display: flex;
   flex-shrink: 0;
+  align-items: center;
   padding-right: 15px;
   color: #b3b3b3;
   font-weight: 500;
@@ -70,3 +62,6 @@
   cursor: text;
   transition: all 0.2s ease-out;
 }
+.label-input-open-eye {
+  color: #ff6b00;
+}

package/es/label-input/style/index.less

@@ -1,5 +1,5 @@
 @primary-color: #ff6b00;
-@color_dfe2e7: #dfe2e7;
+@color_263241: #263241;
 @color_9aa5b5: #9aa5b5;
 @color_b3b3b3: #b3b3b3;
 @color_e5e5e5: #e5e5e5;
@@ -14,17 +14,11 @@
   width: 100%;
   height: 100%;
   padding: 24px 15px 8px 15px;
-  color: #263241;
+  color: @color_263241;
   font-size: @font-size-lg;
   line-height: 16px;
-  border: 1px solid @color_e5e5e5;
-  border-radius: 12px;
+  border: 0;
   outline: 0;
-  transition: border 0.3s;
-
-  &:focus {
-    border-color: @primary-color;
-  }
 
   &:focus + label,
   &:not([data-value='0']) + label {
@@ -40,21 +34,14 @@
   &-field {
     height: 52px;
     overflow: hidden;
+    border: 1px solid @color_e5e5e5;
+    border-radius: 12px;
+    transition: border 0.3s;
   }
 
   &-affix {
     display: flex;
     align-items: center;
-    border: 1px solid @color_dfe2e7;
-    border-radius: 6px;
-
-    .label-input {
-      border: 0;
-
-      &:focus {
-        border: 0;
-      }
-    }
   }
 
   &-focused {
@@ -67,7 +54,9 @@
   }
 
   &-suffix {
+    display: flex;
     flex-shrink: 0;
+    align-items: center;
     padding-right: 15px;
     color: @color_b3b3b3;
     font-weight: @font-weight-500;
@@ -92,4 +81,8 @@
     cursor: text;
     transition: all 0.2s ease-out;
   }
+
+  &-open-eye {
+    color: @primary-color;
+  }
 }

package/lib/index.d.ts

@@ -38,10 +38,14 @@ export type { LabelInputProps } from './label-input';
 export { default as LabelInput } from './label-input';
 export type { LabelSelectProps } from './label-select';
 export { default as LabelSelect } from './label-select';
+export type { LabelTextAreaProps } from './label-text-area';
+export { default as LabelTextArea } from './label-text-area';
 export type { LabelRangePickerProps } from './label-range-picker';
 export { default as LabelRangePicker } from './label-range-picker';
 export type { LabelDatePickerProps } from './label-date-picker';
 export { default as LabelDatePicker } from './label-date-picker';
+export type { LabelCustomizeRangePickerProps } from './label-customize-range-picker';
+export { default as LabelCustomizeRangePicker } from './label-customize-range-picker';
 export type { LabelDescItemProps } from './label-desc-item';
 export { default as LabelDescItem } from './label-desc-item';
 export type { RichTextEditorProps } from './rich-text-editor';

package/lib/index.js

@@ -193,6 +193,15 @@ Object.defineProperty(exports, "LabelSelect", {
   }
 });
 
+var label_text_area_1 = require("./label-text-area");
+
+Object.defineProperty(exports, "LabelTextArea", {
+  enumerable: true,
+  get: function get() {
+    return label_text_area_1["default"];
+  }
+});
+
 var label_range_picker_1 = require("./label-range-picker");
 
 Object.defineProperty(exports, "LabelRangePicker", {
@@ -211,6 +220,15 @@ Object.defineProperty(exports, "LabelDatePicker", {
   }
 });
 
+var label_customize_range_picker_1 = require("./label-customize-range-picker");
+
+Object.defineProperty(exports, "LabelCustomizeRangePicker", {
+  enumerable: true,
+  get: function get() {
+    return label_customize_range_picker_1["default"];
+  }
+});
+
 var label_desc_item_1 = require("./label-desc-item");
 
 Object.defineProperty(exports, "LabelDescItem", {

package/lib/label-input/demo/index.less

@@ -0,0 +1,9 @@
+.form {
+  :global {
+    .ant-form-item-has-error {
+      .label-input-field {
+        border-color: #ff6b00;
+      }
+    }
+  }
+}

package/lib/label-input/index.js

@@ -41,14 +41,16 @@ var react_1 = __importDefault(require("react"));
 
 var classnames_1 = __importDefault(require("classnames"));
 
-var ahooks_1 = require("ahooks");
-
 var lodash_1 = require("lodash");
 
 var EyeFilled_1 = __importDefault(require("a-icons/lib/EyeFilled"));
 
 var EyeOutlined_1 = __importDefault(require("a-icons/lib/EyeOutlined"));
 
+var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
+
+var useSize_1 = __importDefault(require("ahooks/lib/useSize"));
+
 var PasswordSuffix = react_1["default"].memo(function (_a) {
   var inputType = _a.inputType,
       onChangeInputType = _a.onChangeInputType;
@@ -57,6 +59,7 @@ var PasswordSuffix = react_1["default"].memo(function (_a) {
       onChangeInputType('text');
     }
   }) : react_1["default"].createElement(EyeFilled_1["default"], {
+    className: "label-input-open-eye",
     onClick: function onClick() {
       onChangeInputType('password');
     }
@@ -75,12 +78,14 @@ var LabelInput = function LabelInput(props) {
       _a = props.type,
       type = _a === void 0 ? 'text' : _a,
       maxLength = props.maxLength;
+  var labelDomRef = react_1["default"].useRef(null);
+  var labelSize = useSize_1["default"](labelDomRef);
 
   var _b = __read(react_1["default"].useState(false), 2),
       focused = _b[0],
       setFocused = _b[1];
 
-  var _c = __read(ahooks_1.useControllableValue(props, {
+  var _c = __read(useControllableValue_1["default"](props, {
     defaultValue: ''
   }), 2),
       value = _c[0],
@@ -117,9 +122,13 @@ var LabelInput = function LabelInput(props) {
   var onChangeInputType = react_1["default"].useCallback(function (nextInputType) {
     setInputType(nextInputType);
   }, []);
+  var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + 28 : undefined;
   return react_1["default"].createElement("div", {
     className: classnames_1["default"]('label-input-control', className),
-    id: id
+    id: id,
+    style: {
+      minWidth: controlMinWidth
+    }
   }, react_1["default"].createElement("div", {
     className: classnames_1["default"]('label-input-field', {
       'label-input-affix': prefix || suffix || isPasswordInput,
@@ -143,7 +152,8 @@ var LabelInput = function LabelInput(props) {
     maxLength: maxLength
   }), react_1["default"].createElement("label", {
     className: "label-input-text",
-    onClick: handleLabelClick
+    onClick: handleLabelClick,
+    ref: labelDomRef
   }, label)), (suffix || isPasswordInput) && react_1["default"].createElement("div", {
     className: "label-input-suffix"
   }, suffix || react_1["default"].createElement(PasswordSuffix, {

package/lib/label-input/style/index.css

@@ -6,13 +6,8 @@
   color: #263241;
   font-size: 16px;
   line-height: 16px;
-  border: 1px solid #e5e5e5;
-  border-radius: 12px;
+  border: 0;
   outline: 0;
-  transition: border 0.3s;
-}
-.label-input:focus {
-  border-color: #ff6b00;
 }
 .label-input:focus + label,
 .label-input:not([data-value='0']) + label {
@@ -26,18 +21,13 @@
 .label-input-field {
   height: 52px;
   overflow: hidden;
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+  transition: border 0.3s;
 }
 .label-input-affix {
   display: flex;
   align-items: center;
-  border: 1px solid #dfe2e7;
-  border-radius: 6px;
-}
-.label-input-affix .label-input {
-  border: 0;
-}
-.label-input-affix .label-input:focus {
-  border: 0;
 }
 .label-input-focused {
   border-color: #ff6b00;
@@ -47,7 +37,9 @@
   padding-left: 15px;
 }
 .label-input-suffix {
+  display: flex;
   flex-shrink: 0;
+  align-items: center;
   padding-right: 15px;
   color: #b3b3b3;
   font-weight: 500;
@@ -70,3 +62,6 @@
   cursor: text;
   transition: all 0.2s ease-out;
 }
+.label-input-open-eye {
+  color: #ff6b00;
+}

package/lib/label-input/style/index.less

@@ -1,5 +1,5 @@
 @primary-color: #ff6b00;
-@color_dfe2e7: #dfe2e7;
+@color_263241: #263241;
 @color_9aa5b5: #9aa5b5;
 @color_b3b3b3: #b3b3b3;
 @color_e5e5e5: #e5e5e5;
@@ -14,17 +14,11 @@
   width: 100%;
   height: 100%;
   padding: 24px 15px 8px 15px;
-  color: #263241;
+  color: @color_263241;
   font-size: @font-size-lg;
   line-height: 16px;
-  border: 1px solid @color_e5e5e5;
-  border-radius: 12px;
+  border: 0;
   outline: 0;
-  transition: border 0.3s;
-
-  &:focus {
-    border-color: @primary-color;
-  }
 
   &:focus + label,
   &:not([data-value='0']) + label {
@@ -40,21 +34,14 @@
   &-field {
     height: 52px;
     overflow: hidden;
+    border: 1px solid @color_e5e5e5;
+    border-radius: 12px;
+    transition: border 0.3s;
   }
 
   &-affix {
     display: flex;
     align-items: center;
-    border: 1px solid @color_dfe2e7;
-    border-radius: 6px;
-
-    .label-input {
-      border: 0;
-
-      &:focus {
-        border: 0;
-      }
-    }
   }
 
   &-focused {
@@ -67,7 +54,9 @@
   }
 
   &-suffix {
+    display: flex;
     flex-shrink: 0;
+    align-items: center;
     padding-right: 15px;
     color: @color_b3b3b3;
     font-weight: @font-weight-500;
@@ -92,4 +81,8 @@
     cursor: text;
     transition: all 0.2s ease-out;
   }
+
+  &-open-eye {
+    color: @primary-color;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assui",
-  "version": "2.0.99",
+  "version": "2.0.102",
   "description": "react ui library",
   "author": "jason <usochen@gmail.com>",
   "main": "./lib/index.js",
@@ -33,7 +33,7 @@
     "@ahooksjs/use-url-state": "^2.5.8",
     "@tinymce/tinymce-react": "^3.13.0",
     "@types/react-beautiful-dnd": "^13.1.2",
-    "a-icons": "^1.0.52",
+    "a-icons": "^1.0.53",
     "ahooks": "^3.0.8",
     "bignumber.js": "^9.0.1",
     "copy-to-clipboard": "^3.3.1",
@@ -69,5 +69,5 @@
     "node": ">=10.0.0"
   },
   "license": "MIT",
-  "gitHead": "9ee38fdd30280a63f2ddb0ed95a9e8e2dcf09ce3"
+  "gitHead": "f4d12b46c9bb1353d9f155a97cc1f59bd2764f2d"
 }