@ansible/ansible-ui-framework 0.0.372 → 0.0.373

Sign up to get free protection for your applications and to get access to all the features.
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": {