@retailcrm/datalens-ui 0.0.1 → 0.1.0

package/components/AsyncImage.js

@@ -1,77 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default from "react";
-import { Skeleton } from "@gravity-ui/uikit";
-import isNil from "lodash/isNil";
-function AsyncImage({
-  src,
-  alt,
-  style,
-  showSkeleton,
-  onLoad,
-  skeletonClassName,
-  skeletonTimeout,
-  ...restProps
-}) {
-  const [finalSrc, setFinalSrc] = React__default.useState(typeof src === "string" ? src : void 0);
-  const [loading, setLoading] = React__default.useState(showSkeleton && !skeletonTimeout);
-  const [isImgReady, setIsImgReady] = React__default.useState(false);
-  React__default.useEffect(() => {
-    let isCancelled = false;
-    if (typeof src === "function") {
-      src().then(({ default: img }) => {
-        if (!isCancelled) {
-          setFinalSrc(img);
-        }
-      }).catch((error) => {
-        console.error(error);
-        if (!isCancelled) {
-          setFinalSrc("");
-        }
-      });
-    } else {
-      setFinalSrc(src);
-    }
-    return () => {
-      isCancelled = true;
-    };
-  }, [src, skeletonTimeout]);
-  React__default.useEffect(() => {
-    let skeletonTimer;
-    if (skeletonTimeout && !loading && !isImgReady) {
-      skeletonTimer = window.setTimeout(() => {
-        if (!isImgReady) {
-          setLoading(true);
-        }
-      }, skeletonTimeout);
-    }
-    return () => {
-      clearTimeout(skeletonTimer);
-    };
-  }, [isImgReady, loading, skeletonTimeout]);
-  const handleLoad = React__default.useCallback(() => {
-    setLoading(false);
-    setIsImgReady(true);
-    onLoad?.();
-  }, [onLoad]);
-  const skeleton = loading ? /* @__PURE__ */ jsx(Skeleton, { className: skeletonClassName || restProps.className, style }) : null;
-  return isNil(finalSrc) ? skeleton : /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: finalSrc,
-        alt,
-        style: {
-          ...style,
-          ...loading && { display: "none" }
-        },
-        ...restProps,
-        onLoad: handleLoad,
-        onError: () => setLoading(false)
-      }
-    ),
-    skeleton
-  ] });
-}
-export {
-  AsyncImage as A
-};

package/components/AutogeneratedPaletteIcon.js

@@ -1,53 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import block from "bem-cn-lite";
-import _constant from "lodash/constant";
-import _times from "lodash/times";
-const b = block("autogenerated-palette-icon");
-const ITEMS_PER_ROWS = 5;
-const AutogeneratedPaletteIcon = (props) => {
-  const { colors, isGradient, className, width, height } = props;
-  const rowsCount = colors.length < ITEMS_PER_ROWS ? 1 : Math.round(colors.length / ITEMS_PER_ROWS);
-  return /* @__PURE__ */ jsx("div", { className: b(null, className), style: { height, width }, children: _times(rowsCount, _constant(null)).map((_el, index) => {
-    const rowColors = colors.slice(
-      ITEMS_PER_ROWS * index,
-      ITEMS_PER_ROWS * (index + 1)
-    );
-    return /* @__PURE__ */ jsx(
-      AutogeneratedPaletteIconRow,
-      {
-        rowsCount,
-        colors: rowColors,
-        isGradient,
-        isFirstRow: !index,
-        isLastRow: index === rowsCount - 1
-      },
-      rowColors.join()
-    );
-  }) });
-};
-const FULL_ICON_WIDTH = 100;
-const BORDER_RADIUS = 2;
-const AutogeneratedPaletteIconRow = (props) => {
-  const { colors, rowsCount, isGradient, isFirstRow, isLastRow } = props;
-  let styles;
-  if (isGradient) {
-    styles = ["135deg"].concat(colors).join();
-  } else {
-    styles = colors.reduce((acc, color, index) => {
-      const left = FULL_ICON_WIDTH / colors.length * index;
-      const right = FULL_ICON_WIDTH / colors.length * (index + 1);
-      const comma = index < colors.length - 1 ? "," : "";
-      return acc + `${color} ${left}% ${right}%${comma} `;
-    }, "to right, ");
-  }
-  const style = {
-    height: `${Math.floor(100 / rowsCount)}%`,
-    width: "100%",
-    background: `linear-gradient(${styles})`,
-    borderRadius: `${isFirstRow ? BORDER_RADIUS : 0}px ${isFirstRow ? BORDER_RADIUS : 0}px ${isLastRow ? BORDER_RADIUS : 0}px ${isLastRow ? BORDER_RADIUS : 0}px`
-  };
-  return /* @__PURE__ */ jsx("div", { style });
-};
-export {
-  AutogeneratedPaletteIcon as A
-};

