@topconsultnpm/sdkui-react-beta 6.6.84 → 6.6.86
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.
- package/lib/components/base/TMEditorBase.d.ts +2 -1
- package/lib/components/choosers/TMDataListItemChooser.js +2 -2
- package/lib/components/choosers/TMDynDataListItemChooser.js +2 -2
- package/lib/components/choosers/TMUserChooser.js +2 -2
- package/lib/components/editors/TMDateBox.d.ts +1 -0
- package/lib/components/editors/TMDateBox.js +71 -21
- package/lib/components/editors/TMEditorStyled.d.ts +1 -0
- package/lib/components/editors/TMEditorStyled.js +1 -1
- package/lib/components/editors/TMSummary.js +2 -2
- package/lib/components/editors/TMTextBox.js +2 -2
- package/package.json +1 -1
|
@@ -23,7 +23,8 @@ export interface ITMEditorBase {
|
|
|
23
23
|
iconMode?: IconModes;
|
|
24
24
|
iconSize?: Sizes;
|
|
25
25
|
isModifiedWhen?: boolean;
|
|
26
|
-
label?:
|
|
26
|
+
label?: string;
|
|
27
|
+
labelColor?: string;
|
|
27
28
|
labelMode?: LabelModes;
|
|
28
29
|
labelPosition?: 'top' | 'left' | 'right';
|
|
29
30
|
labelAlign?: boolean;
|
|
@@ -8,12 +8,12 @@ import TMSpinner from '../base/TMSpinner';
|
|
|
8
8
|
import TMSummary from '../editors/TMSummary';
|
|
9
9
|
import TMChooserForm from '../forms/TMChooserForm';
|
|
10
10
|
import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
|
|
11
|
-
const TMDataListItemChooser = ({ dataListId, icon, backgroundColor, showBorder = true, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, showClearButton = false, validationItems = [], onValueChanged }) => {
|
|
11
|
+
const TMDataListItemChooser = ({ labelColor, dataListId, icon, backgroundColor, showBorder = true, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, showClearButton = false, validationItems = [], onValueChanged }) => {
|
|
12
12
|
const [showChooser, setShowChooser] = useState(false);
|
|
13
13
|
const renderTemplate = () => {
|
|
14
14
|
return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
|
|
15
15
|
};
|
|
16
|
-
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { icon: icon, buttons: buttons, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
16
|
+
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { labelColor: labelColor, icon: icon, buttons: buttons, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
17
17
|
_jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, dataListId: dataListId, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
|
|
18
18
|
};
|
|
19
19
|
export default TMDataListItemChooser;
|
|
@@ -23,7 +23,7 @@ export const IsParametricQuery = (qd) => {
|
|
|
23
23
|
}
|
|
24
24
|
return false;
|
|
25
25
|
};
|
|
26
|
-
const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, onValueChanged, onCascadeRefreshDynDataLists, showClearButton }) => {
|
|
26
|
+
const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, onValueChanged, onCascadeRefreshDynDataLists, showClearButton }) => {
|
|
27
27
|
const [showChooser, setShowChooser] = useState(false);
|
|
28
28
|
const [dynDl, setDynDl] = useState();
|
|
29
29
|
const [dataSource, setDataSource] = useState();
|
|
@@ -67,7 +67,7 @@ const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, quer
|
|
|
67
67
|
const renderTemplate = () => {
|
|
68
68
|
return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && dynDl && dataSource && _jsxs(StyledDivHorizontal, { children: [_jsx(IconDetails, {}), _jsx("p", { style: { marginLeft: '5px' }, children: dataSource.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0] })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
|
|
69
69
|
};
|
|
70
|
-
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
70
|
+
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
71
71
|
_jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {
|
|
72
72
|
onValueChanged?.(IDs);
|
|
73
73
|
if (!dynDl)
|
|
@@ -8,7 +8,7 @@ import TMSpinner from '../base/TMSpinner';
|
|
|
8
8
|
import TMTooltip from '../base/TMTooltip';
|
|
9
9
|
import TMSummary from '../editors/TMSummary';
|
|
10
10
|
import TMChooserForm from '../forms/TMChooserForm';
|
|
11
|
-
const TMUserChooser = ({ readOnly = false, icon, dataSource, backgroundColor, buttons = [], disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton }) => {
|
|
11
|
+
const TMUserChooser = ({ labelColor, readOnly = false, icon, dataSource, backgroundColor, buttons = [], disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton }) => {
|
|
12
12
|
const [showChooser, setShowChooser] = useState(false);
|
|
13
13
|
useEffect(() => {
|
|
14
14
|
if (!values || values.length <= 0)
|
|
@@ -21,7 +21,7 @@ const TMUserChooser = ({ readOnly = false, icon, dataSource, backgroundColor, bu
|
|
|
21
21
|
? _jsx("p", { children: placeHolder })
|
|
22
22
|
: _jsxs(_Fragment, { children: [_jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }) }));
|
|
23
23
|
};
|
|
24
|
-
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
24
|
+
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
25
25
|
_jsx(TMUserChooserForm, { allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
|
|
26
26
|
};
|
|
27
27
|
export default TMUserChooser;
|
|
@@ -9,6 +9,7 @@ interface ITMDateBoxProps extends IDateBoxOptions {
|
|
|
9
9
|
containerElement?: Element;
|
|
10
10
|
buttons?: any;
|
|
11
11
|
resetTimeToZeroOnKeyPress?: boolean;
|
|
12
|
+
icon?: any;
|
|
12
13
|
}
|
|
13
14
|
declare const TMDateBox: (props: ITMDateBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export default TMDateBox;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef } from 'react';
|
|
3
3
|
import { DateBox } from 'devextreme-react';
|
|
4
4
|
import { DateDisplayTypes, Globalization } from '../../helper';
|
|
@@ -49,25 +49,75 @@ const TMDateBox = (props) => {
|
|
|
49
49
|
return "datetime";
|
|
50
50
|
return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
|
|
51
51
|
};
|
|
52
|
-
return (
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
52
|
+
return (
|
|
53
|
+
// <>
|
|
54
|
+
// <DateBox
|
|
55
|
+
// ref={dateBoxRef}
|
|
56
|
+
// // defaultValue={props.defaultValue}
|
|
57
|
+
// showClearButton={props.showClearButton}
|
|
58
|
+
// dateSerializationFormat={props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined}
|
|
59
|
+
// disabled={props.disabled}
|
|
60
|
+
// displayFormat={props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType)}
|
|
61
|
+
// dropDownOptions={dropDownOptions}
|
|
62
|
+
// label={props.label} labelMode='static'
|
|
63
|
+
// type={getType()}
|
|
64
|
+
// useMaskBehavior={true}
|
|
65
|
+
// height={'28px'}
|
|
66
|
+
// value={props.value}
|
|
67
|
+
// width={props.width}
|
|
68
|
+
// valueChangeEvent='keyup input change'
|
|
69
|
+
// onValueChange={(e) => { props.onValueChange?.(e) }}
|
|
70
|
+
// onKeyUp={(e) => {
|
|
71
|
+
// if (e.event?.code == "Space") {
|
|
72
|
+
// const currentDate = new Date();
|
|
73
|
+
// currentDate.setHours(0, 0, 0, 0);
|
|
74
|
+
// e.component.option("value", currentDate.toISOString());
|
|
75
|
+
// }
|
|
76
|
+
// }}
|
|
77
|
+
// onValueChanged={(e) => {
|
|
78
|
+
// if(resetTimeToZero){
|
|
79
|
+
// // 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
|
|
80
|
+
// if (props.value != undefined) return;
|
|
81
|
+
// if (!e.value) return;
|
|
82
|
+
// const currentDate = new Date(e.value);
|
|
83
|
+
// currentDate.setHours(0, 0, 0, 0);
|
|
84
|
+
// e.component.option("value", currentDate.toISOString());
|
|
85
|
+
// }
|
|
86
|
+
// }}
|
|
87
|
+
// >
|
|
88
|
+
// {/* {props.buttons?.map((btn: TMEditorButtonData) => {
|
|
89
|
+
// return (
|
|
90
|
+
// <Button key={btn.text}
|
|
91
|
+
// name={btn.text}
|
|
92
|
+
// location="after"
|
|
93
|
+
// options={{
|
|
94
|
+
// icon: ReactDOMServer.renderToString(<IconLayerGroup />),
|
|
95
|
+
// stylingMode: 'text',
|
|
96
|
+
// onClick: () => btn?.onClick?.()
|
|
97
|
+
// }}
|
|
98
|
+
// />
|
|
99
|
+
// )
|
|
100
|
+
// })}
|
|
101
|
+
// <Button name="dropDown" /> */}
|
|
102
|
+
// </DateBox>
|
|
103
|
+
// <TMVilViewer vil={props.validationItems} />
|
|
104
|
+
// </>
|
|
105
|
+
_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px' }, children: [_jsx(DateBox, { 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); }, onKeyUp: (e) => {
|
|
106
|
+
if (e.event?.code == "Space") {
|
|
107
|
+
const currentDate = new Date();
|
|
108
|
+
currentDate.setHours(0, 0, 0, 0);
|
|
109
|
+
e.component.option("value", currentDate.toISOString());
|
|
110
|
+
}
|
|
111
|
+
}, onValueChanged: (e) => {
|
|
112
|
+
if (resetTimeToZero) {
|
|
113
|
+
if (props.value != undefined)
|
|
114
|
+
return;
|
|
115
|
+
if (!e.value)
|
|
116
|
+
return;
|
|
117
|
+
const currentDate = new Date(e.value);
|
|
118
|
+
currentDate.setHours(0, 0, 0, 0);
|
|
119
|
+
e.component.option("value", currentDate.toISOString());
|
|
120
|
+
}
|
|
121
|
+
} }), _jsx(TMVilViewer, { vil: props.validationItems })] })] }));
|
|
72
122
|
};
|
|
73
123
|
export default TMDateBox;
|
|
@@ -25,6 +25,7 @@ export declare const StyledEditorLabel: import("styled-components").IStyledCompo
|
|
|
25
25
|
$labelPosition: 'right' | 'left' | 'top';
|
|
26
26
|
$disabled: boolean;
|
|
27
27
|
$fontSize: string;
|
|
28
|
+
$color?: string | undefined;
|
|
28
29
|
}>>;
|
|
29
30
|
export declare const StyledEditorButtonIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
30
31
|
$index: number;
|
|
@@ -49,7 +49,7 @@ export const StyledEditorIcon = styled.div `
|
|
|
49
49
|
`;
|
|
50
50
|
export const StyledEditorLabel = styled.div `
|
|
51
51
|
font-size: ${props => props.$fontSize} ;
|
|
52
|
-
color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : TMColors.label_normal : TMColors.disabled};
|
|
52
|
+
color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
|
|
53
53
|
padding: 0 3px;
|
|
54
54
|
user-select: none;
|
|
55
55
|
transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
|
|
@@ -46,7 +46,7 @@ const StyledEditorButtonIcon2 = styled.div `
|
|
|
46
46
|
border-bottom-color: ${TMColors.primary};
|
|
47
47
|
}
|
|
48
48
|
`;
|
|
49
|
-
const TMSummary = ({ hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
|
|
49
|
+
const TMSummary = ({ labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
|
|
50
50
|
const renderTemplateField = () => {
|
|
51
51
|
return (_jsx(StyledSummaryTemplateInput, { tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: _jsxs("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
|
|
52
52
|
onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
|
|
@@ -55,7 +55,7 @@ const TMSummary = ({ hasValue, borderRadius = '4px', validationItems = [], butto
|
|
|
55
55
|
})] })] }) }));
|
|
56
56
|
};
|
|
57
57
|
const renderLabel = () => {
|
|
58
|
-
return (_jsx(StyledEditorLabel, { "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
|
|
58
|
+
return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
|
|
59
59
|
};
|
|
60
60
|
const renderSummary = () => {
|
|
61
61
|
return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
|
|
@@ -31,7 +31,7 @@ const StyledTextBoxEditorButton = styled.div `
|
|
|
31
31
|
border-bottom-color: ${TMColors.primary};
|
|
32
32
|
}
|
|
33
33
|
`;
|
|
34
|
-
const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius }) => {
|
|
34
|
+
const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius }) => {
|
|
35
35
|
const [initialType, setInitialType] = useState(type);
|
|
36
36
|
const [currentType, setCurrentType] = useState(type);
|
|
37
37
|
const [currentValue, setCurrentValue] = useState(value);
|
|
@@ -150,7 +150,7 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, va
|
|
|
150
150
|
})] }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
|
|
151
151
|
};
|
|
152
152
|
const renderedLeftLabelTextBox = () => {
|
|
153
|
-
return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));
|
|
153
|
+
return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));
|
|
154
154
|
};
|
|
155
155
|
return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
|
|
156
156
|
};
|