@topconsultnpm/sdkui-react-beta 6.6.20 → 6.6.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/components/sidebar/TMSidebar.d.ts +4 -0
  2. package/lib/components/sidebar/TMSidebar.js +12 -9
  3. package/lib/components/sidebar/TMSidebarItem.d.ts +7 -0
  4. package/lib/components/sidebar/TMSidebarItem.js +14 -4
  5. package/package.json +1 -1
package/lib/components/sidebar/TMSidebar.d.ts CHANGED
@@ -12,6 +12,10 @@ interface ITMSidebar {
12
12
  /** Lista di TMSidebarItem che compongono il menù */
13
13
  items: JSX.Element[];
14
14
  height?: string;
15
+ width?: string;
16
+ top?: string;
17
+ left?: string;
18
+ borderRightRadius?: string;
15
19
  }
16
20
  declare const TMSidebar: React.FC<ITMSidebar>;
17
21
  export default TMSidebar;
package/lib/components/sidebar/TMSidebar.js CHANGED
@@ -1,14 +1,15 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import styled from 'styled-components';
3
3
  import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
4
+ import { ApplicationThemeColor } from './TMSidebarItem';
4
5
  const StyledTMSidebarContainer = styled.div `
5
- top: 50px;
6
- left: 0px;
7
- width: 50px;
8
- height: ${props => props.$height ?? ''} ;
9
- background: ${props => props.$appName === 'ORCHESTRATOR' ? '#135596 0% 0% no-repeat padding-box' : props.$appName === 'SURFER' ? '#0e7418 0% 0% no-repeat padding-box' : '#b51678 0% 0% no-repeat padding-box'};
6
+ top: ${props => props.$top ? props.$top : '53px'};
7
+ left: ${props => props.$left ? props.$left : '0px'};
8
+ width: ${props => props.$width ? props.$width : '50px'};
9
+ height: ${props => props.$height ? props.$height : 'calc(100% - 88px)'};
10
+ background: ${props => props.$appName === 'ORCHESTRATOR' ? `${ApplicationThemeColor.ORCHESTRATOR} 0% 0% no-repeat padding-box` : props.$appName === 'SURFER' ? `${ApplicationThemeColor.SURFER} 0% 0% no-repeat padding-box` : `${ApplicationThemeColor.DESIGNER} 0% 0% no-repeat padding-box`};
10
11
  box-shadow: 0px 3px 6px #00000029;
11
- border-radius: 0px 0px;
12
+ border-radius: 0;
12
13
  opacity: 1;
13
14
  display: flex;
14
15
  flex-direction: column;
@@ -16,9 +17,11 @@ const StyledTMSidebarContainer = styled.div `
16
17
  align-items: center;
17
18
  padding: 10px 0px 0px 0px;
18
19
  position: absolute;
20
+ border-top-right-radius: 10px;
21
+ border-bottom-right-radius: 10px;
19
22
  /* z-index: 20000001; */
20
23
  `;
21
- const TMSidebar = ({ items, height }) => {
22
- return (_jsx(_Fragment, { children: _jsxs(StyledTMSidebarContainer, { "$appName": SDK_Globals.appModule, "$height": height, children: [items.filter(item => item.props.type !== 'app'), _jsx("div", { style: { position: 'absolute', bottom: '10px', display: 'flex', flexDirection: 'column' }, children: items.filter(item => item.props.type === 'app') })] }) }));
24
+ const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
25
+ return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [items.filter(item => item.props.type !== 'app'), _jsx("div", { style: { position: 'absolute', bottom: '10px', display: 'flex', flexDirection: 'column' }, children: items.filter(item => item.props.type === 'app') })] }));
23
26
  };
24
27
  export default TMSidebar;
package/lib/components/sidebar/TMSidebarItem.d.ts CHANGED
@@ -1,12 +1,19 @@
1
1
  import React from 'react';
2
2
  import { AppRouteType } from './TMSidebar';
3
+ export declare enum ApplicationThemeColor {
4
+ SURFER = "#0e7418",
5
+ ORCHESTRATOR = "#135596",
6
+ DESIGNER = "#b51678"
7
+ }
3
8
  export interface ITMSidebarItem {
4
9
  name: string;
5
10
  path: string;
6
11
  type?: AppRouteType;
7
12
  isSelected: boolean;
8
13
  icon: any;
14
+ badgeNumber?: number;
9
15
  onClick?: (e: ITMSidebarItem) => void;
16
+ isAppIcon?: boolean;
10
17
  }
11
18
  declare const TMSidebarItem: React.FunctionComponent<ITMSidebarItem>;
12
19
  export default TMSidebarItem;
package/lib/components/sidebar/TMSidebarItem.js CHANGED
@@ -1,7 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import styled from 'styled-components';
3
- import { TMColors } from '../../utils/theme';
4
3
  import TMTooltip from '../base/TMTooltip';
4
+ import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
5
+ export var ApplicationThemeColor;
6
+ (function (ApplicationThemeColor) {
7
+ ApplicationThemeColor["SURFER"] = "#0e7418";
8
+ ApplicationThemeColor["ORCHESTRATOR"] = "#135596";
9
+ ApplicationThemeColor["DESIGNER"] = "#b51678";
10
+ })(ApplicationThemeColor || (ApplicationThemeColor = {}));
5
11
  const StyledTMSidebarItemContainer = styled.div `
6
12
  margin-bottom: 10px;
7
13
  background-color: transparent;
@@ -9,7 +15,9 @@ const StyledTMSidebarItemContainer = styled.div `
9
15
  transition: all 200ms ease;
10
16
  user-select: none;
11
17
  cursor: pointer;
12
- color: ${(props) => props.$isSelected ? TMColors.secondary : '#fff'};
18
+ color: ${(props) => props.$isSelected ? props.$app === AppModules.SURFER ? ApplicationThemeColor.SURFER : props.$app === AppModules.ORCHESTRATOR ? ApplicationThemeColor.ORCHESTRATOR : ApplicationThemeColor.DESIGNER : '#fff'};
19
+ background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
20
+ border-radius: 3px;
13
21
  width: 32px;
14
22
  height: 32px;
15
23
 
@@ -18,10 +26,12 @@ const StyledTMSidebarItemContainer = styled.div `
18
26
  }
19
27
 
20
28
  &:hover {
21
- color: ${TMColors.secondary};
29
+ background-color: ${props => !props.$isApp && 'white'};
30
+ color: ${props => !props.$isApp && props.$app === AppModules.SURFER ? ApplicationThemeColor.SURFER : props.$app === AppModules.ORCHESTRATOR ? ApplicationThemeColor.ORCHESTRATOR : ApplicationThemeColor.DESIGNER};
22
31
  }
23
32
  `;
24
33
  const TMSidebarItem = (props) => {
25
- return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.name, children: _jsx(StyledTMSidebarItemContainer, { "$isSelected": props.isSelected, children: _jsxs("div", { onClick: () => props.onClick?.(props), children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }) }) }));
34
+ let app = SDK_Globals.appModule;
35
+ return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props), style: { position: 'relative' }, "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && _jsx("div", { style: { width: '22px', height: '22px', backgroundColor: '#f09c0a', position: 'absolute', borderRadius: '22px', top: -6, right: -6, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: props.badgeNumber })] }) }));
26
36
  };
27
37
  export default TMSidebarItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react-beta",
3
- "version": "6.6.20",
3
+ "version": "6.6.21",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",