@alfalab/core-components-steps 3.0.2-alfasans → 3.0.3-alfasans
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.d.ts +1 -1
- package/Component.js.map +1 -1
- package/components/step/Component.d.ts +1 -1
- package/components/step/Component.js.map +1 -1
- package/components/step/index.css +31 -31
- package/components/step/index.module.css.js +1 -1
- package/components/step/index.module.css.js.map +1 -1
- package/components/step-indicator/Component.d.ts +1 -1
- package/components/step-indicator/index.css +1 -1
- package/components/step-indicator/index.module.css.js +1 -1
- package/components/step-indicator/index.module.css.js.map +1 -1
- package/cssm/Component.d.ts +1 -1
- package/cssm/Component.js.map +1 -1
- package/cssm/components/step/Component.d.ts +1 -1
- package/cssm/components/step/Component.js.map +1 -1
- package/cssm/components/step-indicator/Component.d.ts +1 -1
- package/cssm/types/common-props.d.ts +1 -1
- package/esm/Component.d.ts +1 -1
- package/esm/Component.js.map +1 -1
- package/esm/components/step/Component.d.ts +1 -1
- package/esm/components/step/Component.js.map +1 -1
- package/esm/components/step/index.css +31 -31
- package/esm/components/step/index.module.css.js +1 -1
- package/esm/components/step/index.module.css.js.map +1 -1
- package/esm/components/step-indicator/Component.d.ts +1 -1
- package/esm/components/step-indicator/index.css +1 -1
- package/esm/components/step-indicator/index.module.css.js +1 -1
- package/esm/components/step-indicator/index.module.css.js.map +1 -1
- package/esm/index.css +2 -2
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/esm/types/common-props.d.ts +1 -1
- package/index.css +2 -2
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/Component.d.ts +1 -1
- package/modern/Component.js.map +1 -1
- package/modern/components/step/Component.d.ts +1 -1
- package/modern/components/step/Component.js.map +1 -1
- package/modern/components/step/index.css +31 -31
- package/modern/components/step/index.module.css.js +1 -1
- package/modern/components/step/index.module.css.js.map +1 -1
- package/modern/components/step-indicator/Component.d.ts +1 -1
- package/modern/components/step-indicator/index.css +1 -1
- package/modern/components/step-indicator/index.module.css.js +1 -1
- package/modern/components/step-indicator/index.module.css.js.map +1 -1
- package/modern/index.css +2 -2
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/modern/types/common-props.d.ts +1 -1
- package/moderncssm/Component.d.ts +1 -1
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/components/step/Component.d.ts +1 -1
- package/moderncssm/components/step/Component.js.map +1 -1
- package/moderncssm/components/step-indicator/Component.d.ts +1 -1
- package/moderncssm/types/common-props.d.ts +1 -1
- package/package.json +5 -5
- package/src/components/step/index.module.css +1 -1
- package/src/components/step-indicator/index.module.css +1 -1
- package/src/index.module.css +1 -1
- package/types/common-props.d.ts +1 -1
package/Component.d.ts
CHANGED
package/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":";;;;;;;;;;;;;;AAyFO,IAAM,KAAK,GAAyB,UAAC,EAqB3C,EAAA;;AApBG,IAAA,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,iBAAqB,EAArB,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACT,cAAc,GAAA,EAAA,CAAA,UAAA,EAC1B,EAA2B,GAAA,EAAA,CAAA,oBAAA,EAA3B,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAC3B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,EAAc,GAAA,EAAA,CAAA,OAAA,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,GAAA,EAAA,EAClB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,4BAAyB,EAAzB,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACzB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,wBAAwB,GAAA,EAAA,CAAA,wBAAA,EACxB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,kBAAkB,GAAA,EAAA,CAAA,kBAAA;AAElB,IAAA,IAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IAC3C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA+B;IAE/D,IAAM,WAAW,GAAGC,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;IAElD,IAAM,eAAe,GAAG,UAAC,UAAkB,EAAA;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|
|
@@ -34,40 +34,40 @@
|
|
|
34
34
|
--steps-option-svg-color: var(--color-light-status-positive);
|
|
35
35
|
--steps-dash-border: 2px solid var(--color-light-status-positive);
|
|
36
36
|
}
|
|
37
|
-
.
|
|
37
|
+
.steps__step_1cth5 {
|
|
38
38
|
display: flex;
|
|
39
39
|
outline: none;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.steps__step_1cth5.steps__horizontal_1cth5 {
|
|
42
42
|
flex-grow: 1;
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
.steps__step_1cth5:not(.steps__vertical_1cth5) {
|
|
45
45
|
align-items: center;
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.steps__step_1cth5:last-of-type .steps__textWrapper_1cth5.steps__vertical_1cth5 {
|
|
48
48
|
margin-bottom: var(--gap-0);
|
|
49
49
|
}
|
|
50
|
-
.
|
|
50
|
+
.steps__step_1cth5.steps__interactive_1cth5:not(.steps__disabled_1cth5):hover {
|
|
51
51
|
cursor: pointer;
|
|
52
52
|
}
|
|
53
|
-
.
|
|
53
|
+
.steps__step_1cth5.steps__disabled_1cth5:hover .steps__text_1cth5 {
|
|
54
54
|
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
|
|
55
55
|
background: initial;
|
|
56
56
|
}
|
|
57
|
-
.
|
|
57
|
+
.steps__step_1cth5.steps__disabled_1cth5 .steps__indicator_1cth5 {
|
|
58
58
|
cursor: inherit;
|
|
59
59
|
}
|
|
60
|
-
.
|
|
60
|
+
.steps__indicator_1cth5 {
|
|
61
61
|
cursor: pointer;
|
|
62
62
|
display: flex;
|
|
63
63
|
align-items: center;
|
|
64
64
|
margin-right: var(--gap-4);
|
|
65
65
|
}
|
|
66
|
-
.
|
|
66
|
+
.steps__indicator_1cth5.steps__vertical_1cth5 {
|
|
67
67
|
flex-direction: column;
|
|
68
68
|
margin-right: var(--gap-8);
|
|
69
69
|
}
|
|
70
|
-
.
|
|
70
|
+
.steps__option_1cth5 {
|
|
71
71
|
font-size: 14px;
|
|
72
72
|
line-height: 20px;
|
|
73
73
|
font-weight: 700;
|
|
@@ -83,19 +83,19 @@
|
|
|
83
83
|
height: 24px;
|
|
84
84
|
border-radius: var(--border-radius-circle);
|
|
85
85
|
}
|
|
86
|
-
.
|
|
86
|
+
.steps__option_1cth5.steps__vertical_1cth5 {
|
|
87
87
|
margin-top: var(--gap-8);
|
|
88
88
|
}
|
|
89
|
-
.
|
|
89
|
+
.steps__dash_1cth5 {
|
|
90
90
|
flex: 1 1 auto;
|
|
91
91
|
min-width: 24px;
|
|
92
92
|
border-top: 2px solid var(--color-light-neutral-translucent-300);
|
|
93
93
|
margin-right: var(--gap-8);
|
|
94
94
|
}
|
|
95
|
-
.
|
|
95
|
+
.steps__dash_1cth5.steps__completed_1cth5 {
|
|
96
96
|
border-top: var(--steps-dash-border);
|
|
97
97
|
}
|
|
98
|
-
.
|
|
98
|
+
.steps__dash_1cth5.steps__vertical_1cth5 {
|
|
99
99
|
min-width: 0;
|
|
100
100
|
min-width: initial;
|
|
101
101
|
min-height: 8px;
|
|
@@ -104,19 +104,19 @@
|
|
|
104
104
|
border-left: 2px solid var(--color-light-neutral-translucent-300);
|
|
105
105
|
border-top: none;
|
|
106
106
|
}
|
|
107
|
-
.
|
|
107
|
+
.steps__dash_1cth5.steps__completed_1cth5.steps__vertical_1cth5 {
|
|
108
108
|
border-left: var(--steps-dash-border);
|
|
109
109
|
}
|
|
110
|
-
.
|
|
110
|
+
.steps__textWrapper_1cth5.steps__vertical_1cth5 {
|
|
111
111
|
min-height: 48px;
|
|
112
112
|
}
|
|
113
|
-
.
|
|
113
|
+
.steps__textWrapper_1cth5.steps__vertical_1cth5.steps__gap-24_1cth5 {
|
|
114
114
|
margin-bottom: var(--gap-8);
|
|
115
115
|
}
|
|
116
|
-
.
|
|
116
|
+
.steps__textWrapper_1cth5.steps__vertical_1cth5.steps__gap-32_1cth5 {
|
|
117
117
|
margin-bottom: var(--gap-16);
|
|
118
118
|
}
|
|
119
|
-
.
|
|
119
|
+
.steps__text_1cth5 {
|
|
120
120
|
font-size: 16px;
|
|
121
121
|
line-height: 24px;
|
|
122
122
|
font-weight: 400;
|
|
@@ -130,24 +130,24 @@
|
|
|
130
130
|
height: -moz-min-content;
|
|
131
131
|
height: min-content;
|
|
132
132
|
}
|
|
133
|
-
.
|
|
133
|
+
.steps__text_1cth5.steps__interactive_1cth5:not(.steps__disabled_1cth5):hover {
|
|
134
134
|
background: var(--color-light-transparent-default-hover);
|
|
135
135
|
}
|
|
136
|
-
.
|
|
136
|
+
.steps__text_1cth5.steps__interactive_1cth5:not(.steps__disabled_1cth5):active {
|
|
137
137
|
background: var(--color-light-transparent-default-press);
|
|
138
138
|
}
|
|
139
|
-
.
|
|
139
|
+
.steps__focused_1cth5 {
|
|
140
140
|
outline: var(--gap-2) solid var(--focus-color);
|
|
141
141
|
outline-offset: var(--gap-2);
|
|
142
142
|
}
|
|
143
|
-
.
|
|
143
|
+
.steps__selected_1cth5 .steps__text_1cth5 {
|
|
144
144
|
color: var(--color-light-text-primary);
|
|
145
145
|
}
|
|
146
|
-
.
|
|
146
|
+
.steps__selected_1cth5 .steps__option_1cth5 {
|
|
147
147
|
color: var(--color-light-text-primary-inverted);
|
|
148
148
|
background: var(--color-light-neutral-translucent-1300);
|
|
149
149
|
}
|
|
150
|
-
.
|
|
150
|
+
.steps__checkbox_1cth5 {
|
|
151
151
|
display: flex;
|
|
152
152
|
justify-content: center;
|
|
153
153
|
align-items: center;
|
|
@@ -156,26 +156,26 @@
|
|
|
156
156
|
height: 20px;
|
|
157
157
|
border: 2px solid var(--color-light-neutral-translucent-300);
|
|
158
158
|
}
|
|
159
|
-
.
|
|
159
|
+
.steps__dot_1cth5 {
|
|
160
160
|
width: 10px;
|
|
161
161
|
height: 10px;
|
|
162
162
|
border-radius: var(--border-radius-circle);
|
|
163
163
|
background: var(--color-light-neutral-translucent-300);
|
|
164
164
|
}
|
|
165
|
-
.
|
|
165
|
+
.steps__selected_1cth5 .steps__checkbox_1cth5 {
|
|
166
166
|
border: 2px solid var(--color-light-neutral-translucent-1300);
|
|
167
167
|
}
|
|
168
|
-
.
|
|
168
|
+
.steps__selected_1cth5 .steps__checkbox_1cth5 .steps__dot_1cth5 {
|
|
169
169
|
background: var(--color-light-neutral-translucent-1300);
|
|
170
170
|
}
|
|
171
|
-
.
|
|
171
|
+
.steps__option_1cth5:not(.steps__error_1cth5).steps__unordered_1cth5 {
|
|
172
172
|
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
|
|
173
173
|
background: initial;
|
|
174
174
|
}
|
|
175
|
-
.
|
|
175
|
+
.steps__completedIndicator_1cth5 > [class*='positive'] {
|
|
176
176
|
color: var(--steps-option-svg-color);
|
|
177
177
|
background-color: var(--steps-option-svg-color);
|
|
178
178
|
}
|
|
179
|
-
.
|
|
179
|
+
.steps__fullWidth_1cth5 {
|
|
180
180
|
width: 100%;
|
|
181
181
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"step":"
|
|
5
|
+
var styles = {"step":"steps__step_1cth5","horizontal":"steps__horizontal_1cth5","vertical":"steps__vertical_1cth5","textWrapper":"steps__textWrapper_1cth5","interactive":"steps__interactive_1cth5","disabled":"steps__disabled_1cth5","text":"steps__text_1cth5","indicator":"steps__indicator_1cth5","option":"steps__option_1cth5","dash":"steps__dash_1cth5","completed":"steps__completed_1cth5","gap-24":"steps__gap-24_1cth5","gap-32":"steps__gap-32_1cth5","focused":"steps__focused_1cth5","selected":"steps__selected_1cth5","checkbox":"steps__checkbox_1cth5","dot":"steps__dot_1cth5","error":"steps__error_1cth5","unordered":"steps__unordered_1cth5","completedIndicator":"steps__completedIndicator_1cth5","fullWidth":"steps__fullWidth_1cth5"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --steps-option-svg-color: var(--color-light-status-positive);\n --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n display: flex;\n outline: none;\n\n &.horizontal {\n flex-grow: 1;\n }\n\n &:not(.vertical) {\n align-items: center;\n }\n\n &:last-of-type .textWrapper.vertical {\n margin-bottom: var(--gap-0);\n }\n}\n\n.step.interactive:not(.disabled):hover {\n cursor: pointer;\n}\n\n.step.disabled:hover {\n & .text {\n background: unset;\n }\n}\n\n.step.disabled {\n & .indicator {\n cursor: unset;\n }\n}\n\n.indicator {\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: var(--gap-4);\n\n &.vertical {\n flex-direction: column;\n margin-right: var(--gap-8);\n }\n}\n\n.option {\n @mixin accent_primary_small;\n\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-light-text-primary);\n background: var(--color-light-neutral-translucent-300);\n min-width: 24px;\n height: 24px;\n border-radius: var(--border-radius-circle);\n\n &.vertical {\n margin-top: var(--gap-8);\n }\n}\n\n.dash {\n flex: 1 1 auto;\n min-width: 24px;\n border-top: 2px solid var(--color-light-neutral-translucent-300);\n margin-right: var(--gap-8);\n\n &.completed {\n border-top: var(--steps-dash-border);\n }\n\n &.vertical {\n min-width: unset;\n min-height: 8px;\n margin-right: var(--gap-0);\n margin-top: var(--gap-8);\n border-left: 2px solid var(--color-light-neutral-translucent-300);\n border-top: none;\n }\n\n &.completed.vertical {\n border-left: var(--steps-dash-border);\n }\n}\n\n.textWrapper {\n &.vertical {\n min-height: 48px;\n\n &.gap-24 {\n margin-bottom: var(--gap-8);\n }\n\n &.gap-32 {\n margin-bottom: var(--gap-16);\n }\n }\n}\n\n.text {\n @mixin paragraph_primary_medium;\n\n transition: background 0.2s;\n padding: var(--gap-8);\n color: var(--color-light-text-primary);\n border-radius: var(--gap-8);\n height: min-content;\n\n &.interactive:not(.disabled) {\n &:hover {\n background: var(--color-light-transparent-default-hover);\n }\n\n &:active {\n background: var(--color-light-transparent-default-press);\n }\n }\n}\n\n.focused {\n outline: var(--gap-2) solid var(--focus-color);\n outline-offset: var(--gap-2);\n}\n\n.selected {\n & .text {\n color: var(--color-light-text-primary);\n }\n\n & .option {\n color: var(--color-light-text-primary-inverted);\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.checkbox {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-circle);\n width: 20px;\n height: 20px;\n border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n width: 10px;\n height: 10px;\n border-radius: var(--border-radius-circle);\n background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n border: 2px solid var(--color-light-neutral-translucent-1300);\n\n & .dot {\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.option:not(.error).unordered {\n background: unset;\n}\n\n.completedIndicator > [class*='positive'] {\n color: var(--steps-option-svg-color);\n background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n width: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type BadgeProps } from '@alfalab/core-components-badge';
|
|
3
|
-
export
|
|
3
|
+
export type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
|
|
4
4
|
export declare const StepIndicator: React.FC<StepIndicatorProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step-indicator/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step-indicator/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component.component {\n padding: var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
|
package/cssm/Component.d.ts
CHANGED
package/cssm/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":";;;;;;;;;;;;;;;AAyFO,IAAM,KAAK,GAAyB,UAAC,EAqB3C,EAAA;;AApBG,IAAA,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,iBAAqB,EAArB,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACT,cAAc,GAAA,EAAA,CAAA,UAAA,EAC1B,EAA2B,GAAA,EAAA,CAAA,oBAAA,EAA3B,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAC3B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,EAAc,GAAA,EAAA,CAAA,OAAA,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,GAAA,EAAA,EAClB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,4BAAyB,EAAzB,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACzB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,wBAAwB,GAAA,EAAA,CAAA,wBAAA,EACxB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,kBAAkB,GAAA,EAAA,CAAA,kBAAA;AAElB,IAAA,IAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IAC3C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA+B;IAE/D,IAAM,WAAW,GAAGC,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;IAElD,IAAM,eAAe,GAAG,UAAC,UAAkB,EAAA;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type BadgeProps } from '@alfalab/core-components-badge/cssm';
|
|
3
|
-
export
|
|
3
|
+
export type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
|
|
4
4
|
export declare const StepIndicator: React.FC<StepIndicatorProps>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
/** Обобщенный набор типов который подходит для Steps, но также прокинут в дочерний Step */
|
|
3
|
-
export
|
|
3
|
+
export type CommonProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Идентификатор для систем автоматизированного тестирования
|
|
6
6
|
*/
|
package/esm/Component.d.ts
CHANGED
package/esm/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAyFO,IAAM,KAAK,GAAyB,UAAC,EAqB3C,EAAA;;AApBG,IAAA,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,iBAAqB,EAArB,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACT,cAAc,GAAA,EAAA,CAAA,UAAA,EAC1B,EAA2B,GAAA,EAAA,CAAA,oBAAA,EAA3B,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAC3B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,EAAc,GAAA,EAAA,CAAA,OAAA,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,GAAA,EAAA,EAClB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,4BAAyB,EAAzB,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACzB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,wBAAwB,GAAA,EAAA,CAAA,wBAAA,EACxB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,kBAAkB,GAAA,EAAA,CAAA,kBAAA;AAElB,IAAA,IAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IAC3C,IAAA,EAAA,GAA8B,QAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA+B;IAE/D,IAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;IAElD,IAAM,eAAe,GAAG,UAAC,UAAkB,EAAA;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|