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

package/lib/input-number/style/index.d.ts

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

package/lib/input-number/style/index.js

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

package/lib/input-number/style/index.less

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

package/lib/input-number/style/rtl.less

@@ -0,0 +1,71 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
+
+.@{input-number-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-handler {
+    .@{input-number-prefix-cls}-rtl & {
+      border-right: @border-width-base @border-style-base @input-number-handler-border-color;
+      border-left: 0;
+    }
+
+    &-wrap {
+      .@{input-number-prefix-cls}-rtl & {
+        right: auto;
+        left: 0;
+      }
+
+      .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
+        border-right-width: 0;
+      }
+    }
+
+    &-up {
+      .@{input-number-prefix-cls}-rtl & {
+        border-top-right-radius: 0;
+      }
+    }
+
+    &-down {
+      .@{input-number-prefix-cls}-rtl & {
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &-input {
+    .@{input-number-prefix-cls}-rtl & {
+      direction: ltr;
+      text-align: right;
+    }
+  }
+}
+
+// https://github.com/ant-design/ant-design/issues/35870
+.input-group(@input-number-prefix-cls) {
+  > .@{input-number-prefix-cls}-rtl:first-child {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+  }
+  > .@{input-number-prefix-cls}-rtl:last-child {
+    border-radius: @border-radius-base 0 0 @border-radius-base;
+  }
+
+  &-addon {
+    .@{input-number-prefix-cls}-group-rtl &:first-child {
+      border-right: @border-width-base @border-style-base @input-border-color;
+      border-left: 0;
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+    .@{input-number-prefix-cls}-group-rtl &:last-child {
+      border-right: 0;
+      border-left: @border-width-base @border-style-base @input-border-color;
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+    }
+  }
+}

package/lib/input-number/style/status.less

@@ -0,0 +1,29 @@
+@import '../../input/style/mixin';
+
+@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
+
+@input-number-wrapper-cls: @input-number-prefix-cls, ~'@{input-number-prefix-cls}-affix-wrapper';
+
+each(@input-number-wrapper-cls, {
+  .@{value} {
+    &-status-error {
+      .status-color(@value, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
+      .status-color-common(@input-number-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline)
+    }
+
+    &-status-warning {
+      .status-color(@value, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
+      .status-color-common(@input-number-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline)
+    }
+  }
+});
+
+.@{input-number-prefix-cls}-group-wrapper {
+  &-status-error {
+    .group-status-color(@input-number-prefix-cls, @error-color, @error-color);
+  }
+
+  &-status-warning {
+    .group-status-color(@input-number-prefix-cls, @warning-color, @warning-color);
+  }
+}

package/lib/layout/Sider.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface SiderContextProps {
+    siderCollapsed?: boolean;
+}
+export declare const SiderContext: React.Context<SiderContextProps>;
+export type CollapseType = 'clickTrigger' | 'responsive';
+export type SiderTheme = 'light' | 'dark';
+export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    reverseArrow?: boolean;
+    onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+    zeroWidthTriggerStyle?: React.CSSProperties;
+    trigger?: React.ReactNode;
+    width?: number | string;
+    collapsedWidth?: number | string;
+    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    theme?: SiderTheme;
+    onBreakpoint?: (broken: boolean) => void;
+}
+export interface SiderState {
+    collapsed?: boolean;
+    below: boolean;
+}
+declare const Sider: React.ForwardRefExoticComponent<SiderProps & React.RefAttributes<HTMLDivElement>>;
+export default Sider;

package/lib/layout/Sider.js

@@ -0,0 +1,240 @@
+"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.SiderContext = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _BarsOutlined = _interopRequireDefault(require("@ant-design/icons/BarsOutlined"));
+
+var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
+
+var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _isNumeric = _interopRequireDefault(require("../_util/isNumeric"));
+
+var _layout = require("./layout");
+
+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 dimensionMaxMap = {
+  xs: '479.98px',
+  sm: '575.98px',
+  md: '767.98px',
+  lg: '991.98px',
+  xl: '1199.98px',
+  xxl: '1599.98px'
+};
+var SiderContext = /*#__PURE__*/React.createContext({});
+exports.SiderContext = SiderContext;
+
+var generateId = function () {
+  var i = 0;
+  return function () {
+    var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    i += 1;
+    return "".concat(prefix).concat(i);
+  };
+}();
+
+var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var customizePrefixCls = _a.prefixCls,
+      className = _a.className,
+      trigger = _a.trigger,
+      children = _a.children,
+      _a$defaultCollapsed = _a.defaultCollapsed,
+      defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
+      _a$theme = _a.theme,
+      theme = _a$theme === void 0 ? 'dark' : _a$theme,
+      _a$style = _a.style,
+      style = _a$style === void 0 ? {} : _a$style,
+      _a$collapsible = _a.collapsible,
+      collapsible = _a$collapsible === void 0 ? false : _a$collapsible,
+      _a$reverseArrow = _a.reverseArrow,
+      reverseArrow = _a$reverseArrow === void 0 ? false : _a$reverseArrow,
+      _a$width = _a.width,
+      width = _a$width === void 0 ? 200 : _a$width,
+      _a$collapsedWidth = _a.collapsedWidth,
+      collapsedWidth = _a$collapsedWidth === void 0 ? 80 : _a$collapsedWidth,
+      zeroWidthTriggerStyle = _a.zeroWidthTriggerStyle,
+      breakpoint = _a.breakpoint,
+      onCollapse = _a.onCollapse,
+      onBreakpoint = _a.onBreakpoint,
+      props = __rest(_a, ["prefixCls", "className", "trigger", "children", "defaultCollapsed", "theme", "style", "collapsible", "reverseArrow", "width", "collapsedWidth", "zeroWidthTriggerStyle", "breakpoint", "onCollapse", "onBreakpoint"]);
+
+  var _useContext = (0, React.useContext)(_layout.LayoutContext),
+      siderHook = _useContext.siderHook;
+
+  var _useState = (0, React.useState)('collapsed' in props ? props.collapsed : defaultCollapsed),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  var _useState3 = (0, React.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      below = _useState4[0],
+      setBelow = _useState4[1];
+
+  (0, React.useEffect)(function () {
+    if ('collapsed' in props) {
+      setCollapsed(props.collapsed);
+    }
+  }, [props.collapsed]);
+
+  var handleSetCollapsed = function handleSetCollapsed(value, type) {
+    if (!('collapsed' in props)) {
+      setCollapsed(value);
+    }
+
+    onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(value, type);
+  }; // ========================= Responsive =========================
+
+
+  var responsiveHandlerRef = (0, React.useRef)();
+
+  responsiveHandlerRef.current = function (mql) {
+    setBelow(mql.matches);
+    onBreakpoint === null || onBreakpoint === void 0 ? void 0 : onBreakpoint(mql.matches);
+
+    if (collapsed !== mql.matches) {
+      handleSetCollapsed(mql.matches, 'responsive');
+    }
+  };
+
+  (0, React.useEffect)(function () {
+    function responsiveHandler(mql) {
+      return responsiveHandlerRef.current(mql);
+    }
+
+    var mql;
+
+    if (typeof window !== 'undefined') {
+      var _window = window,
+          matchMedia = _window.matchMedia;
+
+      if (matchMedia && breakpoint && breakpoint in dimensionMaxMap) {
+        mql = matchMedia("(max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
+
+        try {
+          mql.addEventListener('change', responsiveHandler);
+        } catch (error) {
+          mql.addListener(responsiveHandler);
+        }
+
+        responsiveHandler(mql);
+      }
+    }
+
+    return function () {
+      try {
+        mql === null || mql === void 0 ? void 0 : mql.removeEventListener('change', responsiveHandler);
+      } catch (error) {
+        mql === null || mql === void 0 ? void 0 : mql.removeListener(responsiveHandler);
+      }
+    };
+  }, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.
+
+  (0, React.useEffect)(function () {
+    var uniqueId = generateId('ant-sider-');
+    siderHook.addSider(uniqueId);
+    return function () {
+      return siderHook.removeSider(uniqueId);
+    };
+  }, []);
+
+  var toggle = function toggle() {
+    handleSetCollapsed(!collapsed, 'clickTrigger');
+  };
+
+  var _useContext2 = (0, React.useContext)(_configProvider.ConfigContext),
+      getPrefixCls = _useContext2.getPrefixCls;
+
+  var renderSider = function renderSider() {
+    var _classNames;
+
+    var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
+    var divProps = (0, _omit["default"])(props, ['collapsed']);
+    var rawWidth = collapsed ? collapsedWidth : width; // use "px" as fallback unit for width
+
+    var siderWidth = (0, _isNumeric["default"])(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth); // special trigger when collapsedWidth == 0
+
+    var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? /*#__PURE__*/React.createElement("span", {
+      onClick: toggle,
+      className: (0, _classnames["default"])("".concat(prefixCls, "-zero-width-trigger"), "".concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left')),
+      style: zeroWidthTriggerStyle
+    }, trigger || /*#__PURE__*/React.createElement(_BarsOutlined["default"], null)) : null;
+    var iconObj = {
+      expanded: reverseArrow ? /*#__PURE__*/React.createElement(_RightOutlined["default"], null) : /*#__PURE__*/React.createElement(_LeftOutlined["default"], null),
+      collapsed: reverseArrow ? /*#__PURE__*/React.createElement(_LeftOutlined["default"], null) : /*#__PURE__*/React.createElement(_RightOutlined["default"], null)
+    };
+    var status = collapsed ? 'collapsed' : 'expanded';
+    var defaultTrigger = iconObj[status];
+    var triggerDom = trigger !== null ? zeroWidthTrigger || /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-trigger"),
+      onClick: toggle,
+      style: {
+        width: siderWidth
+      }
+    }, trigger || defaultTrigger) : null;
+    var divStyle = (0, _extends2["default"])((0, _extends2["default"])({}, style), {
+      flex: "0 0 ".concat(siderWidth),
+      maxWidth: siderWidth,
+      minWidth: siderWidth,
+      width: siderWidth
+    });
+    var siderCls = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-").concat(theme), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-collapsed"), !!collapsed), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-below"), !!below), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), _classNames), className);
+    return /*#__PURE__*/React.createElement("aside", (0, _extends2["default"])({
+      className: siderCls
+    }, divProps, {
+      style: divStyle,
+      ref: ref
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-children")
+    }, children), collapsible || below && zeroWidthTrigger ? triggerDom : null);
+  };
+
+  var contextValue = React.useMemo(function () {
+    return {
+      siderCollapsed: collapsed
+    };
+  }, [collapsed]);
+  return /*#__PURE__*/React.createElement(SiderContext.Provider, {
+    value: contextValue
+  }, renderSider());
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Sider.displayName = 'Sider';
+}
+
+var _default = Sider;
+exports["default"] = _default;

package/lib/layout/index.d.ts

@@ -0,0 +1,13 @@
+import InternalLayout, { Content, Footer, Header } from './layout';
+import Sider from './Sider';
+export { BasicProps as LayoutProps } from './layout';
+export { SiderProps } from './Sider';
+type InternalLayoutType = typeof InternalLayout;
+interface LayoutType extends InternalLayoutType {
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Content: typeof Content;
+    Sider: typeof Sider;
+}
+declare const Layout: LayoutType;
+export default Layout;

package/lib/layout/index.js

@@ -0,0 +1,22 @@
+"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 _layout = _interopRequireWildcard(require("./layout"));
+
+var _Sider = _interopRequireDefault(require("./Sider"));
+
+var Layout = _layout["default"];
+Layout.Header = _layout.Header;
+Layout.Footer = _layout.Footer;
+Layout.Content = _layout.Content;
+Layout.Sider = _Sider["default"];
+var _default = Layout;
+exports["default"] = _default;

package/lib/layout/layout.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface GeneratorProps {
+    suffixCls: string;
+    tagName: 'header' | 'footer' | 'main' | 'section';
+    displayName: string;
+}
+export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    hasSider?: boolean;
+}
+export interface LayoutContextProps {
+    siderHook: {
+        addSider: (id: string) => void;
+        removeSider: (id: string) => void;
+    };
+}
+export declare const LayoutContext: React.Context<LayoutContextProps>;
+declare const Layout: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Header: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Footer: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Content: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+export { Header, Footer, Content };
+export default Layout;

package/lib/layout/layout.js

@@ -0,0 +1,159 @@
+"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.LayoutContext = exports.Header = exports.Footer = exports.Content = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+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 LayoutContext = /*#__PURE__*/React.createContext({
+  siderHook: {
+    addSider: function addSider() {
+      return null;
+    },
+    removeSider: function removeSider() {
+      return null;
+    }
+  }
+});
+exports.LayoutContext = LayoutContext;
+
+function generator(_ref) {
+  var suffixCls = _ref.suffixCls,
+      tagName = _ref.tagName,
+      displayName = _ref.displayName;
+  return function (BasicComponent) {
+    var Adapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _React$useContext = React.useContext(_configProvider.ConfigContext),
+          getPrefixCls = _React$useContext.getPrefixCls;
+
+      var customizePrefixCls = props.prefixCls;
+      var prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
+      return /*#__PURE__*/React.createElement(BasicComponent, (0, _extends2["default"])({
+        ref: ref,
+        prefixCls: prefixCls,
+        tagName: tagName
+      }, props));
+    });
+
+    if (process.env.NODE_ENV !== 'production') {
+      Adapter.displayName = displayName;
+    }
+
+    return Adapter;
+  };
+}
+
+var Basic = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+      className = props.className,
+      children = props.children,
+      tagName = props.tagName,
+      others = __rest(props, ["prefixCls", "className", "children", "tagName"]);
+
+  var classString = (0, _classnames["default"])(prefixCls, className);
+  return /*#__PURE__*/React.createElement(tagName, (0, _extends2["default"])((0, _extends2["default"])({
+    className: classString
+  }, others), {
+    ref: ref
+  }), children);
+});
+var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames;
+
+  var _React$useContext2 = React.useContext(_configProvider.ConfigContext),
+      direction = _React$useContext2.direction;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      siders = _React$useState2[0],
+      setSiders = _React$useState2[1];
+
+  var prefixCls = props.prefixCls,
+      className = props.className,
+      children = props.children,
+      hasSider = props.hasSider,
+      Tag = props.tagName,
+      others = __rest(props, ["prefixCls", "className", "children", "hasSider", "tagName"]);
+
+  var classString = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-has-sider"), typeof hasSider === 'boolean' ? hasSider : siders.length > 0), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
+  var contextValue = React.useMemo(function () {
+    return {
+      siderHook: {
+        addSider: function addSider(id) {
+          setSiders(function (prev) {
+            return [].concat((0, _toConsumableArray2["default"])(prev), [id]);
+          });
+        },
+        removeSider: function removeSider(id) {
+          setSiders(function (prev) {
+            return prev.filter(function (currentId) {
+              return currentId !== id;
+            });
+          });
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Tag, (0, _extends2["default"])({
+    ref: ref,
+    className: classString
+  }, others), children));
+});
+var Layout = generator({
+  suffixCls: 'layout',
+  tagName: 'section',
+  displayName: 'Layout'
+})(BasicLayout);
+var Header = generator({
+  suffixCls: 'layout-header',
+  tagName: 'header',
+  displayName: 'Header'
+})(Basic);
+exports.Header = Header;
+var Footer = generator({
+  suffixCls: 'layout-footer',
+  tagName: 'footer',
+  displayName: 'Footer'
+})(Basic);
+exports.Footer = Footer;
+var Content = generator({
+  suffixCls: 'layout-content',
+  tagName: 'main',
+  displayName: 'Content'
+})(Basic);
+exports.Content = Content;
+var _default = Layout;
+exports["default"] = _default;

package/lib/layout/style/css.js

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