@alfalab/core-components-pattern-lock 1.8.1 → 2.0.0

package/src/typings.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent } from 'react';
 import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
 
 type ConditionalProps =
@@ -28,20 +28,10 @@ type ConditionalProps =
 
 export type CommonPatternLockProps = {
     /**
-     * Дополнительный класс.
+     * Дополнительный класс
      */
     className?: string;
 
-    /**
-     * Сообщение об ошибке
-     */
-    error?: ReactNode;
-
-    /**
-     * Сообщение над графическим ключом
-     */
-    message?: ReactNode;
-
     /**
      * Идентификатор для систем автоматизированного тестирования.
      * Для сообщения используется модификатор -message, ошибки -error,
@@ -50,13 +40,13 @@ export type CommonPatternLockProps = {
     dataTestId?: string;
 
     /**
-     * Следить ли за изменениями значений цветовых токенов.
+     * Следить ли за изменениями значений цветовых токенов
      * @default false
      */
     observeTokens?: boolean;
 
     /**
-     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties).
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
      */
     observerParams?: {
         getTarget?: () => Node;
@@ -67,7 +57,10 @@ export type CommonPatternLockProps = {
      * Дополнительный класс для message/errorMessage
      */
     messageClassName?: string;
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> &
+} & Omit<
+    ReactPatternLockProps,
+    'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'
+> &
     ConditionalProps;
 
 export type PrivatePatternLockProps = {
@@ -76,7 +69,7 @@ export type PrivatePatternLockProps = {
      */
     hover?: boolean;
     /**
-     * Стили компонента.
+     * Стили компонента
      */
     styles: { [key: string]: string };
 };

package/src/utils.ts

@@ -26,31 +26,11 @@ export const getSizes = (() => {
             return cachedSize;
         }
 
-        if (window.matchMedia('(min-width: 600px)').matches) {
-            cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
-                width: 240,
-                height: 240,
-            };
-        } else if (window.matchMedia('(min-width: 390px)').matches) {
-            cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 43 },
-                width: 322,
-                height: 322,
-            };
-        } else if (window.matchMedia('(min-width: 360px)').matches) {
-            cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 38 },
-                width: 292,
-                height: 292,
-            };
-        } else {
-            cachedSize = {
-                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
-                width: 240,
-                height: 240,
-            };
-        }
+        cachedSize = {
+            elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+            width: 240,
+            height: 240,
+        };
 
         return cachedSize;
     };
@@ -99,7 +79,5 @@ export function getPatternLockTestIds(dataTestId: string) {
     return {
         patternLock: dataTestId,
         forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),
-        error: getDataTestId(dataTestId, 'error'),
-        message: getDataTestId(dataTestId, 'message'),
     };
 }

package/src/vars.css

@@ -1,4 +1,5 @@
 :root {
-    --pattern-lock-max-width: 500px;
-    --pattern-lock-desktop-max-width: 240px;
+    --pattern-lock-min-width: 304px;
+    --pattern-lock-min-height: 272px;
+    --pattern-lock-with-forgot-btn-min-height: 336px;
 }

package/typings.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent } from 'react';
 import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
 type ConditionalProps = {
     /**
@@ -22,17 +22,9 @@ type ConditionalProps = {
 };
 type CommonPatternLockProps = {
     /**
-     * Дополнительный класс.
+     * Дополнительный класс
      */
     className?: string;
-    /**
-     * Сообщение об ошибке
-     */
-    error?: ReactNode;
-    /**
-     * Сообщение над графическим ключом
-     */
-    message?: ReactNode;
     /**
      * Идентификатор для систем автоматизированного тестирования.
      * Для сообщения используется модификатор -message, ошибки -error,
@@ -40,12 +32,12 @@ type CommonPatternLockProps = {
      */
     dataTestId?: string;
     /**
-     * Следить ли за изменениями значений цветовых токенов.
+     * Следить ли за изменениями значений цветовых токенов
      * @default false
      */
     observeTokens?: boolean;
     /**
-     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties).
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
      */
     observerParams?: {
         getTarget?: () => Node;
@@ -55,14 +47,14 @@ type CommonPatternLockProps = {
      * Дополнительный класс для message/errorMessage
      */
     messageClassName?: string;
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> & ConditionalProps;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
 type PrivatePatternLockProps = {
     /**
      * Включает ховер-эффект
      */
     hover?: boolean;
     /**
-     * Стили компонента.
+     * Стили компонента
      */
     styles: {
         [key: string]: string;

package/utils.d.ts

@@ -10,7 +10,5 @@ declare function getTheme(dimens: ThemeParams['dimens']): Theme;
 declare function getPatternLockTestIds(dataTestId: string): {
     patternLock: string;
     forgotCodeBtn: string;
-    error: string;
-    message: string;
 };
 export { getDefaultObserveTarget, getColorByToken, getSizes, getTheme, getPatternLockTestIds };

package/utils.js

@@ -23,34 +23,11 @@ var getSizes = (function () {
         if (cachedSize) {
             return cachedSize;
         }
-        if (window.matchMedia('(min-width: 600px)').matches) {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
-                width: 240,
-                height: 240,
-            };
-        }
-        else if (window.matchMedia('(min-width: 390px)').matches) {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 43 }),
-                width: 322,
-                height: 322,
-            };
-        }
-        else if (window.matchMedia('(min-width: 360px)').matches) {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 38 }),
-                width: 292,
-                height: 292,
-            };
-        }
-        else {
-            cachedSize = {
-                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
-                width: 240,
-                height: 240,
-            };
-        }
+        cachedSize = {
+            elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+            width: 240,
+            height: 240,
+        };
         return cachedSize;
     };
 })();
@@ -84,8 +61,6 @@ function getPatternLockTestIds(dataTestId) {
     return {
         patternLock: dataTestId,
         forgotCodeBtn: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn'),
-        error: coreComponentsShared.getDataTestId(dataTestId, 'error'),
-        message: coreComponentsShared.getDataTestId(dataTestId, 'message'),
     };
 }