@fle-ui/next 2.0.0-alpha.11 → 2.0.0-alpha.12

package/lib/space/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { SizeType } from '../config-provider/SizeContext';
+import Compact from './Compact';
+export declare const SpaceContext: React.Context<{
+    latestIndex: number;
+    horizontalSize: number;
+    verticalSize: number;
+    supportFlexGap: boolean;
+}>;
+export type SpaceSize = SizeType | number;
+export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: SpaceSize | [SpaceSize, SpaceSize];
+    direction?: 'horizontal' | 'vertical';
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    split?: React.ReactNode;
+    wrap?: boolean;
+}
+interface CompoundedComponent extends React.FC<SpaceProps> {
+    Compact: typeof Compact;
+}
+declare const CompoundedSpace: CompoundedComponent;
+export default CompoundedSpace;

package/lib/space/index.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SpaceContext = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _useFlexGapSupport = _interopRequireDefault(require("../_util/hooks/useFlexGapSupport"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var _Compact = _interopRequireDefault(require("./Compact"));
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var SpaceContext = /*#__PURE__*/React.createContext({
+  latestIndex: 0,
+  horizontalSize: 0,
+  verticalSize: 0,
+  supportFlexGap: false
+});
+exports.SpaceContext = SpaceContext;
+var spaceSize = {
+  small: 8,
+  middle: 16,
+  large: 24
+};
+
+function getNumberSize(size) {
+  return typeof size === 'string' ? spaceSize[size] : size || 0;
+}
+
+var Space = function Space(props) {
+  var _classNames;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      space = _React$useContext.space,
+      directionConfig = _React$useContext.direction;
+
+  var _props$size = props.size,
+      size = _props$size === void 0 ? (space === null || space === void 0 ? void 0 : space.size) || 'small' : _props$size,
+      align = props.align,
+      className = props.className,
+      children = props.children,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+      customizePrefixCls = props.prefixCls,
+      split = props.split,
+      style = props.style,
+      _props$wrap = props.wrap,
+      wrap = _props$wrap === void 0 ? false : _props$wrap,
+      otherProps = __rest(props, ["size", "align", "className", "children", "direction", "prefixCls", "split", "style", "wrap"]);
+
+  var supportFlexGap = (0, _useFlexGapSupport["default"])();
+
+  var _React$useMemo = React.useMemo(function () {
+    return (Array.isArray(size) ? size : [size, size]).map(function (item) {
+      return getNumberSize(item);
+    });
+  }, [size]),
+      _React$useMemo2 = (0, _slicedToArray2["default"])(_React$useMemo, 2),
+      horizontalSize = _React$useMemo2[0],
+      verticalSize = _React$useMemo2[1];
+
+  var childNodes = (0, _toArray["default"])(children, {
+    keepEmpty: true
+  });
+  var mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
+  var prefixCls = getPrefixCls('space', customizePrefixCls);
+  var cn = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-").concat(direction), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), directionConfig === 'rtl'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-align-").concat(mergedAlign), mergedAlign), _classNames), className);
+  var itemClassName = "".concat(prefixCls, "-item");
+  var marginDirection = directionConfig === 'rtl' ? 'marginLeft' : 'marginRight'; // Calculate latest one
+
+  var latestIndex = 0;
+  var nodes = childNodes.map(function (child, i) {
+    if (child !== null && child !== undefined) {
+      latestIndex = i;
+    }
+
+    var key = child && child.key || "".concat(itemClassName, "-").concat(i);
+    return /*#__PURE__*/React.createElement(_Item["default"], {
+      className: itemClassName,
+      key: key,
+      direction: direction,
+      index: i,
+      marginDirection: marginDirection,
+      split: split,
+      wrap: wrap
+    }, child);
+  });
+  var spaceContext = React.useMemo(function () {
+    return {
+      horizontalSize: horizontalSize,
+      verticalSize: verticalSize,
+      latestIndex: latestIndex,
+      supportFlexGap: supportFlexGap
+    };
+  }, [horizontalSize, verticalSize, latestIndex, supportFlexGap]); // =========================== Render ===========================
+
+  if (childNodes.length === 0) {
+    return null;
+  }
+
+  var gapStyle = {};
+
+  if (wrap) {
+    gapStyle.flexWrap = 'wrap'; // Patch for gap not support
+
+    if (!supportFlexGap) {
+      gapStyle.marginBottom = -verticalSize;
+    }
+  }
+
+  if (supportFlexGap) {
+    gapStyle.columnGap = horizontalSize;
+    gapStyle.rowGap = verticalSize;
+  }
+
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn,
+    style: (0, _extends2["default"])((0, _extends2["default"])({}, gapStyle), style)
+  }, otherProps), /*#__PURE__*/React.createElement(SpaceContext.Provider, {
+    value: spaceContext
+  }, nodes));
+};
+
+var CompoundedSpace = Space;
+CompoundedSpace.Compact = _Compact["default"];
+var _default = CompoundedSpace;
+exports["default"] = _default;

package/lib/space/style/compact.less

@@ -0,0 +1,17 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@space-compact-prefix-cls: ~'@{ant-prefix}-space-compact';
+
+.@{space-compact-prefix-cls} {
+  display: inline-flex;
+
+  &-block {
+    display: flex;
+    width: 100%;
+  }
+
+  &-vertical {
+    flex-direction: column;
+  }
+}

package/lib/space/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");

package/lib/space/style/index-pure.less

@@ -0,0 +1,40 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@space-prefix-cls: ~'@{ant-prefix}-space';
+@space-item-prefix-cls: ~'@{ant-prefix}-space-item';
+
+.@{space-prefix-cls} {
+  display: inline-flex;
+
+  &-vertical {
+    flex-direction: column;
+  }
+
+  &-align {
+    &-center {
+      align-items: center;
+    }
+
+    &-start {
+      align-items: flex-start;
+    }
+
+    &-end {
+      align-items: flex-end;
+    }
+
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+}
+
+.@{space-item-prefix-cls} {
+  &:empty {
+    display: none;
+  }
+}
+
+@import './compact';
+@import './rtl';

package/lib/space/style/index.css

@@ -0,0 +1,41 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-space {
+  display: inline-flex;
+}
+.ant-space-vertical {
+  flex-direction: column;
+}
+.ant-space-align-center {
+  align-items: center;
+}
+.ant-space-align-start {
+  align-items: flex-start;
+}
+.ant-space-align-end {
+  align-items: flex-end;
+}
+.ant-space-align-baseline {
+  align-items: baseline;
+}
+.ant-space-item:empty {
+  display: none;
+}
+.ant-space-compact {
+  display: inline-flex;
+}
+.ant-space-compact-block {
+  display: flex;
+  width: 100%;
+}
+.ant-space-compact-vertical {
+  flex-direction: column;
+}
+.ant-space-rtl {
+  direction: rtl;
+}
+.ant-space-compact-rtl {
+  direction: rtl;
+}

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

@@ -0,0 +1,2 @@
+import '../../style/default.less';
+import './index.less';

package/lib/space/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/default.less");
+
+require("./index.less");

package/lib/space/style/index.less

@@ -0,0 +1,3 @@
+@root-entry-name: default;
+
+@import './index-pure.less';

package/lib/space/style/rtl.less

@@ -0,0 +1,14 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@space-prefix-cls: ~'@{ant-prefix}-space';
+
+.@{space-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-compact-rtl {
+    direction: rtl;
+  }
+}

package/lib/spin/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+declare const SpinSizes: ["small", "default", "large"];
+export type SpinSize = typeof SpinSizes[number];
+export type SpinIndicator = React.ReactElement<HTMLElement>;
+export interface SpinProps {
+    prefixCls?: string;
+    className?: string;
+    spinning?: boolean;
+    style?: React.CSSProperties;
+    size?: SpinSize;
+    tip?: React.ReactNode;
+    delay?: number;
+    wrapperClassName?: string;
+    indicator?: SpinIndicator;
+    children?: React.ReactNode;
+}
+export interface SpinClassProps extends SpinProps {
+    spinPrefixCls: string;
+}
+export type SpinFCType = React.FC<SpinProps> & {
+    setDefaultIndicator: (indicator: React.ReactNode) => void;
+};
+declare const SpinFC: SpinFCType;
+export default SpinFC;

package/lib/spin/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _reactNode = require("../_util/reactNode");
+
+var _type = require("../_util/type");
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var SpinSizes = (0, _type.tuple)('small', 'default', 'large'); // Render indicator
+
+var defaultIndicator = null;
+
+function renderIndicator(prefixCls, props) {
+  var indicator = props.indicator;
+  var dotClassName = "".concat(prefixCls, "-dot"); // should not be render default indicator when indicator value is null
+
+  if (indicator === null) {
+    return null;
+  }
+
+  if ((0, _reactNode.isValidElement)(indicator)) {
+    return (0, _reactNode.cloneElement)(indicator, {
+      className: (0, _classnames["default"])(indicator.props.className, dotClassName)
+    });
+  }
+
+  if ((0, _reactNode.isValidElement)(defaultIndicator)) {
+    return (0, _reactNode.cloneElement)(defaultIndicator, {
+      className: (0, _classnames["default"])(defaultIndicator.props.className, dotClassName)
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _classnames["default"])(dotClassName, "".concat(prefixCls, "-dot-spin"))
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "".concat(prefixCls, "-dot-item")
+  }), /*#__PURE__*/React.createElement("i", {
+    className: "".concat(prefixCls, "-dot-item")
+  }), /*#__PURE__*/React.createElement("i", {
+    className: "".concat(prefixCls, "-dot-item")
+  }), /*#__PURE__*/React.createElement("i", {
+    className: "".concat(prefixCls, "-dot-item")
+  }));
+}
+
+function shouldDelay(spinning, delay) {
+  return !!spinning && !!delay && !isNaN(Number(delay));
+}
+
+var Spin = function Spin(props) {
+  var prefixCls = props.spinPrefixCls,
+      _props$spinning = props.spinning,
+      customSpinning = _props$spinning === void 0 ? true : _props$spinning,
+      delay = props.delay,
+      className = props.className,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      tip = props.tip,
+      wrapperClassName = props.wrapperClassName,
+      style = props.style,
+      children = props.children,
+      restProps = __rest(props, ["spinPrefixCls", "spinning", "delay", "className", "size", "tip", "wrapperClassName", "style", "children"]);
+
+  var _React$useState = React.useState(function () {
+    return customSpinning && !shouldDelay(customSpinning, delay);
+  }),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      spinning = _React$useState2[0],
+      setSpinning = _React$useState2[1];
+
+  React.useEffect(function () {
+    var updateSpinning = (0, _debounce["default"])(function () {
+      setSpinning(customSpinning);
+    }, delay);
+    updateSpinning();
+    return function () {
+      var _a;
+
+      (_a = updateSpinning === null || updateSpinning === void 0 ? void 0 : updateSpinning.cancel) === null || _a === void 0 ? void 0 : _a.call(updateSpinning);
+    };
+  }, [delay, customSpinning]);
+
+  var isNestedPattern = function isNestedPattern() {
+    return typeof children !== 'undefined';
+  };
+
+  var renderSpin = function renderSpin(_ref) {
+    var _classNames;
+
+    var direction = _ref.direction;
+    var spinClassName = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-sm"), size === 'small'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-lg"), size === 'large'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-spinning"), spinning), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-show-text"), !!tip), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className); // fix https://fb.me/react-unknown-prop
+
+    var divProps = (0, _omit["default"])(restProps, ['indicator', 'prefixCls']);
+    var spinElement = /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, divProps, {
+      style: style,
+      className: spinClassName,
+      "aria-live": "polite",
+      "aria-busy": spinning
+    }), renderIndicator(prefixCls, props), tip ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-text")
+    }, tip) : null);
+
+    if (isNestedPattern()) {
+      var containerClassName = (0, _classnames["default"])("".concat(prefixCls, "-container"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-blur"), spinning));
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, divProps, {
+        className: (0, _classnames["default"])("".concat(prefixCls, "-nested-loading"), wrapperClassName)
+      }), spinning && /*#__PURE__*/React.createElement("div", {
+        key: "loading"
+      }, spinElement), /*#__PURE__*/React.createElement("div", {
+        className: containerClassName,
+        key: "container"
+      }, children));
+    }
+
+    return spinElement;
+  };
+
+  return /*#__PURE__*/React.createElement(_configProvider.ConfigConsumer, null, renderSpin);
+};
+
+var SpinFC = function SpinFC(props) {
+  var customizePrefixCls = props.prefixCls;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var spinPrefixCls = getPrefixCls('spin', customizePrefixCls);
+  var spinClassProps = (0, _extends2["default"])((0, _extends2["default"])({}, props), {
+    spinPrefixCls: spinPrefixCls
+  });
+  return /*#__PURE__*/React.createElement(Spin, (0, _extends2["default"])({}, spinClassProps));
+};
+
+SpinFC.setDefaultIndicator = function (indicator) {
+  defaultIndicator = indicator;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  SpinFC.displayName = 'Spin';
+}
+
+var _default = SpinFC;
+exports["default"] = _default;

package/lib/spin/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");