@ansible/ansible-ui-framework 0.0.372 → 0.0.373

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 (5) hide show
  1. package/cjs/PageTable.js +1 -1
  2. package/cjs/TypedActions/TypedActions.d.ts +9 -1
  3. package/cjs/TypedActions/TypedActions.js +34 -11
  4. package/cjs/TypedActions/TypedActionsButtons.js +7 -1
  5. package/package.json +1 -1
package/cjs/PageTable.js CHANGED
@@ -243,7 +243,7 @@ function TableCells(props) {
243
243
  width: '0%',
244
244
  right: 0,
245
245
  // display: 'flex',
246
- }, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true }) })))] }));
246
+ }, isStickyColumn: true, stickyMinWidth: "0px", className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true, isFilled: true }) })))] }));
247
247
  }
248
248
  var TableColumnSomething;
249
249
  (function (TableColumnSomething) {
package/cjs/TypedActions/TypedActions.d.ts CHANGED
@@ -33,20 +33,27 @@ export type ITypedSingleAction<T extends object> = ITypedActionCommon & {
33
33
  variant?: ButtonVariant;
34
34
  onClick: (item: T) => void;
35
35
  isDisabled?: (item: T) => string;
36
+ isHidden?: (item: T) => boolean;
36
37
  };
37
38
  export type ITypedDropdownAction<T extends object> = ITypedActionCommon & {
38
39
  type: TypedActionType.dropdown;
39
40
  variant?: ButtonVariant;
41
+ isHidden?: (item: T) => boolean;
42
+ isDisabled?: (item: T) => string;
40
43
  options: ITypedAction<T>[];
41
44
  };
42
45
  export type ITypedAction<T extends object> = ITypedActionSeperator | ITypedActionButton | ITypedBulkAction<T> | ITypedSingleAction<T> | ITypedDropdownAction<T>;
43
46
  export declare function TypedActionsDropdown<T extends object>(props: {
44
47
  actions: ITypedAction<T>[];
45
48
  label?: string;
49
+ icon?: ComponentClass | FunctionComponent;
50
+ isDisabled?: boolean;
51
+ tooltip?: string;
46
52
  isPrimary?: boolean;
47
53
  selectedItems?: T[];
48
54
  selectedItem?: T;
49
55
  position?: DropdownPosition;
56
+ iconOnly?: boolean;
50
57
  }): JSX.Element;
51
58
  export declare function DropdownActionItem<T extends object>(props: {
52
59
  action: ITypedAction<T>;
@@ -54,7 +61,7 @@ export declare function DropdownActionItem<T extends object>(props: {
54
61
  selectedItem?: T;
55
62
  hasIcons: boolean;
56
63
  index: number;
57
- }): JSX.Element;
64
+ }): JSX.Element | null;
58
65
  export declare function TypedActions<T extends object>(props: {
59
66
  actions: ITypedAction<T>[];
60
67
  selectedItems?: T[];
@@ -64,5 +71,6 @@ export declare function TypedActions<T extends object>(props: {
64
71
  noPrimary?: boolean;
65
72
  position?: DropdownPosition;
66
73
  iconOnly?: boolean;
74
+ isFilled?: boolean;
67
75
  }): JSX.Element;
68
76
  export {};
package/cjs/TypedActions/TypedActions.js CHANGED
@@ -43,7 +43,7 @@ var TypedActionType;
43
43
  TypedActionType["dropdown"] = "dropdown";
44
44
  })(TypedActionType = exports.TypedActionType || (exports.TypedActionType = {}));
45
45
  function TypedActionsDropdown(props) {
46
- var actions = props.actions, label = props.label, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems, selectedItem = props.selectedItem;
46
+ var actions = props.actions, label = props.label, icon = props.icon, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip;
47
47
  var _b = __read((0, react_1.useState)(false), 2), dropdownOpen = _b[0], setDropdownOpen = _b[1];
48
48
  var hasItemActions = (0, react_1.useMemo)(function () { return !actions.every(function (action) { return action.type !== TypedActionType.bulk; }); }, [actions]);
49
49
  var hasIcons = (0, react_1.useMemo)(function () {
@@ -51,12 +51,16 @@ function TypedActionsDropdown(props) {
51
51
  }, [actions]);
52
52
  if (actions.length === 0)
53
53
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
54
- var Toggle = label ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
55
- return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: (0, jsx_runtime_1.jsx)(Toggle, __assign({ id: "toggle-kebab", onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: hasItemActions && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? 'primary' : undefined, isPrimary: isPrimary, style: isPrimary && !label
54
+ var Icon = icon;
55
+ var Toggle = label || Icon ? react_core_1.DropdownToggle : react_core_1.KebabToggle;
56
+ var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: (0, jsx_runtime_1.jsx)(Toggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: hasItemActions && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? 'primary' : undefined, isPrimary: isPrimary, toggleIndicator: Icon ? null : undefined, style: isPrimary && !label
56
57
  ? {
57
58
  color: 'var(--pf-global--Color--light-100)',
58
59
  }
59
- : {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
60
+ : {} }, { children: Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label })), isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
61
+ zIndex: 201,
62
+ } }));
63
+ return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
60
64
  }
61
65
  exports.TypedActionsDropdown = TypedActionsDropdown;
62
66
  function DropdownActionItem(props) {
@@ -69,6 +73,10 @@ function DropdownActionItem(props) {
69
73
  var tooltip = action.tooltip;
70
74
  var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : false;
71
75
  tooltip = isDisabled ? isDisabled : tooltip;
76
+ var isHidden = action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
77
+ if (isHidden) {
78
+ return null;
79
+ }
72
80
  return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return selectedItem && action.onClick(selectedItem); }, isAriaDisabled: Boolean(isDisabled), icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
73
81
  color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
74
82
  } }, { children: action.label })) }), action.label));
