@topconsultnpm/sdkui-react 6.20.0-dev1.37 → 6.20.0-dev1.38

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/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js +6 -6
  2. package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts +3 -6
  3. package/lib/components/NewComponents/FloatingMenuBar/styles.js +60 -21
  4. package/lib/components/features/search/TMSignSettingsForm.js +1 -1
  5. package/package.json +1 -1
package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js CHANGED
@@ -4,7 +4,7 @@ import { ContextMenu } from '../ContextMenu';
4
4
  import ShowAlert from '../../base/TMAlert';
5
5
  import TMTooltip from '../../base/TMTooltip';
6
6
  import * as S from './styles';
7
- import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
7
+ import { IconAdd, IconApply, IconMenuVertical, IconPencil, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
8
8
  const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
9
9
  const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
10
10
  const getDefaultConfig = () => ({
@@ -248,6 +248,9 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
248
248
  }
249
249
  setState(s => ({ ...s, isDragging: true }));
250
250
  };
251
+ const handleGripDoubleClick = () => {
252
+ toggleOrientation();
253
+ };
251
254
  const handleMouseMove = useCallback((e) => {
252
255
  if (!state.isDragging || !containerRef.current || !floatingRef.current)
253
256
  return;
@@ -438,7 +441,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
438
441
  setState(s => ({ ...s, draggedItemIndex: null }));
439
442
  setDragOverIndex(null);
440
443
  };
441
- return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
444
+ return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
442
445
  // Get current state (disabled and onClick) from contextMenuItems
443
446
  const currentState = getCurrentItemState(item.id);
444
447
  const isDisabled = currentState.disabled || false;
@@ -456,9 +459,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
456
459
  currentOnClick();
457
460
  }
458
461
  }, disabled: isDisabled, children: item.icon }) })), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
459
- }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: " + " }) }) })), _jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [state.isConfigMode ? (_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, {}) }) })) : (_jsx(TMTooltip, { content: state.orientation === 'horizontal' ? 'Verticale' : 'Orizzontale', position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }) })), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ?
460
- _jsx(TMTooltip, { content: SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(IconApply, { fontSize: 18 }) })
461
- :
462
- _jsx(TMTooltip, { content: SDKUI_Localizator.Configure, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(IconPencil, { fontSize: 18 }) }) })] })] })] }));
462
+ }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), _jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [state.isConfigMode && (_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) })), state.isConfigMode ? (_jsx(TMTooltip, { content: state.items.length === 0 ? 'Devi aggiungere almeno un item' : SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0, children: _jsx(IconApply, { fontSize: 20 }) }) })) : (_jsx(TMTooltip, { content: SDKUI_Localizator.Configure, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ConfigButton, { onClick: toggleConfigMode, children: _jsx(IconPencil, {}) }) }))] })] })] }));
463
463
  };
464
464
  export default TMFloatingMenuBar;
package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts CHANGED
@@ -27,9 +27,8 @@ export declare const Separator: import("styled-components/dist/types").IStyledCo
27
27
  export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
28
28
  $isActive?: boolean;
29
29
  }>> & string;
30
- export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
31
- $isActive?: boolean;
32
- }>> & string;
30
+ export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
31
+ export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
33
32
  export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
34
33
  $isActive?: boolean;
35
34
  }, "ref"> & {
@@ -37,9 +36,7 @@ export declare const ContextMenuButton: import("styled-components/dist/types").I
37
36
  }, never>> & string;
38
37
  export declare const AddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
39
38
  export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
40
- export declare const OrientationToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
41
- $orientation: "horizontal" | "vertical";
42
- }>> & string;
39
+ export declare const UndoButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
43
40
  export declare const DraggableItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
44
41
  $isDragging: boolean;
45
42
  $isDragOver: boolean;
package/lib/components/NewComponents/FloatingMenuBar/styles.js CHANGED
@@ -140,29 +140,68 @@ export const ConfigButton = styled.button `
140
140
  display: flex;
141
141
  align-items: center;
142
142
  justify-content: center;
143
- width: 20px;
144
- height: 20px;
143
+ width: 21px;
144
+ height: 21px;
145
145
  background: transparent;
146
146
  border: none;
147
147
  border-radius: 4px;
148
- color: ${props => props.$isActive ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.5)'};
148
+ color: rgba(255, 255, 255, 0.5);
149
149
  font-size: 10px;
150
150
  cursor: pointer;
151
151
  transition: all 0.2s ease;
152
- padding: 0px;
152
+ padding: 4px;
153
153
 
154
- &:hover {
154
+ &:hover:not(:disabled) {
155
155
  background: rgba(255, 255, 255, 0.1);
156
156
  color: rgba(255, 255, 255, 0.8);
157
157
  }
158
158
 
159
- &:active {
159
+ &:active:not(:disabled) {
160
160
  transform: scale(0.9);
161
161
  }
162
162
 
163
+ &:disabled {
164
+ opacity: 0.3;
165
+ cursor: not-allowed;
166
+ }
167
+
163
168
  svg {
164
- width: 14px;
165
- height: 14px;
169
+ width: 16px;
170
+ height: 16px;
171
+ }
172
+ `;
173
+ export const ApplyButton = styled.button `
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ width: 24px;
178
+ height: 24px;
179
+ background: transparent;
180
+ border: none;
181
+ border-radius: 4px;
182
+ color: rgba(34, 197, 94, 1);
183
+ font-size: 10px;
184
+ cursor: pointer;
185
+ transition: all 0.2s ease;
186
+ padding: 3px;
187
+
188
+ &:hover:not(:disabled) {
189
+ background: rgba(255, 255, 255, 0.1);
190
+ color: rgba(34, 197, 94, 1);
191
+ }
192
+
193
+ &:active:not(:disabled) {
194
+ transform: scale(0.9);
195
+ }
196
+
197
+ &:disabled {
198
+ opacity: 0.3;
199
+ cursor: not-allowed;
200
+ }
201
+
202
+ svg {
203
+ width: 20px;
204
+ height: 20px;
166
205
  }
167
206
  `;
