@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

package/es/input/TextArea.js

@@ -0,0 +1,250 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import classNames from 'classnames';
+import RcTextArea from 'rc-textarea';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import omit from "rc-util/es/omit";
+import * as React from 'react';
+import { ConfigContext } from "../config-provider";
+import DisabledContext from "../config-provider/DisabledContext";
+import SizeContext from "../config-provider/SizeContext";
+import { FormItemInputContext } from "../form/context";
+import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils";
+import ClearableLabeledInput from "./ClearableLabeledInput";
+import { fixControlledValue, resolveOnChange, triggerFocus } from "./Input";
+
+function fixEmojiLength(value, maxLength) {
+  return _toConsumableArray(value || '').slice(0, maxLength).join('');
+}
+
+function setTriggerValue(isCursorInEnd, preValue, triggerValue, maxLength) {
+  var newTriggerValue = triggerValue;
+
+  if (isCursorInEnd) {
+    // 光标在尾部，直接截断
+    newTriggerValue = fixEmojiLength(triggerValue, maxLength);
+  } else if (_toConsumableArray(preValue || '').length < triggerValue.length && _toConsumableArray(triggerValue || '').length > maxLength) {
+    // 光标在中间，如果最后的值超过最大值，则采用原先的值
+    newTriggerValue = preValue;
+  }
+
+  return newTriggerValue;
+}
+
+var TextArea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _classNames;
+
+  var customizePrefixCls = _a.prefixCls,
+      _a$bordered = _a.bordered,
+      bordered = _a$bordered === void 0 ? true : _a$bordered,
+      _a$showCount = _a.showCount,
+      showCount = _a$showCount === void 0 ? false : _a$showCount,
+      maxLength = _a.maxLength,
+      className = _a.className,
+      style = _a.style,
+      customizeSize = _a.size,
+      customDisabled = _a.disabled,
+      onCompositionStart = _a.onCompositionStart,
+      onCompositionEnd = _a.onCompositionEnd,
+      onChange = _a.onChange,
+      customStatus = _a.status,
+      props = __rest(_a, ["prefixCls", "bordered", "showCount", "maxLength", "className", "style", "size", "disabled", "onCompositionStart", "onCompositionEnd", "onChange", "status"]);
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var size = React.useContext(SizeContext); // ===================== Disabled =====================
+
+  var disabled = React.useContext(DisabledContext);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+
+  var _React$useContext2 = React.useContext(FormItemInputContext),
+      contextStatus = _React$useContext2.status,
+      hasFeedback = _React$useContext2.hasFeedback,
+      isFormItemInput = _React$useContext2.isFormItemInput,
+      feedbackIcon = _React$useContext2.feedbackIcon;
+
+  var mergedStatus = getMergedStatus(contextStatus, customStatus);
+  var innerRef = React.useRef(null);
+  var clearableInputRef = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      compositing = _React$useState2[0],
+      setCompositing = _React$useState2[1];
+
+  var oldCompositionValueRef = React.useRef();
+  var oldSelectionStartRef = React.useRef(0);
+
+  var _useMergedState = useMergedState(props.defaultValue, {
+    value: props.value
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      value = _useMergedState2[0],
+      setValue = _useMergedState2[1];
+
+  var hidden = props.hidden;
+
+  var handleSetValue = function handleSetValue(val, callback) {
+    if (props.value === undefined) {
+      setValue(val);
+      callback === null || callback === void 0 ? void 0 : callback();
+    }
+  }; // =========================== Value Update ===========================
+  // Max length value
+
+
+  var hasMaxLength = Number(maxLength) > 0;
+
+  var onInternalCompositionStart = function onInternalCompositionStart(e) {
+    setCompositing(true); // 拼音输入前保存一份旧值
+
+    oldCompositionValueRef.current = value; // 保存旧的光标位置
+
+    oldSelectionStartRef.current = e.currentTarget.selectionStart;
+    onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
+  };
+
+  var onInternalCompositionEnd = function onInternalCompositionEnd(e) {
+    var _a;
+
+    setCompositing(false);
+    var triggerValue = e.currentTarget.value;
+
+    if (hasMaxLength) {
+      var isCursorInEnd = oldSelectionStartRef.current >= maxLength + 1 || oldSelectionStartRef.current === ((_a = oldCompositionValueRef.current) === null || _a === void 0 ? void 0 : _a.length);
+      triggerValue = setTriggerValue(isCursorInEnd, oldCompositionValueRef.current, triggerValue, maxLength);
+    } // Patch composition onChange when value changed
+
+
+    if (triggerValue !== value) {
+      handleSetValue(triggerValue);
+      resolveOnChange(e.currentTarget, e, onChange, triggerValue);
+    }
+
+    onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
+  };
+
+  var handleChange = function handleChange(e) {
+    var triggerValue = e.target.value;
+
+    if (!compositing && hasMaxLength) {
+      // 1. 复制粘贴超过maxlength的情况 2.未超过maxlength的情况
+      var isCursorInEnd = e.target.selectionStart >= maxLength + 1 || e.target.selectionStart === triggerValue.length || !e.target.selectionStart;
+      triggerValue = setTriggerValue(isCursorInEnd, value, triggerValue, maxLength);
+    }
+
+    handleSetValue(triggerValue);
+    resolveOnChange(e.currentTarget, e, onChange, triggerValue);
+  }; // ============================== Reset ===============================
+
+
+  var handleReset = function handleReset(e) {
+    var _a, _b, _c;
+
+    handleSetValue('');
+    (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    resolveOnChange((_c = (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.resizableTextArea) === null || _c === void 0 ? void 0 : _c.textArea, e, onChange);
+  };
+
+  var prefixCls = getPrefixCls('input', customizePrefixCls);
+  React.useImperativeHandle(ref, function () {
+    var _a;
+
+    return {
+      resizableTextArea: (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea,
+      focus: function focus(option) {
+        var _a, _b;
+
+        triggerFocus((_b = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea, option);
+      },
+      blur: function blur() {
+        var _a;
+
+        return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    };
+  });
+  var textArea = /*#__PURE__*/React.createElement(RcTextArea, _extends({}, omit(props, ['allowClear']), {
+    disabled: mergedDisabled,
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-borderless"), !bordered), _defineProperty(_classNames, className, className && !showCount), _defineProperty(_classNames, "".concat(prefixCls, "-sm"), size === 'small' || customizeSize === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "-lg"), size === 'large' || customizeSize === 'large'), _classNames), getStatusClassNames(prefixCls, mergedStatus)),
+    style: showCount ? {
+      resize: style === null || style === void 0 ? void 0 : style.resize
+    } : style,
+    prefixCls: prefixCls,
+    onCompositionStart: onInternalCompositionStart,
+    onChange: handleChange,
+    onCompositionEnd: onInternalCompositionEnd,
+    ref: innerRef
+  }));
+  var val = fixControlledValue(value);
+
+  if (!compositing && hasMaxLength && (props.value === null || props.value === undefined)) {
+    // fix #27612 将value转为数组进行截取，解决 '😂'.length === 2 等emoji表情导致的截取乱码的问题
+    val = fixEmojiLength(val, maxLength);
+  } // TextArea
+
+
+  var textareaNode = /*#__PURE__*/React.createElement(ClearableLabeledInput, _extends({
+    disabled: mergedDisabled
+  }, props, {
+    prefixCls: prefixCls,
+    direction: direction,
+    inputType: "text",
+    value: val,
+    element: textArea,
+    handleReset: handleReset,
+    ref: clearableInputRef,
+    bordered: bordered,
+    status: customStatus,
+    style: showCount ? undefined : style
+  })); // Only show text area wrapper when needed
+
+  if (showCount || hasFeedback) {
+    var _classNames2;
+
+    var valueLength = _toConsumableArray(val).length;
+
+    var dataCount = '';
+
+    if (_typeof(showCount) === 'object') {
+      dataCount = showCount.formatter({
+        value: val,
+        count: valueLength,
+        maxLength: maxLength
+      });
+    } else {
+      dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(maxLength) : '');
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      hidden: hidden,
+      className: classNames("".concat(prefixCls, "-textarea"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-textarea-rtl"), direction === 'rtl'), _defineProperty(_classNames2, "".concat(prefixCls, "-textarea-show-count"), showCount), _defineProperty(_classNames2, "".concat(prefixCls, "-textarea-in-form-item"), isFormItemInput), _classNames2), getStatusClassNames("".concat(prefixCls, "-textarea"), mergedStatus, hasFeedback), className),
+      style: style,
+      "data-count": dataCount
+    }, textareaNode, hasFeedback && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-textarea-suffix")
+    }, feedbackIcon));
+  }
+
+  return textareaNode;
+});
+export default TextArea;

package/es/input/hooks/useRemovePasswordTimeout.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { InputRef } from '../Input';
+export default function useRemovePasswordTimeout(inputRef: React.RefObject<InputRef>, triggerOnMount?: boolean): () => void;

package/es/input/hooks/useRemovePasswordTimeout.js

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+export default function useRemovePasswordTimeout(inputRef, triggerOnMount) {
+  var removePasswordTimeoutRef = useRef([]);
+
+  var removePasswordTimeout = function removePasswordTimeout() {
+    removePasswordTimeoutRef.current.push(setTimeout(function () {
+      var _a, _b, _c, _d;
+
+      if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input) && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.input.getAttribute('type')) === 'password' && ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.input.hasAttribute('value'))) {
+        (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.input.removeAttribute('value');
+      }
+    }));
+  };
+
+  useEffect(function () {
+    if (triggerOnMount) {
+      removePasswordTimeout();
+    }
+
+    return function () {
+      return removePasswordTimeoutRef.current.forEach(function (timer) {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      });
+    };
+  }, []);
+  return removePasswordTimeout;
+}

package/es/input/index.d.ts

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import Group from './Group';
+import type { InputProps, InputRef } from './Input';
+import Password from './Password';
+import Search from './Search';
+import TextArea from './TextArea';
+export { GroupProps } from './Group';
+export { InputProps, InputRef } from './Input';
+export { PasswordProps } from './Password';
+export { SearchProps } from './Search';
+export { TextAreaProps } from './TextArea';
+interface CompoundedComponent extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> {
+    Group: typeof Group;
+    Search: typeof Search;
+    TextArea: typeof TextArea;
+    Password: typeof Password;
+}
+declare const Input: CompoundedComponent;
+export default Input;

package/es/input/index.js

@@ -0,0 +1,11 @@
+import Group from "./Group";
+import InternalInput from "./Input";
+import Password from "./Password";
+import Search from "./Search";
+import TextArea from "./TextArea";
+var Input = InternalInput;
+Input.Group = Group;
+Input.Search = Search;
+Input.TextArea = TextArea;
+Input.Password = Password;
+export default Input;

package/es/input/style/IE11.less

@@ -0,0 +1,20 @@
+// Fix Input component height issue in IE11
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .@{ant-prefix}-input {
+    height: @input-height-base;
+
+    &-lg {
+      height: @input-height-lg;
+    }
+
+    &-sm {
+      height: @input-height-sm;
+    }
+
+    &-affix-wrapper {
+      > input.@{ant-prefix}-input {
+        height: auto;
+      }
+    }
+  }
+}

