diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/Delete.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/Delete.js deleted file mode 100644 index a9ad8c2a8f..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/Delete.js +++ /dev/null @@ -1,14 +0,0 @@ -import styled from 'styled-components'; - -const Delete = styled.span` - font-weight: 600; - -webkit-font-smoothing: antialiased; - &:after { - content: '—'; - margin: 0 7px; - font-size: 13px; - font-weight: 600; - } -`; - -export default Delete; diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/DeleteAll.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/DeleteAll.js deleted file mode 100644 index 219e9899df..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/DeleteAll.js +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; - -const DeleteAll = styled.span` - position: absolute; - color: #f64d0a; - font-weight: 500; - cursor: pointer; - &:after { - position: relative; - top: -1px; - content: '\f2ed'; - margin-left: 7px; - font-size: 10px; - font-family: FontAwesome; - -webkit-font-smoothing: antialiased; - } -`; -export default DeleteAll; diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/Wrapper.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/Wrapper.js deleted file mode 100644 index 768c627285..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/Wrapper.js +++ /dev/null @@ -1,20 +0,0 @@ -import styled from 'styled-components'; - -const Wrapper = styled.tr` - width: 100%; - height: 36px; - background: #f7f8f8; - - td { - height: 36px; - line-height: 36px; - font-size: 1.3rem; - font-weight: 400; - color: #333740; - text-align: left; - border-collapse: collapse; - border-top: 1px solid #f1f1f2 !important; - } -`; - -export default Wrapper; diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/index.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/index.js deleted file mode 100644 index 2634ab98f9..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/ActionCollapse/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { memo } from 'react'; -import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; -import { getTrad } from '../../../utils'; -import useListView from '../../../hooks/useListView'; -import DeleteAll from './DeleteAll'; -import Delete from './Delete'; -import Wrapper from './Wrapper'; - -function ActionCollapse({ colSpan }) { - const { data, entriesToDelete, toggleModalDeleteAll } = useListView(); - - const number = entriesToDelete.length; - const suffix = number > 1 ? 'plural' : 'singular'; - const deleteMessageId = number === data.length ? 'delete' : 'deleteSelected'; - - return ( - - - - {message => {message}} - - - {message => {message}} - - - - ); -} - -ActionCollapse.propTypes = { - colSpan: PropTypes.number.isRequired, -}; - -export default memo(ActionCollapse); diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/Header.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/Header.js deleted file mode 100644 index 20ef3dc030..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/Header.js +++ /dev/null @@ -1,59 +0,0 @@ -import React, { memo } from 'react'; -import PropTypes from 'prop-types'; -import { Carret, useTracking } from '@strapi/helper-plugin'; -import { useListView } from '../../../hooks'; - -const Header = ({ fieldSchema: { type }, metadatas: { label, sortable, mainField }, name }) => { - const { sort, firstSortableHeader, setQuery } = useListView(); - const { trackUsage } = useTracking(); - const [sortBy, sortOrder] = sort.split(':'); - - let sortField = name; - let useRelation = false; - - if (type === 'relation') { - useRelation = true; - sortField = `${name}.${mainField.name}`; - } - - const handleClick = () => { - if (sortable) { - trackUsage('didSortEntries', { useRelation }); - - const isCurrentSort = sortField === sortBy; - const nextOrder = isCurrentSort && sortOrder === 'ASC' ? 'DESC' : 'ASC'; - let value = `${sortField}:${nextOrder}`; - - if (isCurrentSort && sortOrder === 'DESC') { - value = `${firstSortableHeader}:ASC`; - } - - setQuery({ - sort: value, - }); - } - }; - - return ( - - - {label} - {sortBy === sortField && } - - - ); -}; - -Header.propTypes = { - fieldSchema: PropTypes.shape({ - type: PropTypes.string.isRequired, - }).isRequired, - metadatas: PropTypes.shape({ - label: PropTypes.string.isRequired, - sortable: PropTypes.bool.isRequired, - mainField: PropTypes.object, - }).isRequired, - name: PropTypes.string.isRequired, -}; - -export default memo(Header); diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/Thead.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/Thead.js deleted file mode 100644 index 619e342498..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/Thead.js +++ /dev/null @@ -1,35 +0,0 @@ -import styled, { css } from 'styled-components'; - -/* eslint-disable consistent-return */ - -const Thead = styled.thead` - background: #f3f3f3; - height: 43px; - overflow: hidden; - - th { - height: 43px; - border: none !important; - font-size: 1.3rem; - vertical-align: middle !important; - > span { - position: relative; - &.sortable { - cursor: pointer; - } - } - } - ${({ isBulkable }) => { - if (isBulkable) { - return css` - > tr { - th:first-child { - width: 50px; - } - } - `; - } - }} -`; - -export default Thead; diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/index.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/index.js deleted file mode 100644 index 033cf224d4..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/Headers/index.js +++ /dev/null @@ -1,46 +0,0 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ -import React, { memo } from 'react'; -import PropTypes from 'prop-types'; -import { useListView } from '../../../hooks'; -import CustomInputCheckbox from '../../CustomInputCheckbox'; -import Thead from './Thead'; -import Header from './Header'; - -function Headers({ headers, isBulkable }) { - const { data, entriesToDelete, onChangeBulkSelectall } = useListView(); - - return ( - - - {isBulkable && ( - - 0} - /> - - )} - {headers.map(({ key, name, fieldSchema, metadatas }) => { - return
; - })} - - - - - ); -} - -Headers.defaultProps = { - isBulkable: true, - headers: [], -}; - -Headers.propTypes = { - headers: PropTypes.array, - isBulkable: PropTypes.bool, -}; - -export default memo(Headers); diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/ActionContainer.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/ActionContainer.js deleted file mode 100644 index 3950d9ff52..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/ActionContainer.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -const ActionContainer = styled.td` - text-align: right; - - i, - svg { - margin-left: 15px; - font-size: 1rem; - - color: #333740; - - &:first-of-type { - margin-left: 0px; - } - } -`; - -export default ActionContainer; diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/Cell.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/Cell.js deleted file mode 100644 index aa1fdf042e..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/Cell.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { memo, useState } from 'react'; -import PropTypes from 'prop-types'; -import { Tooltip } from '@buffetjs/styles'; -import MediaPreviewList from '../../MediaPreviewList'; -import RelationPreviewList from '../../RelationPreviewList'; -import Truncate from '../../Truncate'; -import Truncated from '../../Truncated'; - -const Cell = ({ options }) => { - const [tooltipIsDisplayed, setDisplayTooltip] = useState(false); - - const handleTooltipToggle = () => { - setDisplayTooltip(prev => !prev); - }; - - const { type, cellId, value } = options; - - if (type === 'media') { - return ; - } - - if (type === 'relation') { - return ; - } - - return ( - - - - {value} - - - {tooltipIsDisplayed && } - - ); -}; - -Cell.propTypes = { - options: PropTypes.shape({ - cellId: PropTypes.string.isRequired, - metadatas: PropTypes.shape({ - mainField: PropTypes.object, - }).isRequired, - name: PropTypes.string.isRequired, - relationType: PropTypes.string, - rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - type: PropTypes.string, - queryInfos: PropTypes.shape({ - endPoint: PropTypes.string.isRequired, - }), - value: PropTypes.any, - }).isRequired, -}; - -export default memo(Cell); diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/index.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/index.js deleted file mode 100644 index 1925be24b9..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/Row/index.js +++ /dev/null @@ -1,111 +0,0 @@ -import React, { memo, useCallback } from 'react'; -import PropTypes from 'prop-types'; -import { toString } from 'lodash'; -import { useTracking } from '@strapi/helper-plugin'; -import { IconLinks } from '@buffetjs/core'; -import { Duplicate } from '@buffetjs/icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { useListView } from '../../../hooks'; -import { getDisplayedValue } from '../../../utils'; -import CustomInputCheckbox from '../../CustomInputCheckbox'; -import ActionContainer from './ActionContainer'; -import Cell from './Cell'; - -/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ - -function Row({ canCreate, canDelete, canUpdate, isBulkable, row, headers, goTo }) { - const { entriesToDelete, onChangeBulk, onClickDelete } = useListView(); - const { trackUsage } = useTracking(); - - const memoizedDisplayedValue = useCallback( - (name, type) => { - return getDisplayedValue(type, row[name], name); - }, - [row] - ); - - const links = [ - { - icon: canCreate ? : null, - onClick: e => { - e.stopPropagation(); - goTo(`create/clone/${row.id}`); - }, - }, - { - icon: canUpdate ? : null, - onClick: e => { - e.stopPropagation(); - trackUsage('willEditEntryFromList'); - goTo(row.id); - }, - }, - { - icon: canDelete ? : null, - onClick: e => { - e.stopPropagation(); - trackUsage('willDeleteEntryFromList'); - onClickDelete(row.id); - }, - }, - ].filter(icon => icon); - - return ( - <> - {isBulkable && ( - // eslint-disable-next-line jsx-a11y/click-events-have-key-events - e.stopPropagation()}> - toString(id) === toString(row.id)).length > 0} - /> - - )} - {headers.map( - ({ - key, - name, - fieldSchema: { type, relationType }, - cellFormatter, - metadatas, - queryInfos, - }) => ( - - {cellFormatter ? ( - cellFormatter(row) - ) : ( - - )} - - ) - )} - - - - - ); -} - -Row.propTypes = { - canCreate: PropTypes.bool.isRequired, - canDelete: PropTypes.bool.isRequired, - canUpdate: PropTypes.bool.isRequired, - headers: PropTypes.array.isRequired, - isBulkable: PropTypes.bool.isRequired, - row: PropTypes.object.isRequired, - goTo: PropTypes.func.isRequired, -}; - -export default memo(Row); diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/index.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/index.js deleted file mode 100644 index aa80dd0909..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/index.js +++ /dev/null @@ -1,159 +0,0 @@ -import React, { memo, useMemo } from 'react'; -import PropTypes from 'prop-types'; -import { useLocation, useHistory } from 'react-router-dom'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { upperFirst, isEmpty } from 'lodash'; -import { LoadingIndicator, useTracking } from '@strapi/helper-plugin'; -import useListView from '../../hooks/useListView'; -import { getTrad } from '../../utils'; -import State from '../State'; -import { LoadingContainer, LoadingWrapper, Table, TableEmpty, TableRow } from './styledComponents'; -import ActionCollapse from './ActionCollapse'; -import Headers from './Headers'; -import Row from './Row'; -import { usePluginsQueryParams } from '../../hooks'; - -const CustomTable = ({ - canCreate, - canUpdate, - canDelete, - data, - displayedHeaders, - hasDraftAndPublish, - isBulkable, - showLoader, -}) => { - const { formatMessage } = useIntl(); - const { entriesToDelete, label, filters, _q } = useListView(); - const { trackUsage } = useTracking(); - const { pathname } = useLocation(); - const { push } = useHistory(); - const pluginsQueryParams = usePluginsQueryParams(); - - const headers = useMemo(() => { - if (hasDraftAndPublish) { - return [ - ...displayedHeaders, - { - key: '__published_at_temp_key__', - name: 'published_at', - fieldSchema: { - type: 'custom', - }, - metadatas: { - label: formatMessage({ id: getTrad('containers.ListPage.table-headers.published_at') }), - searchable: false, - sortable: true, - }, - cellFormatter: cellData => { - const isPublished = !isEmpty(cellData.published_at); - - return ; - }, - }, - ]; - } - - return displayedHeaders; - }, [formatMessage, hasDraftAndPublish, displayedHeaders]); - - const colSpanLength = isBulkable && canDelete ? headers.length + 2 : headers.length + 1; - - const handleRowGoTo = id => { - trackUsage('willEditEntryFromList'); - push({ - pathname: `${pathname}/${id}`, - state: { from: pathname }, - search: pluginsQueryParams, - }); - }; - const handleEditGoTo = id => { - trackUsage('willEditEntryFromButton'); - push({ - pathname: `${pathname}/${id}`, - state: { from: pathname }, - search: pluginsQueryParams, - }); - }; - - const values = { contentType: upperFirst(label), search: _q }; - let tableEmptyMsgId = filters.length > 0 ? 'withFilters' : 'withoutFilter'; - - if (_q !== '') { - tableEmptyMsgId = 'withSearch'; - } - - const content = - data.length === 0 ? ( - - - - - - ) : ( - data.map(row => { - return ( - { - e.preventDefault(); - e.stopPropagation(); - - handleRowGoTo(row.id); - }} - > - - - ); - }) - ); - - if (showLoader) { - return ( - <> - - -
- - - - - - - ); - } - - return ( - - - - {entriesToDelete.length > 0 && } - {content} - -
- ); -}; - -CustomTable.propTypes = { - canCreate: PropTypes.bool.isRequired, - canDelete: PropTypes.bool.isRequired, - canUpdate: PropTypes.bool.isRequired, - data: PropTypes.array.isRequired, - displayedHeaders: PropTypes.array.isRequired, - hasDraftAndPublish: PropTypes.bool.isRequired, - isBulkable: PropTypes.bool.isRequired, - showLoader: PropTypes.bool.isRequired, -}; - -export default memo(CustomTable); diff --git a/packages/core/admin/admin/src/content-manager/components/CustomTable/styledComponents.js b/packages/core/admin/admin/src/content-manager/components/CustomTable/styledComponents.js deleted file mode 100644 index 770d932ac3..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/CustomTable/styledComponents.js +++ /dev/null @@ -1,85 +0,0 @@ -import styled from 'styled-components'; -import { themePropTypes } from '@strapi/helper-plugin'; - -const Table = styled.table` - border-radius: 3px; - border-collapse: initial; - box-shadow: 0 2px 4px #e3e9f3; - table-layout: fixed; - margin-bottom: 0; - - tr, - th, - td { - border: none; - padding: 0; - white-space: nowrap; - } - - th, - td { - padding: 0 25px; - - label { - display: inline; - } - } -`; - -const TableEmpty = styled.tr` - width: 100%; - height: 108px; - background: #ffffff; - - td { - height: 106px; - line-height: 90px; - font-size: 1.3rem; - font-weight: 400; - color: #333740; - text-align: center; - border-collapse: collapse; - border-top: 1px solid #f1f1f2 !important; - } -`; - -const TableRow = styled.tr` - height: 54px; - background: #ffffff; - - &:hover { - cursor: pointer; - background: #f7f8f8; - } - - td { - height: 53px; - font-size: 1.3rem; - line-height: 1.8rem; - font-weight: 400; - color: #333740; - vertical-align: middle; - border-collapse: collapse; - border-top: 1px solid #f1f1f2 !important; - } -`; - -const LoadingContainer = styled.div` - display: block; - margin: auto; -`; - -const LoadingWrapper = styled.div` - width: 100%; - height: 108px; - display: flex; - background: ${props => props.theme.main.colors.white}; - box-shadow: 0 2px 4px ${props => props.theme.main.colors.darkGrey}; - clip-path: inset(0px -5px -5px -5px); -`; - -LoadingWrapper.propTypes = { - ...themePropTypes, -}; - -export { LoadingContainer, LoadingWrapper, Table, TableEmpty, TableRow };