@leav/ui 0.2.6 → 0.2.8

package/dist/components/LibraryItemsList/VersionsPanel/VersionsPanel.js

@@ -1,24 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime';
 // 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 { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from 'antd';
+import {faAngleLeft} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {Button} from 'antd';
 import styled from 'styled-components';
-import { themeVars } from '../../../antdTheme';
+import {themeVars} from '../../../antdTheme';
 import useSearchReducer from '../../../components/LibraryItemsList/hooks/useSearchReducer';
-import { SearchActionTypes } from '../../../components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
+import {SearchActionTypes} from '../../../components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
 import ValuesVersionConfigurator from '../../../components/ValuesVersionConfigurator';
-import { useSharedTranslation } from '../../../hooks/useSharedTranslation';
-const Wrapper = styled.div `
+import {useSharedTranslation} from '../../../hooks/useSharedTranslation';
+const Wrapper = styled.div`
     width: 100%;
     display: flex;
     flex-flow: column nowrap;
     border-right: ${themeVars.borderLightColor} 1px solid;
     overflow-y: auto;
 `;
-const Header = styled.div `
+const Header = styled.div`
     width: 100%;
     background-color: ${themeVars.headerBg};
     display: grid;
@@ -47,20 +47,34 @@ const Header = styled.div `
     }
 `;
 function VersionsPanel() {
-    const { t } = useSharedTranslation();
-    const { state: searchState, dispatch: searchDispatch } = useSearchReducer();
+    const {t} = useSharedTranslation();
+    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
     const _handleHidePanel = () => {
         searchDispatch({
             type: SearchActionTypes.TOGGLE_SIDEBAR
         });
     };
-    const _handleVersionChange = (version) => {
+    const _handleVersionChange = version => {
         searchDispatch({
             type: SearchActionTypes.SET_VALUES_VERSIONS,
             valuesVersions: version
         });
     };
-    return (_jsxs(Wrapper, { children: [_jsxs(Header, { children: [_jsx("span", { children: t('values_version.title') }), _jsx(Button, { onClick: _handleHidePanel, icon: _jsx(FontAwesomeIcon, { icon: faAngleLeft }) })] }), _jsx(ValuesVersionConfigurator, { libraryId: searchState.library.id, selectedVersion: searchState.valuesVersions, onVersionChange: _handleVersionChange })] }));
+    return _jsxs(Wrapper, {
+        children: [
+            _jsxs(Header, {
+                children: [
+                    _jsx('span', {children: t('values_version.title')}),
+                    _jsx(Button, {onClick: _handleHidePanel, icon: _jsx(FontAwesomeIcon, {icon: faAngleLeft})})
+                ]
+            }),
+            _jsx(ValuesVersionConfigurator, {
+                libraryId: searchState.library.id,
+                selectedVersion: searchState.valuesVersions,
+                onVersionChange: _handleVersionChange
+            })
+        ]
+    });
 }
 export default VersionsPanel;
-//# sourceMappingURL=VersionsPanel.js.map
+//# sourceMappingURL=VersionsPanel.js.map

package/dist/components/LibraryItemsList/VersionsPanel/index.js

@@ -3,4 +3,4 @@
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import VersionsPanel from './VersionsPanel';
 export default VersionsPanel;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/LibraryItemsList/ViewPanel/EditView/EditView.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { IView } from '../../../../types/views';
+import {IView} from '../../../../types/views';
 interface IEditViewProps {
     view: IView;
     libraryId: string;
     onClose: () => void;
     visible: boolean;
 }
-declare function EditView({ visible, onClose, view, libraryId }: IEditViewProps): JSX.Element;
+declare function EditView({visible, onClose, view, libraryId}: IEditViewProps): JSX.Element;
 export default EditView;

package/dist/components/LibraryItemsList/ViewPanel/EditView/EditView.js

@@ -1,25 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime';
 // 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 { Checkbox, Divider, Form, Input, Modal, Select } from 'antd';
-import { useState } from 'react';
+import {Checkbox, Divider, Form, Input, Modal, Select} from 'antd';
+import {useState} from 'react';
 import useSearchReducer from '../../../../components/LibraryItemsList/hooks/useSearchReducer';
-import { SearchActionTypes } from '../../../../components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
+import {SearchActionTypes} from '../../../../components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
 import useLang from '../../../../hooks/useLang';
-import { useSharedTranslation } from '../../../../hooks/useSharedTranslation';
-import { useAddViewMutation, ViewTypes } from '../../../../_gqlTypes';
-import { getRequestFromFilters } from '../../../../_utils/getRequestFromFilter';
-import { PREFIX_SHARED_VIEWS_ORDER_KEY, PREFIX_USER_VIEWS_ORDER_KEY } from '../../../../constants';
+import {useSharedTranslation} from '../../../../hooks/useSharedTranslation';
+import {useAddViewMutation, ViewTypes} from '../../../../_gqlTypes';
+import {getRequestFromFilters} from '../../../../_utils/getRequestFromFilter';
+import {PREFIX_SHARED_VIEWS_ORDER_KEY, PREFIX_USER_VIEWS_ORDER_KEY} from '../../../../constants';
 import useUpdateViewsOrderMutation from '../../hooks/useUpdateViewsOrderMutation';
-function EditView({ visible, onClose, view, libraryId }) {
-    const { t } = useSharedTranslation();
-    const { state: searchState, dispatch: searchDispatch } = useSearchReducer();
-    const { availableLangs, defaultLang } = useLang();
+function EditView({visible, onClose, view, libraryId}) {
+    const {t} = useSharedTranslation();
+    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
+    const {availableLangs, defaultLang} = useLang();
     const [form] = Form.useForm();
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [addView] = useAddViewMutation();
-    const { updateViewsOrder } = useUpdateViewsOrderMutation(libraryId);
+    const {updateViewsOrder} = useUpdateViewsOrderMutation(libraryId);
     const _handleOk = async () => {
         form.submit();
     };
@@ -27,12 +27,12 @@ function EditView({ visible, onClose, view, libraryId }) {
         form.resetFields();
         onClose();
     };
-    const _handleSubmit = async (values) => {
+    const _handleSubmit = async values => {
         setConfirmLoading(true);
         const upView = {
             id: view.id,
             library: libraryId,
-            display: { type: values.type, size: view.display.size },
+            display: {type: values.type, size: view.display.size},
             shared: values.shared,
             label: values.label,
             description: !Object.values(values.description).every(x => x === '') ? values.description : null,
@@ -42,9 +42,8 @@ function EditView({ visible, onClose, view, libraryId }) {
         };
         try {
             // save view in backend
-            await addView({ variables: { view: upView } });
-        }
-        catch (e) {
+            await addView({variables: {view: upView}});
+        } catch (e) {
             console.error(e);
         }
         if (view.shared !== values.shared) {
@@ -68,13 +67,126 @@ function EditView({ visible, onClose, view, libraryId }) {
         if (view.id === searchState.view.current.id) {
             searchDispatch({
                 type: SearchActionTypes.CHANGE_VIEW,
-                view: Object.assign(Object.assign({}, searchState.view.current), { label: values.label, description: !Object.values(values.description).every(x => x === '') ? values.description : null, display: { type: values.type, size: view.display.size }, shared: values.shared })
+                view: Object.assign(Object.assign({}, searchState.view.current), {
+                    label: values.label,
+                    description: !Object.values(values.description).every(x => x === '') ? values.description : null,
+                    display: {type: values.type, size: view.display.size},
+                    shared: values.shared
+                })
             });
         }
         setConfirmLoading(false);
         onClose();
     };
-    return (_jsx(Modal, Object.assign({ forceRender: true, title: t('view.edit-view.title'), open: visible, onCancel: _handleCancel, onOk: _handleOk, confirmLoading: confirmLoading }, { children: _jsxs(Form, Object.assign({ labelCol: { span: 8 }, wrapperCol: { span: 16 }, form: form, onFinish: _handleSubmit }, { children: [availableLangs.map(availableLang => (_jsxs("div", { children: [_jsx("h2", { children: t(`language.${availableLang}`) }), _jsx(Form.Item, Object.assign({ label: t('view.edit-view.label'), name: ['label', availableLang], initialValue: view.label[availableLang], rules: defaultLang === availableLang ? [{ required: true }] : [], "data-testid": `viewName-input-${availableLang}` }, { children: _jsx(Input, {}) })), _jsx(Form.Item, Object.assign({ label: t('view.edit-view.description'), initialValue: !!view.description ? view.description[availableLang] || '' : '', name: ['description', availableLang], "data-testid": `description-input-${availableLang}` }, { children: _jsx(Input, {}) })), _jsx(Divider, {})] }, availableLang))), _jsx(Form.Item, Object.assign({ label: t('view.edit-view.type'), name: "type", "data-testid": "input-type", initialValue: view.display.type }, { children: _jsxs(Select, { children: [_jsx(Select.Option, Object.assign({ value: ViewTypes.list }, { children: t('view.type-list') })), _jsx(Select.Option, Object.assign({ value: ViewTypes.cards }, { children: t('view.type-cards') }))] }) })), _jsx(Form.Item, Object.assign({ name: "shared", initialValue: view.shared, valuePropName: "checked", "data-testid": "input-shared", wrapperCol: { offset: 8, span: 16 } }, { children: _jsx(Checkbox, { children: t('view.edit-view.shared') }) }))] })) })));
+    return _jsx(
+        Modal,
+        Object.assign(
+            {
+                forceRender: true,
+                title: t('view.edit-view.title'),
+                open: visible,
+                onCancel: _handleCancel,
+                onOk: _handleOk,
+                confirmLoading: confirmLoading
+            },
+            {
+                children: _jsxs(
+                    Form,
+                    Object.assign(
+                        {labelCol: {span: 8}, wrapperCol: {span: 16}, form: form, onFinish: _handleSubmit},
+                        {
+                            children: [
+                                availableLangs.map(availableLang =>
+                                    _jsxs(
+                                        'div',
+                                        {
+                                            children: [
+                                                _jsx('h2', {children: t(`language.${availableLang}`)}),
+                                                _jsx(
+                                                    Form.Item,
+                                                    Object.assign(
+                                                        {
+                                                            label: t('view.edit-view.label'),
+                                                            name: ['label', availableLang],
+                                                            initialValue: view.label[availableLang],
+                                                            rules:
+                                                                defaultLang === availableLang ? [{required: true}] : [],
+                                                            'data-testid': `viewName-input-${availableLang}`
+                                                        },
+                                                        {children: _jsx(Input, {})}
+                                                    )
+                                                ),
+                                                _jsx(
+                                                    Form.Item,
+                                                    Object.assign(
+                                                        {
+                                                            label: t('view.edit-view.description'),
+                                                            initialValue: !!view.description
+                                                                ? view.description[availableLang] || ''
+                                                                : '',
+                                                            name: ['description', availableLang],
+                                                            'data-testid': `description-input-${availableLang}`
+                                                        },
+                                                        {children: _jsx(Input, {})}
+                                                    )
+                                                ),
+                                                _jsx(Divider, {})
+                                            ]
+                                        },
+                                        availableLang
+                                    )
+                                ),
+                                _jsx(
+                                    Form.Item,
+                                    Object.assign(
+                                        {
+                                            label: t('view.edit-view.type'),
+                                            name: 'type',
+                                            'data-testid': 'input-type',
+                                            initialValue: view.display.type
+                                        },
+                                        {
+                                            children: _jsxs(Select, {
+                                                children: [
+                                                    _jsx(
+                                                        Select.Option,
+                                                        Object.assign(
+                                                            {value: ViewTypes.list},
+                                                            {children: t('view.type-list')}
+                                                        )
+                                                    ),
+                                                    _jsx(
+                                                        Select.Option,
+                                                        Object.assign(
+                                                            {value: ViewTypes.cards},
+                                                            {children: t('view.type-cards')}
+                                                        )
+                                                    )
+                                                ]
+                                            })
+                                        }
+                                    )
+                                ),
+                                _jsx(
+                                    Form.Item,
+                                    Object.assign(
+                                        {
+                                            name: 'shared',
+                                            initialValue: view.shared,
+                                            valuePropName: 'checked',
+                                            'data-testid': 'input-shared',
+                                            wrapperCol: {offset: 8, span: 16}
+                                        },
+                                        {children: _jsx(Checkbox, {children: t('view.edit-view.shared')})}
+                                    )
+                                )
+                            ]
+                        }
+                    )
+                )
+            }
+        )
+    );
 }
 export default EditView;
-//# sourceMappingURL=EditView.js.map
+//# sourceMappingURL=EditView.js.map

package/dist/components/LibraryItemsList/ViewPanel/EditView/index.js

@@ -3,4 +3,4 @@
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import EditView from './EditView';
 export default EditView;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/LibraryItemsList/ViewPanel/View/View.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
-import { IView } from '../../../../types/views';
+import {DraggableProvidedDragHandleProps} from 'react-beautiful-dnd';
+import {IView} from '../../../../types/views';
 interface IViewProps {
     view: IView;
     onEdit: (viewId: string) => void;
     handleProps?: DraggableProvidedDragHandleProps;
 }
-declare function View({ view, onEdit, handleProps }: IViewProps): JSX.Element;
+declare function View({view, onEdit, handleProps}: IViewProps): JSX.Element;
 export default View;

package/dist/components/LibraryItemsList/ViewPanel/View/View.js

@@ -1,37 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import {jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment} from 'react/jsx-runtime';
 // 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 { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import { localizedTranslation, objectToNameValueArray } from '@leav/utils';
-import { Button, Tooltip, Typography } from 'antd';
+import {CopyOutlined, DeleteOutlined, EditOutlined} from '@ant-design/icons';
+import {localizedTranslation, objectToNameValueArray} from '@leav/utils';
+import {Button, Tooltip, Typography} from 'antd';
 import omit from 'lodash/omit';
-import { useState } from 'react';
-import { RiUserReceivedLine } from 'react-icons/ri';
+import {useState} from 'react';
+import {RiUserReceivedLine} from 'react-icons/ri';
 import styled from 'styled-components';
-import { themeVars } from '../../../../antdTheme';
+import {themeVars} from '../../../../antdTheme';
 import useSearchReducer from '../../../../components/LibraryItemsList/hooks/useSearchReducer';
-import { SearchActionTypes } from '../../../../components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
+import {SearchActionTypes} from '../../../../components/LibraryItemsList/hooks/useSearchReducer/searchReducer';
 import IconViewType from '../../../../components/LibraryItemsList/IconViewType';
-import { PREFIX_SHARED_VIEWS_ORDER_KEY, PREFIX_USER_VIEWS_ORDER_KEY } from '../../../../constants';
-import { useLang } from '../../../../hooks';
+import {PREFIX_SHARED_VIEWS_ORDER_KEY, PREFIX_USER_VIEWS_ORDER_KEY} from '../../../../constants';
+import {useLang} from '../../../../hooks';
 import useExecuteAddViewMutation from '../../../../hooks/useExecuteAddViewMutation/useExecuteAddViewMutation';
 import useExecuteDeleteViewMutation from '../../../../hooks/useExecuteDeleteViewMutation/useExecuteDeleteViewMutation';
-import { useSharedTranslation } from '../../../../hooks/useSharedTranslation';
-import { ViewSizes, ViewTypes } from '../../../../_gqlTypes';
-import { getRequestFromFilters } from '../../../../_utils/getRequestFromFilter';
-import { defaultView } from '../../constants';
+import {useSharedTranslation} from '../../../../hooks/useSharedTranslation';
+import {ViewSizes, ViewTypes} from '../../../../_gqlTypes';
+import {getRequestFromFilters} from '../../../../_utils/getRequestFromFilter';
+import {defaultView} from '../../constants';
 import useUpdateViewsOrderMutation from '../../hooks/useUpdateViewsOrderMutation';
-const Infos = styled.div `
+const Infos = styled.div`
     width: 100%;
 `;
