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

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

@@ -0,0 +1,137 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@divider-prefix-cls: ~'@{ant-prefix}-divider';
+
+.@{divider-prefix-cls} {
+  .reset-component();
+
+  border-top: @border-width-base solid @divider-color;
+
+  &-vertical {
+    position: relative;
+    top: -0.06em;
+    display: inline-block;
+    height: 0.9em;
+    margin: 0 @divider-vertical-gutter;
+    vertical-align: middle;
+    border-top: 0;
+    border-left: @border-width-base solid @divider-color;
+  }
+
+  &-horizontal {
+    display: flex;
+    clear: both;
+    width: 100%;
+    min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
+    margin: 24px 0;
+  }
+
+  &-horizontal&-with-text {
+    display: flex;
+    margin: 16px 0;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: @font-size-lg;
+    white-space: nowrap;
+    text-align: center;
+    border-top: 0;
+    border-top-color: @divider-color;
+
+    &::before,
+    &::after {
+      position: relative;
+      top: 50%;
+      width: 50%;
+      border-top: @border-width-base solid transparent;
+      // Chrome not accept `inherit` in `border-top`
+      border-top-color: inherit;
+      border-bottom: 0;
+      transform: translateY(50%);
+      content: '';
+    }
+  }
+
+  &-horizontal&-with-text-left {
+    &::before {
+      top: 50%;
+      width: @divider-orientation-margin;
+    }
+
+    &::after {
+      top: 50%;
+      width: 100% - @divider-orientation-margin;
+    }
+  }
+
+  &-horizontal&-with-text-right {
+    &::before {
+      top: 50%;
+      width: 100% - @divider-orientation-margin;
+    }
+
+    &::after {
+      top: 50%;
+      width: @divider-orientation-margin;
+    }
+  }
+
+  &-inner-text {
+    display: inline-block;
+    padding: 0 @divider-text-padding;
+  }
+
+  &-dashed {
+    background: none;
+    border-color: @divider-color;
+    border-style: dashed;
+    border-width: @border-width-base 0 0;
+  }
+
+  &-horizontal&-with-text&-dashed {
+    &::before,
+    &::after {
+      border-style: dashed none none;
+    }
+  }
+
+  &-vertical&-dashed {
+    border-width: 0 0 0 @border-width-base;
+  }
+
+  &-plain&-with-text {
+    color: @text-color;
+    font-weight: normal;
+    font-size: @font-size-base;
+  }
+
+  &-horizontal&-with-text-left&-no-default-orientation-margin-left {
+    &::before {
+      width: 0;
+    }
+
+    &::after {
+      width: 100%;
+    }
+
+    .@{divider-prefix-cls}-inner-text {
+      padding-left: 0;
+    }
+  }
+
+  &-horizontal&-with-text-right&-no-default-orientation-margin-right {
+    &::before {
+      width: 100%;
+    }
+
+    &::after {
+      width: 0;
+    }
+
+    .@{divider-prefix-cls}-inner-text {
+      padding-right: 0;
+    }
+  }
+}
+
+@import './rtl';

package/lib/divider/style/index.css

@@ -0,0 +1,126 @@
+/* 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-divider {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+.ant-divider-vertical {
+  position: relative;
+  top: -0.06em;
+  display: inline-block;
+  height: 0.9em;
+  margin: 0 8px;
+  vertical-align: middle;
+  border-top: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.06);
+}
+.ant-divider-horizontal {
+  display: flex;
+  clear: both;
+  width: 100%;
+  min-width: 100%;
+  margin: 24px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text {
+  display: flex;
+  margin: 16px 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  white-space: nowrap;
+  text-align: center;
+  border-top: 0;
+  border-top-color: rgba(0, 0, 0, 0.06);
+}
+.ant-divider-horizontal.ant-divider-with-text::before,
+.ant-divider-horizontal.ant-divider-with-text::after {
+  position: relative;
+  top: 50%;
+  width: 50%;
+  border-top: 1px solid transparent;
+  border-top-color: inherit;
+  border-bottom: 0;
+  transform: translateY(50%);
+  content: '';
+}
+.ant-divider-horizontal.ant-divider-with-text-left::before {
+  top: 50%;
+  width: 5%;
+}
+.ant-divider-horizontal.ant-divider-with-text-left::after {
+  top: 50%;
+  width: 95%;
+}
+.ant-divider-horizontal.ant-divider-with-text-right::before {
+  top: 50%;
+  width: 95%;
+}
+.ant-divider-horizontal.ant-divider-with-text-right::after {
+  top: 50%;
+  width: 5%;
+}
+.ant-divider-inner-text {
+  display: inline-block;
+  padding: 0 1em;
+}
+.ant-divider-dashed {
+  background: none;
+  border-color: rgba(0, 0, 0, 0.06);
+  border-style: dashed;
+  border-width: 1px 0 0;
+}
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed::before,
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed::after {
+  border-style: dashed none none;
+}
+.ant-divider-vertical.ant-divider-dashed {
+  border-width: 0 0 0 1px;
+}
+.ant-divider-plain.ant-divider-with-text {
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: normal;
+  font-size: 14px;
+}
+.ant-divider-horizontal.ant-divider-with-text-left.ant-divider-no-default-orientation-margin-left::before {
+  width: 0;
+}
+.ant-divider-horizontal.ant-divider-with-text-left.ant-divider-no-default-orientation-margin-left::after {
+  width: 100%;
+}
+.ant-divider-horizontal.ant-divider-with-text-left.ant-divider-no-default-orientation-margin-left .ant-divider-inner-text {
+  padding-left: 0;
+}
+.ant-divider-horizontal.ant-divider-with-text-right.ant-divider-no-default-orientation-margin-right::before {
+  width: 100%;
+}
+.ant-divider-horizontal.ant-divider-with-text-right.ant-divider-no-default-orientation-margin-right::after {
+  width: 0;
+}
+.ant-divider-horizontal.ant-divider-with-text-right.ant-divider-no-default-orientation-margin-right .ant-divider-inner-text {
+  padding-right: 0;
+}
+.ant-divider-rtl {
+  direction: rtl;
+}
+.ant-divider-rtl.ant-divider-horizontal.ant-divider-with-text-left::before {
+  width: 95%;
+}
+.ant-divider-rtl.ant-divider-horizontal.ant-divider-with-text-left::after {
+  width: 5%;
+}
+.ant-divider-rtl.ant-divider-horizontal.ant-divider-with-text-right::before {
+  width: 5%;
+}
+.ant-divider-rtl.ant-divider-horizontal.ant-divider-with-text-right::after {
+  width: 95%;
+}

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

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

package/lib/divider/style/index.js

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

package/lib/divider/style/index.less

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

package/lib/divider/style/rtl.less

@@ -0,0 +1,38 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@divider-prefix-cls: ~'@{ant-prefix}-divider';
+
+.@{divider-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-horizontal&-with-text-left {
+    &::before {
+      .@{divider-prefix-cls}-rtl& {
+        width: 100% - @divider-orientation-margin;
+      }
+    }
+
+    &::after {
+      .@{divider-prefix-cls}-rtl& {
+        width: @divider-orientation-margin;
+      }
+    }
+  }
+
+  &-horizontal&-with-text-right {
+    &::before {
+      .@{divider-prefix-cls}-rtl& {
+        width: @divider-orientation-margin;
+      }
+    }
+
+    &::after {
+      .@{divider-prefix-cls}-rtl& {
+        width: 100% - @divider-orientation-margin;
+      }
+    }
+  }
+}

package/lib/drawer/index.d.ts

@@ -0,0 +1,37 @@
+import type { DrawerProps as RcDrawerProps } from 'rc-drawer';
+import * as React from 'react';
+declare const SizeTypes: ["default", "large"];
+type sizeType = typeof SizeTypes[number];
+export interface PushState {
+    distance: string | number;
+}
+export interface DrawerProps extends RcDrawerProps {
+    size?: sizeType;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    /** Wrapper dom node style of header and body */
+    drawerStyle?: React.CSSProperties;
+    headerStyle?: React.CSSProperties;
+    bodyStyle?: React.CSSProperties;
+    footerStyle?: React.CSSProperties;
+    title?: React.ReactNode;
+    /**
+     * @deprecated `visible` is deprecated which will be removed in next major version. Please use
+     *   `open` instead.
+     */
+    visible?: boolean;
+    open?: boolean;
+    footer?: React.ReactNode;
+    extra?: React.ReactNode;
+    /**
+     * @deprecated `afterVisibleChange` is deprecated which will be removed in next major version.
+     *   Please use `afterOpenChange` instead.
+     */
+    afterVisibleChange?: (visible: boolean) => void;
+    afterOpenChange?: (open: boolean) => void;
+}
+declare function Drawer(props: DrawerProps): JSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+}
+export default Drawer;

package/lib/drawer/index.js

@@ -0,0 +1,206 @@
+"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 _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcDrawer = _interopRequireDefault(require("rc-drawer"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _context = require("../form/context");
+
+var _motion = require("../_util/motion");
+
+var _type = require("../_util/type");
+
+var _warning = _interopRequireDefault(require("../_util/warning"));
+
+var _Compact = require("../space/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 SizeTypes = (0, _type.tuple)('default', 'large');
+var defaultPushState = {
+  distance: 180
+};
+
+function Drawer(props) {
+  var width = props.width,
+      height = props.height,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      _props$closable = props.closable,
+      closable = _props$closable === void 0 ? true : _props$closable,
+      _props$mask = props.mask,
+      mask = _props$mask === void 0 ? true : _props$mask,
+      _props$push = props.push,
+      push = _props$push === void 0 ? defaultPushState : _props$push,
+      _props$closeIcon = props.closeIcon,
+      closeIcon = _props$closeIcon === void 0 ? /*#__PURE__*/React.createElement(_CloseOutlined["default"], null) : _props$closeIcon,
+      bodyStyle = props.bodyStyle,
+      drawerStyle = props.drawerStyle,
+      className = props.className,
+      visible = props.visible,
+      open = props.open,
+      children = props.children,
+      style = props.style,
+      title = props.title,
+      headerStyle = props.headerStyle,
+      onClose = props.onClose,
+      footer = props.footer,
+      footerStyle = props.footerStyle,
+      customizePrefixCls = props.prefixCls,
+      customizeGetContainer = props.getContainer,
+      extra = props.extra,
+      afterVisibleChange = props.afterVisibleChange,
+      _afterOpenChange = props.afterOpenChange,
+      rest = __rest(props, ["width", "height", "size", "closable", "mask", "push", "closeIcon", "bodyStyle", "drawerStyle", "className", "visible", "open", "children", "style", "title", "headerStyle", "onClose", "footer", "footerStyle", "prefixCls", "getContainer", "extra", "afterVisibleChange", "afterOpenChange"]);
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPopupContainer = _React$useContext.getPopupContainer,
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var prefixCls = getPrefixCls('drawer', customizePrefixCls);
+  var getContainer = // 有可能为 false，所以不能直接判断
+  customizeGetContainer === undefined && getPopupContainer ? function () {
+    return getPopupContainer(document.body);
+  } : customizeGetContainer;
+  var closeIconNode = closable && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onClose,
+    "aria-label": "Close",
+    className: "".concat(prefixCls, "-close")
+  }, closeIcon);
+  [['visible', 'open'], ['afterVisibleChange', 'afterOpenChange']].forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        deprecatedName = _ref2[0],
+        newName = _ref2[1];
+
+    process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(deprecatedName in props), 'Drawer', "`".concat(deprecatedName, "` is deprecated which will be removed in next major version, please use `").concat(newName, "` instead.")) : void 0;
+  });
+
+  function renderHeader() {
+    if (!title && !closable) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _classnames["default"])("".concat(prefixCls, "-header"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-header-close-only"), closable && !title && !extra)),
+      style: headerStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-header-title")
+    }, closeIconNode, title && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-title")
+    }, title)), extra && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-extra")
+    }, extra));
+  }
+
+  function renderFooter() {
+    if (!footer) {
+      return null;
+    }
+
+    var footerClassName = "".concat(prefixCls, "-footer");
+    return /*#__PURE__*/React.createElement("div", {
+      className: footerClassName,
+      style: footerStyle
+    }, footer);
+  }
+
+  var drawerClassName = (0, _classnames["default"])((0, _defineProperty2["default"])({
+    'no-mask': !mask
+  }, "".concat(prefixCls, "-rtl"), direction === 'rtl'), className); // ============================ Size ============================
+
+  var mergedWidth = React.useMemo(function () {
+    return width !== null && width !== void 0 ? width : size === 'large' ? 736 : 378;
+  }, [width, size]);
+  var mergedHeight = React.useMemo(function () {
+    return height !== null && height !== void 0 ? height : size === 'large' ? 736 : 378;
+  }, [height, size]); // =========================== Motion ===========================
+
+  var maskMotion = {
+    motionName: (0, _motion.getTransitionName)(prefixCls, 'mask-motion'),
+    motionAppear: true,
+    motionEnter: true,
+    motionLeave: true,
+    motionDeadline: 500
+  };
+
+  var panelMotion = function panelMotion(motionPlacement) {
+    return {
+      motionName: (0, _motion.getTransitionName)(prefixCls, "panel-motion-".concat(motionPlacement)),
+      motionAppear: true,
+      motionEnter: true,
+      motionLeave: true,
+      motionDeadline: 500
+    };
+  }; // =========================== Render ===========================
+
+
+  return /*#__PURE__*/React.createElement(_Compact.NoCompactStyle, null, /*#__PURE__*/React.createElement(_context.NoFormStyle, {
+    status: true,
+    override: true
+  }, /*#__PURE__*/React.createElement(_rcDrawer["default"], (0, _extends2["default"])({
+    prefixCls: prefixCls,
+    onClose: onClose
+  }, rest, {
+    open: open || visible,
+    mask: mask,
+    push: push,
+    width: mergedWidth,
+    height: mergedHeight,
+    rootClassName: drawerClassName,
+    getContainer: getContainer,
+    afterOpenChange: function afterOpenChange(isOpen) {
+      _afterOpenChange === null || _afterOpenChange === void 0 ? void 0 : _afterOpenChange(isOpen);
+      afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(isOpen);
+    },
+    maskMotion: maskMotion,
+    motion: panelMotion,
+    rootStyle: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-wrapper-body"),
+    style: (0, _extends2["default"])({}, drawerStyle)
+  }, renderHeader(), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body"),
+    style: bodyStyle
+  }, children), renderFooter()))));
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  Drawer.displayName = 'Drawer';
+}
+
+var _default = Drawer;
+exports["default"] = _default;

package/lib/drawer/style/css.js

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