You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.2 KiB
120 lines
3.2 KiB
3 years ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.Stepper = void 0;
|
||
|
|
const styled_components_1 = __importDefault(require("styled-components"));
|
||
|
|
const box_1 = __importDefault(require("../../atoms/box"));
|
||
|
|
const css_class_1 = require("../../utils/css-class");
|
||
|
|
/**
|
||
|
|
* @classdesc
|
||
|
|
*
|
||
|
|
* <img src="components/stepper.png" />
|
||
|
|
*
|
||
|
|
* It provides wizard workflow where user can go through a couple of steps.
|
||
|
|
* Stepper makes sense when you use it along with {@link Step} component.
|
||
|
|
*
|
||
|
|
* It receives all the same props as {@link Box} - {@link BoxProps}.
|
||
|
|
*
|
||
|
|
* ### Usage
|
||
|
|
*
|
||
|
|
* ```javascript
|
||
|
|
* import { Stepper, StepperProps } from '@adminjs/design-system'
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* @component
|
||
|
|
* @subcategory Molecules
|
||
|
|
* @hideconstructor
|
||
|
|
* @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-stepper--clickable-steps Storybook}
|
||
|
|
* @example <caption>Clickable steps</caption>
|
||
|
|
* const { useState } = React
|
||
|
|
* const steps = [{
|
||
|
|
* number: 1, label: "Do this first",
|
||
|
|
* }, {
|
||
|
|
* number: 2, label: "Don't forget this",
|
||
|
|
* }, {
|
||
|
|
* number: 3, label: "And finally this",
|
||
|
|
* }]
|
||
|
|
* const ComponentWithStepper = () => {
|
||
|
|
* const [currentStep, setCurrentStep] = useState(1)
|
||
|
|
* return (
|
||
|
|
* <Box>
|
||
|
|
* <Stepper>
|
||
|
|
* {steps.map(step => (
|
||
|
|
* <Step
|
||
|
|
* active={currentStep === step.number}
|
||
|
|
* completed={currentStep > step.number}
|
||
|
|
* onClick={setCurrentStep}
|
||
|
|
* number={step.number}
|
||
|
|
* >
|
||
|
|
* {step.label}
|
||
|
|
* </Step>
|
||
|
|
* ))}
|
||
|
|
* </Stepper>
|
||
|
|
* </Box>
|
||
|
|
* )
|
||
|
|
* }
|
||
|
|
*
|
||
|
|
* return (<ComponentWithStepper />)
|
||
|
|
*
|
||
|
|
* @example <caption>Steps with bottom navigation</caption>
|
||
|
|
* const { useState } = React
|
||
|
|
* const steps = [{
|
||
|
|
* number: 1, label: "Do this first",
|
||
|
|
* }, {
|
||
|
|
* number: 2, label: "Don't forget this",
|
||
|
|
* }, {
|
||
|
|
* number: 3, label: "And finally this",
|
||
|
|
* }]
|
||
|
|
* const ComponentWithStepper = () => {
|
||
|
|
* const [currentStep, setCurrentStep] = useState(1)
|
||
|
|
* return (
|
||
|
|
* <Box>
|
||
|
|
* <Stepper>
|
||
|
|
* {steps.map(step => (
|
||
|
|
* <Step
|
||
|
|
* active={currentStep === step.number}
|
||
|
|
* completed={currentStep > step.number}
|
||
|
|
* number={step.number}
|
||
|
|
* >
|
||
|
|
* {step.label}
|
||
|
|
* </Step>
|
||
|
|
* ))}
|
||
|
|
* </Stepper>
|
||
|
|
* <Box mt="xl">
|
||
|
|
* <Button
|
||
|
|
* disabled={currentStep === 1}
|
||
|
|
* mr="default"
|
||
|
|
* onClick={() => setCurrentStep(currentStep - 1)}
|
||
|
|
* >
|
||
|
|
* Previous Step
|
||
|
|
* </Button>
|
||
|
|
* <Button
|
||
|
|
* disabled={currentStep === 3}
|
||
|
|
* variant="primary"
|
||
|
|
* onClick={() => setCurrentStep(currentStep + 1)}
|
||
|
|
* >
|
||
|
|
* Next Step
|
||
|
|
* </Button>
|
||
|
|
* </Box>
|
||
|
|
* </Box>
|
||
|
|
* )
|
||
|
|
* }
|
||
|
|
*
|
||
|
|
* return (<ComponentWithStepper />)
|
||
|
|
*
|
||
|
|
* @section design-system
|
||
|
|
*/
|
||
|
|
const Stepper = styled_components_1.default(box_1.default) `
|
||
|
|
`;
|
||
|
|
exports.Stepper = Stepper;
|
||
|
|
Stepper.defaultProps = {
|
||
|
|
flex: true,
|
||
|
|
flexDirection: ['column', 'row'],
|
||
|
|
borderBottom: '1px solid',
|
||
|
|
borderBottomColor: 'separator',
|
||
|
|
className: css_class_1.cssClass('Stepper'),
|
||
|
|
};
|
||
|
|
exports.default = Stepper;
|