Inital dropdown, modal and toggle
Vincent
5 years ago
parent
649c8c9be5
commit
12011a30d4
@ -0,0 +1,31 @@
|
||||
/* global Whisper */
|
||||
|
||||
// eslint-disable-next-line func-names
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.SessionToastView = Whisper.View.extend({
|
||||
initialize(options) {
|
||||
this.props = {
|
||||
active: options.active,
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
this.toggleView = new Whisper.ReactWrapperView({
|
||||
className: 'session-toggle-wrapper',
|
||||
Component: window.Signal.Components.SessionToast,
|
||||
props: this.props,
|
||||
});
|
||||
|
||||
this.$el.append(this.toggleView.el);
|
||||
},
|
||||
|
||||
toggle() {
|
||||
this.props.active = !this.props.active;
|
||||
this.toggleView.update(this.props);
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
|
||||
import { SessionIconType } from './icon/';
|
||||
|
||||
|
||||
interface Props {
|
||||
items: Array<{
|
||||
id: string,
|
||||
content: string,
|
||||
icon: SessionIconType | null,
|
||||
type: SessionDropDownItemType,
|
||||
active: boolean,
|
||||
}>,
|
||||
}
|
||||
|
||||
export class SessionDropdown extends React.PureComponent<Props> {
|
||||
public static readonly defaultProps = SessionDropdownItem.defaultProps;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { items } = this.props;
|
||||
|
||||
return (
|
||||
<div className={classNames('session-dropdown')}>
|
||||
<ul>
|
||||
{items.map((item: any) => <SessionDropdownItem
|
||||
id={item.id}
|
||||
content={item.content}
|
||||
icon={item.icon}
|
||||
type={item.type}
|
||||
active={item.active}
|
||||
/>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
|
||||
import { generateID } from './tools/ComponentTools';
|
||||
|
||||
|
||||
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 = {
|
||||
id: generateID(),
|
||||
type: SessionDropDownItemType.Default,
|
||||
onClick: () => null,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.clickHandler = this.clickHandler.bind(this);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { id, content, type, icon, active } = this.props;
|
||||
|
||||
return (
|
||||
<li
|
||||
id={id}
|
||||
className={classNames(active ? 'active' : '', type || '')}
|
||||
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,43 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
body: any;
|
||||
}
|
||||
|
||||
export class SessionModal extends React.PureComponent<Props> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { title } = this.props;
|
||||
|
||||
return (
|
||||
<div className={classNames('session-modal')}>
|
||||
<div className="header">
|
||||
<div className="close">
|
||||
<SessionIconButton
|
||||
iconType={SessionIconType.Exit}
|
||||
iconSize={SessionIconSize.Small}
|
||||
/>
|
||||
</div>
|
||||
<div className="title">{title}</div>
|
||||
<div className="icons">
|
||||
<SessionIconButton
|
||||
iconType={SessionIconType.Search}
|
||||
iconSize={SessionIconSize.Medium}
|
||||
/>
|
||||
<SessionIconButton
|
||||
iconType={SessionIconType.AddUser}
|
||||
iconSize={SessionIconSize.Medium}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface Props {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export class SessionToggle extends React.PureComponent<Props, State> {
|
||||
public static readonly extendedDefaults = {
|
||||
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() {
|
||||
this.setState({
|
||||
active: !this.state.active,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
// This is a collection of tools which can be ued to simplify the esign and rendering process of your components.
|
||||
|
||||
export function generateID(){
|
||||
// Generates a unique ID for your component
|
||||
return Math.random().toString(36).substring(3);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue