Added SessionToggle, SessionModal, and SessionDropdown comp… (#710)
Added SessionToggle, SessionModal, and SessionDropdown componentspull/737/head
Audric Ackermann
5 years ago
committed by
GitHub
commit
687b4d09da
@ -0,0 +1,32 @@
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.SessionDropdownView = Whisper.View.extend({
|
||||
initialize(options) {
|
||||
this.props = {
|
||||
items: options.items,
|
||||
};
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
render() {
|
||||
this.dropdownView = new Whisper.ReactWrapperView({
|
||||
className: 'session-dropdown-wrapper',
|
||||
Component: window.Signal.Components.SessionDropdown,
|
||||
props: this.props,
|
||||
});
|
||||
|
||||
this.$el.append(this.dropdownView.el);
|
||||
},
|
||||
|
||||
openDropdown() {},
|
||||
|
||||
closeDropdown() {},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,28 @@
|
||||
/* global i18n, Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.SessionSettingsView = Whisper.View.extend({
|
||||
initialize() {
|
||||
this.render();
|
||||
},
|
||||
render() {
|
||||
this.settingsView = new Whisper.ReactWrapperView({
|
||||
className: 'session-settings',
|
||||
Component: window.Signal.Components.SessionSettings,
|
||||
props: {
|
||||
i18n,
|
||||
},
|
||||
});
|
||||
|
||||
this.$el.append(this.settingsView.el);
|
||||
},
|
||||
close() {
|
||||
this.remove();
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,31 @@
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.SessionToggleView = Whisper.View.extend({
|
||||
initialize(options) {
|
||||
this.props = {
|
||||
active: options.active,
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
this.toggleView = new Whisper.ReactWrapperView({
|
||||
className: 'session-toggle-wrapper',
|
||||
Component: window.Signal.Components.SessionToggle,
|
||||
props: this.props,
|
||||
});
|
||||
|
||||
this.$el.append(this.toggleView.el);
|
||||
},
|
||||
|
||||
toggle() {
|
||||
this.props.active = !this.props.active;
|
||||
this.toggleView.update(this.props);
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionIconType } from './icon/';
|
||||
import {
|
||||
SessionDropdownItem,
|
||||
SessionDropDownItemType,
|
||||
} from './SessionDropdownItem';
|
||||
|
||||
// THIS IS A FUTURE-PROOFING ELEMENT TO REPLACE ELECTRON CONTEXTMENUS IN PRELOAD.JS
|
||||
|
||||
interface State {
|
||||
x: number;
|
||||
y: number;
|
||||
isVisible: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
id?: string;
|
||||
onClick?: any;
|
||||
relativeTo: string | Array<number>;
|
||||
items: Array<{
|
||||
content: string;
|
||||
id?: string;
|
||||
icon?: SessionIconType | null;
|
||||
type?: SessionDropDownItemType;
|
||||
active?: boolean;
|
||||
onClick?: any;
|
||||
display?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
export class SessionDropdown extends React.Component<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
isVisible: false,
|
||||
};
|
||||
}
|
||||
|
||||
public show() {
|
||||
this.setState({
|
||||
isVisible: true,
|
||||
});
|
||||
}
|
||||
|
||||
public hide() {
|
||||
this.setState({
|
||||
isVisible: false,
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { items } = this.props;
|
||||
const { isVisible } = this.state;
|
||||
|
||||
return (
|
||||
<div className={classNames('session-dropdown')}>
|
||||
<ul>
|
||||
{isVisible
|
||||
? items.map((item: any) => {
|
||||
return item.display ? (
|
||||
<SessionDropdownItem
|
||||
id={item.id}
|
||||
content={item.content}
|
||||
icon={item.icon}
|
||||
type={item.type}
|
||||
active={item.active}
|
||||
onClick={item.onClick}
|
||||
/>
|
||||
) : null;
|
||||
})
|
||||
: null}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
|
||||
|
||||
export enum SessionDropDownItemType {
|
||||
Default = 'default',
|
||||
Danger = 'danger',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
content: string;
|
||||
type: SessionDropDownItemType;
|
||||
icon: SessionIconType | null;
|
||||
active: boolean;
|
||||
onClick: any;
|
||||
}
|
||||
|
||||
export class SessionDropdownItem extends React.PureComponent<Props> {
|
||||
public static defaultProps = {
|
||||
type: SessionDropDownItemType.Default,
|
||||
icon: null,
|
||||
active: false,
|
||||
onClick: () => null,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.clickHandler = this.clickHandler.bind(this);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { content, type, icon, active } = this.props;
|
||||
const id = this.props.id || window.generateID();
|
||||
|
||||
return (
|
||||
<li
|
||||
id={id}
|
||||
className={classNames(active ? 'active' : '', type || '')}
|
||||
role="button"
|
||||
onClick={this.clickHandler}
|
||||
>
|
||||
{icon ? (
|
||||
<SessionIcon iconType={icon} iconSize={SessionIconSize.Small} />
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<div className="item-content">{content}</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
private clickHandler(e: any) {
|
||||
if (this.props.onClick) {
|
||||
e.stopPropagation();
|
||||
this.props.onClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
//mouseButton: Number;
|
||||
posX: number;
|
||||
posY: number;
|
||||
}
|
||||
|
||||
export class SessionDropdownTrigger extends React.Component<Props> {
|
||||
public static defaultProps = {
|
||||
//mouseButton: 2, // 0 is left click, 2 is right click
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
};
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public handleDropdownClick = (event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let x = event.clientX || (event.touches && event.touches[0].pageX);
|
||||
let y = event.clientY || (event.touches && event.touches[0].pageY);
|
||||
|
||||
if (this.props.posX) {
|
||||
x -= this.props.posX;
|
||||
}
|
||||
if (this.props.posY) {
|
||||
y -= this.props.posY;
|
||||
}
|
||||
};
|
||||
|
||||
public render() {
|
||||
return <div role="button" onClick={this.handleDropdownClick} />;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
onClose: any;
|
||||
onOk: any;
|
||||
//Maximum of two icons in header
|
||||
headerIconButtons?: Array<{
|
||||
type: SessionIconType;
|
||||
onClick?: any;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface State {
|
||||
isVisible: boolean;
|
||||
}
|
||||
|
||||
export class SessionModal extends React.PureComponent<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isVisible: true,
|
||||
};
|
||||
|
||||
this.close = this.close.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
|
||||
window.addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { title, headerIconButtons } = this.props;
|
||||
const { isVisible } = this.state;
|
||||
|
||||
return isVisible ? (
|
||||
<div className={classNames('session-modal')}>
|
||||
<div className="session-modal__header">
|
||||
<div className="session-modal__header__close">
|
||||
<SessionIconButton
|
||||
iconType={SessionIconType.Exit}
|
||||
iconSize={SessionIconSize.Small}
|
||||
onClick={this.close}
|
||||
/>
|
||||
</div>
|
||||
<div className="session-modal__header__title">{title}</div>
|
||||
<div className="session-modal__header__icons">
|
||||
{headerIconButtons
|
||||
? headerIconButtons.map((iconItem: any) => {
|
||||
return (
|
||||
<SessionIconButton
|
||||
key={iconItem.type}
|
||||
iconType={iconItem.type}
|
||||
iconSize={SessionIconSize.Medium}
|
||||
/>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="session-modal__body">{this.props.children}</div>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
public close() {
|
||||
this.setState({
|
||||
isVisible: false,
|
||||
});
|
||||
|
||||
window.removeEventListener('keyup', this.onKeyUp);
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
public onKeyUp(event: any) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
this.props.onOk();
|
||||
break;
|
||||
case 'Esc':
|
||||
case 'Escape':
|
||||
this.close();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
i18n: any;
|
||||
}
|
||||
|
||||
export class SessionSettings extends React.Component<Props> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const i18n = this.props.i18n;
|
||||
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface Props {
|
||||
active: boolean;
|
||||
onClick: any;
|
||||
}
|
||||
|
||||
interface State {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export class SessionToggle extends React.PureComponent<Props, State> {
|
||||
public static defaultProps = {
|
||||
onClick: () => null,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.clickHandler = this.clickHandler.bind(this);
|
||||
|
||||
const { active } = this.props;
|
||||
|
||||
this.state = {
|
||||
active: active,
|
||||
};
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'session-toggle',
|
||||
this.state.active ? 'active' : ''
|
||||
)}
|
||||
role="button"
|
||||
onClick={this.clickHandler}
|
||||
>
|
||||
<div className="knob" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private clickHandler(e: any) {
|
||||
this.setState({
|
||||
active: !this.state.active,
|
||||
});
|
||||
|
||||
if (this.props.onClick) {
|
||||
e.stopPropagation();
|
||||
this.props.onClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue