@cloudtower/eagle 0.0.0-commnader-ui-rc-3 → 0.0.0-config-rc-2

package/README.md

@@ -25,32 +25,28 @@ initParrotI18n();
 // Set Up Providers
 ReactDOM.render(
   <React.StrictMode>
-    <KitStoreProvider>
-      <UIKitProvider>
-        <App />
-      <UIKitProvider>
-    </KitStoreProvider>
+    <UIKitProvider>
+      <App />
+    <UIKitProvider>
   </React.StrictMode>,
   document.getElementById("root") as HTMLElement
 );
 ```
 
 ```tsx
-import { useUIKit } from "@cloudtower/eagle";
+import { Button } from "@cloudtower/eagle";
 import React, { useContext } from "react";
 
 const App = () => {
-  // Use Component
-  const kit = useUIKit();
   return (
     <div>
-      <kit.button
+      <Button
         onClick={() => {
           alert("hello");
         }}
       >
         say hello
-      </kit.button>
+      </Button>
     </div>
   );
 };

package/dist/cjs/UIKitProvider/index.js

@@ -5,16 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var parrot = require('@cloudtower/parrot');
 var index = require('../core/message/index.js');
 var legacyAntd = require('../legacy-antd.js');
-var antd = require('antd');
 var enUS = require('antd/lib/locale/en_US');
 var zhCN = require('antd/lib/locale/zh_CN');
+var antd5enUS = require('antd5/lib/locale/en_US');
+var antd5zhCN = require('antd5/lib/locale/zh_CN');
 var React = require('react');
