@synerise/ds-manageable-list 0.26.3 → 0.26.5
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/CHANGELOG.md +22 -0
- package/README.md +1 -1
- package/dist/Item/ContentItem/ContentItem.d.ts +2 -2
- package/dist/Item/ContentItem/ContentItem.js +27 -27
- package/dist/Item/Item.types.d.ts +1 -1
- package/dist/Item/ItemActions/ItemActions.types.d.ts +1 -1
- package/dist/Item/SimpleItem/SimpleItem.types.d.ts +1 -1
- package/dist/ManageableList.js +1 -0
- package/package.json +23 -19
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.26.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.26.4...@synerise/ds-manageable-list@0.26.5) (2023-09-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **manageable-list:** updated title to toggle onclick ([69eb232](https://github.com/Synerise/synerise-design/commit/69eb232b29c5e3d35b6bb12a411fa7fcf1d8f12c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.26.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.26.3...@synerise/ds-manageable-list@0.26.4) (2023-09-05)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **manageable-list:** allow dragging only on drag handle ([76050e9](https://github.com/Synerise/synerise-design/commit/76050e9c388ade396bba89f21438c9e203b07cfc))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [0.26.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.26.2...@synerise/ds-manageable-list@0.26.3) (2023-08-30)
|
|
7
29
|
|
|
8
30
|
**Note:** Version bump only for package @synerise/ds-manageable-list
|
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ ManageableList UI Component
|
|
|
86
86
|
| content | Content rendered in content type list | React.ReactNode | - |
|
|
87
87
|
| headerSuffix | Component that will be rendered on the start of the item | React.ReactNode | - |
|
|
88
88
|
| hideHeaderSuffixOnHover | Whether to hide suffixHeader on hover | boolean | - |
|
|
89
|
-
|
|
|
89
|
+
| additionalSuffix | Component that will be rendered on the end of the item suffix | React.ReactNode | - |
|
|
90
90
|
|
|
91
91
|
#### AdditionalAction
|
|
92
92
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { ContentItemProps } from './ContentItem.types';
|
|
3
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<
|
|
3
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<ContentItemProps, "style" | "title" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "slot" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "greyBackground" | "item" | "onUpdate" | "onRemove" | "onDuplicate" | "dashed" | "changeOrderDisabled" | "texts" | "hideExpander" | "expanded" | "onExpand" | "headerSuffix" | "headerPrefix" | "contentWithoutPadding" | "onMoveTop" | "onMoveBottom" | "isFirst" | "isLast"> & {
|
|
4
4
|
theme?: any;
|
|
5
5
|
}>;
|
|
6
6
|
export default _default;
|
|
@@ -4,7 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
4
4
|
|
|
5
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
6
|
|
|
7
|
-
import
|
|
7
|
+
import React, { useCallback, useState, useEffect, useMemo } from 'react';
|
|
8
8
|
import AnimateHeight from 'react-animate-height';
|
|
9
9
|
import { withTheme } from 'styled-components';
|
|
10
10
|
import Icon, { DragHandleM, AngleBottomS, AngleTopS, OptionHorizontalM } from '@synerise/ds-icon';
|
|
@@ -40,38 +40,41 @@ var ContentItem = function ContentItem(_ref) {
|
|
|
40
40
|
isLast = _ref.isLast,
|
|
41
41
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
42
42
|
|
|
43
|
-
var
|
|
44
|
-
expandedState =
|
|
45
|
-
setExpanded =
|
|
43
|
+
var _useState = useState(expanded),
|
|
44
|
+
expandedState = _useState[0],
|
|
45
|
+
setExpanded = _useState[1];
|
|
46
46
|
|
|
47
|
-
var
|
|
48
|
-
editMode =
|
|
49
|
-
setEditMode =
|
|
47
|
+
var _useState2 = useState(false),
|
|
48
|
+
editMode = _useState2[0],
|
|
49
|
+
setEditMode = _useState2[1];
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
useEffect(function () {
|
|
52
52
|
if (expandedState !== expanded) {
|
|
53
53
|
setExpanded(expanded);
|
|
54
54
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
55
55
|
|
|
56
56
|
}, [expanded]);
|
|
57
|
-
var updateName =
|
|
57
|
+
var updateName = useCallback(function (updateParams) {
|
|
58
58
|
setEditMode(false);
|
|
59
59
|
onUpdate && onUpdate(updateParams);
|
|
60
60
|
}, [onUpdate]);
|
|
61
|
-
|
|
61
|
+
|
|
62
|
+
var enterEditMode = function enterEditMode() {
|
|
62
63
|
setEditMode(true);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var stopPropagationHandler = function stopPropagationHandler(event) {
|
|
67
|
+
event.stopPropagation();
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
var renderMoveButtons = useMemo(function () {
|
|
68
71
|
return (onMoveTop || onMoveBottom) && /*#__PURE__*/React.createElement(S.MoveItemButtons, null, onMoveTop && !isFirst && /*#__PURE__*/React.createElement(Tooltip, {
|
|
69
72
|
title: texts == null ? void 0 : texts.moveToTopTooltip
|
|
70
73
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
71
74
|
type: "ghost",
|
|
72
75
|
mode: "single-icon",
|
|
73
|
-
onClick: function onClick(
|
|
74
|
-
|
|
76
|
+
onClick: function onClick(event) {
|
|
77
|
+
event.stopPropagation();
|
|
75
78
|
onMoveTop(item);
|
|
76
79
|
}
|
|
77
80
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -81,8 +84,8 @@ var ContentItem = function ContentItem(_ref) {
|
|
|
81
84
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
82
85
|
type: "ghost",
|
|
83
86
|
mode: "single-icon",
|
|
84
|
-
onClick: function onClick(
|
|
85
|
-
|
|
87
|
+
onClick: function onClick(event) {
|
|
88
|
+
event.stopPropagation();
|
|
86
89
|
onMoveBottom(item);
|
|
87
90
|
}
|
|
88
91
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -97,15 +100,12 @@ var ContentItem = function ContentItem(_ref) {
|
|
|
97
100
|
dashed: dashed
|
|
98
101
|
}, rest), /*#__PURE__*/React.createElement(S.ItemHeader, {
|
|
99
102
|
hasPrefix: Boolean(draggable || item.tag || item.icon),
|
|
100
|
-
onDoubleClick: function onDoubleClick() {
|
|
101
|
-
!item.disableExpanding && setExpanded(false);
|
|
102
|
-
!item.disableExpanding && onExpand && onExpand(item.id, false);
|
|
103
|
-
},
|
|
104
103
|
onClick: function onClick() {
|
|
105
|
-
!item.disableExpanding && setExpanded(
|
|
106
|
-
!item.disableExpanding && onExpand && onExpand(item.id,
|
|
104
|
+
!item.disableExpanding && setExpanded(!expandedState);
|
|
105
|
+
!item.disableExpanding && onExpand && onExpand(item.id, !expandedState);
|
|
107
106
|
}
|
|
108
107
|
}, /*#__PURE__*/React.createElement(S.ItemHeaderPrefix, null, draggable && /*#__PURE__*/React.createElement(S.DraggerWrapper, {
|
|
108
|
+
className: "item-drag-handle",
|
|
109
109
|
disabled: Boolean(changeOrderDisabled)
|
|
110
110
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
111
111
|
size: 24,
|
|
@@ -132,8 +132,8 @@ var ContentItem = function ContentItem(_ref) {
|
|
|
132
132
|
"data-testid": "item-toggle-content-wrapper"
|
|
133
133
|
}, /*#__PURE__*/React.createElement(Button.Expander, {
|
|
134
134
|
disabled: item.disableExpanding,
|
|
135
|
-
onClick: function onClick(
|
|
136
|
-
!!
|
|
135
|
+
onClick: function onClick(event) {
|
|
136
|
+
!!event && event.stopPropagation();
|
|
137
137
|
!item.disableExpanding && setExpanded(!expandedState);
|
|
138
138
|
!item.disableExpanding && onExpand && onExpand(item.id, !expandedState);
|
|
139
139
|
},
|
package/dist/ManageableList.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-manageable-list",
|
|
3
|
-
"version": "0.26.
|
|
3
|
+
"version": "0.26.5",
|
|
4
4
|
"description": "ManageableList UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -32,31 +32,35 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-avatar": "^0.15.
|
|
36
|
-
"@synerise/ds-button": "^0.18.
|
|
37
|
-
"@synerise/ds-dropdown": "^0.17.
|
|
38
|
-
"@synerise/ds-icon": "^0.58.
|
|
39
|
-
"@synerise/ds-inline-edit": "^0.6.
|
|
40
|
-
"@synerise/ds-input": "^0.18.
|
|
41
|
-
"@synerise/ds-list": "^0.6.
|
|
42
|
-
"@synerise/ds-menu": "^0.17.
|
|
43
|
-
"@synerise/ds-modal": "^0.17.
|
|
44
|
-
"@synerise/ds-popconfirm": "^0.10.
|
|
45
|
-
"@synerise/ds-result": "^0.6.
|
|
46
|
-
"@synerise/ds-tags": "^0.8.
|
|
47
|
-
"@synerise/ds-tooltip": "^0.14.
|
|
48
|
-
"@synerise/ds-typography": "^0.12.
|
|
49
|
-
"@synerise/ds-utils": "^0.
|
|
35
|
+
"@synerise/ds-avatar": "^0.15.2",
|
|
36
|
+
"@synerise/ds-button": "^0.18.1",
|
|
37
|
+
"@synerise/ds-dropdown": "^0.17.77",
|
|
38
|
+
"@synerise/ds-icon": "^0.58.1",
|
|
39
|
+
"@synerise/ds-inline-edit": "^0.6.76",
|
|
40
|
+
"@synerise/ds-input": "^0.18.51",
|
|
41
|
+
"@synerise/ds-list": "^0.6.44",
|
|
42
|
+
"@synerise/ds-menu": "^0.17.17",
|
|
43
|
+
"@synerise/ds-modal": "^0.17.4",
|
|
44
|
+
"@synerise/ds-popconfirm": "^0.10.14",
|
|
45
|
+
"@synerise/ds-result": "^0.6.30",
|
|
46
|
+
"@synerise/ds-tags": "^0.8.11",
|
|
47
|
+
"@synerise/ds-tooltip": "^0.14.3",
|
|
48
|
+
"@synerise/ds-typography": "^0.12.10",
|
|
49
|
+
"@synerise/ds-utils": "^0.24.15",
|
|
50
50
|
"lodash": "^4.17.19",
|
|
51
|
+
"moment": "^2.25.3",
|
|
51
52
|
"react-animate-height": "^2.0.23",
|
|
53
|
+
"react-intl": "3.12.0",
|
|
52
54
|
"react-sortablejs": "^6.0.0"
|
|
53
55
|
},
|
|
54
56
|
"peerDependencies": {
|
|
55
57
|
"@synerise/ds-core": "*",
|
|
56
|
-
"
|
|
57
|
-
"antd": "^4",
|
|
58
|
+
"antd": "4.7.0",
|
|
58
59
|
"react": ">=16.9.0 < 17.0.0",
|
|
59
60
|
"styled-components": "^4.4.0"
|
|
60
61
|
},
|
|
61
|
-
"
|
|
62
|
+
"devDependencies": {
|
|
63
|
+
"@testing-library/react": "10.0.1"
|
|
64
|
+
},
|
|
65
|
+
"gitHead": "955a885f58b3fca4caa4f879deb147fe5b9dc6d8"
|
|
62
66
|
}
|