package/components/BetaMark.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import block from "bem-cn-lite";
-const b = block("beta-mark");
-const BetaMark = (props) => {
-  return /* @__PURE__ */ jsx("span", { className: b(null, props.className), children: "beta" });
-};
-export {
-  BetaMark as B
-};

package/components/Breadcrumbs.js

@@ -1,70 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Breadcrumbs } from "@gravity-ui/uikit";
-import block from "bem-cn-lite";
-import { l as I18n } from "./AccessRights.js";
-import { useState, useEffect } from "react";
-var Capability = /* @__PURE__ */ ((Capability2) => {
-  Capability2["AccessibleCollectionsRoot"] = "accessible-collections-root";
-  Capability2["AccessibleSettings"] = "accessible-settings";
-  Capability2["AccessibleWorkbookDuplication"] = "accessible-workbook-duplication";
-  Capability2["ManageableConnections"] = "manageable-connections";
-  return Capability2;
-})(Capability || {});
-const capabilities$1 = {
-  [
-    "accessible-collections-root"
-    /* AccessibleCollectionsRoot */
-  ]: true,
-  [
-    "accessible-settings"
-    /* AccessibleSettings */
-  ]: true,
-  [
-    "accessible-workbook-duplication"
-    /* AccessibleWorkbookDuplication */
-  ]: true,
-  [
-    "manageable-connections"
-    /* ManageableConnections */
-  ]: true
-};
-const listeners = /* @__PURE__ */ new Set();
-const all = () => {
-  return { ...capabilities$1 };
-};
-const has = (capability) => {
-  return capabilities$1[capability];
-};
-const toggle = (capability, value) => {
-  if (capabilities$1[capability] !== value) {
-    capabilities$1[capability] = value;
-    listeners.forEach((listener) => listener());
-  }
-};
-const subscribe = (listener) => {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-};
-const capabilities = { all, has, toggle };
-const useCapabilities = () => {
-  const [state, setState] = useState(all);
-  useEffect(() => subscribe(() => setState(all())), []);
-  return state;
-};
-const i18n = I18n.keyset("component.collection-breadcrumbs");
-const b = block("dl-breadcrumbs-collections-structure-breadcrumbs");
-const CollectionsStructureBreadcrumbs = ({ items, onChange }) => {
-  const capabilities2 = useCapabilities();
-  return /* @__PURE__ */ jsx("div", { className: b(), children: /* @__PURE__ */ jsxs(Breadcrumbs, { children: [
-    capabilities2[Capability.AccessibleCollectionsRoot] && /* @__PURE__ */ jsx(Breadcrumbs.Item, { className: b("item"), children: /* @__PURE__ */ jsx("div", { onClick: () => onChange(null), children: i18n("label_root-title") }) }),
-    items.map(({ collectionId, title }, index) => /* @__PURE__ */ jsx(Breadcrumbs.Item, { className: b("item"), children: /* @__PURE__ */ jsx("div", { onClick: () => onChange(collectionId), children: title }) }, index))
-  ] }) });
-};
-export {
-  CollectionsStructureBreadcrumbs as C,
-  Capability as a,
-  capabilities as c,
-  useCapabilities as u
-};

package/components/BreadcrumbsItemLink.js

@@ -1,16 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { BreadcrumbsItem } from "@gravity-ui/uikit";
-import { useHistory } from "react-router";
-const BreadcrumbsItemLink = ({ to, ...rest }) => {
-  const history = useHistory();
-  const handleClick = (e) => {
-    e.preventDefault();
-    if (to) {
-      history.push(to);
-    }
-  };
-  return /* @__PURE__ */ jsx(BreadcrumbsItem, { ...rest, onClick: handleClick });
-};
-export {
-  BreadcrumbsItemLink as B
-};

package/components/ButtonAttach.js

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React__default from "react";
-import { useFileInput, Button } from "@gravity-ui/uikit";
-import block from "bem-cn-lite";
-const cnButtonAttach = block("button-attach");
-const ButtonAttach = React__default.forwardRef(
-  ({ onUpdate, onChange, accept, multiple = false, ...props }, ref) => {
-    const { triggerProps, controlProps } = useFileInput({ onUpdate, onChange });
-    const buttonProps = {
-      ...triggerProps,
-      ...props
-    };
-    return /* @__PURE__ */ jsxs("div", { className: cnButtonAttach(), children: [
-      /* @__PURE__ */ jsx(Button, { ...buttonProps, ref }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ...controlProps,
-          accept,
-          multiple,
-          autoComplete: "off",
-          className: cnButtonAttach("input"),
-          disabled: props.disabled
-        }
-      )
-    ] });
-  }
-);
-ButtonAttach.displayName = "ButtonAttach";
-export {
-  ButtonAttach as B
-};

