@tomino/dynamic-form-semantic-ui/dist/mjs/react-router/react_router_view.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { BrowserRouter, Route, Link, Redirect, Switch } from 'react-router-dom';
import { createComponents, root, tryInterpolate } from '../common';
import { FormView } from '../form_view';
import { observer } from 'mobx-react';
import { DynamicComponent } from '../wrapper';
export const ReactRouterProvider = props => {
    return React.createElement(BrowserRouter, null, createComponents(props));
};
export class PageView extends React.PureComponent {
    assignParams() {
        if (this.props.match.params) {
            for (let key of Object.keys(this.props.match.params)) {
                try {
                    if (this.props.owner.getValue(key) != this.props.match.params[key]) {
                        this.props.owner.setValue(key, this.props.match.params[key]);
                    }
                }
                catch (ex) {
                    console.warn(ex);
                }
            }
        }
    }
    componentWillMount() {
        this.assignParams();
    }
    componentWillUpdate() {
        this.assignParams();
    }
    render() {
        return React.createElement(FormView, Object.assign({}, this.props));
    }
}
const EmptyPage = props => (React.createElement(DynamicComponent, Object.assign({}, props), "Please select a page ..."));
export const ReactRouterRoute = props => {
    const Component = React.useMemo(() => {
        const page = root(props.formElement).pages.find(p => p.uid === props.formElement.props.page);
        if (!page) {
            return EmptyPage;
        }
        const RouteView = (routerProps) => (React.createElement(PageView, Object.assign({}, routerProps, props, { formElement: page })));
        return RouteView;
    }, [props]);
    Component.displayName = 'MemoRoute';
    return (React.createElement(Route, { exact: !!props.formElement.props.exact, path: props.formElement.props.path, component: Component }));
};
ReactRouterRoute.displayName = 'ReactRouterRoute';
export const ReactRouterSwitch = props => {
    const { formElement, ...rest } = props;
    if (!props.formElement.props.config) {
        return null;
    }
    return (React.createElement(Switch, null, props.formElement.props.config.map((c, i) => {
        return (React.createElement(ReactRouterRoute, Object.assign({ key: i }, rest, { formElement: { ...formElement, parent: formElement.parent, props: c } })));
    })));
};
ReactRouterSwitch.displayName = 'ReactRouterSwitch';
const ReactRouterLink = props => {
    const { owner, formElement, formElement: { props: { text, url } } } = props;
    return (React.createElement(DynamicComponent, Object.assign({}, props, { control: Link, to: tryInterpolate(url, owner) }), tryInterpolate(text, owner) ||
        (formElement.elements && formElement.elements.length && createComponents(props)) ||
        '[⚓︎ Link]'));
};
export const ReactRouterLinkView = {
    Component: observer(ReactRouterLink),
    toString: (owner, props) => {
        return `[${props.formElement.props.url}] ${tryInterpolate(props.formElement.props.url, owner)}`;
    }
};
export const ReactRouterRedirect = ({ owner, formElement: { props: { url } } }) => React.createElement(Redirect, { to: tryInterpolate(url, owner) });
//# sourceMappingURL=react_router_view.js.map