|
|
|
import React from 'react';
|
|
|
|
import { SessionToggle } from '../SessionToggle';
|
|
|
|
import {
|
|
|
|
SessionButton,
|
|
|
|
SessionButtonColor,
|
|
|
|
SessionButtonType,
|
|
|
|
} from '../SessionButton';
|
|
|
|
|
|
|
|
export enum SessionSettingType {
|
|
|
|
Toggle = 'toggle',
|
|
|
|
Options = 'options',
|
|
|
|
Button = 'button',
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
title: string;
|
|
|
|
description?: string;
|
|
|
|
type: SessionSettingType;
|
|
|
|
value: boolean | string;
|
|
|
|
onClick?: any;
|
|
|
|
buttonText?: string;
|
|
|
|
buttonColor?: SessionButtonColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class SessionSettingListItem extends React.Component<Props> {
|
|
|
|
public constructor(props: Props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {};
|
|
|
|
}
|
|
|
|
|
|
|
|
public render(): JSX.Element {
|
|
|
|
const {
|
|
|
|
title,
|
|
|
|
description,
|
|
|
|
type,
|
|
|
|
value,
|
|
|
|
onClick,
|
|
|
|
buttonText,
|
|
|
|
buttonColor,
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="session-settings-item">
|
|
|
|
<div className="session-settings-item__info">
|
|
|
|
<div className="session-settings-item__title">{title}</div>
|
|
|
|
|
|
|
|
{description && (
|
|
|
|
<div className="session-settings-item__description">
|
|
|
|
{description}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{type === SessionSettingType.Toggle && (
|
|
|
|
<div className="session-sessings-item__selection">
|
|
|
|
<SessionToggle active={Boolean(value)} onClick={onClick} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{type === SessionSettingType.Button && (
|
|
|
|
<SessionButton
|
|
|
|
text={buttonText}
|
|
|
|
buttonColor={buttonColor}
|
|
|
|
onClick={onClick}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|