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

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

@@ -1,117 +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 {CheckOutlined, CloseOutlined, FileTextOutlined} from '@ant-design/icons';
-import {AnyPrimitive, getInvertColor, IDateRangeValue} from '@leav/utils';
-import {Switch, Tag, Tooltip, Typography} from 'antd';
-import isEmpty from 'lodash/isEmpty';
-import React from 'react';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {ITableCell} from '_ui/types/search';
-import {AttributeFormat} from '_ui/_gqlTypes';
-import {stringifyDateRangeValue} from '_ui/_utils';
-
-const RichTextDisplay = React.lazy(() => import('./ElementsToDisplay/RichTextDisplay'));
-
-interface ISimpleCellProps {
-    cellData: ITableCell;
-    values: AnyPrimitive[];
-}
-
-const alignmentByFormat: Record<AttributeFormat, 'left' | 'right' | 'center'> = {
-    [AttributeFormat.text]: 'left',
-    [AttributeFormat.numeric]: 'right',
-    [AttributeFormat.boolean]: 'center',
-    [AttributeFormat.date]: 'left',
-    [AttributeFormat.date_range]: 'left',
-    [AttributeFormat.extended]: 'left',
-    [AttributeFormat.encrypted]: 'left',
-    [AttributeFormat.color]: 'left',
-    [AttributeFormat.rich_text]: 'center'
-};
-
-const Wrapper = styled.div<{$format: AttributeFormat}>`
-    padding: 5px;
-    width: 100%;
-    text-align: ${props => alignmentByFormat[props.$format]};
-`;
-
-function StandardCell({cellData, values}: ISimpleCellProps): JSX.Element {
-    const {t} = useSharedTranslation();
-
-    const _getValueByFormat = (cellValue: any): string => {
-        switch (cellData.format) {
-            case AttributeFormat.date_range:
-                const rangeValue = cellValue as IDateRangeValue;
-                return stringifyDateRangeValue(rangeValue, t);
-            default:
-                return cellValue;
-        }
-    };
-
-    const displayedValues = values.map(val => _getValueByFormat(val)).join(', ');
-
-    const _getTagStyle = (value: string) => {
-        return {color: getInvertColor('#' + value)};
-    };
-
-    const _getElementToDisplay = () => {
-        switch (cellData.format) {
-            case AttributeFormat.boolean:
-                return (
-                    <Switch
-                        disabled
-                        checked={!!values[0]}
-                        checkedChildren={<CheckOutlined />}
-                        unCheckedChildren={<CloseOutlined />}
-                    />
-                );
-            case AttributeFormat.color:
-                if (!isEmpty(values)) {
-                    return (
-                        <>
-                            {values.map(valueHex => (
-                                <Tag bordered={true} color={'#' + valueHex} style={_getTagStyle('#' + valueHex)}>
-                                    {'#' + valueHex}
-                                </Tag>
-                            ))}
-                        </>
-                    );
-                } else {
-                    return displayedValues;
-                }
-            case AttributeFormat.rich_text:
-                if (!isEmpty(displayedValues)) {
-                    return <RichTextDisplay displayedValue={displayedValues} />;
-                } else {
-                    return displayedValues;
-                }
-
-            default:
-                return displayedValues;
-        }
-    };
-
-    return (
-        <Wrapper $format={cellData.format}>
-            {cellData.format === AttributeFormat.extended ? (
-                <Tooltip overlay={displayedValues}>
-                    <FileTextOutlined size={256} style={{fontSize: '2em'}} />
-                </Tooltip>
-            ) : (
-                <Typography.Paragraph
-                    ellipsis={{
-                        rows: 1,
-                        tooltip: displayedValues
-                    }}
-                    style={{margin: 0}}
-                >
-                    {_getElementToDisplay()}
-                </Typography.Paragraph>
-            )}
-        </Wrapper>
-    );
-}
-
-export default StandardCell;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/StandardCell/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 StandardCell from './StandardCell';
-export default StandardCell;

package/src/components/LibraryItemsList/LibraryItemsListTable/Cell/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 Cell from './Cell';
-export default Cell;

package/src/components/LibraryItemsList/LibraryItemsListTable/ChooseTableColumns/ChooseTableColumns.css

@@ -1,3 +0,0 @@
-.ant-modal-wrap {
-    overflow: initial;
-}

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

@@ -1,45 +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 {IAttribute} from '_ui/types/search';
-import {AttributeFormat, AttributeType} from '_ui/_gqlTypes';
-import {act, render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import ChooseTableColumns from './ChooseTableColumns';
-
-jest.mock(
-    '../../../AttributesSelectionList',
-    () =>
-        function AttributesSelectionList() {
-            return <div>AttributesSelectionList</div>;
-        }
-);
-
-describe('ChooseTableColumns', () => {
-    test('should render attributes', async () => {
-        const attributesMock: IAttribute[] = [
-            {
-                id: 'test',
-                library: 'test_library',
-                type: AttributeType.simple,
-                format: AttributeFormat.text,
-                label: {
-                    fr: 'test',
-                    en: 'test'
-                },
-                isLink: false,
-                isMultiple: false
-            }
-        ];
-
-        await act(async () => {
-            render(
-                <MockSearchContextProvider state={{attributes: attributesMock}}>
-                    <ChooseTableColumns visible onClose={jest.fn()} />
-                </MockSearchContextProvider>
-            );
-        });
-
-        expect(screen.getByText('AttributesSelectionList')).toBeInTheDocument();
-    });
-});

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

@@ -1,144 +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 {localizedTranslation} from '@leav/utils';
-import {Button, Modal} from 'antd';
-import {useState} from 'react';
-import AttributesSelectionList from '_ui/components/AttributesSelectionList';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
-import useLang from '_ui/hooks/useLang';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {ISelectedAttribute} from '_ui/types/attributes';
-import {IAttribute, IField} from '_ui/types/search';
-import {AttributeFormat, AttributeType} from '_ui/_gqlTypes';
-import {getFieldsKeyFromAttribute} from '../../helpers/getFieldsKeyFromAttribute';
-
-interface IChooseTableColumnsProps {
-    visible: boolean;
-    onClose: () => void;
-}
-
-function ChooseTableColumns({visible, onClose}: IChooseTableColumnsProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-    const [selectedAttributes, setSelectedAttributes] = useState<ISelectedAttribute[]>(
-        (searchState?.fields ?? []).map(col => {
-            const currentAttribute = searchState.attributes.find(
-                attribute => attribute.id === col.id && attribute.library === col.library
-            );
-
-            return {
-                ...col,
-                path: col.key,
-                label: currentAttribute?.label ?? null,
-                multiple_values: !!col.multipleValues
-            };
-        })
-    );
-
-    const handleSubmit = () => {
-        const noDuplicateNewAttribute: IAttribute[] = selectedAttributes
-            .filter(
-                selectedAttribute =>
-                    !searchState.attributes.some(
-                        attribute =>
-                            attribute.id === selectedAttribute.id && attribute.library === selectedAttribute.library
-                    )
-            )
-            .map(a => ({
-                ...a,
-                isLink: a.type === AttributeType.tree,
-                isMultiple: a.multiple_values,
-                format: a.format ?? undefined
-            }));
-
-        const allAttributes = [...(searchState?.attributes ?? []), ...noDuplicateNewAttribute];
-
-        searchDispatch({type: SearchActionTypes.SET_ATTRIBUTES, attributes: allAttributes});
-
-        const newFields: IField[] = selectedAttributes.reduce((acc, selectedAttribute) => {
-            const attribute = allAttributes.find(
-                currentAttr =>
-                    currentAttr.id === selectedAttribute.id && currentAttr.library === selectedAttribute.library
-            );
-
-            if (!attribute) {
-                return acc;
-            }
-
-            const key = getFieldsKeyFromAttribute(selectedAttribute);
-
-            const label =
-                typeof attribute.label === 'string' ? attribute.label : localizedTranslation(attribute.label, lang);
-
-            const embeddedData = selectedAttribute.embeddedFieldData && {
-                format: selectedAttribute.embeddedFieldData?.format ?? AttributeFormat.text,
-                path: selectedAttribute.path
-            };
-
-            const field: IField = {
-                id: selectedAttribute.id,
-                library: selectedAttribute.library,
-                label,
-                key,
-                type: selectedAttribute.type,
-                format: attribute.format,
-                parentAttributeData: selectedAttribute?.parentAttributeData,
-                treeData: selectedAttribute.treeData,
-                embeddedData,
-                recordLibrary:
-                    selectedAttribute?.parentAttributeData?.type === AttributeType.tree
-                        ? selectedAttribute.path.split('.')[1]
-                        : null
-            };
-
-            return [...acc, field];
-        }, []);
-
-        searchDispatch({
-            type: SearchActionTypes.SET_FIELDS,
-            fields: newFields
-        });
-
-        onClose();
-    };
-
-    const _handleCancel = () => {
-        onClose();
-    };
-
-    // hack to disable warning "Droppable: unsupported nested scroll container" from react-beautiful-dnd,
-    // remove "overflow: auto" on class "ant-modal-wrap"
-    const elements: any = document.getElementsByClassName('ant-modal-wrap');
-    if (elements.length) {
-        elements[0].style.overflow = 'initial';
-    }
-
-    return (
-        <Modal
-            open={visible}
-            onCancel={_handleCancel}
-            title={t('table-columns-selection.header')}
-            width="70rem"
-            centered
-            footer={[
-                <Button key="Cancel" onClick={_handleCancel}>
-                    {t('table-columns-selection.cancel')}
-                </Button>,
-                <Button type="primary" key="Submit" onClick={handleSubmit}>
-                    {t('table-columns-selection.submit')}
-                </Button>
-            ]}
-        >
-            <AttributesSelectionList
-                library={searchState.library.id}
-                selectedAttributes={selectedAttributes}
-                onSelectionChange={setSelectedAttributes}
-            />
-        </Modal>
-    );
-}
-
-export default ChooseTableColumns;

package/src/components/LibraryItemsList/LibraryItemsListTable/ChooseTableColumns/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 ChooseTableColumns from './ChooseTableColumns';
-export default ChooseTableColumns;

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

@@ -1,73 +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 {AttributeType, SortOrder} from '_ui/_gqlTypes';
-import {act, render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import Header from './Header';
-
-describe('Header', () => {
-    test('should display value', async () => {
-        const value = 'value';
-
-        await act(async () => {
-            render(
-                <MockSearchContextProvider>
-                    <Header id="test" type={AttributeType.simple}>
-                        {value}
-                    </Header>
-                </MockSearchContextProvider>
-            );
-        });
-
-        expect(screen.getByText(value)).toBeInTheDocument();
-    });
-
-    test('should use WrapperArrow with the sort props desc', async () => {
-        const value = 'value';
-
-        await act(async () => {
-            render(
-                <MockSearchContextProvider
-                    state={{
-                        sort: {
-                            field: 'id',
-                            order: SortOrder.desc
-                        }
-                    }}
-                >
-                    <Header id="test" type={AttributeType.simple}>
-                        {value}
-                    </Header>
-                </MockSearchContextProvider>
-            );
-        });
-
-        expect(screen.getByText(value)).toBeInTheDocument();
-        expect(screen.getByTestId('wrapper-arrow-desc')).toBeInTheDocument();
-    });
-
-    test('should use WrapperArrow with the sort props asc', async () => {
-        const value = 'value';
-
-        await act(async () => {
-            render(
-                <MockSearchContextProvider
-                    state={{
-                        sort: {
-                            field: 'id',
-                            order: SortOrder.asc
-                        }
-                    }}
-                >
-                    <Header id="test" type={AttributeType.simple}>
-                        {value}
-                    </Header>
-                </MockSearchContextProvider>
-            );
-        });
-
-        expect(screen.getByText(value)).toBeInTheDocument();
-        expect(screen.getByTestId('wrapper-arrow-asc')).toBeInTheDocument();
-    });
-});

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

@@ -1,197 +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 {CaretDownOutlined,CaretUpOutlined} from '@ant-design/icons';
-import {Dropdown} from 'antd';
-import React,{useState} from 'react';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {SearchActionTypes} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {AttributeType,SortOrder} from '_ui/_gqlTypes';
-import {infosCol} from '../../constants';
-import {getSortFieldByAttributeType} from '../../helpers/getSortFieldByAttributeType';
-import ChooseTableColumns from '../ChooseTableColumns';
-
-interface IWrapperProps {
-    $isHover: boolean;
-    $isInfoColumn: boolean;
-}
-
-const Wrapper = styled.div<IWrapperProps>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-
-    &:hover {
-        border-left: ${themeVars.primaryColor} 3px solid;
-        border-right: ${themeVars.primaryColor} 3px solid;
-        box-shadow: 0px 3px 6px #00000029;
-
-        .wrapper-arrow {
-            background: ${themeVars.defaultBg};
-            box-shadow: 0px 3px 6px #00000029;
-            border: 1px solid ${themeVars.borderLightColor};
-        }
-    }
-`;
-
-const DropdownContent = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.3rem 0.3rem;
-
-    word-break: 'keep-all';
-    user-select: 'none';
-`;
-
-interface IWrapperArrowProps {
-    $filterDirection?: SortOrder;
-    $filterActive: boolean;
-}
-
-const WrapperArrow = styled.div<IWrapperArrowProps>`
-    border-radius: 50%;
-    cursor: pointer;
-    border: 1px solid transparent;
-    height: 2rem;
-    width: 2rem;
-    display: grid;
-    grid-template-rows: 8px 8px;
-    place-items: center;
-    align-content: center;
-    margin: 0 8px;
-    flex-shrink: 0;
-
-    & > * {
-        transform: scale(0.7);
-    }
-
-    & > span:first-child {
-        opacity: ${({$filterDirection: filterDirection, $filterActive: filterActive}) =>
-            filterActive && filterDirection === SortOrder.asc ? 1 : 0.5};
-    }
-
-    & > span:last-child {
-        opacity: ${({$filterDirection: filterDirection, $filterActive: filterActive}) =>
-            filterActive && filterDirection === SortOrder.desc ? 1 : 0.5};
-    }
-`;
-
-WrapperArrow.displayName = 'WrapperArrow';
-
-interface IHeaderProps {
-    children: React.ReactNode;
-    id: string;
-    type: AttributeType;
-}
-
-const Header = ({id, children, type}: IHeaderProps) => {
-    const {t} = useSharedTranslation();
-
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-    const [openChangeColumns, setOpenChangeColumns] = useState(false);
-    const [isHover, setIsHover] = useState<boolean>(false);
-
-    const handleSort = (attId: string, order: SortOrder, attType: AttributeType) => {
-        const newSortField = getSortFieldByAttributeType(attId, attType);
-
-        searchDispatch({
-            type: SearchActionTypes.SET_SORT,
-            sort: {
-                field: newSortField,
-                order
-            }
-        });
-
-        searchDispatch({type: SearchActionTypes.SET_LOADING, loading: true});
-    };
-
-    const handleDesc = (attId: string, attType: AttributeType) => {
-        handleSort(attId, SortOrder.desc, attType);
-    };
-
-    const handleAsc = (attId: string, attType: AttributeType) => {
-        handleSort(attId, SortOrder.asc, attType);
-    };
-
-    const cancelSort = () => {
-        searchDispatch({
-            type: SearchActionTypes.CANCEL_SORT
-        });
-    };
-
-    const handleHideColumn = (attId: string) => {
-        searchDispatch({
-            type: SearchActionTypes.SET_FIELDS,
-            fields: searchState.fields.filter(f => f.id !== attId)
-        });
-    };
-
-    const _handleCloseChooseTableColumns = () => setOpenChangeColumns(false);
-
-    return (
-        <Wrapper $isHover={isHover} $isInfoColumn={infosCol === id} id={id}>
-            {children}
-            <Dropdown
-                placement="bottom"
-                trigger={['click']}
-                menu={{
-                    style: {transform: 'translateY(-8px)'}, // move overlay to avoid trigger css transition
-                    onMouseEnter: () => setIsHover(true),
-                    onMouseLeave: () => setIsHover(false),
-                    items: [
-                        {
-                            key: 'sort-ascend',
-                            onClick: () => handleAsc(id, type),
-                            label: t('items_list.table.header-cell-menu.sort-ascend')
-                        },
-                        {
-                            key: 'sort-descend',
-                            onClick: () => handleDesc(id, type),
-                            label: t('items_list.table.header-cell-menu.sort-descend')
-                        },
-                        {
-                            key: 'cancel-sort',
-                            onClick: cancelSort,
-                            label: t('items_list.table.header-cell-menu.cancel-sort')
-                        },
-                        id !== infosCol
-                            ? {
-                                  key: 'hide-column',
-                                  onClick: () => handleHideColumn(id),
-                                  label: t('items_list.table.header-cell-menu.hide-column')
-                              }
-                            : null,
-                        {
-                            key: 'choose-columns',
-                            onClick: () => setOpenChangeColumns(true),
-                            label: t('items_list.table.header-cell-menu.choose-columns')
-                        }
-                    ]
-                }}
-            >
-                <DropdownContent>
-                    <WrapperArrow
-                        className="wrapper-arrow"
-                        data-testid={`wrapper-arrow-${searchState.sort?.order}`}
-                        $filterDirection={searchState.sort?.order}
-                        $filterActive={searchState.sort?.field === id}
-                        style={{fontSize: '130%'}}
-                    >
-                        <CaretUpOutlined />
-                        <CaretDownOutlined />
-                    </WrapperArrow>
-                </DropdownContent>
-            </Dropdown>
-            {openChangeColumns && (
-                <ChooseTableColumns visible={openChangeColumns} onClose={_handleCloseChooseTableColumns} />
-            )}
-        </Wrapper>
-    );
-};
-
-export default Header;

package/src/components/LibraryItemsList/LibraryItemsListTable/Header/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 Header from './Header';
-export default Header;

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

@@ -1,39 +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 {act, render, screen} from '_ui/_tests/testUtils';
-import Table from './Table';
-
-jest.mock(
-    './ChooseTableColumns',
-    () =>
-        function ChooseTableColumns() {
-            return <div>ChooseTableColumns</div>;
-        }
-);
-
-jest.mock(
-    '../LibraryItemsListPagination',
-    () =>
-        function LibraryItemsListPagination() {
-            return <div>LibraryItemsListPagination</div>;
-        }
-);
-
-jest.mock(
-    './Header',
-    () =>
-        function Header() {
-            return <div>Header</div>;
-        }
-);
-
-describe('Table', () => {
-    test('check child exist', async () => {
-        await act(async () => {
-            render(<Table />);
-        });
-
-        expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-});