@topconsultnpm/sdkui-react-beta 6.7.38 → 6.7.39
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.
|
@@ -18,13 +18,3 @@ export interface ITMButton extends ITMEditorBase {
|
|
|
18
18
|
}
|
|
19
19
|
declare const TMButton: React.FunctionComponent<ITMButton>;
|
|
20
20
|
export default TMButton;
|
|
21
|
-
export declare const TMButtonNew: ({ color, caption, disable, onClick, type, icon, width, height }: {
|
|
22
|
-
color?: string;
|
|
23
|
-
width?: string;
|
|
24
|
-
height?: string;
|
|
25
|
-
disable?: boolean;
|
|
26
|
-
caption?: string;
|
|
27
|
-
onClick?: () => void;
|
|
28
|
-
type?: AdvancedButtonType;
|
|
29
|
-
icon?: any;
|
|
30
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { getColor
|
|
4
|
+
import { getColor } from '../../helper';
|
|
5
5
|
import { FontSize, TMColors } from '../../utils/theme';
|
|
6
6
|
import TMTooltip from './TMTooltip';
|
|
7
7
|
const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
|
|
@@ -106,6 +106,41 @@ 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 `
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
justify-content: flex-end;
|
|
113
|
+
width: ${props => props.$width};
|
|
114
|
+
height: ${props => props.$height};
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
|
|
117
|
+
border-radius: 10px;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
color: white;
|
|
120
|
+
user-select: none;
|
|
121
|
+
`;
|
|
122
|
+
const StyledAdvancedButtonIcon = styled.div `
|
|
123
|
+
display: flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
justify-content: center;
|
|
126
|
+
width: ${props => props.$isVisible ? '25px' : '0px'};
|
|
127
|
+
|
|
128
|
+
transition: width ease-in-out 100ms;
|
|
129
|
+
height: 100%;
|
|
130
|
+
background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
|
|
131
|
+
border-top-left-radius: 10px;
|
|
132
|
+
border-bottom-left-radius: 10px;
|
|
133
|
+
`;
|
|
134
|
+
const StyledAdvancedButtonText = styled.div `
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
justify-content: center;
|
|
138
|
+
width: 100%;
|
|
139
|
+
height: 100%;
|
|
140
|
+
background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
|
|
141
|
+
border-top-right-radius: 10px;
|
|
142
|
+
border-bottom-right-radius: 10px;
|
|
143
|
+
`;
|
|
109
144
|
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 = () => { } }) => {
|
|
110
145
|
const [isHovered, setIsHovered] = useState(false);
|
|
111
146
|
// const [random, setRandom] = useState(0.0);
|
|
@@ -167,42 +202,3 @@ const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', advancedColo
|
|
|
167
202
|
return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
|
|
168
203
|
};
|
|
169
204
|
export default TMButton;
|
|
170
|
-
const StyledAdvancedButton = styled.div `
|
|
171
|
-
display: flex;
|
|
172
|
-
align-items: center;
|
|
173
|
-
justify-content: flex-end;
|
|
174
|
-
width: ${props => props.$width};
|
|
175
|
-
height: ${props => props.$height};
|
|
176
|
-
font-weight: 600;
|
|
177
|
-
cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
|
|
178
|
-
border-radius: 10px;
|
|
179
|
-
overflow: hidden;
|
|
180
|
-
color: white;
|
|
181
|
-
user-select: none;
|
|
182
|
-
`;
|
|
183
|
-
const StyledAdvancedButtonIcon = styled.div `
|
|
184
|
-
display: flex;
|
|
185
|
-
align-items: center;
|
|
186
|
-
justify-content: center;
|
|
187
|
-
width: ${props => props.$isVisible ? '25px' : '0px'};
|
|
188
|
-
|
|
189
|
-
transition: width ease-in-out 100ms;
|
|
190
|
-
height: 100%;
|
|
191
|
-
background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
|
|
192
|
-
border-top-left-radius: 10px;
|
|
193
|
-
border-bottom-left-radius: 10px;
|
|
194
|
-
`;
|
|
195
|
-
const StyledAdvancedButtonText = styled.div `
|
|
196
|
-
display: flex;
|
|
197
|
-
align-items: center;
|
|
198
|
-
justify-content: center;
|
|
199
|
-
width: 100%;
|
|
200
|
-
height: 100%;
|
|
201
|
-
background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
|
|
202
|
-
border-top-right-radius: 10px;
|
|
203
|
-
border-bottom-right-radius: 10px;
|
|
204
|
-
`;
|
|
205
|
-
export const TMButtonNew = ({ color, caption = '', disable = false, onClick, type = 'primary', icon = _jsx(IconApply, {}), width = '90px', height = '30px' }) => {
|
|
206
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
207
|
-
return (_jsxs(StyledAdvancedButton, { "$width": width, "$height": height, onMouseOver: () => !disable && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disable, onClick: () => !disable && onClick && onClick(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": color, "$isVisible": isHovered, "$isDisabled": disable, "$type": type, children: icon }), _jsxs(StyledAdvancedButtonText, { "$color": color, "$isDisabled": disable, "$type": type, children: [" ", caption, " "] })] }));
|
|
208
|
-
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as ShowAlert } from './base/TMAlert';
|
|
2
|
-
export { default as TMButton
|
|
2
|
+
export { default as TMButton } from './base/TMButton';
|
|
3
3
|
export { default as TMClosableList } from './base/TMClosableList';
|
|
4
4
|
export * from './base/TMContextMenu';
|
|
5
5
|
export { default as TMDropDownMenu } from './base/TMDropDownMenu';
|
package/lib/components/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// base
|
|
2
2
|
// export { default as TMAbortBox } from './base/TMAbortBox'
|
|
3
3
|
export { default as ShowAlert } from './base/TMAlert';
|
|
4
|
-
export { default as TMButton
|
|
4
|
+
export { default as TMButton } from './base/TMButton';
|
|
5
5
|
export { default as TMClosableList } from './base/TMClosableList';
|
|
6
6
|
export * from './base/TMContextMenu';
|
|
7
7
|
export { default as TMDropDownMenu } from './base/TMDropDownMenu';
|
|
@@ -8,7 +8,7 @@ import { FormModes } from '../../ts';
|
|
|
8
8
|
import { TMColors } from '../../utils/theme';
|
|
9
9
|
import { StyledBadge } from '../base/Styled';
|
|
10
10
|
import ShowAlert from '../base/TMAlert';
|
|
11
|
-
import TMButton
|
|
11
|
+
import TMButton from '../base/TMButton';
|
|
12
12
|
import TMDropDownMenu from '../base/TMDropDownMenu';
|
|
13
13
|
import { TMSplitterLayout, TMLayoutItem } from '../base/TMLayout';
|
|
14
14
|
import TMModal from '../base/TMModal';
|
|
@@ -49,7 +49,7 @@ const WorfflowListItem = ({ data }) => {
|
|
|
49
49
|
return (_jsxs("div", { style: { width: '100%', padding: '2px 5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', userSelect: 'none' }, children: [_jsx(TMTidViewer, { tid: data.fromTID, showIcon: true }), _jsx("div", { style: { padding: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', color: 'gray', borderRadius: 3 }, children: data.dcmtsReturned })] }));
|
|
50
50
|
};
|
|
51
51
|
const WorkFlowOperationButtons = ({ onApprove, onReAssign, onReject, approveDisable = false, reassignDisable = false, rejectDisable = false }) => {
|
|
52
|
-
return (_jsxs(StyledWorkFlowOperationButtonsContainer, { children: [_jsx(
|
|
52
|
+
return (_jsxs(StyledWorkFlowOperationButtonsContainer, { children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconApply, {}), caption: 'Approva', disabled: approveDisable, onClick: () => !approveDisable && onApprove && onApprove(), advancedColor: TMColors.success }), _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disabled: rejectDisable, onClick: () => !rejectDisable && onReject && onReject(), advancedColor: TMColors.error }), _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign && onReAssign(), advancedColor: TMColors.tertiary }), _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconInfo, { fontSize: 16 }), caption: 'Maggiori informazioni', width: '180px', disabled: approveDisable, onClick: () => alert('TODO!!!'), advancedColor: TMColors.info })] }));
|
|
53
53
|
};
|
|
54
54
|
const WorkFlowApproveRejectPopUp = ({ op, onClose, selectedItems = [], onUpdate }) => {
|
|
55
55
|
const [commentValue, setCommentValue] = useState('');
|
|
@@ -87,8 +87,8 @@ const WorkFlowApproveRejectPopUp = ({ op, onClose, selectedItems = [], onUpdate
|
|
|
87
87
|
}
|
|
88
88
|
};
|
|
89
89
|
return (_jsx(TMModal, { toolbar: op === 0 ?
|
|
90
|
-
_jsx(
|
|
91
|
-
_jsx(
|
|
90
|
+
_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconApply, {}), caption: 'Approva', disabled: false, onClick: completeWorkFlowAsync, advancedColor: TMColors.success }) :
|
|
91
|
+
_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disabled: disable, onClick: () => { !disable && rejectWorkFlowAsync(); }, advancedColor: TMColors.error }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: (op === 0 ? 'Approva workflow ' + '(' + count() + ')' : 'Rifiuta workflow ' + '(' + count() + ')'), children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsxs("p", { style: { color: (op === 1 && disable) ? TMColors.error : 'black' }, children: ["Commento ", op === 1 && disable && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": op === 0 ? true : !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
|
|
92
92
|
};
|
|
93
93
|
const WorkFlowReAssignPopUp = ({ onClose, selectedItems = [], onUpdate }) => {
|
|
94
94
|
const [commentValue, setCommentValue] = useState('');
|
|
@@ -111,7 +111,7 @@ const WorkFlowReAssignPopUp = ({ onClose, selectedItems = [], onUpdate }) => {
|
|
|
111
111
|
TMSpinner.hide();
|
|
112
112
|
}
|
|
113
113
|
};
|
|
114
|
-
return (_jsx(TMModal, { toolbar: _jsx(
|
|
114
|
+
return (_jsx(TMModal, { toolbar: _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disabled: disable, onClick: () => !disable && reAssignWorkFlowAsync(), advancedColor: TMColors.tertiary }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: 'Riassegna workflow ' + '(' + count() + ')', children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx(TMUserChooser, { value: selectedUserID, onValueChanged: (e) => setSelectedUserID(e) }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: ["Commento ", commentValue.length === 0 && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
|
|
115
115
|
};
|
|
116
116
|
const TabView = ({ title = '', onMouseOut, onMouseOver, onClick, clickable, selectedTabBorderColor, icon = _jsx(IconApply, {}), count = 0 }) => {
|
|
117
117
|
return (_jsx(TMTooltip, { content: title, children: _jsxs("div", { onMouseOut: onMouseOut, onMouseOver: onMouseOver, onClick: onClick, style: { userSelect: 'none', width: 'max-content', padding: 5, height: '40px', display: 'flex', alignItems: 'center', position: 'relative', cursor: clickable ? 'pointer' : 'default' }, children: [_jsx("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '3px', backgroundColor: selectedTabBorderColor, transition: 'all ease 100ms' } }), _jsx("div", { style: { transform: 'translateY(2px)' }, children: icon }), _jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: count })] }) }));
|