scripts/apps/search/components/PhotoDeskInfo.tsx
import React from 'react';
import PropTypes from 'prop-types';
import {PhotoDeskFields} from './PhotoDeskFields';
import {DEFAULT_GRID_VIEW_FIELDS_CONFIG} from 'apps/search/constants';
import {flatMap} from 'lodash';
import ng from 'core/services/ng';
import {extensions, appConfig} from 'appConfig';
import {IArticle} from 'superdesk-api';
interface IProps {
item: IArticle;
}
export const PhotoDeskInfo: React.StatelessComponent<IProps> = (props) => {
const {item} = props;
const datetime = ng.get('datetime');
const gridViewFieldsConfig = appConfig.gridViewFields ?? DEFAULT_GRID_VIEW_FIELDS_CONFIG;
const articleDisplayWidgets = flatMap(
Object.values(extensions).map(({activationResult}) => activationResult),
(activationResult) =>
activationResult.contributions != null
&& activationResult.contributions.articleGridItemWidgets != null
? activationResult.contributions.articleGridItemWidgets
: [],
);
return (
<div className="sd-grid-item__content">
<time>{datetime.longFormat(item.versioncreated)}</time>
<span
className="sd-grid-item__title sd-grid-item--element-grow"
dangerouslySetInnerHTML={{__html: item.headline || item.slugline || item.type}}
/>
<PhotoDeskFields
fieldsConfig={gridViewFieldsConfig}
item={item}
itemClassName="sd-grid-item__content-block"
labelMode="never-with-custom-renderer"
/>
{
articleDisplayWidgets.length < 1 ? null : (
<div style={{marginBlockStart: 12, display: 'flex'}} className="sibling-spacer-10">
{
articleDisplayWidgets.map((Component, i) =>
<Component key={i} article={item} />,
)
}
</div>
)
}
</div>
);
};
PhotoDeskInfo.propTypes = {
item: PropTypes.any,
};