diff --git a/src/plugins/TableNativePlugin.js b/src/plugins/TableNativePlugin.js index 907cd9fb6..71d5b3945 100644 --- a/src/plugins/TableNativePlugin.js +++ b/src/plugins/TableNativePlugin.js @@ -14,6 +14,7 @@ import { Toolbar, Spacer, Button, + Select, } from 'flipper'; import ErrorBlock from '../ui/components/ErrorBlock'; import FlexColumn from '../ui/components/FlexColumn'; @@ -36,6 +37,8 @@ import type { type ID = string; type TableMetadata = { + topToolbar?: ToolbarSection, + bottomToolbar?: ToolbarSection, columns: TableColumns, columnSizes?: TableColumnSizes, columnOrder?: Array, @@ -74,8 +77,18 @@ type JsonSection = { }; type ToolbarSection = { type: 'toolbar', - items: [{type: 'link', destination: string, label: string}], + items: Array, }; +type ToolbarItem = + | {type: 'link', destination: string, label: string} + | { + type: 'input', + inputType: 'select', + id: string, + label: string, + options: Array, + value: string, + }; const NonWrappingText = styled(Text)({ overflow: 'hidden', @@ -97,6 +110,15 @@ const BooleanValue = styled(NonWrappingText)(props => ({ }, })); +const Label = styled('Span')({ + fontSize: 12, + color: '#90949c', + fontWeight: 'bold', + textTransform: 'uppercase', + marginLeft: 5, + marginRight: 12, +}); + function renderValue({type, value}: {type: string, value: any}) { switch (type) { case 'boolean': @@ -153,6 +175,18 @@ function renderToolbar(section: ToolbarSection) { {item.label} ); + case 'input': + return [ + , +