50 lines
1.0 KiB
JavaScript
50 lines
1.0 KiB
JavaScript
|
import React from 'react';
|
||
|
import { Field } from 'redux-form';
|
||
|
|
||
|
import {
|
||
|
Row,
|
||
|
Col,
|
||
|
FormGroup,
|
||
|
Input,
|
||
|
FormLabel,
|
||
|
Button
|
||
|
} from 'joyent-ui-toolkit';
|
||
|
|
||
|
export const Toolbar = ({
|
||
|
searchLabel = 'Filter',
|
||
|
searchPlaceholder = '',
|
||
|
searchable = true,
|
||
|
actionLabel = 'Create',
|
||
|
actionable = true,
|
||
|
onActionClick
|
||
|
}) => (
|
||
|
<Row>
|
||
|
<Col xs={7} sm={5}>
|
||
|
<FormGroup name="filter" fluid field={Field}>
|
||
|
<FormLabel>{searchLabel}</FormLabel>
|
||
|
<Input placeholder={searchPlaceholder} disabled={!searchable} fluid />
|
||
|
</FormGroup>
|
||
|
</Col>
|
||
|
<Col xs={5} sm={7}>
|
||
|
<FormGroup right>
|
||
|
<FormLabel>⁣</FormLabel>
|
||
|
<Button
|
||
|
type={onActionClick ? 'button' : 'submit'}
|
||
|
disabled={!searchable || !actionable}
|
||
|
onClick={onActionClick}
|
||
|
icon
|
||
|
fluid
|
||
|
>
|
||
|
{actionLabel}
|
||
|
</Button>
|
||
|
</FormGroup>
|
||
|
</Col>
|
||
|
</Row>
|
||
|
);
|
||
|
|
||
|
export default ({ handleSubmit, ...rest }) => (
|
||
|
<form onSubmit={handleSubmit}>
|
||
|
<Toolbar {...rest} />
|
||
|
</form>
|
||
|
);
|