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

package/es/tabs/style/position.less

@@ -0,0 +1,198 @@
+@import '../../style/themes/index';
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+.@{tab-prefix-cls} {
+  // ========================== Top & Bottom ==========================
+  &-top,
+  &-bottom {
+    flex-direction: column;
+
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      margin: @tabs-bar-margin;
+
+      &::before {
+        position: absolute;
+        right: 0;
+        left: 0;
+        border-bottom: @border-width-base @border-style-base @border-color-split;
+        content: '';
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        height: 2px;
+
+        &-animated {
+          transition: width @animation-duration-slow, left @animation-duration-slow,
+            right @animation-duration-slow;
+        }
+      }
+
+      .@{tab-prefix-cls}-nav-wrap {
+        &::before,
+        &::after {
+          top: 0;
+          bottom: 0;
+          width: 30px;
+        }
+
+        &::before {
+          left: 0;
+          box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
+        }
+
+        &::after {
+          right: 0;
+          box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
+        }
+
+        &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
+          opacity: 1;
+        }
+        &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &-top {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      &::before {
+        bottom: 0;
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        bottom: 0;
+      }
+    }
+  }
+
+  &-bottom {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      order: 1;
+      margin-top: @margin-md;
+      margin-bottom: 0;
+
+      &::before {
+        top: 0;
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        top: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder,
+    > div > .@{tab-prefix-cls}-content-holder {
+      order: 0;
+    }
+  }
+
+  // ========================== Left & Right ==========================
+  &-left,
+  &-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      flex-direction: column;
+      min-width: 50px;
+
+      // >>>>>>>>>>> Tab
+      .@{tab-prefix-cls}-tab {
+        padding: @tabs-vertical-padding;
+        text-align: center;
+      }
+
+      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
+        margin: @tabs-vertical-margin;
+      }
+
+      // >>>>>>>>>>> Nav
+      .@{tab-prefix-cls}-nav-wrap {
+        flex-direction: column;
+
+        &::before,
+        &::after {
+          right: 0;
+          left: 0;
+          height: 30px;
+        }
+
+        &::before {
+          top: 0;
+          box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
+        }
+
+        &::after {
+          bottom: 0;
+          box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
+        }
+
+        &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
+          opacity: 1;
+        }
+        &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
+          opacity: 1;
+        }
+      }
+
+      // >>>>>>>>>>> Ink Bar
+      .@{tab-prefix-cls}-ink-bar {
+        width: 2px;
+
+        &-animated {
+          transition: height @animation-duration-slow, top @animation-duration-slow;
+        }
+      }
+
+      .@{tab-prefix-cls}-nav-list,
+      .@{tab-prefix-cls}-nav-operations {
+        flex: 1 0 auto; // fix safari scroll problem
+        flex-direction: column;
+      }
+    }
+  }
+
+  &-left {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-ink-bar {
+        right: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder,
+    > div > .@{tab-prefix-cls}-content-holder {
+      margin-left: -@border-width-base;
+      border-left: @border-width-base @border-style-base @border-color-split;
+
+      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
+        padding-left: @padding-lg;
+      }
+    }
+  }
+
+  &-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      order: 1;
+
+      .@{tab-prefix-cls}-ink-bar {
+        left: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder,
+    > div > .@{tab-prefix-cls}-content-holder {
+      order: 0;
+      margin-right: -@border-width-base;
+      border-right: @border-width-base @border-style-base @border-color-split;
+
+      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
+        padding-right: @padding-lg;
+      }
+    }
+  }
+}

package/es/tabs/style/rtl.less

@@ -0,0 +1,86 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+.@{tab-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+
+    .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        margin: @tabs-horizontal-margin-rtl;
+
+        &:last-of-type {
+          margin-left: 0;
+        }
+
+        .@{iconfont-css-prefix} {
+          margin-right: 0;
+          margin-left: @margin-sm;
+        }
+
+        .@{tab-prefix-cls}-tab-remove {
+          margin-right: @margin-xs;
+          margin-left: -@margin-xss;
+
+          .@{iconfont-css-prefix} {
+            margin: 0;
+          }
+        }
+      }
+    }
+
+    &.@{tab-prefix-cls}-left {
+      > .@{tab-prefix-cls}-nav {
+        order: 1;
+      }
+      > .@{tab-prefix-cls}-content-holder {
+        order: 0;
+      }
+    }
+
+    &.@{tab-prefix-cls}-right {
+      > .@{tab-prefix-cls}-nav {
+        order: 0;
+      }
+      > .@{tab-prefix-cls}-content-holder {
+        order: 1;
+      }
+    }
+  }
+
+  // ====================== Card ======================
+  &-card {
+    &.@{tab-prefix-cls}-top,
+    &.@{tab-prefix-cls}-bottom {
+      > .@{tab-prefix-cls}-nav,
+      > div > .@{tab-prefix-cls}-nav {
+        .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
+          .@{tab-prefix-cls}-rtl& {
+            margin-right: @tabs-card-gutter;
+            margin-left: 0;
+          }
+        }
+        .@{tab-prefix-cls}-nav-add {
+          .@{tab-prefix-cls}-rtl& {
+            margin-right: @tabs-card-gutter;
+            margin-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{tab-prefix-cls}-dropdown {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-menu-item {
+    .@{tab-prefix-cls}-dropdown-rtl & {
+      text-align: right;
+    }
+  }
+}

package/es/tabs/style/size.less

@@ -0,0 +1,42 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+.@{tab-prefix-cls} {
+  &-small {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        padding: @tabs-horizontal-padding-sm;
+        font-size: @tabs-title-font-size-sm;
+      }
+    }
+  }
+
+  &-large {
+    > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        padding: @tabs-horizontal-padding-lg;
+        font-size: @tabs-title-font-size-lg;
+      }
+    }
+  }
+
+  &-card {
+    &.@{tab-prefix-cls}-small {
+      > .@{tab-prefix-cls}-nav {
+        .@{tab-prefix-cls}-tab {
+          padding: @tabs-card-horizontal-padding-sm;
+        }
+      }
+    }
+
+    &.@{tab-prefix-cls}-large {
+      > .@{tab-prefix-cls}-nav {
+        .@{tab-prefix-cls}-tab {
+          padding: @tabs-card-horizontal-padding-lg;
+        }
+      }
+    }
+  }
+}

package/es/tag/CheckableTag.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface CheckableTagProps {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * It is an absolute controlled component and has no uncontrolled mode.
+     *
+     * .zh-cn 该组件为完全受控组件，不支持非受控用法。
+     */
+    checked: boolean;
+    children?: React.ReactNode;
+    onChange?: (checked: boolean) => void;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+}
+declare const CheckableTag: React.FC<CheckableTagProps>;
+export default CheckableTag;

package/es/tag/CheckableTag.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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;
+};
+
+import classNames from 'classnames';
+import * as React from 'react';
+import { ConfigContext } from "../config-provider";
+
+var CheckableTag = function CheckableTag(_a) {
+  var _classNames;
+
+  var customizePrefixCls = _a.prefixCls,
+      className = _a.className,
+      checked = _a.checked,
+      onChange = _a.onChange,
+      onClick = _a.onClick,
+      restProps = __rest(_a, ["prefixCls", "className", "checked", "onChange", "onClick"]);
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var handleClick = function handleClick(e) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(!checked);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+
+  var prefixCls = getPrefixCls('tag', customizePrefixCls);
+  var cls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-checkable"), true), _defineProperty(_classNames, "".concat(prefixCls, "-checkable-checked"), checked), _classNames), className);
+  return /*#__PURE__*/React.createElement("span", _extends({}, restProps, {
+    className: cls,
+    onClick: handleClick
+  }));
+};
+
+export default CheckableTag;

package/es/tag/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
+import type { LiteralUnion } from '../_util/type';
+import CheckableTag from './CheckableTag';
+export { CheckableTagProps } from './CheckableTag';
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    prefixCls?: string;
+    className?: string;
+    color?: LiteralUnion<PresetColorType | PresetStatusColorType, string>;
+    closable?: boolean;
+    closeIcon?: React.ReactNode;
+    /** @deprecated `visible` will be removed in next major version. */
+    visible?: boolean;
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+    style?: React.CSSProperties;
+    icon?: React.ReactNode;
+}
+export interface TagType extends React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>> {
+    CheckableTag: typeof CheckableTag;
+}
+declare const Tag: TagType;
+export default Tag;

package/es/tag/index.js

@@ -0,0 +1,127 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+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;
+};
+
+import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
+import classNames from 'classnames';
+import omit from "rc-util/es/omit";
+import * as React from 'react';
+import { ConfigContext } from "../config-provider";
+import { PresetColorTypes, PresetStatusColorTypes } from "../_util/colors";
+import Wave from "../_util/wave";
+import warning from "../_util/warning";
+import CheckableTag from "./CheckableTag";
+var PresetColorRegex = new RegExp("^(".concat(PresetColorTypes.join('|'), ")(-inverse)?$"));
+var PresetStatusColorRegex = new RegExp("^(".concat(PresetStatusColorTypes.join('|'), ")$"));
+
+var InternalTag = function InternalTag(_a, ref) {
+  var _classNames;
+
+  var customizePrefixCls = _a.prefixCls,
+      className = _a.className,
+      style = _a.style,
+      children = _a.children,
+      icon = _a.icon,
+      color = _a.color,
+      onClose = _a.onClose,
+      closeIcon = _a.closeIcon,
+      _a$closable = _a.closable,
+      closable = _a$closable === void 0 ? false : _a$closable,
+      props = __rest(_a, ["prefixCls", "className", "style", "children", "icon", "color", "onClose", "closeIcon", "closable"]);
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1]; // Warning for deprecated usage
+
+
+  if (process.env.NODE_ENV !== 'production') {
+    process.env.NODE_ENV !== "production" ? warning(!('visible' in props), 'Tag', '`visible` will be removed in next major version, please use `visible && <Tag />` instead.') : void 0;
+  }
+
+  React.useEffect(function () {
+    if ('visible' in props) {
+      setVisible(props.visible);
+    }
+  }, [props.visible]);
+
+  var isPresetColor = function isPresetColor() {
+    if (!color) {
+      return false;
+    }
+
+    return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
+  };
+
+  var tagStyle = _extends({
+    backgroundColor: color && !isPresetColor() ? color : undefined
+  }, style);
+
+  var presetColor = isPresetColor();
+  var prefixCls = getPrefixCls('tag', customizePrefixCls);
+  var tagClassName = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(color), presetColor), _defineProperty(_classNames, "".concat(prefixCls, "-has-color"), color && !presetColor), _defineProperty(_classNames, "".concat(prefixCls, "-hidden"), !visible), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
+
+  var handleCloseClick = function handleCloseClick(e) {
+    e.stopPropagation();
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if (!('visible' in props)) {
+      setVisible(false);
+    }
+  };
+
+  var renderCloseIcon = function renderCloseIcon() {
+    if (closable) {
+      return closeIcon ? /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-close-icon"),
+        onClick: handleCloseClick
+      }, closeIcon) : /*#__PURE__*/React.createElement(CloseOutlined, {
+        className: "".concat(prefixCls, "-close-icon"),
+        onClick: handleCloseClick
+      });
+    }
+
+    return null;
+  };
+
+  var isNeedWave = 'onClick' in props || children && children.type === 'a';
+  var tagProps = omit(props, ['visible']);
+  var iconNode = icon || null;
+  var kids = iconNode ? /*#__PURE__*/React.createElement(React.Fragment, null, iconNode, /*#__PURE__*/React.createElement("span", null, children)) : children;
+  var tagNode = /*#__PURE__*/React.createElement("span", _extends({}, tagProps, {
+    ref: ref,
+    className: tagClassName,
+    style: tagStyle
+  }), kids, renderCloseIcon());
+  return isNeedWave ? /*#__PURE__*/React.createElement(Wave, null, tagNode) : tagNode;
+};
+
+var Tag = /*#__PURE__*/React.forwardRef(InternalTag);
+
+if (process.env.NODE_ENV !== 'production') {
+  Tag.displayName = 'Tag';
+}
+
+Tag.CheckableTag = CheckableTag;
+export default Tag;

