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

package/es/affix/scrollTo.js

@@ -0,0 +1,38 @@
+import raf from "rc-util/es/raf";
+import { easeInOutCubic } from "./easings";
+import getScroll, { isWindow } from "./getScroll";
+export default function scrollTo(y) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$getContainer = options.getContainer,
+      getContainer = _options$getContainer === void 0 ? function () {
+    return window;
+  } : _options$getContainer,
+      callback = options.callback,
+      _options$duration = options.duration,
+      duration = _options$duration === void 0 ? 450 : _options$duration;
+  var container = getContainer();
+  var scrollTop = getScroll(container, true);
+  var startTime = Date.now();
+
+  var frameFunc = function frameFunc() {
+    var timestamp = Date.now();
+    var time = timestamp - startTime;
+    var nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
+
+    if (isWindow(container)) {
+      container.scrollTo(window.pageXOffset, nextScrollTop);
+    } else if (container instanceof Document || container.constructor.name === 'HTMLDocument') {
+      container.documentElement.scrollTop = nextScrollTop;
+    } else {
+      container.scrollTop = nextScrollTop;
+    }
+
+    if (time < duration) {
+      raf(frameFunc);
+    } else if (typeof callback === 'function') {
+      callback();
+    }
+  };
+
+  raf(frameFunc);
+}

package/es/affix/statusUtils.d.ts

@@ -0,0 +1,6 @@
+import type { ValidateStatus } from '../form/FormItem';
+declare const InputStatuses: ["warning", "error", ""];
+export type InputStatus = typeof InputStatuses[number];
+export declare function getStatusClassNames(prefixCls: string, status?: ValidateStatus, hasFeedback?: boolean): string;
+export declare const getMergedStatus: (contextStatus?: ValidateStatus, customStatus?: InputStatus) => "" | "success" | "warning" | "error" | "validating" | undefined;
+export {};

package/es/affix/statusUtils.js

@@ -0,0 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import classNames from 'classnames';
+import { tuple } from "./type";
+var InputStatuses = tuple('warning', 'error', '');
+export function getStatusClassNames(prefixCls, status, hasFeedback) {
+  var _classNames;
+
+  return classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-status-success"), status === 'success'), _defineProperty(_classNames, "".concat(prefixCls, "-status-warning"), status === 'warning'), _defineProperty(_classNames, "".concat(prefixCls, "-status-error"), status === 'error'), _defineProperty(_classNames, "".concat(prefixCls, "-status-validating"), status === 'validating'), _defineProperty(_classNames, "".concat(prefixCls, "-has-feedback"), hasFeedback), _classNames));
+}
+export var getMergedStatus = function getMergedStatus(contextStatus, customStatus) {
+  return customStatus || contextStatus;
+};

package/es/affix/styleChecker.d.ts

@@ -0,0 +1,4 @@
+import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
+export declare const canUseDocElement: () => false | HTMLElement;
+export { isStyleSupport };
+export declare const detectFlexGapSupported: () => boolean;

package/es/affix/styleChecker.js

@@ -0,0 +1,31 @@
+import canUseDom from "rc-util/es/Dom/canUseDom";
+import { isStyleSupport } from "rc-util/es/Dom/styleChecker";
+export var canUseDocElement = function canUseDocElement() {
+  return canUseDom() && window.document.documentElement;
+};
+export { isStyleSupport };
+var flexGapSupported;
+export var detectFlexGapSupported = function detectFlexGapSupported() {
+  if (!canUseDocElement()) {
+    return false;
+  }
+
+  if (flexGapSupported !== undefined) {
+    return flexGapSupported;
+  } // create flex container with row-gap set
+
+
+  var flex = document.createElement('div');
+  flex.style.display = 'flex';
+  flex.style.flexDirection = 'column';
+  flex.style.rowGap = '1px'; // create two, elements inside it
+
+  flex.appendChild(document.createElement('div'));
+  flex.appendChild(document.createElement('div')); // append to the DOM (needed to obtain scrollHeight)
+
+  document.body.appendChild(flex);
+  flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+
+  document.body.removeChild(flex);
+  return flexGapSupported;
+};

package/es/affix/throttleByAnimationFrame.d.ts

@@ -0,0 +1,8 @@
+export declare function throttleByAnimationFrame<T extends unknown[]>(fn: (...args: T) => void): {
+    (...args: T): void;
+    cancel: () => void;
+};
+export declare function throttleByAnimationFrameDecorator(): (target: any, key: string, descriptor: any) => {
+    configurable: boolean;
+    get(): any;
+};

package/es/affix/throttleByAnimationFrame.js

@@ -0,0 +1,58 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import raf from "rc-util/es/raf";
+export function throttleByAnimationFrame(fn) {
+  var requestId;
+
+  var later = function later(args) {
+    return function () {
+      requestId = null;
+      fn.apply(void 0, _toConsumableArray(args));
+    };
+  };
+
+  var throttled = function throttled() {
+    if (requestId == null) {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      requestId = raf(later(args));
+    }
+  };
+
+  throttled.cancel = function () {
+    raf.cancel(requestId);
+    requestId = null;
+  };
+
+  return throttled;
+}
+export function throttleByAnimationFrameDecorator() {
+  return function throttle(target, key, descriptor) {
+    var fn = descriptor.value;
+    var definingProperty = false;
+    return {
+      configurable: true,
+      get: function get() {
+        // In IE11 calling Object.defineProperty has a side-effect of evaluating the
+        // getter for the property which is being replaced. This causes infinite
+        // recursion and an "Out of stack space" error.
+        // eslint-disable-next-line no-prototype-builtins
+        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
+          /* istanbul ignore next */
+          return fn;
+        }
+
+        var boundFn = throttleByAnimationFrame(fn.bind(this));
+        definingProperty = true;
+        Object.defineProperty(this, key, {
+          value: boundFn,
+          configurable: true,
+          writable: true
+        });
+        definingProperty = false;
+        return boundFn;
+      }
+    };
+  };
+}

package/es/affix/transButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+    noStyle?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+}
+declare const TransButton: React.ForwardRefExoticComponent<TransButtonProps & React.RefAttributes<HTMLDivElement>>;
+export default TransButton;

package/es/affix/transButton.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+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;
+};
+/**
+ * Wrap of sub component which need use as Button capacity (like Icon component).
+ *
+ * This helps accessibility reader to tread as a interactive button to operation.
+ */
+
+
+import KeyCode from "rc-util/es/KeyCode";
+import * as React from 'react';
+var inlineStyle = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  lineHeight: 'inherit',
+  display: 'inline-block'
+};
+var TransButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onKeyDown = function onKeyDown(event) {
+    var keyCode = event.keyCode;
+
+    if (keyCode === KeyCode.ENTER) {
+      event.preventDefault();
+    }
+  };
+
+  var onKeyUp = function onKeyUp(event) {
+    var keyCode = event.keyCode;
+    var onClick = props.onClick;
+
+    if (keyCode === KeyCode.ENTER && onClick) {
+      onClick();
+    }
+  };
+
+  var style = props.style,
+      noStyle = props.noStyle,
+      disabled = props.disabled,
+      restProps = __rest(props, ["style", "noStyle", "disabled"]);
+
+  var mergedStyle = {};
+
+  if (!noStyle) {
+    mergedStyle = _extends({}, inlineStyle);
+  }
+
+  if (disabled) {
+    mergedStyle.pointerEvents = 'none';
+  }
+
+  mergedStyle = _extends(_extends({}, mergedStyle), style);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "button",
+    tabIndex: 0,
+    ref: ref
+  }, restProps, {
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    style: mergedStyle
+  }));
+});
+export default TransButton;

package/es/affix/type.d.ts

@@ -0,0 +1,9 @@
+export declare const tuple: <T extends string[]>(...args: T) => T;
+export declare const tupleNum: <T extends number[]>(...args: T) => T;
+/**
+ * https://stackoverflow.com/a/59187769 Extract the type of an element of an array/tuple without
+ * performing indexing
+ */
+export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never;
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+export type LiteralUnion<T extends U, U> = T | (U & {});

package/es/affix/type.js

@@ -0,0 +1,15 @@
+// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
+export var tuple = function tuple() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return args;
+};
+export var tupleNum = function tupleNum() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  return args;
+};

package/es/affix/warning.d.ts

@@ -0,0 +1,6 @@
+import { resetWarned } from 'rc-util/lib/warning';
+export { resetWarned };
+export declare function noop(): void;
+type Warning = (valid: boolean, component: string, message?: string) => void;
+declare let warning: Warning;
+export default warning;

package/es/affix/warning.js

@@ -0,0 +1,17 @@
+import rcWarning, { resetWarned } from "rc-util/es/warning";
+export { resetWarned };
+export function noop() {} // eslint-disable-next-line import/no-mutable-exports
+
+var warning = noop;
+
+if (process.env.NODE_ENV !== 'production') {
+  warning = function warning(valid, component, message) {
+    rcWarning(valid, "[antd: ".concat(component, "] ").concat(message)); // StrictMode will inject console which will not throw warning in React 17.
+
+    if (process.env.NODE_ENV === 'test') {
+      resetWarned();
+    }
+  };
+}
+
+export default warning;

package/es/affix/wave.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ConfigConsumerProps } from '../config-provider';
+export interface WaveProps {
+    insertExtraNode?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+declare class Wave extends React.Component<WaveProps> {
+    static contextType: React.Context<ConfigConsumerProps>;
+    private instance?;
+    private containerRef;
+    private extraNode;
+    private clickWaveTimeoutId;
+    private animationStartId;
+    private animationStart;
+    private destroyed;
+    private csp?;
+    context: ConfigConsumerProps;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onClick: (node: HTMLElement, waveColor: string) => void;
+    onTransitionStart: (e: AnimationEvent) => void;
+    onTransitionEnd: (e: AnimationEvent) => void;
+    getAttributeName(): string;
+    bindAnimationEvent: (node?: HTMLElement) => {
+        cancel: () => void;
+    } | undefined;
+    resetEffect(node: HTMLElement): void;
+    renderWave: ({ csp }: ConfigConsumerProps) => string | number | boolean | React.ReactFragment | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
+    render(): JSX.Element;
+}
+export default Wave;

package/es/affix/wave.js

@@ -0,0 +1,247 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import { updateCSS } from "rc-util/es/Dom/dynamicCSS";
+import { composeRef, supportRef } from "rc-util/es/ref";
+import * as React from 'react';
+import { ConfigConsumer, ConfigContext } from "../config-provider";
+import raf from "./raf";
+import { cloneElement } from "./reactNode";
+var styleForPseudo; // Where el is the DOM element you'd like to test for visibility
+
+function isHidden(element) {
+  if (process.env.NODE_ENV === 'test') {
+    return false;
+  }
+
+  return !element || element.offsetParent === null || element.hidden;
+}
+
+function getValidateContainer(nodeRoot) {
+  if (nodeRoot instanceof Document) {
+    return nodeRoot.body;
+  }
+
+  return Array.from(nodeRoot.childNodes).find(function (ele) {
+    return (ele === null || ele === void 0 ? void 0 : ele.nodeType) === Node.ELEMENT_NODE;
+  });
+}
+
+function isNotGrey(color) {
+  // eslint-disable-next-line no-useless-escape
+  var match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/);
+
+  if (match && match[1] && match[2] && match[3]) {
+    return !(match[1] === match[2] && match[2] === match[3]);
+  }
+
+  return true;
+}
+
+var Wave = /*#__PURE__*/function (_React$Component) {
+  _inherits(Wave, _React$Component);
+
+  var _super = _createSuper(Wave);
+
+  function Wave() {
+    var _this;
+
+    _classCallCheck(this, Wave);
+
+    _this = _super.apply(this, arguments);
+    _this.containerRef = /*#__PURE__*/React.createRef();
+    _this.animationStart = false;
+    _this.destroyed = false;
+
+    _this.onClick = function (node, waveColor) {
+      var _a, _b;
+
+      var _this$props = _this.props,
+          insertExtraNode = _this$props.insertExtraNode,
+          disabled = _this$props.disabled;
+
+      if (disabled || !node || isHidden(node) || node.className.includes('-leave')) {
+        return;
+      }
+
+      _this.extraNode = document.createElement('div');
+
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          extraNode = _assertThisInitialize.extraNode;
+
+      var getPrefixCls = _this.context.getPrefixCls;
+      extraNode.className = "".concat(getPrefixCls(''), "-click-animating-node");
+
+      var attributeName = _this.getAttributeName();
+
+      node.setAttribute(attributeName, 'true'); // Not white or transparent or grey
+
+      if (waveColor && waveColor !== '#fff' && waveColor !== '#ffffff' && waveColor !== 'rgb(255, 255, 255)' && waveColor !== 'rgba(255, 255, 255, 1)' && isNotGrey(waveColor) && !/rgba\((?:\d*, ){3}0\)/.test(waveColor) && // any transparent rgba color
+      waveColor !== 'transparent') {
+        extraNode.style.borderColor = waveColor;
+        var nodeRoot = ((_a = node.getRootNode) === null || _a === void 0 ? void 0 : _a.call(node)) || node.ownerDocument;
+        var nodeBody = (_b = getValidateContainer(nodeRoot)) !== null && _b !== void 0 ? _b : nodeRoot;
+        styleForPseudo = updateCSS("\n      [".concat(getPrefixCls(''), "-click-animating-without-extra-node='true']::after, .").concat(getPrefixCls(''), "-click-animating-node {\n        --antd-wave-shadow-color: ").concat(waveColor, ";\n      }"), 'antd-wave', {
+          csp: _this.csp,
+          attachTo: nodeBody
+        });
+      }
+
+      if (insertExtraNode) {
+        node.appendChild(extraNode);
+      }
+
+      ['transition', 'animation'].forEach(function (name) {
+        node.addEventListener("".concat(name, "start"), _this.onTransitionStart);
+        node.addEventListener("".concat(name, "end"), _this.onTransitionEnd);
+      });
+    };
+
+    _this.onTransitionStart = function (e) {
+      if (_this.destroyed) {
+        return;
+      }
+
+      var node = _this.containerRef.current;
+
+      if (!e || e.target !== node || _this.animationStart) {
+        return;
+      }
+
+      _this.resetEffect(node);
+    };
+
+    _this.onTransitionEnd = function (e) {
+      if (!e || e.animationName !== 'fadeEffect') {
+        return;
+      }
+
+      _this.resetEffect(e.target);
+    };
+
+    _this.bindAnimationEvent = function (node) {
+      if (!node || !node.getAttribute || node.getAttribute('disabled') || node.className.includes('disabled')) {
+        return;
+      }
+
+      var onClick = function onClick(e) {
+        // Fix radio button click twice
+        if (e.target.tagName === 'INPUT' || isHidden(e.target)) {
+          return;
+        }
+
+        _this.resetEffect(node); // Get wave color from target
+
+
+        var waveColor = getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
+        getComputedStyle(node).getPropertyValue('border-color') || getComputedStyle(node).getPropertyValue('background-color');
+        _this.clickWaveTimeoutId = window.setTimeout(function () {
+          return _this.onClick(node, waveColor);
+        }, 0);
+        raf.cancel(_this.animationStartId);
+        _this.animationStart = true; // Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
+
+        _this.animationStartId = raf(function () {
+          _this.animationStart = false;
+        }, 10);
+      };
+
+      node.addEventListener('click', onClick, true);
+      return {
+        cancel: function cancel() {
+          node.removeEventListener('click', onClick, true);
+        }
+      };
+    };
+
+    _this.renderWave = function (_ref) {
+      var csp = _ref.csp;
+      var children = _this.props.children;
+      _this.csp = csp;
+      if (! /*#__PURE__*/React.isValidElement(children)) return children;
+      var ref = _this.containerRef;
+
+      if (supportRef(children)) {
+        ref = composeRef(children.ref, _this.containerRef);
+      }
+
+      return cloneElement(children, {
+        ref: ref
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(Wave, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.destroyed = false;
+      var node = this.containerRef.current;
+
+      if (!node || node.nodeType !== 1) {
+        return;
+      }
+
+      this.instance = this.bindAnimationEvent(node);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.instance) {
+        this.instance.cancel();
+      }
+
+      if (this.clickWaveTimeoutId) {
+        clearTimeout(this.clickWaveTimeoutId);
+      }
+
+      this.destroyed = true;
+    }
+  }, {
+    key: "getAttributeName",
+    value: function getAttributeName() {
+      var getPrefixCls = this.context.getPrefixCls;
+      var insertExtraNode = this.props.insertExtraNode;
+      return insertExtraNode ? "".concat(getPrefixCls(''), "-click-animating") : "".concat(getPrefixCls(''), "-click-animating-without-extra-node");
+    }
+  }, {
+    key: "resetEffect",
+    value: function resetEffect(node) {
+      var _this2 = this;
+
+      if (!node || node === this.extraNode || !(node instanceof Element)) {
+        return;
+      }
+
+      var insertExtraNode = this.props.insertExtraNode;
+      var attributeName = this.getAttributeName();
+      node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
+
+      if (styleForPseudo) {
+        styleForPseudo.innerHTML = '';
+      }
+
+      if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
+        node.removeChild(this.extraNode);
+      }
+
+      ['transition', 'animation'].forEach(function (name) {
+        node.removeEventListener("".concat(name, "start"), _this2.onTransitionStart);
+        node.removeEventListener("".concat(name, "end"), _this2.onTransitionEnd);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderWave);
+    }
+  }]);
+
+  return Wave;
+}(React.Component);
+
+Wave.contextType = ConfigContext;
+export default Wave;

package/es/alert/ErrorBoundary.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface ErrorBoundaryProps {
+    message?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+}
+interface ErrorBoundaryStates {
+    error?: Error | null;
+    info?: {
+        componentStack?: string;
+    };
+}
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryStates> {
+    state: {
+        error: undefined;
+        info: {
+            componentStack: string;
+        };
+    };
+    componentDidCatch(error: Error | null, info: object): void;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+}
+export default ErrorBoundary;

package/es/alert/ErrorBoundary.js

@@ -0,0 +1,65 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import * as React from 'react';
+import Alert from '.';
+
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    _this = _super.apply(this, arguments);
+    _this.state = {
+      error: undefined,
+      info: {
+        componentStack: ''
+      }
+    };
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      this.setState({
+        error: error,
+        info: info
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          message = _this$props.message,
+          description = _this$props.description,
+          children = _this$props.children;
+      var _this$state = this.state,
+          error = _this$state.error,
+          info = _this$state.info;
+      var componentStack = info && info.componentStack ? info.componentStack : null;
+      var errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
+      var errorDescription = typeof description === 'undefined' ? componentStack : description;
+
+      if (error) {
+        return /*#__PURE__*/React.createElement(Alert, {
+          type: "error",
+          message: errorMessage,
+          description: /*#__PURE__*/React.createElement("pre", null, errorDescription)
+        });
+      }
+
+      return children;
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React.Component);
+
+export default ErrorBoundary;