@onesy/ui-react
Version:
UI for React
176 lines (175 loc) • 8.99 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Interaction = _interopRequireDefault(require("../Interaction"));
var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _ListItem = _interopRequireDefault(require("../ListItem"));
var _Line = _interopRequireDefault(require("../Line"));
var _Buttons = require("../Buttons/Buttons");
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["tonal", "color", "version", "iconColor", "iconColorActive", "dividerColor", "dividerColorActive", "step", "activeStep", "active", "completed", "primary", "secondary", "stepDirection", "orientation", "button", "divider", "renderIcon", "ListItemProps", "DividerProps", "Component", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative',
flex: '0 0 auto',
transition: theme.methods.transitions.make('opacity')
},
icon: {
pointerEvents: 'none'
},
inactive: {
userSelect: 'none',
opacity: theme.palette.visual_contrast.default.opacity.disabled
},
direction_row: {},
direction_column: {
flex: '1 1 auto',
'& .onesy-ListItem-text': {
textAlign: 'center'
}
},
button: {
userSelect: 'none',
cursor: 'pointer'
},
divider: {
position: 'absolute',
'&.onesy-Divider-root': {
margin: '0',
transition: theme.methods.transitions.make(['background', 'height'])
}
},
divider_orientation_horizontal: {
top: '20px',
right: '0',
transform: 'translate(calc(-50% - 70px), -50%)',
'&.onesy-Divider-root': {
width: 'calc(100% - 62px)'
}
},
divider_orientation_vertical: {
left: '50%',
top: '0',
transform: 'translate(-50%, calc(-50% - 16px))',
'&.onesy-Divider-root': {
height: '50%'
}
},
divider_active_orientation_horizontal: {
'&.onesy-Divider-root': {
height: '4px'
}
},
divider_active_orientation_vertical: {
'&.onesy-Divider-root': {
width: '4px'
}
}
}), {
name: 'onesy-Step'
});
const Step = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyStep) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Interaction = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Interaction) || _Interaction.default;
const PaginationItem = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.PaginationItem) || _PaginationItem.default;
const Divider = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Divider) || _Divider.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Surface) || _Surface.default;
const ListItem = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.ListItem) || _ListItem.default;
const {
tonal: t0,
color: t1,
version: t2,
iconColor: t3,
iconColorActive: t4,
dividerColor: t5,
dividerColorActive: t6,
step: t7,
activeStep,
active,
completed,
primary,
secondary,
stepDirection: t8,
orientation: t9,
button,
divider,
renderIcon: renderIcon_,
ListItemProps,
DividerProps,
Component: t10,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const tonal = t0 === undefined ? true : t0;
const color = t1 === undefined ? "default" : t1;
const version = t2 === undefined ? "text" : t2;
const iconColor = t3 === undefined ? "inverted" : t3;
const iconColorActive = t4 === undefined ? "primary" : t4;
const dividerColor = t5 === undefined ? "inverted" : t5;
const dividerColorActive = t6 === undefined ? "primary" : t6;
const step = t7 === undefined ? 0 : t7;
const stepDirection = t8 === undefined ? "row" : t8;
const orientation = t9 === undefined ? "horizontal" : t9;
const Component = t10 === undefined ? Surface : t10;
const {
classes
} = useStyle();
const activeDivider = activeStep >= step - 1;
const renderIcon = (0, _utils.is)("function", renderIcon_) ? renderIcon_ : () => /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
tonal: tonal,
color: !(active || completed) ? iconColor : iconColorActive,
version: "filled",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-icon"], classes.icon]),
children: !completed ? step : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
in: true,
add: true
})
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
version: version,
tonal: tonal,
color: color,
gap: 0,
direction: stepDirection,
align: "center",
justify: "center",
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-root", active && "onesy-Step-active", completed && "onesy-Step-completed", !active && !completed && "onesy-Step-inactive"], className, classes.root, classes[`direction_${stepDirection}`], !active && !completed && classes.inactive, button && classes.button])
}, other), {}, {
children: [button && /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {
border: false
}), renderIcon(step, active, completed, activeStep), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
Component: "div",
version: version,
tonal: tonal,
color: color,
primary: primary,
secondary: secondary
}, ListItemProps)), step > 1 && divider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({
orientation: orientation,
color: activeDivider ? dividerColorActive : dividerColor,
flex: true
}, DividerProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Step", theme) && ["onesy-Step-divider", activeDivider && "onesy-Step-divider-active"], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], activeDivider && classes[`divider_active_orientation_${orientation}`]])
}))]
}));
};
Step.displayName = 'onesy-Step';
var _default = exports.default = Step;