+var index$2 = require('../core/ConfigProvider/index.js');
 var index$1 = require('../core/message-group/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var enUS__default = /*#__PURE__*/_interopDefault(enUS);
 var zhCN__default = /*#__PURE__*/_interopDefault(zhCN);
+var antd5enUS__default = /*#__PURE__*/_interopDefault(antd5enUS);
+var antd5zhCN__default = /*#__PURE__*/_interopDefault(antd5zhCN);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
@@ -39,13 +43,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const kitContext = React.createContext(legacyAntd.antdKit);
 const MessageContext = React.createContext(index.default);
 const UIKitProvider = (props) => {
-  const {
-    children,
-    kit = legacyAntd.antdKit,
-    message,
-    lng = "en-US",
-    getPopupContainer
-  } = props;
+  const { children, kit = legacyAntd.antdKit, message, lng = "en-US", config } = props;
   const batchMessage = React.useMemo(() => {
     if ((message == null ? void 0 : message.batch) != null) {
       return index$1.createBatchMessageMethods(index.default, message.batch);
@@ -67,11 +65,16 @@ const UIKitProvider = (props) => {
     }
   }, [lng]);
   return /* @__PURE__ */ React__default.default.createElement(kitContext.Provider, { value: _kit }, /* @__PURE__ */ React__default.default.createElement(MessageContext.Provider, { value: batchMessage != null ? batchMessage : index.default }, /* @__PURE__ */ React__default.default.createElement(
-    antd.ConfigProvider,
+    index$2.ConfigProvider,
     {
-      autoInsertSpaceInButton: false,
-      locale: lng === "zh-CN" ? zhCN__default.default : enUS__default.default,
-      getPopupContainer
+      antd4Configs: __spreadValues({
+        autoInsertSpaceInButton: false,
+        locale: lng === "zh-CN" ? zhCN__default.default : enUS__default.default
+      }, config == null ? void 0 : config.antd4Configs),
+      antd5Configs: __spreadValues({
+        autoInsertSpaceInButton: false,
+        locale: lng === "zh-CN" ? antd5zhCN__default.default : antd5enUS__default.default
+      }, config == null ? void 0 : config.antd5Configs)
     },
     children
   )));

package/dist/cjs/core/Antd5Anchor/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var antd5 = require('antd5');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Antd5Anchor = (props) => /* @__PURE__ */ React__default.default.createElement(antd5.Anchor, __spreadValues({}, props));
+Antd5Anchor.Link = antd5.Anchor.Link;
+var Antd5Anchor$1 = Antd5Anchor;
+
+module.exports = Antd5Anchor$1;

package/dist/cjs/core/Antd5Dropdown/Antd5Dropdown.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var antd5 = require('antd5');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Antd5Dropdown = (props) => {
+  return /* @__PURE__ */ React__default.default.createElement(antd5.Dropdown, __spreadValues({}, props));
+};
+
+exports.Antd5Dropdown = Antd5Dropdown;

package/dist/cjs/core/Avatar/index.js

@@ -3,21 +3,30 @@
 var core = require('@linaria/core');
 var react = require('@linaria/react');
 var React = require('react');
+var color = require('../../styles/token/color.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+const _exp = /*#__PURE__*/() => ({
+  background
+}) => background;
 const AvatarWrapper = /*#__PURE__*/react.styled('span')({
   name: "AvatarWrapper",
   class: "E_a1b5xrg3",
-  propsAsIs: false
+  propsAsIs: false,
+  vars: {
+    "a1b5xrg3-0": [_exp()]
+  }
 });
 const Avatar = ({
   username,
-  className
+  className,
+  background = "light-blue"
 }) => {
   return /* @__PURE__ */React__default.default.createElement(AvatarWrapper, {
+    background: color.Color.gradient[background] || background,
     className: core.cx(className, "user-icon btn-item")
   }, /* @__PURE__ */React__default.default.createElement("span", {
     className: "user-icon-inner"

package/dist/cjs/core/Cascader/cascader.style.js

@@ -1,15 +1,16 @@
 'use strict';
 
-const DoubleRowOptionStyleWrapper = "E_drhfj7c";
-const CascaderDefaultOptionLabel = "E_ct9qoak";
-const CascaderNotData = "E_crhnxq5";
-const CascaderDefaultHeaderSearch = "E_c1iq43vd";
-const CascaderInputStyle = "E_c1h2v0a8";
-const CascaderDefaultHeaderContainer = "E_cgzzd7y";
-const CascaderDefaultHeader = "E_c1ec3mnt";
-const CascaderDropdown = "E_c1iye0zj";
-const CascaderSmallDropdown = "E_ckhyuyx";
-const CascaderLargeDropdown = "E_c1fmq9lv";
+const Hide = "E_hrhfj7c";
+const DoubleRowOptionStyleWrapper = "E_dt9qoak";
+const CascaderDefaultOptionLabel = "E_crhnxq5";
+const CascaderNotData = "E_c1iq43vd";
+const CascaderDefaultHeaderSearch = "E_c1h2v0a8";
+const CascaderInputStyle = "E_cgzzd7y";
+const CascaderDefaultHeaderContainer = "E_c1ec3mnt";
+const CascaderDefaultHeader = "E_c1iye0zj";
+const CascaderDropdown = "E_ckhyuyx";
+const CascaderSmallDropdown = "E_c1fmq9lv";
+const CascaderLargeDropdown = "E_c1evusvc";
 
 exports.CascaderDefaultHeader = CascaderDefaultHeader;
 exports.CascaderDefaultHeaderContainer = CascaderDefaultHeaderContainer;
@@ -21,3 +22,4 @@ exports.CascaderLargeDropdown = CascaderLargeDropdown;
 exports.CascaderNotData = CascaderNotData;
 exports.CascaderSmallDropdown = CascaderSmallDropdown;
 exports.DoubleRowOptionStyleWrapper = DoubleRowOptionStyleWrapper;
+exports.Hide = Hide;

package/dist/cjs/core/Cascader/cascader.widget.js

@@ -72,8 +72,28 @@ const CascaderDoubleRowOption = ({ leftTop, leftBottom, rightTop, rightBottom, r
       className: core.cx(cascader_style.DoubleRowOptionStyleWrapper, rootClassName),
       gap: 6
     },
-    /* @__PURE__ */ React__default.default.createElement(antd5.Flex, { justify: "space-between", gap: 8 }, /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l2_medium, "top", "left") }, leftTop), /* @__PURE__ */ React__default.default.createElement("div", null, rightTop)),
-    /* @__PURE__ */ React__default.default.createElement(antd5.Flex, { justify: "space-between", className: index$2.Typo.Label.l4_regular, gap: 8 }, /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l4_regular, "bottom", "left") }, leftBottom), /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l4_regular, "bottom") }, rightBottom))
+    /* @__PURE__ */ React__default.default.createElement(
+      antd5.Flex,
+      {
+        justify: "space-between",
+        className: !leftTop && !rightTop ? cascader_style.Hide : "",
+        gap: 8
+      },
+      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l2_medium, "top", "left") }, leftTop),
+      /* @__PURE__ */ React__default.default.createElement("div", null, rightTop)
+    ),
+    /* @__PURE__ */ React__default.default.createElement(
+      antd5.Flex,
+      {
+        justify: "space-between",
+        className: cs__default.default(index$2.Typo.Label.l4_regular, {
+          [cascader_style.Hide]: !leftBottom && !rightBottom
+        }),
+        gap: 8
+      },
+      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l4_regular, "bottom", "left") }, leftBottom),
+      /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default(index$2.Typo.Label.l4_regular, "bottom") }, rightBottom)
+    )
   );
 };
 const CascaderOptionWithCount = ({ label, count }) => {

package/dist/cjs/core/Cascader/index.js

@@ -86,6 +86,7 @@ exports.CascaderLargeDropdown = cascader_style.CascaderLargeDropdown;
 exports.CascaderNotData = cascader_style.CascaderNotData;
 exports.CascaderSmallDropdown = cascader_style.CascaderSmallDropdown;
 exports.DoubleRowOptionStyleWrapper = cascader_style.DoubleRowOptionStyleWrapper;
+exports.Hide = cascader_style.Hide;
 exports.CascaderDoubleRowOption = cascader_widget.CascaderDoubleRowOption;
 exports.CascaderOptionWithCount = cascader_widget.CascaderOptionWithCount;
 exports.NotDataContent = cascader_widget.NotDataContent;

package/dist/cjs/core/ConfigProvider/index.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var antd = require('antd');
+var antd5 = require('antd5');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const ConfigProvider = ({
+  antd5Configs,
+  antd4Configs,
+  children
+}) => {
+  return /* @__PURE__ */ React__default.default.createElement(antd5.ConfigProvider, __spreadValues({}, antd5Configs), /* @__PURE__ */ React__default.default.createElement(antd.ConfigProvider, __spreadValues({}, antd4Configs), children));
+};
+
+exports.ConfigProvider = ConfigProvider;

package/dist/cjs/{coreX/TruncatedTextWithTooltip → core/InputPassword}/index.js

@@ -1,11 +1,17 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var react = require('@linaria/react');
-var index = require('../../core/Tooltip/index.js');
+var index$1 = require('../Styled/index.js');
+var index = require('../Typo/index.js');
+var antd = require('antd');
+var cs = require('classnames');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var cs__default = /*#__PURE__*/_interopDefault(cs);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
@@ -36,38 +42,31 @@ var __objRest = (source, exclude) => {
   }
   return target;
 };
