@centreon/react-components
Version:
react components used by centreon web frontend
231 lines (189 loc) • 7.95 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@material-ui/core/styles");
var _Stepper = _interopRequireDefault(require("@material-ui/core/Stepper"));
var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
var _StepButton = _interopRequireDefault(require("@material-ui/core/StepButton"));
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
/* eslint-disable react/require-default-props */
/* eslint-disable react/forbid-prop-types */
/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable react/jsx-filename-extension */
/* eslint-disable react/destructuring-assignment */
var styles = function styles(theme) {
return {
root: {
width: '90%'
},
button: {
marginRight: theme.spacing.unit
},
completed: {
display: 'inline-block'
},
instructions: {
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit
}
};
};
function getSteps() {
return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}
function getStepContent(step) {
switch (step) {
case 0:
return 'Step 1: Select campaign settings...';
case 1:
return 'Step 2: What is an ad group anyways?';
case 2:
return 'Step 3: This is the bit I really care about!';
default:
return 'Unknown step';
}
}
var HorizontalNonLinearStepper =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2["default"])(HorizontalNonLinearStepper, _React$Component);
function HorizontalNonLinearStepper() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2["default"])(this, HorizontalNonLinearStepper);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(HorizontalNonLinearStepper)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
activeStep: 0,
completed: {}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "totalSteps", function () {
return getSteps().length;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleNext", function () {
var activeStep;
if (_this.isLastStep() && !_this.allStepsCompleted()) {
// It's the last step, but not all steps have been completed,
// find the first step that has been completed
var steps = getSteps();
activeStep = steps.findIndex(function (step, i) {
return !(i in _this.state.completed);
});
} else {
activeStep = _this.state.activeStep + 1;
}
_this.setState({
activeStep: activeStep
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBack", function () {
_this.setState(function (state) {
return {
activeStep: state.activeStep - 1
};
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleStep", function (step) {
return function () {
_this.setState({
activeStep: step
});
};
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleComplete", function () {
var completed = _this.state.completed;
completed[_this.state.activeStep] = true;
_this.setState({
completed: completed
});
_this.handleNext();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleReset", function () {
_this.setState({
activeStep: 0,
completed: {}
});
});
return _this;
}
(0, _createClass2["default"])(HorizontalNonLinearStepper, [{
key: "completedSteps",
value: function completedSteps() {
return Object.keys(this.state.completed).length;
}
}, {
key: "isLastStep",
value: function isLastStep() {
return this.state.activeStep === this.totalSteps() - 1;
}
}, {
key: "allStepsCompleted",
value: function allStepsCompleted() {
return this.completedSteps() === this.totalSteps();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var classes = this.props.classes;
var steps = getSteps();
var activeStep = this.state.activeStep;
return _react["default"].createElement("div", {
className: classes.root
}, _react["default"].createElement(_Stepper["default"], {
nonLinear: true,
activeStep: activeStep
}, steps.map(function (label, index) {
return _react["default"].createElement(_Step["default"], {
key: label
}, _react["default"].createElement(_StepButton["default"], {
onClick: _this2.handleStep(index),
completed: _this2.state.completed[index]
}, label));
})), _react["default"].createElement("div", null, this.allStepsCompleted() ? _react["default"].createElement("div", null, _react["default"].createElement(_Typography["default"], {
className: classes.instructions
}, "All steps completed - you're finished"), _react["default"].createElement(_Button["default"], {
onClick: this.handleReset
}, "Reset")) : _react["default"].createElement("div", null, _react["default"].createElement(_Typography["default"], {
className: classes.instructions
}, getStepContent(activeStep)), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
disabled: activeStep === 0,
onClick: this.handleBack,
className: classes.button
}, "Back"), _react["default"].createElement(_Button["default"], {
variant: "contained",
color: "primary",
onClick: this.handleNext,
className: classes.button
}, "Next"), activeStep !== steps.length && (this.state.completed[this.state.activeStep] ? _react["default"].createElement(_Typography["default"], {
variant: "caption",
className: classes.completed
}, "Step ", activeStep + 1, " already completed") : _react["default"].createElement(_Button["default"], {
variant: "contained",
color: "primary",
onClick: this.handleComplete
}, this.completedSteps() === this.totalSteps() - 1 ? 'Finish' : 'Complete Step'))))));
}
}]);
return HorizontalNonLinearStepper;
}(_react["default"].Component);
HorizontalNonLinearStepper.propTypes = {
classes: _propTypes["default"].object
};
var _default = (0, _styles.withStyles)(styles)(HorizontalNonLinearStepper);
exports["default"] = _default;