@snack-uikit/skeleton 0.3.5 → 0.3.6-preview-1f246c4a.0

package/dist/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,48 @@
+"use strict";
+
+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 __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../../hooks");
+const styles_module_scss_1 = __importDefault({});
+function Skeleton(_a) {
+  var {
+      width,
+      height,
+      className,
+      borderRadius,
+      loading,
+      children
+    } = _a,
+    restProps = __rest(_a, ["width", "height", "className", "borderRadius", "loading", "children"]);
+  const isLoading = (0, hooks_1.useIsLoadingValue)(loading);
+  if (isLoading) {
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, restProps, {
+      style: {
+        width,
+        height,
+        borderRadius
+      },
+      className: (0, classnames_1.default)(styles_module_scss_1.default.skeleton, className)
+    }));
+  }
+  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+    children: children
+  });
+}

package/dist/cjs/components/Skeleton/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Skeleton"), exports);

package/dist/cjs/components/SkeletonText/SkeletonText.js

@@ -0,0 +1,61 @@
+"use strict";
+
+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 __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonText = SkeletonText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const Skeleton_1 = require("../Skeleton");
+const styles_module_scss_1 = __importDefault({});
+function SkeletonText(_a) {
+  var {
+      width,
+      className,
+      rowClassName,
+      lineClassName,
+      children,
+      loading,
+      lines = 3,
+      borderRadius = '0.4em'
+    } = _a,
+    restProps = __rest(_a, ["width", "className", "rowClassName", "lineClassName", "children", "loading", "lines", "borderRadius"]);
+  const lineTestId = restProps['data-test-id'] ? `${restProps['data-test-id']}_line` : undefined;
+  const rows = (0, react_1.useMemo)(() => Array(lines).fill(true).map((_, index) => (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.skeletonTextRow, rowClassName),
+    children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {
+      "data-test-id": lineTestId,
+      loading: true,
+      borderRadius: borderRadius,
+      className: (0, classnames_1.default)(styles_module_scss_1.default.skeletonTextLine, lineClassName)
+    })
+  }, index)), [lines, borderRadius, rowClassName, lineClassName, lineTestId]);
+  const isLoading = (0, hooks_1.useIsLoadingValue)(loading);
+  if (isLoading) {
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, restProps, {
+      style: {
+        width
+      },
+      className: (0, classnames_1.default)(className, styles_module_scss_1.default.skeletonText),
+      children: rows
+    }));
+  }
+  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+    children: children
+  });
+}

package/dist/cjs/components/SkeletonText/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./SkeletonText"), exports);

package/dist/cjs/components/WithSkeleton/WithSkeleton.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithSkeleton = WithSkeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../../context");
+const hooks_1 = require("../../hooks");
+function WithSkeleton(_ref) {
+  let {
+    children,
+    skeleton,
+    loading
+  } = _ref;
+  const isLoading = (0, hooks_1.useIsLoadingValue)(loading);
+  if (isLoading) {
+    return (0, jsx_runtime_1.jsx)(context_1.SkeletonContextProvider, {
+      loading: true,
+      children: skeleton
+    });
+  }
+  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+    children: children
+  });
+}

package/dist/cjs/components/WithSkeleton/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./WithSkeleton"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Skeleton"), exports);
+__exportStar(require("./SkeletonText"), exports);
+__exportStar(require("./WithSkeleton"), exports);

package/dist/cjs/context/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonContext = void 0;
+exports.SkeletonContextProvider = SkeletonContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SkeletonContext = (0, react_1.createContext)(false);
+function SkeletonContextProvider(_ref) {
+  let {
+    loading,
+    children
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)(exports.SkeletonContext.Provider, {
+    value: loading,
+    children: children
+  });
+}

package/dist/cjs/hooks.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsLoadingValue = useIsLoadingValue;
+const react_1 = require("react");
+const context_1 = require("./context");
+function useIsLoadingValue(loadingByProp) {
+  const loadingByContext = (0, react_1.useContext)(context_1.SkeletonContext);
+  return loadingByContext || loadingByProp;
+}

