acud 0.0.70 → 0.0.73

package/lib/input/AutoComplete.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _select = _interopRequireDefault(require("../select"));
+
+var _reactNode = require("../_util/reactNode");
+
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+
+var Option = _select["default"].Option;
+
+function isSelectOptionOrSelectOptGroup(child) {
+  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
+}
+
+var AutoComplete = function AutoComplete(props, ref) {
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'acud-select' : _props$prefixCls,
+      className = props.className,
+      children = props.children;
+  var childNodes = (0, _toArray["default"])(children); // ============================= Input =============================
+
+  var customizeInput;
+
+  if (childNodes.length === 1 && (0, _reactNode.isValidElement)(childNodes[0]) && !isSelectOptionOrSelectOptGroup(childNodes[0])) {
+    var _childNodes = (0, _slicedToArray2["default"])(childNodes, 1);
+
+    customizeInput = _childNodes[0];
+  }
+
+  var getInputElement = customizeInput ? function () {
+    return customizeInput;
+  } : undefined; // ============================ Options ============================
+
+  var optionChildren;
+
+  if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) {
+    optionChildren = children;
+  } else {
+    optionChildren = [];
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_select["default"], (0, _extends2["default"])({
+    ref: ref
+  }, props, {
+    prefixCls: prefixCls,
+    className: (0, _classnames["default"])("".concat(prefixCls, "-auto-complete"), className),
+    mode: _select["default"].SECRET_COMBOBOX_MODE_DO_NOT_USE,
+    getInputElement: getInputElement
+  }), optionChildren);
+};
+
+var RefAutoComplete = /*#__PURE__*/_react["default"].forwardRef(AutoComplete);
+
+RefAutoComplete.Option = Option;
+var _default = RefAutoComplete; // export default AutoComplete;
+
+exports["default"] = _default;

package/lib/input/TextArea.d.ts

@@ -17,5 +17,5 @@ export interface TextAreaProps {
     readonly?: boolean;
     allowClear?: boolean;
 }
-declare const TextArea: React.FC<TextAreaProps>;
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<unknown>>;
 export default TextArea;

package/lib/input/TextArea.js

@@ -49,7 +49,8 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
  */
 
 
-var TextArea = function TextArea(props) {
+// const TextArea:React.FC<TextAreaProps> = props => {
+var TextArea = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var _classNames;
 
   var _props$prefixCls = props.prefixCls,
@@ -157,6 +158,7 @@ var TextArea = function TextArea(props) {
     className: "".concat(prefixCls, "-outer"),
     style: style
   }, /*#__PURE__*/_react["default"].createElement(_rcTextarea["default"], (0, _extends2["default"])({}, rest, {
+    ref: ref,
     placeholder: placeholder,
     className: (0, _classnames["default"])(classes),
     onChange: handleOnChange,
@@ -178,7 +180,7 @@ var TextArea = function TextArea(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])(limitClassName, 'limit')
   }, currentLength, "/", limitLength)));
-};
+});
 
 var _default = TextArea;
 exports["default"] = _default;

package/lib/input/index.d.ts

@@ -4,11 +4,13 @@ import Label from './Label';
 import TextArea from './TextArea';
 import Password from './Password';
 import MultiSelectInput from './MultiSelectInput';
+import AutoComplete from './AutoComplete';
 interface CompoundedComponent extends React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>> {
     Label: typeof Label;
     TextArea: typeof TextArea;
     Password: typeof Password;
     MultiSelectInput: typeof MultiSelectInput;
+    AutoComplete: typeof AutoComplete;
     __ACUD_CHECKBOX: boolean;
 }
 declare const Input: CompoundedComponent;

package/lib/input/index.js

@@ -17,10 +17,13 @@ var _Password = _interopRequireDefault(require("./Password"));
 
 var _MultiSelectInput = _interopRequireDefault(require("./MultiSelectInput"));
 
