linear-react-components-ui 1.1.20-beta.11 → 1.1.20-beta.12
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/alerts/BaseAlert.js +1 -1
- package/lib/alerts/Message.js +1 -1
- package/lib/assets/styles/button.scss +1 -0
- package/lib/assets/styles/select.scss +1 -2
- package/lib/assets/styles/table.scss +6 -10
- package/lib/assets/styles/toolbar.scss +0 -3
- package/lib/avatar/index.js +9 -8
- package/lib/badge/index.js +4 -4
- package/lib/buttons/DangerButton.js +1 -1
- package/lib/buttons/DefaultButton.js +18 -7
- package/lib/buttons/InfoButton.js +1 -1
- package/lib/buttons/PrimaryButton.js +1 -1
- package/lib/buttons/SuccessButton.js +1 -1
- package/lib/buttons/WarningButton.js +1 -1
- package/lib/buttons/button_container/index.js +1 -1
- package/lib/buttons/split_button/index.js +1 -1
- package/lib/buttons/types.d.ts +1 -0
- package/lib/calendar/base/Day.js +1 -1
- package/lib/calendar/base/Month.js +1 -1
- package/lib/calendar/base/helpers.js +2 -2
- package/lib/calendar/base/index.js +1 -1
- package/lib/dialog/Custom.js +1 -1
- package/lib/dialog/base/Content.d.ts +1 -1
- package/lib/dialog/base/Content.js +2 -3
- package/lib/dialog/base/Header.js +2 -2
- package/lib/dialog/base/index.js +4 -6
- package/lib/dialog/form/index.js +3 -8
- package/lib/dialog/types.d.ts +4 -34
- package/lib/drawer/Drawer.js +3 -3
- package/lib/drawer/Header.js +1 -1
- package/lib/dropdown/Popup.d.ts +1 -1
- package/lib/dropdown/Popup.js +43 -22
- package/lib/dropdown/helper.js +1 -1
- package/lib/dropdown/types.d.ts +6 -2
- package/lib/dropdown/withDropdown.js +7 -6
- package/lib/fieldset/index.js +7 -7
- package/lib/form/Field.js +24 -11
- package/lib/form/FieldArray.js +25 -10
- package/lib/form/FieldNumber.js +21 -9
- package/lib/form/FieldPeriod.js +5 -5
- package/lib/form/index.js +6 -9
- package/lib/form/types.d.ts +6 -10
- package/lib/form/withFieldHOC.js +2 -2
- package/lib/gridlayout/GridCol.js +5 -5
- package/lib/gridlayout/GridRow.js +4 -1
- package/lib/gridlayout/types.d.ts +1 -1
- package/lib/hint/index.js +7 -1
- package/lib/icons/helper.d.ts +0 -20
- package/lib/icons/helper.js +0 -20
- package/lib/icons/index.js +24 -27
- package/lib/inputs/base/InputTextBase.js +6 -9
- package/lib/inputs/base/Label.js +1 -1
- package/lib/inputs/base/helpers.js +7 -3
- package/lib/inputs/date/helpers.js +4 -1
- package/lib/inputs/date/index.js +9 -15
- package/lib/inputs/errorMessage/index.js +1 -1
- package/lib/inputs/file/DefaultFile.js +5 -6
- package/lib/inputs/file/DragDropFile.js +15 -17
- package/lib/inputs/file/File.js +3 -4
- package/lib/inputs/mask/BaseMask.js +1 -1
- package/lib/inputs/multiSelect/Dropdown.js +9 -10
- package/lib/inputs/multiSelect/helper.js +1 -2
- package/lib/inputs/multiSelect/index.js +7 -9
- package/lib/inputs/number/BaseNumber.d.ts +1 -1
- package/lib/inputs/number/BaseNumber.js +9 -2
- package/lib/inputs/number/Currency.d.ts +1 -1
- package/lib/inputs/number/Currency.js +11 -4
- package/lib/inputs/number/index.js +1 -1
- package/lib/inputs/period/PeriodList.js +1 -1
- package/lib/inputs/period/helper.js +3 -1
- package/lib/inputs/period/index.js +9 -14
- package/lib/inputs/search/index.js +1 -1
- package/lib/inputs/select/Dropdown.js +1 -1
- package/lib/inputs/select/helper.js +10 -13
- package/lib/inputs/select/multiple/Selecteds.js +1 -1
- package/lib/inputs/select/multiple/index.js +12 -19
- package/lib/inputs/select/simple/index.js +13 -22
- package/lib/inputs/select/types.d.ts +0 -1
- package/lib/inputs/textarea/index.js +1 -1
- package/lib/internals/withTooltip.js +9 -9
- package/lib/labelMessages/index.js +4 -3
- package/lib/labels/DefaultLabel.js +4 -1
- package/lib/labels/label_container/index.js +1 -1
- package/lib/list/Header.d.ts +0 -1
- package/lib/list/Header.js +1 -1
- package/lib/list/Item.d.ts +2 -6
- package/lib/list/Item.js +12 -22
- package/lib/list/helpers.d.ts +0 -1
- package/lib/list/index.d.ts +0 -1
- package/lib/list/index.js +1 -1
- package/lib/list/types.d.ts +0 -6
- package/lib/menus/float/MenuItem.js +2 -2
- package/lib/menus/float/SubMenuContainer.js +1 -1
- package/lib/menus/float/index.js +1 -1
- package/lib/menus/sidenav/ExpandMenu.js +1 -1
- package/lib/menus/sidenav/NavMenuGroup.js +1 -1
- package/lib/menus/sidenav/NavMenuItem.js +7 -9
- package/lib/menus/sidenav/NavSubMenuItem.js +1 -1
- package/lib/menus/sidenav/helpers.js +1 -1
- package/lib/menus/sidenav/index.js +5 -5
- package/lib/panel/Content.js +5 -7
- package/lib/panel/Default.js +2 -2
- package/lib/panel/Header.js +3 -3
- package/lib/permissionValidations.js +1 -1
- package/lib/popover/PopoverText.d.ts +3 -2
- package/lib/popover/PopoverText.js +5 -8
- package/lib/popover/PopoverTitle.d.ts +1 -0
- package/lib/popover/index.d.ts +3 -5
- package/lib/popover/index.js +20 -14
- package/lib/popover/types.d.ts +12 -1
- package/lib/progress/Bar.js +6 -6
- package/lib/radio/index.js +2 -2
- package/lib/shortcuts/index.js +1 -1
- package/lib/skeleton/SkeletonContainer.js +2 -1
- package/lib/skeleton/index.js +4 -1
- package/lib/spinner/index.js +2 -2
- package/lib/split/Split.js +1 -1
- package/lib/split/SplitSide.js +3 -3
- package/lib/table/Body.js +3 -3
- package/lib/table/Header.js +8 -11
- package/lib/table/HeaderColumn.d.ts +1 -1
- package/lib/table/HeaderColumn.js +11 -12
- package/lib/table/Row.js +3 -3
- package/lib/table/RowColumn.js +2 -3
- package/lib/table/index.js +6 -1
- package/lib/table/types.d.ts +4 -4
- package/lib/tabs/DropdownTabs.js +1 -1
- package/lib/tabs/Menu.js +1 -1
- package/lib/tabs/MenuTabs.js +2 -2
- package/lib/tabs/Panel.js +5 -7
- package/lib/tabs/context.js +3 -6
- package/lib/textContent/index.js +1 -1
- package/lib/toolbar/ButtonBar.js +1 -1
- package/lib/toolbar/index.js +1 -1
- package/lib/tooltip/index.js +7 -7
- package/lib/treetable/Body.js +1 -1
- package/lib/treetable/Header.js +2 -2
- package/lib/treetable/Row.js +8 -8
- package/lib/treeview/Header.js +1 -1
- package/lib/treeview/Node.js +11 -15
- package/lib/treeview/index.js +7 -11
- package/lib/treeview/types.d.ts +0 -4
- package/lib/uitour/index.js +6 -8
- package/package.json +2 -2
- package/lib/assets/styles/wizard.scss +0 -125
- package/lib/dialog/wizard/index.d.ts +0 -13
- package/lib/dialog/wizard/index.js +0 -74
- package/lib/dialog/wizard/progressbar.d.ts +0 -13
- package/lib/dialog/wizard/progressbar.js +0 -36
- package/lib/dialog/wizard/step.d.ts +0 -9
- package/lib/dialog/wizard/step.js +0 -22
- package/lib/dialog/wizard/useWizard.d.ts +0 -9
- package/lib/dialog/wizard/useWizard.js +0 -48
package/lib/treetable/Body.js
CHANGED
package/lib/treetable/Header.js
CHANGED
|
@@ -15,9 +15,9 @@ const TreeTableHeader = () => {
|
|
|
15
15
|
dataColumns
|
|
16
16
|
} = (0, _react.useContext)(_helpers.TreeTableContext);
|
|
17
17
|
return /*#__PURE__*/_react.default.createElement(_table.THeader, null, /*#__PURE__*/_react.default.createElement(_table.TRow, {
|
|
18
|
-
key:
|
|
18
|
+
key: `tr-header-${(0, _uuid.v1)()}`
|
|
19
19
|
}, dataColumns.map(column => /*#__PURE__*/_react.default.createElement(_table.Th, {
|
|
20
|
-
key:
|
|
20
|
+
key: `th-${column.name}-${(0, _uuid.v1)()}`,
|
|
21
21
|
style: column.style
|
|
22
22
|
}, column.title))));
|
|
23
23
|
};
|
package/lib/treetable/Row.js
CHANGED
|
@@ -94,7 +94,7 @@ const TreeRow = props => {
|
|
|
94
94
|
let newElementsWithNewProps = [];
|
|
95
95
|
if (elements) {
|
|
96
96
|
newElementsWithNewProps = _react.default.Children.map(elements, element => {
|
|
97
|
-
if (
|
|
97
|
+
if (/*#__PURE__*/_react.default.isValidElement(element) && element.props) {
|
|
98
98
|
const _element$props = element.props,
|
|
99
99
|
{
|
|
100
100
|
validationKey,
|
|
@@ -134,14 +134,14 @@ const TreeRow = props => {
|
|
|
134
134
|
onMouseLeave: () => setShowToolbarElements(false)
|
|
135
135
|
}), /*#__PURE__*/_react.default.createElement(_table.Td, {
|
|
136
136
|
ignoreTableColClick: true,
|
|
137
|
-
key:
|
|
137
|
+
key: `td-${dataColumns[0].name}-${(0, _uuid.v1)()}`,
|
|
138
138
|
style: dataColumns[0].style
|
|
139
139
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
140
140
|
className: "column-container"
|
|
141
141
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
142
|
-
className:
|
|
142
|
+
className: `column-more-childrens ${rowLevel && 'line-path-decoration'}`,
|
|
143
143
|
style: {
|
|
144
|
-
marginLeft:
|
|
144
|
+
marginLeft: `${rowLevel}rem`
|
|
145
145
|
}
|
|
146
146
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
147
147
|
tabIndex: -1,
|
|
@@ -165,20 +165,20 @@ const TreeRow = props => {
|
|
|
165
165
|
size: "small",
|
|
166
166
|
customClass: "row-toolbar"
|
|
167
167
|
}, /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
|
|
168
|
-
key:
|
|
168
|
+
key: `left-toolbar-${(0, _uuid.v1)()}`,
|
|
169
169
|
style: _objectSpread({
|
|
170
170
|
float: 'left',
|
|
171
171
|
height: 'fit-content'
|
|
172
172
|
}, styleForLeftToolbar)
|
|
173
173
|
}, showToolbarElements && leftToolbarElements && buildToolbarElements(leftToolbarElements)), /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, {
|
|
174
|
-
key:
|
|
174
|
+
key: `right-toolbar-${(0, _uuid.v1)()}`,
|
|
175
175
|
style: _objectSpread({
|
|
176
176
|
float: 'right',
|
|
177
177
|
height: 'fit-content',
|
|
178
178
|
gap: '4px'
|
|
179
179
|
}, styleForRightToolbar)
|
|
180
180
|
}, rightToolbarElements && buildToolbarElements(rightToolbarElements)))))), dataColumns.slice(1).map(column => /*#__PURE__*/_react.default.createElement(_table.Td, {
|
|
181
|
-
key:
|
|
181
|
+
key: `key-${column.name}-${(0, _uuid.v1)()}`,
|
|
182
182
|
style: _objectSpread({}, column.style),
|
|
183
183
|
ignoreTableColClick: true
|
|
184
184
|
}, dataRow[column.name]))), open && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, childrens && childrens.length === 0 && isLoadingChildrens ? /*#__PURE__*/_react.default.createElement(_table.TRow, {
|
|
@@ -195,7 +195,7 @@ const TreeRow = props => {
|
|
|
195
195
|
dataRow: item,
|
|
196
196
|
rowLevel: item.rowLevel ? item.rowLevel + 1 : 1,
|
|
197
197
|
key: item[rootPropName],
|
|
198
|
-
rowId:
|
|
198
|
+
rowId: `${item[rootPropName]}`,
|
|
199
199
|
style: stylesForRow
|
|
200
200
|
})), childrens && childrens.length !== 0 && isLoadingChildrens && /*#__PURE__*/_react.default.createElement(_table.TRow, {
|
|
201
201
|
key: "tr-loading-childrens"
|
package/lib/treeview/Header.js
CHANGED
|
@@ -13,7 +13,7 @@ const Header = props => {
|
|
|
13
13
|
children
|
|
14
14
|
} = props;
|
|
15
15
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
16
|
-
className:
|
|
16
|
+
className: `treeviewheader ${customClass}`
|
|
17
17
|
}, title ? /*#__PURE__*/_react.default.createElement("div", {
|
|
18
18
|
className: "title"
|
|
19
19
|
}, title) : children);
|
package/lib/treeview/Node.js
CHANGED
|
@@ -39,9 +39,7 @@ const TreeNode = props => {
|
|
|
39
39
|
children,
|
|
40
40
|
nodeMenuButtonSize = 'small',
|
|
41
41
|
selectedNodeId,
|
|
42
|
-
alwaysShowArrow = false
|
|
43
|
-
customClass = '',
|
|
44
|
-
customStyle
|
|
42
|
+
alwaysShowArrow = false
|
|
45
43
|
} = props;
|
|
46
44
|
const [node, setNode] = (0, _react.useState)(props.node);
|
|
47
45
|
const [isVisible, setIsVisible] = (0, _react.useState)(startNodesOpened && nodeHasItens(node));
|
|
@@ -67,6 +65,8 @@ const TreeNode = props => {
|
|
|
67
65
|
const checked = selectedIds && selectedIds.includes(node[valuePropName]) || required;
|
|
68
66
|
if (node !== props.node) {
|
|
69
67
|
setNode(props.node);
|
|
68
|
+
setIsVisible(startNodesOpened && nodeHasItens(node));
|
|
69
|
+
setWasOpened(startNodesOpened && nodeHasItens(node));
|
|
70
70
|
}
|
|
71
71
|
const openCloseTree = currentNode => {
|
|
72
72
|
if (!wasOpened && handlerOnNodeOpen) {
|
|
@@ -80,6 +80,7 @@ const TreeNode = props => {
|
|
|
80
80
|
let span = /*#__PURE__*/_react.default.createElement("noscript", null);
|
|
81
81
|
if (node.itens && node.itens.length > 0 || alwaysShowArrow) {
|
|
82
82
|
span = /*#__PURE__*/_react.default.createElement("span", {
|
|
83
|
+
onKeyPress: () => {},
|
|
83
84
|
tabIndex: 0,
|
|
84
85
|
role: "button",
|
|
85
86
|
className: isLoading ? 'loading' : 'opencloseicon',
|
|
@@ -87,7 +88,7 @@ const TreeNode = props => {
|
|
|
87
88
|
}, isLoading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoading.default, {
|
|
88
89
|
size: "35px"
|
|
89
90
|
}) : /*#__PURE__*/_react.default.createElement(_icons.default, {
|
|
90
|
-
name: isVisible ? '
|
|
91
|
+
name: isVisible ? 'up' : 'down',
|
|
91
92
|
size: 10
|
|
92
93
|
}));
|
|
93
94
|
}
|
|
@@ -118,8 +119,8 @@ const TreeNode = props => {
|
|
|
118
119
|
validator,
|
|
119
120
|
applyBehavior
|
|
120
121
|
} = validation;
|
|
121
|
-
if (_lodash.default.isEmpty(elementBehavior) && validator && validator(node)) {
|
|
122
|
-
elementBehavior = options[applyBehavior
|
|
122
|
+
if (_lodash.default.isEmpty(elementBehavior) && validator && validator(node) && applyBehavior) {
|
|
123
|
+
elementBehavior = options[applyBehavior] || options.unvisible;
|
|
123
124
|
}
|
|
124
125
|
});
|
|
125
126
|
}
|
|
@@ -129,7 +130,7 @@ const TreeNode = props => {
|
|
|
129
130
|
let updatedElements = [];
|
|
130
131
|
if (elements) {
|
|
131
132
|
updatedElements = _react.default.Children.map(elements, element => {
|
|
132
|
-
if (
|
|
133
|
+
if (/*#__PURE__*/_react.default.isValidElement(element) && element.props) {
|
|
133
134
|
const _element$props = element.props,
|
|
134
135
|
{
|
|
135
136
|
validationKey,
|
|
@@ -165,7 +166,7 @@ const TreeNode = props => {
|
|
|
165
166
|
} : {};
|
|
166
167
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
167
168
|
style: style,
|
|
168
|
-
key:
|
|
169
|
+
key: `element-${uuid.v1()}`,
|
|
169
170
|
className: "element"
|
|
170
171
|
}, element);
|
|
171
172
|
});
|
|
@@ -179,13 +180,8 @@ const TreeNode = props => {
|
|
|
179
180
|
customClass: "node-toolbarelements"
|
|
180
181
|
}, /*#__PURE__*/_react.default.createElement(_toolbar.ToolBarGroup, null, updatedNodeRightElements)) : null;
|
|
181
182
|
};
|
|
182
|
-
(0, _react.useEffect)(() => {
|
|
183
|
-
setIsVisible(startNodesOpened && nodeHasItens(node));
|
|
184
|
-
setWasOpened(startNodesOpened && nodeHasItens(node));
|
|
185
|
-
}, [node]);
|
|
186
183
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
187
|
-
|
|
188
|
-
className: "treeviewitem ".concat(customClass)
|
|
184
|
+
className: "treeviewitem"
|
|
189
185
|
}, getSpan(), /*#__PURE__*/_react.default.createElement("div", {
|
|
190
186
|
className: "label",
|
|
191
187
|
style: {
|
|
@@ -202,7 +198,7 @@ const TreeNode = props => {
|
|
|
202
198
|
}, showCheckBox ? /*#__PURE__*/_react.default.createElement(_checkbox.default, {
|
|
203
199
|
checked: checked,
|
|
204
200
|
disabled: required || disabled,
|
|
205
|
-
value:
|
|
201
|
+
value: `${node[valuePropName]}`,
|
|
206
202
|
label: node[labelPropName],
|
|
207
203
|
tooltip: required ? defaultDisabledTooltip : '',
|
|
208
204
|
onChange: disabled || required ? undefined : e => {
|
package/lib/treeview/index.js
CHANGED
|
@@ -47,13 +47,11 @@ const TreeView = props => {
|
|
|
47
47
|
nodeToolbarElements,
|
|
48
48
|
onNodeClick,
|
|
49
49
|
selectedNodeId,
|
|
50
|
-
customClass
|
|
50
|
+
customClass,
|
|
51
51
|
children,
|
|
52
52
|
styleForContainer,
|
|
53
53
|
bordered,
|
|
54
|
-
requiredIds: propsRequiredIds = []
|
|
55
|
-
customClassForNodes = '',
|
|
56
|
-
customStyleForNodes
|
|
54
|
+
requiredIds: propsRequiredIds = []
|
|
57
55
|
} = props;
|
|
58
56
|
const [data, setData] = (0, _react.useState)(props.data);
|
|
59
57
|
const [currentSelectedIds, setCurrentSelectedIds] = (0, _react.useState)(selectedIds);
|
|
@@ -239,7 +237,7 @@ const TreeView = props => {
|
|
|
239
237
|
}
|
|
240
238
|
}
|
|
241
239
|
return /*#__PURE__*/_react.default.createElement(_Node.default, {
|
|
242
|
-
key:
|
|
240
|
+
key: `node-${node.id}`,
|
|
243
241
|
node: node,
|
|
244
242
|
idsInLoading: idsInLoading,
|
|
245
243
|
startNodesOpened: startNodesOpened,
|
|
@@ -253,9 +251,7 @@ const TreeView = props => {
|
|
|
253
251
|
nodeMenuButtonSize: nodeMenuButtonSize,
|
|
254
252
|
onNodeClick: onNodeClick,
|
|
255
253
|
selectedNodeId: selectedNodeId,
|
|
256
|
-
handlerOnNodeOpen: handleOnNodeOpen
|
|
257
|
-
customClass: customClassForNodes,
|
|
258
|
-
customStyle: customStyleForNodes
|
|
254
|
+
handlerOnNodeOpen: handleOnNodeOpen
|
|
259
255
|
}, childrenIds.length > 0 && node.itens && node.itens.map(nodeitem => buildTree(nodeitem, node.id, idsWithChildren)));
|
|
260
256
|
};
|
|
261
257
|
const handleNewSelectedIds = selectedNodeIds => {
|
|
@@ -281,7 +277,7 @@ const TreeView = props => {
|
|
|
281
277
|
setData(props.data);
|
|
282
278
|
} else if (!isSameSelectedIds) {
|
|
283
279
|
setCurrentSelectedIds(selectedIds);
|
|
284
|
-
onSelectedIdsChange
|
|
280
|
+
onSelectedIdsChange?.(selectedIds);
|
|
285
281
|
setPropSelectedIds(selectedIds);
|
|
286
282
|
}
|
|
287
283
|
}, [selectedIds.length, props.data]);
|
|
@@ -311,10 +307,10 @@ const TreeView = props => {
|
|
|
311
307
|
return /*#__PURE__*/_react.default.createElement(_constants.TreeviewContext.Provider, {
|
|
312
308
|
value: contextValues
|
|
313
309
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
314
|
-
className:
|
|
310
|
+
className: `treeview-component ${customClass}`
|
|
315
311
|
}, children, /*#__PURE__*/_react.default.createElement("ul", {
|
|
316
312
|
style: styleForContainer,
|
|
317
|
-
className:
|
|
313
|
+
className: `treeviewcontainer ${bordered && '-bordered'}`
|
|
318
314
|
}, buildTree(data))));
|
|
319
315
|
};
|
|
320
316
|
var _default = exports.default = TreeView;
|
package/lib/treeview/types.d.ts
CHANGED
|
@@ -47,8 +47,6 @@ interface ITreeviewProps {
|
|
|
47
47
|
enableDynamicData?: boolean;
|
|
48
48
|
idsInLoading?: number[];
|
|
49
49
|
selectedNodeId?: number;
|
|
50
|
-
customClassForNodes?: string;
|
|
51
|
-
customStyleForNodes?: CSSProperties;
|
|
52
50
|
}
|
|
53
51
|
interface ITreeNodeProps {
|
|
54
52
|
node: any;
|
|
@@ -67,8 +65,6 @@ interface ITreeNodeProps {
|
|
|
67
65
|
nodeElementsValidations?: INodeElementsValidations;
|
|
68
66
|
idsInLoading?: number[];
|
|
69
67
|
selectedNodeId?: number;
|
|
70
|
-
customClass?: string;
|
|
71
|
-
customStyle?: CSSProperties;
|
|
72
68
|
}
|
|
73
69
|
interface ITreeHeaderProps {
|
|
74
70
|
title?: string;
|
package/lib/uitour/index.js
CHANGED
|
@@ -40,7 +40,7 @@ const UiTour = props => {
|
|
|
40
40
|
const activatedEffects = (0, _react.useRef)([]);
|
|
41
41
|
const handleNextStep = () => {
|
|
42
42
|
if (hasNextStep) {
|
|
43
|
-
const currentStepIndex = data.findIndex(item => item.id ===
|
|
43
|
+
const currentStepIndex = data.findIndex(item => item.id === currentStep?.id);
|
|
44
44
|
const nextStep = data[currentStepIndex + 1];
|
|
45
45
|
const nextStepIndex = data.findIndex(item => item.id === nextStep.id);
|
|
46
46
|
const target = document.getElementById(nextStep.targetId);
|
|
@@ -53,7 +53,7 @@ const UiTour = props => {
|
|
|
53
53
|
};
|
|
54
54
|
const handleBackStep = () => {
|
|
55
55
|
if (hasBackStep) {
|
|
56
|
-
const currentStepIndex = data.findIndex(item => item.id ===
|
|
56
|
+
const currentStepIndex = data.findIndex(item => item.id === currentStep?.id);
|
|
57
57
|
const backStep = data[currentStepIndex - 1];
|
|
58
58
|
const backStepIndex = data.findIndex(item => item.id === backStep.id);
|
|
59
59
|
const target = document.getElementById(backStep.targetId);
|
|
@@ -72,7 +72,7 @@ const UiTour = props => {
|
|
|
72
72
|
if (stepRef.current) {
|
|
73
73
|
const stepRect = stepRef.current.getBoundingClientRect();
|
|
74
74
|
const windowWidth = window.innerWidth;
|
|
75
|
-
if (stepRect.right >= windowWidth ||
|
|
75
|
+
if (stepRect.right >= windowWidth || currentStep?.position === _helpers.STEP_POSITIONS.right) {
|
|
76
76
|
setStepPosition(_helpers.STEP_POSITIONS.right);
|
|
77
77
|
setStepDimensions({
|
|
78
78
|
top: target.top - _helpers.ARROW_HEIGHT,
|
|
@@ -179,9 +179,8 @@ const UiTour = props => {
|
|
|
179
179
|
mutationObserver = new MutationObserver(() => {
|
|
180
180
|
const targetObserved = document.getElementById(initialStep.targetId);
|
|
181
181
|
if (targetObserved) {
|
|
182
|
-
var _mutationObserver;
|
|
183
182
|
showStepTour(initialStep);
|
|
184
|
-
|
|
183
|
+
mutationObserver?.disconnect();
|
|
185
184
|
mutationObserver = null;
|
|
186
185
|
}
|
|
187
186
|
});
|
|
@@ -192,8 +191,7 @@ const UiTour = props => {
|
|
|
192
191
|
}
|
|
193
192
|
}
|
|
194
193
|
return () => {
|
|
195
|
-
|
|
196
|
-
(_mutationObserver2 = mutationObserver) === null || _mutationObserver2 === void 0 ? void 0 : _mutationObserver2.disconnect();
|
|
194
|
+
mutationObserver?.disconnect();
|
|
197
195
|
mutationObserver = null;
|
|
198
196
|
};
|
|
199
197
|
}, [visible, data]);
|
|
@@ -207,7 +205,7 @@ const UiTour = props => {
|
|
|
207
205
|
className: "uitour-component"
|
|
208
206
|
}, currentStep && /*#__PURE__*/_react.default.createElement("div", {
|
|
209
207
|
ref: stepRef,
|
|
210
|
-
className:
|
|
208
|
+
className: `step -${stepPosition}`,
|
|
211
209
|
key: currentStep.id,
|
|
212
210
|
style: _objectSpread({}, stepDimensions)
|
|
213
211
|
}, showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "linear-react-components-ui",
|
|
3
|
-
"version": "1.1.20-beta.
|
|
3
|
+
"version": "1.1.20-beta.12",
|
|
4
4
|
"description": "Linear Sistemas ReactJs Components",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib/index.cjs",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"homepage": "",
|
|
30
30
|
"repository": {
|
|
31
31
|
"type": "git",
|
|
32
|
-
"url": "git@
|
|
32
|
+
"url": "git@gitlab.com:linear-front/linear-react-components-ui.git"
|
|
33
33
|
},
|
|
34
34
|
"browserslist": {
|
|
35
35
|
"production": [
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
@import "colors.scss";
|
|
2
|
-
|
|
3
|
-
.wizard-dialog {
|
|
4
|
-
.wizard-wrapper {
|
|
5
|
-
.wizard-content {
|
|
6
|
-
display: flex !important;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
.wizard-progresbar {
|
|
9
|
-
width: 100%;
|
|
10
|
-
display: grid;
|
|
11
|
-
grid-auto-columns: 1fr;
|
|
12
|
-
grid-auto-flow: column;
|
|
13
|
-
justify-content: space-between;
|
|
14
|
-
padding: 20px;
|
|
15
|
-
margin-bottom: 20px;
|
|
16
|
-
border-bottom: 2px solid $component-border-color;
|
|
17
|
-
gap: 10px;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
> .title {
|
|
20
|
-
font-size: 16px;
|
|
21
|
-
font-weight: 600;
|
|
22
|
-
display: flex;
|
|
23
|
-
align-items: center;
|
|
24
|
-
flex-direction: column;
|
|
25
|
-
position: relative;
|
|
26
|
-
flex: 1;
|
|
27
|
-
text-align: center;
|
|
28
|
-
&:first-child {
|
|
29
|
-
.step {
|
|
30
|
-
align-self: flex-start;
|
|
31
|
-
}
|
|
32
|
-
.step-title {
|
|
33
|
-
align-self: flex-start;
|
|
34
|
-
text-align: left;
|
|
35
|
-
}
|
|
36
|
-
&:before {
|
|
37
|
-
right: auto;
|
|
38
|
-
left: 45px;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
&:last-child {
|
|
42
|
-
.step {
|
|
43
|
-
align-self: flex-end;
|
|
44
|
-
}
|
|
45
|
-
.step-title {
|
|
46
|
-
align-self: flex-end;
|
|
47
|
-
text-align: right;
|
|
48
|
-
}
|
|
49
|
-
&:after {
|
|
50
|
-
left: auto;
|
|
51
|
-
right: 45px;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
&::after, &::before {
|
|
55
|
-
content: "";
|
|
56
|
-
position: absolute;
|
|
57
|
-
height: 2px;
|
|
58
|
-
background-color: $component-border-color;
|
|
59
|
-
top: 18px;
|
|
60
|
-
width: calc(100% - 25px);
|
|
61
|
-
transition: all 0.2s ease-in-out;
|
|
62
|
-
}
|
|
63
|
-
&::after {
|
|
64
|
-
left: calc(50% + 18px);
|
|
65
|
-
}
|
|
66
|
-
&::before {
|
|
67
|
-
right: calc(50% + 18px);
|
|
68
|
-
}
|
|
69
|
-
&[data-completed="true"] {
|
|
70
|
-
&::after {
|
|
71
|
-
background-color: $success-color !important;
|
|
72
|
-
}
|
|
73
|
-
+ .title::before {
|
|
74
|
-
background-color: $success-color !important;
|
|
75
|
-
}
|
|
76
|
-
&:first-child::before {
|
|
77
|
-
background-color: $success-color !important;
|
|
78
|
-
}
|
|
79
|
-
& + .title:after {
|
|
80
|
-
background-color: $success-color !important;
|
|
81
|
-
}
|
|
82
|
-
> .step {
|
|
83
|
-
> .number {
|
|
84
|
-
background-color: $success-color;
|
|
85
|
-
border-color: $success-color;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
&[data-disabled="true"] .step {
|
|
90
|
-
opacity: 0.3;
|
|
91
|
-
}
|
|
92
|
-
> .step {
|
|
93
|
-
display: flex;
|
|
94
|
-
flex-direction: column;
|
|
95
|
-
align-items: center;
|
|
96
|
-
justify-content: center;
|
|
97
|
-
width: 54px;
|
|
98
|
-
> .number {
|
|
99
|
-
display: flex;
|
|
100
|
-
align-items: center;
|
|
101
|
-
justify-content: center;
|
|
102
|
-
font-size: 20px;
|
|
103
|
-
font-weight: 600;
|
|
104
|
-
width: 36px;
|
|
105
|
-
height: 36px;
|
|
106
|
-
border-radius: 100%;
|
|
107
|
-
color: #fff;
|
|
108
|
-
background-color: $color-light-dark;
|
|
109
|
-
z-index: 1;
|
|
110
|
-
transition: all 0.2s ease-in-out;
|
|
111
|
-
border: 2px solid $color-light-dark;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
> .step-title {
|
|
115
|
-
max-width: 150px;
|
|
116
|
-
overflow: hidden;
|
|
117
|
-
margin-top: 6px;
|
|
118
|
-
font-weight: 500;
|
|
119
|
-
color: $font-color-soft;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { WizardControls, WizardComponentProps } from '../types.js';
|
|
3
|
-
export { WizardStep as Step } from './step.js';
|
|
4
|
-
export { useWizard } from './useWizard.js';
|
|
5
|
-
import '../../@types/Align.js';
|
|
6
|
-
import '../../@types/Icon.js';
|
|
7
|
-
import '../../icons/helper.js';
|
|
8
|
-
|
|
9
|
-
declare const WizardContext: React__default.Context<WizardControls | null>;
|
|
10
|
-
declare const useWizardContext: () => WizardControls | null;
|
|
11
|
-
declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
|
|
12
|
-
|
|
13
|
-
export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Container = Wizard;
|
|
7
|
-
Object.defineProperty(exports, "Step", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _step.WizardStep;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
exports.default = exports.WizardContext = void 0;
|
|
14
|
-
Object.defineProperty(exports, "useWizard", {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function () {
|
|
17
|
-
return _useWizard.useWizard;
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
exports.useWizardContext = void 0;
|
|
21
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
22
|
-
var _lodash = _interopRequireDefault(require("lodash"));
|
|
23
|
-
var _form = _interopRequireDefault(require("../form/"));
|
|
24
|
-
var _progressbar = require("./progressbar");
|
|
25
|
-
require("../../assets/styles/wizard.scss");
|
|
26
|
-
var _step = require("./step");
|
|
27
|
-
var _useWizard = require("./useWizard");
|
|
28
|
-
const _excluded = ["children", "controls", "showProgressbar"];
|
|
29
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
30
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
31
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
32
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
33
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
34
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
35
|
-
const WizardContext = exports.WizardContext = /*#__PURE__*/_react.default.createContext(null);
|
|
36
|
-
const useWizardContext = () => _react.default.useContext(WizardContext);
|
|
37
|
-
exports.useWizardContext = useWizardContext;
|
|
38
|
-
function Wizard(_ref) {
|
|
39
|
-
let {
|
|
40
|
-
children,
|
|
41
|
-
controls,
|
|
42
|
-
showProgressbar = true
|
|
43
|
-
} = _ref,
|
|
44
|
-
dialogProps = _objectWithoutProperties(_ref, _excluded);
|
|
45
|
-
const {
|
|
46
|
-
currentStep,
|
|
47
|
-
setTotalSteps
|
|
48
|
-
} = controls;
|
|
49
|
-
const steps = _react.default.Children.toArray(children);
|
|
50
|
-
const stepsTitle = steps.map((step, index) => {
|
|
51
|
-
return {
|
|
52
|
-
title: String(step.props.title),
|
|
53
|
-
number: index + 1,
|
|
54
|
-
completed: index < currentStep - 1 && index !== currentStep
|
|
55
|
-
};
|
|
56
|
-
});
|
|
57
|
-
const currentStepElement = steps[currentStep - 1];
|
|
58
|
-
if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
|
|
59
|
-
(0, _react.useEffect)(() => {
|
|
60
|
-
setTotalSteps(steps.length);
|
|
61
|
-
}, [steps.length]);
|
|
62
|
-
return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
|
|
63
|
-
value: controls
|
|
64
|
-
}, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
|
|
65
|
-
className: "wizard-dialog",
|
|
66
|
-
wrapperClassName: "wizard-wrapper",
|
|
67
|
-
contentClassName: "wizard-content"
|
|
68
|
-
}, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
|
|
69
|
-
stepsTitle: stepsTitle
|
|
70
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
71
|
-
className: "wizard-body"
|
|
72
|
-
}, currentStepElement)));
|
|
73
|
-
}
|
|
74
|
-
var _default = exports.default = Wizard;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
|
|
3
|
-
declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<{
|
|
4
|
-
customClass?: string;
|
|
5
|
-
stepsTitle: {
|
|
6
|
-
title: string;
|
|
7
|
-
number: number;
|
|
8
|
-
completed: boolean;
|
|
9
|
-
}[];
|
|
10
|
-
customStyle?: CSSProperties;
|
|
11
|
-
}>): JSX.Element;
|
|
12
|
-
|
|
13
|
-
export { Progressbar };
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Progressbar = Progressbar;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _ = require(".");
|
|
9
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
function Progressbar(_ref) {
|
|
11
|
-
let {
|
|
12
|
-
customClass,
|
|
13
|
-
customStyle,
|
|
14
|
-
stepsTitle
|
|
15
|
-
} = _ref;
|
|
16
|
-
const context = (0, _.useWizardContext)();
|
|
17
|
-
if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
|
|
18
|
-
const {
|
|
19
|
-
currentStep
|
|
20
|
-
} = context;
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
22
|
-
className: "wizard-progresbar ".concat(customClass),
|
|
23
|
-
style: customStyle
|
|
24
|
-
}, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
|
|
25
|
-
key: step.number,
|
|
26
|
-
className: "title",
|
|
27
|
-
"data-completed": step.completed,
|
|
28
|
-
"data-disabled": step.number > currentStep
|
|
29
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
30
|
-
className: "step"
|
|
31
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
32
|
-
className: "number"
|
|
33
|
-
}, step.number)), /*#__PURE__*/_react.default.createElement("span", {
|
|
34
|
-
className: "step-title"
|
|
35
|
-
}, step.title))));
|
|
36
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { WizardStepComponentProps } from '../types.js';
|
|
2
|
-
import 'react';
|
|
3
|
-
import '../../@types/Align.js';
|
|
4
|
-
import '../../@types/Icon.js';
|
|
5
|
-
import '../../icons/helper.js';
|
|
6
|
-
|
|
7
|
-
declare function WizardStep({ children, customClass, customStyle }: Readonly<WizardStepComponentProps>): JSX.Element;
|
|
8
|
-
|
|
9
|
-
export { WizardStep };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.WizardStep = WizardStep;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _ = require(".");
|
|
9
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
function WizardStep(_ref) {
|
|
11
|
-
let {
|
|
12
|
-
children,
|
|
13
|
-
customClass = '',
|
|
14
|
-
customStyle
|
|
15
|
-
} = _ref;
|
|
16
|
-
const context = (0, _.useWizardContext)();
|
|
17
|
-
if (!context) throw new Error('WizardStep must be used within a Wizard component');
|
|
18
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
19
|
-
className: "wizard-step-component ".concat(customClass),
|
|
20
|
-
style: customStyle
|
|
21
|
-
}, children);
|
|
22
|
-
}
|