@kui-shell/plugin-client-common
Version:
Kui plugin that offers stylesheets
101 lines (100 loc) • 4.83 kB
JavaScript
/*
* Copyright 2022 The Kubernetes Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React from 'react';
import { i18n } from '@kui-shell/core/mdist/api/i18n';
import { pexecInCurrentTab } from '@kui-shell/core/mdist/api/Exec';
import Tooltip from '../spi/Tooltip';
import Spinner from '../Views/Terminal/Block/Spinner';
import { statusToClassName } from './ProgressStepper';
import { emitLinkUpdate } from './LinkStatus';
import '../../../web/scss/components/Wizard/MiniProgressStepper.scss';
const strings = i18n('plugin-client-common', 'code');
export class MiniProgressStepper extends React.PureComponent {
progress() {
const isComplete = this.isComplete();
return (React.createElement("ol", { className: "pf-c-progress-stepper kui--progress-stepper", "data-mini": true, "data-is-complete": this.isComplete() }, this.props.steps
.filter(_ => !isComplete || !_.optional)
.map(props => (React.createElement(MiniProgressStep, Object.assign({ key: props.codeBlockId }, props, { status: props.status }))))));
}
get nSteps() {
return this.props.steps.length;
}
get nRequiredSteps() {
return this.props.steps.filter(_ => !_.optional).length;
}
get nDone() {
return this.props.steps.filter(_ => _.status === 'success').length;
}
isComplete() {
// it may be greater, it we have successful validation for
// optional steps
return this.nDone >= this.nRequiredSteps;
}
render() {
return this.progress();
}
}
class MiniProgressStep extends React.PureComponent {
componentDidMount() {
if (this.props.validate && this.props.status !== 'in-progress' && this.props.status !== 'success') {
setTimeout(() => __awaiter(this, void 0, void 0, function* () {
try {
emitLinkUpdate(this.props.codeBlockId, 'in-progress');
yield pexecInCurrentTab(this.props.validate.toString(), undefined, true, true);
emitLinkUpdate(this.props.codeBlockId, 'success');
}
catch (err) {
emitLinkUpdate(this.props.codeBlockId, 'blank');
}
}));
}
}
get status() {
return this.props.status || 'blank';
}
get statusClass() {
return statusToClassName(this.status);
}
icon() {
return this.status === 'in-progress' ? React.createElement(Spinner, null) : React.createElement(React.Fragment, null);
}
get tooltipText() {
const title = strings('Code Block');
const status = this.status === 'blank' && this.props.optional ? 'optional' : this.status;
return `### ${title}
#### Status: ${strings('status.' + status)}
\`\`\`${this.props.language || ''}
${this.props.body}
\`\`\``;
}
render() {
return (React.createElement(Tooltip, { markdown: this.tooltipText, maxWidth: "30rem", position: "bottom-start" },
React.createElement("li", { className: ['pf-c-progress-stepper__step', 'kui--progress-step', ...this.statusClass].join(' '), "data-optional": this.props.optional || undefined },
React.createElement("div", { className: "pf-c-progress-stepper__step-connector" },
React.createElement("a", { className: "kui--progress-step-status-icon-link", href: `#kui-link-${this.props.codeBlockId}` },
React.createElement("span", { className: "pf-c-progress-stepper__step-icon kui--progress-step-status-icon" }, this.icon()))))));
}
}
//# sourceMappingURL=MiniProgressStepper.js.map