package/components/Collapse.js

@@ -1,159 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React__default from "react";
-import { Button, ArrowToggle } from "@gravity-ui/uikit";
-import block from "bem-cn-lite";
-const b = block("dl-collapse");
-function Collapse({
-  className,
-  headerClassName,
-  title,
-  titleClassName,
-  children,
-  toolbar,
-  toolbarClassName,
-  contentClassName,
-  arrowPosition = "right",
-  arrowView = "icon",
-  arrowQa,
-  arrowClassName,
-  emptyState = "No data",
-  titleSize = "l",
-  contentMarginTop = 12,
-  defaultIsExpand = false,
-  isSecondary = false,
-  beforeExpandChange,
-  isExpand: isControlledExpand,
-  cacheContent
-}) {
-  const [isExpand, setIsExpand] = React__default.useState(isControlledExpand || defaultIsExpand);
-  const [contentMounted, setContentMounted] = React__default.useState(false);
-  React__default.useEffect(() => {
-    if (isControlledExpand !== void 0) {
-      beforeExpandChange?.(isControlledExpand);
-      setIsExpand(isControlledExpand);
-    }
-  }, [beforeExpandChange, isControlledExpand]);
-  const toggleExpand = React__default.useCallback(() => {
-    const newExpandValue = !isExpand;
-    beforeExpandChange?.(newExpandValue);
-    setIsExpand(newExpandValue);
-  }, [setIsExpand, isExpand, beforeExpandChange]);
-  const initContent = React__default.useCallback((element) => {
-    if (element !== null) {
-      setContentMounted(true);
-    }
-  }, []);
-  const shouldRenderContent = children && (isExpand || cacheContent && contentMounted);
-  return /* @__PURE__ */ jsxs("div", { className: b({ collapsed: !isExpand }, className), children: [
-    /* @__PURE__ */ jsxs("div", { className: b("header", headerClassName), children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: b(
-            "panel",
-            {
-              "no-data": !children
-            },
-            titleClassName
-          ),
-          onClick: toggleExpand,
-          children: [
-            children && arrowPosition === "left" && /* @__PURE__ */ jsx(
-              CollapseToggler,
-              {
-                arrowPosition,
-                isSecondary,
-                arrowView,
-                arrowQa,
-                arrowClassName,
-                titleSize,
-                isExpand
-              }
-            ),
-            typeof title === "string" ? /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: b("title", {
-                  size: titleSize,
-                  secondary: isSecondary
-                }),
-                children: title
-              }
-            ) : title,
-            children && arrowPosition === "right" && /* @__PURE__ */ jsx(
-              CollapseToggler,
-              {
-                arrowPosition,
-                isSecondary,
-                arrowView,
-                arrowQa,
-                arrowClassName,
-                titleSize,
-                isExpand
-              }
-            )
-          ]
-        }
-      ),
-      toolbar && /* @__PURE__ */ jsx("div", { className: b("toolbar", toolbarClassName), children: toolbar })
-    ] }),
-    !children && /* @__PURE__ */ jsx("h4", { className: b("empty-state-title"), children: emptyState }),
-    shouldRenderContent && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: b("content", contentClassName),
-        style: { marginTop: contentMarginTop },
-        ref: initContent,
-        children
-      }
-    )
-  ] });
-}
-const arrowSizes = {
-  s: 14,
-  m: 16,
-  l: 20
-};
-function CollapseToggler({
-  arrowView,
-  arrowPosition,
-  arrowQa,
-  arrowClassName,
-  isSecondary,
-  titleSize,
-  isExpand
-}) {
-  const arrowDirection = isExpand ? "top" : "bottom";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-qa": arrowQa,
-      className: b(
-        "arrow-wrapper",
-        {
-          secondary: isSecondary,
-          position: arrowPosition
-        },
-        arrowClassName
-      ),
-      children: arrowView === "button" ? /* @__PURE__ */ jsx(Button, { view: "flat", className: b("arrow-button"), "aria-expanded": isExpand, children: /* @__PURE__ */ jsx(
-        ArrowToggle,
-        {
-          className: b("arrow"),
-          direction: arrowDirection,
-          size: arrowSizes[titleSize]
-        }
-      ) }) : /* @__PURE__ */ jsx(
-        ArrowToggle,
-        {
-          className: b("arrow"),
-          direction: arrowDirection,
-          size: arrowSizes[titleSize]
-        }
-      )
-    }
-  );
-}
-export {
-  Collapse as C
-};