@alfalab/core-components-confirmation 15.0.3 → 15.0.4
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/component.responsive.d.ts +1 -1
- package/components/base-confirmation/component.js.map +1 -1
- package/components/base-confirmation/index.css +2 -2
- package/components/base-confirmation/index.module.css.js +1 -1
- package/components/base-confirmation/index.module.css.js.map +1 -1
- package/components/countdown-loader/component.d.ts +1 -1
- package/components/countdown-loader/index.css +1 -1
- package/components/countdown-loader/index.module.css.js +1 -1
- package/components/countdown-loader/index.module.css.js.map +1 -1
- package/components/header/component.d.ts +1 -1
- package/components/header/index.css +1 -1
- package/components/header/index.module.css.js +1 -1
- package/components/screens/fatal-error/component.d.ts +1 -1
- package/components/screens/fatal-error/index.css +6 -6
- package/components/screens/fatal-error/index.module.css.js +1 -1
- package/components/screens/hint/component.d.ts +1 -1
- package/components/screens/hint/index.css +12 -12
- package/components/screens/hint/index.module.css.js +1 -1
- package/components/screens/initial/component.d.ts +1 -1
- package/components/screens/initial/component.js.map +1 -1
- package/components/screens/initial/countdown-section.d.ts +1 -1
- package/components/screens/initial/countdown-section.js.map +1 -1
- package/components/screens/initial/index.css +19 -19
- package/components/screens/initial/index.module.css.js +1 -1
- package/components/screens/temp-block/component.d.ts +1 -1
- package/components/screens/temp-block/component.js.map +1 -1
- package/components/screens/temp-block/index.css +8 -8
- package/components/screens/temp-block/index.module.css.js +1 -1
- package/components/screens/temp-block-over/component.d.ts +1 -1
- package/components/screens/temp-block-over/index.css +5 -5
- package/components/screens/temp-block-over/index.module.css.js +1 -1
- package/context.d.ts +0 -1
- package/cssm/component.responsive.d.ts +1 -1
- package/cssm/components/base-confirmation/component.js.map +1 -1
- package/cssm/components/countdown-loader/component.d.ts +1 -1
- package/cssm/components/header/component.d.ts +1 -1
- package/cssm/components/screens/fatal-error/component.d.ts +1 -1
- package/cssm/components/screens/hint/component.d.ts +1 -1
- package/cssm/components/screens/initial/component.d.ts +1 -1
- package/cssm/components/screens/initial/component.js.map +1 -1
- package/cssm/components/screens/initial/countdown-section.d.ts +1 -1
- package/cssm/components/screens/initial/countdown-section.js.map +1 -1
- package/cssm/components/screens/temp-block/component.d.ts +1 -1
- package/cssm/components/screens/temp-block/component.js.map +1 -1
- package/cssm/components/screens/temp-block-over/component.d.ts +1 -1
- package/cssm/context.d.ts +0 -1
- package/cssm/desktop/component.desktop.d.ts +1 -1
- package/cssm/mobile/component.mobile.d.ts +1 -1
- package/cssm/types.d.ts +3 -3
- package/cssm/utils.d.ts +2 -3
- package/cssm/utils.js.map +1 -1
- package/desktop/component.desktop.d.ts +1 -1
- package/esm/component.responsive.d.ts +1 -1
- package/esm/components/base-confirmation/component.js.map +1 -1
- package/esm/components/base-confirmation/index.css +2 -2
- package/esm/components/base-confirmation/index.module.css.js +1 -1
- package/esm/components/base-confirmation/index.module.css.js.map +1 -1
- package/esm/components/countdown-loader/component.d.ts +1 -1
- package/esm/components/countdown-loader/index.css +1 -1
- package/esm/components/countdown-loader/index.module.css.js +1 -1
- package/esm/components/countdown-loader/index.module.css.js.map +1 -1
- package/esm/components/header/component.d.ts +1 -1
- package/esm/components/header/index.css +1 -1
- package/esm/components/header/index.module.css.js +1 -1
- package/esm/components/screens/fatal-error/component.d.ts +1 -1
- package/esm/components/screens/fatal-error/index.css +6 -6
- package/esm/components/screens/fatal-error/index.module.css.js +1 -1
- package/esm/components/screens/hint/component.d.ts +1 -1
- package/esm/components/screens/hint/index.css +12 -12
- package/esm/components/screens/hint/index.module.css.js +1 -1
- package/esm/components/screens/initial/component.d.ts +1 -1
- package/esm/components/screens/initial/component.js.map +1 -1
- package/esm/components/screens/initial/countdown-section.d.ts +1 -1
- package/esm/components/screens/initial/countdown-section.js.map +1 -1
- package/esm/components/screens/initial/index.css +19 -19
- package/esm/components/screens/initial/index.module.css.js +1 -1
- package/esm/components/screens/temp-block/component.d.ts +1 -1
- package/esm/components/screens/temp-block/component.js.map +1 -1
- package/esm/components/screens/temp-block/index.css +8 -8
- package/esm/components/screens/temp-block/index.module.css.js +1 -1
- package/esm/components/screens/temp-block-over/component.d.ts +1 -1
- package/esm/components/screens/temp-block-over/index.css +5 -5
- package/esm/components/screens/temp-block-over/index.module.css.js +1 -1
- package/esm/context.d.ts +0 -1
- package/esm/desktop/component.desktop.d.ts +1 -1
- package/esm/mobile/component.mobile.d.ts +1 -1
- package/esm/types.d.ts +3 -3
- package/esm/utils.d.ts +2 -3
- package/esm/utils.js.map +1 -1
- package/mobile/component.mobile.d.ts +1 -1
- package/modern/component.responsive.d.ts +1 -1
- package/modern/components/base-confirmation/component.js.map +1 -1
- package/modern/components/base-confirmation/index.css +2 -2
- package/modern/components/base-confirmation/index.module.css.js +1 -1
- package/modern/components/base-confirmation/index.module.css.js.map +1 -1
- package/modern/components/countdown-loader/component.d.ts +1 -1
- package/modern/components/countdown-loader/index.css +1 -1
- package/modern/components/countdown-loader/index.module.css.js +1 -1
- package/modern/components/countdown-loader/index.module.css.js.map +1 -1
- package/modern/components/header/component.d.ts +1 -1
- package/modern/components/header/index.css +1 -1
- package/modern/components/header/index.module.css.js +1 -1
- package/modern/components/screens/fatal-error/component.d.ts +1 -1
- package/modern/components/screens/fatal-error/index.css +6 -6
- package/modern/components/screens/fatal-error/index.module.css.js +1 -1
- package/modern/components/screens/hint/component.d.ts +1 -1
- package/modern/components/screens/hint/index.css +12 -12
- package/modern/components/screens/hint/index.module.css.js +1 -1
- package/modern/components/screens/initial/component.d.ts +1 -1
- package/modern/components/screens/initial/component.js.map +1 -1
- package/modern/components/screens/initial/countdown-section.d.ts +1 -1
- package/modern/components/screens/initial/countdown-section.js.map +1 -1
- package/modern/components/screens/initial/index.css +19 -19
- package/modern/components/screens/initial/index.module.css.js +1 -1
- package/modern/components/screens/temp-block/component.d.ts +1 -1
- package/modern/components/screens/temp-block/component.js.map +1 -1
- package/modern/components/screens/temp-block/index.css +8 -8
- package/modern/components/screens/temp-block/index.module.css.js +1 -1
- package/modern/components/screens/temp-block-over/component.d.ts +1 -1
- package/modern/components/screens/temp-block-over/index.css +5 -5
- package/modern/components/screens/temp-block-over/index.module.css.js +1 -1
- package/modern/context.d.ts +0 -1
- package/modern/desktop/component.desktop.d.ts +1 -1
- package/modern/mobile/component.mobile.d.ts +1 -1
- package/modern/types.d.ts +3 -3
- package/modern/utils.d.ts +2 -3
- package/modern/utils.js.map +1 -1
- package/moderncssm/component.responsive.d.ts +1 -1
- package/moderncssm/components/base-confirmation/component.js.map +1 -1
- package/moderncssm/components/countdown-loader/component.d.ts +1 -1
- package/moderncssm/components/header/component.d.ts +1 -1
- package/moderncssm/components/screens/fatal-error/component.d.ts +1 -1
- package/moderncssm/components/screens/hint/component.d.ts +1 -1
- package/moderncssm/components/screens/initial/component.d.ts +1 -1
- package/moderncssm/components/screens/initial/component.js.map +1 -1
- package/moderncssm/components/screens/initial/countdown-section.d.ts +1 -1
- package/moderncssm/components/screens/initial/countdown-section.js.map +1 -1
- package/moderncssm/components/screens/temp-block/component.d.ts +1 -1
- package/moderncssm/components/screens/temp-block/component.js.map +1 -1
- package/moderncssm/components/screens/temp-block-over/component.d.ts +1 -1
- package/moderncssm/context.d.ts +0 -1
- package/moderncssm/desktop/component.desktop.d.ts +1 -1
- package/moderncssm/mobile/component.mobile.d.ts +1 -1
- package/moderncssm/types.d.ts +3 -3
- package/moderncssm/utils.d.ts +2 -3
- package/moderncssm/utils.js.map +1 -1
- package/package.json +8 -8
- package/src/components/base-confirmation/index.module.css +1 -1
- package/src/components/countdown-loader/index.module.css +1 -1
- package/src/vars.css +1 -1
- package/types.d.ts +3 -3
- package/utils.d.ts +2 -2
- package/utils.js.map +1 -1
package/modern/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":";;AAIA;;;;;AAKG;AACG,SAAU,iBAAiB,CAAC,EAAU,EAAA;IACxC,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;IACzC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IAClD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;AAEhD,IAAA,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE;IACjC,MAAM,aAAa,GAAG,CAAA,EAAA,EAAK,OAAO,CAAA,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type ConfirmationProps } from './types';
|
|
3
|
-
export
|
|
3
|
+
export type ResponsiveConfirmationProps = Omit<ConfirmationProps, 'confirmationScreens' | 'breakpoint'> & {
|
|
4
4
|
/**
|
|
5
5
|
* Контрольная точка, с нее начинается desktop версия
|
|
6
6
|
* @default 1024
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/base-confirmation/component.tsx"],"sourcesContent":["import React, { type ComponentType, type FC, useEffect, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../context';\nimport { type ConfirmationProps, defaultTexts, type TConfirmationContext } from '../../types';\nimport { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';\nimport { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';\n\nimport styles from './index.module.css';\n\nconst confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {\n INITIAL: Initial,\n HINT: Hint,\n FATAL_ERROR: FatalError,\n TEMP_BLOCK: TempBlock,\n TEMP_BLOCK_OVER: TempBlockOver,\n};\n\nexport const BaseConfirmation: FC<ConfirmationProps> = ({\n state,\n screen,\n titleTag = 'h3',\n alignContent = 'left',\n children,\n requiredCharAmount = 5,\n countdownDuration = ONE_MINUTE,\n tempBlockDuration = ONE_DAY,\n phone,\n blockSmsRetry,\n dataTestId,\n className,\n maxWidth,\n getScreensMap,\n onInputFinished,\n onChangeState,\n onSmsRetryClick,\n onChangeScreen,\n onFatalErrorOkButtonClick,\n onTempBlockFinished,\n mobile,\n clearCodeOnError = true,\n hideCountdownSection = false,\n breakpoint,\n client,\n initialScreenHintSlot,\n errorVisibleDuration,\n ...restProps\n}) => {\n const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);\n\n const prevState = usePrevious(state);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n /**\n * Перезапускаем таймер после повторного запроса кода\n */\n if (state === 'INITIAL' && prevState === 'CODE_SENDING') {\n startTimer();\n }\n }, [state, prevState, startTimer]);\n\n useEffect(() => {\n /**\n * Останавливаем таймер, если новый экран/состояние не содержит таймер\n */\n if (\n !['INITIAL', 'HINT', 'TEMP_BLOCK', 'TEMP_BLOCK_OVER'].includes(screen) ||\n blockSmsRetry\n ) {\n stopTimer();\n }\n }, [state, screen, blockSmsRetry, stopTimer]);\n\n const handleSmsRetry = () => {\n onChangeState('CODE_SENDING');\n\n onSmsRetryClick();\n };\n\n const handleInputFinished = (code: string) => {\n onChangeState('CODE_CHECKING');\n\n onInputFinished(code);\n };\n\n const handleFatalErrorOkButtonClick = () => {\n if (onFatalErrorOkButtonClick) {\n onFatalErrorOkButtonClick();\n }\n };\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const contextValue: TConfirmationContext = {\n hideCountdownSection,\n alignContent,\n titleTag,\n texts: { ...defaultTexts, ...restProps.texts },\n state,\n screen,\n requiredCharAmount,\n countdownDuration,\n timeLeft,\n tempBlockDuration,\n phone,\n blockSmsRetry,\n breakpoint,\n client,\n onTempBlockFinished,\n onChangeState,\n onChangeScreen,\n clearCodeOnError,\n errorVisibleDuration,\n initialScreenHintSlot,\n onInputFinished: handleInputFinished,\n onSmsRetryClick: handleSmsRetry,\n onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,\n };\n\n const customScreen = useMemo(() => getScreensMap?.(confirmationScreens), [getScreensMap]);\n\n const screensMap = customScreen || confirmationScreens;\n\n const CurrentScreen = screensMap[screen];\n\n return (\n <ConfirmationContext.Provider value={contextValue}>\n <div\n className={cn(styles.component, className, {\n [styles.center]: alignContent === 'center',\n })}\n style={{ maxWidth }}\n data-test-id={dataTestId}\n >\n {CurrentScreen && <CurrentScreen mobile={mobile} />}\n </div>\n </ConfirmationContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,MAAM,mBAAmB,GAA2D;AAChF,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,WAAW,EAAE,UAAU;AACvB,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,eAAe,EAAE,aAAa;CACjC;AAEY,MAAA,gBAAgB,GAA0B,CAAC,EACpD,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,kBAAkB,GAAG,CAAC,EACtB,iBAAiB,GAAG,UAAU,EAC9B,iBAAiB,GAAG,OAAO,EAC3B,KAAK,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,yBAAyB,EACzB,mBAAmB,EACnB,MAAM,EACN,gBAAgB,GAAG,IAAI,EACvB,oBAAoB,GAAG,KAAK,EAC5B,UAAU,EACV,MAAM,EACN,qBAAqB,EACrB,oBAAoB,EACpB,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;AAEzE,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC;IAEpC,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX;;AAEG;
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/base-confirmation/component.tsx"],"sourcesContent":["import React, { type ComponentType, type FC, useEffect, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../context';\nimport { type ConfirmationProps, defaultTexts, type TConfirmationContext } from '../../types';\nimport { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';\nimport { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';\n\nimport styles from './index.module.css';\n\nconst confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {\n INITIAL: Initial,\n HINT: Hint,\n FATAL_ERROR: FatalError,\n TEMP_BLOCK: TempBlock,\n TEMP_BLOCK_OVER: TempBlockOver,\n};\n\nexport const BaseConfirmation: FC<ConfirmationProps> = ({\n state,\n screen,\n titleTag = 'h3',\n alignContent = 'left',\n children,\n requiredCharAmount = 5,\n countdownDuration = ONE_MINUTE,\n tempBlockDuration = ONE_DAY,\n phone,\n blockSmsRetry,\n dataTestId,\n className,\n maxWidth,\n getScreensMap,\n onInputFinished,\n onChangeState,\n onSmsRetryClick,\n onChangeScreen,\n onFatalErrorOkButtonClick,\n onTempBlockFinished,\n mobile,\n clearCodeOnError = true,\n hideCountdownSection = false,\n breakpoint,\n client,\n initialScreenHintSlot,\n errorVisibleDuration,\n ...restProps\n}) => {\n const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);\n\n const prevState = usePrevious(state);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n /**\n * Перезапускаем таймер после повторного запроса кода\n */\n if (state === 'INITIAL' && prevState === 'CODE_SENDING') {\n startTimer();\n }\n }, [state, prevState, startTimer]);\n\n useEffect(() => {\n /**\n * Останавливаем таймер, если новый экран/состояние не содержит таймер\n */\n if (\n !['INITIAL', 'HINT', 'TEMP_BLOCK', 'TEMP_BLOCK_OVER'].includes(screen) ||\n blockSmsRetry\n ) {\n stopTimer();\n }\n }, [state, screen, blockSmsRetry, stopTimer]);\n\n const handleSmsRetry = () => {\n onChangeState('CODE_SENDING');\n\n onSmsRetryClick();\n };\n\n const handleInputFinished = (code: string) => {\n onChangeState('CODE_CHECKING');\n\n onInputFinished(code);\n };\n\n const handleFatalErrorOkButtonClick = () => {\n if (onFatalErrorOkButtonClick) {\n onFatalErrorOkButtonClick();\n }\n };\n\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n const contextValue: TConfirmationContext = {\n hideCountdownSection,\n alignContent,\n titleTag,\n texts: { ...defaultTexts, ...restProps.texts },\n state,\n screen,\n requiredCharAmount,\n countdownDuration,\n timeLeft,\n tempBlockDuration,\n phone,\n blockSmsRetry,\n breakpoint,\n client,\n onTempBlockFinished,\n onChangeState,\n onChangeScreen,\n clearCodeOnError,\n errorVisibleDuration,\n initialScreenHintSlot,\n onInputFinished: handleInputFinished,\n onSmsRetryClick: handleSmsRetry,\n onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,\n };\n\n const customScreen = useMemo(() => getScreensMap?.(confirmationScreens), [getScreensMap]);\n\n const screensMap = customScreen || confirmationScreens;\n\n const CurrentScreen = screensMap[screen];\n\n return (\n <ConfirmationContext.Provider value={contextValue}>\n <div\n className={cn(styles.component, className, {\n [styles.center]: alignContent === 'center',\n })}\n style={{ maxWidth }}\n data-test-id={dataTestId}\n >\n {CurrentScreen && <CurrentScreen mobile={mobile} />}\n </div>\n </ConfirmationContext.Provider>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n type BaseCodeInputProps,\n type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n const {\n state,\n alignContent,\n titleTag,\n texts,\n requiredCharAmount,\n timeLeft,\n phone,\n clearCodeOnError,\n hideCountdownSection,\n initialScreenHintSlot,\n errorVisibleDuration,\n onChangeState,\n onInputFinished,\n onChangeScreen,\n onSmsRetryClick,\n } = useContext(ConfirmationContext);\n\n const prevState = usePrevious(state);\n\n const inputRef = useRef<CustomInputRef>(null);\n\n const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n const timerId = useRef(0);\n\n const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n onInputFinished(code);\n };\n\n const handleSmsHintLinkClick = () => {\n onChangeScreen('HINT');\n };\n\n const handleInputChange = () => {\n if (state === 'CODE_ERROR') {\n onChangeState('INITIAL');\n }\n };\n\n const handleSmsRetryClick = () => {\n if (inputRef.current) {\n inputRef.current.reset();\n }\n\n onSmsRetryClick();\n };\n\n const handleErrorAnimationEnd = () => {\n if (clearCodeOnError && state !== 'INITIAL') {\n onChangeState('INITIAL');\n }\n };\n\n const clearTimer = useCallback(() => {\n window.clearTimeout(timerId.current);\n }, []);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n\n return () => {\n clearTimer();\n };\n }, [clearTimer]);\n\n useEffect(() => {\n if (!inputRef.current) {\n return;\n }\n\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n inputRef.current.focus();\n }\n }, [prevState, state, requiredCharAmount]);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n setCodeSendHintVisible(true);\n\n clearTimer();\n\n timerId.current = window.setTimeout(() => {\n setCodeSendHintVisible(false);\n }, CODE_SEND_HINT_VISIBLE_DURATION);\n }\n }, [prevState, state, clearTimer]);\n\n const getCodeInputError = (): string | boolean => {\n if (state === 'CODE_EXPIRED') {\n return texts.codeErrorExpired || true;\n }\n\n if (state === 'CODE_EXPIRED_ENDED') {\n return texts.codeErrorExpiredEnded || true;\n }\n\n if (state === 'CODE_ERROR') {\n return texts.codeError || true;\n }\n\n return false;\n };\n\n const renderHintButton = () => {\n if (initialScreenHintSlot) {\n return initialScreenHintSlot;\n }\n\n if (mobile) {\n return (\n <ButtonMobile\n onClick={handleSmsHintLinkClick}\n className={styles.smsBtn}\n view='text'\n size={40}\n >\n {texts.linkToHint}\n </ButtonMobile>\n );\n }\n\n return (\n <Link\n onClick={handleSmsHintLinkClick}\n className={styles.smsComeLink}\n view={mobile ? 'primary' : 'secondary'}\n pseudo={true}\n >\n {texts.linkToHint}\n </Link>\n );\n };\n\n const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n const timePassed = timeLeft === 0;\n\n const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.title}\n </Header>\n\n {phone ? (\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.phone, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n Отправили на {phone}\n </TypographyText>\n ) : null}\n <ComponentCodeInput\n disabled={processing}\n error={getCodeInputError()}\n ref={inputRef}\n fields={requiredCharAmount}\n className={cn(styles.containerInput, styles.codeInput)}\n onComplete={handleInputComplete}\n onChange={handleInputChange}\n clearCodeOnError={clearCodeOnError}\n errorVisibleDuration={errorVisibleDuration}\n onErrorAnimationEnd={handleErrorAnimationEnd}\n />\n {!hideCountdownSection && (\n <CountdownSection\n processing={processing}\n timePassed={timePassed}\n codeSendHintVisible={codeSendHintVisible}\n handleSmsRetryClick={handleSmsRetryClick}\n mobile={mobile}\n />\n )}\n\n {renderHintButton()}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n type BaseCodeInputProps,\n type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n const {\n state,\n alignContent,\n titleTag,\n texts,\n requiredCharAmount,\n timeLeft,\n phone,\n clearCodeOnError,\n hideCountdownSection,\n initialScreenHintSlot,\n errorVisibleDuration,\n onChangeState,\n onInputFinished,\n onChangeScreen,\n onSmsRetryClick,\n } = useContext(ConfirmationContext);\n\n const prevState = usePrevious(state);\n\n const inputRef = useRef<CustomInputRef>(null);\n\n const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n const timerId = useRef(0);\n\n const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n onInputFinished(code);\n };\n\n const handleSmsHintLinkClick = () => {\n onChangeScreen('HINT');\n };\n\n const handleInputChange = () => {\n if (state === 'CODE_ERROR') {\n onChangeState('INITIAL');\n }\n };\n\n const handleSmsRetryClick = () => {\n if (inputRef.current) {\n inputRef.current.reset();\n }\n\n onSmsRetryClick();\n };\n\n const handleErrorAnimationEnd = () => {\n if (clearCodeOnError && state !== 'INITIAL') {\n onChangeState('INITIAL');\n }\n };\n\n const clearTimer = useCallback(() => {\n window.clearTimeout(timerId.current);\n }, []);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n\n return () => {\n clearTimer();\n };\n }, [clearTimer]);\n\n useEffect(() => {\n if (!inputRef.current) {\n return;\n }\n\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n inputRef.current.focus();\n }\n }, [prevState, state, requiredCharAmount]);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n setCodeSendHintVisible(true);\n\n clearTimer();\n\n timerId.current = window.setTimeout(() => {\n setCodeSendHintVisible(false);\n }, CODE_SEND_HINT_VISIBLE_DURATION);\n }\n }, [prevState, state, clearTimer]);\n\n const getCodeInputError = (): string | boolean => {\n if (state === 'CODE_EXPIRED') {\n return texts.codeErrorExpired || true;\n }\n\n if (state === 'CODE_EXPIRED_ENDED') {\n return texts.codeErrorExpiredEnded || true;\n }\n\n if (state === 'CODE_ERROR') {\n return texts.codeError || true;\n }\n\n return false;\n };\n\n const renderHintButton = () => {\n if (initialScreenHintSlot) {\n return initialScreenHintSlot;\n }\n\n if (mobile) {\n return (\n <ButtonMobile\n onClick={handleSmsHintLinkClick}\n className={styles.smsBtn}\n view='text'\n size={40}\n >\n {texts.linkToHint}\n </ButtonMobile>\n );\n }\n\n return (\n <Link\n onClick={handleSmsHintLinkClick}\n className={styles.smsComeLink}\n view={mobile ? 'primary' : 'secondary'}\n pseudo={true}\n >\n {texts.linkToHint}\n </Link>\n );\n };\n\n const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n const timePassed = timeLeft === 0;\n\n const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.title}\n </Header>\n\n {phone ? (\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.phone, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n Отправили на {phone}\n </TypographyText>\n ) : null}\n <ComponentCodeInput\n disabled={processing}\n error={getCodeInputError()}\n ref={inputRef}\n fields={requiredCharAmount}\n className={cn(styles.containerInput, styles.codeInput)}\n onComplete={handleInputComplete}\n onChange={handleInputChange}\n clearCodeOnError={clearCodeOnError}\n errorVisibleDuration={errorVisibleDuration}\n onErrorAnimationEnd={handleErrorAnimationEnd}\n />\n {!hideCountdownSection && (\n <CountdownSection\n processing={processing}\n timePassed={timePassed}\n codeSendHintVisible={codeSendHintVisible}\n handleSmsRetryClick={handleSmsRetryClick}\n mobile={mobile}\n />\n )}\n\n {renderHintButton()}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,+BAA+B,GAAG,IAAI;MAE/B,OAAO,GAAqB,CAAC,EAAE,MAAM,EAAE,KAAI;AACpD,IAAA,MAAM,EACF,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,kBAAkB,EAClB,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,aAAa,EACb,eAAe,EACf,cAAc,EACd,eAAe,GAClB,GAAG,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE7C,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAErE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;AAEzB,IAAA,MAAM,mBAAmB,GAAqC,CAAC,IAAI,KAAI;QACnE,eAAe,CAAC,IAAI,CAAC;AACzB,KAAC;IAED,MAAM,sBAAsB,GAAG,MAAK;QAChC,cAAc,CAAC,MAAM,CAAC;AAC1B,KAAC;IAED,MAAM,iBAAiB,GAAG,MAAK;AAC3B,QAAA,IAAI,KAAK,KAAK,YAAY,EAAE;YACxB,aAAa,CAAC,SAAS,CAAC;;AAEhC,KAAC;IAED,MAAM,mBAAmB,GAAG,MAAK;AAC7B,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;;AAG5B,QAAA,eAAe,EAAE;AACrB,KAAC;IAED,MAAM,uBAAuB,GAAG,MAAK;AACjC,QAAA,IAAI,gBAAgB,IAAI,KAAK,KAAK,SAAS,EAAE;YACzC,aAAa,CAAC,SAAS,CAAC;;AAEhC,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC;KACvC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;;AAG5B,QAAA,OAAO,MAAK;AACR,YAAA,UAAU,EAAE;AAChB,SAAC;AACL,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACnB;;QAGJ,IAAI,SAAS,KAAK,cAAc,IAAI,KAAK,KAAK,cAAc,EAAE;AAC1D,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;;KAE/B,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC;IAE1C,4BAA4B,CAAC,MAAK;QAC9B,IAAI,SAAS,KAAK,cAAc,IAAI,KAAK,KAAK,cAAc,EAAE;YAC1D,sBAAsB,CAAC,IAAI,CAAC;AAE5B,YAAA,UAAU,EAAE;YAEZ,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBACrC,sBAAsB,CAAC,KAAK,CAAC;aAChC,EAAE,+BAA+B,CAAC;;KAE1C,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;IAElC,MAAM,iBAAiB,GAAG,MAAuB;AAC7C,QAAA,IAAI,KAAK,KAAK,cAAc,EAAE;AAC1B,YAAA,OAAO,KAAK,CAAC,gBAAgB,IAAI,IAAI;;AAGzC,QAAA,IAAI,KAAK,KAAK,oBAAoB,EAAE;AAChC,YAAA,OAAO,KAAK,CAAC,qBAAqB,IAAI,IAAI;;AAG9C,QAAA,IAAI,KAAK,KAAK,YAAY,EAAE;AACxB,YAAA,OAAO,KAAK,CAAC,SAAS,IAAI,IAAI;;AAGlC,QAAA,OAAO,KAAK;AAChB,KAAC;IAED,MAAM,gBAAgB,GAAG,MAAK;QAC1B,IAAI,qBAAqB,EAAE;AACvB,YAAA,OAAO,qBAAqB;;QAGhC,IAAI,MAAM,EAAE;YACR,QACI,KAAC,CAAA,aAAA,CAAA,YAAY,EACT,EAAA,OAAO,EAAE,sBAAsB,EAC/B,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,EAAE,EAEP,EAAA,KAAK,CAAC,UAAU,CACN;;AAIvB,QAAA,QACI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,OAAO,EAAE,sBAAsB,EAC/B,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,EACtC,MAAM,EAAE,IAAI,IAEX,KAAK,CAAC,UAAU,CACd;AAEf,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEpE,IAAA,MAAM,UAAU,GAAG,QAAQ,KAAK,CAAC;IAEjC,MAAM,kBAAkB,GAAG,MAAM,GAAG,eAAe,GAAG,gBAAgB;AAEtE,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,KAAK,CACP;QAER,KAAK,IACF,oBAAC,cAAc,EAAA,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;aACzC,CAAC,EAAA;;AAEY,YAAA,KAAK,CACN,IACjB,IAAI;QACR,KAAC,CAAA,aAAA,CAAA,kBAAkB,IACf,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,iBAAiB,EAAE,EAC1B,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,kBAAkB,EAC1B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,EACtD,UAAU,EAAE,mBAAmB,EAC/B,QAAQ,EAAE,iBAAiB,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,oBAAoB,EAAE,oBAAoB,EAC1C,mBAAmB,EAAE,uBAAuB,EAC9C,CAAA;QACD,CAAC,oBAAoB,KAClB,KAAC,CAAA,aAAA,CAAA,gBAAgB,EACb,EAAA,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,mBAAmB,EACxC,MAAM,EAAE,MAAM,EAAA,CAChB,CACL;QAEA,gBAAgB,EAAE,CACjB;AAEd;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n codeSendHintVisible: boolean;\n timePassed: boolean;\n processing: boolean;\n mobile?: boolean;\n handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n codeSendHintVisible,\n timePassed,\n processing,\n mobile,\n handleSmsRetryClick,\n}) => {\n const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n useContext(ConfirmationContext);\n\n const renderText = (content: ReactNode) => (\n <TypographyText\n className={cn(styles.countdownContainer, {\n [styles.countdownMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n view={mobile ? 'primary-small' : 'primary-medium'}\n tag='div'\n >\n {content}\n </TypographyText>\n );\n\n if (codeSendHintVisible) return renderText(texts.codeSended);\n\n if (processing) {\n return (\n <div\n className={cn(styles.loaderWrap, styles.countdownContainer, {\n [styles.countdownLoaderMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n >\n <Spinner preset={24} visible={true} />\n\n <span className={styles.loaderText}>\n {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n </span>\n </div>\n );\n }\n\n if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n if (timePassed) {\n return (\n <Button\n size={mobile ? 40 : 32}\n view='secondary'\n onClick={handleSmsRetryClick}\n className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n breakpoint={breakpoint}\n client={client}\n >\n {texts.buttonRetry}\n </Button>\n );\n }\n\n return renderText(\n <Fragment>\n {texts.countdown}\n {'\\u00A0'}\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </Fragment>,\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACK,CACpB;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n codeSendHintVisible: boolean;\n timePassed: boolean;\n processing: boolean;\n mobile?: boolean;\n handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n codeSendHintVisible,\n timePassed,\n processing,\n mobile,\n handleSmsRetryClick,\n}) => {\n const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n useContext(ConfirmationContext);\n\n const renderText = (content: ReactNode) => (\n <TypographyText\n className={cn(styles.countdownContainer, {\n [styles.countdownMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n view={mobile ? 'primary-small' : 'primary-medium'}\n tag='div'\n >\n {content}\n </TypographyText>\n );\n\n if (codeSendHintVisible) return renderText(texts.codeSended);\n\n if (processing) {\n return (\n <div\n className={cn(styles.loaderWrap, styles.countdownContainer, {\n [styles.countdownLoaderMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n >\n <Spinner preset={24} visible={true} />\n\n <span className={styles.loaderText}>\n {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n </span>\n </div>\n );\n }\n\n if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n if (timePassed) {\n return (\n <Button\n size={mobile ? 40 : 32}\n view='secondary'\n onClick={handleSmsRetryClick}\n className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n breakpoint={breakpoint}\n client={client}\n >\n {texts.buttonRetry}\n </Button>\n );\n }\n\n return renderText(\n <Fragment>\n {texts.countdown}\n {'\\u00A0'}\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </Fragment>,\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACK,CACpB;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;IAE5D,IAAI,UAAU,EAAE;AACZ,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,kBAAkB,EAAE;AACxD,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACtC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;aACpC,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;YAEtC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,IAC7B,KAAK,KAAK,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAChE,CACL;;AAId,IAAA,IAAI,aAAa;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC;IAE1D,IAAI,UAAU,EAAE;QACZ,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,EACtB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,EAAE,CAAC,EAC7E,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,WAAW,CACb;;IAIjB,OAAO,UAAU,CACb,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,KAAK,CAAC,SAAS;QACf,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CAClE,CACd;AACL;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n const {\n alignContent,\n titleTag,\n texts,\n tempBlockDuration,\n onChangeScreen,\n onTempBlockFinished,\n } = useContext(ConfirmationContext);\n\n const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n if (timeLeft === 0 && onTempBlockFinished) {\n onTempBlockFinished();\n }\n }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.tempBlockTitle}\n </Header>\n\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.description, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n {texts.tempBlockDescription}\n </TypographyText>\n\n <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n <CountdownLoader\n progress={1 - timeLeft / tempBlockDuration}\n className={styles.loader}\n />\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;MAmBa,SAAS,GAAuB,CAAC,EAAE,MAAM,EAAE,KAAI;AACxD,IAAA,MAAM,EACF,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACtB,GAAG,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;IAE9D,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n const {\n alignContent,\n titleTag,\n texts,\n tempBlockDuration,\n onChangeScreen,\n onTempBlockFinished,\n } = useContext(ConfirmationContext);\n\n const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n if (timeLeft === 0 && onTempBlockFinished) {\n onTempBlockFinished();\n }\n }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.tempBlockTitle}\n </Header>\n\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.description, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n {texts.tempBlockDescription}\n </TypographyText>\n\n <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n <CountdownLoader\n progress={1 - timeLeft / tempBlockDuration}\n className={styles.loader}\n />\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;MAmBa,SAAS,GAAuB,CAAC,EAAE,MAAM,EAAE,KAAI;AACxD,IAAA,MAAM,EACF,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACtB,GAAG,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;IAE9D,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE;;KAE5B,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC;AAEnD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,cAAc,CAChB;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,oBAAoB,CACd;AAEjB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM,EAAE,CAAC,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EACZ,QAAQ,EAAE,CAAC,GAAG,QAAQ,GAAG,iBAAiB,EAC1C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAG,EAAA,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CACvE,CACJ;AAEd;;;;"}
|
package/moderncssm/context.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type ConfirmationProps } from '../types';
|
|
3
|
-
export
|
|
3
|
+
export type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;
|
|
4
4
|
export declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type FC } from 'react';
|
|
2
2
|
import { type ConfirmationProps } from '../types';
|
|
3
|
-
export
|
|
3
|
+
export type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
|
|
4
4
|
export declare const ConfirmationMobile: FC<MobileConfirmationProps>;
|
package/moderncssm/types.d.ts
CHANGED
|
@@ -118,7 +118,7 @@ export interface ConfirmationProps {
|
|
|
118
118
|
*/
|
|
119
119
|
errorVisibleDuration?: number;
|
|
120
120
|
}
|
|
121
|
-
export
|
|
121
|
+
export type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
|
|
122
122
|
timeLeft: number;
|
|
123
123
|
};
|
|
124
124
|
export interface ConfirmationTexts {
|
|
@@ -163,8 +163,8 @@ export interface ConfirmationTexts {
|
|
|
163
163
|
tempBlockOverDescription?: ReactNode;
|
|
164
164
|
tempBlockOverButton?: string;
|
|
165
165
|
}
|
|
166
|
-
export
|
|
167
|
-
export
|
|
166
|
+
export type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
|
|
167
|
+
export type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
|
|
168
168
|
export interface ScreensMap {
|
|
169
169
|
[key: string]: ComponentType;
|
|
170
170
|
}
|
package/moderncssm/utils.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { type ConfirmationProps } from './types';
|
|
3
2
|
/**
|
|
4
3
|
* Форматирование миллисекунд в hh:mm:ss.
|
|
@@ -7,14 +6,14 @@ import { type ConfirmationProps } from './types';
|
|
|
7
6
|
* @returns {String} время в формате mm:ss
|
|
8
7
|
*/
|
|
9
8
|
export declare function formatMsAsMinutes(ms: number): string;
|
|
10
|
-
|
|
9
|
+
type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
|
|
11
10
|
/**
|
|
12
11
|
* Возвращает время, которое осталось до истечения таймера в ms
|
|
13
12
|
*/
|
|
14
13
|
export declare const useCountdown: UseCountdown;
|
|
15
14
|
export declare const ONE_DAY: number;
|
|
16
15
|
export declare const ONE_MINUTE: number;
|
|
17
|
-
|
|
16
|
+
type UseConfirmationParams = {
|
|
18
17
|
state?: ConfirmationProps['state'];
|
|
19
18
|
screen?: ConfirmationProps['screen'];
|
|
20
19
|
blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
|
package/moderncssm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":";;AAIA;;;;;AAKG;AACG,SAAU,iBAAiB,CAAC,EAAU,EAAA;IACxC,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;IACzC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IAClD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;AAEhD,IAAA,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE;IACjC,MAAM,aAAa,GAAG,CAAA,EAAA,EAAK,OAAO,CAAA,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-confirmation",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.0.4",
|
|
4
4
|
"description": "Sms confirmation component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
"main": "index.js",
|
|
11
11
|
"module": "./esm/index.js",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@alfalab/core-components-button": "^13.1.
|
|
14
|
-
"@alfalab/core-components-code-input": "^5.0.
|
|
15
|
-
"@alfalab/core-components-link": "^7.0.
|
|
16
|
-
"@alfalab/core-components-mq": "^6.0.
|
|
17
|
-
"@alfalab/core-components-spinner": "^6.0.
|
|
18
|
-
"@alfalab/core-components-typography": "^6.0.
|
|
13
|
+
"@alfalab/core-components-button": "^13.1.1",
|
|
14
|
+
"@alfalab/core-components-code-input": "^5.0.3",
|
|
15
|
+
"@alfalab/core-components-link": "^7.0.2",
|
|
16
|
+
"@alfalab/core-components-mq": "^6.0.3",
|
|
17
|
+
"@alfalab/core-components-spinner": "^6.0.3",
|
|
18
|
+
"@alfalab/core-components-typography": "^6.0.3",
|
|
19
19
|
"@alfalab/hooks": "^1.13.1",
|
|
20
20
|
"classnames": "^2.5.1",
|
|
21
21
|
"tslib": "^2.4.0"
|
|
@@ -29,5 +29,5 @@
|
|
|
29
29
|
"directory": "dist"
|
|
30
30
|
},
|
|
31
31
|
"themesVersion": "15.0.2",
|
|
32
|
-
"varsVersion": "11.0.
|
|
32
|
+
"varsVersion": "11.0.2"
|
|
33
33
|
}
|
package/src/vars.css
CHANGED
package/types.d.ts
CHANGED
|
@@ -118,7 +118,7 @@ export interface ConfirmationProps {
|
|
|
118
118
|
*/
|
|
119
119
|
errorVisibleDuration?: number;
|
|
120
120
|
}
|
|
121
|
-
export
|
|
121
|
+
export type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
|
|
122
122
|
timeLeft: number;
|
|
123
123
|
};
|
|
124
124
|
export interface ConfirmationTexts {
|
|
@@ -163,8 +163,8 @@ export interface ConfirmationTexts {
|
|
|
163
163
|
tempBlockOverDescription?: ReactNode;
|
|
164
164
|
tempBlockOverButton?: string;
|
|
165
165
|
}
|
|
166
|
-
export
|
|
167
|
-
export
|
|
166
|
+
export type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
|
|
167
|
+
export type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
|
|
168
168
|
export interface ScreensMap {
|
|
169
169
|
[key: string]: ComponentType;
|
|
170
170
|
}
|
package/utils.d.ts
CHANGED
|
@@ -6,14 +6,14 @@ import { type ConfirmationProps } from './types';
|
|
|
6
6
|
* @returns {String} время в формате mm:ss
|
|
7
7
|
*/
|
|
8
8
|
export declare function formatMsAsMinutes(ms: number): string;
|
|
9
|
-
|
|
9
|
+
type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
|
|
10
10
|
/**
|
|
11
11
|
* Возвращает время, которое осталось до истечения таймера в ms
|
|
12
12
|
*/
|
|
13
13
|
export declare const useCountdown: UseCountdown;
|
|
14
14
|
export declare const ONE_DAY: number;
|
|
15
15
|
export declare const ONE_MINUTE: number;
|
|
16
|
-
|
|
16
|
+
type UseConfirmationParams = {
|
|
17
17
|
state?: ConfirmationProps['state'];
|
|
18
18
|
screen?: ConfirmationProps['screen'];
|
|
19
19
|
blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
|
package/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":["useRef","useState","useCallback","useEffect"],"mappings":";;;;;;AAIA;;;;;AAKG;AACG,SAAU,iBAAiB,CAAC,EAAU,EAAA;IACxC,IAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;IACzC,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IAClD,IAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;AAEhD,IAAA,IAAM,OAAO,GAAG,YAAY,GAAG,EAAE;IACjC,IAAM,aAAa,GAAG,IAAA,CAAA,MAAA,CAAK,OAAO,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n const totalSeconds = Math.ceil(ms / 1000);\n const totalMinutes = Math.floor(totalSeconds / 60);\n const totalHours = Math.floor(totalMinutes / 60);\n\n const seconds = totalSeconds % 60;\n const paddedSeconds = `00${seconds}`.slice(-2);\n\n if (totalHours > 0) {\n const minutes = totalMinutes % 60;\n\n const paddedMinutes = `00${minutes}`.slice(-2);\n const paddedHours = `00${totalHours}`.slice(-2);\n\n return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n }\n\n const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n const timerId = useRef(0);\n\n const start = useRef(0);\n\n const [timePassed, setTimePassed] = useState(0);\n\n const stopTimer = useCallback(() => {\n window.clearInterval(timerId.current);\n }, []);\n\n const updateProgress = useCallback(() => {\n const passed = Date.now() - start.current;\n\n if (passed >= countdownDuration) {\n stopTimer();\n\n setTimePassed(countdownDuration);\n } else {\n setTimePassed(passed);\n }\n }, [countdownDuration, stopTimer]);\n\n const startTimer = useCallback(() => {\n stopTimer();\n\n start.current = Date.now();\n\n updateProgress();\n\n timerId.current = window.setInterval(updateProgress, tick);\n }, [stopTimer, updateProgress, tick]);\n\n const timeLeft = countdownDuration - timePassed;\n\n useEffect(\n () => () => {\n stopTimer();\n },\n [stopTimer],\n );\n\n return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n state?: ConfirmationProps['state'];\n screen?: ConfirmationProps['screen'];\n blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n blockSmsRetry ?? false,\n );\n\n return {\n confirmationState,\n confirmationScreen,\n confirmationBlockSmsRetry,\n setConfirmationState,\n setConfirmationScreen,\n setConfirmationBlockSmsRetry,\n };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":["useRef","useState","useCallback","useEffect"],"mappings":"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"}
|