-const TruncatedTextWrapper = /*#__PURE__*/react.styled('div')({
-  name: "TruncatedTextWrapper",
-  class: "E_tje3huy",
-  propsAsIs: false
+const _exp = /*#__PURE__*/() => antd.Input.Password;
+const AntdPasswordInputStyled = /*#__PURE__*/react.styled(_exp())({
+  name: "AntdPasswordInputStyled",
+  class: "E_atcz0kf",
+  propsAsIs: true
 });
-const TruncatedTextWithTooltip = props => {
-  const _a = props,
+const InputPassword = _a => {
+  var _b = _a,
     {
-      text,
-      textWrapperCls
-    } = _a,
-    restProps = __objRest(_a, ["text", "textWrapperCls"]);
-  const [isTextTruncated, setTextTruncated] = React.useState(false);
-  const textWrapper = React.useRef(null);
-  React.useLayoutEffect(() => {
-    const ele = textWrapper.current;
-    if (ele) {
-      const parent = ele.parentElement;
-      if (parent && (parent == null ? void 0 : parent.scrollWidth) > (parent == null ? void 0 : parent.clientWidth)) {
-        setTextTruncated(true);
-      }
-    }
-  }, [text]);
-  const renderName = () => /* @__PURE__ */React__default.default.createElement("span", {
-    ref: textWrapper,
-    className: textWrapperCls
-  }, text);
-  return isTextTruncated ? /* @__PURE__ */React__default.default.createElement(index, __spreadProps(__spreadValues({}, restProps), {
-    title: text,
-    "data-testid": "text-tooltip"
-  }), /* @__PURE__ */React__default.default.createElement(TruncatedTextWrapper, null, renderName())) : renderName();
+      size = "small",
+      error,
+      className
+    } = _b,
+    props = __objRest(_b, ["size", "error", "className"]);
+  const typo = {
+    large: index.Typo.Label.l2_regular,
+    middle: index.Typo.Label.l3_regular,
+    small: index.Typo.Label.l4_regular
+  }[size];
+  return /* @__PURE__ */React__default.default.createElement(AntdPasswordInputStyled, __spreadProps(__spreadValues({}, props), {
+    size,
+    className: cs__default.default(className, index$1.InputStyle, typo, error && "error")
+  }));
 };
-var TruncatedTextWithTooltip$1 = TruncatedTextWithTooltip;
+var InputPassword$1 = InputPassword;
 
-module.exports = TruncatedTextWithTooltip$1;
+exports.AntdPasswordInputStyled = AntdPasswordInputStyled;
+exports.default = InputPassword$1;

package/dist/cjs/core/KitStoreProvider/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('../../store/index.js');
 var React = require('react');
 var reactRedux = require('react-redux');
+var redux = require('redux');
+var modal = require('../../store/modal.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,12 +18,51 @@ const ctx = React.createContext({
 });
 const KitStoreProvider = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ React__default.default.createElement(reactRedux.Provider, { context: ctx, store: index.UIKitStore }, children);
+  const storeRef = React.useRef(redux.createStore(index.rootReducer));
+  return /* @__PURE__ */ React__default.default.createElement(reactRedux.Provider, { context: ctx, store: storeRef.current }, children);
 };
 var KitStoreProvider$1 = KitStoreProvider;
 const useKitDispatch = reactRedux.createDispatchHook(ctx);
 const useKitSelector = reactRedux.createSelectorHook(ctx);
