Initial commit

client/src/components/ProjectMembershipsStep/Item.jsx

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Menu } from 'semantic-ui-react';
+
+import User from '../User';
+
+import styles from './Item.module.css';
+
+const Item = React.memo(({
+  isPersisted, isActive, user, onUserSelect, onUserDeselect,
+}) => {
+  const handleToggleClick = useCallback(() => {
+    if (isActive) {
+      onUserDeselect();
+    } else {
+      onUserSelect();
+    }
+  }, [isActive, onUserSelect, onUserDeselect]);
+
+  return (
+    <Menu.Item
+      active={isActive}
+      disabled={!isPersisted}
+      className={classNames(styles.menuItem, isActive && styles.menuItemActive)}
+      onClick={handleToggleClick}
+    >
+      <span className={styles.user}>
+        <User name={user.name} avatar={user.avatar} />
+      </span>
+      <div className={classNames(styles.menuItemText, isActive && styles.menuItemTextActive)}>
+        {user.name}
+      </div>
+    </Menu.Item>
+  );
+});
+
+Item.propTypes = {
+  isPersisted: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onUserSelect: PropTypes.func.isRequired,
+  onUserDeselect: PropTypes.func.isRequired,
+};
+
+export default Item;

client/src/components/ProjectMembershipsStep/Item.module.css

@@ -0,0 +1,41 @@
+.menuItem {
+  display: block !important;
+  margin: 0 !important;
+  padding: 4px !important;
+}
+
+.menuItemActive {
+  background: transparent !important;
+}
+
+.menuItemActive:hover {
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+
+.menuItemText {
+  display: inline-block !important;
+  line-height: 32px !important;
+  width: calc(100% - 40px) !important;
+}
+
+.menuItemTextActive:before {
+  bottom: 2px;
+  color: #798d99;
+  content: "Г";
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 36px;
+  position: absolute;
+  right: 2px;
+  text-align: center;
+  text-shadow: -1px 1px 0 rgba(0, 0, 0, 0.2);
+  transform: rotate(-135deg);
+  width: 36px;
+}
+
+.user {
+  display: inline-block;
+  line-height: 32px;
+  padding-right: 8px;
+  width: 40px;
+}

client/src/components/ProjectMembershipsStep/ProjectMembershipsStep.jsx

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Menu } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import Item from './Item';
+
+import styles from './ProjectMembershipsStep.module.css';
+
+const ProjectMembershipsStep = React.memo(
+  ({
+    items, currentUserIds, title, onUserSelect, onUserDeselect, onBack,
+  }) => {
+    const [t] = useTranslation();
+
+    const handleUserSelect = useCallback(
+      (id) => {
+        onUserSelect(id);
+      },
+      [onUserSelect],
+    );
+
+    const handleUserDeselect = useCallback(
+      (id) => {
+        onUserDeselect(id);
+      },
+      [onUserDeselect],
+    );
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
+        <Popup.Content>
+          <Menu secondary vertical className={styles.menu}>
+            {items.map((item) => (
+              <Item
+                key={item.id}
+                isPersisted={item.isPersisted}
+                isActive={currentUserIds.includes(item.user.id)}
+                user={item.user}
+                onUserSelect={() => handleUserSelect(item.user.id)}
+                onUserDeselect={() => handleUserDeselect(item.user.id)}
+              />
+            ))}
+          </Menu>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+ProjectMembershipsStep.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  items: PropTypes.array.isRequired,
+  currentUserIds: PropTypes.array.isRequired,
+  /* eslint-enable react/forbid-prop-types */
+  title: PropTypes.string,
+  onUserSelect: PropTypes.func.isRequired,
+  onUserDeselect: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+};
+
+ProjectMembershipsStep.defaultProps = {
+  title: 'common.members',
+  onBack: undefined,
+};
+
+export default ProjectMembershipsStep;

client/src/components/ProjectMembershipsStep/ProjectMembershipsStep.module.css

@@ -0,0 +1,4 @@
+.menu {
+  margin: -7px auto -5px !important;
+  width: 100% !important;
+}

client/src/components/ProjectMembershipsStep/index.js

@@ -0,0 +1,3 @@
+import ProjectMembershipsStep from './ProjectMembershipsStep';
+
+export default ProjectMembershipsStep;