@topconsultnpm/sdkui-react-beta 6.14.6 → 6.14.7

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 (4) hide show
  1. package/lib/components/base/TMButton.d.ts +1 -1
  2. package/lib/components/base/TMButton.js +10 -44
  3. package/lib/components/features/search/TMSearchQueryPanel.js +37 -12
  4. package/package.json +1 -1
package/lib/components/base/TMButton.d.ts CHANGED
@@ -17,5 +17,5 @@ export interface ITMButton extends ITMEditorBase {
17
17
  showTooltip?: boolean;
18
18
  onClick?: VoidFunction;
19
19
  }
20
- declare const TMButton: React.FunctionComponent<ITMButton>;
20
+ declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
21
21
  export default TMButton;
package/lib/components/base/TMButton.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import React, { useState } from 'react';
2
+ import React, { useState, forwardRef } from 'react';
3
3
  import styled from 'styled-components';
4
4
  import { getColor } from '../../helper';
5
5
  import { FontSize, TMColors } from '../../utils/theme';
@@ -106,7 +106,7 @@ const StyledButtonTooltipItem = styled.div `
106
106
  color: ${props => props.$color ? props.$color : "primary"};
107
107
  font-size: ${props => props.fontSize || FontSize.defaultFontSize};
108
108
  `;
109
- const StyledAdvancedButton = styled.div `
109
+ const StyledAdvancedButton = styled.button `
110
110
  display: flex;
111
111
  align-items: center;
112
112
  justify-content: flex-end;
@@ -144,58 +144,24 @@ const StyledAdvancedButtonText = styled.div `
144
144
  border-bottom-right-radius: 10px;
145
145
  padding: 5px;
146
146
  `;
147
- const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } }) => {
147
+ const TMButton = forwardRef((props, ref) => {
148
+ const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } } = props;
148
149
  const [isHovered, setIsHovered] = useState(false);
149
- // const [random, setRandom] = useState(0.0);
150
- // const [key, setKey] = useState("");
151
- // let accBtns = keyGesture?.replaceAll(' ', '').split('+')
152
- // const registerKeyPress = useCallback((e: KeyboardEvent) => {
153
- // setRandom(Math.random());
154
- // if (accBtns && accBtns?.length > 1) {
155
- // if (accBtns[0].toLowerCase() === 'alt') {
156
- // if (e.altKey) {
157
- // e.preventDefault()
158
- // setKey(e.key);
159
- // }
160
- // }
161
- // if (accBtns[0].toLowerCase() === 'ctrl') {
162
- // if (e.ctrlKey) {
163
- // e.preventDefault()
164
- // setKey(e.key);
165
- // }
166
- // }
167
- // if (accBtns[0].toLowerCase() === 'shift') {
168
- // if (e.shiftKey) {
169
- // e.preventDefault()
170
- // setKey(e.key);
171
- // }
172
- // }
173
- // }
174
- // }, []);
175
- // useEffect(() => {
176
- // if (accBtns && key.toLowerCase() === accBtns[1]) { !disabled && onClick && onClick(); setKey('') }
177
- // }, [random]);
178
- // useEffect(() => {
179
- // if (keyGesture) {
180
- // document.addEventListener("keydown", registerKeyPress);
181
- // }
182
- // return () => { document.removeEventListener("keydown", registerKeyPress) }
183
- // }, [registerKeyPress]);
184
150
  const renderedButton = () => {
185
151
  if (btnStyle === 'normal') {
186
- return (_jsx(StyledNormalButton, { width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
152
+ return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
187
153
  }
188
154
  else if (btnStyle === 'toolbar') {
189
- return (_jsx(StyledToolbarButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: icon }));
155
+ return (_jsx(StyledToolbarButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: icon }));
190
156
  }
191
157
  else if (btnStyle === 'icon') {
192
- return (_jsx(StyledIconButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, children: icon }));
158
+ return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, children: icon }));
193
159
  }
194
160
  else if (btnStyle === 'advanced') {
195
- return (_jsxs(StyledAdvancedButton, { "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
161
+ return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
196
162
  }
197
163
  else {
198
- return (_jsx(StyledTextButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
164
+ return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
199
165
  }
200
166
  };
201
167
  const renderTooltip = () => {
@@ -204,5 +170,5 @@ const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', advancedColo
204
170
  _jsxs(StyledButtonTooltipHeader, { "$description": description, children: [btnStyle !== 'icon' && _jsx("div", { children: icon ? React.cloneElement(icon, { color: '#454545' }) : '' }), _jsx(StyledButtonTooltipItem, { "$color": color, children: caption })] }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
205
171
  };
206
172
  return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
207
- };
173
+ });
208
174
  export default TMButton;
package/lib/components/features/search/TMSearchQueryPanel.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useEffect, useRef, useState } from 'react';
2
+ import { useCallback, useEffect, useRef, useState } from 'react';
3
3
  import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts-beta';
4
4
  import styled from 'styled-components';
5
5
  import TMSearchQueryEditor from './TMSearchQueryEditor';
@@ -26,6 +26,7 @@ import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
26
26
  const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack, onClosePanel, onMaximizePanel, onBackToResult }) => {
27
27
  const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
28
28
  const [qd, setQd] = useState();
29
+ const [shouldSearch, setShouldSearch] = useState(false); // Nuovo stato per attivare la ricerca
29
30
  const [lastQdParams, setLastQdParams] = useState([]);
30
31
  const [dcmtTypesList, setDcmtTypesList] = useState([]);
31
32
  const [showSqdForm, setShowSqdForm] = useState(false);
@@ -38,12 +39,24 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
38
39
  const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
39
40
  const [focusedTidMid, setFocusedTidMid] = useState();
40
41
  const deviceType = useDeviceType();
42
+ const isMobile = deviceType === DeviceType.MOBILE;
41
43
  let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
44
+ const panelRef = useRef(null);
42
45
  useEffect(() => {
43
46
  if (!SQD)
44
47
  return;
45
48
  setDataAsync(SQD);
46
49
  }, [SQD]);
50
+ // Eseguire la ricerca quando shouldSearch è true e qd è definito
51
+ useEffect(() => {
52
+ if (shouldSearch && qd) {
53
+ const executeSearch = async () => {
54
+ await searchAsync(qd, showAdvancedSearch);
55
+ setShouldSearch(false); // Resetta il trigger dopo la ricerca
56
+ };
57
+ executeSearch();
58
+ }
59
+ }, [shouldSearch, qd, showAdvancedSearch]);
47
60
  useEffect(() => { onFocusedMetadataChanged?.(focusedTidMid); }, [focusedTidMid]);
48
61
  const setDataAsync = async (sqd) => {
49
62
  let newSqd = (sqd?.id == 1) ? sqd : await SavedQueryCacheService.GetAsync(sqd?.id);
@@ -101,17 +114,31 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
101
114
  }
102
115
  }
103
116
  };
104
- const panelRef = useRef(null);
117
+ const handleSearchButtonClick = useCallback(async () => {
118
+ // Propagazione blur
119
+ if (document.activeElement instanceof HTMLElement) {
120
+ document.activeElement.blur();
121
+ }
122
+ // Attiva il flag di ricerca anche per il click del bottone
123
+ setShouldSearch(true);
124
+ }, []);
125
+ const handleQdChanged = useCallback((newQd) => {
126
+ if (!deepCompare(qd, newQd)) {
127
+ setQd(newQd);
128
+ }
129
+ }, []);
105
130
  useEffect(() => {
106
- if (!qd)
107
- return;
108
- const handleKeyDown = async (e) => {
109
- // Esegui solo se il focus è dentro il pannello
131
+ const handleKeyDown = (e) => {
110
132
  if (panelRef.current &&
111
133
  panelRef.current.contains(document.activeElement)) {
112
134
  if (e.key === 'Enter') {
113
135
  e.preventDefault();
114
- await searchAsync(qd, showAdvancedSearch);
136
+ // Disattiva l'elemento attivo per forzare l'onBlur
137
+ if (document.activeElement instanceof HTMLElement) {
138
+ document.activeElement.blur();
139
+ }
140
+ // Attiva il flag di ricerca. L'useEffect sopra gestirà l'attesa di qd.
141
+ setShouldSearch(true);
115
142
  }
116
143
  }
117
144
  };
@@ -119,8 +146,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
119
146
  return () => {
120
147
  window.removeEventListener('keydown', handleKeyDown);
121
148
  };
122
- }, [qd, showAdvancedSearch]);
123
- const isMobile = deviceType === DeviceType.MOBILE;
149
+ }, []);
124
150
  return (_jsxs("div", { ref: panelRef, style: { height: '100%' }, children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: !isMobile, onMaximize: isMobile ? undefined : onMaximizePanel, onHeaderDoubleClick: isMobile ? undefined : onMaximizePanel, onBack: onBack,
125
151
  // keepActiveState={keepStatePanelIsActive}
126
152
  toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
@@ -137,12 +163,11 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
137
163
  ? _jsxs("div", { style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
138
164
  ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: (newQd) => { if (!deepCompare(qd, newQd))
139
165
  setQd(newQd); } })
140
- : _jsx(TMSearchQueryEditor, { qd: qd, fromDTD: fromDTD, dcmtTypesList: dcmtTypesList, isOpenDistinctValuesPanel: showDistinctValuesPanel, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: (e) => {
166
+ : _jsx(TMSearchQueryEditor, { qd: qd, fromDTD: fromDTD, dcmtTypesList: dcmtTypesList, isOpenDistinctValuesPanel: showDistinctValuesPanel, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: (e) => {
141
167
  if (e.button === AdvancedMenuButtons.DistinctValues) {
142
168
  setShowDistinctValuesPanel(true);
143
169
  }
144
- }, onQdChanged: (newQd) => { if (!deepCompare(qd, newQd))
145
- setQd(newQd); } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, width: 'auto', caption: SDKUI_Localizator.Search, advancedColor: '#4A96D2', onClick: async () => await searchAsync(qd, showAdvancedSearch) }), _jsx(TMButton, { btnStyle: 'advanced', advancedType: 'primary', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), width: 'auto', advancedColor: 'white', color: 'primaryOutline', onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd?.where?.length > initialMaxItems) &&
170
+ } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, width: 'auto', caption: SDKUI_Localizator.Search, advancedColor: '#4A96D2', onClick: handleSearchButtonClick }), _jsx(TMButton, { btnStyle: 'advanced', advancedType: 'primary', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), width: 'auto', advancedColor: 'white', color: 'primaryOutline', onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd?.where?.length > initialMaxItems) &&
146
171
  _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllMdWhere, dataSourceLength: qd?.where?.length, onClick: () => { setShowAllMdWhere(!showAllMdWhere); } })] }), showFiltersConfig &&
147
172
  _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.where?.map((w) => ({ tid: w.tid, mid: w.mid })), onClose: () => setShowFiltersConfig(false), onChoose: (tid_mids) => {
148
173
  if (!fromDTD?.metadata)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react-beta",
3
- "version": "6.14.6",
3
+ "version": "6.14.7",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",