initial commit

src/app/molecules/channel-selector/ChannelSelector.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ChannelSelector.scss';
+
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
+import { blurOnBubbling } from '../../atoms/button/script';
+
+function ChannelSelector({
+  selected, unread, notificationCount, alert,
+  iconSrc, imageSrc, roomId, onClick, children,
+}) {
+  return (
+    <button
+      className={`channel-selector__button-wrapper${selected ? ' channel-selector--selected' : ''}`}
+      type="button"
+      onClick={onClick}
+      onMouseUp={(e) => blurOnBubbling(e, '.channel-selector__button-wrapper')}
+    >
+      <div className="channel-selector">
+        <div className="channel-selector__icon flex--center">
+          <Avatar
+            text={children.slice(0, 1)}
+            bgColor={colorMXID(roomId)}
+            imageSrc={imageSrc}
+            iconSrc={iconSrc}
+            size="extra-small"
+          />
+        </div>
+        <div className="channel-selector__text-container">
+          <Text variant="b1">{children}</Text>
+        </div>
+        <div className="channel-selector__badge-container">
+          {
+            notificationCount !== 0
+              ? unread && (
+                <NotificationBadge alert={alert}>
+                  {notificationCount}
+                </NotificationBadge>
+              )
+              : unread && <div className="channel-selector--unread" />
+          }
+        </div>
+      </div>
+    </button>
+  );
+}
+
+ChannelSelector.defaultProps = {
+  selected: false,
+  unread: false,
+  notificationCount: 0,
+  alert: false,
+  iconSrc: null,
+  imageSrc: null,
+};
+
+ChannelSelector.propTypes = {
+  selected: PropTypes.bool,
+  unread: PropTypes.bool,
+  notificationCount: PropTypes.number,
+  alert: PropTypes.bool,
+  iconSrc: PropTypes.string,
+  imageSrc: PropTypes.string,
+  roomId: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.string.isRequired,
+};
+
+export default ChannelSelector;

src/app/molecules/channel-selector/ChannelSelector.scss

@@ -0,0 +1,66 @@
+.channel-selector__button-wrapper {
+  display: block;
+  width: calc(100% - var(--sp-extra-tight));
+  margin-left: auto;
+  padding: var(--sp-extra-tight) var(--sp-extra-tight);
+  border: 1px solid transparent;
+  border-radius:  var(--bo-radius);
+  cursor: pointer;
+
+  [dir=rtl] & {
+    margin: {
+      left: 0;
+      right: auto;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+    }
+  }
+  &:focus {
+    outline: none;
+    background-color: var(--bg-surface-hover);
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+}
+.channel-selector {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    .avatar__border {
+      box-shadow: none;
+    }
+  }
+  &__text-container {
+    flex: 1;
+    min-width: 0;
+    margin: 0 var(--sp-extra-tight);
+
+    & .text {
+      color: var(--tc-surface-normal);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.channel-selector--unread {
+  margin: 0 var(--sp-ultra-tight);
+  height: 8px;
+  width: 8px;
+  background-color: var(--tc-surface-low);
+  border-radius: 50%;
+  opacity: .4;
+}
+.channel-selector--selected {
+  background-color: var(--bg-surface);
+  border-color: var(--bg-surface-border);
+}