+const usePushModal = () => {
+  const dispatch = useKitDispatch();
+  const pushModal = React.useCallback(
+    (modal$1) => {
+      dispatch({
+        type: modal.ModalActions.PUSH_MODAL,
+        payload: modal$1
+      });
+    },
+    [dispatch]
+  );
+  return pushModal;
+};
+const useCloseModal = () => {
+  const dispatch = useKitDispatch();
+  const closeModal = React.useCallback(
+    (id) => {
+      dispatch({
+        type: modal.ModalActions.CLOSE_MODAL,
+        id
+      });
+    },
+    [dispatch]
+  );
+  return closeModal;
+};
+const usePopModal = () => {
+  const dispatch = useKitDispatch();
+  const popModal = React.useCallback(() => {
+    dispatch({
+      type: modal.ModalActions.POP_MODAL
+    });
+  }, [dispatch]);
+  return popModal;
+};
 
 exports.default = KitStoreProvider$1;
+exports.useCloseModal = useCloseModal;
 exports.useKitDispatch = useKitDispatch;
 exports.useKitSelector = useKitSelector;
+exports.usePopModal = usePopModal;
+exports.usePushModal = usePushModal;

package/dist/cjs/core/Modal/index.js

@@ -68,7 +68,8 @@ const Modal = (props) => {
     width,
     showCancel = true,
     showOk = true,
-    afterClose
+    afterClose,
+    closeIcon
   } = _a, restProps = __objRest(_a, [
     "error",
     "okText",
@@ -87,7 +88,8 @@ const Modal = (props) => {
     "width",
     "showCancel",
     "showOk",
-    "afterClose"
+    "afterClose",
+    "closeIcon"
   ]);
   const stack = index.useKitSelector(
     (state) => state.modal.stack
@@ -137,7 +139,7 @@ const Modal = (props) => {
         onCancel == null ? void 0 : onCancel(e);
         transitionClass.current = fullscreen ? "" : "modal-zoom";
       },
-      closeIcon: /* @__PURE__ */ React__default.default.createElement(icons.CloseCircleFilled, null),
+      closeIcon: closeIcon != null ? closeIcon : /* @__PURE__ */ React__default.default.createElement(icons.CloseCircleFilled, null),
       destroyOnClose: true,
       focusTriggerAfterClose: false,
       transitionName: transitionClass.current

package/dist/cjs/core/ModalStack/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var index = require('../KitStoreProvider/index.js');
-var index$1 = require('../../store/index.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,6 +30,7 @@ const ModalStack = () => {
   const stack = index.useKitSelector(
     (state) => state.modal.stack
   );
+  const closeModal = index.useCloseModal();
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, stack.map((modal) => /* @__PURE__ */ React__default.default.createElement(
     modal.component,
     __spreadProps(__spreadValues({}, modal.props), {
@@ -40,7 +40,7 @@ const ModalStack = () => {
         if ((_a = modal.props) == null ? void 0 : _a.onClose) {
           modal.props.onClose();
         }
-        index$1.closeModal(modal.id);
+        closeModal(modal.id);
       },
       key: modal.id
     })

package/dist/cjs/core/Progress/components.js

@@ -60,7 +60,7 @@ const StatusIconMap = {
   failed: /* @__PURE__ */React__default.default.createElement(iconsReact.XmarkFailed16RedIcon, null),
   paused: /* @__PURE__ */React__default.default.createElement(iconsReact.NoticeTriangleFill16YellowIcon, null),
   active: /* @__PURE__ */React__default.default.createElement(index$2, {
-    src: iconsReact.LoadingBlue16Icon,
+    src: iconsReact.Loading16GradientBlueIcon,
     isRotate: true
   })
 };

package/dist/cjs/core/Table/TableSkeleton.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const TableLoadingStyle = "E_t1g36k2w";
+const TableSkeleton = props => {
+  const {
+    rowsCount = 50,
+    headerHeight = 48,
+    itemHeight = 40
+  } = props;
+  const rows = React.useMemo(() => Array.from({
+    length: rowsCount
+  }, (r, i) => i), [rowsCount]);
+  return /* @__PURE__ */React__default.default.createElement("div", {
+    className: `${TableLoadingStyle} table-loading`
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    className: "table-loading-header table-loading-item",
+    style: {
+      height: headerHeight
+    }
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    className: "checkbox-loading"
+  }), /* @__PURE__ */React__default.default.createElement("div", {
+    className: "td-loading"
+  }), /* @__PURE__ */React__default.default.createElement("div", {
+    className: "td-loading"
+  }), /* @__PURE__ */React__default.default.createElement("div", {
+    className: "td-loading"
+  })), rows.map(i => /* @__PURE__ */React__default.default.createElement("div", {
+    key: i,
+    className: "table-loading-item",
+    style: {
+      height: itemHeight
+    }
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    className: "checkbox-loading"
+  }), /* @__PURE__ */React__default.default.createElement("div", {
+    className: "td-loading"
+  }), /* @__PURE__ */React__default.default.createElement("div", {
+    className: "td-loading"
+  }), /* @__PURE__ */React__default.default.createElement("div", {
+    className: "td-loading"
+  }))));
+};
+
+exports.TableSkeleton = TableSkeleton;

package/dist/cjs/core/Table/index.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@linaria/core');
-var index = require('../Loading/index.js');
 var common = require('./common.js');
 var TableWidget = require('./TableWidget.js');
 var antd = require('antd');
 var cs = require('classnames');
 var React = require('react');
+var TableSkeleton = require('./TableSkeleton.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -36,12 +36,13 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const TableContainerStyle = "E_tc97u5y";
-const tableStyleCover = "E_tfzf37v";
+const emptyTableStyle = "E_efzf37v";
+const tableStyleCover = "E_t1fisho6";
 const Table = props => {
   const {
-    loading,
+    loading = false,
     error,
-    dataSource,
+    dataSource: _dataSource,
     columns,
     onSorterChange,
     onRowClick,
@@ -52,14 +53,16 @@ const Table = props => {
     rowSelection,
     empty,
     tableLayout = "fixed",
-    initLoading,
+    // FIXME Should be removed at 0.30.x
+    initLoading = false,
     rowKey,
     wrapper,
     pagination,
-    onRow
+    onRow,
+    skeletonProps
   } = props;
   const orderRef = React.useRef(null);
-  const hasScrollBard = common.useTableBodyHasScrollBar(wrapper, dataSource);
+  const hasScrollBard = common.useTableBodyHasScrollBar(wrapper, _dataSource);
   const _columns = React.useMemo(() => columns.map(column => {
     const _column = __spreadValues({}, column);
     if (_column.sorter && typeof _column.title !== "function") {
@@ -73,19 +76,37 @@ const Table = props => {
     }
     return _column;
   }), [columns]);
+  const dataSource = React.useMemo(() => {
+    if (loading) {
+      return _dataSource;
+    }
+    if (!!error) {
+      return [];
+    }
+    return _dataSource != null ? _dataSource : [];
+  }, [_dataSource, error, loading]);
+  const emptyText = React.useMemo(() => {
+    if (loading) {
+      return "";
+    }
+    if (!!error) {
+      return error;
+    }
+    return empty;
+  }, [empty, error, loading]);
   return /* @__PURE__ */React__default.default.createElement("div", {
     className: core.cx(TableContainerStyle, "table-container", !hasScrollBard && "no-scroll-bar")
   }, /* @__PURE__ */React__default.default.createElement(antd.Table, {
-    className: cs__default.default(tableStyleCover, !(dataSource == null ? void 0 : dataSource.length) && "empty-table", initLoading && "table-init-loading", rowSelection && "has-selection"),
+    className: cs__default.default(tableStyleCover, !(dataSource == null ? void 0 : dataSource.length) && emptyTableStyle, rowSelection && "has-selection"),
     bordered,
     loading: {
-      spinning: loading,
-      indicator: initLoading ? /* @__PURE__ */React__default.default.createElement(TableWidget.TableLoading, null) : /* @__PURE__ */React__default.default.createElement(index, null)
+      spinning: loading || initLoading,
+      indicator: /* @__PURE__ */React__default.default.createElement(TableSkeleton.TableSkeleton, __spreadValues({}, skeletonProps))
     },
     locale: {
-      emptyText: error || /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, loading ? "" : empty)
+      emptyText
     },
-    dataSource: dataSource || [],
+    dataSource,
     pagination: pagination || false,
     columns: _columns,
     components,
@@ -116,5 +137,7 @@ exports.ColumnTitle = TableWidget.ColumnTitle;
 exports.EmptyRowMenu = TableWidget.EmptyRowMenu;
 exports.KitTableContext = TableWidget.KitTableContext;
 exports.TableLoading = TableWidget.TableLoading;
+exports.TableSkeleton = TableSkeleton.TableSkeleton;
 exports.default = Table$1;
+exports.emptyTableStyle = emptyTableStyle;
 exports.tableStyleCover = tableStyleCover;