react-antd-admin-panel/dist/components/builder/Steps.js

Easy prototyping admin panel using React and Antd

import React from "react";
import Section from "../Section";
import { Steps as StepsAnt, Button, Row, Col } from 'antd';
const { Step } = StepsAnt;
const Steps = (props) => {
    var _a;
    let model = props.model;
    const [state, setState] = React.useState({
        key: 0,
        index: 0,
        steps: (_a = model === null || model === void 0 ? void 0 : model._fields) !== null && _a !== void 0 ? _a : [],
    });
    model.goTo = (v) => setState({
        key: state.key,
        index: v,
        steps: state.steps,
    });
    model.prev = () => setState({
        key: state.key,
        index: state.index - 1,
        steps: state.steps,
    });
    model.next = () => setState({
        key: state.key,
        index: state.index + 1,
        steps: state.steps,
    });
    model.done = (v, b = true) => {
        setState({
            key: state.key,
            index: state.index,
            steps: state.steps.map((r, index) => {
                if (index === v - 1)
                    r._done = b !== undefined ? b : !r._done;
                return r;
            })
        });
    };
    model.clear = () => {
        setState({
            key: state.key + 1,
            index: 0,
            steps: state.steps.map((r) => {
                r.done(false);
                return r;
            })
        });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Row, null,
            React.createElement(Col, { span: 24 },
                React.createElement(Row, { style: { paddingBottom: 36 } },
                    state.index > 0 && (React.createElement(Button, { style: { marginRight: 12 }, onClick: () => model.prev() }, "Tilbage")),
                    state.index < state.steps.length - 1 && (React.createElement(Button, { type: "primary", onClick: () => model.next(), disabled: !state.steps[state.index]._done }, "N\u00E6ste"))),
                React.createElement(StepsAnt, { current: state.index }, state.steps.map(item => (React.createElement(Step, { key: item._title, title: item._title })))))),
        React.createElement(Row, { style: { paddingTop: 36 } },
            React.createElement(Col, { span: 24 }, state.steps[state.index] ? React.createElement(Section, { key: `${state.steps[state.index]._title}-${state.key}`, main: props.main, section: state.steps[state.index]._content, parent: model }) : null))));
};
export default Steps;
//# sourceMappingURL=Steps.js.map