-const Wrapper = styled.div `
-    background: ${({ selected }) => (selected ? `${themeVars.activeColor} ` : 'none')};
+const Wrapper = styled.div`
+    background: ${({selected}) => (selected ? `${themeVars.activeColor} ` : 'none')};
     padding: 0.5rem;
     display: flex;
     align-items: center;
 `;
-const Handle = styled.div `
+const Handle = styled.div`
     content: '....';
     width: 20px;
     height: 30px;
@@ -49,56 +49,65 @@ const Handle = styled.div `
         content: '.. .. .. ..';
     }
 `;
-const Title = styled.div `
+const Title = styled.div`
     display: flex;
     align-items: center;
     margin-left: 10px;
 `;
-const Description = styled.div `
+const Description = styled.div`
     opacity: 0.8;
     margin-left: 10px;
     overflow: hidden;
 `;
-function View({ view, onEdit, handleProps }) {
+function View({view, onEdit, handleProps}) {
     var _a;
-    const { t } = useSharedTranslation();
-    const { lang, defaultLang } = useLang();
-    const { state: searchState, dispatch: searchDispatch } = useSearchReducer();
-    const [description, setDescription] = useState({ expand: false, key: 0 });
-    const { addView } = useExecuteAddViewMutation();
-    const { deleteView } = useExecuteDeleteViewMutation();
-    const { updateViewsOrder } = useUpdateViewsOrderMutation(searchState.library.id);
+    const {t} = useSharedTranslation();
+    const {lang, defaultLang} = useLang();
+    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
+    const [description, setDescription] = useState({expand: false, key: 0});
+    const {addView} = useExecuteAddViewMutation();
+    const {deleteView} = useExecuteDeleteViewMutation();
+    const {updateViewsOrder} = useUpdateViewsOrderMutation(searchState.library.id);
     const _changeView = () => {
-        searchDispatch({ type: SearchActionTypes.CHANGE_VIEW, view });
+        searchDispatch({type: SearchActionTypes.CHANGE_VIEW, view});
     };
     const ROWS_DESCRIPTION = 3;
-    const _handleDelete = async (event) => {
+    const _handleDelete = async event => {
         // stop progation to avoid click on view
         event.stopPropagation();
         await deleteView(view.id);
-        const newOrder = (view.shared ? searchState.sharedViewsOrder : searchState.userViewsOrder).filter(vId => vId !== view.id);
+        const newOrder = (view.shared ? searchState.sharedViewsOrder : searchState.userViewsOrder).filter(
+            vId => vId !== view.id
+        );
         await updateViewsOrder({
             key: (view.shared ? PREFIX_SHARED_VIEWS_ORDER_KEY : PREFIX_USER_VIEWS_ORDER_KEY) + searchState.library.id,
             value: newOrder,
             global: false
         });
         if (view.id === searchState.view.current.id) {
-            searchDispatch({ type: SearchActionTypes.CHANGE_VIEW, view: defaultView });
+            searchDispatch({type: SearchActionTypes.CHANGE_VIEW, view: defaultView});
         }
     };
-    const _handleDuplicate = async (event) => {
+    const _handleDuplicate = async event => {
         // stop progation to avoid click on view
         event.stopPropagation();
         try {
-            const newView = Object.assign(Object.assign({}, omit(view, ['id', 'owner'])), { library: searchState.library.id, label: {
+            const newView = Object.assign(Object.assign({}, omit(view, ['id', 'owner'])), {
+                library: searchState.library.id,
+                label: {
                     [defaultLang]: `${localizedTranslation(view.label, lang)} (${t('global.copy')})`
-                }, filters: getRequestFromFilters(view.filters), display: {
+                },
+                filters: getRequestFromFilters(view.filters),
+                display: {
                     size: ViewSizes.MEDIUM,
                     type: ViewTypes.list
-                }, valuesVersions: objectToNameValueArray(view.valuesVersions).map(version => ({
+                },
+                valuesVersions: objectToNameValueArray(view.valuesVersions).map(version => ({
                     treeId: version.name,
                     treeNode: version.value.id
-                })), shared: false });
+                })),
+                shared: false
+            });
             const newViewRes = await addView({
                 view: newView
             });
@@ -107,34 +116,167 @@ function View({ view, onEdit, handleProps }) {
                 value: [...searchState.userViewsOrder, newViewRes.data.saveView.id],
                 global: false
             });
-        }
-        catch (e) {
+        } catch (e) {
             console.error(e);
         }
     };
-    const _handleEdit = (event) => {
+    const _handleEdit = event => {
         // stop progation to avoid click on view
         event.stopPropagation();
         onEdit(view.id);
     };
     const _onExpand = () => {
-        setDescription({ expand: true, key: description.key });
+        setDescription({expand: true, key: description.key});
     };
     const _onClose = () => {
-        setDescription({ expand: false, key: description.key + 1 });
+        setDescription({expand: false, key: description.key + 1});
     };
     const selected = view.id === ((_a = searchState.view.current) === null || _a === void 0 ? void 0 : _a.id);
     const [isActionsShown, setIsActionsShown] = useState(false);
     const viewLabel = localizedTranslation(view.label, lang);
-    return (_jsxs(Wrapper, Object.assign({ selected: selected, onClick: _changeView, color: view.color, onMouseEnter: () => setIsActionsShown(true), onMouseLeave: () => setIsActionsShown(false) }, { children: [_jsx(Handle, Object.assign({ className: "view-handle" }, handleProps)), _jsxs(Infos, { children: [_jsxs(Title, Object.assign({ "data-testid": "view-title" }, { children: [_jsx(IconViewType, { type: view.display.type }), _jsx(Typography.Text, Object.assign({ ellipsis: { tooltip: true }, style: { padding: '0 .5em', width: 'calc(100% - 1em)' } }, { children: viewLabel }))] })), view.description && (_jsxs(Description, { children: [_jsx(Typography.Paragraph, Object.assign({ ellipsis: {
-                                    rows: ROWS_DESCRIPTION,
-                                    expandable: true,
-                                    onExpand: _onExpand,
-                                    symbol: t('view.see-more')
-                                }, style: { marginBottom: 0 } }, { children: localizedTranslation(view.description, lang) }), description.key), description.expand && (_jsx("a", Object.assign({ href: "!#", onClick: ev => {
-                                    ev.preventDefault();
-                                    _onClose();
-                                } }, { children: t('global.close') })))] }))] }), !view.owner && !isActionsShown && _jsx(RiUserReceivedLine, { size: "1.3em" }), isActionsShown && (_jsxs(_Fragment, { children: [_jsx(Tooltip, Object.assign({ title: t('global.edit') }, { children: _jsx(Button, { onClick: _handleEdit, disabled: !view.owner, type: "text", size: "small", shape: "circle", icon: _jsx(EditOutlined, {}) }, "edit") })), _jsx(Tooltip, Object.assign({ title: t('global.duplicate') }, { children: _jsx(Button, { onClick: _handleDuplicate, type: "text", size: "small", shape: "circle", icon: _jsx(CopyOutlined, {}) }, "duplicate") })), _jsx(Tooltip, Object.assign({ title: t('global.delete') }, { children: _jsx(Button, { onClick: _handleDelete, disabled: !view.owner, type: "text", size: "small", shape: "circle", icon: _jsx(DeleteOutlined, {}) }, "delete") }))] }))] }), view.id));
+    return _jsxs(
+        Wrapper,
+        Object.assign(
+            {
+                selected: selected,
+                onClick: _changeView,
+                color: view.color,
+                onMouseEnter: () => setIsActionsShown(true),
+                onMouseLeave: () => setIsActionsShown(false)
+            },
+            {
+                children: [
+                    _jsx(Handle, Object.assign({className: 'view-handle'}, handleProps)),
+                    _jsxs(Infos, {
+                        children: [
+                            _jsxs(
+                                Title,
+                                Object.assign(
+                                    {'data-testid': 'view-title'},
+                                    {
+                                        children: [
+                                            _jsx(IconViewType, {type: view.display.type}),
+                                            _jsx(
+                                                Typography.Text,
+                                                Object.assign(
+                                                    {
+                                                        ellipsis: {tooltip: true},
+                                                        style: {padding: '0 .5em', width: 'calc(100% - 1em)'}
+                                                    },
+                                                    {children: viewLabel}
+                                                )
+                                            )
+                                        ]
+                                    }
+                                )
+                            ),
+                            view.description &&
+                                _jsxs(Description, {
+                                    children: [
+                                        _jsx(
+                                            Typography.Paragraph,
+                                            Object.assign(
+                                                {
+                                                    ellipsis: {
+                                                        rows: ROWS_DESCRIPTION,
+                                                        expandable: true,
+                                                        onExpand: _onExpand,
+                                                        symbol: t('view.see-more')
+                                                    },
+                                                    style: {marginBottom: 0}
+                                                },
+                                                {children: localizedTranslation(view.description, lang)}
+                                            ),
+                                            description.key
+                                        ),
+                                        description.expand &&
+                                            _jsx(
+                                                'a',
+                                                Object.assign(
+                                                    {
+                                                        href: '!#',
+                                                        onClick: ev => {
+                                                            ev.preventDefault();
+                                                            _onClose();
+                                                        }
+                                                    },
+                                                    {children: t('global.close')}
+                                                )
+                                            )
+                                    ]
+                                })
+                        ]
+                    }),
+                    !view.owner && !isActionsShown && _jsx(RiUserReceivedLine, {size: '1.3em'}),
+                    isActionsShown &&
+                        _jsxs(_Fragment, {
+                            children: [
+                                _jsx(
+                                    Tooltip,
+                                    Object.assign(
+                                        {title: t('global.edit')},
+                                        {
+                                            children: _jsx(
+                                                Button,
+                                                {
+                                                    onClick: _handleEdit,
+                                                    disabled: !view.owner,
+                                                    type: 'text',
+                                                    size: 'small',
+                                                    shape: 'circle',
+                                                    icon: _jsx(EditOutlined, {})
+                                                },
+                                                'edit'
+                                            )
+                                        }
+                                    )
+                                ),
+                                _jsx(
+                                    Tooltip,
+                                    Object.assign(
+                                        {title: t('global.duplicate')},
+                                        {
+                                            children: _jsx(
+                                                Button,
+                                                {
+                                                    onClick: _handleDuplicate,
+                                                    type: 'text',
+                                                    size: 'small',
+                                                    shape: 'circle',
+                                                    icon: _jsx(CopyOutlined, {})
+                                                },
+                                                'duplicate'
+                                            )
+                                        }
+                                    )
+                                ),
+                                _jsx(
+                                    Tooltip,
+                                    Object.assign(
+                                        {title: t('global.delete')},
+                                        {
+                                            children: _jsx(
+                                                Button,
+                                                {
+                                                    onClick: _handleDelete,
+                                                    disabled: !view.owner,
+                                                    type: 'text',
+                                                    size: 'small',
+                                                    shape: 'circle',
+                                                    icon: _jsx(DeleteOutlined, {})
+                                                },
+                                                'delete'
+                                            )
+                                        }
+                                    )
+                                )
+                            ]
+                        })
+                ]
+            }
+        ),
+        view.id
+    );
 }
 export default View;
-//# sourceMappingURL=View.js.map
+//# sourceMappingURL=View.js.map

package/dist/components/LibraryItemsList/ViewPanel/View/index.js

@@ -3,4 +3,4 @@
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import View from './View';
 export default View;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map