@leav/ui 0.0.1-alpha-2 → 0.0.1-alpha-3

package/src/components/LibraryItemsList/LibraryItemsListTable/BodyRow/BodyRow.tsx

@@ -1,93 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {useState} from 'react';
-import {Row} from 'react-table';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {IItem} from '_ui/types/search';
-import EditRecordModal from '../../../RecordEdition/EditRecordModal';
-import {SearchActionTypes} from '../../hooks/useSearchReducer/searchReducer';
-import BodyCell from '../BodyCell';
-
-const CustomBodyRow = styled.div<{$selected: boolean}>`
-    position: relative;
-    border-bottom: 1px solid ${props => (props.$selected ? themeVars.activeColor : themeVars.borderLightColor)};
-    border-collapse: collapse;
-
-    // Must set background on row for the case where we just have the infos column (part of the row is empty)
-    background-color: ${p => (p.$selected ? themeVars.activeColor : themeVars.defaultBg)};
-
-    &:not(:hover) .floating-menu {
-        display: none;
-    }
-
-    &:hover {
-        background-color: ${p => (p.$selected ? themeVars.activeColor : `${themeVars.activeColor}`)};
-    }
-`;
-
-interface IBodyRowProps {
-    row: Row<IItem | any>; // react-table typing fail
-}
-
-function BodyRow({row}: IBodyRowProps): JSX.Element {
-    const props = row.getRowProps();
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-    const [editRecordModal, setEditRecordModal] = useState<boolean>(false);
-
-    const record = row.cells[0]?.row?.original?.record;
-
-    if (!row.cells.length || typeof record === 'undefined') {
-        return <></>;
-    }
-
-    const isRecordSelected = !!searchState.selection.selected.find(
-        e => e.id === record.id && e.library === searchState.library.id
-    );
-    const isAllSelected = searchState.selection.allSelected;
-
-    const isRowSelected = isAllSelected || isRecordSelected;
-
-    const _handleCellSelected = () => {
-        const selectionData = {id: record.id, library: record.library.id, label: record.label};
-
-        searchDispatch({
-            type: SearchActionTypes.TOGGLE_RECORD_SELECTION,
-            record: selectionData
-        });
-    };
-
-    const _handleDoubleClick = () => {
-        setEditRecordModal(true);
-    };
-
-    const _handleClose = () => {
-        setEditRecordModal(false);
-    };
-
-    return (
-        <CustomBodyRow
-            {...props}
-            onClick={_handleCellSelected}
-            onDoubleClick={_handleDoubleClick}
-            $selected={isRowSelected}
-        >
-            {editRecordModal && (
-                <EditRecordModal
-                    open={editRecordModal}
-                    library={record.library.id}
-                    record={record}
-                    onClose={_handleClose}
-                    valuesVersion={searchState.valuesVersions}
-                />
-            )}
-            {row.cells.map(cell => (
-                <BodyCell selected={isRowSelected} cell={cell as any} key={cell.column.id} />
-            ))}
-        </CustomBodyRow>
-    );
-}
-
-export default BodyRow;

package/src/components/LibraryItemsList/LibraryItemsListTable/BodyRow/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import BodyRow from './BodyRow';
-export default BodyRow;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/AllValuesCount/AllValuesCount.tsx

@@ -1,88 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Modal, Tooltip} from 'antd';
-import React from 'react';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {RecordCard} from '_ui/components';
-import List from '_ui/components/List';
-import {PreviewSize} from '_ui/constants';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {AttributeType} from '_ui/_gqlTypes';
-import {stopEvent} from '_ui/_utils';
-
-interface IAllValuesCountProps {
-    values: any[];
-    attributeType: AttributeType;
-}
-
-const MoreValuesCount = styled.span`
-    padding: 0 0.75em;
-    height: 1.75em;
-    line-height: 1.75em;
-    margin: 0 1em;
-    border-radius: 2em;
-    background: ${themeVars.activeColor};
-    color: ${themeVars.secondaryTextColor};
-    font-weight: bold;
-    font-size: 0.9em;
-    cursor: pointer;
-`;
-
-function AllValuesCount({values, attributeType}: IAllValuesCountProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [modal, contextHolder] = Modal.useModal();
-
-    const _handleShowMoreClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-        stopEvent(e);
-        modal.info({
-            icon: null,
-            content: (
-                <List
-                    dataSource={values.map(val =>
-                        val?.whoAmI ? <RecordCard record={val?.whoAmI} size={PreviewSize.small} /> : val
-                    )}
-                    size="small"
-                    maxHeight="50vh"
-                />
-            ),
-            okText: t('global.close')
-        });
-    };
-
-    const otherValuesData = values
-        .slice(0, 5)
-        .map(val => {
-            const whoAmI = attributeType === AttributeType.tree ? val?.record?.whoAmI : val?.whoAmI;
-
-            if (!whoAmI) {
-                return null;
-            }
-
-            return whoAmI.label ?? whoAmI.id;
-        })
-        .filter(val => !!val); // To make sure we don't have null values. This crashes the List component
-
-    const otherValuesList = (
-        <List
-            dataSource={otherValuesData}
-            size="small"
-            maxHeight="50vh"
-            footer={values.length > 5 && <a onClick={_handleShowMoreClick}>{t('items_list.show_more_links')}</a>}
-        />
-    );
-
-    return (
-        <>
-            <Tooltip overlay={otherValuesList} color="white">
-                <MoreValuesCount onClick={_handleShowMoreClick} onDoubleClick={stopEvent}>
-                    {values.length}
-                </MoreValuesCount>
-            </Tooltip>
-            {contextHolder}
-        </>
-    );
-}
-
-export default AllValuesCount;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/AllValuesCount/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import AllValuesCount from './AllValuesCount';
-export default AllValuesCount;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/Cell.test.tsx