+var _AutoComplete = _interopRequireDefault(require("./AutoComplete"));
+
 var Input = _Input["default"];
 Input.Label = _Label["default"];
 Input.TextArea = _TextArea["default"];
 Input.Password = _Password["default"];
 Input.MultiSelectInput = _MultiSelectInput["default"];
+Input.AutoComplete = _AutoComplete["default"];
 var _default = Input;
 exports["default"] = _default;

package/lib/input/style/index.css

@@ -682,7 +682,6 @@
   padding-top: 6px;
   padding-right: 24px;
   padding-bottom: 24px;
-  min-height: 100px;
   border-radius: 4px;
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", Roboto, 'Arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif;
   color: #151B26;
@@ -862,6 +861,9 @@
   top: 2px;
   right: 12px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  bottom: 2px;
 }
 .acud-input-password-outer-icon .acuicon svg {
   fill: #84868C;
@@ -884,3 +886,56 @@
 .acud-input-select-tags .acud-select-clear {
   right: 12px;
 }
+.acud-select-auto-complete .acud-select-selector {
+  width: 100%;
+  display: flex;
+  cursor: text;
+  position: relative;
+}
+.acud-select-auto-complete {
+  width: 100%;
+  display: block;
+}
+.acud-select-auto-complete:not(.acud-select-customize-input) .acud-select-selector {
+  position: relative;
+  background-color: #fff;
+  border-radius: 2px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.acud-select-auto-complete:not(.acud-select-customize-input) .acud-select-selector .acud-select-selection-search .acud-select-selection-search-input {
+  cursor: auto;
+  margin: 0;
+  padding: 0;
+  background: 0 0;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.acud-select-auto-complete .acud-select-selector {
+  width: 100%;
+  display: flex;
+  cursor: text;
+  position: relative;
+}
+.acud-select-auto-complete .acud-select-selector .acud-select-selection-search {
+  position: absolute;
+  inset: 0 12px;
+  z-index: 2;
+}
+.acud-select-auto-complete .acud-select-selector .acud-select-selection-search .acud-select-selection-search-input {
+  width: 100%;
+}
+.acud-select-auto-complete .acud-select-selector .acud-select-selection-placeholder {
+  flex: 1;
+  transition: none;
+  pointer-events: none;
+  overflow: hidden;
+  color: #bfbfbf;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-left: 12px;
+  padding-right: 12px;
+  z-index: 1;
+}

package/lib/input/style/index.less

@@ -8,6 +8,10 @@
 
 @input-password-outer-prefix-cls: ~'@{acud-prefix}-input-password-outer';
 @input-password-prefix-cls: ~'@{acud-prefix}-input-password';
+@select-auto-complete-prefix-cls: ~'@{acud-prefix}-select-auto-complete';
+
+@select-prefix-cls: ~'@{acud-prefix}-select';
+
 // basic logic - line hight, font size
 // content layer - 只处理文字 Icon， 没有开关config，对应四种交互状态配置
 // background layer - 背景层 填色、描边、阴影，可以通过开关config配置， 对应四种交互状态
@@ -254,7 +258,7 @@
     padding-top: 1.5*@padding-xsm;
     padding-right: 2*@padding-m;
     padding-bottom: 6*@padding-xsm;
-    min-height: 100px;
+    // min-height: 100px;
     border-radius: @input-border-lg-radius;
     font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", Roboto, 'Arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif;
     &::-webkit-input-placeholder {
@@ -337,6 +341,9 @@
         top: 2px;
         right: @padding-m;
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        bottom: 2px;
         .acuicon{
             svg{
                 fill:@G5;
@@ -376,4 +383,62 @@
         right:12px;
     }
 }
+.acud-select-auto-complete{
+    .acud-select-selector{
+        width:100%;
+        display: flex;
+        cursor: text;
+        position: relative;
+    }
+}
+.@{select-auto-complete-prefix-cls}{
+    width:100%;
+    display: block;
+    &:not(.acud-select-customize-input) {
+        .acud-select-selector{
+            position: relative;
+            background-color: #fff;
+            border-radius: 2px;
+            transition: all .3s cubic-bezier(.645,.045,.355,1);
+            .acud-select-selection-search{
+                .acud-select-selection-search-input{
+                    cursor: auto;
+                    margin: 0;
+                    padding: 0;
+                    background: 0 0;
+                    border: none;
+                    outline: none;
+                    appearance: none;
+                }
+            }
+        }
+        
+    }
+    .@{select-prefix-cls}-selector{
+        width:100%;
+        display: flex;
+        cursor: text;
+        position: relative;
+        .@{select-prefix-cls}-selection-search{
+            position: absolute;
+            inset: 0 12px;
+            z-index: 2;
+            .@{select-prefix-cls}-selection-search-input{
+                width:100%;
+            }
+        }
+        .@{select-prefix-cls}-selection-placeholder{
+            flex:1;
+            transition: none;
+            pointer-events: none;
+            overflow: hidden;
+            color: #bfbfbf;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            padding-left: 12px;
+            padding-right: 12px;
+            z-index: 1;
+        }
 
+    }
+}

package/lib/modal/style/css.js

@@ -2,4 +2,6 @@
 
 require("../../style/index.css");
 
-require("./index.css");
+require("./index.css");
+
+require("../../button/style/css");

package/lib/modal/style/index.d.ts

@@ -1,2 +1,3 @@
 import '../../style/index.less';
 import './index.less';
+import '../../button/style';

package/lib/modal/style/index.js

@@ -2,4 +2,6 @@
 
 require("../../style/index.less");
 
-require("./index.less");
+require("./index.less");
+
+require("../../button/style");

package/lib/select/index.d.ts

@@ -29,7 +29,7 @@ declare const SelectRef: <VT extends SelectValue = SelectValue>(props: SelectPro
     ref?: React.Ref<RefSelectProps>;
 }) => React.ReactElement;
 declare type InternalSelectType = typeof SelectRef;
-interface SelectInterface extends InternalSelectType {
+export interface SelectInterface extends InternalSelectType {
     SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
     Option: typeof Option;
     OptGroup: typeof OptGroup;

package/lib/select/style/css.js

@@ -4,4 +4,6 @@ require("../../style/index.css");
 
 require("./index.css");
 
-require("../../empty/style/css");
+require("../../empty/style/css");
+
+require("../../checkbox/style/css");

package/lib/select/style/index.d.ts

@@ -1,3 +1,4 @@
 import '../../style/index.less';
 import './index.less';
 import '../../empty/style';
+import '../../checkbox/style';

package/lib/select/style/index.js

@@ -4,4 +4,6 @@ require("../../style/index.less");
 
 require("./index.less");
 
-require("../../empty/style");
+require("../../empty/style");
+
+require("../../checkbox/style");

package/lib/upload/Upload.js

@@ -107,6 +107,7 @@ var InternalUpload = function InternalUpload(props, ref) {
       type = props.type,
       children = props.children,
       style = props.style,
+      motionDeadline = props.motionDeadline,
       itemRender = props.itemRender,
       maxCount = props.maxCount,
       description = props.description,
@@ -447,6 +448,7 @@ var InternalUpload = function InternalUpload(props, ref) {
       return /*#__PURE__*/React.createElement(_UploadList["default"], {
         listType: listType,
         items: mergedFileList,
+        motionDeadline: motionDeadline,
         previewFile: previewFile,
         onPreview: onPreview,
         onDownload: onDownload,

package/lib/upload/UploadList/ListItem.d.ts

@@ -3,6 +3,7 @@ import { ItemRender, UploadFile, UploadListProgressProps, UploadListType, Upload
 export interface ListItemProps {
     prefixCls: string;
     className?: string;
+    motionDeadline?: number;
     style?: React.CSSProperties;
     locale: UploadLocale;
     file: UploadFile;

package/lib/upload/UploadList/ListItem.js

@@ -60,6 +60,8 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       actionIconRender = _ref.actionIconRender,
       itemRender = _ref.itemRender,
       isImgUrl = _ref.isImgUrl,
+      _ref$motionDeadline = _ref.motionDeadline,
+      motionDeadline = _ref$motionDeadline === void 0 ? 2000 : _ref$motionDeadline,
       showPreviewIcon = _ref.showPreviewIcon,
       showRemoveIcon = _ref.showRemoveIcon,
       showDownloadIcon = _ref.showDownloadIcon,
@@ -214,7 +216,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, iconAndPreview), actions, showProgress && /*#__PURE__*/React.createElement(_rcMotion["default"], {
     motionName: "".concat(rootPrefixCls, "-fade"),
     visible: file.status === 'uploading',
-    motionDeadline: 2000
+    motionDeadline: motionDeadline
   }, function (_ref2) {
     var motionClassName = _ref2.className;
     // show loading icon if upload progress listener is disabled

package/lib/upload/UploadList/index.js

@@ -119,6 +119,8 @@ var InternalUploadList = function InternalUploadList(_ref, ref) {
       downloadIcon = _ref.downloadIcon,
       uploadIcon = _ref.uploadIcon,
       progress = _ref.progress,
+      _ref$motionDeadline = _ref.motionDeadline,
+      motionDeadline = _ref$motionDeadline === void 0 ? 2000 : _ref$motionDeadline,
       appendAction = _ref.appendAction,
       itemRender = _ref.itemRender;
   var forceUpdate = (0, _useForceUpdate["default"])();
@@ -254,7 +256,7 @@ var InternalUploadList = function InternalUploadList(_ref, ref) {
   var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate'; // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
 
   var motionConfig = {
-    motionDeadline: 2000,
+    motionDeadline: motionDeadline,
     motionName: "".concat(prefixCls, "-").concat(animationDirection),
     keys: motionKeyList,
     motionAppear: motionAppear
@@ -307,7 +309,8 @@ var InternalUploadList = function InternalUploadList(_ref, ref) {
       onPreview: onInternalPreview,
       onDownload: onInternalDownload,
       onClose: onInternalClose,
-      onUpload: onInternalUpload
+      onUpload: onInternalUpload,
+      motionDeadline: motionDeadline
     });
   }));
 };
@@ -320,6 +323,7 @@ UploadList.defaultProps = {
     // showInfo: false
   },
   showUploadIcon: true,
+  motionDeadline: 2000,
   showRemoveIcon: true,
   showDownloadIcon: false,
   showPreviewIcon: true,

package/lib/upload/interface.d.ts

@@ -69,6 +69,7 @@ declare type BeforeUploadValueType = void | boolean | string | Blob | File;
 export interface UploadProps<T = any> {
     type?: UploadType;
     name?: string;
+    motionDeadline?: number;
     defaultFileList?: Array<UploadFile<T>>;
     fileList?: Array<UploadFile<T>>;
     action?: string | ((file: RcFile) => string) | ((file: RcFile) => PromiseLike<string>);
@@ -122,6 +123,7 @@ export interface UploadListProps<T = any> {
     items?: Array<UploadFile<T>>;
     progress?: UploadListProgressProps;
     prefixCls?: string;
+    motionDeadline?: number;
     showRemoveIcon?: boolean;
     showDownloadIcon?: boolean;
     showPreviewIcon?: boolean;

package/lib/upload/style/index.css

@@ -355,7 +355,7 @@
   position: relative;
   height: 66px;
   padding: 0;
-  border: 1px 1px #d9d9d9;
+  border: 1px solid #d9d9d9;
   border-radius: 0px;
 }
 .acud-upload-list-picture .acud-upload-list-item:hover,

package/lib/upload/style/index.less

@@ -321,7 +321,7 @@
             position: relative;
             height: 66px;
             padding: 0;
-            border: @border-width-base @upload-picture-card-border-style @border-color-base;
+            border: @border-width-base solid @border-color-base;
             border-radius: @border-radius-base;
 
             &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "acud",
-    "version": "0.0.70",
+    "version": "0.0.73",
     "description": "acg react 组件库",
     "main": "lib/index.js",
     "module": "es/index.js",