@topconsultnpm/sdkui-react-beta 6.9.88 → 6.9.89
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.
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
|
|
2
3
|
import { IDateBoxOptions } from 'devextreme-react/cjs/date-box';
|
|
3
4
|
import { DateDisplayTypes } from '../../helper';
|
|
@@ -11,5 +12,5 @@ interface ITMDateBoxProps extends IDateBoxOptions {
|
|
|
11
12
|
resetTimeToZeroOnKeyPress?: boolean;
|
|
12
13
|
icon?: any;
|
|
13
14
|
}
|
|
14
|
-
declare const TMDateBox:
|
|
15
|
+
declare const TMDateBox: React.FC<ITMDateBoxProps>;
|
|
15
16
|
export default TMDateBox;
|
|
@@ -5,7 +5,7 @@ import { DateDisplayTypes, Globalization } from '../../helper';
|
|
|
5
5
|
import { TMColors } from '../../utils/theme';
|
|
6
6
|
import TMVilViewer from '../base/TMVilViewer';
|
|
7
7
|
const TMDateBox = (props) => {
|
|
8
|
-
const resetTimeToZero = props.resetTimeToZeroOnKeyPress
|
|
8
|
+
const resetTimeToZero = props.resetTimeToZeroOnKeyPress ?? true;
|
|
9
9
|
useEffect(() => {
|
|
10
10
|
let htmlElement = dateBoxRef?.current?.instance().element();
|
|
11
11
|
if (!htmlElement)
|
|
@@ -45,8 +45,8 @@ const TMDateBox = (props) => {
|
|
|
45
45
|
let dateBoxInstance = dateBoxRef.current?.instance();
|
|
46
46
|
const currentDate = new Date();
|
|
47
47
|
currentDate.setHours(0, 0, 0, 0);
|
|
48
|
-
dateBoxInstance
|
|
49
|
-
dateBoxInstance
|
|
48
|
+
dateBoxInstance?._strategy?._timeView?.option?.("value", currentDate);
|
|
49
|
+
dateBoxInstance?._strategy?._widget?.option?.("value", currentDate);
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
const getType = () => {
|
|
@@ -56,60 +56,7 @@ const TMDateBox = (props) => {
|
|
|
56
56
|
return "datetime";
|
|
57
57
|
return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
|
|
58
58
|
};
|
|
59
|
-
return (
|
|
60
|
-
// <>
|
|
61
|
-
// <DateBox
|
|
62
|
-
// ref={dateBoxRef}
|
|
63
|
-
// // defaultValue={props.defaultValue}
|
|
64
|
-
// showClearButton={props.showClearButton}
|
|
65
|
-
// dateSerializationFormat={props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined}
|
|
66
|
-
// disabled={props.disabled}
|
|
67
|
-
// displayFormat={props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType)}
|
|
68
|
-
// dropDownOptions={dropDownOptions}
|
|
69
|
-
// label={props.label} labelMode='static'
|
|
70
|
-
// type={getType()}
|
|
71
|
-
// useMaskBehavior={true}
|
|
72
|
-
// height={'28px'}
|
|
73
|
-
// value={props.value}
|
|
74
|
-
// width={props.width}
|
|
75
|
-
// valueChangeEvent='keyup input change'
|
|
76
|
-
// onValueChange={(e) => { props.onValueChange?.(e) }}
|
|
77
|
-
// onKeyUp={(e) => {
|
|
78
|
-
// if (e.event?.code == "Space") {
|
|
79
|
-
// const currentDate = new Date();
|
|
80
|
-
// currentDate.setHours(0, 0, 0, 0);
|
|
81
|
-
// e.component.option("value", currentDate.toISOString());
|
|
82
|
-
// }
|
|
83
|
-
// }}
|
|
84
|
-
// onValueChanged={(e) => {
|
|
85
|
-
// if(resetTimeToZero){
|
|
86
|
-
// // soluzione in https://supportcenter.devexpress.com/ticket/details/t1103734/datebox-how-to-initialize-time-to-00-00-when-key-is-pressed-instead-of-current-time
|
|
87
|
-
// if (props.value != undefined) return;
|
|
88
|
-
// if (!e.value) return;
|
|
89
|
-
// const currentDate = new Date(e.value);
|
|
90
|
-
// currentDate.setHours(0, 0, 0, 0);
|
|
91
|
-
// e.component.option("value", currentDate.toISOString());
|
|
92
|
-
// }
|
|
93
|
-
// }}
|
|
94
|
-
// >
|
|
95
|
-
// {/* {props.buttons?.map((btn: TMEditorButtonData) => {
|
|
96
|
-
// return (
|
|
97
|
-
// <Button key={btn.text}
|
|
98
|
-
// name={btn.text}
|
|
99
|
-
// location="after"
|
|
100
|
-
// options={{
|
|
101
|
-
// icon: ReactDOMServer.renderToString(<IconLayerGroup />),
|
|
102
|
-
// stylingMode: 'text',
|
|
103
|
-
// onClick: () => btn?.onClick?.()
|
|
104
|
-
// }}
|
|
105
|
-
// />
|
|
106
|
-
// )
|
|
107
|
-
// })}
|
|
108
|
-
// <Button name="dropDown" /> */}
|
|
109
|
-
// </DateBox>
|
|
110
|
-
// <TMVilViewer vil={props.validationItems} />
|
|
111
|
-
// </>
|
|
112
|
-
_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, onKeyUp: (e) => {
|
|
59
|
+
return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, onKeyUp: (e) => {
|
|
113
60
|
if (e.event?.code == "Space") {
|
|
114
61
|
const currentDate = new Date();
|
|
115
62
|
currentDate.setHours(0, 0, 0, 0);
|
|
@@ -24,5 +24,5 @@ interface ITMMetadataEditorProps {
|
|
|
24
24
|
onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
|
|
25
25
|
onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
|
|
26
26
|
}
|
|
27
|
-
declare const TMMetadataEditor:
|
|
27
|
+
declare const TMMetadataEditor: React.FC<ITMMetadataEditorProps>;
|
|
28
28
|
export default TMMetadataEditor;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
|
-
import { MetadataDataDomains, MetadataDataTypes, DcmtTypeListCacheService, LayoutModes, AccessLevels, PlatformObjectValidator, QueryOperators, SDK_Globals, AppModules } from '@topconsultnpm/sdk-ts-beta';
|
|
3
|
+
import { MetadataDataDomains, MetadataDataTypes, DcmtTypeListCacheService, LayoutModes, AccessLevels, PlatformObjectValidator, QueryOperators, SDK_Globals, AppModules, MetadataFormats } from '@topconsultnpm/sdk-ts-beta';
|
|
4
4
|
import { TMColors } from '../../utils/theme';
|
|
5
5
|
import TMDataListItemChooser from '../choosers/TMDataListItemChooser';
|
|
6
6
|
import TMDynDataListItemChooser from '../choosers/TMDynDataListItemChooser';
|
|
@@ -9,9 +9,34 @@ import TMDateBox from './TMDateBox';
|
|
|
9
9
|
import TMTextBox from './TMTextBox';
|
|
10
10
|
import { TMMetadataIcon } from '../viewers/TMMidViewer';
|
|
11
11
|
import TMTextArea from './TMTextArea';
|
|
12
|
+
import { DateDisplayTypes } from '../../helper/Globalization';
|
|
12
13
|
const renderMetadataIcon = (tid, md, layoutMode, iconContextMenu) => {
|
|
13
14
|
return (_jsxs("div", { id: `md-${md?.id}`, style: { height: '100%', width: '100%' }, children: [_jsx(TMMetadataIcon, { layoutMode: layoutMode, md: md, tid: tid }), iconContextMenu] }));
|
|
14
15
|
};
|
|
16
|
+
const getDateDisplayFormat = (format) => {
|
|
17
|
+
format = format ?? MetadataFormats.None;
|
|
18
|
+
switch (format) {
|
|
19
|
+
case MetadataFormats.LongTime: return "longTime";
|
|
20
|
+
case MetadataFormats.ShortTime: return "shortTime";
|
|
21
|
+
case MetadataFormats.ShortDateLongTime:
|
|
22
|
+
case MetadataFormats.ShortDateShortTime:
|
|
23
|
+
case MetadataFormats.LongDateLongTime:
|
|
24
|
+
case MetadataFormats.LongDateShortTime: return "shortDateShortTime";
|
|
25
|
+
default: return "shortDate";
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const getDateDisplayType = (format) => {
|
|
29
|
+
format = format ?? MetadataFormats.None;
|
|
30
|
+
switch (format) {
|
|
31
|
+
case MetadataFormats.LongTime:
|
|
32
|
+
case MetadataFormats.ShortTime: return DateDisplayTypes.Time;
|
|
33
|
+
case MetadataFormats.ShortDateLongTime:
|
|
34
|
+
case MetadataFormats.ShortDateShortTime:
|
|
35
|
+
case MetadataFormats.LongDateLongTime:
|
|
36
|
+
case MetadataFormats.LongDateShortTime: return DateDisplayTypes.DateTime;
|
|
37
|
+
default: return DateDisplayTypes.Date;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
15
40
|
const TMMetadataEditor = ({ onEditorClick, customLabel, isLexProt, layoutMode, queryOperator, isEditableList, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, iconContextMenu, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
|
|
16
41
|
const [md, setMd] = useState();
|
|
17
42
|
useEffect(() => {
|
|
@@ -68,7 +93,11 @@ const TMMetadataEditor = ({ onEditorClick, customLabel, isLexProt, layoutMode, q
|
|
|
68
93
|
if (showAsNumber)
|
|
69
94
|
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? renderMetadataIcon(tid, md, layoutMode, iconContextMenu) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) }), " "] });
|
|
70
95
|
switch (md?.dataType) {
|
|
71
|
-
case MetadataDataTypes.DateTime:
|
|
96
|
+
case MetadataDataTypes.DateTime:
|
|
97
|
+
return _jsx("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: _jsx(TMDateBox, { placeholder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', dateDisplayType: getDateDisplayType(md.format?.format), displayFormat: getDateDisplayFormat(md.format?.format), isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, icon: showLabelTop ? renderMetadataIcon(tid, md, layoutMode, iconContextMenu) : undefined, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, showClearButton: !isReadOnlyResult, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => {
|
|
98
|
+
onValueChange?.(newValue ? newValue.toString() : undefined);
|
|
99
|
+
onValueChanged?.(newValue ? newValue.toString() : undefined);
|
|
100
|
+
} }) });
|
|
72
101
|
case MetadataDataTypes.Number: return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? renderMetadataIcon(tid, md, layoutMode, iconContextMenu) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) }), " "] });
|
|
73
102
|
default:
|
|
74
103
|
if (showByTextarea) {
|