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

package/lib/popconfirm/PurePanel.js

@@ -0,0 +1,78 @@
+"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.Overlay = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _button2 = require("../button/button");
+
+var _ActionButton = _interopRequireDefault(require("../_util/ActionButton"));
+
+var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
+
+var _default = _interopRequireDefault(require("../locale/default"));
+
+var _getRenderPropValue = require("../_util/getRenderPropValue");
+
+var _configProvider = require("../config-provider");
+
+var Overlay = function Overlay(props) {
+  var prefixCls = props.prefixCls,
+      okButtonProps = props.okButtonProps,
+      cancelButtonProps = props.cancelButtonProps,
+      title = props.title,
+      cancelText = props.cancelText,
+      okText = props.okText,
+      okType = props.okType,
+      icon = props.icon,
+      _props$showCancel = props.showCancel,
+      showCancel = _props$showCancel === void 0 ? true : _props$showCancel,
+      close = props.close,
+      onConfirm = props.onConfirm,
+      onCancel = props.onCancel;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  return /*#__PURE__*/React.createElement(_LocaleReceiver["default"], {
+    componentName: "Popconfirm",
+    defaultLocale: _default["default"].Popconfirm
+  }, function (contextLocale) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-inner-content")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-message")
+    }, icon && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-message-icon")
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-message-title")
+    }, (0, _getRenderPropValue.getRenderPropValue)(title))), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-buttons")
+    }, showCancel && /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({
+      onClick: onCancel,
+      size: "small"
+    }, cancelButtonProps), cancelText !== null && cancelText !== void 0 ? cancelText : contextLocale.cancelText), /*#__PURE__*/React.createElement(_ActionButton["default"], {
+      buttonProps: (0, _extends2["default"])((0, _extends2["default"])({
+        size: 'small'
+      }, (0, _button2.convertLegacyProps)(okType)), okButtonProps),
+      actionFn: onConfirm,
+      close: close,
+      prefixCls: getPrefixCls('btn'),
+      quitOnNullishReturnValue: true,
+      emitEvent: true
+    }, okText !== null && okText !== void 0 ? okText : contextLocale.okText)));
+  });
+};
+
+exports.Overlay = Overlay;

package/lib/popconfirm/index.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { ButtonProps, LegacyButtonType } from '../button/button';
+import type { AbstractTooltipProps } from '../tooltip';
+import type { RenderFunction } from '../_util/getRenderPropValue';
+export interface PopconfirmProps extends AbstractTooltipProps {
+    title: React.ReactNode | RenderFunction;
+    disabled?: boolean;
+    onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
+    onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
+    okText?: React.ReactNode;
+    okType?: LegacyButtonType;
+    cancelText?: React.ReactNode;
+    okButtonProps?: ButtonProps;
+    cancelButtonProps?: ButtonProps;
+    showCancel?: boolean;
+    icon?: React.ReactNode;
+    /**
+     * @deprecated `onVisibleChange` is deprecated which will be removed in next major version. Please
+     *   use `onOpenChange` instead.
+     */
+    onVisibleChange?: (visible: boolean, e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    onOpenChange?: (open: boolean, e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export interface PopconfirmState {
+    open?: boolean;
+}
+declare const Popconfirm: React.ForwardRefExoticComponent<PopconfirmProps & React.RefAttributes<unknown>>;
+export default Popconfirm;

package/lib/popconfirm/index.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+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 _ExclamationCircleFilled = _interopRequireDefault(require("@ant-design/icons/ExclamationCircleFilled"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _reactNode = require("../_util/reactNode");
+
+var _PurePanel = require("./PurePanel");
+
+var _this = void 0;
+
+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 Popconfirm = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var _useMergedState = (0, _useMergedState3["default"])(false, {
+    value: props.open !== undefined ? props.open : props.visible,
+    defaultValue: props.defaultOpen !== undefined ? props.defaultOpen : props.defaultVisible
+  }),
+      _useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
+      open = _useMergedState2[0],
+      setOpen = _useMergedState2[1]; // const isDestroyed = useDestroyed();
+
+
+  var settingOpen = function settingOpen(value, e) {
+    var _a, _b;
+
+    setOpen(value, true);
+    (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, value, e);
+    (_b = props.onOpenChange) === null || _b === void 0 ? void 0 : _b.call(props, value, e);
+  };
+
+  var close = function close(e) {
+    settingOpen(false, e);
+  };
+
+  var onConfirm = function onConfirm(e) {
+    var _a;
+
+    return (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(_this, e);
+  };
+
+  var onCancel = function onCancel(e) {
+    var _a;
+
+    settingOpen(false, e);
+    (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(_this, e);
+  };
+
+  var _onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === _KeyCode["default"].ESC && open) {
+      settingOpen(false, e);
+    }
+  };
+
+  var onOpenChange = function onOpenChange(value) {
+    var _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+    if (disabled) {
+      return;
+    }
+
+    settingOpen(value);
+  };
+
+  var customizePrefixCls = props.prefixCls,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'top' : _props$placement,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+      _props$okType = props.okType,
+      okType = _props$okType === void 0 ? 'primary' : _props$okType,
+      _props$icon = props.icon,
+      icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(_ExclamationCircleFilled["default"], null) : _props$icon,
+      children = props.children,
+      overlayClassName = props.overlayClassName,
+      restProps = __rest(props, ["prefixCls", "placement", "trigger", "okType", "icon", "children", "overlayClassName"]);
+
+  var prefixCls = getPrefixCls('popover', customizePrefixCls);
+  var prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls);
+  var overlayClassNames = (0, _classnames["default"])(prefixClsConfirm, overlayClassName);
+  return /*#__PURE__*/React.createElement(_popover["default"], (0, _extends2["default"])({}, restProps, {
+    trigger: trigger,
+    prefixCls: prefixCls,
+    placement: placement,
+    onOpenChange: onOpenChange,
+    open: open,
+    ref: ref,
+    overlayClassName: overlayClassNames,
+    _overlay: /*#__PURE__*/React.createElement(_PurePanel.Overlay, (0, _extends2["default"])({
+      okType: okType,
+      icon: icon
+    }, props, {
+      prefixCls: prefixCls,
+      close: close,
+      onConfirm: onConfirm,
+      onCancel: onCancel
+    }))
+  }), (0, _reactNode.cloneElement)(children, {
+    onKeyDown: function onKeyDown(e) {
+      var _a, _b;
+
+      if ( /*#__PURE__*/React.isValidElement(children)) {
+        (_b = children === null || children === void 0 ? void 0 : (_a = children.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+      }
+
+      _onKeyDown(e);
+    }
+  }));
+});
+var _default = Popconfirm;
+exports["default"] = _default;

package/lib/popconfirm/style/css.js

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

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

@@ -0,0 +1,8 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm';
+
+.@{popconfirm-prefix-cls} {
+  z-index: @zindex-popoconfirm;
+}

package/lib/popconfirm/style/index.css

@@ -0,0 +1,7 @@
+/* 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-popconfirm {
+  z-index: 1060;
+}

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

@@ -0,0 +1,4 @@
+import '../../style/default.less';
+import '../../button/style';
+import '../../popover/style';
+import './index.less';

package/lib/popconfirm/style/index.js

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

package/lib/popconfirm/style/index.less

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

package/lib/popover/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { AbstractTooltipProps } from '../tooltip';
+import type { RenderFunction } from '../_util/getRenderPropValue';
+export interface PopoverProps extends AbstractTooltipProps {
+    title?: React.ReactNode | RenderFunction;
+    content?: React.ReactNode | RenderFunction;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
+export default Popover;

package/lib/popover/index.js

@@ -0,0 +1,98 @@
+"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 React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+
+var _getRenderPropValue = require("../_util/getRenderPropValue");
+
+var _motion = require("../_util/motion");
+
+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 Overlay = function Overlay(_ref) {
+  var title = _ref.title,
+      content = _ref.content,
+      prefixCls = _ref.prefixCls;
+
+  if (!title && !content) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, (0, _getRenderPropValue.getRenderPropValue)(title)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-inner-content")
+  }, (0, _getRenderPropValue.getRenderPropValue)(content)));
+};
+
+var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+      title = props.title,
+      content = props.content,
+      _overlay = props._overlay,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'top' : _props$placement,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'hover' : _props$trigger,
+      _props$mouseEnterDela = props.mouseEnterDelay,
+      mouseEnterDelay = _props$mouseEnterDela === void 0 ? 0.1 : _props$mouseEnterDela,
+      _props$mouseLeaveDela = props.mouseLeaveDelay,
+      mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0.1 : _props$mouseLeaveDela,
+      _props$overlayStyle = props.overlayStyle,
+      overlayStyle = _props$overlayStyle === void 0 ? {} : _props$overlayStyle,
+      otherProps = __rest(props, ["prefixCls", "title", "content", "_overlay", "placement", "trigger", "mouseEnterDelay", "mouseLeaveDelay", "overlayStyle"]);
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('popover', customizePrefixCls);
+  var rootPrefixCls = getPrefixCls();
+  return /*#__PURE__*/React.createElement(_tooltip["default"], (0, _extends2["default"])({
+    placement: placement,
+    trigger: trigger,
+    mouseEnterDelay: mouseEnterDelay,
+    mouseLeaveDelay: mouseLeaveDelay,
+    overlayStyle: overlayStyle
+  }, otherProps, {
+    prefixCls: prefixCls,
+    ref: ref,
+    overlay: _overlay || /*#__PURE__*/React.createElement(Overlay, {
+      prefixCls: prefixCls,
+      title: title,
+      content: content
+    }),
+    transitionName: (0, _motion.getTransitionName)(rootPrefixCls, 'zoom-big', otherProps.transitionName)
+  }));
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Popover.displayName = 'Popover';
+}
+
+var _default = Popover;
+exports["default"] = _default;

package/lib/popover/style/css.js

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

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

@@ -0,0 +1,261 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@popover-prefix-cls: ~'@{ant-prefix}-popover';
+
+@popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) + 6px;
+
+@popover-arrow-offset-vertical: 12px;
+@popover-arrow-offset-horizontal: 16px;
+
+.@{popover-prefix-cls} {
+  .reset-component();
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: @zindex-popover;
+  font-weight: normal;
+  white-space: normal;
+  text-align: left;
+  cursor: auto;
+  user-select: text;
+
+  &-content {
+    position: relative;
+  }
+
+  &::after {
+    position: absolute;
+    background: fade(@white, 1%);
+    content: '';
+  }
+
+  &-hidden {
+    display: none;
+  }
+
+  // Offset the popover to account for the popover arrow
+  &-placement-top,
+  &-placement-topLeft,
+  &-placement-topRight {
+    padding-bottom: @popover-distance;
+  }
+
+  &-placement-right,
+  &-placement-rightTop,
+  &-placement-rightBottom {
+    padding-left: @popover-distance;
+  }
+
+  &-placement-bottom,
+  &-placement-bottomLeft,
+  &-placement-bottomRight {
+    padding-top: @popover-distance;
+  }
+
+  &-placement-left,
+  &-placement-leftTop,
+  &-placement-leftBottom {
+    padding-right: @popover-distance;
+  }
+
+  &-inner {
+    background-color: @popover-bg;
+    background-clip: padding-box;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+  }
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* IE10+ */
+    &-inner {
+      box-shadow: @box-shadow-base;
+    }
+  }
+
+  &-title {
+    min-width: @popover-min-width;
+    min-height: @popover-min-height;
+    margin: 0; // reset heading margin
+    padding: 5px @popover-padding-horizontal 4px;
+    color: @heading-color;
+    font-weight: 500;
+    border-bottom: 1px solid @border-color-split;
+  }
+
+  &-inner-content {
+    padding: @padding-sm @popover-padding-horizontal;
+    color: @popover-color;
+  }
+
+  &-message {
+    display: flex;
+    align-items: center;
+    padding: 4px 0 12px;
+    color: @popover-color;
+    font-size: @font-size-base;
+
+    &-icon {
+      display: inline-block;
+      margin-right: 8px;
+      color: @warning-color;
+      font-size: @font-size-base;
+    }
+  }
+
+  &-buttons {
+    margin-bottom: 4px;
+    text-align: right;
+
+    button:not(:first-child) {
+      margin-left: 8px;
+    }
+  }
+
+  // Arrows
+  &-arrow {
+    position: absolute;
+    display: block;
+    width: @popover-arrow-rotate-width;
+    height: @popover-arrow-rotate-width;
+    overflow: hidden;
+    background: transparent;
+    pointer-events: none;
+
+    &-content {
+      --antd-arrow-background-color: @popover-bg;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      width: @popover-arrow-width;
+      height: @popover-arrow-width;
+      margin: auto;
+      content: '';
+      pointer-events: auto;
+      .roundedArrow(@popover-arrow-width, 5px);
+    }
+  }
+
+  &-placement-top &-arrow,
+  &-placement-topLeft &-arrow,
+  &-placement-topRight &-arrow {
+    bottom: 0;
+    transform: translateY(100%);
+
+    &-content {
+      box-shadow: 3px 3px 7px fade(@black, 7%);
+      transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
+    }
+  }
+
+  &-placement-top &-arrow {
+    left: 50%;
+    transform: translateY(100%) translateX(-50%);
+  }
+
+  &-placement-topLeft &-arrow {
+    left: @popover-arrow-offset-horizontal;
+  }
+
+  &-placement-topRight &-arrow {
+    right: @popover-arrow-offset-horizontal;
+  }
+
+  &-placement-right &-arrow,
+  &-placement-rightTop &-arrow,
+  &-placement-rightBottom &-arrow {
+    left: 0;
+    transform: translateX(-100%);
+
+    &-content {
+      box-shadow: 3px 3px 7px fade(@black, 7%);
+      transform: translateX((@popover-arrow-rotate-width / 2)) rotate(135deg);
+    }
+  }
+
+  &-placement-right &-arrow {
+    top: 50%;
+    transform: translateX(-100%) translateY(-50%);
+  }
+
+  &-placement-rightTop &-arrow {
+    top: @popover-arrow-offset-vertical;
+  }
+
+  &-placement-rightBottom &-arrow {
+    bottom: @popover-arrow-offset-vertical;
+  }
+
+  &-placement-bottom &-arrow,
+  &-placement-bottomLeft &-arrow,
+  &-placement-bottomRight &-arrow {
+    top: 0;
+    transform: translateY(-100%);
+
+    &-content {
+      box-shadow: 2px 2px 5px fade(@black, 6%);
+      transform: translateY((@popover-arrow-rotate-width / 2)) rotate(-135deg);
+    }
+  }
+
+  &-placement-bottom &-arrow {
+    left: 50%;
+    transform: translateY(-100%) translateX(-50%);
+  }
+
+  &-placement-bottomLeft &-arrow {
+    left: @popover-arrow-offset-horizontal;
+  }
+
+  &-placement-bottomRight &-arrow {
+    right: @popover-arrow-offset-horizontal;
+  }
+
+  &-placement-left &-arrow,
+  &-placement-leftTop &-arrow,
+  &-placement-leftBottom &-arrow {
+    right: 0;
+    transform: translateX(100%);
+
+    &-content {
+      box-shadow: 3px 3px 7px fade(@black, 7%);
+      transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(-45deg);
+    }
+  }
+
+  &-placement-left &-arrow {
+    top: 50%;
+    transform: translateX(100%) translateY(-50%);
+  }
+
+  &-placement-leftTop &-arrow {
+    top: @popover-arrow-offset-vertical;
+  }
+
+  &-placement-leftBottom &-arrow {
+    bottom: @popover-arrow-offset-vertical;
+  }
+}
+
+.generator-popover-preset-color(@i: length(@preset-colors)) when (@i > 0) {
+  .generator-popover-preset-color(@i - 1);
+  @color: extract(@preset-colors, @i);
+  @lightColor: '@{color}-6';
+  .@{popover-prefix-cls}-@{color} {
+    .@{popover-prefix-cls}-inner {
+      background-color: @@lightColor;
+    }
+    .@{popover-prefix-cls}-arrow {
+      &-content {
+        background-color: @@lightColor;
+      }
+    }
+  }
+}
+.generator-popover-preset-color();
+
+@import './rtl';