mirror of
https://github.com/finos/SymphonyElectron.git
synced 2024-11-24 09:50:51 -06:00
SDA-4365 (Make tooltip dynamic) (#2006)
* SDA-4365 - Make tooltip dynamic * SDA-4365 - Remove win32-api as it is no longer required
This commit is contained in:
Kiran Niranjan
GitHub
parent
7edbf4bf52
commit
d451b4f7ff
265
package-lock.json
generated
265
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "symphony",
|
||||
"version": "23.11.0",
|
||||
"version": "24.2.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "symphony",
|
||||
"version": "23.11.0",
|
||||
"version": "24.2.0",
|
||||
"hasInstallScript": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
@ -25,8 +25,7 @@
|
||||
"rimraf": "^3.0.2",
|
||||
"save-svg-as-png": "^1.4.17",
|
||||
"shell-path": "^3.0.0",
|
||||
"systeminformation": "5.21.7",
|
||||
"win32-api": "^20.1.0"
|
||||
"systeminformation": "5.21.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cheerio": "^0.22.22",
|
||||
@ -7841,23 +7840,6 @@
|
||||
"pend": "~1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ffi-napi": {
|
||||
"version": "4.0.3",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"debug": "^4.1.1",
|
||||
"get-uv-event-loop-napi-h": "^1.0.5",
|
||||
"node-addon-api": "^3.0.0",
|
||||
"node-gyp-build": "^4.2.1",
|
||||
"ref-napi": "^2.0.1 || ^3.0.2",
|
||||
"ref-struct-di": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/file-type": {
|
||||
"version": "9.0.0",
|
||||
"dev": true,
|
||||
@ -8384,19 +8366,6 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/get-symbol-from-current-process-h": {
|
||||
"version": "1.0.2",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/get-uv-event-loop-napi-h": {
|
||||
"version": "1.0.6",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"get-symbol-from-current-process-h": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/get-value": {
|
||||
"version": "2.0.6",
|
||||
"dev": true,
|
||||
@ -13132,11 +13101,6 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/node-addon-api": {
|
||||
"version": "3.2.1",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/node-api-version": {
|
||||
"version": "0.1.4",
|
||||
"dev": true,
|
||||
@ -13183,16 +13147,6 @@
|
||||
"node": "^12.13 || ^14.13 || >=16"
|
||||
}
|
||||
},
|
||||
"node_modules/node-gyp-build": {
|
||||
"version": "4.2.3",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"node-gyp-build": "bin.js",
|
||||
"node-gyp-build-optional": "optional.js",
|
||||
"node-gyp-build-test": "build-test.js"
|
||||
}
|
||||
},
|
||||
"node_modules/node-gyp/node_modules/semver": {
|
||||
"version": "7.5.1",
|
||||
"dev": true,
|
||||
@ -14995,63 +14949,6 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/ref-napi": {
|
||||
"version": "3.0.3",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"debug": "^4.1.1",
|
||||
"get-symbol-from-current-process-h": "^1.0.2",
|
||||
"node-addon-api": "^3.0.0",
|
||||
"node-gyp-build": "^4.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ref-struct-di": {
|
||||
"version": "1.1.1",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"debug": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ref-struct-di/node_modules/debug": {
|
||||
"version": "3.2.7",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/ref-struct-di/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/ref-union-di": {
|
||||
"version": "1.0.1",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"debug": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ref-union-di/node_modules/debug": {
|
||||
"version": "3.2.7",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/ref-union-di/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/reflect.ownkeys": {
|
||||
"version": "0.2.0",
|
||||
"dev": true,
|
||||
@ -18146,59 +18043,6 @@
|
||||
"string-width": "^1.0.2 || 2 || 3 || 4"
|
||||
}
|
||||
},
|
||||
"node_modules/win32-api": {
|
||||
"version": "20.4.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"win32-def": "^20.4.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.15.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"ffi-napi": "^4.0.3",
|
||||
"ref-napi": "^3.0.3",
|
||||
"ref-struct-di": "^1.1.1",
|
||||
"ref-union-di": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/win32-def": {
|
||||
"version": "20.4.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@waiting/shared-types": "^20.11.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.15.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"ref-napi": "^3.0.3",
|
||||
"ref-struct-di": "^1.1.1",
|
||||
"ref-union-di": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/win32-def/node_modules/@waiting/shared-types": {
|
||||
"version": "20.13.0",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.16.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": ">=4.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/win32-def/node_modules/typescript": {
|
||||
"version": "5.1.3",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/winreg": {
|
||||
"version": "1.2.4",
|
||||
"license": "BSD-2-Clause",
|
||||
@ -23933,18 +23777,6 @@
|
||||
"pend": "~1.2.0"
|
||||
}
|
||||
},
|
||||
"ffi-napi": {
|
||||
"version": "4.0.3",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"debug": "^4.1.1",
|
||||
"get-uv-event-loop-napi-h": "^1.0.5",
|
||||
"node-addon-api": "^3.0.0",
|
||||
"node-gyp-build": "^4.2.1",
|
||||
"ref-napi": "^2.0.1 || ^3.0.2",
|
||||
"ref-struct-di": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"file-type": {
|
||||
"version": "9.0.0",
|
||||
"dev": true
|
||||
@ -24303,17 +24135,6 @@
|
||||
"get-stream": {
|
||||
"version": "6.0.1"
|
||||
},
|
||||
"get-symbol-from-current-process-h": {
|
||||
"version": "1.0.2",
|
||||
"peer": true
|
||||
},
|
||||
"get-uv-event-loop-napi-h": {
|
||||
"version": "1.0.6",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"get-symbol-from-current-process-h": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"get-value": {
|
||||
"version": "2.0.6",
|
||||
"dev": true
|
||||
@ -27576,10 +27397,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node-addon-api": {
|
||||
"version": "3.2.1",
|
||||
"peer": true
|
||||
},
|
||||
"node-api-version": {
|
||||
"version": "0.1.4",
|
||||
"dev": true,
|
||||
@ -27629,10 +27446,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node-gyp-build": {
|
||||
"version": "4.2.3",
|
||||
"peer": true
|
||||
},
|
||||
"node-int64": {
|
||||
"version": "0.4.0",
|
||||
"dev": true
|
||||
@ -28821,56 +28634,6 @@
|
||||
"resolve": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"ref-napi": {
|
||||
"version": "3.0.3",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"debug": "^4.1.1",
|
||||
"get-symbol-from-current-process-h": "^1.0.2",
|
||||
"node-addon-api": "^3.0.0",
|
||||
"node-gyp-build": "^4.2.1"
|
||||
}
|
||||
},
|
||||
"ref-struct-di": {
|
||||
"version": "1.1.1",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"debug": "^3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.2.7",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.3",
|
||||
"peer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"ref-union-di": {
|
||||
"version": "1.0.1",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"debug": "^3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.2.7",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.3",
|
||||
"peer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"reflect.ownkeys": {
|
||||
"version": "0.2.0",
|
||||
"dev": true
|
||||
@ -31045,28 +30808,6 @@
|
||||
"string-width": "^1.0.2 || 2 || 3 || 4"
|
||||
}
|
||||
},
|
||||
"win32-api": {
|
||||
"version": "20.4.1",
|
||||
"requires": {
|
||||
"win32-def": "^20.4.1"
|
||||
}
|
||||
},
|
||||
"win32-def": {
|
||||
"version": "20.4.1",
|
||||
"requires": {
|
||||
"@waiting/shared-types": "^20.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@waiting/shared-types": {
|
||||
"version": "20.13.0",
|
||||
"requires": {}
|
||||
},
|
||||
"typescript": {
|
||||
"version": "5.1.3",
|
||||
"peer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"winreg": {
|
||||
"version": "1.2.4",
|
||||
"optional": true
|
||||
|
||||
@ -227,8 +227,7 @@
|
||||
"rimraf": "^3.0.2",
|
||||
"save-svg-as-png": "^1.4.17",
|
||||
"shell-path": "^3.0.0",
|
||||
"systeminformation": "5.21.7",
|
||||
"win32-api": "^20.1.0"
|
||||
"systeminformation": "5.21.7"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@symphony/symphony-c9-shell": "3.26.0-0.98.2.165",
|
||||
|
||||
@ -33,6 +33,8 @@ interface ICallNotificationState {
|
||||
flash: boolean;
|
||||
isExternal: boolean;
|
||||
theme: Theme;
|
||||
isPrimaryTextOverflowing: boolean;
|
||||
isSecondaryTextOverflowing: boolean;
|
||||
}
|
||||
|
||||
type mouseEventButton =
|
||||
@ -49,9 +51,13 @@ export default class CallNotification extends React.Component<
|
||||
onReject: (data) => (event: mouseEventButton) => this.reject(event, data),
|
||||
};
|
||||
private readonly defaultState: ICallNotificationState;
|
||||
private readonly primaryTooltipRef: React.RefObject<HTMLDivElement>;
|
||||
private readonly secondaryTooltipRef: React.RefObject<HTMLDivElement>;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.primaryTooltipRef = React.createRef();
|
||||
this.secondaryTooltipRef = React.createRef();
|
||||
this.defaultState = {
|
||||
title: 'Incoming call',
|
||||
primaryText: 'unknown',
|
||||
@ -68,6 +74,8 @@ export default class CallNotification extends React.Component<
|
||||
flash: false,
|
||||
isExternal: false,
|
||||
theme: '',
|
||||
isPrimaryTextOverflowing: false,
|
||||
isSecondaryTextOverflowing: false,
|
||||
};
|
||||
this.state = { ...this.defaultState };
|
||||
this.updateState = this.updateState.bind(this);
|
||||
@ -108,6 +116,8 @@ export default class CallNotification extends React.Component<
|
||||
theme,
|
||||
flash,
|
||||
icon,
|
||||
isPrimaryTextOverflowing,
|
||||
isSecondaryTextOverflowing,
|
||||
} = this.state;
|
||||
|
||||
let themeClassName;
|
||||
@ -164,12 +174,15 @@ export default class CallNotification extends React.Component<
|
||||
<div
|
||||
data-testid='CALL_NOTIFICATION_NAME'
|
||||
className={`caller-name ${themeClassName} tooltip-trigger`}
|
||||
ref={this.primaryTooltipRef}
|
||||
>
|
||||
{primaryText}
|
||||
</div>
|
||||
<div className='tooltip-content tooltip-primary'>
|
||||
{primaryText}
|
||||
</div>
|
||||
{isPrimaryTextOverflowing && (
|
||||
<div className='tooltip-content tooltip-primary'>
|
||||
{primaryText}
|
||||
</div>
|
||||
)}
|
||||
{this.renderExtBadge(isExternal)}
|
||||
</div>
|
||||
</div>
|
||||
@ -178,12 +191,15 @@ export default class CallNotification extends React.Component<
|
||||
<div className='caller-details'>
|
||||
<div
|
||||
className={`caller-role ${themeClassName} tooltip-trigger`}
|
||||
ref={this.secondaryTooltipRef}
|
||||
>
|
||||
{secondaryText}
|
||||
</div>
|
||||
<div className='tooltip-content tooltip-secondary'>
|
||||
{secondaryText}
|
||||
</div>
|
||||
{isSecondaryTextOverflowing && (
|
||||
<div className='tooltip-content tooltip-secondary'>
|
||||
{secondaryText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
@ -247,6 +263,29 @@ export default class CallNotification extends React.Component<
|
||||
ipcRenderer.send('call-notification-on-reject', id);
|
||||
};
|
||||
|
||||
private checkTextOverflow = () => {
|
||||
const primaryTooltipElement = this.primaryTooltipRef.current;
|
||||
const secondaryTooltipElement = this.secondaryTooltipRef.current;
|
||||
// Check if the primary text content overflows the element
|
||||
if (
|
||||
primaryTooltipElement &&
|
||||
primaryTooltipElement.scrollWidth > primaryTooltipElement.clientWidth
|
||||
) {
|
||||
this.setState({ isPrimaryTextOverflowing: true });
|
||||
} else {
|
||||
this.setState({ isPrimaryTextOverflowing: false });
|
||||
}
|
||||
// Check if the secondary text content overflows the element
|
||||
if (
|
||||
secondaryTooltipElement &&
|
||||
secondaryTooltipElement.scrollWidth > secondaryTooltipElement.clientWidth
|
||||
) {
|
||||
this.setState({ isSecondaryTextOverflowing: true });
|
||||
} else {
|
||||
this.setState({ isSecondaryTextOverflowing: false });
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the component state
|
||||
*
|
||||
@ -270,6 +309,7 @@ export default class CallNotification extends React.Component<
|
||||
? data.theme
|
||||
: Themes.LIGHT;
|
||||
this.setState(data as ICallNotificationState);
|
||||
this.checkTextOverflow();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user