package/es/input/style/affix.less

@@ -0,0 +1,78 @@
+@import './mixin';
+@import (reference) '../../style/themes/index';
+@input-prefix-cls: ~'@{ant-prefix}-input';
+
+@input-affix-margin: 4px;
+
+.@{ant-prefix}-input {
+  &-affix-wrapper {
+    .input();
+    display: inline-flex;
+
+    &:not(&-disabled):hover {
+      .hover();
+      z-index: 1;
+      .@{ant-prefix}-input-search-with-button & {
+        z-index: 0;
+      }
+    }
+
+    &-focused,
+    &:focus {
+      z-index: 1;
+    }
+
+    &-disabled {
+      .@{ant-prefix}-input[disabled] {
+        background: transparent;
+      }
+    }
+
+    > .@{ant-prefix}-input {
+      font-size: inherit;
+      border: none;
+      outline: none;
+
+      &:focus {
+        box-shadow: none !important;
+      }
+
+      &:not(textarea) {
+        padding: 0;
+      }
+    }
+
+    &::before {
+      width: 0;
+      visibility: hidden;
+      content: '\a0';
+    }
+  }
+
+  &-prefix,
+  &-suffix {
+    display: flex;
+    flex: none;
+    align-items: center;
+
+    > *:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+
+  &-show-count-suffix {
+    color: @text-color-secondary;
+  }
+
+  &-show-count-has-suffix {
+    margin-right: 2px;
+  }
+
+  &-prefix {
+    margin-right: @input-affix-margin;
+  }
+
+  &-suffix {
+    margin-left: @input-affix-margin;
+  }
+}

package/es/input/style/allow-clear.less

@@ -0,0 +1,43 @@
+@import (reference) '../../style/themes/index';
+@input-prefix-cls: ~'@{ant-prefix}-input';
+
+// ========================= Input =========================
+.@{iconfont-css-prefix}.@{input-prefix-cls}-clear-icon,
+.@{input-prefix-cls}-clear-icon {
+  margin: 0;
+  color: @disabled-color;
+  font-size: @font-size-sm;
+  vertical-align: -1px;
+  // https://github.com/ant-design/ant-design/pull/18151
+  // https://codesandbox.io/s/wizardly-sun-u10br
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: @text-color-secondary;
+  }
+
+  &:active {
+    color: @text-color;
+  }
+
+  &-hidden {
+    visibility: hidden;
+  }
+
+  &-has-suffix {
+    margin: 0 @input-affix-margin;
+  }
+}
+
+// ======================= TextArea ========================
+.@{input-prefix-cls}-affix-wrapper.@{input-prefix-cls}-affix-wrapper-textarea-with-clear-btn {
+  padding: 0;
+
+  .@{input-prefix-cls}-clear-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 1;
+  }
+}

