mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 23:32:55 +01:00
630 lines
19 KiB
TypeScript
630 lines
19 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import NoodlRuntime from '@noodl/runtime';
|
|
|
|
import ASyncQueue from '../../async-queue';
|
|
import guid from '../../guid';
|
|
import { createNodeFromReactComponent } from '../../react-component-node';
|
|
import { Noodl, Slot } from '../../types';
|
|
import { ComponentPageInfo, NavigateArgs, RouterHandler } from './router-handler';
|
|
|
|
export interface RouterReactComponentProps extends Noodl.ReactProps {
|
|
didMount: () => void;
|
|
willUnmount: () => void;
|
|
|
|
children: Slot;
|
|
}
|
|
|
|
function RouterReactComponent(props: RouterReactComponentProps) {
|
|
const { didMount, willUnmount, children, style } = props;
|
|
|
|
useEffect(() => {
|
|
didMount();
|
|
return () => {
|
|
willUnmount();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className={props.className} style={style}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function _trimUrlPart(url) {
|
|
if (url[0] === '/') url = url.substring(1);
|
|
if (url[url.length - 1] === '/') url = url.substring(0, url.length - 1);
|
|
return url;
|
|
}
|
|
|
|
function getBaseUrlLength(url: string): number {
|
|
// If the URL is a full URL, then we only want to get the pathname.
|
|
// Otherwise we just return the url length which should be the pathname.
|
|
if (!url.startsWith('/')) {
|
|
try {
|
|
// Lets say the baseUrl is:
|
|
// "https://collar-zippy-overcome.sandbox.noodl.app/my-folder"
|
|
// Then we want to remove "/my-folder" from the substring
|
|
return new URL(url).pathname.length;
|
|
} catch {
|
|
/* noop */
|
|
}
|
|
}
|
|
|
|
return url.length;
|
|
}
|
|
|
|
const RouterNode = {
|
|
name: 'Router',
|
|
displayNodeName: 'Page Router',
|
|
category: 'Visuals',
|
|
docs: 'https://docs.noodl.net/nodes/navigation/page-router',
|
|
allowAsExportRoot: true,
|
|
useVariants: false,
|
|
connectionPanel: {
|
|
groupPriority: ['General', 'Actions', 'Events', 'Mounted']
|
|
},
|
|
initialize: function () {
|
|
this._internal.asyncQueue = new ASyncQueue();
|
|
|
|
this.onScheduleReset = () => {
|
|
this.scheduleReset();
|
|
};
|
|
|
|
this.props.didMount = () => {
|
|
this._internal.isMounted = true;
|
|
|
|
// SSR Support
|
|
if (typeof window !== 'undefined') {
|
|
// Listen to push state events and update stack
|
|
if (window.history && window.history.pushState) {
|
|
//this is event is manually sent on push, so covers both pop and push state
|
|
window.addEventListener('popstate', this.onScheduleReset);
|
|
} else {
|
|
// Only hash support
|
|
window.addEventListener('hashchange', this.onScheduleReset);
|
|
}
|
|
}
|
|
|
|
this._registerRouter();
|
|
};
|
|
|
|
this.props.willUnmount = () => {
|
|
this._internal.isMounted = false;
|
|
|
|
window.removeEventListener('popstate', this.onScheduleReset);
|
|
window.removeEventListener('hashchange', this.onScheduleReset);
|
|
|
|
this._deregisterRouter();
|
|
};
|
|
|
|
this.props.layout = 'column';
|
|
},
|
|
getInspectInfo() {
|
|
return this._internal.currentUrl;
|
|
},
|
|
defaultCss: {
|
|
flex: '1 1',
|
|
alignSelf: 'stretch',
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
},
|
|
getReactComponent() {
|
|
return RouterReactComponent;
|
|
},
|
|
inputs: {
|
|
name: {
|
|
type: 'string',
|
|
displayName: 'Name',
|
|
group: 'General',
|
|
set: function (value) {
|
|
this._deregisterRouter();
|
|
this._internal.name = value;
|
|
|
|
if (this._internal.isMounted) {
|
|
this._registerRouter();
|
|
}
|
|
}
|
|
},
|
|
pages: {
|
|
type: { name: 'pages', allowEditOnly: true },
|
|
displayName: 'Pages',
|
|
group: 'Pages',
|
|
set: function (value) {
|
|
this._internal.pages = value;
|
|
if (this._internal.isMounted) {
|
|
this.scheduleReset();
|
|
}
|
|
}
|
|
},
|
|
urlPath: {
|
|
type: 'string',
|
|
displayName: 'Url path',
|
|
group: 'General',
|
|
set: function (value) {
|
|
this._internal.urlPath = value;
|
|
}
|
|
},
|
|
clip: {
|
|
displayName: 'Clip Behavior',
|
|
type: {
|
|
name: 'enum',
|
|
enums: [
|
|
{ value: 'contentHeight', label: 'Expand to content size' },
|
|
{ value: 'scroll', label: 'Scroll' },
|
|
{ value: 'clip', label: 'Clip content' }
|
|
]
|
|
},
|
|
group: 'Layout',
|
|
default: 'contentHeight',
|
|
set(value) {
|
|
switch (value) {
|
|
case 'scroll':
|
|
this.setStyle({ overflow: 'auto' });
|
|
break;
|
|
case 'clip':
|
|
this.setStyle({ overflow: 'hidden' });
|
|
break;
|
|
default:
|
|
this.removeStyle(['overflow']);
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
reset: {
|
|
type: 'signal',
|
|
displayName: 'Reset',
|
|
group: 'Actions',
|
|
valueChangedToTrue: function () {
|
|
this.scheduleReset();
|
|
}
|
|
}
|
|
},
|
|
inputCss: {
|
|
backgroundColor: {
|
|
type: 'color',
|
|
displayName: 'Background Color',
|
|
group: 'Style',
|
|
default: 'transparent',
|
|
applyDefault: false
|
|
}
|
|
},
|
|
outputs: {
|
|
currentPageTitle: {
|
|
type: 'string',
|
|
group: 'General',
|
|
displayName: 'Current Page Title',
|
|
getter: function () {
|
|
return this._internal.currentPage !== undefined ? this._internal.currentPage.title : undefined;
|
|
}
|
|
},
|
|
currentPageComponent: {
|
|
type: 'string',
|
|
group: 'General',
|
|
displayName: 'Current Page Component',
|
|
getter: function () {
|
|
return this._internal.currentPage !== undefined ? this._internal.currentPage.component : undefined;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
_registerRouter() {
|
|
RouterHandler.instance.registerRouter(this._internal.name, this);
|
|
},
|
|
_deregisterRouter() {
|
|
RouterHandler.instance.deregisterRouter(this._internal.name, this);
|
|
},
|
|
setPageOutputs(outputs) {
|
|
for (const prop in outputs) {
|
|
this._internal[prop] = outputs[prop];
|
|
this.flagOutputDirty(prop);
|
|
}
|
|
},
|
|
scheduleReset() {
|
|
const internal = this._internal;
|
|
if (!internal.hasScheduledReset) {
|
|
internal.hasScheduledReset = true;
|
|
this.scheduleAfterInputsHaveUpdated(() => {
|
|
internal.hasScheduledReset = false;
|
|
this.reset();
|
|
});
|
|
}
|
|
},
|
|
createPageContainer() {
|
|
const group = this.nodeScope.createPrimitiveNode('Group');
|
|
group.setStyle({ flex: '1 0 100%' });
|
|
return group;
|
|
},
|
|
reset() {
|
|
this._internal.asyncQueue.enqueue(this.resetAsync.bind(this));
|
|
},
|
|
scrollToTop() {
|
|
const dom = this.getDOMElement();
|
|
if (dom) {
|
|
dom.scrollTop = 0;
|
|
|
|
if (NoodlRuntime.instance.getProjectSettings().bodyScroll) {
|
|
//Automatically scroll the page router into view in case it's currently outside the viewport
|
|
//Might want to add an option to disable this
|
|
dom.scrollIntoView();
|
|
}
|
|
}
|
|
},
|
|
async resetAsync() {
|
|
let component: string;
|
|
let params = {};
|
|
|
|
const matchFromUrl = this.matchPageFromUrl();
|
|
if (matchFromUrl) {
|
|
if (!matchFromUrl.page) {
|
|
// Use the start page
|
|
component = this._internal.pages !== undefined ? this._internal.pages.startPage : undefined;
|
|
params = Object.assign({}, matchFromUrl.params, matchFromUrl.query);
|
|
} else {
|
|
// Use the matching page
|
|
component = matchFromUrl.page.component;
|
|
params = Object.assign({}, matchFromUrl.params, matchFromUrl.query);
|
|
}
|
|
} else {
|
|
// TODO: Clean up matchPageFromUrl, in this case it returns undefined.
|
|
// remainingNavigationPath is undefined, since it have to run
|
|
// matchPageFromUrl to get the path. So it feels like it needs
|
|
// some bigger refactoring to make it understandable.
|
|
component = this._internal.pages.startPage;
|
|
params = {};
|
|
}
|
|
|
|
if (component === undefined) return; // No component specified for page
|
|
|
|
const currentPage = RouterHandler.instance.getPageInfoForComponent(component);
|
|
|
|
if (this._internal.currentPage === currentPage) {
|
|
//already at the correct page, keep the current page
|
|
//update page inputs if they have changed
|
|
//TODO: fix if a parameter goes from a value to undefined, the old value will still exist in the connection from previous navigation
|
|
if (!shallowObjectsEqual(this._internal.currentParams, params)) {
|
|
this._internal.currentParams = params;
|
|
this._updatePageInputs(this._internal.currentPageComponent.nodeScope, params);
|
|
}
|
|
return;
|
|
}
|
|
|
|
this.scrollToTop();
|
|
|
|
// Reset the current page for this router
|
|
// First remove all children
|
|
const children = this.getChildren();
|
|
for (const i in children) {
|
|
const c = children[i];
|
|
this.removeChild(c);
|
|
this.nodeScope.deleteNode(c);
|
|
}
|
|
|
|
const content = await this.nodeScope.createNode(component, guid());
|
|
this._internal.currentPageComponent = content;
|
|
|
|
// Find the root page node
|
|
const pageNodes = content.nodeScope.getNodesWithType('Page');
|
|
if (pageNodes === undefined || pageNodes.length !== 1) {
|
|
return; // Should be only one page root
|
|
}
|
|
|
|
this._internal.currentPage = RouterHandler.instance.getPageInfoForComponent(component);
|
|
this._internal.currentParams = params;
|
|
|
|
this.flagOutputDirty('currentPageTitle');
|
|
this.flagOutputDirty('currentPageComponent');
|
|
// @ts-expect-error Noodl is not defined
|
|
Noodl.SEO.setTitle(this._internal.currentPage.title);
|
|
|
|
this._updatePageInputs(this._internal.currentPageComponent.nodeScope, params);
|
|
|
|
const group = this.createPageContainer();
|
|
group.addChild(content);
|
|
|
|
this.addChild(group);
|
|
|
|
/* this.setPageOutputs({
|
|
currentUrl: pageInfo.path,
|
|
currentTitle: pageInfo.title
|
|
});*/
|
|
},
|
|
_updatePageInputs(nodeScope, params) {
|
|
for (const pageInputNode of nodeScope.getNodesWithType('PageInputs')) {
|
|
pageInputNode._setPageParams(params);
|
|
}
|
|
},
|
|
getRelativeURL(targetPage: ComponentPageInfo, pageParams: NavigateArgs['params']) {
|
|
if (!targetPage) return;
|
|
|
|
let urlPath = targetPage.path;
|
|
if (urlPath === undefined) return;
|
|
|
|
// First add matching parameters to path
|
|
const paramsInPath = urlPath.match(/{([^}]+)}/g);
|
|
|
|
const params = Object.assign({}, pageParams);
|
|
if (paramsInPath) {
|
|
for (const param of paramsInPath) {
|
|
const key = param.replace(/[{}]/g, '');
|
|
if (pageParams[key] !== undefined) {
|
|
urlPath = urlPath.replace(param, encodeURIComponent(params[key]));
|
|
delete params[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add other paramters as query
|
|
const query = [];
|
|
for (const key in params) {
|
|
query.push({
|
|
name: key,
|
|
value: encodeURIComponent(params[key])
|
|
});
|
|
}
|
|
|
|
urlPath = _trimUrlPart(urlPath);
|
|
|
|
// Prepend this routers url path if there is one
|
|
if (this._internal.urlPath !== undefined) urlPath = _trimUrlPart(this._internal.urlPath) + '/' + urlPath;
|
|
|
|
return {
|
|
path: urlPath,
|
|
query: query
|
|
};
|
|
},
|
|
getNavigationAbsoluteURL(targetPage: ComponentPageInfo, pageParams: NavigateArgs['params']) {
|
|
let parent = this.parent;
|
|
let parentUrl = { path: '', query: [] };
|
|
|
|
while (parent !== undefined && typeof parent.getNavigationAbsoluteURL !== 'function') {
|
|
parent = parent.getVisualParentNode();
|
|
}
|
|
|
|
if (parent) {
|
|
parentUrl = parent.getNavigationAbsoluteURL(parent._internal.currentPage, parent._internal.currentParams);
|
|
}
|
|
|
|
const thisUrl = this.getRelativeURL(targetPage, pageParams);
|
|
if (thisUrl) {
|
|
const haveForwardSlash = parentUrl.path.endsWith('/') || thisUrl.path.startsWith('/');
|
|
return {
|
|
path: parentUrl.path + (haveForwardSlash ? '' : '/') + thisUrl.path,
|
|
query: parentUrl.query.concat(thisUrl.query)
|
|
};
|
|
}
|
|
|
|
return parentUrl;
|
|
},
|
|
_getLocationPath: function () {
|
|
const navigationPathType = NoodlRuntime.instance.getProjectSettings()['navigationPathType'];
|
|
if (navigationPathType === undefined || navigationPathType === 'hash') {
|
|
// Use hash as path
|
|
let hash = location.hash;
|
|
if (hash) {
|
|
if (hash[0] === '#') hash = hash.substring(1);
|
|
if (hash[0] === '/') hash = hash.substring(1);
|
|
}
|
|
return decodeURI(hash);
|
|
} else {
|
|
// Use url as path
|
|
let path = location.pathname;
|
|
if (path) {
|
|
if (path[0] === '/') {
|
|
// @ts-expect-error missing Noodl typings
|
|
const baseUrl = Noodl.Env['BaseUrl'];
|
|
if (baseUrl) {
|
|
const pathnameLength = getBaseUrlLength(baseUrl);
|
|
path = path.substring(pathnameLength);
|
|
} else {
|
|
path = path.substring(1);
|
|
}
|
|
}
|
|
}
|
|
return decodeURI(path);
|
|
}
|
|
},
|
|
_getSearchParams: function () {
|
|
// Regex for replacing addition symbol with a space
|
|
const pl = /\+/g;
|
|
const search = /([^&=]+)=?([^&]*)/g;
|
|
const decode = function (s) {
|
|
return decodeURIComponent(s.replace(pl, ' '));
|
|
};
|
|
const query = location.search.substring(1);
|
|
|
|
let match: RegExpExecArray;
|
|
|
|
const urlParams = {};
|
|
while ((match = search.exec(query))) urlParams[decode(match[1])] = decode(match[2]);
|
|
|
|
return urlParams;
|
|
},
|
|
getNavigationRemainingPath() {
|
|
return this._internal.remainingNavigationPath;
|
|
},
|
|
matchPageFromUrl() {
|
|
// Attempt to find relative path from closest navigation parent
|
|
let parent = this.parent;
|
|
while (parent !== undefined && typeof parent.getNavigationRemainingPath !== 'function') {
|
|
parent = parent.getVisualParentNode();
|
|
}
|
|
|
|
let pathParts = undefined;
|
|
|
|
// Either use current browser location if we have no parent, or use remaining path
|
|
// from parent
|
|
if (parent === undefined) {
|
|
let urlPath = this._getLocationPath();
|
|
if (urlPath[0] === '/') urlPath = urlPath.substring(1);
|
|
pathParts = urlPath.split('/');
|
|
} else {
|
|
pathParts = parent.getNavigationRemainingPath();
|
|
}
|
|
if (pathParts === undefined) return;
|
|
|
|
const urlQuery = this._getSearchParams();
|
|
|
|
function _matchPathParts(path, pattern) {
|
|
const params = {};
|
|
for (let i = 0; i < pattern.length; i++) {
|
|
const _p = pattern[i];
|
|
if (_p[0] === '{' && _p[_p.length - 1] === '}') {
|
|
// This is a param, collect it
|
|
if (path[i] !== undefined) {
|
|
params[_p.substring(1, _p.length - 1)] = decodeURIComponent(path[i]);
|
|
}
|
|
} else if (path[i] === undefined || _p !== path[i]) return;
|
|
}
|
|
return {
|
|
params: params,
|
|
remainingPathParts: path.slice().splice(pattern.length) // Make copy
|
|
};
|
|
}
|
|
|
|
const pages = RouterHandler.instance.getPagesForRouter(this._internal.name);
|
|
if (pages === undefined || pages.length === 0) return;
|
|
|
|
let matchedPage,
|
|
bestMatchLength = 9999;
|
|
for (const pageInfo of pages) {
|
|
let pagePattern = pageInfo.path;
|
|
if (pagePattern === undefined) continue;
|
|
pagePattern = _trimUrlPart(pagePattern);
|
|
|
|
// Prepend this routers url path if there is one
|
|
if (this._internal.urlPath !== undefined)
|
|
pagePattern = _trimUrlPart(this._internal.urlPath) + '/' + pagePattern;
|
|
|
|
const pagePatternParts = pagePattern.split('/');
|
|
const match = _matchPathParts(pathParts, pagePatternParts);
|
|
|
|
const dist = Math.abs(pagePatternParts.length - pathParts.length);
|
|
if (match && bestMatchLength > dist) {
|
|
// This page is a match
|
|
matchedPage = { match, pageInfo };
|
|
bestMatchLength = dist;
|
|
}
|
|
}
|
|
|
|
if (matchedPage) {
|
|
this._internal.remainingNavigationPath = matchedPage.match.remainingPathParts;
|
|
return {
|
|
page: matchedPage.pageInfo,
|
|
params: matchedPage.match.params,
|
|
query: urlQuery
|
|
};
|
|
} else {
|
|
return {
|
|
page: undefined, // no matched page
|
|
params: {},
|
|
query: urlQuery
|
|
};
|
|
}
|
|
},
|
|
_getCompleteUrlToPage(page: ComponentPageInfo, pageParams: NavigateArgs['params']) {
|
|
const url = this.getNavigationAbsoluteURL(page, pageParams);
|
|
|
|
let urlPath, hashPath;
|
|
const navigationPathType = NoodlRuntime.instance.getProjectSettings()['navigationPathType'];
|
|
if (navigationPathType === undefined || navigationPathType === 'hash') {
|
|
hashPath = url.path;
|
|
} else {
|
|
urlPath = url.path;
|
|
}
|
|
|
|
const query = url.query.map((q) => q.name + '=' + q.value);
|
|
const compiledUrl =
|
|
(urlPath !== undefined ? urlPath : '') +
|
|
(query.length >= 1 ? '?' + query.join('&') : '') +
|
|
(hashPath !== undefined ? '#' + hashPath : '');
|
|
|
|
return compiledUrl;
|
|
},
|
|
_updateUrlWithTopPage() {
|
|
// Push the state to the browser url
|
|
if (window.history !== undefined) {
|
|
this._internal.remainingNavigationPath = undefined; // Reset remaining nav path
|
|
|
|
const url = this._getCompleteUrlToPage(this._internal.currentPage, this._internal.currentParams);
|
|
window.history.pushState({}, '', url);
|
|
}
|
|
},
|
|
navigate(args) {
|
|
this._internal.asyncQueue.enqueue(this.navigateAsync.bind(this, args));
|
|
},
|
|
async navigateAsync(args: NavigateArgs) {
|
|
if (args.target === undefined) return;
|
|
|
|
const newPage = RouterHandler.instance.getPageInfoForComponent(args.target);
|
|
if (!newPage) return; //TODO: send error to editor, "invalid page component name"
|
|
|
|
if (args.openInNewTab) {
|
|
const url = this._getCompleteUrlToPage(newPage, args.params);
|
|
window.open(url, '_blank');
|
|
args.hasNavigated && args.hasNavigated();
|
|
} else {
|
|
await this._navigateInCurrentWindow(newPage, args);
|
|
}
|
|
},
|
|
async _navigateInCurrentWindow(newPage: ComponentPageInfo, args: NavigateArgs) {
|
|
this.scrollToTop();
|
|
|
|
// Remove all current pages in the stack
|
|
const children = this.getChildren();
|
|
for (const i in children) {
|
|
const c = children[i];
|
|
this.removeChild(c);
|
|
this.nodeScope.deleteNode(c);
|
|
}
|
|
|
|
const group = this.createPageContainer();
|
|
|
|
// Create the page content
|
|
const content = await this.nodeScope.createNode(args.target, guid());
|
|
|
|
this._internal.currentPage = newPage;
|
|
this._internal.currentParams = args.params;
|
|
|
|
this.flagOutputDirty('currentPageTitle');
|
|
this.flagOutputDirty('currentPageComponent');
|
|
// @ts-expect-error Noodl is not defined
|
|
Noodl.SEO.setTitle(this._internal.currentPage.title);
|
|
|
|
const pageInputNodes = content.nodeScope.getNodesWithType('PageInputs');
|
|
if (pageInputNodes !== undefined && pageInputNodes.length > 0) {
|
|
pageInputNodes.forEach((node) => {
|
|
node._setPageParams(args.params);
|
|
});
|
|
}
|
|
|
|
group.addChild(content);
|
|
this.addChild(group);
|
|
|
|
this._updateUrlWithTopPage();
|
|
|
|
args.hasNavigated && args.hasNavigated();
|
|
RouterHandler.instance.onNavigated(this._internal.name, newPage);
|
|
},
|
|
registerInputIfNeeded: function (name) {
|
|
if (this.hasInput(name)) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
function shallowObjectsEqual(object1, object2) {
|
|
const keys1 = Object.keys(object1 || {});
|
|
const keys2 = Object.keys(object2 || {});
|
|
|
|
if (keys1.length !== keys2.length) {
|
|
return false;
|
|
}
|
|
|
|
return keys1.every((key) => object1[key] === object2[key]);
|
|
}
|
|
|
|
export default createNodeFromReactComponent(RouterNode);
|