@@ -88,8 +96,16 @@ function DropdownActionItem(props) {
88
96
  color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
89
97
  } }, { children: action.label })) }), action.label));
90
98
  }
91
- case TypedActionType.dropdown:
92
- return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options }, action.label));
99
+ case TypedActionType.dropdown: {
100
+ var isHidden = action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
101
+ if (isHidden) {
102
+ return null;
103
+ }
104
+ var tooltip = action.label;
105
+ var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
106
+ tooltip = isDisabled ? isDisabled : tooltip;
107
+ return ((0, jsx_runtime_1.jsx)(TypedActionsDropdown, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip }, action.label));
108
+ }
93
109
  case TypedActionType.seperator:
94
110
  return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
95
111
  default:
@@ -110,27 +126,34 @@ function TypedActions(props) {
110
126
  ];
111
127
  return action.type !== TypedActionType.seperator && actionVariants.includes(action.variant);
112
128
  }, []);
129
+ var isHidden = (0, react_1.useCallback)(function (action) {
130
+ return (action.type === TypedActionType.single || action.type === TypedActionType.dropdown) &&
131
+ action.isHidden !== undefined &&
132
+ props.selectedItem
133
+ ? action.isHidden(props.selectedItem)
134
+ : false;
135
+ }, [props.selectedItem]);
113
136
  var buttonActions = (0, react_1.useMemo)(function () {
114
137
  var _a;
115
138
  if (collapseButtons) {
116
139
  return [];
117
140
  }
118
- return (_a = actions === null || actions === void 0 ? void 0 : actions.filter(isButtonAction)) !== null && _a !== void 0 ? _a : [];
119
- }, [collapseButtons, actions, isButtonAction]);
141
+ return ((_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return isButtonAction(action) && !isHidden(action); })) !== null && _a !== void 0 ? _a : []);
142
+ }, [collapseButtons, actions, isButtonAction, isHidden]);
120
143
  var dropdownActions = (0, react_1.useMemo)(function () {
121
144
  var _a;
122
145
  if (collapseButtons) {
123
146
  return actions !== null && actions !== void 0 ? actions : [];
124
147
  }
125
- var dropdownActions = (_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return !isButtonAction(action); })) !== null && _a !== void 0 ? _a : [];
148
+ var dropdownActions = (_a = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) { return !isButtonAction(action) && !isHidden(action); })) !== null && _a !== void 0 ? _a : [];
126
149
  while (dropdownActions.length && dropdownActions[0].type === TypedActionType.seperator)
127
150
  dropdownActions.shift();
128
151
  while (dropdownActions.length &&
129
152
  dropdownActions[dropdownActions.length - 1].type === TypedActionType.seperator)
130
153
  dropdownActions.pop();
131
154
  return dropdownActions;
132
- }, [collapseButtons, actions, isButtonAction]);
133
- return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: !props.iconOnly }, { children: [(0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionsButtons, __assign({}, props, { actions: buttonActions })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
155
+ }, [collapseButtons, actions, isButtonAction, isHidden]);
156
+ return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ style: props.isFilled ? { width: '100%' } : undefined, hasGutter: !props.iconOnly }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsx)(TypedActionsButtons_1.TypedActionsButtons, __assign({}, props, { actions: buttonActions })) })), (0, jsx_runtime_1.jsx)(TypedActionsDropdown, __assign({}, props, { actions: dropdownActions, selectedItem: props.selectedItem, position: props.position, isPrimary: !!((_b = props.selectedItems) === null || _b === void 0 ? void 0 : _b.length) }))] })));
134
157
  }
135
158
  exports.TypedActions = TypedActions;
136
159
  var TransparentIcon = function () { return (0, jsx_runtime_1.jsx)(react_icons_1.CircleIcon, { style: { opacity: 0 } }); };
package/cjs/TypedActions/TypedActionsButtons.js CHANGED
@@ -39,7 +39,13 @@ function TypedActionButton(props) {
39
39
  return ((0, jsx_runtime_1.jsx)(ActionButton, { action: action, selectedItems: selectedItems, noPrimary: noPrimary, wrapper: wrapper }));
40
40
  }
41
41
  case TypedActions_1.TypedActionType.dropdown: {
42
- return ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, label: action.label, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
42
+ var tooltip = action.label;
43
+ var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
44
+ tooltip = isDisabled ? isDisabled : tooltip;
45
+ return ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActionsDropdown, { actions: action.options, selectedItems: selectedItems, selectedItem: selectedItem, label: action.label, icon: action.icon, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined, isPrimary: action.variant === react_core_1.ButtonVariant.primary && !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) }));
46
+ }
47
+ default: {
48
+ return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
43
49
  }
44
50
  }
45
51
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.372",
4
+ "version": "0.0.373",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {