@jupyter/collaboration 3.1.0-rc.0 → 3.1.1

package/lib/collaboratorspanel.js

@@ -89,7 +89,7 @@ export function Collaborator(props) {
         var _a, _b;
         const path = document.split(':');
         const fileTypes = (_b = (_a = props.docRegistry) === null || _a === void 0 ? void 0 : _a.getFileTypesForPath(path[1])) === null || _b === void 0 ? void 0 : _b.filter(ft => ft.icon !== undefined);
-        const icon = fileTypes ? fileTypes[0].icon : fileIcon;
+        const icon = (fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.length) ? fileTypes[0].icon : fileIcon;
         const iconClass = fileTypes
             ? fileTypes[0].iconClass
             : undefined;

package/lib/index.d.ts

@@ -8,3 +8,4 @@ export * from './cursors';
 export * from './menu';
 export * from './sharedlink';
 export * from './userinfopanel';
+export * from './users-item';

package/lib/index.js

@@ -10,3 +10,4 @@ export * from './cursors';
 export * from './menu';
 export * from './sharedlink';
 export * from './userinfopanel';
+export * from './users-item';

package/lib/users-item.d.ts

@@ -0,0 +1,85 @@
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { User } from '@jupyterlab/services';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import * as React from 'react';
+/**
+ * The namespace for the UsersItem component.
+ */
+export declare namespace UsersItem {
+    /**
+     * Properties of the component.
+     */
+    interface IProps {
+        /**
+         * The model of the document.
+         */
+        model: DocumentRegistry.IModel | null;
+        /**
+         * A function to display the user icons, optional.
+         * This function will overwrite the default one, and can be used to handle event on
+         * icons.
+         */
+        iconRenderer?: (props: UsersItem.IIconRendererProps) => JSX.Element;
+    }
+    /**
+     * The state of the component.
+     */
+    interface IState {
+        /**
+         * The user list.
+         */
+        usersList: IUserData[];
+    }
+    /**
+     * Properties send to the iconRenderer function.
+     */
+    interface IIconRendererProps extends React.HTMLAttributes<HTMLElement> {
+        /**
+         * The user.
+         */
+        user: IUserData;
+        /**
+         * The document's model.
+         */
+        model?: DocumentRegistry.IModel;
+    }
+    /**
+     * The user data type.
+     */
+    type IUserData = {
+        /**
+         * User id (the client id of the awareness).
+         */
+        userId: number;
+        /**
+         * User data.
+         */
+        userData: User.IIdentity;
+    };
+}
+/**
+ * A component displaying the collaborative users of a document.
+ */
+export declare class UsersItem extends React.Component<UsersItem.IProps, UsersItem.IState> {
+    constructor(props: UsersItem.IProps);
+    /**
+     * Static method to create a widget.
+     */
+    static createWidget(options: UsersItem.IProps): ReactWidget;
+    componentDidMount(): void;
+    /**
+     * Filter out the duplicated users, which can happen temporary on reload.
+     */
+    private filterDuplicated;
+    render(): React.ReactNode;
+    /**
+     * Triggered when a change occurs in the document awareness, to build again the users list.
+     */
+    private _awarenessChange;
+    private _model;
+    private _iconRenderer;
+}
+/**
+ * Default renderer for the user icon.
+ */
+export declare function DefaultIconRenderer(props: UsersItem.IIconRendererProps): JSX.Element;

package/lib/users-item.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { classes, ReactWidget } from '@jupyterlab/ui-components';
+import * as React from 'react';
+const USERS_ITEM_CLASS = 'jp-toolbar-users-item';
+/**
+ * A component displaying the collaborative users of a document.
+ */
+export class UsersItem extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        /**
+         * Triggered when a change occurs in the document awareness, to build again the users list.
+         */
+        this._awarenessChange = () => {
+            var _a;
+            const clients = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getStates();
+            const users = [];
+            if (clients) {
+                clients.forEach((val, key) => {
+                    if (val.user) {
+                        users.push({ userId: key, userData: val.user });
+                    }
+                });
+            }
+            this.setState(old => ({ ...old, usersList: users }));
+        };
+        this._model = props.model;
+        this._iconRenderer = (_a = props.iconRenderer) !== null && _a !== void 0 ? _a : null;
+        this.state = { usersList: [] };
+    }
+    /**
+     * Static method to create a widget.
+     */
+    static createWidget(options) {
+        return ReactWidget.create(React.createElement(UsersItem, { ...options }));
+    }
+    componentDidMount() {
+        var _a;
+        (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.on('change', this._awarenessChange);
+        this._awarenessChange();
+    }
+    /**
+     * Filter out the duplicated users, which can happen temporary on reload.
+     */
+    filterDuplicated(usersList) {
+        var _a;
+        const newList = [];
+        const selected = new Set();
+        for (const element of usersList) {
+            if (((_a = element === null || element === void 0 ? void 0 : element.userData) === null || _a === void 0 ? void 0 : _a.username) &&
+                !selected.has(element.userData.username)) {
+                selected.add(element.userData.username);
+                newList.push(element);
+            }
+        }
+        return newList;
+    }
+    render() {
+        var _a;
+        const IconRenderer = (_a = this._iconRenderer) !== null && _a !== void 0 ? _a : DefaultIconRenderer;
+        return (React.createElement("div", { className: USERS_ITEM_CLASS }, this.filterDuplicated(this.state.usersList).map(user => {
+            if (this._model &&
+                user.userId !== this._model.sharedModel.awareness.clientID) {
+                return IconRenderer({ user, model: this._model });
+            }
+        })));
+    }
+}
+/**
+ * Default renderer for the user icon.
+ */
+export function DefaultIconRenderer(props) {
+    let el;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { user, model, ...htmlProps } = props;
+    const iconClasses = classes('lm-MenuBar-itemIcon', props.className || '');
+    if (user.userData.avatar_url) {
+        el = (React.createElement("div", { ...htmlProps, key: user.userId, title: user.userData.display_name, className: classes(iconClasses, 'jp-MenuBar-imageIcon') },
+            React.createElement("img", { src: user.userData.avatar_url, alt: "" })));
+    }
+    else {
+        el = (React.createElement("div", { ...htmlProps, key: user.userId, title: user.userData.display_name, className: classes(iconClasses, 'jp-MenuBar-anonymousIcon'), style: { backgroundColor: user.userData.color } },
+            React.createElement("span", null, user.userData.initials)));
+    }
+    return el;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/collaboration",
-  "version": "3.1.0-rc.0",
+  "version": "3.1.1",
   "description": "JupyterLab - Real-Time Collaboration Widgets",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {

package/style/base.css

@@ -5,6 +5,7 @@
 
 @import url('./menu.css');
 @import url('./sidepanel.css');
+@import url('./users-item.css');
 
 .jp-shared-link-body {
     user-select: none;

package/style/users-item.css

@@ -0,0 +1,20 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+.jp-toolbar-users-item {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.jp-toolbar-users-item .jp-MenuBar-anonymousIcon,
+.jp-toolbar-users-item .jp-MenuBar-imageIcon {
+  position: relative;
+  left: 0;
+  height: 22px;
+  width: 22px;
+  box-sizing: border-box;
+  cursor: default;
+}