package/es/tag/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/default.css";
+import "./index.css";

package/es/tag/style/index-pure.less

@@ -0,0 +1,129 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@tag-prefix-cls: ~'@{ant-prefix}-tag';
+
+.@{tag-prefix-cls} {
+  .reset-component();
+
+  display: inline-block;
+  height: auto;
+  margin-right: 8px;
+  padding: 0 7px;
+  font-size: @tag-font-size;
+  line-height: @tag-line-height;
+  white-space: nowrap;
+  background: @tag-default-bg;
+  border: @border-width-base @border-style-base @border-color-base;
+  border-radius: @tag-border-radius;
+  opacity: 1;
+  transition: all 0.3s;
+
+  &,
+  a,
+  a:hover {
+    color: @tag-default-color;
+  }
+
+  > a:first-child:last-child {
+    display: inline-block;
+    margin: 0 -8px;
+    padding: 0 8px;
+  }
+
+  &-close-icon {
+    margin-left: 3px;
+    color: @text-color-secondary;
+    font-size: 10px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @heading-color;
+    }
+  }
+
+  &-has-color {
+    border-color: transparent;
+    &,
+    a,
+    a:hover,
+    .@{iconfont-css-prefix}-close,
+    .@{iconfont-css-prefix}-close:hover {
+      color: @text-color-inverse;
+    }
+  }
+
+  &-checkable {
+    background-color: transparent;
+    border-color: transparent;
+    cursor: pointer;
+
+    &:not(&-checked):hover {
+      color: @primary-color;
+    }
+
+    &:active,
+    &-checked {
+      color: @text-color-inverse;
+    }
+
+    &-checked {
+      background-color: @primary-6;
+    }
+
+    &:active {
+      background-color: @primary-7;
+    }
+  }
+
+  &-hidden {
+    display: none;
+  }
+
+  // mixin to iterate over colors and create CSS class for each one
+  .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
+    .make-color-classes(@i - 1);
+    @color: extract(@preset-colors, @i);
+    @lightColor: '@{color}-1';
+    @lightBorderColor: '@{color}-3';
+    @darkColor: '@{color}-6';
+    @textColor: '@{color}-7';
+    &-@{color} {
+      color: @@textColor;
+      background: @@lightColor;
+      border-color: @@lightBorderColor;
+    }
+    &-@{color}-inverse {
+      color: @text-color-inverse;
+      background: @@darkColor;
+      border-color: @@darkColor;
+    }
+  }
+
+  .make-status-color-classes(@status, @cssVariableType) {
+    @bgColor: '@{cssVariableType}-color-deprecated-bg';
+    @borderColor: '@{cssVariableType}-color-deprecated-border';
+    @textColor: '@{cssVariableType}-color';
+    &-@{status} {
+      color: @@textColor;
+      background: @@bgColor;
+      border-color: @@borderColor;
+    }
+  }
+
+  .make-color-classes();
+
+  .make-status-color-classes(success, success);
+  .make-status-color-classes(processing, info);
+  .make-status-color-classes(error, error);
+  .make-status-color-classes(warning, warning);
+
+  // To ensure that a space will be placed between character and `Icon`.
+  > .@{iconfont-css-prefix} + span,
+  > span + .@{iconfont-css-prefix} {
+    margin-left: 7px;
+  }
+}
+
+@import './rtl';