@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines • 9.23 kB

Source Map (JSON)

{"version":3,"file":"StepperStep.cjs","names":["factory","useProps","useStepperContext","useMantineTheme","UnstyledButton","getThemeColor","Transition","Loader","CheckIcon","classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n Fragment: StepFragmentComponent | React.ReactNode,\n step: number | undefined\n) => {\n if (typeof Fragment === 'function') {\n return <Fragment step={step || 0} />;\n }\n\n return Fragment;\n};\n\nexport type StepperStepStylesNames =\n | 'step'\n | 'stepLoader'\n | 'verticalSeparator'\n | 'stepWrapper'\n | 'stepIcon'\n | 'stepCompletedIcon'\n | 'stepIconContent'\n | 'stepBody'\n | 'stepLabel'\n | 'stepDescription';\n\nexport interface StepperStepProps\n extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n /** 0-based step index, automatically set by Stepper component */\n step?: number;\n\n /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n /** Key of `theme.colors`, by default controlled by Stepper component */\n color?: MantineColor;\n\n /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\n withIcon?: boolean;\n\n /** Step icon, defaults to `step index + 1` when rendered within Stepper */\n icon?: React.ReactNode | StepFragmentComponent;\n\n /** Step icon displayed when step is completed */\n completedIcon?: React.ReactNode | StepFragmentComponent;\n\n /** Step icon displayed when step is in progress */\n progressIcon?: React.ReactNode | StepFragmentComponent;\n\n /** Step label, render after icon */\n label?: React.ReactNode | StepFragmentComponent;\n\n /** Step description */\n description?: React.ReactNode | StepFragmentComponent;\n\n /** Icon wrapper size */\n iconSize?: string | number;\n\n /** Icon position relative to step body, controlled by Stepper component */\n iconPosition?: 'right' | 'left';\n\n /** Indicates loading state of the step */\n loading?: boolean;\n\n /** Set to false to disable clicks on step */\n allowStepClick?: boolean;\n\n /** Should step selection be allowed */\n allowStepSelect?: boolean;\n\n /** Static selector base */\n __staticSelector?: string;\n\n /** Component orientation */\n orientation?: 'vertical' | 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n props: StepperStepProps;\n ref: HTMLButtonElement;\n stylesNames: StepperStepStylesNames;\n compound: true;\n}>;\n\nconst defaultProps = {\n withIcon: true,\n allowStepClick: true,\n iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n step,\n state,\n color,\n icon,\n completedIcon,\n progressIcon,\n label,\n description,\n withIcon,\n iconSize,\n loading,\n allowStepClick,\n allowStepSelect,\n iconPosition,\n orientation,\n mod,\n ...others\n } = useProps('StepperStep', defaultProps, props);\n\n const ctx = useStepperContext();\n const theme = useMantineTheme();\n const stylesApi = { classNames, styles };\n\n const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n const dataAttributes = {\n 'data-progress': state === 'stepProgress' || undefined,\n 'data-completed': state === 'stepCompleted' || undefined,\n };\n\n return (\n <UnstyledButton\n {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n mod={[\n { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n mod,\n ]}\n {...dataAttributes}\n {...others}\n __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n tabIndex={allowStepClick ? 0 : -1}\n >\n {withIcon && (\n \n \n <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n {(transitionStyles) => (\n <span\n {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n >\n {loading ? (\n <Loader\n color=\"var(--mantine-color-white)\"\n size=\"calc(var(--stepper-icon-size) / 2)\"\n {...ctx.getStyles('stepLoader', stylesApi)}\n />\n ) : (\n getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n )}\n \n )}\n </Transition>\n\n {state !== 'stepCompleted' ? (\n \n {loading ? (\n <Loader\n {...ctx.getStyles('stepLoader', stylesApi)}\n size=\"calc(var(--stepper-icon-size) / 2)\"\n color={color}\n />\n ) : (\n getStepFragment(_icon || icon, step)\n )}\n \n ) : null}\n \n {orientation === 'vertical' && (\n <span\n {...ctx.getStyles('verticalSeparator', stylesApi)}\n data-active={state === 'stepCompleted' || undefined}\n />\n )}\n \n )}\n\n {(label || description) && (\n <span\n {...ctx.getStyles('stepBody', stylesApi)}\n data-orientation={ctx.orientation}\n data-icon-position={iconPosition || ctx.iconPosition}\n >\n {label && (\n {getStepFragment(label, step)}\n )}\n {description && (\n \n {getStepFragment(description, step)}\n \n )}\n \n )}\n </UnstyledButton>\n );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":"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"}