Skip to content

Commit a1d8c0d

Browse files
dleadbetterdleadbetter
authored
Merge pull request #298 from performant-software/feature/cdc302_link_related_media
CDC #302 - Link related media
2 parents 6ebf132 + 1716fe8 commit a1d8c0d

File tree

14 files changed

+122
-64
lines changed

14 files changed

+122
-64
lines changed

‎packages/controlled-vocabulary/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/controlled-vocabulary",
3-
"version": "2.2.12",
3+
"version": "2.2.13",
44
"description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
2323
"underscore": "^1.13.2"
2424
},
2525
"peerDependencies": {
26-
"@performant-software/semantic-components": "^2.2.12",
27-
"@performant-software/shared-components": "^2.2.12",
26+
"@performant-software/semantic-components": "^2.2.13",
27+
"@performant-software/shared-components": "^2.2.13",
2828
"react": ">= 16.13.1 < 19.0.0",
2929
"react-dom": ">= 16.13.1 < 19.0.0"
3030
},

‎packages/core-data/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/core-data",
3-
"version": "2.2.12",
3+
"version": "2.2.13",
44
"description": "A package of components used with the Core Data platform.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -40,8 +40,8 @@
4040
"underscore": "^1.13.2"
4141
},
4242
"peerDependencies": {
43-
"@performant-software/geospatial": "^2.2.12",
44-
"@performant-software/shared-components": "^2.2.12",
43+
"@performant-software/geospatial": "^2.2.13",
44+
"@performant-software/shared-components": "^2.2.13",
4545
"@peripleo/maplibre": "^0.5.2",
4646
"@peripleo/peripleo": "^0.5.2",
4747
"react": ">= 16.13.1 < 19.0.0",

‎packages/geospatial/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/geospatial",
3-
"version": "2.2.12",
3+
"version": "2.2.13",
44
"description": "A package of components for all things map-related.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",

‎packages/semantic-ui/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/semantic-components",
3-
"version": "2.2.12",
3+
"version": "2.2.13",
44
"description": "A package of shared components based on the Semantic UI Framework.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -35,7 +35,7 @@
3535
"zotero-translation-client": "^5.0.1"
3636
},
3737
"peerDependencies": {
38-
"@performant-software/shared-components": "^2.2.12",
38+
"@performant-software/shared-components": "^2.2.13",
3939
"@samvera/clover-iiif": "^2.3.2",
4040
"react": ">= 16.13.1 < 19.0.0",
4141
"react-dnd": "^11.1.3",

‎packages/semantic-ui/src/components/DataTable.js‎

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,9 @@ import _ from 'underscore';
1414
import i18n from '../i18n/i18n';
1515
import ColumnResize from './ColumnResize';
1616
import useColumnSelector, { type Props as ColumnSelectorProps } from './DataTableColumnSelector';
17-
import useList, { type Props as ListProps } from './List';
17+
import useList, { type Action, type Props as ListProps } from './List';
1818
import './DataTable.css';
1919

20-
import type { Action } from './List';
21-
2220
type Props = ListProps & ColumnSelectorProps & {
2321
/**
2422
* If <code>true</code>, the rows of the table can be expanded and collapsed.
@@ -302,9 +300,13 @@ class DataTable extends Component<Props, State> {
302300
return action.render(item, index);
303301
}
304302

303+
const { asProps = () => ({}) } = action;
304+
305305
const actionButton = (
306306
<Button
307307
aria-label={action.name}
308+
as={action.as}
309+
{...asProps(item)}
308310
basic
309311
compact
310312
color={action.color}
@@ -348,36 +350,7 @@ class DataTable extends Component<Props, State> {
348350
return null;
349351
}
350352

351-
const actions = this.props.actions
352-
.filter((action) => !action.accept || action.accept(item))
353-
.map((action) => {
354-
let defaults = {};
355-
356-
if (action.name === 'edit') {
357-
defaults = {
358-
popup: {
359-
title: i18n.t('DataTable.actions.edit.title'),
360-
content: i18n.t('DataTable.actions.edit.content')
361-
}
362-
};
363-
} else if (action.name === 'copy') {
364-
defaults = {
365-
popup: {
366-
title: i18n.t('DataTable.actions.copy.title'),
367-
content: i18n.t('DataTable.actions.copy.content')
368-
}
369-
};
370-
} else if (action.name === 'delete') {
371-
defaults = {
372-
popup: {
373-
title: i18n.t('DataTable.actions.delete.title'),
374-
content: i18n.t('DataTable.actions.delete.content')
375-
}
376-
};
377-
}
378-
379-
return _.defaults(action, defaults);
380-
});
353+
const actions = this.props.actions.filter((action) => !action.accept || action.accept(item));
381354

382355
return (
383356
<Table.Cell

‎packages/semantic-ui/src/components/Items.js‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
Header,
99
Icon,
1010
Item,
11+
Popup,
1112
Segment
1213
} from 'semantic-ui-react';
1314
import _ from 'underscore';
@@ -267,17 +268,7 @@ class ItemsClass extends Component<Props, {}> {
267268
extra
268269
textAlign='center'
269270
>
270-
{ _.map(actions, (action, actionIndex) => (
271-
<Button
272-
aria-label={action.name}
273-
basic
274-
color={action.resolveColor ? action.resolveColor(item) : action.color}
275-
icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
276-
key={actionIndex}
277-
onClick={action.onClick.bind(this, item)}
278-
size={action.size}
279-
/>
280-
))}
271+
{ _.map(actions, this.renderCardAction.bind(this, item)) }
281272
{ this.isSelectable() && (
282273
<Button
283274
aria-label='Select'
@@ -309,6 +300,49 @@ class ItemsClass extends Component<Props, {}> {
309300
return card;
310301
}
311302

303+
/**
304+
* Renders the action button for the passed item.
305+
*
306+
* @param action
307+
* @param index
308+
* @param item
309+
*
310+
* @returns {JSX.Element}
311+
*/
312+
renderCardAction(item, action, index) {
313+
const actionButton = (
314+
<Button
315+
as={action.as}
316+
{...((action.asProps && action.asProps(item)) || {})}
317+
aria-label={action.name}
318+
basic
319+
color={action.resolveColor ? action.resolveColor(item) : action.color}
320+
icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
321+
key={index}
322+
onClick={action.onClick && action.onClick.bind(this, item)}
323+
size={action.size}
324+
/>
325+
);
326+
327+
// Wrap the button in a popup if the action specifies a popup attribute
328+
if (action.popup) {
329+
const { content, title } = action.popup;
330+
331+
return (
332+
<Popup
333+
content={content}
334+
header={title}
335+
hideOnScroll
336+
mouseEnterDelay={500}
337+
position='top right'
338+
trigger={actionButton}
339+
/>
340+
);
341+
}
342+
343+
return actionButton;
344+
}
345+
312346
/**
313347
* Renders the empty list.
314348
*
@@ -405,12 +439,14 @@ class ItemsClass extends Component<Props, {}> {
405439
)}
406440
{ _.map(this.getActions(item), (action, actionIndex) => (
407441
<Button
442+
as={action.as}
443+
{...((action.asProps && action.asProps(item)) || {})}
408444
basic={action.basic}
409445
color={action.resolveColor ? action.resolveColor(item) : action.color}
410446
content={action.resolveName ? action.resolveName(item) : action.label}
411447
key={actionIndex}
412448
icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
413-
onClick={action.onClick.bind(this, item)}
449+
onClick={action.onClick && action.onClick.bind(this, item)}
414450
size={action.size}
415451
/>
416452
))}

‎packages/semantic-ui/src/components/List.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import './List.css';
2020

2121
type Action = {
2222
accept: (item: any) => boolean,
23+
as: ComponentType,
24+
asProps: () => any,
2325
color?: string,
2426
icon?: string,
2527
name: string,
@@ -525,17 +527,29 @@ const useList = (WrappedComponent: ComponentType<any>) => (
525527
if (action.name === 'edit') {
526528
defaults = {
527529
icon: 'edit outline',
528-
onClick: this.onEditButton.bind(this)
530+
onClick: this.onEditButton.bind(this),
531+
popup: {
532+
title: i18n.t('Common.actions.edit.title'),
533+
content: i18n.t('Common.actions.edit.content')
534+
}
529535
};
530536
} else if (action.name === 'copy') {
531537
defaults = {
532538
icon: 'copy outline',
533-
onClick: this.onCopyButton.bind(this)
539+
onClick: this.onCopyButton.bind(this),
540+
popup: {
541+
title: i18n.t('Common.actions.copy.title'),
542+
content: i18n.t('Common.actions.copy.content')
543+
}
534544
};
535545
} else if (action.name === 'delete') {
536546
defaults = {
537547
icon: 'times circle outline',
538-
onClick: this.onDeleteButton.bind(this)
548+
onClick: this.onDeleteButton.bind(this),
549+
popup: {
550+
title: i18n.t('Common.actions.delete.title'),
551+
content: i18n.t('Common.actions.delete.content')
552+
}
539553
};
540554
}
541555

‎packages/semantic-ui/src/i18n/en.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@
4242
}
4343
},
4444
"Common": {
45+
"actions": {
46+
"copy": {
47+
"content": "Creates an editable copy to be saved as a new record",
48+
"title": "Copy"
49+
},
50+
"delete": {
51+
"content": "Removes the record, permanently",
52+
"title": "Remove"
53+
},
54+
"edit": {
55+
"content": "Opens the modal to edit the record",
56+
"title": "Edit"
57+
}
58+
},
4559
"buttons": {
4660
"add": "Add",
4761
"cancel": "Cancel",

‎packages/shared/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/shared-components",
3-
"version": "2.2.12",
3+
"version": "2.2.13",
44
"description": "A package of shared, framework agnostic, components.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",

‎packages/storybook/src/semantic-ui/DataTable.stories.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,14 @@ export const CustomActions = useDragDrop(() => (
208208
name: 'coffee',
209209
icon: 'coffee',
210210
onClick: action('coffee-click')
211+
}, {
212+
as: 'a',
213+
asProps: () => ({
214+
href: 'https://performantsoftware.com',
215+
target: '_blank'
216+
}),
217+
name: 'link',
218+
icon: 'linkify'
211219
}]}
212220
columns={columns}
213221
items={items}

0 commit comments

Comments
 (0)