Major rework of context menus
Vincent
5 years ago
parent
d0d5012e07
commit
9afb8b4d5e
@ -1,68 +1,61 @@
|
||||
|
||||
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',
|
||||
Default = 'default',
|
||||
Danger = 'danger',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
id: string,
|
||||
content: string,
|
||||
type: SessionDropDownItemType,
|
||||
icon: SessionIconType | null,
|
||||
active: boolean,
|
||||
onClick: any,
|
||||
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,
|
||||
icon: null,
|
||||
active: false,
|
||||
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();
|
||||
}
|
||||
}
|
||||
public static defaultProps = {
|
||||
id: generateID(),
|
||||
type: SessionDropDownItemType.Default,
|
||||
icon: null,
|
||||
active: false,
|
||||
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 || '')}
|
||||
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} />;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
// 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);
|
||||
}
|
||||
export function generateID() {
|
||||
// Generates a unique ID for your component
|
||||
const buffer = new Uint32Array(10);
|
||||
|
||||
return window.crypto.getRandomValues(buffer)[0].toString();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue