@react-slate/core/build/components/Progress.js

Write interactive CLI apps with React

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const __1 = require("..");
class Progress extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.state = {
            width: 0,
        };
        this.onLayout = layout => {
            if (layout.width !== this.state.width) {
                this.setState({ width: layout.width });
            }
        };
    }
    render() {
        const { percentage, renderBar, renderPercentage } = this.props;
        const { width } = this.state;
        const value = Math.max(0, Math.min(1, this.props.value));
        const percentageLength = this.props.percentage ? 5 : 0;
        const maxBarWith = width - 2 - percentageLength;
        const fillWidth = Math.max(0, Math.floor(value * maxBarWith));
        const offsetWidth = Math.max(0, maxBarWith - fillWidth - 1);
        const bar = `[${'='.repeat(fillWidth)}${value === 1 ? '' : '>'}${' '.repeat(offsetWidth)}]`;
        const percentageString = `${Math.floor(value * 100).toString()}%`;
        return (react_1.default.createElement(__1.View, { onLayout: this.onLayout, width: "100%", justifyContent: "space-between" },
            width ? renderBar ? renderBar(bar) : react_1.default.createElement(__1.Text, null, bar) : null,
            width
                ? percentage &&
                    (renderPercentage ? (renderPercentage(percentageString)) : (react_1.default.createElement(__1.Text, null, percentageString)))
                : null));
    }
}
exports.default = Progress;
//# sourceMappingURL=Progress.js.map