@amaui/ui-react
Version:
UI for React
147 lines • 6.58 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["gap", "tonal", "color", "version", "iconColor", "iconColorActive", "dividerColor", "dividerColorActive", "active", "completed", "stepDirection", "orientation", "dividerActive", "individualDividers", "free", "DividerProps", "Component", "className", "style", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import DividerElement from '../Divider';
import LineElement from '../Line';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
root: {},
orientation_horizontal: {
width: '100%',
overflow: 'auto hidden',
'& > *': {
flex: '0 0 auto'
}
},
inactive: {
pointerEvents: 'none',
cursor: 'default'
},
divider: {
margin: '0',
'&.amaui-Divider-root': {
transition: theme.methods.transitions.make(['background', 'width', 'height'])
}
},
divider_active: {
'&.amaui-Divider-root': {
opacity: '1'
}
},
divider_orientation_horizontal: {
'&.amaui-Divider-root': {
minWidth: '14px'
}
},
divider_orientation_vertical: {
alignSelf: 'flex-start',
transform: 'translateX(-50%)',
'&.amaui-Divider-root': {
minHeight: 14,
marginInlineStart: '20px'
}
},
divider_orientation_vertical_stepDirection_column: {
alignSelf: 'center',
'&.amaui-Divider-root': {
margin: '0px'
}
},
divider_active_orientation_horizontal: {
'&.amaui-Divider-root': {
height: '2px'
}
},
divider_active_orientation_vertical: {
'&.amaui-Divider-root': {
width: '2px'
}
}
}), {
name: 'amaui-Stepper'
});
const Stepper = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiStepper?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
const {
gap = 2,
tonal = true,
color = 'default',
version = 'text',
iconColor = 'inverted',
iconColorActive = 'primary',
dividerColor = 'inverted',
dividerColorActive = 'primary',
active = 0,
completed,
stepDirection = 'row',
orientation = 'horizontal',
dividerActive = true,
individualDividers = props.stepDirection === 'column' && orientation !== 'vertical',
free,
DividerProps,
Component = 'div',
className,
style,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const steps = React.Children.toArray(children);
return /*#__PURE__*/React.createElement(Line, _extends({
ref: ref,
gap: gap,
direction: orientation === 'horizontal' ? 'row' : 'column',
justify: "flex-start",
align: orientation === 'vertical' ? 'flex-start' : 'center',
Component: Component,
className: classNames([staticClassName('Stepper', theme) && ['amaui-Stepper-root'], className, classes.root, classes[`orientation_${orientation}`]]),
style: style
}, other), steps.map((item, index) => {
const active_ = active === index;
const other_ = {};
if (!active_ && !free) other_.disabled = true;
return /*#__PURE__*/React.cloneElement(item, {
step: index + 1,
tonal,
color,
version,
activeStep: active,
active: active_,
iconColor: item.props.iconColor !== undefined ? item.props.iconColor : iconColor,
iconColorActive: item.props.iconColorActive !== undefined ? item.props.iconColorActive : iconColorActive,
dividerColor: item.props.dividerColor !== undefined ? item.props.dividerColor : dividerColor,
dividerColorActive: item.props.dividerColorActive !== undefined ? item.props.dividerColorActive : dividerColorActive,
orientation: item.props.orientation !== undefined ? item.props.orientation : orientation,
stepDirection: item.props.stepDirection !== undefined ? item.props.stepDirection : stepDirection,
completed: item.props.completed !== undefined ? item.props.completed : completed?.[index],
divider: item.props.divider !== undefined ? item.props.divider : individualDividers,
className: classNames([!active_ && !free && classes.inactive]),
style: _objectSpread({}, item.props.style)
});
}).flatMap((item, index) => {
const active_ = active >= index + 1;
const values = [item];
if (!individualDividers && index !== children.length - 1) values.push( /*#__PURE__*/React.createElement(Divider, _extends({
orientation: orientation,
color: active_ ? dividerColorActive : dividerColor,
flex: true
}, DividerProps, {
className: classNames([staticClassName('Stepper', theme) && ['amaui-Stepper-divider', active_ && dividerActive && `amaui-Stepper-divider-active`], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`], classes[`divider_orientation_${orientation}_stepDirection_${stepDirection}`], active_ && dividerActive && [classes.divider_active, classes[`divider_active_orientation_${orientation}`]]])
})));
return values;
}).map((item, index) => /*#__PURE__*/React.cloneElement(item, {
key: index
})));
});
Stepper.displayName = 'amaui-Stepper';
export default Stepper;