@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
392 lines (387 loc) • 16.4 kB
JavaScript
"use strict";
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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _carbonComponents = require("carbon-components");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _carbonComponentsReact = require("carbon-components-react");
var _iconsReact = require("@carbon/icons-react");
var _ideCreateStep = _interopRequireDefault(require("./ide-create-step"));
var _settings = require("../../globals/js/settings");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } //
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
var prefix = _carbonComponents.settings.prefix;
/**
* The Create pattern provides a standard container for creating objects. It handles the page heading
* and buttons and can support a two-step or one-step flow. The two-step flow consists of a pre-check
* selection page followed by a form entry page. The one-step flow is just the form entry page.
*/
var IdeCreate = /*#__PURE__*/function (_React$Component) {
function IdeCreate(props) {
var _this;
(0, _classCallCheck2.default)(this, IdeCreate);
_this = _callSuper(this, IdeCreate, [props]);
_this.containerRef = /*#__PURE__*/_react.default.createRef();
_this.headerRef = /*#__PURE__*/_react.default.createRef();
_this._handleBackButton = _this._handleBackButton.bind(_this);
_this._handleNextButton = _this._handleNextButton.bind(_this);
_this.state = {
step: 0,
actionDisabled: false,
fixedHeader: false
};
// add scroll handler to deal with sticky header
_this.scrollHandler = function (event) {
_this._handlePageScroll(event);
};
window.addEventListener('scroll', _this.scrollHandler);
return _this;
}
(0, _inherits2.default)(IdeCreate, _React$Component);
return (0, _createClass2.default)(IdeCreate, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener('scroll', this.scrollHandler);
}
/**
* Public function to control the disabled state on the primary action button on the page.
*/
}, {
key: "setActionButtonDisabled",
value: function setActionButtonDisabled(state) {
this.setState({
actionDisabled: state
});
}
/**
* Public function to move the flow onto the next page if using the pre-check flow.
*/
}, {
key: "setNextPage",
value: function setNextPage() {
this._handleNextButton();
}
}, {
key: "_handleBackButton",
value: function _handleBackButton() {
var _this2 = this;
var step = this.state.step - 1;
this.setState({
step: step
}, function () {
return _this2.props.onStepChange(step);
});
}
}, {
key: "_handleNextButton",
value: function _handleNextButton() {
var _this3 = this;
if (!this.props.stepNextDisabled) {
var step = this.state.step + 1;
this.setState({
step: step
}, function () {
return _this3.props.onStepChange(step);
});
}
}
}, {
key: "changeStep",
value: function changeStep(step) {
var _this4 = this;
this.setState({
step: step
}, function () {
return _this4.props.onStepChange(step);
});
}
}, {
key: "_handlePageScroll",
value: function _handlePageScroll() {
var rect = this.containerRef.current.getBoundingClientRect();
if (rect.top < 0) {
if (!this.state.fixedHeader && this.headerRef.current) {
this.setState({
style: {
paddingTop: "".concat(this.headerRef.current.clientHeight, "px")
}
});
}
this.setState({
fixedHeader: true
});
} else {
this.setState({
style: undefined,
fixedHeader: false
});
}
}
}, {
key: "_validateProps",
value: function _validateProps() {
if (this.props.usePreCheck && _react.default.Children.count(this.props.children) > 0) {
if (_react.default.Children.toArray(this.props.children)[0].props.label) {
throw new Error('Error: label should not be set on first step when usePreCheck is set');
}
}
}
}, {
key: "_onProgressChange",
value: function _onProgressChange(index, stepsDisabled) {
var _this5 = this;
// We need to count +1 in case usePreCheck is set
var actualStep = function actualStep(index) {
return _this5.props.usePreCheck ? index + 1 : index;
};
return stepsDisabled[actualStep(index)] ? undefined : this.changeStep(actualStep(index));
}
}, {
key: "render",
value: function render() {
var _this6 = this;
this._validateProps();
var currentStep = this.state.step;
var steps = _react.default.Children.toArray(this.props.children).filter(function (c) {
return c.type === _ideCreateStep.default;
});
var stepLabels = steps.filter(function (child) {
return child.props.label;
});
var stepsDisabled = steps.map(function (child) {
return child.props.disabled;
});
// work out which buttons to show
var button1 = null;
if (currentStep > 0) {
button1 = /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
kind: "secondary",
disabled: this.props.disableCancelButton,
className: "".concat(_settings.idePrefix, "-create-cancel-btn"),
onClick: this._handleBackButton
}, this.props.buttonTextStepBack);
} else if (this.props.buttonTextFormCancel) {
button1 = /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
kind: "secondary",
disabled: this.props.disableCancelButton,
className: "".concat(_settings.idePrefix, "-create-cancel-btn"),
onClick: this.props.onCancel
}, this.props.buttonTextFormCancel);
}
var button2 = null;
if (currentStep < steps.length - 1) {
if (this.props.buttonTextStepNext) {
button2 = /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
disabled: this.props.stepNextDisabled,
onClick: this._handleNextButton,
className: "".concat(_settings.idePrefix, "-create-next-btn")
}, this.props.buttonTextStepNext);
}
} else {
button2 = /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
disabled: this.state.actionDisabled,
onClick: this.props.onFormAction,
className: "".concat(_settings.idePrefix, "-create-next-btn"),
renderIcon: this.props.externalLink ? _iconsReact.Launch24 : null
}, this.props.buttonTextFormAction);
}
var buttonGroup = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, button1, button2);
var contentClassName = "".concat(_settings.idePrefix, "-create-content ").concat(prefix, "--grid ").concat(_settings.idePrefix, "--content-alignment");
var headerClassName = "".concat(_settings.idePrefix, "-create-header");
if (this.state.fixedHeader) {
headerClassName += ' fixed';
}
return /*#__PURE__*/_react.default.createElement("div", {
ref: this.containerRef,
className: "".concat(_settings.idePrefix, "-create-container")
}, /*#__PURE__*/_react.default.createElement("div", {
ref: this.headerRef,
className: headerClassName
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "--grid ").concat(_settings.idePrefix, "--content-alignment")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "--row ").concat(_settings.idePrefix, "-create-breadcrumb")
}, this.props.breadCrumbUrl && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
className: "".concat(prefix, "--col"),
href: this.props.breadCrumbUrl,
onClick: function onClick(ev) {
if (_this6.props.useCancelOnBreadCrumb && _this6.props.onCancel) {
_this6.props.onCancel(ev);
}
}
}, this.props.breadCrumbText), !this.props.breadCrumbUrl && this.props.breadCrumbCallback && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
className: "".concat(prefix, "--col"),
href: "#",
onClick: function onClick(ev) {
ev.preventDefault();
_this6.props.breadCrumbCallback(ev);
}
}, this.props.breadCrumbText), !this.props.breadCrumbUrl && !this.props.breadCrumbCallback && /*#__PURE__*/_react.default.createElement("p", {
className: "".concat(prefix, "--col")
}, this.props.breadCrumbText)), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "--row")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-create-title ").concat(prefix, "--col")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-create-title-box")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-create-heading")
}, /*#__PURE__*/_react.default.createElement("h2", {
className: "".concat(_settings.idePrefix, "-create-heading-heading")
}, this.props.pageTitle)), this.props.subTitle && (!this.props.subTitleFixedOnly || this.state.fixedHeader) && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-create-form-subtitle")
}, /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(_settings.idePrefix, "-create-form-subtitle-content")
}, this.props.subTitle))), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-create-buttons")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-create-button-box")
}, buttonGroup)))))), /*#__PURE__*/_react.default.createElement("div", {
className: contentClassName,
style: this.state.style
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "--grid ").concat(_settings.idePrefix, "-create-progress-container")
}, stepLabels.length > 1 && (!this.props.usePreCheck || currentStep > 0) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
currentIndex: this.props.usePreCheck ? currentStep - 1 : currentStep,
className: "".concat(prefix, "--row progress-bar"),
onChange: this.props.disableProgressOnChange ? undefined : function (index) {
return _this6._onProgressChange(index, stepsDisabled);
}
}, stepLabels.map(function (child, i) {
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
label: child.props.label,
key: i,
disabled: child.props.disabled
});
}))), steps[currentStep]));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
if (typeof props.formActionDisabled === 'boolean' && props.formActionDisabled !== state.actionDisabled) {
return {
actionDisabled: props.formActionDisabled
};
}
return null;
}
}]);
}(_react.default.Component);
/* eslint-disable react/sort-prop-types */
(0, _defineProperty2.default)(IdeCreate, "propTypes", {
/**
* The primary page heading (required)
*/
pageTitle: _propTypes.default.string.isRequired,
/**
* The secondary page heading (shows under the primary heading). This can be any JSX fragment
*/
subTitle: _propTypes.default.node,
/**
* Only include the subtitle when in fixed mode
*/
subTitleFixedOnly: _propTypes.default.bool,
/**
* The text to go into the breadcrumb link
*/
breadCrumbText: _propTypes.default.string,
/**
* The URL to navigate to for the breadcrumb. If not specified, the link will be a simple text
*/
breadCrumbUrl: _propTypes.default.string,
/**
* A callback function to be used on breadcrumb instead of a full page navigation. !!! It only works if breadCrumbUrl is not defined to avoid consumer side confusion
*/
breadCrumbCallback: _propTypes.default.func,
/**
* Set this flag to call the onCancel function when using the breadcrumb
*/
useCancelOnBreadCrumb: _propTypes.default.bool,
/**
* Set this flag to put indicate the first step is a pre-check, so that the progress indicator is not
* shown. The pre-check flow allows for an initial user selection page before seeing the main input
* form for the create. For example, this could be a page where the user chooses a particular template
* to base the create on.
*/
usePreCheck: _propTypes.default.bool,
/**
* The text for the form primary action (usually "Create")
*/
buttonTextFormAction: _propTypes.default.string,
/**
* The text for the form cancel action (usually "Cancel"). If not specified the button will be hidden
*/
buttonTextFormCancel: _propTypes.default.string,
/**
* The text for the primary button to move between steps (usually "Next"). Only needed when using
* the pre-check flow. Can be left blank to hide the button.
*/
buttonTextStepNext: _propTypes.default.string,
/**
* The text for the secondary button to move back a step (usually "Back"). Only needed when using
* the pre-check flow.
*/
buttonTextStepBack: _propTypes.default.string,
/**
* Function that will be called when the user navigates between the steps in the flow.
*/
onStepChange: _propTypes.default.func,
/**
* Function that will be called when the user clicks on the Cancel button
*/
onCancel: _propTypes.default.func,
/**
* Function that will be called when the user clicks on the form primary action button
*/
onFormAction: _propTypes.default.func,
/**
* Set this flag to disable the primary form action
*/
formActionDisabled: _propTypes.default.bool,
/**
* Set this flag to disable the secondary form action
*/
disableCancelButton: _propTypes.default.bool,
/**
* Set this flag to disable the next step action
*/
stepNextDisabled: _propTypes.default.bool,
/*
* Set this flag to true to get a launch out icon of the form action button
*/
externalLink: _propTypes.default.bool,
/*
* Set this flag to true to remove the onClick behaviour for the progress indicator
*/
disableProgressOnChange: _propTypes.default.bool,
/**
* Child components
*/
children: _propTypes.default.any
});
(0, _defineProperty2.default)(IdeCreate, "defaultProps", {
onCancel: function onCancel() {
return;
},
onFormAction: function onFormAction() {
return;
},
onStepChange: function onStepChange() {
return;
}
});
var _default = exports.default = IdeCreate;