From 9e23967f4bedf29140ff0ec1cce605a62eb7581c Mon Sep 17 00:00:00 2001 From: Max Hauser Date: Thu, 30 Nov 2023 09:27:22 +0100 Subject: [PATCH] implemented simple sort mechanic for navigation (#222) * implemented simple sort mechanic for navigation - closes #15 * rm logs --- README.md | 1 + src/src/Attributes/View.jsx | 3 +++ src/src/Vis/utils.tsx | 10 ++++++++-- src/src/Vis/visNavigation.jsx | 5 ++++- src/src/i18n/de.json | 13 +++++++------ src/src/i18n/en.json | 13 +++++++------ src/src/i18n/es.json | 13 +++++++------ src/src/i18n/fr.json | 13 +++++++------ src/src/i18n/it.json | 13 +++++++------ src/src/i18n/nl.json | 13 +++++++------ src/src/i18n/pl.json | 13 +++++++------ src/src/i18n/pt.json | 13 +++++++------ src/src/i18n/ru.json | 13 +++++++------ src/src/i18n/uk.json | 13 +++++++------ src/src/i18n/zh-cn.json | 13 +++++++------ 15 files changed, 93 insertions(+), 69 deletions(-) diff --git a/README.md b/README.md index fb3021a04..2b8cffeaf 100644 --- a/README.md +++ b/README.md @@ -231,6 +231,7 @@ E.g., if it was used in a menu and the menu is red, the circle would be red. ## Changelog ### **WORK IN PROGRESS** * (bluefox) Added the possibility to limit hard the view size +* (foxriver76) implemented simple sort mechanic for navigation ### 2.9.2 (2023-11-29) * (foxriver76) fixed reactivity in custom components diff --git a/src/src/Attributes/View.jsx b/src/src/Attributes/View.jsx index 6a762812d..5c669a98c 100644 --- a/src/src/Attributes/View.jsx +++ b/src/src/Attributes/View.jsx @@ -576,6 +576,9 @@ const View = props => { { type: 'text', name: 'Title', field: 'navigationTitle', notStyle: true, hidden: '!data.navigation', }, + { + type: 'number', name: 'Order', field: 'navigationOrder', notStyle: true, hidden: '!data.navigation', + }, { type: 'icon64', name: 'Icon', field: 'navigationIcon', notStyle: true, hidden: '!data.navigation || data.navigationImage', }, diff --git a/src/src/Vis/utils.tsx b/src/src/Vis/utils.tsx index 396306365..13a64d583 100644 --- a/src/src/Vis/utils.tsx +++ b/src/src/Vis/utils.tsx @@ -17,10 +17,16 @@ export function calculateOverflow(style: CSSProperties): void { } } -export function isVarFinite(numberOrString: any): boolean { +/** + * Check, that given number is not Infinity or NaN + * + * @param numberOrString number or string to check + */ +export function isVarFinite(numberOrString: number | string): boolean { // the difference between Number.isFinite and window.isFinite is that window.isFinite tries to convert the parameter to a number // and Number.isFinite does not and just check against non NaN and non Infinity + const num = typeof numberOrString === 'string' ? parseFloat(numberOrString) : numberOrString; // eslint-disable-next-line no-restricted-properties - return window.isFinite(numberOrString); + return window.isFinite(num); } diff --git a/src/src/Vis/visNavigation.jsx b/src/src/Vis/visNavigation.jsx index 6147e9be3..ceb604fc4 100644 --- a/src/src/Vis/visNavigation.jsx +++ b/src/src/Vis/visNavigation.jsx @@ -219,17 +219,20 @@ class VisNavigation extends React.Component { color: viewSettings.navigationColor, icon: viewSettings.navigationIcon || viewSettings.navigationImage, noText: viewSettings.navigationOnlyIcon, + order: parseInt(viewSettings.navigationOrder ?? '0'), view, }; items.push(item); - if (item.icon && item.icon.startsWith('_PRJ_NAME/')) { + if (item.icon?.startsWith('_PRJ_NAME/')) { item.icon = `../${this.props.context.adapterName}.${this.props.context.instance}/${this.props.context.projectName}${item.icon.substring(9)}`; // "_PRJ_NAME".length = 9 } } }); + items.sort((prevItem, nextItem) => (prevItem.order === nextItem.order ? 0 : prevItem.order < nextItem.order ? -1 : 1)); + if (settings.navigationOrientation === 'horizontal') { return