2016-12-09 22:11:05 +01:00
|
|
|
const React = require('react');
|
2016-12-10 11:47:25 +01:00
|
|
|
const {
|
|
|
|
List, ListItem, ListItemContent,
|
|
|
|
Button, Icon,
|
2016-12-10 12:21:27 +01:00
|
|
|
Switch,
|
2016-12-10 11:47:25 +01:00
|
|
|
} = require('react-mdl');
|
2016-12-09 22:11:05 +01:00
|
|
|
const { Link } = require('react-router');
|
|
|
|
|
|
|
|
export const AppsLinkList = ({ apps }) => (
|
|
|
|
<List style={{ textAlign: 'left' }}>
|
|
|
|
{apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
|
|
|
|
<ListItem twoLine key={appName}>
|
|
|
|
<ListItemContent avatar={icon} subtitle={description}>
|
|
|
|
<Link key={appName} to={`/applications/${appName}`}>
|
|
|
|
{appName}
|
|
|
|
</Link>
|
|
|
|
</ListItemContent>
|
|
|
|
</ListItem>
|
|
|
|
))}
|
|
|
|
</List>
|
|
|
|
);
|
|
|
|
|
2016-12-10 11:47:25 +01:00
|
|
|
export const HeaderTitle = ({ title, actions, subtitle }) => (
|
2016-12-10 12:21:27 +01:00
|
|
|
<div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}>
|
|
|
|
<div style={{ flex: '1' }}>
|
|
|
|
<h6 style={{ margin: 0 }}>{title}</h6>
|
|
|
|
{subtitle && <small>{subtitle}</small>}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style={{ flex: '1', textAlign: 'right' }}>
|
|
|
|
{actions}
|
|
|
|
</div>
|
|
|
|
</div>
|
2016-12-10 11:47:25 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
export const FormButtons = ({ submitText = 'Create', onCancel }) => (
|
|
|
|
<div>
|
|
|
|
<Button type="submit" ripple raised primary icon="add">
|
|
|
|
<Icon name="add" />
|
|
|
|
{ submitText }
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
<Button type="cancel" ripple raised onClick={onCancel} style={{ float: 'right' }}>
|
|
|
|
<Icon name="cancel" />
|
|
|
|
Cancel
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
);
|
2016-12-10 12:21:27 +01:00
|
|
|
|
|
|
|
export const SwitchWithLabel = ({ onChange, children, checked }) => (
|
|
|
|
<span>
|
|
|
|
<span style={{ cursor: 'pointer', display: 'inline-block', width: '45px' }}>
|
|
|
|
<Switch onChange={onChange} checked={checked} />
|
|
|
|
</span>
|
|
|
|
<span>{children}</span>
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
2016-12-10 13:49:22 +01:00
|
|
|
export const TogglesLinkList = ({ toggles }) => (
|
|
|
|
<List style={{ textAlign: 'left' }}>
|
|
|
|
{toggles.length > 0 && toggles.map(({ name, description = '-', icon = 'toggle' }) => (
|
|
|
|
<ListItem twoLine key={name}>
|
|
|
|
<ListItemContent avatar={icon} subtitle={description}>
|
2016-12-10 13:54:02 +01:00
|
|
|
<Link key={name} to={`/features/edit/${name}`}>
|
2016-12-10 13:49:22 +01:00
|
|
|
{name}
|
|
|
|
</Link>
|
|
|
|
</ListItemContent>
|
|
|
|
</ListItem>
|
|
|
|
))}
|
|
|
|
</List>
|
|
|
|
);
|
2016-12-10 14:02:41 +01:00
|
|
|
|
|
|
|
export function getIcon (type) {
|
|
|
|
switch (type) {
|
|
|
|
case 'feature-updated': return 'autorenew';
|
|
|
|
case 'feature-created': return 'add';
|
|
|
|
case 'feature-deleted': return 'remove';
|
|
|
|
case 'feature-archived': return 'archived';
|
|
|
|
default: return 'star';
|
|
|
|
}
|
|
|
|
};
|