smart-react-components/router/index.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var index = require('../index-6d498b59.js');
var DOMHelper = require('../DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
require('styled-components');
require('../index-56ba89df.js');
var Div = require('../element/Div.js');
var UseLinkMethods = require('../UseLinkMethods-aa925676.js');
require('react-router');
var A = require('../element/A.js');
var ProgressBar$1 = require('../ProgressBar-6e7f8767.js');

const SET_URL = "SET_URL";
const SET_NEW_URL = "SET_NEW_URL";
const SET_CANCEL_CALLBACK = "SET_CANCEL_CALLBACK";
const SET_PERCENTAGE = "SET_PERCENTAGE";

const getInitialState = (url = UseLinkMethods.RouterHelper.getUrl()) => ({
    url: UseLinkMethods.RouterHelper.setUrl(url),
    newUrl: null,
    key: null,
    cancelCallback: null,
    percentage: 0,
});
const reducer = (state, action) => {
    switch (action.type) {
        case SET_URL:
            return Object.assign(Object.assign({}, state), { url: action.payload, newUrl: null, key: null, cancelCallback: null, percentage: 0 });
        case SET_NEW_URL:
            if (state.cancelCallback)
                state.cancelCallback();
            return Object.assign(Object.assign({}, state), { newUrl: action.payload, key: action.key, cancelCallback: null, percentage: 0 });
        case SET_CANCEL_CALLBACK:
            return Object.assign(Object.assign({}, state), { cancelCallback: state.key == action.key ? action.payload : state.cancelCallback });
        case SET_PERCENTAGE:
            if (state.key == action.key)
                return action.payload == 100 ? reducer(state, { type: SET_URL, payload: state.newUrl }) : Object.assign(Object.assign({}, state), { percentage: action.payload });
            else
                return state;
        default:
            throw new Error();
    }
};

const ProgressBar = ({ progressBarProps = index.DV.JSX_ELEMENT_PROPS }) => {
    const router = React__default.useContext(UseLinkMethods.RouterContext);
    return (React__default.createElement(Div, { position: "fixed", zIndex: "routerProgressBar", left: "0", right: "0", top: "0", style: (router.state.newUrl ? {} : { visibility: "hidden", pointerEvents: "none" }) },
        React__default.createElement(ProgressBar$1.ProgressBar$, Object.assign({}, progressBarProps, { percentage: router.state.percentage }))));
};

const ServerRouter = ({ children, url, progressBarProps }) => {
    const [state, dispatch] = React__default.useReducer(reducer, getInitialState(url));
    return (React__default.createElement(UseLinkMethods.RouterContext.Provider, { value: { state, dispatch } },
        React__default.createElement(ProgressBar, { progressBarProps: progressBarProps }),
        children));
};

const setUrl = (url) => ({
    type: SET_URL,
    payload: url
});
const setNewUrl = (newUrl, key) => ({
    type: SET_NEW_URL,
    payload: newUrl,
    key
});
const setCancelCallback = (callback, key) => ({
    type: SET_CANCEL_CALLBACK,
    payload: callback,
    key
});
const setPercentage = (percentage, key) => ({
    type: SET_PERCENTAGE,
    payload: percentage,
    key
});

const ClientRouter = ({ children, params = {}, progressBarProps = index.DV.JSX_ELEMENT_PROPS, routes }) => {
    const [state, dispatch] = React__default.useReducer(reducer, getInitialState());
    const setRouterUrl = React__default.useCallback((_url) => {
        (function () {
            return UseLinkMethods.__awaiter(this, void 0, void 0, function* () {
                const url = UseLinkMethods.RouterHelper.setUrl(_url);
                let key = new Date().getTime().toString();
                const setPercentage$ = (payload) => dispatch(setPercentage(payload, key));
                const setCancelCallback$ = (payload) => dispatch(setCancelCallback(payload, key));
                let loaderMethods = [];
                yield UseLinkMethods.RouterHelper.getLoaderMethods(routes, url.pathname, url.query, loaderMethods, params, state.url, setPercentage$, setCancelCallback$);
                if (loaderMethods.length == 0)
                    dispatch(setUrl(url));
                else {
                    dispatch(setNewUrl(url, key));
                    try {
                        setPercentage$(10);
                        for (let i in loaderMethods) {
                            yield loaderMethods[i]();
                        }
                        setPercentage$(100);
                    }
                    catch (ignored) { }
                }
            });
        }());
    }, [state.url]);
    const popstate = () => setRouterUrl(UseLinkMethods.RouterHelper.getUrl());
    React__default.useEffect(() => {
        history.push = (url) => {
            history.pushState({}, null, url);
            setRouterUrl(UseLinkMethods.RouterHelper.getUrl());
        };
        history.replace = (url) => {
            history.replaceState({}, null, url);
            setRouterUrl(UseLinkMethods.RouterHelper.getUrl());
        };
        DOMHelper.DOMHelper.addEventListener(window, ["popstate"], popstate);
        return () => {
            DOMHelper.DOMHelper.removeEventListener(window, ["popstate"], popstate);
        };
    }, [state.url]);
    return (React__default.createElement(UseLinkMethods.RouterContext.Provider, { value: { state, dispatch } },
        React__default.createElement(ProgressBar, { progressBarProps: progressBarProps }),
        children));
};

const Switch = ({ children }) => {
    const router = React__default.useContext(UseLinkMethods.RouterContext);
    const getElements = () => {
        let switchNotRendered = false;
        return children.map((item, index) => {
            let el = React__default.cloneElement(item, { key: (item.key || index), switchNotRendered });
            if (!switchNotRendered && UseLinkMethods.RouterHelper.matchPath(router.state.url.pathname, router.state.url.query, { path: item.props.path, exact: item.props.exact, searchKeys: item.props.searchKeys }))
                switchNotRendered = true;
            return el;
        });
    };
    const [elements, setElements] = React__default.useState(() => getElements());
    const init = React__default.useRef(false);
    React__default.useEffect(() => {
        if (!init.current)
            init.current = true;
        else
            setElements(getElements());
    }, [children, router.state.url]);
    return React__default.createElement(React__default.Fragment, null, elements);
};

const Route = ({ path, exact, Component, render, searchKeys, switchNotRendered, defaultSearchValues }) => {
    const router = React__default.useContext(UseLinkMethods.RouterContext);
    const [match, setMatch] = React__default.useState(() => UseLinkMethods.RouterHelper.matchPath(router.state.url.pathname, router.state.url.query, { path, exact, searchKeys, defaultSearchValues }));
    React__default.useEffect(() => {
        setMatch(UseLinkMethods.RouterHelper.matchPath(router.state.url.pathname, router.state.url.query, { path, exact, searchKeys, defaultSearchValues }));
    }, [router.state.url]);
    return (React__default.createElement(React__default.Fragment, { key: match ? match.key : "" },
        (!switchNotRendered && match && typeof Component !== "undefined") && React__default.createElement(Component, { url: router.state.url, match: match }),
        render && render((!switchNotRendered && match ? match : null), router.state.url)));
};

const Link = ({ children, elementProps = index.DV.JSX_ELEMENT_PROPS, to }) => {
    const { click } = UseLinkMethods.useLinkMethods({ to, checkActive: false });
    return (React__default.createElement(A, Object.assign({}, elementProps, { href: to, onClick: click }), children));
};

const NavLink = ({ children, elementProps = index.DV.JSX_ELEMENT_PROPS, to, path, exact, emptyQueryActive }) => {
    const { click, active, activating } = UseLinkMethods.useLinkMethods({ to, path, exact, emptyQueryActive });
    return (React__default.createElement(A, Object.assign({}, elementProps, { href: to, onClick: click, className: `${elementProps.className || ""} ${active ? "active" : ""} ${activating ? "activating" : ""}` }), children));
};

const runLoaders = UseLinkMethods.RouterHelper.runLoaders.bind(UseLinkMethods.RouterHelper);

exports.RouterContext = UseLinkMethods.RouterContext;
exports.ClientRouter = ClientRouter;
exports.Link = Link;
exports.NavLink = NavLink;
exports.Route = Route;
exports.ServerRouter = ServerRouter;
exports.Switch = Switch;
exports.runLoaders = runLoaders;