wix-style-react
Version:
wix-style-react
280 lines (279 loc) • 8.68 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Text = _interopRequireDefault(require("../Text"));
var _HorizontalTimelineSt = require("./HorizontalTimeline.st.css");
var _HorizontalTimelineIconsSt = require("./HorizontalTimelineIcons.st.css");
var _constants = require("./constants");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/HorizontalTimeline/HorizontalTimeline.js",
_HorizontalTimeline;
class HorizontalTimeline extends _react.default.PureComponent {
constructor() {
super(...arguments);
this._renderLine = _ref => {
var {
skin,
line
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HorizontalTimelineSt.st)(_HorizontalTimelineSt.classes.line, {
skin,
line
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 5
}
});
};
this._renderLabel = _ref2 => {
var {
label,
index,
labelEllipsis
} = _ref2;
var {
alignLabel
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HorizontalTimelineSt.st)(_HorizontalTimelineSt.classes.label, {
alignLabel
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
size: "tiny",
ellipsis: labelEllipsis,
dataHook: "".concat(_constants.dataHooks.horizontalTimelineLabel, "-").concat(index),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 9
}
}, label));
};
}
render() {
var {
items,
dataHook,
className,
skin
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HorizontalTimelineSt.st)(_HorizontalTimelineSt.classes.root, {
skin
}, className),
"data-hook": dataHook,
"data-skin": skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 7
}
}, items.map((_ref3, index) => {
var {
label,
width = 'auto',
skin: deprecatedSkin,
icon = /*#__PURE__*/_react.default.createElement(HorizontalTimeline.DefaultIcon, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 22
}
}),
line = 'dashed',
labelEllipsis = true
} = _ref3;
var nextItemSkin = items[index + 1] && items[index + 1].skin || 'light';
var nextItemLine = items[index + 1] && items[index + 1].line || 'dashed';
return /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalTimelineSt.classes.column,
key: index,
style: {
width
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HorizontalTimelineSt.st)(_HorizontalTimelineSt.classes.item),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalTimelineSt.classes.lineIconLine,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 19
}
}, this._renderLine({
skin: deprecatedSkin,
line
}), /*#__PURE__*/_react.default.createElement("div", {
className: _HorizontalTimelineSt.classes.icon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 21
}
}, icon), this._renderLine({
skin: nextItemSkin,
line: nextItemLine
})), this._renderLabel({
label,
index,
labelEllipsis
})));
}));
}
}
_HorizontalTimeline = HorizontalTimeline;
HorizontalTimeline.displayName = 'HorizontalTimeline';
HorizontalTimeline.DefaultIcon = _ref4 => {
var {
skin = 'dark'
} = _ref4;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HorizontalTimelineIconsSt.st)(_HorizontalTimelineIconsSt.classes.upcomingIcon, {
skin
}),
__self: _HorizontalTimeline,
__source: {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 5
}
});
};
HorizontalTimeline.ActiveIcon = _ref5 => {
var {
skin = 'dark'
} = _ref5;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HorizontalTimelineIconsSt.st)(_HorizontalTimelineIconsSt.classes.activeIcon, {
skin
}),
__self: _HorizontalTimeline,
__source: {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 5
}
});
};
HorizontalTimeline.BoundaryIcon = _ref6 => {
var {
skin = 'dark'
} = _ref6;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HorizontalTimelineIconsSt.st)(_HorizontalTimelineIconsSt.classes.boundaryIcon, {
skin
}),
__self: _HorizontalTimeline,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 5
}
});
};
HorizontalTimeline.DestructiveIcon = () => /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertFilled, {
className: _HorizontalTimelineIconsSt.classes.errorIcon,
__self: _HorizontalTimeline,
__source: {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 5
}
});
HorizontalTimeline.CompleteIcon = _ref7 => {
var {
skin = 'dark'
} = _ref7;
var className = (0, _HorizontalTimelineIconsSt.st)(_HorizontalTimelineIconsSt.classes.completeIcon, {
skin
});
var standardSkin = /*#__PURE__*/_react.default.createElement("div", {
className: className,
__self: _HorizontalTimeline,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 26
}
});
var darkSkin = /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusCompleteFilled, {
className: className,
__self: _HorizontalTimeline,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 22
}
});
return skin === 'standard' ? standardSkin : darkSkin;
};
HorizontalTimeline.defaultProps = {
skin: 'dark',
alignLabel: 'center',
items: []
};
HorizontalTimeline.propTypes = {
/** Controls the style of the component.*/
skin: _propTypes.default.oneOf(['dark', 'standard']),
/** Aligns the labels of items. */
alignLabel: _propTypes.default.oneOf(['center', 'start']),
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** A css class to be applied to the component's root element */
className: _propTypes.default.string,
/**
* Timeline items
* * `skin` - Controls line and text color (deprecated).
* * `line ` - Affects the line type, can be one of: 'filled' | 'dashed'.
* * `label` - Text displayed below the icon.
* * `icon ` - An icon representing a timeline item.
* * `width ` - The width of the timeline item, can be percentage or pixels.
* * `labelEllipsis ` - Set ellipsis for item's label .
*/
items: _propTypes.default.arrayOf(_propTypes.default.shape({
/** item's skin (deprecated)*/
skin: _propTypes.default.oneOf(['dark', 'light']),
/** item's line type */
line: _propTypes.default.oneOf(['filled', 'dashed']),
/** item's text */
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
/** item's icon */
icon: _propTypes.default.node,
/** custom width for item */
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Ellipsis for item's label */
labelEllipsis: _propTypes.default.bool
}))
};
var _default = exports.default = HorizontalTimeline;
//# sourceMappingURL=HorizontalTimeline.js.map