@infomaximum/ui-kit 0.14.10 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BaseTooltip/hooks/useCustomFloating.d.ts +1 -1
- package/dist/components/Button/Button.js +7 -4
- package/dist/components/Button/Button.styles.js +1 -1
- package/dist/components/Button/Button.types.d.ts +6 -0
- package/dist/components/Checkbox/Checkbox.styles.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.styles.js +1 -0
- package/dist/components/Spin/Spin.d.ts +2 -0
- package/dist/components/Spin/Spin.js +86 -0
- package/dist/components/Spin/Spin.styles.d.ts +64 -0
- package/dist/components/Spin/Spin.styles.js +66 -0
- package/dist/components/Spin/Spin.tokens.d.ts +6 -0
- package/dist/components/Spin/Spin.tokens.js +8 -0
- package/dist/components/Spin/Spin.types.d.ts +9 -0
- package/dist/components/Spin/Spin.utils.d.ts +4 -0
- package/dist/components/Spin/Spin.utils.js +11 -0
- package/dist/components/Spin/docs/FullscreenExample.d.ts +2 -0
- package/dist/components/Spin/index.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/utils/converter/common.d.ts +1 -0
- package/dist/utils/converter/common.js +4 -0
- package/dist/utils/converter/index.d.ts +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -18,11 +18,11 @@ export declare const useCustomFloating: ({ placement, autoAdjustOverflow, withAr
|
|
|
18
18
|
x: number;
|
|
19
19
|
y: number;
|
|
20
20
|
placement: import('@floating-ui/utils').Placement;
|
|
21
|
-
floatingStyles: React.CSSProperties;
|
|
22
21
|
strategy: import('@floating-ui/utils').Strategy;
|
|
23
22
|
middlewareData: import('@floating-ui/core').MiddlewareData;
|
|
24
23
|
isPositioned: boolean;
|
|
25
24
|
update: () => void;
|
|
25
|
+
floatingStyles: React.CSSProperties;
|
|
26
26
|
open: boolean;
|
|
27
27
|
onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
|
|
28
28
|
events: import('@floating-ui/react').FloatingEvents;
|
|
@@ -6,6 +6,7 @@ import { isUndefined } from "lodash-es";
|
|
|
6
6
|
import { getVariantAndColorByType, defaultLoadingIconTestIdSuffix, defaultLoadingIconTestId, defaultButtonTestId } from "./Button.utils.js";
|
|
7
7
|
import { useTheme } from "../../hooks/useTheme/useTheme.js";
|
|
8
8
|
import { LoadingOutlined } from "../../icons/icons/LoadingOutlined.js";
|
|
9
|
+
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
9
10
|
const ButtonComponent = ({
|
|
10
11
|
className,
|
|
11
12
|
type,
|
|
@@ -21,6 +22,7 @@ const ButtonComponent = ({
|
|
|
21
22
|
href,
|
|
22
23
|
onClick,
|
|
23
24
|
testId,
|
|
25
|
+
tooltip,
|
|
24
26
|
...standardAttributes
|
|
25
27
|
}) => {
|
|
26
28
|
var _a, _b, _c, _d, _e;
|
|
@@ -39,16 +41,17 @@ const ButtonComponent = ({
|
|
|
39
41
|
disabled,
|
|
40
42
|
hasIconOnly: isUndefined(children) && !isUndefined(icon)
|
|
41
43
|
});
|
|
42
|
-
const currentIcon = currentLoading || icon ? /* @__PURE__ */ jsx("span", { css: [buttonDefaultStyle.iconWrapper(theme), (_c = styles == null ? void 0 : styles.iconWrapper) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:currentIcon;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
44
|
+
const currentIcon = currentLoading || icon ? /* @__PURE__ */ jsx("span", { css: [buttonDefaultStyle.iconWrapper(theme), (_c = styles == null ? void 0 : styles.iconWrapper) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:currentIcon;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURZIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFByb3BzV2l0aENoaWxkcmVuLCBGQyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBCdXR0b25Qcm9wcyB9IGZyb20gXCIuL0J1dHRvbi50eXBlc1wiO1xuaW1wb3J0IHsgZ2V0QnV0dG9uRGVmYXVsdFN0eWxlIH0gZnJvbSBcIi4vQnV0dG9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHdpdGhUaGVtZVByb3ZpZGVyIH0gZnJvbSBcImhvY3Mvd2l0aFRoZW1lUHJvdmlkZXJcIjtcbmltcG9ydCB7IExvYWRpbmdPdXRsaW5lZCB9IGZyb20gXCJpY29ucy9pY29uc1wiO1xuaW1wb3J0IHsgdXNlTG9hZGluZ0RlbGF5IH0gZnJvbSBcImhvb2tzL3VzZUxvYWRpbmdEZWxheVwiO1xuaW1wb3J0IHsgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQge1xuICBkZWZhdWx0QnV0dG9uVGVzdElkLFxuICBkZWZhdWx0TG9hZGluZ0ljb25UZXN0SWQsXG4gIGRlZmF1bHRMb2FkaW5nSWNvblRlc3RJZFN1ZmZpeCxcbiAgZ2V0VmFyaWFudEFuZENvbG9yQnlUeXBlLFxufSBmcm9tIFwiLi9CdXR0b24udXRpbHNcIjtcbmltcG9ydCB7IFRvb2x0aXAgfSBmcm9tIFwiLi4vVG9vbHRpcFwiO1xuXG5jb25zdCBCdXR0b25Db21wb25lbnQ6IEZDPFByb3BzV2l0aENoaWxkcmVuPEJ1dHRvblByb3BzPj4gPSAoe1xuICBjbGFzc05hbWUsXG4gIHR5cGUsXG4gIHZhcmlhbnQsXG4gIGNvbG9yLFxuICBsb2FkaW5nID0gZmFsc2UsXG4gIGRpc2FibGVkID0gZmFsc2UsXG4gIGJsb2NrID0gZmFsc2UsXG4gIHN0eWxlcyxcbiAgY2hpbGRyZW4sXG4gIGljb24sXG4gIGljb25Qb3NpdGlvbiA9IFwic3RhcnRcIixcbiAgaHJlZixcbiAgb25DbGljayxcbiAgdGVzdElkLFxuICB0b29sdGlwLFxuICAuLi5zdGFuZGFyZEF0dHJpYnV0ZXNcbn0pID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7IGN1cnJlbnRMb2FkaW5nLCBpc0RlbGF5IH0gPSB1c2VMb2FkaW5nRGVsYXkobG9hZGluZyk7XG5cbiAgY29uc3QgY3VycmVudFZhcmlhbnQgPSB2YXJpYW50ID8/IGdldFZhcmlhbnRBbmRDb2xvckJ5VHlwZSh0eXBlKT8udmFyaWFudCA/PyBcIm91dGxpbmVkXCI7XG4gIGNvbnN0IGN1cnJlbnRDb2xvciA9IGNvbG9yID8/IGdldFZhcmlhbnRBbmRDb2xvckJ5VHlwZSh0eXBlKT8uY29sb3IgPz8gXCJkZWZhdWx0XCI7XG5cbiAgY29uc3QgYnV0dG9uRGVmYXVsdFN0eWxlID0gZ2V0QnV0dG9uRGVmYXVsdFN0eWxlKHtcbiAgICB2YXJpYW50OiBjdXJyZW50VmFyaWFudCxcbiAgICBjb2xvcjogY3VycmVudENvbG9yLFxuICAgIGxvYWRpbmc6IGN1cnJlbnRMb2FkaW5nLFxuICAgIGJsb2NrLFxuICAgIGRpc2FibGVkLFxuICAgIGhhc0ljb25Pbmx5OiBpc1VuZGVmaW5lZChjaGlsZHJlbikgJiYgIWlzVW5kZWZpbmVkKGljb24pLFxuICB9KTtcblxuICBjb25zdCBjdXJyZW50SWNvbiA9XG4gICAgY3VycmVudExvYWRpbmcgfHwgaWNvbiA/IChcbiAgICAgIDxzcGFuIGNzcz17W2J1dHRvbkRlZmF1bHRTdHlsZS5pY29uV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uaWNvbldyYXBwZXI/Lih0aGVtZSldfT5cbiAgICAgICAge2N1cnJlbnRMb2FkaW5nID8gKFxuICAgICAgICAgIDxMb2FkaW5nT3V0bGluZWRcbiAgICAgICAgICAgIHRlc3QtaWQ9e1xuICAgICAgICAgICAgICB0ZXN0SWQgPyBgJHt0ZXN0SWR9JHtkZWZhdWx0TG9hZGluZ0ljb25UZXN0SWRTdWZmaXh9YCA6IGRlZmF1bHRMb2FkaW5nSWNvblRlc3RJZFxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgaWNvblxuICAgICAgICApfVxuICAgICAgPC9zcGFuPlxuICAgICkgOiBudWxsO1xuXG4gIGNvbnN0IGNvbnRlbnQgPSAoXG4gICAgPD5cbiAgICAgIHtpY29uUG9zaXRpb24gPT09IFwic3RhcnRcIiAmJiBjdXJyZW50SWNvbn1cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtpY29uUG9zaXRpb24gPT09IFwiZW5kXCIgJiYgY3VycmVudEljb259XG4gICAgPC8+XG4gICk7XG5cbiAgY29uc3QgYnV0dG9uRWxlbWVudCA9XG4gICAgY3VycmVudFZhcmlhbnQgPT09IFwibGlua1wiID8gKFxuICAgICAgPGFcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGNzcz17W2J1dHRvbkRlZmF1bHRTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdGVzdC1pZD17dGVzdElkID8/IGRlZmF1bHRCdXR0b25UZXN0SWR9XG4gICAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICA+XG4gICAgICAgIHtjb250ZW50fVxuICAgICAgPC9hPlxuICAgICkgOiAoXG4gICAgICA8YnV0dG9uXG4gICAgICAgIHsuLi5zdGFuZGFyZEF0dHJpYnV0ZXN9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBjc3M9e1tidXR0b25EZWZhdWx0U3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZCB8fCBjdXJyZW50TG9hZGluZyB8fCBpc0RlbGF5fVxuICAgICAgICB0ZXN0LWlkPXt0ZXN0SWQgPz8gZGVmYXVsdEJ1dHRvblRlc3RJZH1cbiAgICAgID5cbiAgICAgICAge2NvbnRlbnR9XG4gICAgICA8L2J1dHRvbj5cbiAgICApO1xuXG4gIGlmICh0b29sdGlwICYmIHRvb2x0aXAudGl0bGUpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFRvb2x0aXAgdGl0bGU9e3Rvb2x0aXAudGl0bGV9IHBsYWNlbWVudD17dG9vbHRpcC5wbGFjZW1lbnR9IGFsaWduPXt0b29sdGlwLmFsaWdufT5cbiAgICAgICAge2J1dHRvbkVsZW1lbnR9XG4gICAgICA8L1Rvb2x0aXA+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiBidXR0b25FbGVtZW50O1xufTtcblxuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IHdpdGhUaGVtZVByb3ZpZGVyPEJ1dHRvblByb3BzPihCdXR0b25Db21wb25lbnQpO1xuIl19 */"], children: currentLoading ? /* @__PURE__ */ jsx(LoadingOutlined, { "test-id": testId ? `${testId}${defaultLoadingIconTestIdSuffix}` : defaultLoadingIconTestId }) : icon }) : null;
|
|
43
45
|
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
44
46
|
iconPosition === "start" && currentIcon,
|
|
45
47
|
children,
|
|
46
48
|
iconPosition === "end" && currentIcon
|
|
47
49
|
] });
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
const buttonElement = currentVariant === "link" ? /* @__PURE__ */ jsx("a", { className, css: [buttonDefaultStyle.wrapper(theme), (_d = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _d.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:buttonElement;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEVRIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFByb3BzV2l0aENoaWxkcmVuLCBGQyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBCdXR0b25Qcm9wcyB9IGZyb20gXCIuL0J1dHRvbi50eXBlc1wiO1xuaW1wb3J0IHsgZ2V0QnV0dG9uRGVmYXVsdFN0eWxlIH0gZnJvbSBcIi4vQnV0dG9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHdpdGhUaGVtZVByb3ZpZGVyIH0gZnJvbSBcImhvY3Mvd2l0aFRoZW1lUHJvdmlkZXJcIjtcbmltcG9ydCB7IExvYWRpbmdPdXRsaW5lZCB9IGZyb20gXCJpY29ucy9pY29uc1wiO1xuaW1wb3J0IHsgdXNlTG9hZGluZ0RlbGF5IH0gZnJvbSBcImhvb2tzL3VzZUxvYWRpbmdEZWxheVwiO1xuaW1wb3J0IHsgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQge1xuICBkZWZhdWx0QnV0dG9uVGVzdElkLFxuICBkZWZhdWx0TG9hZGluZ0ljb25UZXN0SWQsXG4gIGRlZmF1bHRMb2FkaW5nSWNvblRlc3RJZFN1ZmZpeCxcbiAgZ2V0VmFyaWFudEFuZENvbG9yQnlUeXBlLFxufSBmcm9tIFwiLi9CdXR0b24udXRpbHNcIjtcbmltcG9ydCB7IFRvb2x0aXAgfSBmcm9tIFwiLi4vVG9vbHRpcFwiO1xuXG5jb25zdCBCdXR0b25Db21wb25lbnQ6IEZDPFByb3BzV2l0aENoaWxkcmVuPEJ1dHRvblByb3BzPj4gPSAoe1xuICBjbGFzc05hbWUsXG4gIHR5cGUsXG4gIHZhcmlhbnQsXG4gIGNvbG9yLFxuICBsb2FkaW5nID0gZmFsc2UsXG4gIGRpc2FibGVkID0gZmFsc2UsXG4gIGJsb2NrID0gZmFsc2UsXG4gIHN0eWxlcyxcbiAgY2hpbGRyZW4sXG4gIGljb24sXG4gIGljb25Qb3NpdGlvbiA9IFwic3RhcnRcIixcbiAgaHJlZixcbiAgb25DbGljayxcbiAgdGVzdElkLFxuICB0b29sdGlwLFxuICAuLi5zdGFuZGFyZEF0dHJpYnV0ZXNcbn0pID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7IGN1cnJlbnRMb2FkaW5nLCBpc0RlbGF5IH0gPSB1c2VMb2FkaW5nRGVsYXkobG9hZGluZyk7XG5cbiAgY29uc3QgY3VycmVudFZhcmlhbnQgPSB2YXJpYW50ID8/IGdldFZhcmlhbnRBbmRDb2xvckJ5VHlwZSh0eXBlKT8udmFyaWFudCA/PyBcIm91dGxpbmVkXCI7XG4gIGNvbnN0IGN1cnJlbnRDb2xvciA9IGNvbG9yID8/IGdldFZhcmlhbnRBbmRDb2xvckJ5VHlwZSh0eXBlKT8uY29sb3IgPz8gXCJkZWZhdWx0XCI7XG5cbiAgY29uc3QgYnV0dG9uRGVmYXVsdFN0eWxlID0gZ2V0QnV0dG9uRGVmYXVsdFN0eWxlKHtcbiAgICB2YXJpYW50OiBjdXJyZW50VmFyaWFudCxcbiAgICBjb2xvcjogY3VycmVudENvbG9yLFxuICAgIGxvYWRpbmc6IGN1cnJlbnRMb2FkaW5nLFxuICAgIGJsb2NrLFxuICAgIGRpc2FibGVkLFxuICAgIGhhc0ljb25Pbmx5OiBpc1VuZGVmaW5lZChjaGlsZHJlbikgJiYgIWlzVW5kZWZpbmVkKGljb24pLFxuICB9KTtcblxuICBjb25zdCBjdXJyZW50SWNvbiA9XG4gICAgY3VycmVudExvYWRpbmcgfHwgaWNvbiA/IChcbiAgICAgIDxzcGFuIGNzcz17W2J1dHRvbkRlZmF1bHRTdHlsZS5pY29uV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uaWNvbldyYXBwZXI/Lih0aGVtZSldfT5cbiAgICAgICAge2N1cnJlbnRMb2FkaW5nID8gKFxuICAgICAgICAgIDxMb2FkaW5nT3V0bGluZWRcbiAgICAgICAgICAgIHRlc3QtaWQ9e1xuICAgICAgICAgICAgICB0ZXN0SWQgPyBgJHt0ZXN0SWR9JHtkZWZhdWx0TG9hZGluZ0ljb25UZXN0SWRTdWZmaXh9YCA6IGRlZmF1bHRMb2FkaW5nSWNvblRlc3RJZFxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgaWNvblxuICAgICAgICApfVxuICAgICAgPC9zcGFuPlxuICAgICkgOiBudWxsO1xuXG4gIGNvbnN0IGNvbnRlbnQgPSAoXG4gICAgPD5cbiAgICAgIHtpY29uUG9zaXRpb24gPT09IFwic3RhcnRcIiAmJiBjdXJyZW50SWNvbn1cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtpY29uUG9zaXRpb24gPT09IFwiZW5kXCIgJiYgY3VycmVudEljb259XG4gICAgPC8+XG4gICk7XG5cbiAgY29uc3QgYnV0dG9uRWxlbWVudCA9XG4gICAgY3VycmVudFZhcmlhbnQgPT09IFwibGlua1wiID8gKFxuICAgICAgPGFcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGNzcz17W2J1dHRvbkRlZmF1bHRTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdGVzdC1pZD17dGVzdElkID8/IGRlZmF1bHRCdXR0b25UZXN0SWR9XG4gICAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICA+XG4gICAgICAgIHtjb250ZW50fVxuICAgICAgPC9hPlxuICAgICkgOiAoXG4gICAgICA8YnV0dG9uXG4gICAgICAgIHsuLi5zdGFuZGFyZEF0dHJpYnV0ZXN9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBjc3M9e1tidXR0b25EZWZhdWx0U3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZCB8fCBjdXJyZW50TG9hZGluZyB8fCBpc0RlbGF5fVxuICAgICAgICB0ZXN0LWlkPXt0ZXN0SWQgPz8gZGVmYXVsdEJ1dHRvblRlc3RJZH1cbiAgICAgID5cbiAgICAgICAge2NvbnRlbnR9XG4gICAgICA8L2J1dHRvbj5cbiAgICApO1xuXG4gIGlmICh0b29sdGlwICYmIHRvb2x0aXAudGl0bGUpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFRvb2x0aXAgdGl0bGU9e3Rvb2x0aXAudGl0bGV9IHBsYWNlbWVudD17dG9vbHRpcC5wbGFjZW1lbnR9IGFsaWduPXt0b29sdGlwLmFsaWdufT5cbiAgICAgICAge2J1dHRvbkVsZW1lbnR9XG4gICAgICA8L1Rvb2x0aXA+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiBidXR0b25FbGVtZW50O1xufTtcblxuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IHdpdGhUaGVtZVByb3ZpZGVyPEJ1dHRvblByb3BzPihCdXR0b25Db21wb25lbnQpO1xuIl19 */"], href, "test-id": testId ?? defaultButtonTestId, onClick, children: content }) : /* @__PURE__ */ jsx("button", { ...standardAttributes, className, css: [buttonDefaultStyle.wrapper(theme), (_e = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _e.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:buttonElement;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUZRIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFByb3BzV2l0aENoaWxkcmVuLCBGQyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBCdXR0b25Qcm9wcyB9IGZyb20gXCIuL0J1dHRvbi50eXBlc1wiO1xuaW1wb3J0IHsgZ2V0QnV0dG9uRGVmYXVsdFN0eWxlIH0gZnJvbSBcIi4vQnV0dG9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHdpdGhUaGVtZVByb3ZpZGVyIH0gZnJvbSBcImhvY3Mvd2l0aFRoZW1lUHJvdmlkZXJcIjtcbmltcG9ydCB7IExvYWRpbmdPdXRsaW5lZCB9IGZyb20gXCJpY29ucy9pY29uc1wiO1xuaW1wb3J0IHsgdXNlTG9hZGluZ0RlbGF5IH0gZnJvbSBcImhvb2tzL3VzZUxvYWRpbmdEZWxheVwiO1xuaW1wb3J0IHsgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQge1xuICBkZWZhdWx0QnV0dG9uVGVzdElkLFxuICBkZWZhdWx0TG9hZGluZ0ljb25UZXN0SWQsXG4gIGRlZmF1bHRMb2FkaW5nSWNvblRlc3RJZFN1ZmZpeCxcbiAgZ2V0VmFyaWFudEFuZENvbG9yQnlUeXBlLFxufSBmcm9tIFwiLi9CdXR0b24udXRpbHNcIjtcbmltcG9ydCB7IFRvb2x0aXAgfSBmcm9tIFwiLi4vVG9vbHRpcFwiO1xuXG5jb25zdCBCdXR0b25Db21wb25lbnQ6IEZDPFByb3BzV2l0aENoaWxkcmVuPEJ1dHRvblByb3BzPj4gPSAoe1xuICBjbGFzc05hbWUsXG4gIHR5cGUsXG4gIHZhcmlhbnQsXG4gIGNvbG9yLFxuICBsb2FkaW5nID0gZmFsc2UsXG4gIGRpc2FibGVkID0gZmFsc2UsXG4gIGJsb2NrID0gZmFsc2UsXG4gIHN0eWxlcyxcbiAgY2hpbGRyZW4sXG4gIGljb24sXG4gIGljb25Qb3NpdGlvbiA9IFwic3RhcnRcIixcbiAgaHJlZixcbiAgb25DbGljayxcbiAgdGVzdElkLFxuICB0b29sdGlwLFxuICAuLi5zdGFuZGFyZEF0dHJpYnV0ZXNcbn0pID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7IGN1cnJlbnRMb2FkaW5nLCBpc0RlbGF5IH0gPSB1c2VMb2FkaW5nRGVsYXkobG9hZGluZyk7XG5cbiAgY29uc3QgY3VycmVudFZhcmlhbnQgPSB2YXJpYW50ID8/IGdldFZhcmlhbnRBbmRDb2xvckJ5VHlwZSh0eXBlKT8udmFyaWFudCA/PyBcIm91dGxpbmVkXCI7XG4gIGNvbnN0IGN1cnJlbnRDb2xvciA9IGNvbG9yID8/IGdldFZhcmlhbnRBbmRDb2xvckJ5VHlwZSh0eXBlKT8uY29sb3IgPz8gXCJkZWZhdWx0XCI7XG5cbiAgY29uc3QgYnV0dG9uRGVmYXVsdFN0eWxlID0gZ2V0QnV0dG9uRGVmYXVsdFN0eWxlKHtcbiAgICB2YXJpYW50OiBjdXJyZW50VmFyaWFudCxcbiAgICBjb2xvcjogY3VycmVudENvbG9yLFxuICAgIGxvYWRpbmc6IGN1cnJlbnRMb2FkaW5nLFxuICAgIGJsb2NrLFxuICAgIGRpc2FibGVkLFxuICAgIGhhc0ljb25Pbmx5OiBpc1VuZGVmaW5lZChjaGlsZHJlbikgJiYgIWlzVW5kZWZpbmVkKGljb24pLFxuICB9KTtcblxuICBjb25zdCBjdXJyZW50SWNvbiA9XG4gICAgY3VycmVudExvYWRpbmcgfHwgaWNvbiA/IChcbiAgICAgIDxzcGFuIGNzcz17W2J1dHRvbkRlZmF1bHRTdHlsZS5pY29uV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uaWNvbldyYXBwZXI/Lih0aGVtZSldfT5cbiAgICAgICAge2N1cnJlbnRMb2FkaW5nID8gKFxuICAgICAgICAgIDxMb2FkaW5nT3V0bGluZWRcbiAgICAgICAgICAgIHRlc3QtaWQ9e1xuICAgICAgICAgICAgICB0ZXN0SWQgPyBgJHt0ZXN0SWR9JHtkZWZhdWx0TG9hZGluZ0ljb25UZXN0SWRTdWZmaXh9YCA6IGRlZmF1bHRMb2FkaW5nSWNvblRlc3RJZFxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgaWNvblxuICAgICAgICApfVxuICAgICAgPC9zcGFuPlxuICAgICkgOiBudWxsO1xuXG4gIGNvbnN0IGNvbnRlbnQgPSAoXG4gICAgPD5cbiAgICAgIHtpY29uUG9zaXRpb24gPT09IFwic3RhcnRcIiAmJiBjdXJyZW50SWNvbn1cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtpY29uUG9zaXRpb24gPT09IFwiZW5kXCIgJiYgY3VycmVudEljb259XG4gICAgPC8+XG4gICk7XG5cbiAgY29uc3QgYnV0dG9uRWxlbWVudCA9XG4gICAgY3VycmVudFZhcmlhbnQgPT09IFwibGlua1wiID8gKFxuICAgICAgPGFcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGNzcz17W2J1dHRvbkRlZmF1bHRTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdGVzdC1pZD17dGVzdElkID8/IGRlZmF1bHRCdXR0b25UZXN0SWR9XG4gICAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICA+XG4gICAgICAgIHtjb250ZW50fVxuICAgICAgPC9hPlxuICAgICkgOiAoXG4gICAgICA8YnV0dG9uXG4gICAgICAgIHsuLi5zdGFuZGFyZEF0dHJpYnV0ZXN9XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBjc3M9e1tidXR0b25EZWZhdWx0U3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZCB8fCBjdXJyZW50TG9hZGluZyB8fCBpc0RlbGF5fVxuICAgICAgICB0ZXN0LWlkPXt0ZXN0SWQgPz8gZGVmYXVsdEJ1dHRvblRlc3RJZH1cbiAgICAgID5cbiAgICAgICAge2NvbnRlbnR9XG4gICAgICA8L2J1dHRvbj5cbiAgICApO1xuXG4gIGlmICh0b29sdGlwICYmIHRvb2x0aXAudGl0bGUpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFRvb2x0aXAgdGl0bGU9e3Rvb2x0aXAudGl0bGV9IHBsYWNlbWVudD17dG9vbHRpcC5wbGFjZW1lbnR9IGFsaWduPXt0b29sdGlwLmFsaWdufT5cbiAgICAgICAge2J1dHRvbkVsZW1lbnR9XG4gICAgICA8L1Rvb2x0aXA+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiBidXR0b25FbGVtZW50O1xufTtcblxuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IHdpdGhUaGVtZVByb3ZpZGVyPEJ1dHRvblByb3BzPihCdXR0b25Db21wb25lbnQpO1xuIl19 */"], onClick, disabled: disabled || currentLoading || isDelay, "test-id": testId ?? defaultButtonTestId, children: content });
|
|
51
|
+
if (tooltip && tooltip.title) {
|
|
52
|
+
return /* @__PURE__ */ jsx(Tooltip, { title: tooltip.title, placement: tooltip.placement, align: tooltip.align, children: buttonElement });
|
|
50
53
|
}
|
|
51
|
-
return
|
|
54
|
+
return buttonElement;
|
|
52
55
|
};
|
|
53
56
|
const Button = withThemeProvider(ButtonComponent);
|
|
54
57
|
export {
|
|
@@ -36,7 +36,7 @@ const getWrapperSolidStyle = (theme, color, disabled) => {
|
|
|
36
36
|
const buttonTokens = getButtonTokens(theme);
|
|
37
37
|
const generalStyles = {
|
|
38
38
|
color: buttonTokens.buttonSolidText,
|
|
39
|
-
border: "
|
|
39
|
+
border: "1px solid transparent"
|
|
40
40
|
};
|
|
41
41
|
const disabledStyle = {
|
|
42
42
|
border: `1px solid ${buttonTokens.buttonDefaultBorder}`,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Interpolation } from '@emotion/react';
|
|
2
2
|
import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
|
|
3
3
|
import { Theme } from '../../themes';
|
|
4
|
+
import { BaseTooltipAlign, BaseTooltipPlacementType } from '../BaseTooltip/BaseTooltip.types';
|
|
4
5
|
export type ButtonVariant = "solid" | "outlined" | "dashed" | "text" | "link";
|
|
5
6
|
export type ButtonColor = "default" | "primary" | "danger" | "remove";
|
|
6
7
|
export type ButtonIconPosition = "start" | "end";
|
|
@@ -24,6 +25,11 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
|
|
|
24
25
|
iconWrapper: (theme: Theme) => Interpolation;
|
|
25
26
|
};
|
|
26
27
|
testId?: string;
|
|
28
|
+
tooltip?: {
|
|
29
|
+
title: string | undefined;
|
|
30
|
+
placement?: BaseTooltipPlacementType;
|
|
31
|
+
align?: BaseTooltipAlign;
|
|
32
|
+
};
|
|
27
33
|
}
|
|
28
34
|
export type ButtonDefaultStylesProps = Required<Pick<ButtonProps, "variant" | "color" | "loading" | "block" | "disabled"> & {
|
|
29
35
|
hasIconOnly: boolean;
|
|
@@ -12,6 +12,7 @@ export declare const checkboxStyle: (checked: boolean, disabled: boolean, isHove
|
|
|
12
12
|
readonly justifyContent: "center";
|
|
13
13
|
readonly alignItems: "center";
|
|
14
14
|
readonly position: "relative";
|
|
15
|
+
readonly flex: "0 0 auto";
|
|
15
16
|
readonly width: 16;
|
|
16
17
|
readonly height: 16;
|
|
17
18
|
readonly boxSizing: "border-box";
|
|
@@ -39,6 +39,7 @@ const checkboxStyle = (checked, disabled, isHover) => {
|
|
|
39
39
|
justifyContent: "center",
|
|
40
40
|
alignItems: "center",
|
|
41
41
|
position: "relative",
|
|
42
|
+
flex: "0 0 auto",
|
|
42
43
|
width: theme.controlInteractiveSize,
|
|
43
44
|
height: theme.controlInteractiveSize,
|
|
44
45
|
boxSizing: "border-box",
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { memo, useState, useEffect, Fragment } from "react";
|
|
3
|
+
import { getSpinTokens } from "./Spin.tokens.js";
|
|
4
|
+
import { shouldDelay } from "./Spin.utils.js";
|
|
5
|
+
import { uniqueId, isUndefined } from "lodash-es";
|
|
6
|
+
import { getWithFullscreenPropWrapperStyle, withChildrenPropWrapperStyle, baseWrapperStyle, getSpinWrapperStyle, getForeignObjectSpinInnerStyle, getTipWrapperStyle, childrenWrapperStyle, containerStyle } from "./Spin.styles.js";
|
|
7
|
+
import { useTheme } from "../../hooks/useTheme/useTheme.js";
|
|
8
|
+
const SpinComponent = (props) => {
|
|
9
|
+
const {
|
|
10
|
+
delay,
|
|
11
|
+
fullscreen = false,
|
|
12
|
+
size = "middle",
|
|
13
|
+
spinning: spinningProp = true,
|
|
14
|
+
tip,
|
|
15
|
+
children
|
|
16
|
+
} = props;
|
|
17
|
+
const clipPathUniqId = uniqueId("spinner_clip_path_");
|
|
18
|
+
const theme = useTheme();
|
|
19
|
+
const spinTokens = getSpinTokens();
|
|
20
|
+
const [spinning, setSpinning] = useState(() => spinningProp && !shouldDelay(spinningProp, delay));
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (spinningProp) {
|
|
23
|
+
if (isUndefined(delay)) {
|
|
24
|
+
setSpinning(true);
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const timerId = setTimeout(() => {
|
|
28
|
+
setSpinning(true);
|
|
29
|
+
}, delay);
|
|
30
|
+
return () => {
|
|
31
|
+
if (timerId) {
|
|
32
|
+
clearTimeout(timerId);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
setSpinning(false);
|
|
37
|
+
}, [delay, spinningProp]);
|
|
38
|
+
if (children && !spinning) {
|
|
39
|
+
return children;
|
|
40
|
+
}
|
|
41
|
+
if (!spinning) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const Container = children ? "div" : Fragment;
|
|
45
|
+
const Wrapper = tip || children || fullscreen ? "div" : Fragment;
|
|
46
|
+
const containerProps = (() => {
|
|
47
|
+
if (!children) {
|
|
48
|
+
return {};
|
|
49
|
+
}
|
|
50
|
+
return {
|
|
51
|
+
css: containerStyle
|
|
52
|
+
};
|
|
53
|
+
})();
|
|
54
|
+
const wrapperProps = (() => {
|
|
55
|
+
if (!(tip || children || fullscreen)) {
|
|
56
|
+
return {};
|
|
57
|
+
}
|
|
58
|
+
if (fullscreen) {
|
|
59
|
+
return {
|
|
60
|
+
css: getWithFullscreenPropWrapperStyle(spinning)(theme)
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
if (children) {
|
|
64
|
+
return {
|
|
65
|
+
css: withChildrenPropWrapperStyle(theme)
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
return {
|
|
69
|
+
css: baseWrapperStyle(theme)
|
|
70
|
+
};
|
|
71
|
+
})();
|
|
72
|
+
return /* @__PURE__ */ jsxs(Container, { ...containerProps, children: [
|
|
73
|
+
/* @__PURE__ */ jsxs(Wrapper, { ...wrapperProps, children: [
|
|
74
|
+
/* @__PURE__ */ jsx("span", { css: getSpinWrapperStyle(spinTokens, size), children: /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
75
|
+
/* @__PURE__ */ jsx("g", { clipPath: `url(#${clipPathUniqId})`, children: /* @__PURE__ */ jsx("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ jsx("div", { css: getForeignObjectSpinInnerStyle(fullscreen)(theme) }) }) }),
|
|
76
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipPathUniqId, children: /* @__PURE__ */ jsx("path", { d: "M30 16.0001C30.0001 14.8955 29.1047 14 28.0001 14C26.8955 13.9999 26.0001 14.8953 26 15.9999L28 16L30 16.0001ZM19.09 6.48877C20.1405 6.83008 21.2688 6.25516 21.6101 5.20465C21.9514 4.15413 21.3765 3.02583 20.326 2.68452L19.708 4.58665L19.09 6.48877ZM28 16L26 15.9999C25.9999 18.1116 25.3313 20.1692 24.0899 21.8776L25.7079 23.0532L27.3259 24.2288C29.0638 21.8371 29.9999 18.9565 30 16.0001L28 16ZM25.7079 23.0532L24.0899 21.8776C22.8486 23.586 21.0983 24.8575 19.0899 25.5101L19.7078 27.4122L20.3258 29.3143C23.1376 28.4008 25.588 26.6206 27.3259 24.2288L25.7079 23.0532ZM19.7078 27.4122L19.0899 25.5101C17.0814 26.1626 14.918 26.1625 12.9096 25.5099L12.2915 27.412L11.6734 29.3141C14.4852 30.2277 17.514 30.2278 20.3258 29.3143L19.7078 27.4122ZM12.2915 27.412L12.9096 25.5099C10.9012 24.8573 9.15098 23.5856 7.90974 21.8771L6.29169 23.0527L4.67363 24.2282C6.41137 26.6201 8.8617 28.4004 11.6734 29.3141L12.2915 27.412ZM6.29169 23.0527L7.90974 21.8771C6.6685 20.1686 5.99998 18.1111 6 15.9993L4 15.9993L2 15.9993C1.99998 18.9558 2.9359 21.8363 4.67363 24.2282L6.29169 23.0527ZM4 15.9993L6 15.9993C6.00002 13.8876 6.66856 11.83 7.90982 10.1215L6.29179 8.94598L4.67375 7.77041C2.93599 10.1622 2.00002 13.0428 2 15.9993L4 15.9993ZM6.29179 8.94598L7.90982 10.1215C9.15109 8.41309 10.9013 7.14144 12.9097 6.48885L12.2917 4.58675L11.6736 2.68464C8.86187 3.59827 6.41152 5.37857 4.67375 7.77041L6.29179 8.94598ZM12.2917 4.58675L12.9097 6.48885C14.9181 5.83626 17.0816 5.83623 19.09 6.48877L19.708 4.58665L20.326 2.68452C17.5142 1.77097 14.4854 1.77101 11.6736 2.68464L12.2917 4.58675Z" }) }) })
|
|
77
|
+
] }) }),
|
|
78
|
+
tip && /* @__PURE__ */ jsx("div", { css: getTipWrapperStyle(fullscreen)(theme), children: tip })
|
|
79
|
+
] }),
|
|
80
|
+
children && /* @__PURE__ */ jsx("div", { css: childrenWrapperStyle, children })
|
|
81
|
+
] });
|
|
82
|
+
};
|
|
83
|
+
const Spin = memo(SpinComponent);
|
|
84
|
+
export {
|
|
85
|
+
Spin
|
|
86
|
+
};
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { Theme } from '../../themes';
|
|
2
|
+
import { SpinTokens } from './Spin.tokens';
|
|
3
|
+
import { SpinSize } from './Spin.types';
|
|
4
|
+
export declare const containerStyle: {
|
|
5
|
+
readonly position: "relative";
|
|
6
|
+
};
|
|
7
|
+
export declare const baseWrapperStyle: (theme: Theme) => {
|
|
8
|
+
readonly display: "inline-flex";
|
|
9
|
+
readonly flexDirection: "column";
|
|
10
|
+
readonly alignItems: "center";
|
|
11
|
+
readonly rowGap: 4;
|
|
12
|
+
};
|
|
13
|
+
export declare const nonStaticPositionWrapperStyle: (theme: Theme) => {
|
|
14
|
+
justifyContent: string;
|
|
15
|
+
display: "inline-flex";
|
|
16
|
+
flexDirection: "column";
|
|
17
|
+
alignItems: "center";
|
|
18
|
+
rowGap: 4;
|
|
19
|
+
inset: number;
|
|
20
|
+
};
|
|
21
|
+
export declare const getWithFullscreenPropWrapperStyle: (spinning: boolean) => (theme: Theme) => {
|
|
22
|
+
justifyContent: string;
|
|
23
|
+
display: "inline-flex";
|
|
24
|
+
flexDirection: "column";
|
|
25
|
+
alignItems: "center";
|
|
26
|
+
rowGap: 4;
|
|
27
|
+
inset: number;
|
|
28
|
+
position: string;
|
|
29
|
+
backgroundColor: `rgba(${number}, ${number}, ${number}, 0.4)`;
|
|
30
|
+
width: string;
|
|
31
|
+
height: string;
|
|
32
|
+
visibility: string;
|
|
33
|
+
zIndex: number;
|
|
34
|
+
};
|
|
35
|
+
export declare const withChildrenPropWrapperStyle: (theme: Theme) => {
|
|
36
|
+
justifyContent: string;
|
|
37
|
+
display: "inline-flex";
|
|
38
|
+
flexDirection: "column";
|
|
39
|
+
alignItems: "center";
|
|
40
|
+
rowGap: 4;
|
|
41
|
+
inset: number;
|
|
42
|
+
position: string;
|
|
43
|
+
zIndex: number;
|
|
44
|
+
};
|
|
45
|
+
export declare const getSpinWrapperStyle: (spinTokens: SpinTokens, size: SpinSize) => {
|
|
46
|
+
display: string;
|
|
47
|
+
fontSize: number;
|
|
48
|
+
animation: string;
|
|
49
|
+
};
|
|
50
|
+
export declare const getForeignObjectSpinInnerStyle: (fullscreen: boolean) => (theme: Theme) => {
|
|
51
|
+
height: string;
|
|
52
|
+
backgroundImage: string;
|
|
53
|
+
};
|
|
54
|
+
export declare const getTipWrapperStyle: (fullscreen: boolean) => (theme: Theme) => {
|
|
55
|
+
color: "#FFFFFF" | "#0CB3B3";
|
|
56
|
+
fontFamily: "Roboto";
|
|
57
|
+
fontSize: 14;
|
|
58
|
+
lineHeight: "20px";
|
|
59
|
+
};
|
|
60
|
+
export declare const childrenWrapperStyle: {
|
|
61
|
+
readonly userSelect: "none";
|
|
62
|
+
readonly pointerEvents: "none";
|
|
63
|
+
readonly opacity: 0.5;
|
|
64
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { keyframes } from "@emotion/react";
|
|
2
|
+
import { getFontSizeBySize } from "./Spin.utils.js";
|
|
3
|
+
import { arr2String } from "../../utils/converter/common.js";
|
|
4
|
+
import { white2Rgba } from "../../themes/baseTokens/const.js";
|
|
5
|
+
const containerStyle = {
|
|
6
|
+
position: "relative"
|
|
7
|
+
};
|
|
8
|
+
const baseWrapperStyle = (theme) => ({
|
|
9
|
+
display: "inline-flex",
|
|
10
|
+
flexDirection: "column",
|
|
11
|
+
alignItems: "center",
|
|
12
|
+
rowGap: theme.spaceXS
|
|
13
|
+
});
|
|
14
|
+
const nonStaticPositionWrapperStyle = (theme) => ({
|
|
15
|
+
inset: 0,
|
|
16
|
+
...baseWrapperStyle(theme),
|
|
17
|
+
justifyContent: "center"
|
|
18
|
+
});
|
|
19
|
+
const getWithFullscreenPropWrapperStyle = (spinning) => (theme) => ({
|
|
20
|
+
position: "fixed",
|
|
21
|
+
backgroundColor: theme.bgMask,
|
|
22
|
+
width: "100vw",
|
|
23
|
+
height: "100vh",
|
|
24
|
+
visibility: spinning ? "visible" : "hidden",
|
|
25
|
+
zIndex: 2,
|
|
26
|
+
...nonStaticPositionWrapperStyle(theme)
|
|
27
|
+
});
|
|
28
|
+
const withChildrenPropWrapperStyle = (theme) => ({
|
|
29
|
+
position: "absolute",
|
|
30
|
+
zIndex: 1,
|
|
31
|
+
...nonStaticPositionWrapperStyle(theme)
|
|
32
|
+
});
|
|
33
|
+
const fullRotateAnimationName = keyframes({
|
|
34
|
+
"100%": {
|
|
35
|
+
transform: "rotate(360deg)"
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
const getSpinWrapperStyle = (spinTokens, size) => ({
|
|
39
|
+
display: "inline-flex",
|
|
40
|
+
fontSize: getFontSizeBySize(spinTokens, size),
|
|
41
|
+
animation: `${fullRotateAnimationName} 0.5s infinite linear`
|
|
42
|
+
});
|
|
43
|
+
const getForeignObjectSpinInnerStyle = (fullscreen) => (theme) => ({
|
|
44
|
+
height: "100%",
|
|
45
|
+
backgroundImage: `conic-gradient(${arr2String(["from 30deg", ...fullscreen ? [`${theme.neutral10} 0deg`, `${white2Rgba(0)} 45deg`, `${theme.neutral10} 360deg`] : [`${theme.neutral100} 0deg`, `${white2Rgba(0)} 45deg`, `${theme.primaryBase} 225deg`, `${theme.neutral100} 360deg`]])})`
|
|
46
|
+
});
|
|
47
|
+
const getTipWrapperStyle = (fullscreen) => (theme) => ({
|
|
48
|
+
...theme.typography.body2,
|
|
49
|
+
color: fullscreen ? theme.textContrast : theme.primaryBase
|
|
50
|
+
});
|
|
51
|
+
const childrenWrapperStyle = {
|
|
52
|
+
userSelect: "none",
|
|
53
|
+
pointerEvents: "none",
|
|
54
|
+
opacity: 0.5
|
|
55
|
+
};
|
|
56
|
+
export {
|
|
57
|
+
baseWrapperStyle,
|
|
58
|
+
childrenWrapperStyle,
|
|
59
|
+
containerStyle,
|
|
60
|
+
getForeignObjectSpinInnerStyle,
|
|
61
|
+
getSpinWrapperStyle,
|
|
62
|
+
getTipWrapperStyle,
|
|
63
|
+
getWithFullscreenPropWrapperStyle,
|
|
64
|
+
nonStaticPositionWrapperStyle,
|
|
65
|
+
withChildrenPropWrapperStyle
|
|
66
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
export interface SpinProps extends PropsWithChildren {
|
|
3
|
+
delay?: number;
|
|
4
|
+
fullscreen?: boolean;
|
|
5
|
+
size?: SpinSize;
|
|
6
|
+
spinning?: boolean;
|
|
7
|
+
tip?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export type SpinSize = "small" | "middle" | "large";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const fontSizeBySize = (spinTokens) => ({
|
|
2
|
+
small: spinTokens.spinSizeS,
|
|
3
|
+
middle: spinTokens.spinSizeM,
|
|
4
|
+
large: spinTokens.spinSizeL
|
|
5
|
+
});
|
|
6
|
+
const getFontSizeBySize = (spinTokens, size) => fontSizeBySize(spinTokens)[size];
|
|
7
|
+
const shouldDelay = (spinning, delay) => spinning && Boolean(delay) && !Number.isNaN(delay);
|
|
8
|
+
export {
|
|
9
|
+
getFontSizeBySize,
|
|
10
|
+
shouldDelay
|
|
11
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -48,4 +48,5 @@ export type { TreeSelectProps } from './components/TreeSelect';
|
|
|
48
48
|
export { type EmptyProps, Empty } from './components/Empty';
|
|
49
49
|
export { type SegmentedProps, type SegmentedLabeledOption, Segmented, } from './components/Segmented';
|
|
50
50
|
export { ContextIsolator } from './components/ContextIsolator';
|
|
51
|
+
export { type SpinProps, Spin } from './components/Spin';
|
|
51
52
|
export * from 'react-intersection-observer/test-utils';
|
package/dist/index.js
CHANGED
|
@@ -36,6 +36,7 @@ import { TreeSelect } from "./components/TreeSelect/TreeSelect.js";
|
|
|
36
36
|
import { Empty } from "./components/Empty/Empty.js";
|
|
37
37
|
import { Segmented } from "./components/Segmented/Segmented.js";
|
|
38
38
|
import { ContextIsolator } from "./components/ContextIsolator/ContextIsolator.js";
|
|
39
|
+
import { Spin } from "./components/Spin/Spin.js";
|
|
39
40
|
export {
|
|
40
41
|
Alert,
|
|
41
42
|
Avatar,
|
|
@@ -57,6 +58,7 @@ export {
|
|
|
57
58
|
Radio,
|
|
58
59
|
Segmented,
|
|
59
60
|
Select,
|
|
61
|
+
Spin,
|
|
60
62
|
Switch,
|
|
61
63
|
Tabs,
|
|
62
64
|
Tag,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const arr2String: (arr: (string | number)[], separator?: string) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { arr2String } from './common';
|
package/dist/utils/index.d.ts
CHANGED