package/es/input/style/css.js

@@ -0,0 +1,5 @@
+import "../../style/default.css";
+import "./index.css"; // deps-lint-skip: form, space
+// style dependencies
+
+import "../../button/style/css";

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

@@ -0,0 +1,88 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './mixin';
+@import './affix';
+@import './allow-clear';
+@import './status';
+@input-prefix-cls: ~'@{ant-prefix}-input';
+
+// Input styles
+.@{input-prefix-cls} {
+  .reset-component();
+  .input();
+
+  //== Style for input-group: input with label, with button or dropdown...
+  &-group {
+    .reset-component();
+    .input-group(~'@{input-prefix-cls}');
+
+    &-wrapper {
+      display: inline-block;
+      width: 100%;
+      text-align: start;
+      vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
+    }
+  }
+
+  &-password-icon.@{iconfont-css-prefix} {
+    color: @text-color-secondary;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @input-icon-hover-color;
+    }
+  }
+
+  &[type='color'] {
+    height: @input-height-base;
+
+    &.@{input-prefix-cls}-lg {
+      height: @input-height-lg;
+    }
+    &.@{input-prefix-cls}-sm {
+      height: @input-height-sm;
+      padding-top: 3px;
+      padding-bottom: 3px;
+    }
+  }
+
+  &-textarea-show-count {
+    // https://github.com/ant-design/ant-design/issues/33049
+    > .@{input-prefix-cls} {
+      height: 100%;
+    }
+
+    &::after {
+      float: right;
+      color: @text-color-secondary;
+      white-space: nowrap;
+      content: attr(data-count);
+      pointer-events: none;
+    }
+
+    &.@{input-prefix-cls}-textarea-in-form-item {
+      &::after {
+        margin-bottom: -22px;
+      }
+    }
+  }
+
+  &-textarea-suffix {
+    position: absolute;
+    top: 0;
+    right: @input-padding-horizontal-base;
+    bottom: 0;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    margin: auto;
+  }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@input-prefix-cls);
+}
+
+@import './search-input';
+@import './rtl';
+@import './IE11';