@fle-ui/next 3.0.0-alpha.0 → 3.0.0-alpha.2

package/es/_util/ActionButton.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { ButtonProps, LegacyButtonType } from '../button/button';
+export interface ActionButtonProps {
+    type?: LegacyButtonType;
+    actionFn?: (...args: any[]) => any | PromiseLike<any>;
+    close?: Function;
+    autoFocus?: boolean;
+    prefixCls: string;
+    buttonProps?: ButtonProps;
+    emitEvent?: boolean;
+    quitOnNullishReturnValue?: boolean;
+    children?: React.ReactNode;
+}
+declare const ActionButton: React.FC<ActionButtonProps>;
+export default ActionButton;

package/es/_util/ActionButton.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import useState from "rc-util/es/hooks/useState";
+import * as React from 'react';
+import Button from "../button";
+import { convertLegacyProps } from "../button/button";
+
+function isThenable(thing) {
+  return !!(thing && !!thing.then);
+}
+
+var ActionButton = function ActionButton(props) {
+  var clickedRef = React.useRef(false);
+  var ref = React.useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var close = props.close;
+
+  var onInternalClose = function onInternalClose() {
+    close === null || close === void 0 ? void 0 : close.apply(void 0, arguments);
+  };
+
+  React.useEffect(function () {
+    var timeoutId = null;
+
+    if (props.autoFocus) {
+      timeoutId = setTimeout(function () {
+        var _a;
+
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+    }
+
+    return function () {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+
+  var handlePromiseOnOk = function handlePromiseOnOk(returnValueOfOnOk) {
+    if (!isThenable(returnValueOfOnOk)) {
+      return;
+    }
+
+    setLoading(true);
+    returnValueOfOnOk.then(function () {
+      setLoading(false, true);
+      onInternalClose.apply(void 0, arguments);
+      clickedRef.current = false;
+    }, function (e) {
+      // Emit error when catch promise reject
+      // eslint-disable-next-line no-console
+      console.error(e); // See: https://github.com/ant-design/ant-design/issues/6183
+
+      setLoading(false, true);
+      clickedRef.current = false;
+    });
+  };
+
+  var onClick = function onClick(e) {
+    var actionFn = props.actionFn;
+
+    if (clickedRef.current) {
+      return;
+    }
+
+    clickedRef.current = true;
+
+    if (!actionFn) {
+      onInternalClose();
+      return;
+    }
+
+    var returnValueOfOnOk;
+
+    if (props.emitEvent) {
+      returnValueOfOnOk = actionFn(e);
+
+      if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
+        clickedRef.current = false;
+        onInternalClose(e);
+        return;
+      }
+    } else if (actionFn.length) {
+      returnValueOfOnOk = actionFn(close); // https://github.com/ant-design/ant-design/issues/23358
+
+      clickedRef.current = false;
+    } else {
+      returnValueOfOnOk = actionFn();
+
+      if (!returnValueOfOnOk) {
+        onInternalClose();
+        return;
+      }
+    }
+
+    handlePromiseOnOk(returnValueOfOnOk);
+  };
+
+  var type = props.type,
+      children = props.children,
+      prefixCls = props.prefixCls,
+      buttonProps = props.buttonProps;
+  return /*#__PURE__*/React.createElement(Button, _extends({}, convertLegacyProps(type), {
+    onClick: onClick,
+    loading: loading,
+    prefixCls: prefixCls
+  }, buttonProps, {
+    ref: ref
+  }), children);
+};
+
+export default ActionButton;

package/es/_util/PurePanel.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface BaseProps {
+    prefixCls?: string;
+    style?: React.CSSProperties;
+}
+export default function genPurePanel<ComponentProps extends BaseProps>(Component: any, defaultPrefixCls?: string, getDropdownCls?: (prefixCls: string) => string): any;

package/es/_util/PurePanel.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import * as React from 'react';
+import ConfigProvider, { ConfigContext } from "../config-provider";
+/* istanbul ignore next */
+
+export default function genPurePanel(Component, defaultPrefixCls, getDropdownCls) {
+  return function PurePanel(props) {
+    var customizePrefixCls = props.prefixCls,
+        style = props.style;
+    var holderRef = React.useRef(null);
+
+    var _React$useState = React.useState(0),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        popupHeight = _React$useState2[0],
+        setPopupHeight = _React$useState2[1];
+
+    var _React$useState3 = React.useState(0),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        popupWidth = _React$useState4[0],
+        setPopupWidth = _React$useState4[1];
+
+    var _useMergedState = useMergedState(false, {
+      value: props.open
+    }),
+        _useMergedState2 = _slicedToArray(_useMergedState, 2),
+        open = _useMergedState2[0],
+        setOpen = _useMergedState2[1];
+
+    var _React$useContext = React.useContext(ConfigContext),
+        getPrefixCls = _React$useContext.getPrefixCls;
+
+    var prefixCls = getPrefixCls(defaultPrefixCls || 'select', customizePrefixCls);
+    React.useEffect(function () {
+      // We do not care about ssr
+      setOpen(true);
+
+      if (typeof ResizeObserver !== 'undefined') {
+        var resizeObserver = new ResizeObserver(function (entries) {
+          var element = entries[0].target;
+          setPopupHeight(element.offsetHeight + 8);
+          setPopupWidth(element.offsetWidth);
+        });
+        var interval = setInterval(function () {
+          var _a;
+
+          var dropdownCls = getDropdownCls ? "." + getDropdownCls(prefixCls) : "." + prefixCls + "-dropdown";
+          var popup = (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(dropdownCls);
+
+          if (popup) {
+            clearInterval(interval);
+            resizeObserver.observe(popup);
+          }
+        }, 10);
+        return function () {
+          clearInterval(interval);
+          resizeObserver.disconnect();
+        };
+      }
+    }, []);
+    return /*#__PURE__*/React.createElement(ConfigProvider, {
+      theme: {
+        token: {
+          motionDurationFast: '0.01s',
+          motionDurationMid: '0.01s',
+          motionDurationSlow: '0.01s'
+        }
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: holderRef,
+      style: {
+        paddingBottom: popupHeight,
+        position: 'relative',
+        width: 'fit-content',
+        minWidth: popupWidth
+      }
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      style: _extends(_extends({}, style), {
+        margin: 0
+      }),
+      open: open,
+      visible: open,
+      getPopupContainer: function getPopupContainer() {
+        return holderRef.current;
+      }
+    }))));
+  };
+}

package/es/_util/capitalize.d.ts

@@ -0,0 +1 @@
+export default function capitalize<T extends string>(str: T): Capitalize<T>;

package/es/_util/capitalize.js

@@ -0,0 +1,8 @@
+export default function capitalize(str) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+
+  var ret = str.charAt(0).toUpperCase() + str.slice(1);
+  return ret;
+}

package/es/_util/colors.d.ts

@@ -0,0 +1,5 @@
+import type { ElementOf } from './type';
+export declare const PresetStatusColorTypes: ["success", "processing", "error", "default", "warning"];
+export declare const PresetColorTypes: ["pink", "red", "yellow", "orange", "cyan", "green", "blue", "purple", "geekblue", "magenta", "volcano", "gold", "lime"];
+export type PresetColorType = ElementOf<typeof PresetColorTypes>;
+export type PresetStatusColorType = ElementOf<typeof PresetStatusColorTypes>;

package/es/_util/colors.js

@@ -0,0 +1,4 @@
+import { tuple } from "./type";
+export var PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning'); // eslint-disable-next-line import/prefer-default-export
+
+export var PresetColorTypes = tuple('pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime');

package/es/_util/easings.d.ts

@@ -0,0 +1 @@
+export declare function easeInOutCubic(t: number, b: number, c: number, d: number): number;

package/es/_util/easings.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/prefer-default-export
+export function easeInOutCubic(t, b, c, d) {
+  var cc = c - b;
+  t /= d / 2;
+
+  if (t < 1) {
+    return cc / 2 * t * t * t + b;
+  } // eslint-disable-next-line no-return-assign
+
+
+  return cc / 2 * ((t -= 2) * t * t + 2) + b;
+}

package/es/_util/getDataOrAriaProps.d.ts

@@ -0,0 +1 @@
+export default function getDataOrAriaProps(props: any): any;

package/es/_util/getDataOrAriaProps.js

@@ -0,0 +1,9 @@
+export default function getDataOrAriaProps(props) {
+  return Object.keys(props).reduce(function (prev, key) {
+    if ((key.startsWith('data-') || key.startsWith('aria-') || key === 'role') && !key.startsWith('data-__')) {
+      prev[key] = props[key];
+    }
+
+    return prev;
+  }, {});
+}

package/es/_util/getRenderPropValue.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+export type RenderFunction = () => React.ReactNode;
+export declare const getRenderPropValue: (propValue?: React.ReactNode | RenderFunction) => React.ReactNode;

package/es/_util/getRenderPropValue.js

@@ -0,0 +1,11 @@
+export var getRenderPropValue = function getRenderPropValue(propValue) {
+  if (!propValue) {
+    return null;
+  }
+
+  if (typeof propValue === 'function') {
+    return propValue();
+  }
+
+  return propValue;
+};

package/es/_util/getScroll.d.ts

@@ -0,0 +1,2 @@
+export declare function isWindow(obj: any): obj is Window;
+export default function getScroll(target: HTMLElement | Window | Document | null, top: boolean): number;

package/es/_util/getScroll.js

@@ -0,0 +1,34 @@
+export function isWindow(obj) {
+  return obj !== null && obj !== undefined && obj === obj.window;
+}
+export default function getScroll(target, top) {
+  var _a, _b;
+
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
+  var method = top ? 'scrollTop' : 'scrollLeft';
+  var result = 0;
+
+  if (isWindow(target)) {
+    result = target[top ? 'pageYOffset' : 'pageXOffset'];
+  } else if (target instanceof Document) {
+    result = target.documentElement[method];
+  } else if (target instanceof HTMLElement) {
+    result = target[method];
+  } else if (target) {
+    // According to the type inference, the `target` is `never` type.
+    // Since we configured the loose mode type checking, and supports mocking the target with such shape below::
+    //    `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
+    //    the program may falls into this branch.
+    // Check the corresponding tests for details. Don't sure what is the real scenario this happens.
+    result = target[method];
+  }
+
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = (_b = ((_a = target.ownerDocument) !== null && _a !== void 0 ? _a : target).documentElement) === null || _b === void 0 ? void 0 : _b[method];
+  }
+
+  return result;
+}

package/es/_util/hooks/useFlexGapSupport.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => boolean;
+export default _default;

package/es/_util/hooks/useFlexGapSupport.js

@@ -0,0 +1,14 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { detectFlexGapSupported } from "../styleChecker";
+export default (function () {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      flexible = _React$useState2[0],
+      setFlexible = _React$useState2[1];
+
+  React.useEffect(function () {
+    setFlexible(detectFlexGapSupported());
+  }, []);
+  return flexible;
+});

package/es/_util/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useForceUpdate(): React.DispatchWithoutAction;

package/es/_util/hooks/useForceUpdate.js

@@ -0,0 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+export default function useForceUpdate() {
+  var _React$useReducer = React.useReducer(function (x) {
+    return x + 1;
+  }, 0),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      forceUpdate = _React$useReducer2[1];
+
+  return forceUpdate;
+}

package/es/_util/hooks/usePatchElement.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export default function usePatchElement(): [
+    React.ReactElement[],
+    (element: React.ReactElement) => Function
+];

package/es/_util/hooks/usePatchElement.js

@@ -0,0 +1,26 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+export default function usePatchElement() {
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      elements = _React$useState2[0],
+      setElements = _React$useState2[1];
+
+  var patchElement = React.useCallback(function (element) {
+    // append a new element to elements (and create a new ref)
+    setElements(function (originElements) {
+      return [].concat(_toConsumableArray(originElements), [element]);
+    }); // return a function that removes the new element out of elements (and create a new ref)
+    // it works a little like useEffect
+
+    return function () {
+      setElements(function (originElements) {
+        return originElements.filter(function (ele) {
+          return ele !== element;
+        });
+      });
+    };
+  }, []);
+  return [elements, patchElement];
+}

package/es/_util/hooks/useSyncState.d.ts

@@ -0,0 +1,3 @@
+type UseSyncStateProps<T> = readonly [() => T, (newValue: T) => void];
+export default function useSyncState<T>(initialValue: T): UseSyncStateProps<T>;
+export {};

package/es/_util/hooks/useSyncState.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import useForceUpdate from "./useForceUpdate";
+export default function useSyncState(initialValue) {
+  var ref = React.useRef(initialValue);
+  var forceUpdate = useForceUpdate();
+  return [function () {
+    return ref.current;
+  }, function (newValue) {
+    ref.current = newValue; // re-render
+
+    forceUpdate();
+  }];
+}

package/es/_util/isNumeric.d.ts

@@ -0,0 +1,2 @@
+declare const isNumeric: (value: any) => boolean;
+export default isNumeric;

package/es/_util/isNumeric.js

@@ -0,0 +1,5 @@
+var isNumeric = function isNumeric(value) {
+  return !isNaN(parseFloat(value)) && isFinite(value);
+};
+
+export default isNumeric;

package/es/_util/motion.d.ts

@@ -0,0 +1,8 @@
+import type { CSSMotionProps } from 'rc-motion';
+declare const initCollapseMotion: (rootCls?: string) => CSSMotionProps;
+declare const SelectPlacements: ["bottomLeft", "bottomRight", "topLeft", "topRight"];
+export type SelectCommonPlacement = typeof SelectPlacements[number];
+declare const getTransitionDirection: (placement: SelectCommonPlacement | undefined) => "slide-down" | "slide-up";
+declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;
+export { getTransitionName, getTransitionDirection };
+export default initCollapseMotion;

package/es/_util/motion.js

@@ -0,0 +1,64 @@
+import { tuple } from "./type"; // ================== Collapse Motion ==================
+
+var getCollapsedHeight = function getCollapsedHeight() {
+  return {
+    height: 0,
+    opacity: 0
+  };
+};
+
+var getRealHeight = function getRealHeight(node) {
+  var scrollHeight = node.scrollHeight;
+  return {
+    height: scrollHeight,
+    opacity: 1
+  };
+};
+
+var getCurrentHeight = function getCurrentHeight(node) {
+  return {
+    height: node ? node.offsetHeight : 0
+  };
+};
+
+var skipOpacityTransition = function skipOpacityTransition(_, event) {
+  return (event === null || event === void 0 ? void 0 : event.deadline) === true || event.propertyName === 'height';
+};
+
+var initCollapseMotion = function initCollapseMotion() {
+  var rootCls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'ant';
+  return {
+    motionName: rootCls + "-motion-collapse",
+    onAppearStart: getCollapsedHeight,
+    onEnterStart: getCollapsedHeight,
+    onAppearActive: getRealHeight,
+    onEnterActive: getRealHeight,
+    onLeaveStart: getCurrentHeight,
+    onLeaveActive: getCollapsedHeight,
+    onAppearEnd: skipOpacityTransition,
+    onEnterEnd: skipOpacityTransition,
+    onLeaveEnd: skipOpacityTransition,
+    motionDeadline: 500
+  };
+};
+
+var SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
+
+var getTransitionDirection = function getTransitionDirection(placement) {
+  if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
+    return "slide-down";
+  }
+
+  return "slide-up";
+};
+
+var getTransitionName = function getTransitionName(rootPrefixCls, motion, transitionName) {
+  if (transitionName !== undefined) {
+    return transitionName;
+  }
+
+  return rootPrefixCls + "-" + motion;
+};
+
+export { getTransitionName, getTransitionDirection };
+export default initCollapseMotion;

package/es/_util/placements.d.ts

@@ -0,0 +1,17 @@
+import type { BuildInPlacements } from 'rc-trigger';
+export interface AdjustOverflow {
+    adjustX?: 0 | 1;
+    adjustY?: 0 | 1;
+}
+export interface PlacementsConfig {
+    arrowWidth?: number;
+    horizontalArrowShift?: number;
+    verticalArrowShift?: number;
+    arrowPointAtCenter?: boolean;
+    autoAdjustOverflow?: boolean | AdjustOverflow;
+}
+export declare function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow): {
+    adjustX: number;
+    adjustY: number;
+};
+export default function getPlacements(config: PlacementsConfig): BuildInPlacements;

package/es/_util/placements.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { placements } from "rc-tooltip/es/placements";
+var autoAdjustOverflowEnabled = {
+  adjustX: 1,
+  adjustY: 1
+};
+var autoAdjustOverflowDisabled = {
+  adjustX: 0,
+  adjustY: 0
+};
+var targetOffset = [0, 0];
+export function getOverflowOptions(autoAdjustOverflow) {
+  if (typeof autoAdjustOverflow === 'boolean') {
+    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
+  }
+
+  return _extends(_extends({}, autoAdjustOverflowDisabled), autoAdjustOverflow);
+}
+export default function getPlacements(config) {
+  var _config$arrowWidth = config.arrowWidth,
+      arrowWidth = _config$arrowWidth === void 0 ? 4 : _config$arrowWidth,
+      _config$horizontalArr = config.horizontalArrowShift,
+      horizontalArrowShift = _config$horizontalArr === void 0 ? 16 : _config$horizontalArr,
+      _config$verticalArrow = config.verticalArrowShift,
+      verticalArrowShift = _config$verticalArrow === void 0 ? 8 : _config$verticalArrow,
+      autoAdjustOverflow = config.autoAdjustOverflow,
+      arrowPointAtCenter = config.arrowPointAtCenter;
+  var placementMap = {
+    left: {
+      points: ['cr', 'cl'],
+      offset: [-4, 0]
+    },
+    right: {
+      points: ['cl', 'cr'],
+      offset: [4, 0]
+    },
+    top: {
+      points: ['bc', 'tc'],
+      offset: [0, -4]
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      offset: [0, 4]
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      offset: [-(horizontalArrowShift + arrowWidth), -4]
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      offset: [-4, -(verticalArrowShift + arrowWidth)]
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      offset: [horizontalArrowShift + arrowWidth, -4]
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      offset: [4, -(verticalArrowShift + arrowWidth)]
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      offset: [horizontalArrowShift + arrowWidth, 4]
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      offset: [4, verticalArrowShift + arrowWidth]
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      offset: [-(horizontalArrowShift + arrowWidth), 4]
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      offset: [-4, verticalArrowShift + arrowWidth]
+    }
+  };
+  Object.keys(placementMap).forEach(function (key) {
+    placementMap[key] = arrowPointAtCenter ? _extends(_extends({}, placementMap[key]), {
+      overflow: getOverflowOptions(autoAdjustOverflow),
+      targetOffset: targetOffset
+    }) : _extends(_extends({}, placements[key]), {
+      overflow: getOverflowOptions(autoAdjustOverflow)
+    });
+    placementMap[key].ignoreShake = true;
+  });
+  return placementMap;
+}

package/es/_util/raf.d.ts

@@ -0,0 +1,9 @@
+interface RafMap {
+    [id: number]: number;
+}
+declare function wrapperRaf(callback: () => void, delayFrames?: number): number;
+declare namespace wrapperRaf {
+    var cancel: (pid?: number | undefined) => void;
+    var ids: RafMap;
+}
+export default wrapperRaf;

package/es/_util/raf.js

@@ -0,0 +1,31 @@
+import raf from "rc-util/es/raf";
+var id = 0;
+var ids = {}; // Support call raf with delay specified frame
+
+export default function wrapperRaf(callback) {
+  var delayFrames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var myId = id++;
+  var restFrames = delayFrames;
+
+  function internalCallback() {
+    restFrames -= 1;
+
+    if (restFrames <= 0) {
+      callback();
+      delete ids[myId];
+    } else {
+      ids[myId] = raf(internalCallback);
+    }
+  }
+
+  ids[myId] = raf(internalCallback);
+  return myId;
+}
+
+wrapperRaf.cancel = function cancel(pid) {
+  if (pid === undefined) return;
+  raf.cancel(ids[pid]);
+  delete ids[pid];
+};
+
+wrapperRaf.ids = ids; // export this for test usage