@alfalab/core-components-pattern-lock 2.3.1 → 2.4.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/components/base-pattern-lock/Component.js +1 -1
- package/components/base-pattern-lock/index.css +8 -8
- package/desktop/Component.desktop.js +1 -1
- package/desktop/desktop.css +4 -4
- package/esm/components/base-pattern-lock/Component.js +1 -1
- package/esm/components/base-pattern-lock/index.css +8 -8
- package/esm/desktop/Component.desktop.js +1 -1
- package/esm/desktop/desktop.css +4 -4
- package/esm/mobile/Component.mobile.js +1 -1
- package/esm/mobile/mobile.css +3 -3
- package/mobile/Component.mobile.js +1 -1
- package/mobile/mobile.css +3 -3
- package/modern/components/base-pattern-lock/Component.js +1 -1
- package/modern/components/base-pattern-lock/index.css +8 -8
- package/modern/desktop/Component.desktop.js +1 -1
- package/modern/desktop/desktop.css +4 -4
- package/modern/mobile/Component.mobile.js +1 -1
- package/modern/mobile/mobile.css +3 -3
- package/moderncssm/Component.responsive.d.ts +6 -0
- package/moderncssm/Component.responsive.js +14 -0
- package/moderncssm/components/base-pattern-lock/Component.d.ts +6 -0
- package/moderncssm/components/base-pattern-lock/Component.js +53 -0
- package/moderncssm/components/base-pattern-lock/index.d.ts +1 -0
- package/moderncssm/components/base-pattern-lock/index.js +1 -0
- package/moderncssm/components/base-pattern-lock/index.module.css +38 -0
- package/moderncssm/consts.d.ts +11 -0
- package/moderncssm/consts.js +26 -0
- package/moderncssm/desktop/Component.desktop.d.ts +6 -0
- package/moderncssm/desktop/Component.desktop.js +8 -0
- package/moderncssm/desktop/desktop.module.css +14 -0
- package/moderncssm/desktop/index.d.ts +2 -0
- package/moderncssm/desktop/index.js +1 -0
- package/moderncssm/hooks/use-pattern-lock-cleanup.d.ts +6 -0
- package/moderncssm/hooks/use-pattern-lock-cleanup.js +14 -0
- package/moderncssm/index.d.ts +3 -0
- package/moderncssm/index.js +2 -0
- package/moderncssm/mobile/Component.mobile.d.ts +6 -0
- package/moderncssm/mobile/Component.mobile.js +8 -0
- package/moderncssm/mobile/index.d.ts +2 -0
- package/moderncssm/mobile/index.js +1 -0
- package/moderncssm/mobile/mobile.module.css +11 -0
- package/moderncssm/shared/index.d.ts +2 -0
- package/moderncssm/shared/index.js +2 -0
- package/moderncssm/typings.d.ts +91 -0
- package/moderncssm/typings.js +1 -0
- package/moderncssm/utils.d.ts +14 -0
- package/moderncssm/utils.js +73 -0
- package/moderncssm/vars.css +0 -0
- package/package.json +4 -4
- package/src/components/base-pattern-lock/index.module.css +1 -1
- package/src/desktop/desktop.module.css +1 -1
- package/src/mobile/mobile.module.css +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 163mc */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
} :root {
|
|
23
23
|
} :root {
|
|
24
24
|
--pattern-lock-min-width: 304px;
|
|
25
|
-
} .pattern-
|
|
25
|
+
} .pattern-lock__component_hz9gm {
|
|
26
26
|
margin: 0 auto;
|
|
27
27
|
min-width: var(--pattern-lock-min-width);
|
|
28
|
-
} .pattern-
|
|
28
|
+
} .pattern-lock__forgotBtn_hz9gm {
|
|
29
29
|
margin: var(--gap-8) auto 0;
|
|
30
|
-
} .pattern-
|
|
30
|
+
} .pattern-lock__hiddenBtn_hz9gm {
|
|
31
31
|
display: none;
|
|
32
32
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
|
|
3
3
|
|
|
4
|
-
const styles = {"component":"pattern-
|
|
4
|
+
const styles = {"component":"pattern-lock__component_1qqnn","forgotBtn":"pattern-lock__forgotBtn_1qqnn"};
|
|
5
5
|
require('./mobile.css')
|
|
6
6
|
|
|
7
7
|
const PatternLockMobile = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, ref: ref, styles: styles }));
|
package/modern/mobile/mobile.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1bg7z */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
} :root {
|
|
23
23
|
} :root {
|
|
24
24
|
--pattern-lock-min-width: 304px;
|
|
25
|
-
} .pattern-
|
|
25
|
+
} .pattern-lock__component_1qqnn {
|
|
26
26
|
margin: 0 auto;
|
|
27
27
|
min-width: var(--pattern-lock-min-width);
|
|
28
|
-
} .pattern-
|
|
28
|
+
} .pattern-lock__forgotBtn_1qqnn {
|
|
29
29
|
margin: var(--gap-8) auto 0;
|
|
30
30
|
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
|
|
4
|
+
import { PatternLockProps } from "./typings";
|
|
5
|
+
declare const PatternLock: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
|
|
6
|
+
export { PatternLock };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { useMatchMedia } from '@alfalab/core-components-mq/moderncssm';
|
|
3
|
+
import { PatternLockDesktop } from './desktop/Component.desktop.js';
|
|
4
|
+
import { PatternLockMobile } from './mobile/Component.mobile.js';
|
|
5
|
+
|
|
6
|
+
const PatternLock = forwardRef(({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
|
|
7
|
+
const query = `(min-width: ${breakpoint}px)`;
|
|
8
|
+
const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
|
|
9
|
+
const Component = isDesktop ? PatternLockDesktop : PatternLockMobile;
|
|
10
|
+
return React.createElement(Component, { ref: ref, ...restProps });
|
|
11
|
+
});
|
|
12
|
+
PatternLock.displayName = 'PatternLock';
|
|
13
|
+
|
|
14
|
+
export { PatternLock };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
|
|
4
|
+
import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
|
|
5
|
+
declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
|
|
6
|
+
export { BasePatternLock };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React, { forwardRef, useState, useEffect } from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import { ButtonMobile } from '@alfalab/core-components-button/moderncssm/mobile';
|
|
4
|
+
import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
|
|
5
|
+
import { ReactCanvasPatternLock } from '@alfalab/react-canvas-pattern-lock';
|
|
6
|
+
import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from '../../consts.js';
|
|
7
|
+
import { getTheme, getColorByToken, getSizes, getDefaultObserveTarget } from '../../utils.js';
|
|
8
|
+
import commonStyles from './index.module.css';
|
|
9
|
+
|
|
10
|
+
const BasePatternLock = forwardRef(({ observeTokens = false, observerParams = {}, className, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, messageClassName, hover, styles = {}, disabled = false, ...restProps }, ref) => {
|
|
11
|
+
const [params, setParams] = useState();
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
const { elementSizes, width, height } = getSizes();
|
|
14
|
+
setParams({
|
|
15
|
+
theme: getTheme(elementSizes),
|
|
16
|
+
width,
|
|
17
|
+
height,
|
|
18
|
+
});
|
|
19
|
+
}, []);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
let styleObserver = null;
|
|
22
|
+
if (observeTokens) {
|
|
23
|
+
const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } = observerParams;
|
|
24
|
+
styleObserver = new MutationObserver(() => setParams((prevState) => {
|
|
25
|
+
const { width, height, elementSizes } = getSizes();
|
|
26
|
+
if (!prevState) {
|
|
27
|
+
return { theme: getTheme(elementSizes), width, height };
|
|
28
|
+
}
|
|
29
|
+
const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;
|
|
30
|
+
const themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);
|
|
31
|
+
if (themeChanged)
|
|
32
|
+
return { ...prevState, theme: getTheme(elementSizes) };
|
|
33
|
+
return prevState;
|
|
34
|
+
}));
|
|
35
|
+
styleObserver.observe(getTarget(), options);
|
|
36
|
+
}
|
|
37
|
+
return () => styleObserver?.disconnect();
|
|
38
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
+
}, [observeTokens]);
|
|
40
|
+
return (React.createElement("div", { className: cn(commonStyles.component, styles.component, className, {
|
|
41
|
+
[commonStyles.hidden]: !params,
|
|
42
|
+
[commonStyles.withForgotBtn]: showForgotCodeBtn,
|
|
43
|
+
[commonStyles.disabled]: disabled,
|
|
44
|
+
}), "data-test-id": dataTestId },
|
|
45
|
+
React.createElement("div", { className: commonStyles.canvasContainer },
|
|
46
|
+
React.createElement("div", { className: commonStyles.canvasInner },
|
|
47
|
+
React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: 'space-between', extraBounds: extraBounds, hover: hover }))),
|
|
48
|
+
showForgotCodeBtn && (React.createElement(ButtonMobile, { view: 'transparent', className: cn(commonStyles.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText))));
|
|
49
|
+
});
|
|
50
|
+
BasePatternLock.displayName = 'BasePatternLock';
|
|
51
|
+
ReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';
|
|
52
|
+
|
|
53
|
+
export { BasePatternLock };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Component";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BasePatternLock } from './Component.js';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/* */
|
|
2
|
+
:root {
|
|
3
|
+
--pattern-lock-min-width: 304px;
|
|
4
|
+
--pattern-lock-min-height: 272px;
|
|
5
|
+
--pattern-lock-with-forgot-btn-min-height: 336px;
|
|
6
|
+
}
|
|
7
|
+
.component {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
align-items: center;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
min-height: var(--pattern-lock-min-height)
|
|
13
|
+
}
|
|
14
|
+
.component canvas {
|
|
15
|
+
display: block;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
.component .canvasContainer {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
padding: var(--gap-16) var(--gap-16);
|
|
21
|
+
min-width: var(--pattern-lock-min-width);
|
|
22
|
+
min-height: var(--pattern-lock-min-height)
|
|
23
|
+
}
|
|
24
|
+
.component .canvasContainer .canvasInner {
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
padding: 0 var(--gap-16);
|
|
27
|
+
min-width: var(--pattern-lock-min-height);
|
|
28
|
+
}
|
|
29
|
+
.component.disabled {
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
32
|
+
.withForgotBtn {
|
|
33
|
+
min-height: var(--pattern-lock-with-forgot-btn-min-height);
|
|
34
|
+
}
|
|
35
|
+
.forgotBtn {
|
|
36
|
+
display: block;
|
|
37
|
+
min-height: var(--size-xs-height);
|
|
38
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
|
|
2
|
+
import { ObservableTokens } from "./typings";
|
|
3
|
+
declare const OBSERVE_OPTIONS: MutationObserverInit;
|
|
4
|
+
declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
|
|
5
|
+
declare const OBSERVABLE_TOKENS: ObservableTokens;
|
|
6
|
+
declare const THEME_STATE: {
|
|
7
|
+
INITIAL: string;
|
|
8
|
+
SUCCESS: string;
|
|
9
|
+
FAILURE: string;
|
|
10
|
+
};
|
|
11
|
+
export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const OBSERVE_OPTIONS = {
|
|
2
|
+
childList: true,
|
|
3
|
+
attributes: false,
|
|
4
|
+
characterData: false,
|
|
5
|
+
subtree: true,
|
|
6
|
+
};
|
|
7
|
+
const DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
|
|
8
|
+
const OBSERVABLE_TOKENS = {
|
|
9
|
+
ACCENT_INITIAL: '--color-light-neutral-0-inverted',
|
|
10
|
+
ACCENT_SUCCESS: '--color-light-status-positive',
|
|
11
|
+
ACCENT_FAILURE: '--color-light-status-negative',
|
|
12
|
+
PRIMARY: '--color-light-neutral-500',
|
|
13
|
+
RING_BG_INITIAL: '--color-light-neutral-translucent-200',
|
|
14
|
+
SELECTED_RING_BG_INITIAL: '--color-light-neutral-translucent-200-hover',
|
|
15
|
+
SELECTED_RING_BG_SUCCESS: '--color-light-status-muted-positive',
|
|
16
|
+
SELECTED_RING_BG_FAILURE: '--color-light-status-muted-negative',
|
|
17
|
+
HOVER_INNER: '--color-light-neutral-500-hover',
|
|
18
|
+
HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
|
|
19
|
+
};
|
|
20
|
+
const THEME_STATE = {
|
|
21
|
+
INITIAL: 'initial',
|
|
22
|
+
SUCCESS: 'success',
|
|
23
|
+
FAILURE: 'failure',
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
|
|
4
|
+
import { CommonPatternLockProps } from "../typings";
|
|
5
|
+
declare const PatternLockDesktop: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
|
|
6
|
+
export { PatternLockDesktop };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
|
|
3
|
+
import styles from './desktop.module.css';
|
|
4
|
+
|
|
5
|
+
const PatternLockDesktop = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, hover: true, ref: ref, styles: styles }));
|
|
6
|
+
PatternLockDesktop.displayName = 'PatternLockDesktop';
|
|
7
|
+
|
|
8
|
+
export { PatternLockDesktop };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PatternLockDesktop } from './Component.desktop.js';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
|
|
3
|
+
declare const usePatternLockCleanup: (patternLockRef: React.MutableRefObject<TPatternLockInstance | null>) => {
|
|
4
|
+
clear: void;
|
|
5
|
+
};
|
|
6
|
+
export { usePatternLockCleanup };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
const usePatternLockCleanup = (patternLockRef) => {
|
|
4
|
+
const clear = useMemo(() => {
|
|
5
|
+
if (patternLockRef.current) {
|
|
6
|
+
patternLockRef.current.setInitialState();
|
|
7
|
+
}
|
|
8
|
+
}, [patternLockRef]);
|
|
9
|
+
return {
|
|
10
|
+
clear,
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { usePatternLockCleanup };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
|
|
4
|
+
import { CommonPatternLockProps } from "../typings";
|
|
5
|
+
declare const PatternLockMobile: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
|
|
6
|
+
export { PatternLockMobile };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
|
|
3
|
+
import styles from './mobile.module.css';
|
|
4
|
+
|
|
5
|
+
const PatternLockMobile = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, ref: ref, styles: styles }));
|
|
6
|
+
PatternLockMobile.displayName = 'PatternLockMobile';
|
|
7
|
+
|
|
8
|
+
export { PatternLockMobile };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PatternLockMobile } from './Component.mobile.js';
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
|
|
3
|
+
type ConditionalProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Показать кнопку "забыли код"
|
|
6
|
+
* @default "Забыли код?"
|
|
7
|
+
*/
|
|
8
|
+
showForgotCodeBtn: true;
|
|
9
|
+
/**
|
|
10
|
+
* Текст кнопки "забыли код"
|
|
11
|
+
* @default "Забыли код?"
|
|
12
|
+
*/
|
|
13
|
+
forgotCodeBtnText?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Коллбэк, вызываемый при клике на кнопку "Забыли код"
|
|
16
|
+
*/
|
|
17
|
+
onForgotBtnClick: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
18
|
+
} | {
|
|
19
|
+
showForgotCodeBtn?: false;
|
|
20
|
+
onForgotBtnClick?: never;
|
|
21
|
+
forgotCodeBtnText?: never;
|
|
22
|
+
};
|
|
23
|
+
type CommonPatternLockProps = {
|
|
24
|
+
/**
|
|
25
|
+
* Дополнительный класс
|
|
26
|
+
*/
|
|
27
|
+
className?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Идентификатор для систем автоматизированного тестирования.
|
|
30
|
+
* Для сообщения используется модификатор -message, ошибки -error,
|
|
31
|
+
* кнопки "забыли код" -forgot-code-btn
|
|
32
|
+
*/
|
|
33
|
+
dataTestId?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Следить ли за изменениями значений цветовых токенов
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
observeTokens?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
|
|
41
|
+
*/
|
|
42
|
+
observerParams?: {
|
|
43
|
+
getTarget?: () => Node;
|
|
44
|
+
options?: MutationObserverInit;
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* Дополнительный класс для message/errorMessage
|
|
48
|
+
*/
|
|
49
|
+
messageClassName?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Отключает ввод паттерна
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
disabled?: boolean;
|
|
55
|
+
} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
|
|
56
|
+
type PrivatePatternLockProps = {
|
|
57
|
+
/**
|
|
58
|
+
* Включает ховер-эффект
|
|
59
|
+
*/
|
|
60
|
+
hover?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Стили компонента
|
|
63
|
+
*/
|
|
64
|
+
styles: {
|
|
65
|
+
[key: string]: string;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
type PatternLockProps = CommonPatternLockProps & {
|
|
69
|
+
/**
|
|
70
|
+
* Контрольная точка, с нее начинается desktop версия
|
|
71
|
+
* @default 1024
|
|
72
|
+
*/
|
|
73
|
+
breakpoint?: number;
|
|
74
|
+
/**
|
|
75
|
+
* Значение по-умолчанию для хука useMatchMedia
|
|
76
|
+
*/
|
|
77
|
+
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
78
|
+
};
|
|
79
|
+
type ObservableTokens = {
|
|
80
|
+
ACCENT_INITIAL: string;
|
|
81
|
+
ACCENT_SUCCESS: string;
|
|
82
|
+
ACCENT_FAILURE: string;
|
|
83
|
+
RING_BG_INITIAL: string;
|
|
84
|
+
SELECTED_RING_BG_INITIAL: string;
|
|
85
|
+
SELECTED_RING_BG_SUCCESS: string;
|
|
86
|
+
SELECTED_RING_BG_FAILURE: string;
|
|
87
|
+
PRIMARY: string;
|
|
88
|
+
HOVER_INNER: string;
|
|
89
|
+
HOVER_OUTER: string;
|
|
90
|
+
};
|
|
91
|
+
export { CommonPatternLockProps, PrivatePatternLockProps, PatternLockProps, ObservableTokens };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Theme, ThemeParams } from '@alfalab/react-canvas-pattern-lock';
|
|
2
|
+
declare function getDefaultObserveTarget(): HTMLHeadElement;
|
|
3
|
+
declare function getColorByToken(token: string): string;
|
|
4
|
+
declare const getSizes: () => {
|
|
5
|
+
elementSizes: ThemeParams['dimens'];
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
};
|
|
9
|
+
declare function getTheme(dimens: ThemeParams['dimens']): Theme;
|
|
10
|
+
declare function getPatternLockTestIds(dataTestId: string): {
|
|
11
|
+
patternLock: string;
|
|
12
|
+
forgotCodeBtn: string;
|
|
13
|
+
};
|
|
14
|
+
export { getDefaultObserveTarget, getColorByToken, getSizes, getTheme, getPatternLockTestIds };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
|
|
2
|
+
import { OBSERVABLE_TOKENS, THEME_STATE } from './consts.js';
|
|
3
|
+
|
|
4
|
+
function getDefaultObserveTarget() {
|
|
5
|
+
return document.head;
|
|
6
|
+
}
|
|
7
|
+
function getColorByToken(token) {
|
|
8
|
+
return getComputedStyle(document.documentElement).getPropertyValue(token);
|
|
9
|
+
}
|
|
10
|
+
const getSizes = (() => {
|
|
11
|
+
const COMMON_SIZES = {
|
|
12
|
+
lineWidth: 6,
|
|
13
|
+
nodeRing: 0,
|
|
14
|
+
nodeCore: 12,
|
|
15
|
+
};
|
|
16
|
+
let cachedSize;
|
|
17
|
+
return () => {
|
|
18
|
+
if (cachedSize) {
|
|
19
|
+
return cachedSize;
|
|
20
|
+
}
|
|
21
|
+
cachedSize = {
|
|
22
|
+
elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
|
|
23
|
+
width: 240,
|
|
24
|
+
height: 240,
|
|
25
|
+
};
|
|
26
|
+
return cachedSize;
|
|
27
|
+
};
|
|
28
|
+
})();
|
|
29
|
+
function getTheme(dimens) {
|
|
30
|
+
const baseColors = {
|
|
31
|
+
primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
|
|
32
|
+
bg: 'transparent',
|
|
33
|
+
ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
|
|
34
|
+
hover: {
|
|
35
|
+
inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),
|
|
36
|
+
outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
return {
|
|
40
|
+
[THEME_STATE.INITIAL]: {
|
|
41
|
+
colors: {
|
|
42
|
+
...baseColors,
|
|
43
|
+
accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),
|
|
44
|
+
selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),
|
|
45
|
+
},
|
|
46
|
+
dimens,
|
|
47
|
+
},
|
|
48
|
+
[THEME_STATE.SUCCESS]: {
|
|
49
|
+
colors: {
|
|
50
|
+
...baseColors,
|
|
51
|
+
accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),
|
|
52
|
+
selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),
|
|
53
|
+
},
|
|
54
|
+
dimens,
|
|
55
|
+
},
|
|
56
|
+
[THEME_STATE.FAILURE]: {
|
|
57
|
+
colors: {
|
|
58
|
+
...baseColors,
|
|
59
|
+
accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),
|
|
60
|
+
selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),
|
|
61
|
+
},
|
|
62
|
+
dimens,
|
|
63
|
+
},
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
function getPatternLockTestIds(dataTestId) {
|
|
67
|
+
return {
|
|
68
|
+
patternLock: dataTestId,
|
|
69
|
+
forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export { getColorByToken, getDefaultObserveTarget, getPatternLockTestIds, getSizes, getTheme };
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-pattern-lock",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"description": "Pattern lock",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@alfalab/core-components-button": "^11.
|
|
18
|
+
"@alfalab/core-components-button": "^11.6.0",
|
|
19
19
|
"@alfalab/core-components-shared": "^0.12.0",
|
|
20
20
|
"@alfalab/core-components-mq": "^4.3.0",
|
|
21
21
|
"@alfalab/react-canvas-pattern-lock": "^2.0.7",
|
|
22
22
|
"classnames": "^2.3.1",
|
|
23
23
|
"tslib": "^2.4.0"
|
|
24
24
|
},
|
|
25
|
-
"themesVersion": "13.0
|
|
26
|
-
"varsVersion": "9.
|
|
25
|
+
"themesVersion": "13.1.0",
|
|
26
|
+
"varsVersion": "9.12.0"
|
|
27
27
|
}
|