Merge remote-tracking branch 'upstream/dev' into feat/element-call
This commit is contained in:
hazre
commit
e01009fd07
401 changed files with 10981 additions and 10935 deletions
|
|
@ -1,69 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Avatar.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
|
||||
import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
|
||||
import { avatarInitials } from '../../../util/common';
|
||||
|
||||
const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
|
||||
let textSize = 's1';
|
||||
if (size === 'large') textSize = 'h1';
|
||||
if (size === 'small') textSize = 'b1';
|
||||
if (size === 'extra-small') textSize = 'b3';
|
||||
|
||||
return (
|
||||
<div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
|
||||
{imageSrc !== null ? (
|
||||
<img
|
||||
draggable="false"
|
||||
src={imageSrc}
|
||||
onLoad={(e) => {
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = ImageBrokenSVG;
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
|
||||
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
|
||||
>
|
||||
{iconSrc !== null ? (
|
||||
<RawIcon size={size} src={iconSrc} color={iconColor} />
|
||||
) : (
|
||||
text !== null && (
|
||||
<Text variant={textSize} primary>
|
||||
{avatarInitials(text)}
|
||||
</Text>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Avatar.defaultProps = {
|
||||
text: null,
|
||||
bgColor: 'transparent',
|
||||
iconSrc: null,
|
||||
iconColor: null,
|
||||
imageSrc: null,
|
||||
size: 'normal',
|
||||
};
|
||||
|
||||
Avatar.propTypes = {
|
||||
text: PropTypes.string,
|
||||
bgColor: PropTypes.string,
|
||||
iconSrc: PropTypes.string,
|
||||
iconColor: PropTypes.string,
|
||||
imageSrc: PropTypes.string,
|
||||
size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
|
||||
.avatar-container {
|
||||
display: inline-flex;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: var(--bo-radius);
|
||||
position: relative;
|
||||
|
||||
&__large {
|
||||
width: var(--av-large);
|
||||
height: var(--av-large);
|
||||
}
|
||||
&__normal {
|
||||
width: var(--av-normal);
|
||||
height: var(--av-normal);
|
||||
}
|
||||
|
||||
&__small {
|
||||
width: var(--av-small);
|
||||
height: var(--av-small);
|
||||
}
|
||||
|
||||
&__extra-small {
|
||||
width: var(--av-extra-small);
|
||||
height: var(--av-extra-small);
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: inherit;
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.avatar__border {
|
||||
@extend .cp-fx__row--c-c;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
&--active {
|
||||
@extend .avatar__border;
|
||||
box-shadow: var(--bs-surface-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import { avatarInitials, cssVar } from '../../../util/common';
|
||||
|
||||
// renders the avatar and returns it as an URL
|
||||
export default async function renderAvatar({
|
||||
text, bgColor, imageSrc, size, borderRadius, scale,
|
||||
}) {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = size * scale;
|
||||
canvas.height = size * scale;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.scale(scale, scale);
|
||||
|
||||
// rounded corners
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(size, size);
|
||||
ctx.arcTo(0, size, 0, 0, borderRadius);
|
||||
ctx.arcTo(0, 0, size, 0, borderRadius);
|
||||
ctx.arcTo(size, 0, size, size, borderRadius);
|
||||
ctx.arcTo(size, size, 0, size, borderRadius);
|
||||
|
||||
if (imageSrc) {
|
||||
// clip corners of image
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
img.onerror = reject;
|
||||
img.onload = resolve;
|
||||
});
|
||||
img.src = imageSrc;
|
||||
await promise;
|
||||
|
||||
ctx.drawImage(img, 0, 0, size, size);
|
||||
} else {
|
||||
// colored background
|
||||
ctx.fillStyle = cssVar(bgColor);
|
||||
ctx.fill();
|
||||
|
||||
// centered letter
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = `${cssVar('--fs-s1')} ${cssVar('--font-primary')}`;
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(avatarInitials(text), size / 2, size / 2);
|
||||
}
|
||||
|
||||
return canvas.toDataURL();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return imageSrc;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './NotificationBadge.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
|
||||
function NotificationBadge({ alert, content }) {
|
||||
const notificationClass = alert ? ' notification-badge--alert' : '';
|
||||
return (
|
||||
<div className={`notification-badge${notificationClass}`}>
|
||||
{content !== null && <Text variant="b3" weight="bold">{content}</Text>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
NotificationBadge.defaultProps = {
|
||||
alert: false,
|
||||
content: null,
|
||||
};
|
||||
|
||||
NotificationBadge.propTypes = {
|
||||
alert: PropTypes.bool,
|
||||
content: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
};
|
||||
|
||||
export default NotificationBadge;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.notification-badge {
|
||||
min-width: 16px;
|
||||
min-height: 8px;
|
||||
padding: 0 var(--sp-ultra-tight);
|
||||
background-color: var(--bg-badge);
|
||||
border-radius: var(--bo-radius);
|
||||
|
||||
.text {
|
||||
color: var(--tc-badge);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--alert {
|
||||
background-color: var(--bg-positive);
|
||||
}
|
||||
|
||||
&:empty {
|
||||
min-width: 8px;
|
||||
margin: 0 var(--sp-ultra-tight);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Button.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
import { blurOnBubbling } from './script';
|
||||
|
||||
const Button = React.forwardRef(({
|
||||
id, className, variant, iconSrc,
|
||||
type, onClick, children, disabled,
|
||||
}, ref) => {
|
||||
const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
id={id === '' ? undefined : id}
|
||||
className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
|
||||
onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
|
||||
onClick={onClick}
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
>
|
||||
{iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
|
||||
{typeof children === 'string' && <Text variant="b1">{ children }</Text>}
|
||||
{typeof children !== 'string' && children }
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
Button.defaultProps = {
|
||||
id: '',
|
||||
className: null,
|
||||
variant: 'surface',
|
||||
iconSrc: null,
|
||||
type: 'button',
|
||||
onClick: null,
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
id: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
|
||||
iconSrc: PropTypes.string,
|
||||
type: PropTypes.oneOf(['button', 'submit', 'reset']),
|
||||
onClick: PropTypes.func,
|
||||
children: PropTypes.node.isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
@use 'state';
|
||||
@use '../../partials/dir';
|
||||
@use '../../partials/text';
|
||||
|
||||
.btn-surface,
|
||||
.btn-primary,
|
||||
.btn-positive,
|
||||
.btn-caution,
|
||||
.btn-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
min-width: 80px;
|
||||
padding: var(--sp-extra-tight) var(--sp-normal);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: var(--bo-radius);
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
|
||||
& .text {
|
||||
@extend .cp-txt__ellipsis;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
@include dir.side(padding, var(--sp-tight), var(--sp-loose));
|
||||
|
||||
}
|
||||
.ic-raw {
|
||||
@include dir.side(margin, 0, var(--sp-extra-tight));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin color($textColor, $iconColor) {
|
||||
.text {
|
||||
color: $textColor;
|
||||
}
|
||||
.ic-raw {
|
||||
background-color: $iconColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-surface {
|
||||
box-shadow: var(--bs-surface-border);
|
||||
@include color(var(--tc-surface-high), var(--ic-surface-normal));
|
||||
@include state.hover(var(--bg-surface-hover));
|
||||
@include state.focus(var(--bs-surface-outline));
|
||||
@include state.active(var(--bg-surface-active));
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--bg-primary);
|
||||
@include color(var(--tc-primary-high), var(--ic-primary-normal));
|
||||
@include state.hover(var(--bg-primary-hover));
|
||||
@include state.focus(var(--bs-primary-outline));
|
||||
@include state.active(var(--bg-primary-active));
|
||||
}
|
||||
.btn-positive {
|
||||
box-shadow: var(--bs-positive-border);
|
||||
@include color(var(--tc-positive-high), var(--ic-positive-normal));
|
||||
@include state.hover(var(--bg-positive-hover));
|
||||
@include state.focus(var(--bs-positive-outline));
|
||||
@include state.active(var(--bg-positive-active));
|
||||
}
|
||||
.btn-caution {
|
||||
box-shadow: var(--bs-caution-border);
|
||||
@include color(var(--tc-caution-high), var(--ic-caution-normal));
|
||||
@include state.hover(var(--bg-caution-hover));
|
||||
@include state.focus(var(--bs-caution-outline));
|
||||
@include state.active(var(--bg-caution-active));
|
||||
}
|
||||
.btn-danger {
|
||||
box-shadow: var(--bs-danger-border);
|
||||
@include color(var(--tc-danger-high), var(--ic-danger-normal));
|
||||
@include state.hover(var(--bg-danger-hover));
|
||||
@include state.focus(var(--bs-danger-outline));
|
||||
@include state.active(var(--bg-danger-active));
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Checkbox.scss';
|
||||
|
||||
function Checkbox({
|
||||
variant, isActive, onToggle,
|
||||
disabled, tabIndex,
|
||||
}) {
|
||||
const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
|
||||
if (onToggle === null) return <span className={className} />;
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button
|
||||
onClick={() => onToggle(!isActive)}
|
||||
className={className}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
tabIndex={tabIndex}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Checkbox.defaultProps = {
|
||||
variant: 'primary',
|
||||
isActive: false,
|
||||
onToggle: null,
|
||||
disabled: false,
|
||||
tabIndex: 0,
|
||||
};
|
||||
|
||||
Checkbox.propTypes = {
|
||||
variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
|
||||
isActive: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
tabIndex: PropTypes.number,
|
||||
};
|
||||
|
||||
export default Checkbox;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
@use './state';
|
||||
|
||||
.checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
background-color: var(--bg-surface-border);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
@extend .cp-fx__row--c-c;
|
||||
|
||||
&--active {
|
||||
background-color: black;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
border: 6px solid white;
|
||||
border-width: 0 0 3px 3px;
|
||||
transform: rotateZ(-45deg) translate(1px, -1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-primary.checkbox--active {
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
.checkbox-positive.checkbox--active {
|
||||
background-color: var(--bg-positive);
|
||||
}
|
||||
.checkbox-caution.checkbox--active {
|
||||
background-color: var(--bg-caution);
|
||||
}
|
||||
.checkbox-danger.checkbox--active {
|
||||
background-color: var(--bg-danger);
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './IconButton.scss';
|
||||
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
import Tooltip from '../tooltip/Tooltip';
|
||||
import { blurOnBubbling } from './script';
|
||||
import Text from '../text/Text';
|
||||
|
||||
const IconButton = React.forwardRef(({
|
||||
variant, size, type,
|
||||
tooltip, tooltipPlacement, src,
|
||||
onClick, tabIndex, disabled, isImage,
|
||||
className,
|
||||
}, ref) => {
|
||||
const btn = (
|
||||
<button
|
||||
ref={ref}
|
||||
className={`ic-btn ic-btn-${variant} ${className}`}
|
||||
onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
|
||||
onClick={onClick}
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
type={type}
|
||||
tabIndex={tabIndex}
|
||||
disabled={disabled}
|
||||
>
|
||||
<RawIcon size={size} src={src} isImage={isImage} />
|
||||
</button>
|
||||
);
|
||||
if (tooltip === null) return btn;
|
||||
return (
|
||||
<Tooltip
|
||||
placement={tooltipPlacement}
|
||||
content={<Text variant="b2">{tooltip}</Text>}
|
||||
>
|
||||
{btn}
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
IconButton.defaultProps = {
|
||||
variant: 'surface',
|
||||
size: 'normal',
|
||||
type: 'button',
|
||||
tooltip: null,
|
||||
tooltipPlacement: 'top',
|
||||
onClick: null,
|
||||
tabIndex: 0,
|
||||
disabled: false,
|
||||
isImage: false,
|
||||
className: '',
|
||||
};
|
||||
|
||||
IconButton.propTypes = {
|
||||
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
|
||||
size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
|
||||
type: PropTypes.oneOf(['button', 'submit', 'reset']),
|
||||
tooltip: PropTypes.string,
|
||||
tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
||||
src: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
tabIndex: PropTypes.number,
|
||||
disabled: PropTypes.bool,
|
||||
isImage: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconButton;
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@use 'state';
|
||||
|
||||
.ic-btn {
|
||||
padding: var(--sp-extra-tight);
|
||||
border: none;
|
||||
border-radius: var(--bo-radius);
|
||||
background-color: transparent;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
}
|
||||
|
||||
@mixin color($color) {
|
||||
.ic-raw {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
@mixin focus($color) {
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.ic-btn-surface {
|
||||
@include color(var(--ic-surface-normal));
|
||||
@include state.hover(var(--bg-surface-hover));
|
||||
@include focus(var(--bg-surface-hover));
|
||||
@include state.active(var(--bg-surface-active));
|
||||
}
|
||||
.ic-btn-primary {
|
||||
@include color(var(--ic-primary-normal));
|
||||
@include state.hover(var(--bg-primary-hover));
|
||||
@include focus(var(--bg-primary-hover));
|
||||
@include state.active(var(--bg-primary-active));
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
.ic-btn-positive {
|
||||
@include color(var(--ic-positive-normal));
|
||||
@include state.hover(var(--bg-positive-hover));
|
||||
@include focus(var(--bg-positive-hover));
|
||||
@include state.active(var(--bg-positive-active));
|
||||
}
|
||||
.ic-btn-caution {
|
||||
@include color(var(--ic-caution-normal));
|
||||
@include state.hover(var(--bg-caution-hover));
|
||||
@include focus(var(--bg-caution-hover));
|
||||
@include state.active(var(--bg-caution-active));
|
||||
}
|
||||
.ic-btn-danger {
|
||||
@include color(var(--ic-danger-normal));
|
||||
@include state.hover(var(--bg-danger-hover));
|
||||
@include focus(var(--bg-danger-hover));
|
||||
@include state.active(var(--bg-danger-active));
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './RadioButton.scss';
|
||||
|
||||
function RadioButton({ isActive, onToggle, disabled }) {
|
||||
if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button
|
||||
onClick={() => onToggle(!isActive)}
|
||||
className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
RadioButton.defaultProps = {
|
||||
isActive: false,
|
||||
onToggle: null,
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
RadioButton.propTypes = {
|
||||
isActive: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default RadioButton;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
@use './state';
|
||||
|
||||
.radio-btn {
|
||||
@extend .cp-fx__row--c-c;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-surface-border);
|
||||
border: 2px solid var(--bg-surface-border);
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--bg-surface-border);
|
||||
border-radius: 50%;
|
||||
}
|
||||
&--active {
|
||||
border: 2px solid var(--bg-positive);
|
||||
&::before {
|
||||
background-color: var(--bg-positive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Toggle.scss';
|
||||
|
||||
function Toggle({ isActive, onToggle, disabled }) {
|
||||
const className = `toggle${isActive ? ' toggle--active' : ''}`;
|
||||
if (onToggle === null) return <span className={className} />;
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button
|
||||
onClick={() => onToggle(!isActive)}
|
||||
className={className}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Toggle.defaultProps = {
|
||||
isActive: false,
|
||||
disabled: false,
|
||||
onToggle: null,
|
||||
};
|
||||
|
||||
Toggle.propTypes = {
|
||||
isActive: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Toggle;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
@use './state';
|
||||
|
||||
.toggle {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
padding: 0 var(--sp-ultra-tight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--bo-radius);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
cursor: pointer;
|
||||
background-color: var(--bg-surface-low);
|
||||
@include state.disabled;
|
||||
|
||||
transition: background 200ms ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--tc-surface-low);
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--bg-positive);
|
||||
|
||||
&::before {
|
||||
--ltr: translateX(calc(125%));
|
||||
--rtl: translateX(calc(-125%));
|
||||
@include dir.prop(transform, var(--ltr), var(--rtl));
|
||||
|
||||
transform: translateX(calc(125%));
|
||||
background-color: var(--bg-surface);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
|
||||
@mixin hover($color) {
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin focus($outline) {
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: $outline;
|
||||
}
|
||||
}
|
||||
@mixin active($color) {
|
||||
&:active {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
@mixin disabled {
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* blur [selector] element in bubbling path.
|
||||
* @param {Event} e Event
|
||||
* @param {string} selector element selector for Element.matches([selector])
|
||||
* @return {boolean} if blured return true, else return false with warning in console
|
||||
*/
|
||||
|
||||
function blurOnBubbling(e, selector) {
|
||||
const bubblingPath = e.nativeEvent.composedPath();
|
||||
|
||||
for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
|
||||
if (bubblingPath[elIndex] === document) {
|
||||
console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
|
||||
break;
|
||||
}
|
||||
if (bubblingPath[elIndex].matches(selector)) {
|
||||
setTimeout(() => bubblingPath[elIndex].blur(), 50);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
export { blurOnBubbling };
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './InfoCard.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
import IconButton from '../button/IconButton';
|
||||
|
||||
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
||||
|
||||
function InfoCard({
|
||||
className, style,
|
||||
variant, iconSrc,
|
||||
title, content,
|
||||
rounded, requestClose,
|
||||
}) {
|
||||
const classes = [`info-card info-card--${variant}`];
|
||||
if (rounded) classes.push('info-card--rounded');
|
||||
if (className) classes.push(className);
|
||||
return (
|
||||
<div className={classes.join(' ')} style={style}>
|
||||
{iconSrc && (
|
||||
<div className="info-card__icon">
|
||||
<RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
|
||||
</div>
|
||||
)}
|
||||
<div className="info-card__content">
|
||||
<Text>{title}</Text>
|
||||
{content}
|
||||
</div>
|
||||
{requestClose && (
|
||||
<IconButton src={CrossIC} variant={variant} onClick={requestClose} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
InfoCard.defaultProps = {
|
||||
className: null,
|
||||
style: null,
|
||||
variant: 'surface',
|
||||
iconSrc: null,
|
||||
content: null,
|
||||
rounded: false,
|
||||
requestClose: null,
|
||||
};
|
||||
|
||||
InfoCard.propTypes = {
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.shape({}),
|
||||
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
|
||||
iconSrc: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
content: PropTypes.node,
|
||||
rounded: PropTypes.bool,
|
||||
requestClose: PropTypes.func,
|
||||
};
|
||||
|
||||
export default InfoCard;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
@use '.././../partials/flex';
|
||||
@use '.././../partials/dir';
|
||||
|
||||
.info-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
line-height: 0;
|
||||
padding: var(--sp-tight);
|
||||
@include dir.prop(border-left, 4px solid transparent, none);
|
||||
@include dir.prop(border-right, none, 4px solid transparent);
|
||||
|
||||
& > .ic-btn {
|
||||
padding: 0;
|
||||
border-radius: 4;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin: 0 var(--sp-tight);
|
||||
@extend .cp-fx__item-one;
|
||||
|
||||
& > *:nth-child(2) {
|
||||
margin-top: var(--sp-ultra-tight);
|
||||
}
|
||||
}
|
||||
|
||||
&--rounded {
|
||||
@include dir.prop(
|
||||
border-radius,
|
||||
0 var(--bo-radius) var(--bo-radius) 0,
|
||||
var(--bo-radius) 0 0 var(--bo-radius)
|
||||
);
|
||||
}
|
||||
|
||||
&--surface {
|
||||
border-color: var(--bg-surface-border);
|
||||
background-color: var(--bg-surface-hover);
|
||||
|
||||
}
|
||||
&--primary {
|
||||
border-color: var(--bg-primary);
|
||||
background-color: var(--bg-primary-hover);
|
||||
& .text {
|
||||
color: var(--tc-primary-high);
|
||||
&-b3 {
|
||||
color: var(--tc-primary-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--positive {
|
||||
border-color: var(--bg-positive-border);
|
||||
background-color: var(--bg-positive-hover);
|
||||
& .text {
|
||||
color: var(--tc-positive-high);
|
||||
&-b3 {
|
||||
color: var(--tc-positive-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--caution {
|
||||
border-color: var(--bg-caution-border);
|
||||
background-color: var(--bg-caution-hover);
|
||||
& .text {
|
||||
color: var(--tc-caution-high);
|
||||
&-b3 {
|
||||
color: var(--tc-caution-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--danger {
|
||||
border-color: var(--bg-danger-border);
|
||||
background-color: var(--bg-danger-hover);
|
||||
& .text {
|
||||
color: var(--tc-danger-high);
|
||||
&-b3 {
|
||||
color: var(--tc-danger-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Chip.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
|
||||
function Chip({
|
||||
iconSrc, iconColor, text, children,
|
||||
onClick,
|
||||
}) {
|
||||
return (
|
||||
<button className="chip" type="button" onClick={onClick}>
|
||||
{iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
|
||||
{(text != null && text !== '') && <Text variant="b3">{text}</Text>}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Chip.propTypes = {
|
||||
iconSrc: PropTypes.string,
|
||||
iconColor: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
children: PropTypes.element,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
Chip.defaultProps = {
|
||||
iconSrc: null,
|
||||
iconColor: null,
|
||||
text: null,
|
||||
children: null,
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
export default Chip;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.chip {
|
||||
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
background: var(--bg-surface-low);
|
||||
border-radius: var(--bo-radius);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
cursor: pointer;
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& > .text {
|
||||
flex: 1;
|
||||
color: var(--tc-surface-high);
|
||||
}
|
||||
|
||||
& > .ic-raw {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@include dir.side(margin, 0, var(--sp-ultra-tight));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './ContextMenu.scss';
|
||||
|
||||
import Tippy from '@tippyjs/react';
|
||||
import 'tippy.js/animations/scale-extreme.css';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import Button from '../button/Button';
|
||||
import ScrollView from '../scroll/ScrollView';
|
||||
|
||||
function ContextMenu({
|
||||
content, placement, maxWidth, render, afterToggle,
|
||||
}) {
|
||||
const [isVisible, setVisibility] = useState(false);
|
||||
const showMenu = () => setVisibility(true);
|
||||
const hideMenu = () => setVisibility(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (afterToggle !== null) afterToggle(isVisible);
|
||||
}, [isVisible]);
|
||||
|
||||
return (
|
||||
<Tippy
|
||||
animation="scale-extreme"
|
||||
className="context-menu"
|
||||
visible={isVisible}
|
||||
onClickOutside={hideMenu}
|
||||
content={<ScrollView invisible>{typeof content === 'function' ? content(hideMenu) : content}</ScrollView>}
|
||||
placement={placement}
|
||||
interactive
|
||||
arrow={false}
|
||||
maxWidth={maxWidth}
|
||||
duration={200}
|
||||
>
|
||||
{render(isVisible ? hideMenu : showMenu)}
|
||||
</Tippy>
|
||||
);
|
||||
}
|
||||
|
||||
ContextMenu.defaultProps = {
|
||||
maxWidth: 'unset',
|
||||
placement: 'right',
|
||||
afterToggle: null,
|
||||
};
|
||||
|
||||
ContextMenu.propTypes = {
|
||||
content: PropTypes.oneOfType([
|
||||
PropTypes.node,
|
||||
PropTypes.func,
|
||||
]).isRequired,
|
||||
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
||||
maxWidth: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
render: PropTypes.func.isRequired,
|
||||
afterToggle: PropTypes.func,
|
||||
};
|
||||
|
||||
function MenuHeader({ children }) {
|
||||
return (
|
||||
<div className="context-menu__header">
|
||||
<Text variant="b3">{ children }</Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
MenuHeader.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
function MenuItem({
|
||||
variant, iconSrc, type,
|
||||
onClick, children, disabled,
|
||||
}) {
|
||||
return (
|
||||
<div className="context-menu__item">
|
||||
<Button
|
||||
variant={variant}
|
||||
iconSrc={iconSrc}
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
{ children }
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
MenuItem.defaultProps = {
|
||||
variant: 'surface',
|
||||
iconSrc: null,
|
||||
type: 'button',
|
||||
disabled: false,
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
MenuItem.propTypes = {
|
||||
variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
|
||||
iconSrc: PropTypes.string,
|
||||
type: PropTypes.oneOf(['button', 'submit']),
|
||||
onClick: PropTypes.func,
|
||||
children: PropTypes.node.isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
function MenuBorder() {
|
||||
return <div style={{ borderBottom: '1px solid var(--bg-surface-border)' }}> </div>;
|
||||
}
|
||||
|
||||
export {
|
||||
ContextMenu as default, MenuHeader, MenuItem, MenuBorder,
|
||||
};
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
@use '../../partials/text';
|
||||
@use '../../partials/dir';
|
||||
|
||||
.context-menu {
|
||||
background-color: var(--bg-surface);
|
||||
box-shadow: var(--bs-popup);
|
||||
border-radius: var(--bo-radius);
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
& .tippy-content > div > .scrollbar {
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu__click-wrapper {
|
||||
display: inline-flex;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu__header {
|
||||
height: 34px;
|
||||
padding: 0 var(--sp-normal);
|
||||
margin-bottom: var(--sp-ultra-tight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--bg-surface-border);
|
||||
|
||||
.text {
|
||||
@extend .cp-txt__ellipsis;
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: var(--sp-extra-tight);
|
||||
border-top: 1px solid var(--bg-surface-border);
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu__item {
|
||||
display: flex;
|
||||
button[class^="btn"] {
|
||||
@extend .cp-fx__item-one;
|
||||
justify-content: flex-start;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
white-space: nowrap;
|
||||
padding: var(--sp-extra-tight) var(--sp-normal);
|
||||
|
||||
& > .ic-raw {
|
||||
@include dir.side(margin, 0, var(--sp-tight));
|
||||
}
|
||||
|
||||
// if item doesn't have icon
|
||||
.text:first-child {
|
||||
@include dir.side(
|
||||
margin,
|
||||
calc(var(--ic-small) + var(--sp-tight)),
|
||||
0
|
||||
);
|
||||
}
|
||||
}
|
||||
.btn-surface:focus {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
.btn-positive:focus {
|
||||
background-color: var(--bg-positive-hover);
|
||||
}
|
||||
.btn-caution:focus {
|
||||
background-color: var(--bg-caution-hover);
|
||||
}
|
||||
.btn-danger:focus {
|
||||
background-color: var(--bg-danger-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
import cons from '../../../client/state/cons';
|
||||
import navigation from '../../../client/state/navigation';
|
||||
|
||||
import ContextMenu from './ContextMenu';
|
||||
|
||||
let key = null;
|
||||
function ReusableContextMenu() {
|
||||
const [data, setData] = useState(null);
|
||||
const openerRef = useRef(null);
|
||||
|
||||
const closeMenu = () => {
|
||||
key = null;
|
||||
if (data) openerRef.current.click();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const { cords } = data;
|
||||
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
|
||||
openerRef.current.style.width = `${cords.width}px`;
|
||||
openerRef.current.style.height = `${cords.height}px`;
|
||||
openerRef.current.click();
|
||||
}
|
||||
const handleContextMenuOpen = (placement, cords, render, afterClose) => {
|
||||
if (key) {
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
setData({
|
||||
placement, cords, render, afterClose,
|
||||
});
|
||||
};
|
||||
navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
|
||||
return () => {
|
||||
navigation.removeListener(
|
||||
cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
|
||||
handleContextMenuOpen,
|
||||
);
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
const handleAfterToggle = (isVisible) => {
|
||||
if (isVisible) {
|
||||
key = Math.random();
|
||||
return;
|
||||
}
|
||||
data?.afterClose?.();
|
||||
if (setData) setData(null);
|
||||
|
||||
if (key === null) return;
|
||||
const copyKey = key;
|
||||
setTimeout(() => {
|
||||
if (key === copyKey) key = null;
|
||||
}, 200);
|
||||
};
|
||||
|
||||
return (
|
||||
<ContextMenu
|
||||
afterToggle={handleAfterToggle}
|
||||
placement={data?.placement || 'right'}
|
||||
content={data?.render(closeMenu) ?? ''}
|
||||
render={(toggleMenu) => (
|
||||
<input
|
||||
ref={openerRef}
|
||||
onClick={toggleMenu}
|
||||
type="button"
|
||||
style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
backgroundColor: 'transparent',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
visibility: 'hidden',
|
||||
appearance: 'none',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReusableContextMenu;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Divider.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
|
||||
function Divider({ text, variant, align }) {
|
||||
const dividerClass = ` divider--${variant} divider--${align}`;
|
||||
return (
|
||||
<div className={`divider${dividerClass}`}>
|
||||
{text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Divider.defaultProps = {
|
||||
text: null,
|
||||
variant: 'surface',
|
||||
align: 'center',
|
||||
};
|
||||
|
||||
Divider.propTypes = {
|
||||
text: PropTypes.string,
|
||||
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
|
||||
align: PropTypes.oneOf(['left', 'center', 'right']),
|
||||
};
|
||||
|
||||
export default Divider;
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
.divider-line {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--local-divider-color);
|
||||
opacity: var(--local-divider-opacity);
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&--center::before,
|
||||
&--right::before {
|
||||
@extend .divider-line;
|
||||
}
|
||||
&--center::after,
|
||||
&--left::after {
|
||||
@extend .divider-line;
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding: 2px var(--sp-extra-tight);
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.divider--surface {
|
||||
--local-divider-color: var(--bg-divider);
|
||||
--local-divider-opacity: 1;
|
||||
|
||||
.divider__text {
|
||||
color: var(--tc-surface-low);
|
||||
border: 1px solid var(--bg-divider);
|
||||
}
|
||||
}
|
||||
.divider--primary {
|
||||
--local-divider-color: var(--bg-primary);
|
||||
--local-divider-opacity: .8;
|
||||
.divider__text {
|
||||
color: var(--tc-primary-high);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
}
|
||||
.divider--positive {
|
||||
--local-divider-color: var(--bg-positive);
|
||||
--local-divider-opacity: .8;
|
||||
.divider__text {
|
||||
color: var(--bg-surface);
|
||||
background-color: var(--bg-positive);
|
||||
}
|
||||
}
|
||||
.divider--danger {
|
||||
--local-divider-color: var(--bg-danger);
|
||||
--local-divider-opacity: .8;
|
||||
.divider__text {
|
||||
color: var(--bg-surface);
|
||||
background-color: var(--bg-danger);
|
||||
}
|
||||
}
|
||||
.divider--caution {
|
||||
--local-divider-color: var(--bg-caution);
|
||||
--local-divider-opacity: .8;
|
||||
.divider__text {
|
||||
color: var(--bg-surface);
|
||||
background-color: var(--bg-caution);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Header.scss';
|
||||
|
||||
function Header({ children }) {
|
||||
return (
|
||||
<div className="header">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
function TitleWrapper({ children }) {
|
||||
return (
|
||||
<div className="header__title-wrapper">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
TitleWrapper.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export { Header as default, TitleWrapper };
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@use '../../partials/text';
|
||||
@use '../../partials/dir';
|
||||
|
||||
.header {
|
||||
@include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
border-bottom: 1px solid var(--bg-surface-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__title-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 var(--sp-tight);
|
||||
|
||||
&:first-child {
|
||||
@include dir.side(margin, 0, var(--sp-tight));
|
||||
}
|
||||
|
||||
& > .text:first-child {
|
||||
@extend .cp-txt__ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
& > .text-b3{
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
margin-top: var(--sp-ultra-tight);
|
||||
@include dir.side(margin, var(--sp-tight), 0);
|
||||
@include dir.side(padding, var(--sp-tight), 0);
|
||||
@include dir.side(border, 1px solid var(--bg-surface-border), none);
|
||||
|
||||
max-height: calc(2 * var(--lh-b3));
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Input.scss';
|
||||
|
||||
import TextareaAutosize from 'react-autosize-textarea';
|
||||
|
||||
function Input({
|
||||
id, label, name, value, placeholder,
|
||||
required, type, onChange, forwardRef,
|
||||
resizable, minHeight, onResize, state,
|
||||
onKeyDown, disabled, autoFocus,
|
||||
}) {
|
||||
return (
|
||||
<div className="input-container">
|
||||
{ label !== '' && <label className="input__label text-b2" htmlFor={id}>{label}</label> }
|
||||
{ resizable
|
||||
? (
|
||||
<TextareaAutosize
|
||||
dir="auto"
|
||||
style={{ minHeight: `${minHeight}px` }}
|
||||
name={name}
|
||||
id={id}
|
||||
className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
|
||||
ref={forwardRef}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
defaultValue={value}
|
||||
autoComplete="off"
|
||||
onChange={onChange}
|
||||
onResize={onResize}
|
||||
onKeyDown={onKeyDown}
|
||||
disabled={disabled}
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
dir="auto"
|
||||
ref={forwardRef}
|
||||
id={id}
|
||||
name={name}
|
||||
className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
defaultValue={value}
|
||||
autoComplete="off"
|
||||
onChange={onChange}
|
||||
onKeyDown={onKeyDown}
|
||||
disabled={disabled}
|
||||
// eslint-disable-next-line jsx-a11y/no-autofocus
|
||||
autoFocus={autoFocus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Input.defaultProps = {
|
||||
id: null,
|
||||
name: '',
|
||||
label: '',
|
||||
value: '',
|
||||
placeholder: '',
|
||||
type: 'text',
|
||||
required: false,
|
||||
onChange: null,
|
||||
forwardRef: null,
|
||||
resizable: false,
|
||||
minHeight: 46,
|
||||
onResize: null,
|
||||
state: 'normal',
|
||||
onKeyDown: null,
|
||||
disabled: false,
|
||||
autoFocus: false,
|
||||
};
|
||||
|
||||
Input.propTypes = {
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
placeholder: PropTypes.string,
|
||||
required: PropTypes.bool,
|
||||
type: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
forwardRef: PropTypes.shape({}),
|
||||
resizable: PropTypes.bool,
|
||||
minHeight: PropTypes.number,
|
||||
onResize: PropTypes.func,
|
||||
state: PropTypes.oneOf(['normal', 'success', 'error']),
|
||||
onKeyDown: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
autoFocus: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Input;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@use '../../atoms/scroll/scrollbar';
|
||||
|
||||
.input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0px;
|
||||
margin: 0;
|
||||
padding: var(--sp-tight) var(--sp-normal);
|
||||
background-color: var(--bg-surface-low);
|
||||
color: var(--tc-surface-normal);
|
||||
box-shadow: none;
|
||||
border-radius: var(--bo-radius);
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
font-size: var(--fs-b2);
|
||||
letter-spacing: var(--ls-b2);
|
||||
line-height: var(--lh-b2);
|
||||
|
||||
:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--sp-ultra-tight);
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
|
||||
&--resizable {
|
||||
resize: vertical !important;
|
||||
overflow-y: auto !important;
|
||||
@include scrollbar.scroll;
|
||||
@include scrollbar.scroll__v;
|
||||
@include scrollbar.scroll--auto-hide;
|
||||
}
|
||||
&--success {
|
||||
border: 1px solid var(--bg-positive);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
&--error {
|
||||
border: 1px solid var(--bg-danger);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--bs-primary-border);
|
||||
}
|
||||
&::placeholder {
|
||||
color: var(--tc-surface-low)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './RawModal.scss';
|
||||
|
||||
import Modal from 'react-modal';
|
||||
|
||||
import navigation from '../../../client/state/navigation';
|
||||
|
||||
Modal.setAppElement('#root');
|
||||
|
||||
function RawModal({
|
||||
className, overlayClassName,
|
||||
isOpen, size, onAfterOpen, onAfterClose,
|
||||
onRequestClose, closeFromOutside, children,
|
||||
}) {
|
||||
let modalClass = (className !== null) ? `${className} ` : '';
|
||||
switch (size) {
|
||||
case 'large':
|
||||
modalClass += 'raw-modal__large ';
|
||||
break;
|
||||
case 'medium':
|
||||
modalClass += 'raw-modal__medium ';
|
||||
break;
|
||||
case 'small':
|
||||
default:
|
||||
modalClass += 'raw-modal__small ';
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setIsRawModalVisible(isOpen);
|
||||
}, [isOpen]);
|
||||
|
||||
const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
|
||||
return (
|
||||
<Modal
|
||||
className={`${modalClass}raw-modal`}
|
||||
overlayClassName={`${modalOverlayClass}raw-modal__overlay`}
|
||||
isOpen={isOpen}
|
||||
onAfterOpen={onAfterOpen}
|
||||
onAfterClose={onAfterClose}
|
||||
onRequestClose={onRequestClose}
|
||||
shouldCloseOnEsc={closeFromOutside}
|
||||
shouldCloseOnOverlayClick={closeFromOutside}
|
||||
shouldReturnFocusAfterClose={false}
|
||||
>
|
||||
{children}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
RawModal.defaultProps = {
|
||||
className: null,
|
||||
overlayClassName: null,
|
||||
size: 'small',
|
||||
onAfterOpen: null,
|
||||
onAfterClose: null,
|
||||
onRequestClose: null,
|
||||
closeFromOutside: true,
|
||||
};
|
||||
|
||||
RawModal.propTypes = {
|
||||
className: PropTypes.string,
|
||||
overlayClassName: PropTypes.string,
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
size: PropTypes.oneOf(['large', 'medium', 'small']),
|
||||
onAfterOpen: PropTypes.func,
|
||||
onAfterClose: PropTypes.func,
|
||||
onRequestClose: PropTypes.func,
|
||||
closeFromOutside: PropTypes.bool,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default RawModal;
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.raw-modal {
|
||||
--small-modal-width: 525px;
|
||||
--medium-modal-width: 712px;
|
||||
--large-modal-width: 1024px;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: var(--bo-radius);
|
||||
box-shadow: var(--bs-popup);
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
|
||||
&__small {
|
||||
max-width: var(--small-modal-width);
|
||||
}
|
||||
&__medium {
|
||||
max-width: var(--medium-modal-width);
|
||||
}
|
||||
&__large {
|
||||
max-width: var(--large-modal-width);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: var(--sp-normal);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
animation: raw-modal--overlay 150ms;
|
||||
}
|
||||
|
||||
.ReactModal__Content {
|
||||
animation: raw-modal--content 150ms;
|
||||
}
|
||||
|
||||
@keyframes raw-modal--content {
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
opacity: .5;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes raw-modal--overlay {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './ScrollView.scss';
|
||||
|
||||
const ScrollView = React.forwardRef(({
|
||||
horizontal, vertical, autoHide, invisible, onScroll, children,
|
||||
}, ref) => {
|
||||
let scrollbarClasses = '';
|
||||
if (horizontal) scrollbarClasses += ' scrollbar__h';
|
||||
if (vertical) scrollbarClasses += ' scrollbar__v';
|
||||
if (autoHide) scrollbarClasses += ' scrollbar--auto-hide';
|
||||
if (invisible) scrollbarClasses += ' scrollbar--invisible';
|
||||
return (
|
||||
<div onScroll={onScroll} ref={ref} className={`scrollbar${scrollbarClasses}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
ScrollView.defaultProps = {
|
||||
horizontal: false,
|
||||
vertical: true,
|
||||
autoHide: false,
|
||||
invisible: false,
|
||||
onScroll: null,
|
||||
};
|
||||
|
||||
ScrollView.propTypes = {
|
||||
horizontal: PropTypes.bool,
|
||||
vertical: PropTypes.bool,
|
||||
autoHide: PropTypes.bool,
|
||||
invisible: PropTypes.bool,
|
||||
onScroll: PropTypes.func,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default ScrollView;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
@use '_scrollbar';
|
||||
|
||||
@mixin paddingForSafari($padding) {
|
||||
@media not all and (min-resolution:.001dpcm) {
|
||||
@include dir.side(padding, 0, $padding);
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include scrollbar.scroll;
|
||||
@include paddingForSafari(var(--sp-extra-tight));
|
||||
|
||||
&__h {
|
||||
@include scrollbar.scroll__h;
|
||||
}
|
||||
|
||||
&__v {
|
||||
@include scrollbar.scroll__v;
|
||||
}
|
||||
|
||||
&--auto-hide {
|
||||
@include scrollbar.scroll--auto-hide;
|
||||
}
|
||||
&--invisible {
|
||||
@include scrollbar.scroll--invisible;
|
||||
@include paddingForSafari(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.firefox-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--bg-surface-hover) transparent;
|
||||
&--transparent {
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
}
|
||||
.webkit-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
.webkit-scrollbar-track {
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.webkit-scrollbar-thumb {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--bg-surface-active);
|
||||
}
|
||||
&--transparent {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scroll {
|
||||
overflow: hidden;
|
||||
// Below code stop scroll when x-scrollable content come in timeline
|
||||
// overscroll-behavior: none;
|
||||
@extend .firefox-scrollbar;
|
||||
@extend .webkit-scrollbar;
|
||||
@extend .webkit-scrollbar-track;
|
||||
@extend .webkit-scrollbar-thumb;
|
||||
}
|
||||
|
||||
@mixin scroll__h {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
@mixin scroll__v {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@mixin scroll--auto-hide {
|
||||
@extend .firefox-scrollbar--transparent;
|
||||
@extend .webkit-scrollbar-thumb--transparent;
|
||||
|
||||
&:hover {
|
||||
@extend .firefox-scrollbar;
|
||||
@extend .webkit-scrollbar-thumb;
|
||||
}
|
||||
}
|
||||
@mixin scroll--invisible {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './SegmentedControls.scss';
|
||||
|
||||
import { blurOnBubbling } from '../button/script';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
|
||||
function SegmentedControls({
|
||||
selected, segments, onSelect,
|
||||
}) {
|
||||
const [select, setSelect] = useState(selected);
|
||||
|
||||
function selectSegment(segmentIndex) {
|
||||
setSelect(segmentIndex);
|
||||
onSelect(segmentIndex);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setSelect(selected);
|
||||
}, [selected]);
|
||||
|
||||
return (
|
||||
<div className="segmented-controls">
|
||||
{
|
||||
segments.map((segment, index) => (
|
||||
<button
|
||||
key={Math.random().toString(20).substr(2, 6)}
|
||||
className={`segment-btn${select === index ? ' segment-btn--active' : ''}`}
|
||||
type="button"
|
||||
onClick={() => selectSegment(index)}
|
||||
onMouseUp={(e) => blurOnBubbling(e, '.segment-btn')}
|
||||
>
|
||||
<div className="segment-btn__base">
|
||||
{segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
|
||||
{segment.text && <Text variant="b2">{segment.text}</Text>}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
SegmentedControls.propTypes = {
|
||||
selected: PropTypes.number.isRequired,
|
||||
segments: PropTypes.arrayOf(PropTypes.shape({
|
||||
iconSrc: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
})).isRequired,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default SegmentedControls;
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
@use '../button/state';
|
||||
@use '../../partials/dir';
|
||||
|
||||
.segmented-controls {
|
||||
background-color: var(--bg-surface-low);
|
||||
border-radius: var(--bo-radius);
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.segment-btn {
|
||||
padding: var(--sp-extra-tight) 0;
|
||||
cursor: pointer;
|
||||
@include state.hover(var(--bg-surface-hover));
|
||||
@include state.active(var(--bg-surface-active));
|
||||
|
||||
&__base {
|
||||
padding: 0 var(--sp-normal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include dir.side(border, 1px solid var(--bg-surface-border), none);
|
||||
|
||||
& .text:nth-child(2) {
|
||||
margin: 0 var(--sp-extra-tight);
|
||||
}
|
||||
}
|
||||
&:first-child &__base {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
border-width: 0 1px 0 1px;
|
||||
|
||||
& .segment-btn__base,
|
||||
& + .segment-btn .segment-btn__base {
|
||||
border: none;
|
||||
}
|
||||
&:first-child{
|
||||
border-left: none;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
[dir=rtl] & {
|
||||
border-left: 1px solid var(--bg-surface-border);
|
||||
border-right: 1px solid var(--bg-surface-border);
|
||||
|
||||
&:first-child { border-right: none;}
|
||||
&:last-child { border-left: none;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Spinner.scss';
|
||||
|
||||
function Spinner({ size }) {
|
||||
return (
|
||||
<div className={`donut-spinner donut-spinner--${size}`}> </div>
|
||||
);
|
||||
}
|
||||
|
||||
Spinner.defaultProps = {
|
||||
size: 'normal',
|
||||
};
|
||||
|
||||
Spinner.propTypes = {
|
||||
size: PropTypes.oneOf(['normal', 'small']),
|
||||
};
|
||||
|
||||
export default Spinner;
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.donut-spinner {
|
||||
display: inline-block;
|
||||
border: 4px solid var(--bg-surface-border);
|
||||
border-left-color: var(--tc-surface-normal);
|
||||
border-radius: 50%;
|
||||
animation: donut-spin 1.2s cubic-bezier(0.73, 0.32, 0.67, 0.86) infinite;
|
||||
|
||||
&--normal {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&--small {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes donut-spin {
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './RawIcon.scss';
|
||||
|
||||
function RawIcon({ color, size, src, isImage }) {
|
||||
const style = {};
|
||||
if (color !== null) style.backgroundColor = color;
|
||||
if (isImage) {
|
||||
style.backgroundColor = 'transparent';
|
||||
style.backgroundImage = `url("${src}")`;
|
||||
} else {
|
||||
style.WebkitMaskImage = `url("${src}")`;
|
||||
style.maskImage = `url("${src}")`;
|
||||
}
|
||||
|
||||
return <span className={`ic-raw ic-raw-${size}`} style={style} />;
|
||||
}
|
||||
|
||||
RawIcon.defaultProps = {
|
||||
color: null,
|
||||
size: 'normal',
|
||||
isImage: false,
|
||||
};
|
||||
|
||||
RawIcon.propTypes = {
|
||||
color: PropTypes.string,
|
||||
size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
|
||||
src: PropTypes.string.isRequired,
|
||||
isImage: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default RawIcon;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
@mixin icSize($size) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.ic-raw {
|
||||
display: inline-block;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: cover;
|
||||
mask-size: cover;
|
||||
background-color: var(--ic-surface-normal);
|
||||
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.ic-raw-large {
|
||||
@include icSize(var(--ic-large));
|
||||
}
|
||||
.ic-raw-normal {
|
||||
@include icSize(var(--ic-normal));
|
||||
}
|
||||
.ic-raw-small {
|
||||
@include icSize(var(--ic-small));
|
||||
}
|
||||
.ic-raw-extra-small {
|
||||
@include icSize(var(--ic-extra-small));
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Tabs.scss';
|
||||
|
||||
import Button from '../button/Button';
|
||||
import ScrollView from '../scroll/ScrollView';
|
||||
|
||||
function TabItem({
|
||||
selected, iconSrc,
|
||||
onClick, children, disabled,
|
||||
}) {
|
||||
const isSelected = selected ? 'tab-item--selected' : '';
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={`tab-item ${isSelected}`}
|
||||
iconSrc={iconSrc}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
TabItem.defaultProps = {
|
||||
selected: false,
|
||||
iconSrc: null,
|
||||
onClick: null,
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
TabItem.propTypes = {
|
||||
selected: PropTypes.bool,
|
||||
iconSrc: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
children: PropTypes.node.isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
function Tabs({ items, defaultSelected, onSelect }) {
|
||||
const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
|
||||
|
||||
const handleTabSelection = (item, index, target) => {
|
||||
if (selectedItem === item) return;
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
|
||||
setSelectedItem(item);
|
||||
onSelect(item, index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="tabs">
|
||||
<ScrollView horizontal vertical={false} invisible>
|
||||
<div className="tabs__content">
|
||||
{items.map((item, index) => (
|
||||
<TabItem
|
||||
key={item.text}
|
||||
selected={selectedItem.text === item.text}
|
||||
iconSrc={item.iconSrc}
|
||||
disabled={item.disabled}
|
||||
onClick={(e) => handleTabSelection(item, index, e.currentTarget)}
|
||||
>
|
||||
{item.text}
|
||||
</TabItem>
|
||||
))}
|
||||
</div>
|
||||
</ScrollView>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Tabs.defaultProps = {
|
||||
defaultSelected: 0,
|
||||
};
|
||||
|
||||
Tabs.propTypes = {
|
||||
items: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
iconSrc: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
}),
|
||||
).isRequired,
|
||||
defaultSelected: PropTypes.number,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.tabs {
|
||||
height: var(--header-height);
|
||||
box-shadow: inset 0 -1px 0 var(--bg-surface-border);
|
||||
|
||||
&__content {
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex-shrink: 0;
|
||||
|
||||
@include dir.side(padding, var(--sp-normal), 24px);
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
border-radius: var(--bo-radius) var(--bo-radius) 0 0;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--bg-surface-active);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
--bs-tab-selected: inset 0 -2px 0 var(--tc-surface-high);
|
||||
box-shadow: var(--bs-tab-selected);
|
||||
|
||||
& .ic-raw {
|
||||
background-color: var(--ic-surface-high);
|
||||
}
|
||||
& .text {
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: var(--bg-surface-active);
|
||||
box-shadow: var(--bs-tab-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Text.scss';
|
||||
|
||||
function Text({
|
||||
className, style, variant, weight,
|
||||
primary, span, children,
|
||||
}) {
|
||||
const classes = [];
|
||||
if (className) classes.push(className);
|
||||
|
||||
classes.push(`text text-${variant} text-${weight}`);
|
||||
if (primary) classes.push('font-primary');
|
||||
|
||||
const textClass = classes.join(' ');
|
||||
if (span) return <span className={textClass} style={style}>{ children }</span>;
|
||||
if (variant === 'h1') return <h1 className={textClass} style={style}>{ children }</h1>;
|
||||
if (variant === 'h2') return <h2 className={textClass} style={style}>{ children }</h2>;
|
||||
if (variant === 's1') return <h4 className={textClass} style={style}>{ children }</h4>;
|
||||
return <p className={textClass} style={style}>{ children }</p>;
|
||||
}
|
||||
|
||||
Text.defaultProps = {
|
||||
className: null,
|
||||
style: null,
|
||||
variant: 'b1',
|
||||
weight: 'normal',
|
||||
primary: false,
|
||||
span: false,
|
||||
};
|
||||
|
||||
Text.propTypes = {
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.shape({}),
|
||||
variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
|
||||
weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
|
||||
primary: PropTypes.bool,
|
||||
span: PropTypes.bool,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default Text;
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
@mixin font($type) {
|
||||
font-size: var(--fs-#{$type});
|
||||
letter-spacing: var(--ls-#{$type});
|
||||
line-height: var(--lh-#{$type});
|
||||
|
||||
& img.emoji,
|
||||
& img[data-mx-emoticon] {
|
||||
height: calc(var(--lh-#{$type}) - .25rem);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--tc-surface-high);
|
||||
|
||||
& img.emoji,
|
||||
& img[data-mx-emoticon] {
|
||||
margin: 0 !important;
|
||||
margin-right: 2px !important;
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
top: -.1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.text-light {
|
||||
font-weight: var(--fw-light);
|
||||
}
|
||||
.text-normal {
|
||||
font-weight: var(--fw-normal);
|
||||
}
|
||||
.text-medium {
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
.text-bold {
|
||||
font-weight: var(--fw-bold);
|
||||
}
|
||||
|
||||
.text-h1 {
|
||||
@include font(h1);
|
||||
}
|
||||
.text-h2 {
|
||||
@include font(h2);
|
||||
}
|
||||
.text-s1 {
|
||||
@include font(s1);
|
||||
}
|
||||
.text-b1 {
|
||||
@include font(b1);
|
||||
color: var(--tc-surface-normal);
|
||||
}
|
||||
.text-b2 {
|
||||
@include font(b2);
|
||||
color: var(--tc-surface-normal);
|
||||
}
|
||||
.text-b3 {
|
||||
@include font(b3);
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import dateFormat from 'dateformat';
|
||||
import { isInSameDay } from '../../../util/common';
|
||||
|
||||
function Time({ timestamp, fullTime }) {
|
||||
const date = new Date(timestamp);
|
||||
|
||||
const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
|
||||
let formattedDate = formattedFullTime;
|
||||
|
||||
if (!fullTime) {
|
||||
const compareDate = new Date();
|
||||
const isToday = isInSameDay(date, compareDate);
|
||||
compareDate.setDate(compareDate.getDate() - 1);
|
||||
const isYesterday = isInSameDay(date, compareDate);
|
||||
|
||||
formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
|
||||
if (isYesterday) {
|
||||
formattedDate = `Yesterday, ${formattedDate}`;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<time
|
||||
dateTime={date.toISOString()}
|
||||
title={formattedFullTime}
|
||||
>
|
||||
{formattedDate}
|
||||
</time>
|
||||
);
|
||||
}
|
||||
|
||||
Time.defaultProps = {
|
||||
fullTime: false,
|
||||
};
|
||||
|
||||
Time.propTypes = {
|
||||
timestamp: PropTypes.number.isRequired,
|
||||
fullTime: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Time;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Tooltip.scss';
|
||||
import Tippy from '@tippyjs/react';
|
||||
|
||||
function Tooltip({
|
||||
className, placement, content, delay, children,
|
||||
}) {
|
||||
return (
|
||||
<Tippy
|
||||
content={content}
|
||||
className={`tooltip ${className}`}
|
||||
touch="hold"
|
||||
arrow={false}
|
||||
maxWidth={250}
|
||||
placement={placement}
|
||||
delay={delay}
|
||||
duration={[100, 0]}
|
||||
>
|
||||
{children}
|
||||
</Tippy>
|
||||
);
|
||||
}
|
||||
|
||||
Tooltip.defaultProps = {
|
||||
placement: 'top',
|
||||
className: '',
|
||||
delay: [200, 0],
|
||||
};
|
||||
|
||||
Tooltip.propTypes = {
|
||||
className: PropTypes.string,
|
||||
placement: PropTypes.string,
|
||||
content: PropTypes.node.isRequired,
|
||||
delay: PropTypes.arrayOf(PropTypes.number),
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.tooltip {
|
||||
padding: var(--sp-extra-tight) var(--sp-normal);
|
||||
background-color: var(--bg-tooltip);
|
||||
border-radius: var(--bo-radius);
|
||||
box-shadow: var(--bs-popup);
|
||||
|
||||
.text {
|
||||
color: var(--tc-tooltip);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { ReactNode, useCallback, useEffect } from 'react';
|
||||
import { Capabilities } from 'matrix-js-sdk';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { MediaConfig } from '../hooks/useMediaConfig';
|
||||
import { promiseFulfilledResult } from '../utils/common';
|
||||
|
||||
type CapabilitiesAndMediaConfigLoaderProps = {
|
||||
children: (capabilities?: Capabilities, mediaConfig?: MediaConfig) => ReactNode;
|
||||
};
|
||||
export function CapabilitiesAndMediaConfigLoader({
|
||||
children,
|
||||
}: CapabilitiesAndMediaConfigLoaderProps) {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
const [state, load] = useAsyncCallback<
|
||||
[Capabilities | undefined, MediaConfig | undefined],
|
||||
unknown,
|
||||
[]
|
||||
>(
|
||||
useCallback(async () => {
|
||||
const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
|
||||
const capabilities = promiseFulfilledResult(result[0]);
|
||||
const mediaConfig = promiseFulfilledResult(result[1]);
|
||||
return [capabilities, mediaConfig];
|
||||
}, [mx])
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
const [capabilities, mediaConfig] =
|
||||
state.status === AsyncStatus.Success ? state.data : [undefined, undefined];
|
||||
return children(capabilities, mediaConfig);
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ import { PasswordInput } from './password-input';
|
|||
import { ContainerColor } from '../styles/ContainerColor.css';
|
||||
import { copyToClipboard } from '../utils/dom';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { clearSecretStorageKeys } from '../../client/state/secretStorageKeys';
|
||||
import { clearSecretStorageKeys } from '../../client/secretStorageKeys';
|
||||
import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { useAlive } from '../hooks/useAlive';
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import { SecretStorageKeyContent } from '../../types/matrix/accountData';
|
|||
import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||||
import { storePrivateKey } from '../../client/state/secretStorageKeys';
|
||||
import { storePrivateKey } from '../../client/secretStorageKeys';
|
||||
|
||||
export enum ManualVerificationMethod {
|
||||
RecoveryPassphrase = 'passphrase',
|
||||
|
|
|
|||
|
|
@ -209,13 +209,11 @@ export function RenderMessageContent({
|
|||
<MVideo
|
||||
content={getContent()}
|
||||
renderAsFile={renderFile}
|
||||
renderVideoContent={({ body, info, mimeType, url, encInfo }) => (
|
||||
renderVideoContent={({ body, info, ...props }) => (
|
||||
<VideoContent
|
||||
body={body}
|
||||
info={info}
|
||||
mimeType={mimeType}
|
||||
url={url}
|
||||
encInfo={encInfo}
|
||||
{...props}
|
||||
renderThumbnail={
|
||||
mediaAutoLoad
|
||||
? () => (
|
||||
|
|
|
|||
52
src/app/components/ServerConfigsLoader.tsx
Normal file
52
src/app/components/ServerConfigsLoader.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { ReactNode, useCallback, useMemo } from 'react';
|
||||
import { Capabilities, validateAuthMetadata, ValidatedAuthMetadata } from 'matrix-js-sdk';
|
||||
import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
|
||||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||||
import { MediaConfig } from '../hooks/useMediaConfig';
|
||||
import { promiseFulfilledResult } from '../utils/common';
|
||||
|
||||
export type ServerConfigs = {
|
||||
capabilities?: Capabilities;
|
||||
mediaConfig?: MediaConfig;
|
||||
authMetadata?: ValidatedAuthMetadata;
|
||||
};
|
||||
|
||||
type ServerConfigsLoaderProps = {
|
||||
children: (configs: ServerConfigs) => ReactNode;
|
||||
};
|
||||
export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
|
||||
const mx = useMatrixClient();
|
||||
const fallbackConfigs = useMemo(() => ({}), []);
|
||||
|
||||
const [configsState] = useAsyncCallbackValue<ServerConfigs, unknown>(
|
||||
useCallback(async () => {
|
||||
const result = await Promise.allSettled([
|
||||
mx.getCapabilities(),
|
||||
mx.getMediaConfig(),
|
||||
mx.getAuthMetadata(),
|
||||
]);
|
||||
|
||||
const capabilities = promiseFulfilledResult(result[0]);
|
||||
const mediaConfig = promiseFulfilledResult(result[1]);
|
||||
const authMetadata = promiseFulfilledResult(result[2]);
|
||||
let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
|
||||
|
||||
try {
|
||||
validatedAuthMetadata = validateAuthMetadata(authMetadata);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
return {
|
||||
capabilities,
|
||||
mediaConfig,
|
||||
authMetadata: validatedAuthMetadata,
|
||||
};
|
||||
}, [mx])
|
||||
);
|
||||
|
||||
const configs: ServerConfigs =
|
||||
configsState.status === AsyncStatus.Success ? configsState.data : fallbackConfigs;
|
||||
|
||||
return children(configs);
|
||||
}
|
||||
55
src/app/components/UserRoomProfileRenderer.tsx
Normal file
55
src/app/components/UserRoomProfileRenderer.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react';
|
||||
import { Menu, PopOut, toRem } from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
|
||||
import { UserRoomProfile } from './user-profile';
|
||||
import { UserRoomProfileState } from '../state/userRoomProfile';
|
||||
import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
|
||||
import { stopPropagation } from '../utils/keyboard';
|
||||
import { SpaceProvider } from '../hooks/useSpace';
|
||||
import { RoomProvider } from '../hooks/useRoom';
|
||||
|
||||
function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
|
||||
const { roomId, spaceId, userId, cords, position } = state;
|
||||
const allJoinedRooms = useAllJoinedRoomsSet();
|
||||
const getRoom = useGetRoom(allJoinedRooms);
|
||||
const room = getRoom(roomId);
|
||||
const space = spaceId ? getRoom(spaceId) : undefined;
|
||||
|
||||
const close = useCloseUserRoomProfile();
|
||||
|
||||
if (!room) return null;
|
||||
|
||||
return (
|
||||
<PopOut
|
||||
anchor={cords}
|
||||
position={position ?? 'Top'}
|
||||
align="Start"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: close,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu style={{ width: toRem(340) }}>
|
||||
<SpaceProvider value={space ?? null}>
|
||||
<RoomProvider value={room}>
|
||||
<UserRoomProfile userId={userId} />
|
||||
</RoomProvider>
|
||||
</SpaceProvider>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function UserRoomProfileRenderer() {
|
||||
const state = useUserRoomProfileState();
|
||||
|
||||
if (!state) return null;
|
||||
return <UserRoomProfileContextMenu state={state} />;
|
||||
}
|
||||
294
src/app/components/create-room/AdditionalCreatorInput.tsx
Normal file
294
src/app/components/create-room/AdditionalCreatorInput.tsx
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
config,
|
||||
Icon,
|
||||
Icons,
|
||||
Input,
|
||||
Line,
|
||||
Menu,
|
||||
MenuItem,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Scroll,
|
||||
Text,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import React, {
|
||||
ChangeEventHandler,
|
||||
KeyboardEventHandler,
|
||||
MouseEventHandler,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
|
||||
import { useDirectUsers } from '../../hooks/useDirectUsers';
|
||||
import { SettingTile } from '../setting-tile';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
|
||||
import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
|
||||
|
||||
export const useAdditionalCreators = (defaultCreators?: string[]) => {
|
||||
const mx = useMatrixClient();
|
||||
const [additionalCreators, setAdditionalCreators] = useState<string[]>(
|
||||
() => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
|
||||
);
|
||||
|
||||
const addAdditionalCreator = (userId: string) => {
|
||||
if (userId === mx.getSafeUserId()) return;
|
||||
|
||||
setAdditionalCreators((creators) => {
|
||||
const creatorsSet = new Set(creators);
|
||||
creatorsSet.add(userId);
|
||||
return Array.from(creatorsSet);
|
||||
});
|
||||
};
|
||||
|
||||
const removeAdditionalCreator = (userId: string) => {
|
||||
setAdditionalCreators((creators) => {
|
||||
const creatorsSet = new Set(creators);
|
||||
creatorsSet.delete(userId);
|
||||
return Array.from(creatorsSet);
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
additionalCreators,
|
||||
addAdditionalCreator,
|
||||
removeAdditionalCreator,
|
||||
};
|
||||
};
|
||||
|
||||
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
|
||||
limit: 1000,
|
||||
matchOptions: {
|
||||
contain: true,
|
||||
},
|
||||
};
|
||||
const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
|
||||
|
||||
type AdditionalCreatorInputProps = {
|
||||
additionalCreators: string[];
|
||||
onSelect: (userId: string) => void;
|
||||
onRemove: (userId: string) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
export function AdditionalCreatorInput({
|
||||
additionalCreators,
|
||||
onSelect,
|
||||
onRemove,
|
||||
disabled,
|
||||
}: AdditionalCreatorInputProps) {
|
||||
const mx = useMatrixClient();
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
const directUsers = useDirectUsers();
|
||||
|
||||
const [validUserId, setValidUserId] = useState<string>();
|
||||
const filteredUsers = useMemo(
|
||||
() => directUsers.filter((userId) => !additionalCreators.includes(userId)),
|
||||
[directUsers, additionalCreators]
|
||||
);
|
||||
const [result, search, resetSearch] = useAsyncSearch(
|
||||
filteredUsers,
|
||||
getUserIdString,
|
||||
SEARCH_OPTIONS
|
||||
);
|
||||
const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
|
||||
|
||||
const suggestionUsers = result
|
||||
? result.items
|
||||
: filteredUsers.sort((a, b) => (a.toLocaleLowerCase() >= b.toLocaleLowerCase() ? 1 : -1));
|
||||
|
||||
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
const handleCloseMenu = () => {
|
||||
setMenuCords(undefined);
|
||||
setValidUserId(undefined);
|
||||
resetSearch();
|
||||
};
|
||||
|
||||
const handleCreatorChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
|
||||
const creatorInput = evt.currentTarget;
|
||||
const creator = creatorInput.value.trim();
|
||||
if (isUserId(creator)) {
|
||||
setValidUserId(creator);
|
||||
} else {
|
||||
setValidUserId(undefined);
|
||||
const term =
|
||||
getMxIdLocalPart(creator) ?? (creator.startsWith('@') ? creator.slice(1) : creator);
|
||||
if (term) {
|
||||
search(term);
|
||||
} else {
|
||||
resetSearch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectUserId = (userId?: string) => {
|
||||
if (userId && isUserId(userId)) {
|
||||
onSelect(userId);
|
||||
handleCloseMenu();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreatorKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
|
||||
if (isKeyHotkey('enter', evt)) {
|
||||
evt.preventDefault();
|
||||
const creator = evt.currentTarget.value.trim();
|
||||
handleSelectUserId(isUserId(creator) ? creator : suggestionUsers[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnterClick = () => {
|
||||
handleSelectUserId(validUserId);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingTile
|
||||
title="Founders"
|
||||
description="Special privileged users can be assigned during creation. These users have elevated control and can only be modified during a upgrade."
|
||||
>
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Box gap="200" wrap="Wrap">
|
||||
<Chip type="button" variant="Primary" radii="Pill" outlined>
|
||||
<Text size="B300">{mx.getSafeUserId()}</Text>
|
||||
</Chip>
|
||||
{additionalCreators.map((creator) => (
|
||||
<Chip
|
||||
type="button"
|
||||
key={creator}
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
after={<Icon size="50" src={Icons.Cross} />}
|
||||
onClick={() => onRemove(creator)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Text size="B300">{creator}</Text>
|
||||
</Chip>
|
||||
))}
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
position="Bottom"
|
||||
align="Center"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
onDeactivate: handleCloseMenu,
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
style={{
|
||||
width: '100vw',
|
||||
maxWidth: toRem(300),
|
||||
height: toRem(250),
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Box shrink="No" gap="100" style={{ padding: config.space.S100 }}>
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Input
|
||||
size="400"
|
||||
variant="Background"
|
||||
radii="300"
|
||||
outlined
|
||||
placeholder="@username:server"
|
||||
onChange={handleCreatorChange}
|
||||
onKeyDown={handleCreatorKeyDown}
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
type="button"
|
||||
variant="Success"
|
||||
radii="300"
|
||||
onClick={handleEnterClick}
|
||||
disabled={!validUserId}
|
||||
>
|
||||
<Text size="B400">Enter</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
<Line size="300" />
|
||||
<Box grow="Yes" direction="Column">
|
||||
{!validUserId && suggestionUsers.length > 0 ? (
|
||||
<Scroll size="300" hideTrack>
|
||||
<Box
|
||||
grow="Yes"
|
||||
direction="Column"
|
||||
gap="100"
|
||||
style={{ padding: config.space.S200, paddingRight: 0 }}
|
||||
>
|
||||
{suggestionUsers.map((userId) => (
|
||||
<MenuItem
|
||||
key={userId}
|
||||
size="300"
|
||||
variant="Surface"
|
||||
radii="300"
|
||||
onClick={() => handleSelectUserId(userId)}
|
||||
after={
|
||||
<Text size="T200" truncate>
|
||||
{getMxIdServer(userId)}
|
||||
</Text>
|
||||
}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T200" truncate>
|
||||
<b>
|
||||
{queryHighlighRegex
|
||||
? highlightText(queryHighlighRegex, [
|
||||
getMxIdLocalPart(userId) ?? userId,
|
||||
])
|
||||
: getMxIdLocalPart(userId)}
|
||||
</b>
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Box>
|
||||
</Scroll>
|
||||
) : (
|
||||
<Box
|
||||
grow="Yes"
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
direction="Column"
|
||||
gap="100"
|
||||
>
|
||||
<Text size="H6" align="Center">
|
||||
No Suggestions
|
||||
</Text>
|
||||
<Text size="T200" align="Center">
|
||||
Please provide the user ID and hit Enter.
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<Chip
|
||||
type="button"
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
onClick={handleOpenMenu}
|
||||
aria-pressed={!!menuCords}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Icon size="50" src={Icons.Plus} />
|
||||
</Chip>
|
||||
</PopOut>
|
||||
</Box>
|
||||
</Box>
|
||||
</SettingTile>
|
||||
);
|
||||
}
|
||||
118
src/app/components/create-room/CreateRoomAliasInput.tsx
Normal file
118
src/app/components/create-room/CreateRoomAliasInput.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import React, {
|
||||
FormEventHandler,
|
||||
KeyboardEventHandler,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { MatrixError } from 'matrix-js-sdk';
|
||||
import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
import { getMxIdServer } from '../../utils/matrix';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { replaceSpaceWithDash } from '../../utils/common';
|
||||
import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
|
||||
import { useDebounce } from '../../hooks/useDebounce';
|
||||
|
||||
export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
|
||||
const mx = useMatrixClient();
|
||||
const aliasInputRef = useRef<HTMLInputElement>(null);
|
||||
const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
|
||||
status: AsyncStatus.Idle,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (aliasAvail.status === AsyncStatus.Success && aliasInputRef.current?.value === '') {
|
||||
setAliasAvail({ status: AsyncStatus.Idle });
|
||||
}
|
||||
}, [aliasAvail]);
|
||||
|
||||
const checkAliasAvail = useAsync(
|
||||
useCallback(
|
||||
async (aliasLocalPart: string) => {
|
||||
const roomAlias = `#${aliasLocalPart}:${getMxIdServer(mx.getSafeUserId())}`;
|
||||
try {
|
||||
const result = await mx.getRoomIdForAlias(roomAlias);
|
||||
return typeof result.room_id !== 'string';
|
||||
} catch (e) {
|
||||
if (e instanceof MatrixError && e.httpStatus === 404) {
|
||||
return true;
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
[mx]
|
||||
),
|
||||
setAliasAvail
|
||||
);
|
||||
const aliasAvailable: boolean | undefined =
|
||||
aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
|
||||
|
||||
const debounceCheckAliasAvail = useDebounce(checkAliasAvail, { wait: 500 });
|
||||
|
||||
const handleAliasChange: FormEventHandler<HTMLInputElement> = (evt) => {
|
||||
const aliasInput = evt.currentTarget;
|
||||
const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
|
||||
if (aliasLocalPart) {
|
||||
aliasInput.value = aliasLocalPart;
|
||||
debounceCheckAliasAvail(aliasLocalPart);
|
||||
} else {
|
||||
setAliasAvail({ status: AsyncStatus.Idle });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAliasKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
|
||||
if (isKeyHotkey('enter', evt)) {
|
||||
evt.preventDefault();
|
||||
|
||||
const aliasInput = evt.currentTarget;
|
||||
const aliasLocalPart = replaceSpaceWithDash(aliasInput.value);
|
||||
if (aliasLocalPart) {
|
||||
checkAliasAvail(aliasLocalPart);
|
||||
} else {
|
||||
setAliasAvail({ status: AsyncStatus.Idle });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
<Text size="L400">Address (Optional)</Text>
|
||||
<Text size="T200" priority="300">
|
||||
Pick an unique address to make it discoverable.
|
||||
</Text>
|
||||
<Input
|
||||
ref={aliasInputRef}
|
||||
onChange={handleAliasChange}
|
||||
before={
|
||||
aliasAvail.status === AsyncStatus.Loading ? (
|
||||
<Spinner size="100" variant="Secondary" />
|
||||
) : (
|
||||
<Icon size="100" src={Icons.Hash} />
|
||||
)
|
||||
}
|
||||
after={
|
||||
<Text style={{ maxWidth: toRem(150) }} truncate>
|
||||
:{getMxIdServer(mx.getSafeUserId())}
|
||||
</Text>
|
||||
}
|
||||
onKeyDown={handleAliasKeyDown}
|
||||
name="aliasInput"
|
||||
size="500"
|
||||
variant={aliasAvailable === true ? 'Success' : 'SurfaceVariant'}
|
||||
radii="400"
|
||||
autoComplete="off"
|
||||
disabled={disabled}
|
||||
/>
|
||||
{aliasAvailable === false && (
|
||||
<Box style={{ color: color.Critical.Main }} alignItems="Center" gap="100">
|
||||
<Icon src={Icons.Warning} filled size="50" />
|
||||
<Text size="T200">
|
||||
<b>This address is already taken. Please select a different one.</b>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
94
src/app/components/create-room/CreateRoomKindSelector.tsx
Normal file
94
src/app/components/create-room/CreateRoomKindSelector.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import React from 'react';
|
||||
import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
|
||||
import { SequenceCard } from '../sequence-card';
|
||||
import { SettingTile } from '../setting-tile';
|
||||
|
||||
export enum CreateRoomKind {
|
||||
Private = 'private',
|
||||
Restricted = 'restricted',
|
||||
Public = 'public',
|
||||
}
|
||||
type CreateRoomKindSelectorProps = {
|
||||
value?: CreateRoomKind;
|
||||
onSelect: (value: CreateRoomKind) => void;
|
||||
canRestrict?: boolean;
|
||||
disabled?: boolean;
|
||||
getIcon: (kind: CreateRoomKind) => IconSrc;
|
||||
};
|
||||
export function CreateRoomKindSelector({
|
||||
value,
|
||||
onSelect,
|
||||
canRestrict,
|
||||
disabled,
|
||||
getIcon,
|
||||
}: CreateRoomKindSelectorProps) {
|
||||
return (
|
||||
<Box shrink="No" direction="Column" gap="100">
|
||||
{canRestrict && (
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
as="button"
|
||||
type="button"
|
||||
aria-pressed={value === CreateRoomKind.Restricted}
|
||||
onClick={() => onSelect(CreateRoomKind.Restricted)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SettingTile
|
||||
before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
|
||||
after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
|
||||
>
|
||||
<Text size="H6">Restricted</Text>
|
||||
<Text size="T300" priority="300">
|
||||
Only member of parent space can join.
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
)}
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
as="button"
|
||||
type="button"
|
||||
aria-pressed={value === CreateRoomKind.Private}
|
||||
onClick={() => onSelect(CreateRoomKind.Private)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SettingTile
|
||||
before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
|
||||
after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
|
||||
>
|
||||
<Text size="H6">Private</Text>
|
||||
<Text size="T300" priority="300">
|
||||
Only people with invite can join.
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
|
||||
direction="Column"
|
||||
gap="100"
|
||||
as="button"
|
||||
type="button"
|
||||
aria-pressed={value === CreateRoomKind.Public}
|
||||
onClick={() => onSelect(CreateRoomKind.Public)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SettingTile
|
||||
before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
|
||||
after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
|
||||
>
|
||||
<Text size="H6">Public</Text>
|
||||
<Text size="T300" priority="300">
|
||||
Anyone with the address can join.
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
117
src/app/components/create-room/RoomVersionSelector.tsx
Normal file
117
src/app/components/create-room/RoomVersionSelector.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import React, { MouseEventHandler, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
config,
|
||||
Icon,
|
||||
Icons,
|
||||
Menu,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Text,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { SettingTile } from '../setting-tile';
|
||||
import { SequenceCard } from '../sequence-card';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
|
||||
export function RoomVersionSelector({
|
||||
versions,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
versions: string[];
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
|
||||
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleSelect = (version: string) => {
|
||||
setMenuCords(undefined);
|
||||
onChange(version);
|
||||
};
|
||||
|
||||
return (
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="500"
|
||||
>
|
||||
<SettingTile
|
||||
title="Version"
|
||||
after={
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="200"
|
||||
style={{ padding: config.space.S200, maxWidth: toRem(300) }}
|
||||
>
|
||||
<Text size="L400">Versions</Text>
|
||||
<Box wrap="Wrap" gap="100">
|
||||
{versions.map((version) => (
|
||||
<Chip
|
||||
key={version}
|
||||
variant={value === version ? 'Primary' : 'SurfaceVariant'}
|
||||
aria-pressed={value === version}
|
||||
outlined={value === version}
|
||||
radii="300"
|
||||
onClick={() => handleSelect(version)}
|
||||
type="button"
|
||||
>
|
||||
<Text truncate size="T300">
|
||||
{version}
|
||||
</Text>
|
||||
</Chip>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleMenu}
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
aria-pressed={!!menuCords}
|
||||
before={<Icon size="50" src={menuCords ? Icons.ChevronTop : Icons.ChevronBottom} />}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Text size="B300">{value}</Text>
|
||||
</Button>
|
||||
</PopOut>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
);
|
||||
}
|
||||
5
src/app/components/create-room/index.ts
Normal file
5
src/app/components/create-room/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export * from './CreateRoomKindSelector';
|
||||
export * from './CreateRoomAliasInput';
|
||||
export * from './RoomVersionSelector';
|
||||
export * from './utils';
|
||||
export * from './AdditionalCreatorInput';
|
||||
140
src/app/components/create-room/utils.ts
Normal file
140
src/app/components/create-room/utils.ts
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
import {
|
||||
ICreateRoomOpts,
|
||||
ICreateRoomStateEvent,
|
||||
JoinRule,
|
||||
MatrixClient,
|
||||
RestrictedAllowType,
|
||||
Room,
|
||||
} from 'matrix-js-sdk';
|
||||
import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
|
||||
import { CreateRoomKind } from './CreateRoomKindSelector';
|
||||
import { RoomType, StateEvent } from '../../../types/matrix/room';
|
||||
import { getViaServers } from '../../plugins/via-servers';
|
||||
import { getMxIdServer } from '../../utils/matrix';
|
||||
|
||||
export const createRoomCreationContent = (
|
||||
type: RoomType | undefined,
|
||||
allowFederation: boolean,
|
||||
additionalCreators: string[] | undefined
|
||||
): object => {
|
||||
const content: Record<string, any> = {};
|
||||
if (typeof type === 'string') {
|
||||
content.type = type;
|
||||
}
|
||||
if (allowFederation === false) {
|
||||
content['m.federate'] = false;
|
||||
}
|
||||
if (Array.isArray(additionalCreators)) {
|
||||
content.additional_creators = additionalCreators;
|
||||
}
|
||||
|
||||
return content;
|
||||
};
|
||||
|
||||
export const createRoomJoinRulesState = (
|
||||
kind: CreateRoomKind,
|
||||
parent: Room | undefined,
|
||||
knock: boolean
|
||||
) => {
|
||||
let content: RoomJoinRulesEventContent = {
|
||||
join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
|
||||
};
|
||||
|
||||
if (kind === CreateRoomKind.Public) {
|
||||
content = {
|
||||
join_rule: JoinRule.Public,
|
||||
};
|
||||
}
|
||||
|
||||
if (kind === CreateRoomKind.Restricted && parent) {
|
||||
content = {
|
||||
join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
|
||||
allow: [
|
||||
{
|
||||
type: RestrictedAllowType.RoomMembership,
|
||||
room_id: parent.roomId,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
type: StateEvent.RoomJoinRules,
|
||||
state_key: '',
|
||||
content,
|
||||
};
|
||||
};
|
||||
|
||||
export const createRoomParentState = (parent: Room) => ({
|
||||
type: StateEvent.SpaceParent,
|
||||
state_key: parent.roomId,
|
||||
content: {
|
||||
canonical: true,
|
||||
via: getViaServers(parent),
|
||||
},
|
||||
});
|
||||
|
||||
export const createRoomEncryptionState = () => ({
|
||||
type: 'm.room.encryption',
|
||||
state_key: '',
|
||||
content: {
|
||||
algorithm: 'm.megolm.v1.aes-sha2',
|
||||
},
|
||||
});
|
||||
|
||||
export type CreateRoomData = {
|
||||
version: string;
|
||||
type?: RoomType;
|
||||
parent?: Room;
|
||||
kind: CreateRoomKind;
|
||||
name: string;
|
||||
topic?: string;
|
||||
aliasLocalPart?: string;
|
||||
encryption?: boolean;
|
||||
knock: boolean;
|
||||
allowFederation: boolean;
|
||||
additionalCreators?: string[];
|
||||
};
|
||||
export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
|
||||
const initialState: ICreateRoomStateEvent[] = [];
|
||||
|
||||
if (data.encryption) {
|
||||
initialState.push(createRoomEncryptionState());
|
||||
}
|
||||
|
||||
if (data.parent) {
|
||||
initialState.push(createRoomParentState(data.parent));
|
||||
}
|
||||
|
||||
initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
|
||||
|
||||
const options: ICreateRoomOpts = {
|
||||
room_version: data.version,
|
||||
name: data.name,
|
||||
topic: data.topic,
|
||||
room_alias_name: data.aliasLocalPart,
|
||||
creation_content: createRoomCreationContent(
|
||||
data.type,
|
||||
data.allowFederation,
|
||||
data.additionalCreators
|
||||
),
|
||||
initial_state: initialState,
|
||||
};
|
||||
|
||||
const result = await mx.createRoom(options);
|
||||
|
||||
if (data.parent) {
|
||||
await mx.sendStateEvent(
|
||||
data.parent.roomId,
|
||||
StateEvent.SpaceChild as any,
|
||||
{
|
||||
auto_join: false,
|
||||
suggested: false,
|
||||
via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
|
||||
},
|
||||
result.room_id
|
||||
);
|
||||
}
|
||||
|
||||
return result.room_id;
|
||||
};
|
||||
|
|
@ -41,21 +41,21 @@ export const EditorTextarea = style([
|
|||
},
|
||||
]);
|
||||
|
||||
export const EditorPlaceholder = style([
|
||||
export const EditorPlaceholderContainer = style([
|
||||
DefaultReset,
|
||||
{
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
width: '100%',
|
||||
opacity: config.opacity.Placeholder,
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
},
|
||||
]);
|
||||
|
||||
selectors: {
|
||||
'&:not(:first-child)': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
export const EditorPlaceholderTextVisual = style([
|
||||
DefaultReset,
|
||||
{
|
||||
display: 'block',
|
||||
paddingTop: toRem(13),
|
||||
paddingLeft: toRem(1),
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
|
|||
|
|
@ -106,22 +106,17 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
|
|||
[editor, onKeyDown]
|
||||
);
|
||||
|
||||
const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
|
||||
// drop style attribute as we use our custom placeholder css.
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { style, ...props } = attributes;
|
||||
return (
|
||||
<Text
|
||||
as="span"
|
||||
{...props}
|
||||
className={css.EditorPlaceholder}
|
||||
contentEditable={false}
|
||||
truncate
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
}, []);
|
||||
const renderPlaceholder = useCallback(
|
||||
({ attributes, children }: RenderPlaceholderProps) => (
|
||||
<span {...attributes} className={css.EditorPlaceholderContainer}>
|
||||
{/* Inner component to style the actual text position and appearance */}
|
||||
<Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
|
||||
{children}
|
||||
</Text>
|
||||
</span>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={css.Editor} ref={ref}>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export function RenderElement({ attributes, element, children }: RenderElementPr
|
|||
<Text as="pre" className={css.CodeBlock} {...attributes}>
|
||||
<Scroll
|
||||
direction="Horizontal"
|
||||
variant="Secondary"
|
||||
variant="SurfaceVariant"
|
||||
size="300"
|
||||
visibility="Hover"
|
||||
hideTrack
|
||||
|
|
|
|||
|
|
@ -339,7 +339,7 @@ export function Toolbar() {
|
|||
<Box className={css.MarkdownBtnBox} shrink="No" grow="Yes" justifyContent="End">
|
||||
<TooltipProvider
|
||||
align="End"
|
||||
tooltip={<BtnTooltip text="Toggle Markdown" />}
|
||||
tooltip={<BtnTooltip text={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'} />}
|
||||
delay={500}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { getDirectRoomAvatarUrl } from '../../../utils/room';
|
|||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { AutocompleteQuery } from './autocompleteQuery';
|
||||
import { AutocompleteMenu } from './AutocompleteMenu';
|
||||
import { getMxIdServer, validMxId } from '../../../utils/matrix';
|
||||
import { getMxIdServer, isRoomAlias } from '../../../utils/matrix';
|
||||
import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
|
||||
import { onTabPress } from '../../../utils/keyboard';
|
||||
import { useKeyDown } from '../../../hooks/useKeyDown';
|
||||
|
|
@ -22,7 +22,7 @@ import { getViaServers } from '../../../plugins/via-servers';
|
|||
type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
|
||||
|
||||
const roomAliasFromQueryText = (mx: MatrixClient, text: string) =>
|
||||
validMxId(`#${text}`)
|
||||
isRoomAlias(`#${text}`)
|
||||
? `#${text}`
|
||||
: `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {
|
|||
import { onTabPress } from '../../../utils/keyboard';
|
||||
import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
|
||||
import { useKeyDown } from '../../../hooks/useKeyDown';
|
||||
import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
|
||||
import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
|
||||
import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
|
||||
import { UserAvatar } from '../../user-avatar';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
|
|
@ -24,7 +24,7 @@ import { Membership } from '../../../../types/matrix/room';
|
|||
type MentionAutoCompleteHandler = (userId: string, name: string) => void;
|
||||
|
||||
const userIdFromQueryText = (mx: MatrixClient, text: string) =>
|
||||
validMxId(`@${text}`)
|
||||
isUserId(`@${text}`)
|
||||
? `@${text}`
|
||||
: `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
|
||||
|
||||
|
|
|
|||
|
|
@ -212,9 +212,10 @@ export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): M
|
|||
if (node.type === BlockType.CodeBlock) return;
|
||||
|
||||
if (node.type === BlockType.Mention) {
|
||||
if (node.id === getCanonicalAliasOrRoomId(mx, roomId)) {
|
||||
if (node.name === '@room') {
|
||||
mentionData.room = true;
|
||||
}
|
||||
|
||||
if (isUserId(node.id) && node.id !== mx.getUserId()) {
|
||||
mentionData.users.add(node.id);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
34
src/app/components/emoji-board/components/Group.tsx
Normal file
34
src/app/components/emoji-board/components/Group.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { as, Box, Text } from 'folds';
|
||||
import React, { ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './styles.css';
|
||||
|
||||
export const getDOMGroupId = (id: string): string => `EmojiBoardGroup-${id}`;
|
||||
|
||||
export const EmojiGroup = as<
|
||||
'div',
|
||||
{
|
||||
id: string;
|
||||
label: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
>(({ className, id, label, children, ...props }, ref) => (
|
||||
<Box
|
||||
id={getDOMGroupId(id)}
|
||||
data-group-id={id}
|
||||
className={classNames(css.EmojiGroup, className)}
|
||||
direction="Column"
|
||||
gap="200"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<Text id={`EmojiGroup-${id}-label`} as="label" className={css.EmojiGroupLabel} size="O400">
|
||||
{label}
|
||||
</Text>
|
||||
<div aria-labelledby={`EmojiGroup-${id}-label`} className={css.EmojiGroupContent}>
|
||||
<Box wrap="Wrap" justifyContent="Center">
|
||||
{children}
|
||||
</Box>
|
||||
</div>
|
||||
</Box>
|
||||
));
|
||||
105
src/app/components/emoji-board/components/Item.tsx
Normal file
105
src/app/components/emoji-board/components/Item.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import React from 'react';
|
||||
import { Box } from 'folds';
|
||||
import { MatrixClient } from 'matrix-js-sdk';
|
||||
import { EmojiItemInfo, EmojiType } from '../types';
|
||||
import * as css from './styles.css';
|
||||
import { PackImageReader } from '../../../plugins/custom-emoji';
|
||||
import { IEmoji } from '../../../plugins/emoji';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
|
||||
export const getEmojiItemInfo = (element: Element): EmojiItemInfo | undefined => {
|
||||
const label = element.getAttribute('title');
|
||||
const type = element.getAttribute('data-emoji-type') as EmojiType | undefined;
|
||||
const data = element.getAttribute('data-emoji-data');
|
||||
const shortcode = element.getAttribute('data-emoji-shortcode');
|
||||
|
||||
if (type && data && shortcode && label)
|
||||
return {
|
||||
type,
|
||||
data,
|
||||
shortcode,
|
||||
label,
|
||||
};
|
||||
return undefined;
|
||||
};
|
||||
|
||||
type EmojiItemProps = {
|
||||
emoji: IEmoji;
|
||||
};
|
||||
export function EmojiItem({ emoji }: EmojiItemProps) {
|
||||
return (
|
||||
<Box
|
||||
as="button"
|
||||
type="button"
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
className={css.EmojiItem}
|
||||
title={emoji.label}
|
||||
aria-label={`${emoji.label} emoji`}
|
||||
data-emoji-type={EmojiType.Emoji}
|
||||
data-emoji-data={emoji.unicode}
|
||||
data-emoji-shortcode={emoji.shortcode}
|
||||
>
|
||||
{emoji.unicode}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type CustomEmojiItemProps = {
|
||||
mx: MatrixClient;
|
||||
useAuthentication?: boolean;
|
||||
image: PackImageReader;
|
||||
};
|
||||
export function CustomEmojiItem({ mx, useAuthentication, image }: CustomEmojiItemProps) {
|
||||
return (
|
||||
<Box
|
||||
as="button"
|
||||
type="button"
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
className={css.EmojiItem}
|
||||
title={image.body || image.shortcode}
|
||||
aria-label={`${image.body || image.shortcode} emoji`}
|
||||
data-emoji-type={EmojiType.CustomEmoji}
|
||||
data-emoji-data={image.url}
|
||||
data-emoji-shortcode={image.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.CustomEmojiImg}
|
||||
alt={image.body || image.shortcode}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
type StickerItemProps = {
|
||||
mx: MatrixClient;
|
||||
useAuthentication?: boolean;
|
||||
image: PackImageReader;
|
||||
};
|
||||
|
||||
export function StickerItem({ mx, useAuthentication, image }: StickerItemProps) {
|
||||
return (
|
||||
<Box
|
||||
as="button"
|
||||
type="button"
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
className={css.StickerItem}
|
||||
title={image.body || image.shortcode}
|
||||
aria-label={`${image.body || image.shortcode} emoji`}
|
||||
data-emoji-type={EmojiType.Sticker}
|
||||
data-emoji-data={image.url}
|
||||
data-emoji-shortcode={image.shortcode}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
className={css.StickerImg}
|
||||
alt={image.body || image.shortcode}
|
||||
src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
30
src/app/components/emoji-board/components/Layout.tsx
Normal file
30
src/app/components/emoji-board/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { as, Box, Line } from 'folds';
|
||||
import React, { ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './styles.css';
|
||||
|
||||
export const EmojiBoardLayout = as<
|
||||
'div',
|
||||
{
|
||||
header: ReactNode;
|
||||
sidebar?: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
>(({ className, header, sidebar, children, ...props }, ref) => (
|
||||
<Box
|
||||
display="InlineFlex"
|
||||
className={classNames(css.Base, className)}
|
||||
direction="Row"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<Box direction="Column" grow="Yes">
|
||||
<Box className={css.Header} direction="Column" shrink="No">
|
||||
{header}
|
||||
</Box>
|
||||
{children}
|
||||
</Box>
|
||||
<Line size="300" direction="Vertical" />
|
||||
{sidebar}
|
||||
</Box>
|
||||
));
|
||||
22
src/app/components/emoji-board/components/NoStickerPacks.tsx
Normal file
22
src/app/components/emoji-board/components/NoStickerPacks.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { Box, toRem, config, Icons, Icon, Text } from 'folds';
|
||||
|
||||
export function NoStickerPacks() {
|
||||
return (
|
||||
<Box
|
||||
style={{ padding: `${toRem(60)} ${config.space.S500}` }}
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
direction="Column"
|
||||
gap="300"
|
||||
>
|
||||
<Icon size="600" src={Icons.Sticker} />
|
||||
<Box direction="Inherit">
|
||||
<Text align="Center">No Sticker Packs!</Text>
|
||||
<Text priority="300" align="Center" size="T200">
|
||||
Add stickers from user, room or space settings.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
53
src/app/components/emoji-board/components/Preview.tsx
Normal file
53
src/app/components/emoji-board/components/Preview.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { Box, Text } from 'folds';
|
||||
import React from 'react';
|
||||
import { Atom, atom, useAtomValue } from 'jotai';
|
||||
import * as css from './styles.css';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
|
||||
export type PreviewData = {
|
||||
key: string;
|
||||
shortcode: string;
|
||||
};
|
||||
|
||||
export const createPreviewDataAtom = (initial?: PreviewData) =>
|
||||
atom<PreviewData | undefined>(initial);
|
||||
|
||||
type PreviewProps = {
|
||||
previewAtom: Atom<PreviewData | undefined>;
|
||||
};
|
||||
export function Preview({ previewAtom }: PreviewProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const { key, shortcode } = useAtomValue(previewAtom) ?? {};
|
||||
|
||||
if (!shortcode) return null;
|
||||
|
||||
return (
|
||||
<Box shrink="No" className={css.Preview} gap="300" alignItems="Center">
|
||||
{key && (
|
||||
<Box
|
||||
display="InlineFlex"
|
||||
className={css.PreviewEmoji}
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
>
|
||||
{key.startsWith('mxc://') ? (
|
||||
<img
|
||||
className={css.PreviewImg}
|
||||
src={mxcUrlToHttp(mx, key, useAuthentication) ?? key}
|
||||
alt={shortcode}
|
||||
/>
|
||||
) : (
|
||||
key
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
<Text size="H5" truncate>
|
||||
:{shortcode}:
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
51
src/app/components/emoji-board/components/SearchInput.tsx
Normal file
51
src/app/components/emoji-board/components/SearchInput.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React, { ChangeEventHandler, useRef } from 'react';
|
||||
import { Input, Chip, Icon, Icons, Text } from 'folds';
|
||||
import { mobileOrTablet } from '../../../utils/user-agent';
|
||||
|
||||
type SearchInputProps = {
|
||||
query?: string;
|
||||
onChange: ChangeEventHandler<HTMLInputElement>;
|
||||
allowTextCustomEmoji?: boolean;
|
||||
onTextCustomEmojiSelect?: (text: string) => void;
|
||||
};
|
||||
export function SearchInput({
|
||||
query,
|
||||
onChange,
|
||||
allowTextCustomEmoji,
|
||||
onTextCustomEmojiSelect,
|
||||
}: SearchInputProps) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleReact = () => {
|
||||
const textEmoji = inputRef.current?.value.trim();
|
||||
if (!textEmoji) return;
|
||||
onTextCustomEmojiSelect?.(textEmoji);
|
||||
};
|
||||
|
||||
return (
|
||||
<Input
|
||||
ref={inputRef}
|
||||
variant="SurfaceVariant"
|
||||
size="400"
|
||||
placeholder={allowTextCustomEmoji ? 'Search or Text Reaction ' : 'Search'}
|
||||
maxLength={50}
|
||||
after={
|
||||
allowTextCustomEmoji && query ? (
|
||||
<Chip
|
||||
variant="Primary"
|
||||
radii="Pill"
|
||||
after={<Icon src={Icons.ArrowRight} size="50" />}
|
||||
outlined
|
||||
onClick={handleReact}
|
||||
>
|
||||
<Text size="L400">React</Text>
|
||||
</Chip>
|
||||
) : (
|
||||
<Icon src={Icons.Search} size="50" />
|
||||
)
|
||||
}
|
||||
onChange={onChange}
|
||||
autoFocus={!mobileOrTablet()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
130
src/app/components/emoji-board/components/Sidebar.tsx
Normal file
130
src/app/components/emoji-board/components/Sidebar.tsx
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Scroll,
|
||||
Line,
|
||||
as,
|
||||
TooltipProvider,
|
||||
Tooltip,
|
||||
Text,
|
||||
IconButton,
|
||||
Icon,
|
||||
IconSrc,
|
||||
Icons,
|
||||
} from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './styles.css';
|
||||
|
||||
export function Sidebar({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<Box className={css.Sidebar} shrink="No">
|
||||
<Scroll size="0">
|
||||
<Box className={css.SidebarContent} direction="Column" alignItems="Center" gap="100">
|
||||
{children}
|
||||
</Box>
|
||||
</Scroll>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export const SidebarStack = as<'div'>(({ className, children, ...props }, ref) => (
|
||||
<Box
|
||||
className={classNames(css.SidebarStack, className)}
|
||||
direction="Column"
|
||||
alignItems="Center"
|
||||
gap="100"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
));
|
||||
export function SidebarDivider() {
|
||||
return <Line className={css.SidebarDivider} size="300" variant="Surface" />;
|
||||
}
|
||||
|
||||
function SidebarBtn<T extends string>({
|
||||
active,
|
||||
label,
|
||||
id,
|
||||
onClick,
|
||||
children,
|
||||
}: {
|
||||
active?: boolean;
|
||||
label: string;
|
||||
id: T;
|
||||
onClick: (id: T) => void;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<TooltipProvider
|
||||
delay={500}
|
||||
position="Left"
|
||||
tooltip={
|
||||
<Tooltip id={`SidebarStackItem-${id}-label`}>
|
||||
<Text size="T300">{label}</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(ref) => (
|
||||
<IconButton
|
||||
aria-pressed={active}
|
||||
aria-labelledby={`SidebarStackItem-${id}-label`}
|
||||
ref={ref}
|
||||
onClick={() => onClick(id)}
|
||||
size="400"
|
||||
radii="300"
|
||||
variant="Surface"
|
||||
>
|
||||
{children}
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
type GroupIconProps<T extends string> = {
|
||||
active: boolean;
|
||||
id: T;
|
||||
label: string;
|
||||
icon: IconSrc;
|
||||
onClick: (id: T) => void;
|
||||
};
|
||||
export function GroupIcon<T extends string>({
|
||||
active,
|
||||
id,
|
||||
label,
|
||||
icon,
|
||||
onClick,
|
||||
}: GroupIconProps<T>) {
|
||||
return (
|
||||
<SidebarBtn active={active} id={id} label={label} onClick={onClick}>
|
||||
<Icon src={icon} filled={active} />
|
||||
</SidebarBtn>
|
||||
);
|
||||
}
|
||||
|
||||
type ImageGroupIconProps<T extends string> = {
|
||||
active: boolean;
|
||||
id: T;
|
||||
label: string;
|
||||
url?: string;
|
||||
onClick: (id: T) => void;
|
||||
};
|
||||
export function ImageGroupIcon<T extends string>({
|
||||
active,
|
||||
id,
|
||||
label,
|
||||
url,
|
||||
onClick,
|
||||
}: ImageGroupIconProps<T>) {
|
||||
return (
|
||||
<SidebarBtn active={active} id={id} label={label} onClick={onClick}>
|
||||
{url ? (
|
||||
<img className={css.SidebarBtnImg} src={url} alt={label} />
|
||||
) : (
|
||||
<Icon src={Icons.Photo} filled={active} />
|
||||
)}
|
||||
</SidebarBtn>
|
||||
);
|
||||
}
|
||||
44
src/app/components/emoji-board/components/Tabs.tsx
Normal file
44
src/app/components/emoji-board/components/Tabs.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React, { CSSProperties } from 'react';
|
||||
import { Badge, Box, Text } from 'folds';
|
||||
import { EmojiBoardTab } from '../types';
|
||||
|
||||
const styles: CSSProperties = {
|
||||
cursor: 'pointer',
|
||||
};
|
||||
|
||||
export function EmojiBoardTabs({
|
||||
tab,
|
||||
onTabChange,
|
||||
}: {
|
||||
tab: EmojiBoardTab;
|
||||
onTabChange: (tab: EmojiBoardTab) => void;
|
||||
}) {
|
||||
return (
|
||||
<Box gap="100">
|
||||
<Badge
|
||||
style={styles}
|
||||
as="button"
|
||||
variant="Secondary"
|
||||
fill={tab === EmojiBoardTab.Sticker ? 'Solid' : 'None'}
|
||||
size="500"
|
||||
onClick={() => onTabChange(EmojiBoardTab.Sticker)}
|
||||
>
|
||||
<Text as="span" size="L400">
|
||||
Sticker
|
||||
</Text>
|
||||
</Badge>
|
||||
<Badge
|
||||
style={styles}
|
||||
as="button"
|
||||
variant="Secondary"
|
||||
fill={tab === EmojiBoardTab.Emoji ? 'Solid' : 'None'}
|
||||
size="500"
|
||||
onClick={() => onTabChange(EmojiBoardTab.Emoji)}
|
||||
>
|
||||
<Text as="span" size="L400">
|
||||
Emoji
|
||||
</Text>
|
||||
</Badge>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
8
src/app/components/emoji-board/components/index.tsx
Normal file
8
src/app/components/emoji-board/components/index.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export * from './SearchInput';
|
||||
export * from './Tabs';
|
||||
export * from './Sidebar';
|
||||
export * from './NoStickerPacks';
|
||||
export * from './Preview';
|
||||
export * from './Item';
|
||||
export * from './Group';
|
||||
export * from './Layout';
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
|
||||
import { toRem, color, config, DefaultReset, FocusOutline } from 'folds';
|
||||
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
|
||||
export const Base = style({
|
||||
maxWidth: toRem(432),
|
||||
|
|
@ -13,6 +17,15 @@ export const Base = style({
|
|||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const Header = style({
|
||||
padding: config.space.S300,
|
||||
paddingBottom: 0,
|
||||
});
|
||||
|
||||
/**
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
export const Sidebar = style({
|
||||
width: toRem(54),
|
||||
backgroundColor: color.Surface.Container,
|
||||
|
|
@ -29,26 +42,21 @@ export const SidebarStack = style({
|
|||
backgroundColor: color.Surface.Container,
|
||||
});
|
||||
|
||||
export const NativeEmojiSidebarStack = style({
|
||||
position: 'sticky',
|
||||
bottom: '-67%',
|
||||
zIndex: 1,
|
||||
});
|
||||
|
||||
export const SidebarDivider = style({
|
||||
width: toRem(18),
|
||||
});
|
||||
|
||||
export const Header = style({
|
||||
padding: config.space.S300,
|
||||
paddingBottom: 0,
|
||||
export const SidebarBtnImg = style({
|
||||
width: toRem(24),
|
||||
height: toRem(24),
|
||||
objectFit: 'contain',
|
||||
});
|
||||
|
||||
export const EmojiBoardTab = style({
|
||||
cursor: 'pointer',
|
||||
});
|
||||
/**
|
||||
* Preview
|
||||
*/
|
||||
|
||||
export const Footer = style({
|
||||
export const Preview = style({
|
||||
padding: config.space.S200,
|
||||
margin: config.space.S300,
|
||||
marginTop: 0,
|
||||
|
|
@ -59,7 +67,30 @@ export const Footer = style({
|
|||
color: color.SurfaceVariant.OnContainer,
|
||||
});
|
||||
|
||||
export const PreviewEmoji = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: toRem(32),
|
||||
height: toRem(32),
|
||||
fontSize: toRem(32),
|
||||
lineHeight: toRem(32),
|
||||
},
|
||||
]);
|
||||
export const PreviewImg = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: toRem(32),
|
||||
height: toRem(32),
|
||||
objectFit: 'contain',
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* Group
|
||||
*/
|
||||
|
||||
export const EmojiGroup = style({
|
||||
position: 'relative',
|
||||
padding: `${config.space.S300} 0`,
|
||||
});
|
||||
|
||||
|
|
@ -82,15 +113,9 @@ export const EmojiGroupContent = style([
|
|||
},
|
||||
]);
|
||||
|
||||
export const EmojiPreview = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: toRem(32),
|
||||
height: toRem(32),
|
||||
fontSize: toRem(32),
|
||||
lineHeight: toRem(32),
|
||||
},
|
||||
]);
|
||||
/**
|
||||
* Item
|
||||
*/
|
||||
|
||||
export const EmojiItem = style([
|
||||
DefaultReset,
|
||||
|
|
@ -1 +1,2 @@
|
|||
export * from './EmojiBoard';
|
||||
export * from './types';
|
||||
|
|
|
|||
17
src/app/components/emoji-board/types.ts
Normal file
17
src/app/components/emoji-board/types.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export enum EmojiBoardTab {
|
||||
Emoji = 'Emoji',
|
||||
Sticker = 'Sticker',
|
||||
}
|
||||
|
||||
export enum EmojiType {
|
||||
Emoji = 'emoji',
|
||||
CustomEmoji = 'customEmoji',
|
||||
Sticker = 'sticker',
|
||||
}
|
||||
|
||||
export type EmojiItemInfo = {
|
||||
type: EmojiType;
|
||||
data: string;
|
||||
shortcode: string;
|
||||
label: string;
|
||||
};
|
||||
|
|
@ -19,9 +19,11 @@ import { getMemberDisplayName } from '../../utils/room';
|
|||
import { getMxIdLocalPart } from '../../utils/matrix';
|
||||
import * as css from './EventReaders.css';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { openProfileViewer } from '../../../client/action/navigation';
|
||||
import { UserAvatar } from '../user-avatar';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
|
||||
import { useSpaceOptionally } from '../../hooks/useSpace';
|
||||
import { getMouseEventCords } from '../../utils/dom';
|
||||
|
||||
export type EventReadersProps = {
|
||||
room: Room;
|
||||
|
|
@ -33,6 +35,8 @@ export const EventReaders = as<'div', EventReadersProps>(
|
|||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const latestEventReaders = useRoomEventReaders(room, eventId);
|
||||
const openProfile = useOpenUserRoomProfile();
|
||||
const space = useSpaceOptionally();
|
||||
|
||||
const getName = (userId: string) =>
|
||||
getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
|
||||
|
|
@ -57,19 +61,32 @@ export const EventReaders = as<'div', EventReadersProps>(
|
|||
<Box className={css.Content} direction="Column">
|
||||
{latestEventReaders.map((readerId) => {
|
||||
const name = getName(readerId);
|
||||
const avatarMxcUrl = room
|
||||
.getMember(readerId)
|
||||
?.getMxcAvatarUrl();
|
||||
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
|
||||
const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
|
||||
const avatarUrl = avatarMxcUrl
|
||||
? mx.mxcUrlToHttp(
|
||||
avatarMxcUrl,
|
||||
100,
|
||||
100,
|
||||
'crop',
|
||||
undefined,
|
||||
false,
|
||||
useAuthentication
|
||||
)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={readerId}
|
||||
style={{ padding: `0 ${config.space.S200}` }}
|
||||
radii="400"
|
||||
onClick={() => {
|
||||
requestClose();
|
||||
openProfileViewer(readerId, room.roomId);
|
||||
onClick={(event) => {
|
||||
openProfile(
|
||||
room.roomId,
|
||||
space?.roomId,
|
||||
readerId,
|
||||
getMouseEventCords(event.nativeEvent),
|
||||
'Bottom'
|
||||
);
|
||||
}}
|
||||
before={
|
||||
<Avatar size="200">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
|
||||
import { usePowerLevels } from '../../hooks/usePowerLevels';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { ImagePackContent } from './ImagePackContent';
|
||||
import { ImagePack, PackContent } from '../../plugins/custom-emoji';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import { useRoomImagePack } from '../../hooks/useImagePacks';
|
||||
import { randomStr } from '../../utils/common';
|
||||
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
|
||||
import { useRoomCreators } from '../../hooks/useRoomCreators';
|
||||
|
||||
type RoomImagePackProps = {
|
||||
room: Room;
|
||||
|
|
@ -17,9 +19,10 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
|
|||
const mx = useMatrixClient();
|
||||
const userId = mx.getUserId()!;
|
||||
const powerLevels = usePowerLevels(room);
|
||||
const creators = useRoomCreators(room);
|
||||
|
||||
const { getPowerLevel, canSendStateEvent } = usePowerLevelsAPI(powerLevels);
|
||||
const canEditImagePack = canSendStateEvent(StateEvent.PoniesRoomEmotes, getPowerLevel(userId));
|
||||
const permissions = useRoomPermissions(creators, powerLevels);
|
||||
const canEditImagePack = permissions.stateEvent(StateEvent.PoniesRoomEmotes, userId);
|
||||
|
||||
const fallbackPack = useMemo(() => {
|
||||
const fakePackId = randomStr(4);
|
||||
|
|
|
|||
291
src/app/components/invite-user-prompt/InviteUserPrompt.tsx
Normal file
291
src/app/components/invite-user-prompt/InviteUserPrompt.tsx
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
import React, {
|
||||
ChangeEventHandler,
|
||||
FormEventHandler,
|
||||
KeyboardEventHandler,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
Overlay,
|
||||
OverlayBackdrop,
|
||||
OverlayCenter,
|
||||
Box,
|
||||
Header,
|
||||
config,
|
||||
Text,
|
||||
IconButton,
|
||||
Icon,
|
||||
Icons,
|
||||
Input,
|
||||
Button,
|
||||
Spinner,
|
||||
color,
|
||||
TextArea,
|
||||
Dialog,
|
||||
Menu,
|
||||
toRem,
|
||||
Scroll,
|
||||
MenuItem,
|
||||
} from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { useDirectUsers } from '../../hooks/useDirectUsers';
|
||||
import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
|
||||
import { Membership } from '../../../types/matrix/room';
|
||||
import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
|
||||
import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { BreakWord } from '../../styles/Text.css';
|
||||
import { useAlive } from '../../hooks/useAlive';
|
||||
|
||||
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
|
||||
limit: 1000,
|
||||
matchOptions: {
|
||||
contain: true,
|
||||
},
|
||||
};
|
||||
const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
|
||||
|
||||
type InviteUserProps = {
|
||||
room: Room;
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
|
||||
const mx = useMatrixClient();
|
||||
const alive = useAlive();
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const directUsers = useDirectUsers();
|
||||
const [validUserId, setValidUserId] = useState<string>();
|
||||
|
||||
const filteredUsers = useMemo(
|
||||
() =>
|
||||
directUsers.filter((userId) => {
|
||||
const membership = room.getMember(userId)?.membership;
|
||||
return membership !== Membership.Join;
|
||||
}),
|
||||
[directUsers, room]
|
||||
);
|
||||
const [result, search, resetSearch] = useAsyncSearch(
|
||||
filteredUsers,
|
||||
getUserIdString,
|
||||
SEARCH_OPTIONS
|
||||
);
|
||||
const queryHighlighRegex = result?.query
|
||||
? makeHighlightRegex(result.query.split(' '))
|
||||
: undefined;
|
||||
|
||||
const [inviteState, invite] = useAsyncCallback<void, Error, [string, string | undefined]>(
|
||||
useCallback(
|
||||
async (userId, reason) => {
|
||||
await mx.invite(room.roomId, userId, reason);
|
||||
},
|
||||
[mx, room]
|
||||
)
|
||||
);
|
||||
|
||||
const inviting = inviteState.status === AsyncStatus.Loading;
|
||||
|
||||
const handleReset = () => {
|
||||
if (inputRef.current) inputRef.current.value = '';
|
||||
setValidUserId(undefined);
|
||||
resetSearch();
|
||||
};
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
|
||||
if (inviting || !validUserId) return;
|
||||
|
||||
const reasonInput = target?.reasonInput as HTMLTextAreaElement | undefined;
|
||||
const reason = reasonInput?.value.trim();
|
||||
|
||||
invite(validUserId, reason || undefined).then(() => {
|
||||
if (alive()) {
|
||||
handleReset();
|
||||
if (reasonInput) reasonInput.value = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
|
||||
const value = evt.currentTarget.value.trim();
|
||||
if (isUserId(value)) {
|
||||
setValidUserId(value);
|
||||
} else {
|
||||
setValidUserId(undefined);
|
||||
const term = getMxIdLocalPart(value) ?? (value.startsWith('@') ? value.slice(1) : value);
|
||||
if (term) {
|
||||
search(term);
|
||||
} else {
|
||||
resetSearch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserId = (userId: string) => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.value = userId;
|
||||
setValidUserId(userId);
|
||||
resetSearch();
|
||||
inputRef.current.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
|
||||
if (isKeyHotkey('escape', evt)) {
|
||||
resetSearch();
|
||||
return;
|
||||
}
|
||||
if (isKeyHotkey('tab', evt) && result && result.items.length > 0) {
|
||||
evt.preventDefault();
|
||||
const userId = result.items[0];
|
||||
handleUserId(userId);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: () => inputRef.current,
|
||||
clickOutsideDeactivates: true,
|
||||
onDeactivate: requestClose,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Dialog>
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Header
|
||||
size="500"
|
||||
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4" truncate>
|
||||
Invite
|
||||
</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton size="300" radii="300" onClick={requestClose}>
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Header>
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
shrink="No"
|
||||
style={{ padding: config.space.S400 }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">User ID</Text>
|
||||
<div>
|
||||
<Input
|
||||
size="500"
|
||||
ref={inputRef}
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="@username:server"
|
||||
name="userIdInput"
|
||||
variant="Background"
|
||||
disabled={inviting}
|
||||
autoComplete="off"
|
||||
required
|
||||
/>
|
||||
{result && result.items.length > 0 && (
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: resetSearch,
|
||||
returnFocusOnDeactivate: false,
|
||||
clickOutsideDeactivates: true,
|
||||
allowOutsideClick: true,
|
||||
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
|
||||
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Box style={{ position: 'relative' }}>
|
||||
<Menu style={{ position: 'absolute', top: 0, zIndex: 1, width: '100%' }}>
|
||||
<Scroll size="300" style={{ maxHeight: toRem(100) }}>
|
||||
<div style={{ padding: config.space.S100 }}>
|
||||
{result.items.map((userId) => {
|
||||
const username = `${getMxIdLocalPart(userId)}`;
|
||||
const userServer = getMxIdServer(userId);
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={userId}
|
||||
type="button"
|
||||
size="300"
|
||||
variant="Surface"
|
||||
radii="300"
|
||||
onClick={() => handleUserId(userId)}
|
||||
after={
|
||||
<Text size="T200" truncate>
|
||||
{userServer}
|
||||
</Text>
|
||||
}
|
||||
disabled={inviting}
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="T300" truncate>
|
||||
<b>
|
||||
{queryHighlighRegex
|
||||
? highlightText(queryHighlighRegex, [
|
||||
username ?? userId,
|
||||
])
|
||||
: username}
|
||||
</b>
|
||||
</Text>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Scroll>
|
||||
</Menu>
|
||||
</Box>
|
||||
</FocusTrap>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Reason (Optional)</Text>
|
||||
<TextArea
|
||||
size="500"
|
||||
name="reasonInput"
|
||||
variant="Background"
|
||||
rows={4}
|
||||
resize="None"
|
||||
/>
|
||||
</Box>
|
||||
{inviteState.status === AsyncStatus.Error && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }} className={BreakWord}>
|
||||
<b>{inviteState.error.message}</b>
|
||||
</Text>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!validUserId || inviting}
|
||||
before={inviting && <Spinner size="200" variant="Primary" fill="Solid" />}
|
||||
>
|
||||
<Text size="B400">Invite</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
1
src/app/components/invite-user-prompt/index.ts
Normal file
1
src/app/components/invite-user-prompt/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './InviteUserPrompt';
|
||||
131
src/app/components/join-address-prompt/JoinAddressPrompt.tsx
Normal file
131
src/app/components/join-address-prompt/JoinAddressPrompt.tsx
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
import React, { FormEventHandler, useState } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
Dialog,
|
||||
Overlay,
|
||||
OverlayCenter,
|
||||
OverlayBackdrop,
|
||||
Header,
|
||||
config,
|
||||
Box,
|
||||
Text,
|
||||
IconButton,
|
||||
Icon,
|
||||
Icons,
|
||||
Button,
|
||||
Input,
|
||||
color,
|
||||
} from 'folds';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { isRoomAlias, isRoomId } from '../../utils/matrix';
|
||||
import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
|
||||
import { tryDecodeURIComponent } from '../../utils/dom';
|
||||
|
||||
type JoinAddressProps = {
|
||||
onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
|
||||
const [invalid, setInvalid] = useState(false);
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
setInvalid(false);
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const addressInput = target?.addressInput as HTMLInputElement | undefined;
|
||||
const address = addressInput?.value.trim();
|
||||
if (!address) return;
|
||||
|
||||
if (isRoomId(address) || isRoomAlias(address)) {
|
||||
onOpen(address);
|
||||
return;
|
||||
}
|
||||
|
||||
if (testMatrixTo(address)) {
|
||||
const decodedAddress = tryDecodeURIComponent(address);
|
||||
const toRoom = parseMatrixToRoom(decodedAddress);
|
||||
if (toRoom) {
|
||||
onOpen(toRoom.roomIdOrAlias, toRoom.viaServers);
|
||||
return;
|
||||
}
|
||||
|
||||
const toEvent = parseMatrixToRoomEvent(decodedAddress);
|
||||
if (toEvent) {
|
||||
onOpen(toEvent.roomIdOrAlias, toEvent.viaServers, toEvent.eventId);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setInvalid(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: onCancel,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Dialog variant="Surface">
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Join with Address</Text>
|
||||
</Box>
|
||||
<IconButton size="300" onClick={onCancel} radii="300">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
style={{ padding: config.space.S400, paddingTop: 0 }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<Box direction="Column" gap="200">
|
||||
<Text priority="400" size="T300">
|
||||
Enter public address to join the community. Addresses looks like:
|
||||
</Text>
|
||||
<Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}>
|
||||
<li>#community:server</li>
|
||||
<li>https://matrix.to/#/#community:server</li>
|
||||
<li>https://matrix.to/#/!xYzAj?via=server</li>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Address</Text>
|
||||
<Input
|
||||
size="500"
|
||||
autoFocus
|
||||
name="addressInput"
|
||||
variant="Background"
|
||||
placeholder="#community:server"
|
||||
required
|
||||
/>
|
||||
{invalid && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>Invalid Address</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Button type="submit" variant="Primary">
|
||||
<Text size="B400">Open</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
1
src/app/components/join-address-prompt/index.ts
Normal file
1
src/app/components/join-address-prompt/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './JoinAddressPrompt';
|
||||
|
|
@ -224,6 +224,8 @@ type RenderVideoContentProps = {
|
|||
mimeType: string;
|
||||
url: string;
|
||||
encInfo?: IEncryptedFile;
|
||||
markedAsSpoiler?: boolean;
|
||||
spoilerReason?: string;
|
||||
};
|
||||
type MVideoProps = {
|
||||
content: IVideoContent;
|
||||
|
|
@ -274,6 +276,8 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
|
|||
mimeType: safeMimeType,
|
||||
url: mxcUrl,
|
||||
encInfo: content.file,
|
||||
markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
|
||||
spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
|
||||
})}
|
||||
</AttachmentBox>
|
||||
</Attachment>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ export const ReplyBend = style({
|
|||
|
||||
export const ThreadIndicator = style({
|
||||
opacity: config.opacity.P300,
|
||||
gap: toRem(2),
|
||||
|
||||
selectors: {
|
||||
'button&': {
|
||||
|
|
@ -19,11 +18,6 @@ export const ThreadIndicator = style({
|
|||
},
|
||||
});
|
||||
|
||||
export const ThreadIndicatorIcon = style({
|
||||
width: toRem(14),
|
||||
height: toRem(14),
|
||||
});
|
||||
|
||||
export const Reply = style({
|
||||
marginBottom: toRem(1),
|
||||
minWidth: 0,
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import * as css from './Reply.css';
|
|||
import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
|
||||
import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
|
||||
import { useRoomEvent } from '../../hooks/useRoomEvent';
|
||||
import { GetPowerLevelTag } from '../../hooks/usePowerLevelTags';
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
|
||||
|
||||
type ReplyLayoutProps = {
|
||||
userColor?: string;
|
||||
|
|
@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
|
|||
);
|
||||
|
||||
export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
|
||||
<Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
|
||||
<Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
|
||||
<Text size="T200">Threaded reply</Text>
|
||||
<Box
|
||||
shrink="No"
|
||||
className={css.ThreadIndicator}
|
||||
alignItems="Center"
|
||||
gap="100"
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<Icon size="50" src={Icons.Thread} />
|
||||
<Text size="L400">Thread</Text>
|
||||
</Box>
|
||||
));
|
||||
|
||||
|
|
@ -50,8 +57,7 @@ type ReplyProps = {
|
|||
replyEventId: string;
|
||||
threadRootId?: string | undefined;
|
||||
onClick?: MouseEventHandler | undefined;
|
||||
getPowerLevel?: (userId: string) => number;
|
||||
getPowerLevelTag?: GetPowerLevelTag;
|
||||
getMemberPowerTag?: GetMemberPowerTag;
|
||||
accessibleTagColors?: Map<string, string>;
|
||||
legacyUsernameColor?: boolean;
|
||||
};
|
||||
|
|
@ -64,8 +70,7 @@ export const Reply = as<'div', ReplyProps>(
|
|||
replyEventId,
|
||||
threadRootId,
|
||||
onClick,
|
||||
getPowerLevel,
|
||||
getPowerLevelTag,
|
||||
getMemberPowerTag,
|
||||
accessibleTagColors,
|
||||
legacyUsernameColor,
|
||||
...props
|
||||
|
|
@ -81,8 +86,7 @@ export const Reply = as<'div', ReplyProps>(
|
|||
|
||||
const { body } = replyEvent?.getContent() ?? {};
|
||||
const sender = replyEvent?.getSender();
|
||||
const senderPL = sender && getPowerLevel?.(sender);
|
||||
const powerTag = typeof senderPL === 'number' ? getPowerLevelTag?.(senderPL) : undefined;
|
||||
const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
|
||||
const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
|
||||
|
||||
const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
|
||||
|
|
@ -97,7 +101,7 @@ export const Reply = as<'div', ReplyProps>(
|
|||
const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
|
||||
|
||||
return (
|
||||
<Box direction="Column" alignItems="Start" {...props} ref={ref}>
|
||||
<Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
|
||||
{threadRootId && (
|
||||
<ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -5,19 +5,35 @@ import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/ti
|
|||
export type TimeProps = {
|
||||
compact?: boolean;
|
||||
ts: number;
|
||||
hour24Clock: boolean;
|
||||
dateFormatString: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders a formatted timestamp, supporting compact and full display modes.
|
||||
*
|
||||
* Displays the time in hour:minute format if the message is from today, yesterday, or if `compact` is true.
|
||||
* For older messages, it shows the date and time.
|
||||
*
|
||||
* @param {number} ts - The timestamp to display.
|
||||
* @param {boolean} [compact=false] - If true, always show only the time.
|
||||
* @param {boolean} hour24Clock - Whether to use 24-hour time format.
|
||||
* @param {string} dateFormatString - Format string for the date part.
|
||||
* @returns {React.ReactElement} A <Text as="time"> element with the formatted date/time.
|
||||
*/
|
||||
export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
|
||||
({ compact, ts, ...props }, ref) => {
|
||||
({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
|
||||
const formattedTime = timeHourMinute(ts, hour24Clock);
|
||||
|
||||
let time = '';
|
||||
if (compact) {
|
||||
time = timeHourMinute(ts);
|
||||
time = formattedTime;
|
||||
} else if (today(ts)) {
|
||||
time = timeHourMinute(ts);
|
||||
time = formattedTime;
|
||||
} else if (yesterday(ts)) {
|
||||
time = `Yesterday ${timeHourMinute(ts)}`;
|
||||
time = `Yesterday ${formattedTime}`;
|
||||
} else {
|
||||
time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
|
||||
time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Box, Icon, IconSrc } from 'folds';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { CompactLayout, ModernLayout } from '..';
|
||||
import { BubbleLayout, CompactLayout, ModernLayout } from '..';
|
||||
import { MessageLayout } from '../../../state/settings';
|
||||
|
||||
export type EventContentProps = {
|
||||
|
|
@ -30,9 +30,15 @@ export function EventContent({ messageLayout, time, iconSrc, content }: EventCon
|
|||
</Box>
|
||||
);
|
||||
|
||||
return messageLayout === MessageLayout.Compact ? (
|
||||
<CompactLayout before={beforeJSX}>{msgContentJSX}</CompactLayout>
|
||||
) : (
|
||||
<ModernLayout before={beforeJSX}>{msgContentJSX}</ModernLayout>
|
||||
);
|
||||
if (messageLayout === MessageLayout.Compact) {
|
||||
return <CompactLayout before={beforeJSX}>{msgContentJSX}</CompactLayout>;
|
||||
}
|
||||
if (messageLayout === MessageLayout.Bubble) {
|
||||
return (
|
||||
<BubbleLayout hideBubble before={beforeJSX}>
|
||||
{msgContentJSX}
|
||||
</BubbleLayout>
|
||||
);
|
||||
}
|
||||
return <ModernLayout before={beforeJSX}>{msgContentJSX}</ModernLayout>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ export const ImageContent = as<'div', ImageContentProps>(
|
|||
)}
|
||||
{(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
|
||||
!load &&
|
||||
!markedAsSpoiler && (
|
||||
!blurred && (
|
||||
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
|
||||
<Spinner variant="Secondary" />
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Icon,
|
||||
Icons,
|
||||
Spinner,
|
||||
|
|
@ -22,8 +23,7 @@ import {
|
|||
import * as css from './style.css';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { bytesToSize } from '../../../../util/common';
|
||||
import { millisecondsToMinutesAndSeconds } from '../../../utils/common';
|
||||
import { bytesToSize, millisecondsToMinutesAndSeconds } from '../../../utils/common';
|
||||
import {
|
||||
decryptFile,
|
||||
downloadEncryptedMedia,
|
||||
|
|
@ -48,6 +48,8 @@ type VideoContentProps = {
|
|||
info: IVideoInfo & IThumbnailContent;
|
||||
encInfo?: EncryptedAttachmentInfo;
|
||||
autoPlay?: boolean;
|
||||
markedAsSpoiler?: boolean;
|
||||
spoilerReason?: string;
|
||||
renderThumbnail?: () => ReactNode;
|
||||
renderVideo: (props: RenderVideoProps) => ReactNode;
|
||||
};
|
||||
|
|
@ -61,6 +63,8 @@ export const VideoContent = as<'div', VideoContentProps>(
|
|||
info,
|
||||
encInfo,
|
||||
autoPlay,
|
||||
markedAsSpoiler,
|
||||
spoilerReason,
|
||||
renderThumbnail,
|
||||
renderVideo,
|
||||
...props
|
||||
|
|
@ -73,6 +77,7 @@ export const VideoContent = as<'div', VideoContentProps>(
|
|||
|
||||
const [load, setLoad] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
|
||||
|
||||
const [srcState, loadSrc] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
|
|
@ -115,11 +120,15 @@ export const VideoContent = as<'div', VideoContentProps>(
|
|||
/>
|
||||
)}
|
||||
{renderThumbnail && !load && (
|
||||
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
|
||||
<Box
|
||||
className={classNames(css.AbsoluteContainer, blurred && css.Blur)}
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
>
|
||||
{renderThumbnail()}
|
||||
</Box>
|
||||
)}
|
||||
{!autoPlay && srcState.status === AsyncStatus.Idle && (
|
||||
{!autoPlay && !blurred && srcState.status === AsyncStatus.Idle && (
|
||||
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
|
||||
<Button
|
||||
variant="Secondary"
|
||||
|
|
@ -134,7 +143,7 @@ export const VideoContent = as<'div', VideoContentProps>(
|
|||
</Box>
|
||||
)}
|
||||
{srcState.status === AsyncStatus.Success && (
|
||||
<Box className={css.AbsoluteContainer}>
|
||||
<Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
|
||||
{renderVideo({
|
||||
title: body,
|
||||
src: srcState.data,
|
||||
|
|
@ -145,8 +154,39 @@ export const VideoContent = as<'div', VideoContentProps>(
|
|||
})}
|
||||
</Box>
|
||||
)}
|
||||
{blurred && !error && srcState.status !== AsyncStatus.Error && (
|
||||
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
|
||||
<TooltipProvider
|
||||
tooltip={
|
||||
typeof spoilerReason === 'string' && (
|
||||
<Tooltip variant="Secondary">
|
||||
<Text>{spoilerReason}</Text>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
position="Top"
|
||||
align="Center"
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<Chip
|
||||
ref={triggerRef}
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
size="500"
|
||||
outlined
|
||||
onClick={() => {
|
||||
setBlurred(false);
|
||||
}}
|
||||
>
|
||||
<Text size="B300">Spoiler</Text>
|
||||
</Chip>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
</Box>
|
||||
)}
|
||||
{(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
|
||||
!load && (
|
||||
!load &&
|
||||
!blurred && (
|
||||
<Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
|
||||
<Spinner variant="Secondary" />
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export const AbsoluteFooter = style([
|
|||
DefaultReset,
|
||||
{
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
bottom: config.space.S100,
|
||||
left: config.space.S100,
|
||||
right: config.space.S100,
|
||||
|
|
|
|||
|
|
@ -1,18 +1,63 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import { Box, as } from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import { Box, ContainerColor, as, color } from 'folds';
|
||||
import * as css from './layout.css';
|
||||
|
||||
type BubbleArrowProps = {
|
||||
variant: ContainerColor;
|
||||
};
|
||||
function BubbleLeftArrow({ variant }: BubbleArrowProps) {
|
||||
return (
|
||||
<svg
|
||||
className={css.BubbleLeftArrow}
|
||||
width="9"
|
||||
height="8"
|
||||
viewBox="0 0 9 8"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.00004 8V0H4.82847C3.04666 0 2.15433 2.15428 3.41426 3.41421L8.00004 8H9.00004Z"
|
||||
fill={color[variant].Container}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
type BubbleLayoutProps = {
|
||||
hideBubble?: boolean;
|
||||
before?: ReactNode;
|
||||
header?: ReactNode;
|
||||
};
|
||||
|
||||
export const BubbleLayout = as<'div', BubbleLayoutProps>(({ before, children, ...props }, ref) => (
|
||||
<Box gap="300" {...props} ref={ref}>
|
||||
<Box className={css.BubbleBefore} shrink="No">
|
||||
{before}
|
||||
export const BubbleLayout = as<'div', BubbleLayoutProps>(
|
||||
({ hideBubble, before, header, children, ...props }, ref) => (
|
||||
<Box gap="300" {...props} ref={ref}>
|
||||
<Box className={css.BubbleBefore} shrink="No">
|
||||
{before}
|
||||
</Box>
|
||||
<Box grow="Yes" direction="Column">
|
||||
{header}
|
||||
{hideBubble ? (
|
||||
children
|
||||
) : (
|
||||
<Box>
|
||||
<Box
|
||||
className={
|
||||
hideBubble
|
||||
? undefined
|
||||
: classNames(css.BubbleContent, before ? css.BubbleContentArrowLeft : undefined)
|
||||
}
|
||||
direction="Column"
|
||||
>
|
||||
{before ? <BubbleLeftArrow variant="SurfaceVariant" /> : null}
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className={css.BubbleContent} direction="Column">
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
));
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -120,11 +120,12 @@ export const CompactHeader = style([
|
|||
export const AvatarBase = style({
|
||||
paddingTop: toRem(4),
|
||||
transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
|
||||
display: 'flex',
|
||||
alignSelf: 'start',
|
||||
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
transform: `translateY(${toRem(-4)})`,
|
||||
transform: `translateY(${toRem(-2)})`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -133,14 +134,31 @@ export const ModernBefore = style({
|
|||
minWidth: toRem(36),
|
||||
});
|
||||
|
||||
export const BubbleBefore = style([ModernBefore]);
|
||||
export const BubbleBefore = style({
|
||||
minWidth: toRem(36),
|
||||
});
|
||||
|
||||
export const BubbleContent = style({
|
||||
maxWidth: toRem(800),
|
||||
padding: config.space.S200,
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
borderRadius: config.radii.R400,
|
||||
borderRadius: config.radii.R500,
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const BubbleContentArrowLeft = style({
|
||||
borderTopLeftRadius: 0,
|
||||
});
|
||||
|
||||
export const BubbleLeftArrow = style({
|
||||
width: toRem(9),
|
||||
height: toRem(8),
|
||||
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: toRem(-8),
|
||||
zIndex: 1,
|
||||
});
|
||||
|
||||
export const Username = style({
|
||||
|
|
|
|||
80
src/app/components/presence/Presence.tsx
Normal file
80
src/app/components/presence/Presence.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import {
|
||||
as,
|
||||
Badge,
|
||||
Box,
|
||||
color,
|
||||
ContainerColor,
|
||||
MainColor,
|
||||
Text,
|
||||
Tooltip,
|
||||
TooltipProvider,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import React, { ReactNode, useId } from 'react';
|
||||
import * as css from './styles.css';
|
||||
import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
|
||||
|
||||
const PresenceToColor: Record<Presence, MainColor> = {
|
||||
[Presence.Online]: 'Success',
|
||||
[Presence.Unavailable]: 'Warning',
|
||||
[Presence.Offline]: 'Secondary',
|
||||
};
|
||||
|
||||
type PresenceBadgeProps = {
|
||||
presence: Presence;
|
||||
status?: string;
|
||||
size?: '200' | '300' | '400' | '500';
|
||||
};
|
||||
export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
|
||||
const label = usePresenceLabel();
|
||||
const badgeLabelId = useId();
|
||||
|
||||
return (
|
||||
<TooltipProvider
|
||||
position="Right"
|
||||
align="Center"
|
||||
offset={4}
|
||||
delay={200}
|
||||
tooltip={
|
||||
<Tooltip id={badgeLabelId}>
|
||||
<Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
|
||||
<Text size="L400">{label[presence]}</Text>
|
||||
{status && <Text size="T200">•</Text>}
|
||||
{status && <Text size="T200">{status}</Text>}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<Badge
|
||||
aria-labelledby={badgeLabelId}
|
||||
ref={triggerRef}
|
||||
size={size}
|
||||
variant={PresenceToColor[presence]}
|
||||
fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
|
||||
radii="Pill"
|
||||
/>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
type AvatarPresenceProps = {
|
||||
badge: ReactNode;
|
||||
variant?: ContainerColor;
|
||||
};
|
||||
export const AvatarPresence = as<'div', AvatarPresenceProps>(
|
||||
({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
|
||||
<Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
|
||||
{badge && (
|
||||
<div
|
||||
className={css.AvatarPresenceBadge}
|
||||
style={{ backgroundColor: color[variant].Container }}
|
||||
>
|
||||
{badge}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
1
src/app/components/presence/index.ts
Normal file
1
src/app/components/presence/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './Presence';
|
||||
22
src/app/components/presence/styles.css.ts
Normal file
22
src/app/components/presence/styles.css.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { config } from 'folds';
|
||||
|
||||
export const AvatarPresence = style({
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const AvatarPresenceBadge = style({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
transform: 'translate(25%, 25%)',
|
||||
zIndex: 1,
|
||||
|
||||
display: 'flex',
|
||||
padding: config.borderWidth.B600,
|
||||
backgroundColor: 'inherit',
|
||||
borderRadius: config.radii.Pill,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Avatar, Box, Button, Spinner, Text, as } from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { openInviteUser } from '../../../client/action/navigation';
|
||||
import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
|
||||
import { getMemberDisplayName, getStateEvent } from '../../utils/room';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
|
|
@ -15,6 +14,9 @@ import { nameInitials } from '../../utils/common';
|
|||
import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
|
||||
import { mDirectAtom } from '../../state/mDirectList';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { useSetting } from '../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
import { InviteUserPrompt } from '../invite-user-prompt';
|
||||
|
||||
export type RoomIntroProps = {
|
||||
room: Room;
|
||||
|
|
@ -25,6 +27,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
|
|||
const useAuthentication = useMediaAuthentication();
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
const mDirects = useAtomValue(mDirectAtom);
|
||||
const [invitePrompt, setInvitePrompt] = useState(false);
|
||||
|
||||
const createEvent = getStateEvent(room, StateEvent.RoomCreate);
|
||||
const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
|
||||
|
|
@ -43,6 +46,8 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
|
|||
useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
|
||||
);
|
||||
|
||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||
|
||||
return (
|
||||
<Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
|
||||
<Box>
|
||||
|
|
@ -67,23 +72,22 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
|
|||
<Text size="T200" priority="300">
|
||||
{'Created by '}
|
||||
<b>@{creatorName}</b>
|
||||
{` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
|
||||
{` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Box gap="200" wrap="Wrap">
|
||||
<Button
|
||||
onClick={() => openInviteUser(room.roomId)}
|
||||
variant="Secondary"
|
||||
size="300"
|
||||
radii="300"
|
||||
>
|
||||
<Button onClick={() => setInvitePrompt(true)} variant="Secondary" size="300" radii="300">
|
||||
<Text size="B300">Invite Member</Text>
|
||||
</Button>
|
||||
|
||||
{invitePrompt && (
|
||||
<InviteUserPrompt room={room} requestClose={() => setInvitePrompt(false)} />
|
||||
)}
|
||||
{typeof prevRoomId === 'string' &&
|
||||
(mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
|
||||
<Button
|
||||
onClick={() => navigateRoom(prevRoomId)}
|
||||
onClick={() => navigateRoom(prevRoomId, createContent?.predecessor?.event_id)}
|
||||
variant="Success"
|
||||
size="300"
|
||||
fill="Soft"
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue