@synerise/ds-manageable-list 0.21.8 → 0.23.2

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/README.md +13 -2
  3. package/dist/Item/Item.js +4 -2
  4. package/dist/Item/Item.types.d.ts +2 -0
  5. package/dist/Item/ItemActions/ItemActions.d.ts +2 -4
  6. package/dist/Item/ItemActions/ItemActions.js +13 -5
  7. package/dist/Item/ItemActions/ItemActions.types.d.ts +2 -3
  8. package/dist/Item/SimpleItem/SimpleItem.js +4 -2
  9. package/dist/Item/SimpleItem/SimpleItem.styles.js +1 -1
  10. package/dist/Item/SimpleItem/SimpleItem.types.d.ts +2 -0
  11. package/dist/ManageableList.js +5 -3
  12. package/dist/ManageableList.types.d.ts +7 -0
  13. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,44 @@
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.23.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.23.1...@synerise/ds-manageable-list@0.23.2) (2022-01-24)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **manageable-list:** add max-width value into manageable-list item ([aedcd28](https://github.com/Synerise/synerise-design/commit/aedcd287d1f9e38dc42596abdc9c8efe97d6ee1f))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.23.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.23.0...@synerise/ds-manageable-list@0.23.1) (2022-01-17)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-manageable-list
20
+
21
+
22
+
23
+
24
+
25
+ # [0.23.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.22.0...@synerise/ds-manageable-list@0.23.0) (2022-01-13)
26
+
27
+ **Note:** Version bump only for package @synerise/ds-manageable-list
28
+
29
+
30
+
31
+
32
+
33
+ # [0.22.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.21.8...@synerise/ds-manageable-list@0.22.0) (2022-01-04)
34
+
35
+
36
+ ### Features
37
+
38
+ * **manageable-list:** adds additional actions ([f744494](https://github.com/Synerise/synerise-design/commit/f744494d6cc903b6cabbfaf223b539cccfef1a68))
39
+
40
+
41
+
42
+
43
+
6
44
  ## [0.21.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.21.7...@synerise/ds-manageable-list@0.21.8) (2021-12-29)
7
45
 
8
46
  **Note:** Version bump only for package @synerise/ds-manageable-list
package/README.md CHANGED
@@ -48,8 +48,8 @@ ManageableList UI Component
48
48
  | changeOrderDisabled | Disable change of order | boolean | `false` |
49
49
  | greyBackground | Change background color of list and list items | boolean | `false` |
50
50
  | texts | Texts on buttons, confirms and popups | Texts | - |
51
- | searchQuery | Search query used to highlight list item name | string | - |
52
-
51
+ | searchQuery | Search query used to highlight list item name | string | - |
52
+ | additionalActions | Additional actions for single list item | AdditionalAction[] | - |
53
53
 
54
54
  ### Texts
55
55
 
@@ -83,3 +83,14 @@ ManageableList UI Component
83
83
  | tag | Tag (ds-tags), available only for content list type | Tag | - |
84
84
  | icon | Icon (ds-icon) | Icon | - |
85
85
  | content | Content rendered in content type list | React.ReactNode | - |
86
+
87
+
88
+ #### AdditionalAction
89
+
90
+ | Property | Description | Type | Default |
91
+ | ------------ | --------------------------------------------------- | --------------- | ------- |
92
+ | tooltip | Name of action visible on tooltip | string | - |
93
+ | icon | ds-icon component visible on item | React.ReactNode | - |
94
+ | onClick | Callback triggered when user clicks on icon | (item: ItemProps) => void | - |
95
+ | color | color of icon | string | grey-500 |
96
+
package/dist/Item/Item.js CHANGED
@@ -23,7 +23,8 @@ var Item = function Item(_ref) {
23
23
  onMoveBottom = _ref.onMoveBottom,
24
24
  onMoveTop = _ref.onMoveTop,
25
25
  isFirst = _ref.isFirst,
26
- isLast = _ref.isLast;
26
+ isLast = _ref.isLast,
27
+ additionalActions = _ref.additionalActions;
27
28
 
28
29
  switch (listType) {
29
30
  case ListType.CONTENT:
@@ -67,7 +68,8 @@ var Item = function Item(_ref) {
67
68
  onSelect: onSelect,
68
69
  onUpdate: onUpdate,
69
70
  onRemove: onRemove,
70
- texts: texts
71
+ texts: texts,
72
+ additionalActions: additionalActions
71
73
  });
72
74
  }
73
75
  };
package/dist/Item/Item.types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { AdditionalAction } from 'ManageableList.types';
2
3
  export declare type Props = {
3
4
  item: ItemProps;
4
5
  isFirst?: boolean;
@@ -30,6 +31,7 @@ export declare type Props = {
30
31
  onExpand?: (id: React.ReactText, isExpanded: boolean) => void;
31
32
  hideExpander?: boolean;
32
33
  expanded?: boolean;
34
+ additionalActions?: AdditionalAction[];
33
35
  };
34
36
  export declare type ItemProps<T extends object = {}> = T & {
35
37
  id: React.ReactText;
package/dist/Item/ItemActions/ItemActions.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { ItemActionsProps } from './ItemActions.types';
3
- declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<ItemActionsProps>, "children" | "item" | "duplicateAction" | "duplicateActionTooltip" | "editAction" | "editActionTooltip" | "removeAction" | "removeActionTooltip"> & {
4
- theme?: any;
5
- }>;
6
- export default _default;
3
+ declare const ItemActions: React.FC<ItemActionsProps>;
4
+ export default ItemActions;
package/dist/Item/ItemActions/ItemActions.js CHANGED
@@ -1,18 +1,19 @@
1
1
  import * as React from 'react';
2
2
  import Icon, { EditS, DuplicateS, CloseS } from '@synerise/ds-icon';
3
- import { withTheme } from 'styled-components';
4
3
  import Tooltip from '@synerise/ds-tooltip';
4
+ import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
5
5
  import * as S from './ItemActions.styles';
6
+ var DEFAULT_COLOR = theme.palette['grey-500'];
6
7
 
7
8
  var ItemActions = function ItemActions(_ref) {
8
9
  var item = _ref.item,
9
- theme = _ref.theme,
10
10
  duplicateAction = _ref.duplicateAction,
11
11
  duplicateActionTooltip = _ref.duplicateActionTooltip,
12
12
  editAction = _ref.editAction,
13
13
  editActionTooltip = _ref.editActionTooltip,
14
14
  removeAction = _ref.removeAction,
15
- removeActionTooltip = _ref.removeActionTooltip;
15
+ removeActionTooltip = _ref.removeActionTooltip,
16
+ additionalActions = _ref.additionalActions;
16
17
  var handleDuplicate = React.useCallback(function (event) {
17
18
  event.stopPropagation();
18
19
  var id = item.id;
@@ -45,7 +46,14 @@ var ItemActions = function ItemActions(_ref) {
45
46
  onClick: handleClick
46
47
  })));
47
48
  }, []);
48
- return /*#__PURE__*/React.createElement(S.ItemActionsWrapper, null, renderIcon(Boolean(item.canUpdate), /*#__PURE__*/React.createElement(EditS, null), theme.palette['grey-500'], handleEdit, 'list-item-edit', editActionTooltip), renderIcon(Boolean(item.canDuplicate), /*#__PURE__*/React.createElement(DuplicateS, null), theme.palette['grey-500'], handleDuplicate, 'list-item-duplicate', duplicateActionTooltip), renderIcon(Boolean(item.canDelete), /*#__PURE__*/React.createElement(CloseS, null), theme.palette['red-600'], handleRemove, 'list-item-remove', removeActionTooltip));
49
+ var renderAdditionalActions = React.useMemo(function () {
50
+ return additionalActions && additionalActions.map(function (action, index) {
51
+ return renderIcon(true, action.icon, action.color || DEFAULT_COLOR, function () {
52
+ return action.onClick(item);
53
+ }, "additional-action-" + index, action.tooltip);
54
+ });
55
+ }, [additionalActions, item, renderIcon]);
56
+ return /*#__PURE__*/React.createElement(S.ItemActionsWrapper, null, additionalActions && renderAdditionalActions, renderIcon(Boolean(item.canUpdate), /*#__PURE__*/React.createElement(EditS, null), DEFAULT_COLOR, handleEdit, 'list-item-edit', editActionTooltip), renderIcon(Boolean(item.canDuplicate), /*#__PURE__*/React.createElement(DuplicateS, null), DEFAULT_COLOR, handleDuplicate, 'list-item-duplicate', duplicateActionTooltip), renderIcon(Boolean(item.canDelete), /*#__PURE__*/React.createElement(CloseS, null), theme.palette['red-600'], handleRemove, 'list-item-remove', removeActionTooltip));
49
57
  };
50
58
 
51
- export default withTheme(ItemActions);
59
+ export default ItemActions;
package/dist/Item/ItemActions/ItemActions.types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { AdditionalAction } from 'ManageableList.types';
2
3
  import { ItemProps } from '../Item.types';
3
4
  export declare type ItemActionsProps = {
4
5
  item: ItemProps;
@@ -12,7 +13,5 @@ export declare type ItemActionsProps = {
12
13
  id: React.ReactText;
13
14
  }) => void;
14
15
  duplicateActionTooltip?: string | React.ReactNode;
15
- theme: {
16
- [k: string]: string;
17
- };
16
+ additionalActions?: AdditionalAction[];
18
17
  };
package/dist/Item/SimpleItem/SimpleItem.js CHANGED
@@ -10,7 +10,8 @@ var SimpleItem = function SimpleItem(_ref) {
10
10
  onRemove = _ref.onRemove,
11
11
  onSelect = _ref.onSelect,
12
12
  onUpdate = _ref.onUpdate,
13
- texts = _ref.texts;
13
+ texts = _ref.texts,
14
+ additionalActions = _ref.additionalActions;
14
15
 
15
16
  var _React$useState = React.useState(false),
16
17
  editMode = _React$useState[0],
@@ -41,7 +42,8 @@ var SimpleItem = function SimpleItem(_ref) {
41
42
  removeAction: onRemove,
42
43
  editActionTooltip: (texts == null ? void 0 : texts.itemActionRenameTooltip) || undefined,
43
44
  duplicateActionTooltip: (texts == null ? void 0 : texts.itemActionDuplicateTooltip) || undefined,
44
- removeActionTooltip: (texts == null ? void 0 : texts.itemActionDeleteTooltip) || undefined
45
+ removeActionTooltip: (texts == null ? void 0 : texts.itemActionDeleteTooltip) || undefined,
46
+ additionalActions: additionalActions
45
47
  })
46
48
  }, /*#__PURE__*/React.createElement(ItemName, {
47
49
  item: item,
package/dist/Item/SimpleItem/SimpleItem.styles.js CHANGED
@@ -5,7 +5,7 @@ import { ItemActionsWrapper } from '../ItemActions/ItemActions.styles';
5
5
  export var ItemLabel = styled.span.withConfig({
6
6
  displayName: "SimpleItemstyles__ItemLabel",
7
7
  componentId: "sc-1eyeaqw-0"
8
- })(["", ";color:", ";height:24px;display:inline-block;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:24px;max-width:100%;user-select:none;.search-highlight{font-weight:500;color:", ";}"], macro.h300, function (_ref) {
8
+ })(["", ";color:", ";height:24px;display:inline-block;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:24px;max-width:170px;user-select:none;.search-highlight{font-weight:500;color:", ";}"], macro.h300, function (_ref) {
9
9
  var theme = _ref.theme;
10
10
  return theme.palette['grey-600'];
11
11
  }, function (props) {
package/dist/Item/SimpleItem/SimpleItem.types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { AdditionalAction } from 'ManageableList.types';
2
3
  import { ItemProps } from '../Item.types';
3
4
  export declare type Props = {
4
5
  item: ItemProps;
@@ -15,4 +16,5 @@ export declare type Props = {
15
16
  texts?: {
16
17
  [k: string]: string | React.ReactNode;
17
18
  };
19
+ additionalActions?: AdditionalAction[];
18
20
  };
package/dist/ManageableList.js CHANGED
@@ -52,7 +52,8 @@ var ManageableList = function ManageableList(_ref) {
52
52
  expandedIds = _ref.expandedIds,
53
53
  texts = _ref.texts,
54
54
  _ref$changeOrderByBut = _ref.changeOrderByButtons,
55
- changeOrderByButtons = _ref$changeOrderByBut === void 0 ? false : _ref$changeOrderByBut;
55
+ changeOrderByButtons = _ref$changeOrderByBut === void 0 ? false : _ref$changeOrderByBut,
56
+ additionalActions = _ref.additionalActions;
56
57
 
57
58
  var _React$useState = React.useState(expandedIds),
58
59
  stateExpandedIds = _React$useState[0],
@@ -219,9 +220,10 @@ var ManageableList = function ManageableList(_ref) {
219
220
  texts: itemTexts,
220
221
  searchQuery: searchQuery,
221
222
  hideExpander: expanderDisabled,
222
- expanded: !!stateExpandedIds && stateExpandedIds.includes(item.id)
223
+ expanded: !!stateExpandedIds && stateExpandedIds.includes(item.id),
224
+ additionalActions: additionalActions
223
225
  });
224
- }, [itemsToRender, type, onItemSelect, onItemEdit, onItemRemove, onItemDuplicate, onExpand, changeOrderByButtons, onMoveTop, onMoveBottom, onChangeOrder, changeOrderDisabled, greyBackground, selectedItemId, itemTexts, searchQuery, expanderDisabled, stateExpandedIds]);
226
+ }, [itemsToRender, type, onItemSelect, onItemEdit, onItemRemove, onItemDuplicate, onExpand, changeOrderByButtons, onMoveTop, onMoveBottom, onChangeOrder, changeOrderDisabled, greyBackground, selectedItemId, itemTexts, searchQuery, expanderDisabled, stateExpandedIds, additionalActions]);
225
227
  var itemList = React.useMemo(function () {
226
228
  return onChangeOrder && !changeOrderDisabled ? /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
227
229
  list: itemsToRender,
package/dist/ManageableList.types.d.ts CHANGED
@@ -10,6 +10,12 @@ export declare enum ListType {
10
10
  CONTENT = "content",
11
11
  FILTER = "filter"
12
12
  }
13
+ export declare type AdditionalAction = {
14
+ icon: React.ReactNode;
15
+ color?: string;
16
+ onClick: (item: ItemProps) => void;
17
+ tooltip: string;
18
+ };
13
19
  export interface ManageableListProps<T extends object> {
14
20
  className?: string;
15
21
  maxToShowItems: number;
@@ -45,6 +51,7 @@ export interface ManageableListProps<T extends object> {
45
51
  expansionBehaviour?: string;
46
52
  expandedIds?: React.ReactText[];
47
53
  changeOrderByButtons?: boolean;
54
+ additionalActions?: AdditionalAction[];
48
55
  }
49
56
  export declare type Texts = {
50
57
  addItemLabel?: string | React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-manageable-list",
3
- "version": "0.21.8",
3
+ "version": "0.23.2",
4
4
  "description": "ManageableList UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,19 +32,19 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-avatar": "^0.14.6",
36
- "@synerise/ds-button": "^0.16.3",
37
- "@synerise/ds-dropdown": "^0.17.6",
38
- "@synerise/ds-icon": "^0.46.2",
39
- "@synerise/ds-inline-edit": "^0.5.8",
40
- "@synerise/ds-input": "^0.18.3",
35
+ "@synerise/ds-avatar": "^0.14.7",
36
+ "@synerise/ds-button": "^0.16.4",
37
+ "@synerise/ds-dropdown": "^0.17.7",
38
+ "@synerise/ds-icon": "^0.47.0",
39
+ "@synerise/ds-inline-edit": "^0.6.1",
40
+ "@synerise/ds-input": "^0.18.4",
41
41
  "@synerise/ds-list": "^0.6.5",
42
- "@synerise/ds-menu": "^0.11.5",
43
- "@synerise/ds-modal": "^0.15.3",
44
- "@synerise/ds-popconfirm": "^0.8.5",
45
- "@synerise/ds-result": "^0.6.3",
46
- "@synerise/ds-tags": "^0.6.6",
47
- "@synerise/ds-tooltip": "^0.11.3",
42
+ "@synerise/ds-menu": "^0.12.1",
43
+ "@synerise/ds-modal": "^0.15.4",
44
+ "@synerise/ds-popconfirm": "^0.9.1",
45
+ "@synerise/ds-result": "^0.6.4",
46
+ "@synerise/ds-tags": "^0.6.7",
47
+ "@synerise/ds-tooltip": "^0.11.4",
48
48
  "@synerise/ds-typography": "^0.12.2",
49
49
  "@synerise/ds-utils": "^0.19.0",
50
50
  "lodash": "^4.17.19",
@@ -58,5 +58,5 @@
58
58
  "react": ">=16.9.0 < 17.0.0",
59
59
  "styled-components": "^4.4.0"
60
60
  },
61
- "gitHead": "7ddae11318ca2906145c9f48e74df41ca5f15d49"
61
+ "gitHead": "13ab7178c166b203d47cf26164256a57aed88648"
62
62
  }