package/dist/cjs/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);
+__exportStar(require("./context"), exports);

package/dist/esm/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type SkeletonProps = WithSupportProps<PropsWithChildren<{
+    /** Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. */
+    loading?: boolean;
+    /** Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример `'60%'`, `'400px'` и т.д) */
+    width?: CSSProperties['width'];
+    /** Высота блока. Можно указать значение допустимое для CSSProperty.height (пример `'60%'`, `'400px'` и т.д) */
+    height?: CSSProperties['height'];
+    /** Радиус скругления. Можно указать значение допустимое для CSSProperty.borderRadius (пример `'10px'`, `'50%'` и т.д) */
+    borderRadius?: CSSProperties['borderRadius'];
+    className?: string;
+}>>;
+export declare function Skeleton({ width, height, className, borderRadius, loading, children, ...restProps }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Skeleton/index.js

@@ -0,0 +1 @@
+export * from './Skeleton';

package/dist/esm/components/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { SkeletonProps } from '../Skeleton';
+export type SkeletonTextProps = WithSupportProps<Omit<SkeletonProps, 'height'> & {
+    /** Количество строк. */
+    lines?: number;
+    /** CSS-класс строки */
+    rowClassName?: string;
+    /** CSS-класс линии */
+    lineClassName?: string;
+}>;
+export declare function SkeletonText({ width, className, rowClassName, lineClassName, children, loading, lines, borderRadius, ...restProps }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SkeletonText/index.js

@@ -0,0 +1 @@
+export * from './SkeletonText';

package/dist/esm/components/WithSkeleton/WithSkeleton.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+type WithSkeletonProps = PropsWithChildren<{
+    /** JSX скелетон */
+    skeleton: ReactNode;
+    /** Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. */
+    loading?: boolean;
+}>;
+export declare function WithSkeleton({ children, skeleton, loading }: WithSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/WithSkeleton/index.js

@@ -0,0 +1 @@
+export * from './WithSkeleton';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './Skeleton';
+export * from './SkeletonText';
+export * from './WithSkeleton';

package/dist/esm/context/index.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+export declare const SkeletonContext: import("react").Context<boolean>;
+export type SkeletonContextProviderProps = PropsWithChildren<{
+    /** Флаг состояния загрузки. Если значение true, будут отрисованы блоки скелетона. */
+    loading: boolean;
+}>;
+export declare function SkeletonContextProvider({ loading, children }: SkeletonContextProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/hooks.d.ts

@@ -0,0 +1 @@
+export declare function useIsLoadingValue(loadingByProp?: boolean): boolean | undefined;

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './context';

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Skeleton",
-  "version": "0.3.5",
+  "version": "0.3.6-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/skeleton",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Сергей Хлупин <svhlupin@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,8 +34,8 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

package/dist/components/Skeleton/styles.module.css

@@ -1,12 +0,0 @@
-.skeleton{
-  box-sizing:border-box;
-  width:100%;
-  height:1em;
-  background:var(--gradient-skeleton, linear-gradient(115deg, rgba(36, 36, 48, 0.0784313725) 40%, rgba(36, 36, 48, 0) 50%, rgba(36, 36, 48, 0.0784313725) 60%)) 0 0/200% 100% repeat fixed;
-  animation:loading 2s infinite linear;
-}
-@keyframes loading{
-  to{
-    background-position:-200% 0;
-  }
-}

package/dist/components/SkeletonText/styles.module.css

@@ -1,19 +0,0 @@
-.skeletonText{
-  position:relative;
-}
-
-.skeletonTextLine{
-  display:inline-block;
-  height:0.8em;
-  margin-top:0;
-  margin-bottom:0;
-  vertical-align:middle;
-}
-
-.skeletonTextRow{
-  display:inline;
-}
-
-.skeletonTextRow + .skeletonTextRow:last-child .skeletonTextLine{
-  width:65%;
-}