@@ -1,75 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import userEvent from '@testing-library/user-event';
-import {ITableCell} from '_ui/types/search';
-import {AttributeFormat, AttributeType} from '_ui/_gqlTypes';
-import {render, screen} from '_ui/_tests/testUtils';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import Cell from './Cell';
-
-describe('Cell', () => {
-    test('Display standard value', async () => {
-        const mockData = {
-            id: 'id',
-            value: 'value',
-            type: AttributeType.simple,
-            format: AttributeFormat.text
-        };
-
-        render(<Cell columnName="test" data={(mockData as unknown) as ITableCell} />);
-
-        expect(screen.getByText(mockData.value)).toBeInTheDocument();
-    });
-
-    test('Display multiple standard values', async () => {
-        const mockData = {
-            id: 'id',
-            value: ['valueA', 'valueB'],
-            type: AttributeType.advanced,
-            format: AttributeFormat.text
-        };
-
-        render(<Cell columnName="test" data={(mockData as unknown) as ITableCell} />);
-
-        expect(screen.getByText(/valueA(.*)valueB/)).toBeInTheDocument();
-    });
-
-    test('Display link value', async () => {
-        const mockData = {
-            id: 'id',
-            value: {id: mockRecord.id, whoAmI: mockRecord},
-            type: AttributeType.simple_link,
-            format: AttributeFormat.text
-        };
-
-        render(<Cell columnName="test" data={(mockData as unknown) as ITableCell} />);
-
-        expect(screen.getByText(mockRecord.label)).toBeInTheDocument();
-    });
-
-    test('Display multiple link values', async () => {
-        const mockData = {
-            id: 'id',
-            value: [
-                {id: mockRecord.id, whoAmI: mockRecord},
-                {id: 'record2', whoAmI: {...mockRecord, id: 'record2', label: 'record2'}},
-                {id: 'record3', whoAmI: {...mockRecord, id: 'record3', label: 'record3'}}
-            ],
-            type: AttributeType.simple_link,
-            format: AttributeFormat.text
-        };
-
-        render(<Cell columnName="test" data={(mockData as unknown) as ITableCell} />);
-
-        expect(screen.getByText(mockRecord.label)).toBeInTheDocument();
-        expect(screen.queryByText('record2')).not.toBeInTheDocument();
-        expect(screen.queryByText('record3')).not.toBeInTheDocument();
-        expect(screen.getByText('3')).toBeInTheDocument();
-
-        await userEvent.hover(screen.getByText('3'));
-
-        expect(await screen.findByText('record2')).toBeInTheDocument();
-        expect(screen.getByText('record3')).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/Cell.tsx

@@ -1,78 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import styled from 'styled-components';
-import {RecordCard} from '_ui/components';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {PreviewSize} from '_ui/constants';
-import {useLang} from '_ui/hooks';
-import {ITableCell} from '_ui/types/search';
-import {AttributeType} from '_ui/_gqlTypes';
-import {infosCol} from '../../constants';
-import {displayTypeToPreviewSize} from '../../helpers/displayTypeToPreviewSize';
-import AllValuesCount from './AllValuesCount';
-import CellInfos from './CellInfos';
-import StandardCell from './StandardCell';
-
-const RecordCardCellWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-`;
-
-interface ICellProps {
-    columnName: string;
-    data: ITableCell;
-}
-
-const Cell = ({columnName, data}: ICellProps) => {
-    const {value, type} = data;
-    const {lang} = useLang();
-
-    const {state: searchState} = useSearchReducer();
-    const previewSize: PreviewSize = displayTypeToPreviewSize(searchState.display.size);
-
-    const valuesToDisplay = Array.isArray(value) ? value : [value];
-
-    if (!valuesToDisplay.length) {
-        return <></>;
-    }
-
-    switch (type) {
-        case AttributeType.simple:
-        case AttributeType.advanced:
-            return <StandardCell cellData={data} values={valuesToDisplay} />;
-        case AttributeType.simple_link:
-        case AttributeType.advanced_link:
-        case AttributeType.tree:
-            const [firstValue, ...otherValues] = valuesToDisplay;
-
-            const whoAmI = type === AttributeType.tree ? firstValue?.record?.whoAmI : firstValue?.whoAmI;
-
-            return whoAmI ? (
-                <RecordCardCellWrapper>
-                    <RecordCard
-                        record={whoAmI}
-                        size={PreviewSize.small}
-                        lang={lang}
-                        key={whoAmI.id}
-                        withPreview={true}
-                        withLibrary={false}
-                        simplistic
-                    />
-
-                    {otherValues.length ?? 0 ? <AllValuesCount values={valuesToDisplay} attributeType={type} /> : <></>}
-                </RecordCardCellWrapper>
-            ) : null;
-        default:
-            // selection and infos column has no type
-            if (columnName === infosCol) {
-                return <CellInfos record={value} previewSize={previewSize} lang={lang} />;
-            }
-
-            return <></>;
-    }
-};
-
-export default Cell;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/CellInfos/CellInfos.test.tsx

@@ -1,38 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {PreviewSize} from '_ui/constants';
-import {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import CellInfos from './CellInfos';
-
-describe('CellInfos', () => {
-    test('should contain floating menu', async () => {
-        render(
-            <MockSearchContextProvider>
-                <CellInfos
-                    record={{id: 'recordId', library: {id: 'libraryId'}} as any}
-                    previewSize={PreviewSize.small}
-                />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByTestId('floating-menu')).toBeInTheDocument();
-    });
-
-    test('should display record identity ', async () => {
-        render(
-            <MockSearchContextProvider>
-                <CellInfos
-                    record={
-                        {id: 'recordId', label: 'my record', library: {id: 'libraryId', label: {fr: 'my lib'}}} as any
-                    }
-                    previewSize={PreviewSize.small}
-                />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByText('my record')).toBeInTheDocument();
-        expect(screen.getByText('my lib')).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/CellInfos/CellInfos.tsx

@@ -1,91 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {SizeType} from 'antd/lib/config-provider/SizeContext';
-import styled from 'styled-components';
-import {FloatingMenu, FloatingMenuAction, RecordCard} from '_ui/components';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import DeactivateRecordBtn from '_ui/components/LibraryItemsList/shared/DeactivateRecordBtn';
-import SelectCellsBtn, {SelectCellsBtnType} from '_ui/components/LibraryItemsList/shared/SelectCellsBtn';
-import EditRecordBtn from '_ui/components/RecordEdition/EditRecordBtn';
-import {PreviewSize} from '_ui/constants';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IRecordIdentityWhoAmI} from '_ui/types/records';
-
-const Info = styled.div`
-    min-width: 150px;
-`;
-
-interface ICellInfosProps {
-    record: IRecordIdentityWhoAmI;
-    previewSize: PreviewSize;
-    lang?: string[];
-}
-
-function CellInfos({record, previewSize, lang}: ICellInfosProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {state: searchState} = useSearchReducer();
-
-    const canDeleteRecord = searchState.library.permissions.delete_record;
-
-    const menuBtnSize: SizeType = 'middle';
-
-    const menuActions: FloatingMenuAction[] = [
-        {
-            title: t('global.details'),
-            button: (
-                <EditRecordBtn
-                    shape={'circle'}
-                    record={record}
-                    size={menuBtnSize}
-                    valuesVersion={searchState.valuesVersions}
-                />
-            )
-        }
-    ];
-
-    if (canDeleteRecord) {
-        menuActions.push({
-            title: t('records_deactivation.title_one'),
-            button: <DeactivateRecordBtn record={record} />
-        });
-    }
-
-    const selectActions: FloatingMenuAction[] = [
-        {
-            title: t('items-list-row.select-only'),
-            button: (
-                <SelectCellsBtn
-                    selectionType={SelectCellsBtnType.ONLY}
-                    text={t('items-list-row.select-only')}
-                    record={record}
-                    size={menuBtnSize}
-                />
-            )
-        },
-        {
-            title: t('items-list-row.select-all'),
-            button: (
-                <SelectCellsBtn
-                    selectionType={SelectCellsBtnType.ALL}
-                    text={t('items-list-row.select-all')}
-                    record={record}
-                    size={menuBtnSize}
-                />
-            )
-        }
-    ];
-
-    const isSelectActive = searchState.selection.selected.length || searchState.selection.allSelected;
-
-    return (
-        <>
-            <Info>
-                <RecordCard record={record} size={previewSize} lang={lang} />
-            </Info>
-            <FloatingMenu actions={isSelectActive ? selectActions : menuActions} size={menuBtnSize} />
-        </>
-    );
-}
-
-export default CellInfos;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/CellInfos/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import CellInfos from './CellInfos';
-export default CellInfos;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/CellSelection/CellSelection.test.tsx

@@ -1,13 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {render, screen} from '_ui/_tests/testUtils';
-import CellSelection from './CellSelection';
-
-describe('CellSelection', () => {
-    test('should contain checkbox', async () => {
-        render(<CellSelection selected />);
-
-        expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/CellSelection/CellSelection.tsx

@@ -1,46 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {CheckCircleFilled, CheckCircleOutlined} from '@ant-design/icons';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-
-const Wrapper = styled.div`
-    display: grid;
-    place-items: center;
-    position: relative;
-    height: 100%;
-    width: 100%;
-`;
-
-const CustomCheckbox = styled.span<{checked: boolean}>`
-    && {
-        display: ${p => (!p.checked ? 'none' : 'block')};
-        color: ${p => (p.checked ? themeVars.primaryColor : themeVars.defaultTextColor)};
-        font-size: 1.5em;
-
-        .ant-checkbox-checked::after {
-            border: none;
-        }
-    }
-
-    [role='row']:hover & {
-        display: block;
-    }
-`;
-
-interface ICellSelectionProps {
-    selected: boolean;
-}
-
-function CellSelection({selected}: ICellSelectionProps): JSX.Element {
-    return (
-        <Wrapper>
-            <CustomCheckbox checked={selected} role="checkbox">
-                {selected ? <CheckCircleFilled /> : <CheckCircleOutlined />}
-            </CustomCheckbox>
-        </Wrapper>
-    );
-}
-
-export default CellSelection;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/CellSelection/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import CellSelection from './CellSelection';
-export default CellSelection;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/StandardCell/ElementsToDisplay/RichTextDisplay.tsx

@@ -1,33 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import EllipsisOutlined from '@ant-design/icons/lib/icons/EllipsisOutlined';
-import {Tooltip} from 'antd';
-import parse from 'html-react-parser';
-import styled from 'styled-components';
-import DOMPurify from 'dompurify';
-
-const EllipsisOutlinedComponent = styled(EllipsisOutlined)`
-    border-width: 1px;
-    border-style: solid;
-    border-color: #d9d9d9;
-    background: white;
-    border-radius: 10px;
-`;
-
-export interface IRichTextDisplayProps {
-    displayedValue: string;
-}
-
-function RichTextDisplay({displayedValue}: IRichTextDisplayProps): JSX.Element {
-    const sanitizedDisplayedValue = DOMPurify.sanitize(displayedValue);
-    const parseValue = parse(sanitizedDisplayedValue);
-
-    return (
-        <Tooltip overlay={parseValue}>
-            <EllipsisOutlinedComponent />
-        </Tooltip>
-    );
-}
-
-export default RichTextDisplay;