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.
99 lines
3.3 KiB
99 lines
3.3 KiB
"use strict";
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.Step = void 0;
|
|
const react_1 = __importDefault(require("react"));
|
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
const styled_system_1 = require("styled-system");
|
|
const icon_1 = __importDefault(require("../../atoms/icon"));
|
|
const text_1 = __importDefault(require("../../atoms/text"));
|
|
const box_1 = __importDefault(require("../../atoms/box"));
|
|
const css_class_1 = require("../../utils/css-class");
|
|
const Circle = styled_components_1.default(box_1.default) `
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 9999px;
|
|
text-align: center;
|
|
`;
|
|
Circle.defaultProps = {
|
|
py: 'default',
|
|
px: 'default',
|
|
minWidth: '34px',
|
|
height: '34px',
|
|
};
|
|
const StyledStep = styled_components_1.default.div `
|
|
flex: 1 1 0px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
& > ${box_1.default} {
|
|
${({ disabled }) => (!disabled ? 'cursor: pointer' : '')};
|
|
border-bottom: 2px solid ${({ active, theme }) => (active ? theme.colors.primary100 : 'transparent')};
|
|
}
|
|
|
|
${styled_system_1.space};
|
|
`;
|
|
/**
|
|
* @classdesc
|
|
*
|
|
* <img src="components/step.png" />
|
|
*
|
|
* Step represents one of the tab in placed inside {@link Stepper} component.
|
|
* You can use it alone or with before-mentioned {@link Stepper}.
|
|
*
|
|
* ### Usage
|
|
*
|
|
* ```javascript
|
|
* import { Step, StepProps } from '@adminjs/design-system'
|
|
* ```
|
|
*
|
|
*
|
|
* @hideconstructor
|
|
* @see Stepper
|
|
* @see StepProps
|
|
* @see OnStepClickHandler
|
|
* @subcategory Molecules
|
|
* @component
|
|
* @example <caption>Regular step</caption>
|
|
* return (
|
|
* <Box p="default">
|
|
* <Step number="1">Normal Step</Step>
|
|
* </Box>
|
|
* )
|
|
*
|
|
* @example <caption>Active steps</caption>
|
|
* return (
|
|
* <Box p="default">
|
|
* <Step number="1" active>I am active</Step>
|
|
* </Box>
|
|
* )
|
|
*
|
|
* @example <caption>Active steps</caption>
|
|
* return (
|
|
* <Box p="default">
|
|
* <Step number="1" completed>This was done !!!</Step>
|
|
* </Box>
|
|
* )
|
|
*
|
|
* @example <caption>Clickable step</caption>
|
|
* const onClick = () => alert('Why did you click me?')
|
|
*
|
|
* return (
|
|
* <Box p="default">
|
|
* <Step number="1" onClick={onClick}>Click me if you dare</Step>
|
|
* </Box>
|
|
* )
|
|
* @section design-system
|
|
*/
|
|
const Step = (props) => {
|
|
const { number, completed, children, active, disabled, onClick, className } = props;
|
|
return (react_1.default.createElement(StyledStep, { active: active, disabled: disabled || !onClick, className: css_class_1.cssClass('Step', className) },
|
|
react_1.default.createElement(box_1.default, { flexShrink: 1, flexGrow: 0, flex: true, flexDirection: "row", pt: "lg", pb: "default", onClick: () => !disabled && onClick && onClick(number) },
|
|
react_1.default.createElement(Circle, { bg: completed ? 'grey40' : 'transparent', borderColor: active ? 'primary100' : 'grey40', color: active ? 'primary100' : 'grey40' }, completed ? (react_1.default.createElement(icon_1.default, { icon: "Checkmark", color: "white" })) : number),
|
|
react_1.default.createElement(text_1.default, { my: "sm", pl: "default", py: "sm", color: active || completed ? 'grey100' : 'grey40' }, children))));
|
|
};
|
|
exports.Step = Step;
|
|
exports.default = Step;
|