168
207
  export const ContextMenuButton = styled(MenuButton) `
@@ -182,16 +221,17 @@ export const AddButton = styled.button `
182
221
  color: white;
183
222
  font-size: 20px;
184
223
  font-weight: bold;
224
+ line-height: 0;
185
225
  cursor: pointer;
186
226
  transition: all 0.2s ease;
187
227
  position: relative;
188
228
  margin-right: 6px;
189
229
  margin-left: 8px;
230
+ padding: 0;
190
231
 
191
232
  &:hover {
192
233
  background: rgba(255, 255, 255, 0.25);
193
234
  border-color: rgba(255, 255, 255, 0.6);
194
- transform: scale(1.05);
195
235
  }
196
236
 
197
237
  &:active {
@@ -210,7 +250,7 @@ export const RemoveButton = styled.button `
210
250
  color: white;
211
251
  font-size: 14px;
212
252
  font-weight: bold;
213
- line-height: 1;
253
+ line-height: 0;
214
254
  cursor: pointer;
215
255
  display: flex;
216
256
  align-items: center;
@@ -227,29 +267,28 @@ export const RemoveButton = styled.button `
227
267
  background: #b91c1c;
228
268
  }
229
269
  `;
230
- export const OrientationToggle = styled.button `
270
+ export const UndoButton = styled.button `
231
271
  display: flex;
232
272
  align-items: center;
233
273
  justify-content: center;
234
- width: 20px;
235
- height: 20px;
274
+ width: 24px;
275
+ height: 24px;
236
276
  background: transparent;
237
277
  border: none;
238
278
  border-radius: 4px;
239
- color: rgba(255, 255, 255, 0.5);
279
+ color: rgba(249, 115, 22, 1);
240
280
  font-size: 10px;
241
281
  cursor: pointer;
242
282
  transition: all 0.2s ease;
243
283
  padding: 2px;
244
- transform: ${props => props.$orientation === 'horizontal' ? 'rotate(90deg)' : 'rotate(0deg)'};
245
284
 
246
285
  &:hover:not(:disabled) {
247
286
  background: rgba(255, 255, 255, 0.1);
248
- color: rgba(255, 255, 255, 0.8);
287
+ color: rgba(249, 115, 22, 1);
249
288
  }
250
289
 
251
290
  &:active:not(:disabled) {
252
- transform: ${props => props.$orientation === 'horizontal' ? 'rotate(90deg) scale(0.9)' : 'scale(0.9)'};
291
+ transform: scale(0.9);
253
292
  }
254
293
 
255
294
  &:disabled {
@@ -258,8 +297,8 @@ export const OrientationToggle = styled.button `
258
297
  }
259
298
 
260
299
  svg {
261
- width: 14px;
262
- height: 14px;
300
+ width: 16px;
301
+ height: 16px;
263
302
  }
264
303
  `;
265
304
  export const DraggableItem = styled.div `
@@ -301,7 +340,7 @@ export const ContextMenuWrapper = styled.div `
301
340
  `;
302
341
  export const ButtonGroup = styled.div `
303
342
  display: flex;
304
- flex-direction: ${props => props.$orientation === 'horizontal' ? 'column' : 'row'};
343
+ flex-direction: row;
305
344
  align-items: center;
306
- gap: ${props => props.$orientation === 'horizontal' ? '0px' : '4px'};
345
+ gap: 0;
307
346
  `;
package/lib/components/features/search/TMSignSettingsForm.js CHANGED
@@ -333,7 +333,7 @@ const TMSignSettingsForm = (props) => {
333
333
  fontWeight: 'bold',
334
334
  color: isModified ? MODIFIED_COLOR : '#777',
335
335
  transition: 'opacity 0.2s ease'
336
- }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: "\u00D7" })] }));
336
+ }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: _jsx("i", { className: "dx-icon-close" }) })] }));
337
337
  };
338
338
  const renderMultiSignerTag = (tagData) => {
339
339
  const handleRemoveTag = () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react",
3
- "version": "6.20.0-dev1.37",
3
+ "version": "6.20.0-dev1.38",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",