Skip to content

Commit 5aaed7c

Browse files
author
Luke Bowerman
authored
FieldPicker example (#1154)
1 parent 58c2ef2 commit 5aaed7c

File tree

2 files changed

+156
-149
lines changed

2 files changed

+156
-149
lines changed

‎storybook/src/Tree/FieldPicker.stories.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import React, { useState } from 'react'
28+
import {
29+
IconButton,
30+
Tooltip,
31+
Tree,
32+
TreeItem,
33+
TreeGroup,
34+
Menu,
35+
MenuDisclosure,
36+
MenuItem,
37+
MenuList,
38+
Space,
39+
HoverDisclosure,
40+
usePopover,
41+
ButtonTransparent,
42+
} from '@looker/components'
43+
44+
const PickerItem = () => {
45+
const [overlay, setOverlay] = useState<string | undefined>(undefined)
46+
47+
const toggleMenu = () =>
48+
overlay === 'menu' ? setOverlay(undefined) : setOverlay('menu')
49+
const togglePopover = () =>
50+
overlay === 'popover' ? setOverlay(undefined) : setOverlay('popover')
51+
const closeOverlay = () => setOverlay(undefined)
52+
53+
const { popover, ref } = usePopover({
54+
content: 'hello world',
55+
isOpen: overlay === 'popover',
56+
setOpen: closeOverlay,
57+
})
58+
59+
const pivot = (
60+
<IconButton
61+
icon="Sync"
62+
label="Pivot"
63+
color="key"
64+
tooltipPlacement="top"
65+
onClick={(event) => {
66+
event.stopPropagation()
67+
alert('Pivot')
68+
}}
69+
onKeyDown={(event) => {
70+
event.stopPropagation()
71+
}}
72+
style={{
73+
background: '#fff',
74+
height: '18px',
75+
}}
76+
/>
77+
)
78+
79+
const itemLabel = (
80+
<Space between px="xxsmall">
81+
<span>Cost</span>
82+
{!overlay ? <HoverDisclosure>{pivot}</HoverDisclosure> : pivot}
83+
</Space>
84+
)
85+
86+
return (
87+
<>
88+
{popover}
89+
<Menu isOpen={overlay === 'menu'} setOpen={closeOverlay}>
90+
<MenuList compact>
91+
<MenuItem>Brie</MenuItem>
92+
<MenuItem>Cheddar</MenuItem>
93+
<MenuItem>Gouda</MenuItem>
94+
</MenuList>
95+
<TreeItem
96+
detail={
97+
<>
98+
<IconButton
99+
ref={ref}
100+
icon="Filter"
101+
label="Filter"
102+
tooltipPlacement="top"
103+
onClick={togglePopover}
104+
/>
105+
<Tooltip
106+
placement="top"
107+
content="Some exciting info or something"
108+
>
109+
<IconButton icon="CircleInfoOutline" label="Info" />
110+
</Tooltip>
111+
<MenuDisclosure>
112+
<IconButton
113+
onClick={toggleMenu}
114+
icon="DotsVert"
115+
label="Options"
116+
tooltipPlacement="top"
117+
/>
118+
</MenuDisclosure>
119+
</>
120+
}
121+
detailHoverDisclosure={!overlay}
122+
selected={!!overlay}
123+
icon="FieldNumber"
124+
>
125+
{itemLabel}
126+
</TreeItem>
127+
</Menu>
128+
</>
129+
)
130+
}
131+
132+
export const FieldPicker = () => (
133+
<Tree
134+
defaultOpen
135+
detailAccessory
136+
detail={
137+
<ButtonTransparent size="xxsmall" iconBefore="Plus">
138+
Add
139+
</ButtonTransparent>
140+
}
141+
label="Custom Fields"
142+
>
143+
<TreeGroup label="DIMENSIONS">
144+
<PickerItem />
145+
<PickerItem />
146+
<PickerItem />
147+
<PickerItem />
148+
</TreeGroup>
149+
</Tree>
150+
)
151+
152+
export default {
153+
component: FieldPicker,
154+
title: 'Tree/FieldPicker',
155+
}

storybook/src/Tree.stories.tsx renamed to storybook/src/Tree/Tree.stories.tsx

Lines changed: 1 addition & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,12 @@
2525
*/
2626

2727
import React from 'react'
28-
import {
29-
ButtonTransparent,
30-
Grid,
31-
IconButton,
32-
Tree,
33-
TreeItem,
34-
TreeGroup,
35-
Space,
36-
HoverDisclosure,
37-
} from '@looker/components'
28+
import { Grid, Tree, TreeItem, TreeGroup } from '@looker/components'
3829

3930
export const All = () => (
4031
<Grid>
4132
<FileSelector />
4233
<FileSelectorClosed />
43-
<FieldPicker />
4434
<Border />
4535
</Grid>
4636
)
@@ -50,17 +40,6 @@ export default {
5040
title: 'Tree',
5141
}
5242

53-
const onClick = () => {
54-
alert("I'm a little teapot")
55-
return false
56-
}
57-
58-
const addButton = (
59-
<ButtonTransparent onClick={onClick} size="xxsmall" iconBefore="Plus">
60-
Add
61-
</ButtonTransparent>
62-
)
63-
6443
export const FileSelector = () => (
6544
<Tree label="thelook" icon="ExploreOutline" defaultOpen>
6645
<Tree label="Orders" icon="VisibilityOutline" defaultOpen>
@@ -113,133 +92,6 @@ export const FileSelectorClosed = () => (
11392
</Tree>
11493
)
11594

116-
const fieldDetailButtons = (
117-
<>
118-
<IconButton icon="Filter" label="Filter" onClick={() => alert('Filter')} />
119-
<IconButton
120-
icon="CircleInfoOutline"
121-
label="Info"
122-
onClick={() => alert('Info')}
123-
/>
124-
<IconButton
125-
icon="DotsVert"
126-
label="Options"
127-
onClick={() => alert('Options')}
128-
/>
129-
</>
130-
)
131-
132-
const FieldLabel = ({ label }: { label: string }) => {
133-
return (
134-
<Space between px="xxsmall">
135-
<span>{label}</span>
136-
<HoverDisclosure>
137-
<IconButton
138-
icon="Sync"
139-
label="Pivot"
140-
color="key"
141-
onClick={(event) => {
142-
event.stopPropagation()
143-
alert('Pivot')
144-
}}
145-
onKeyDown={(event) => {
146-
event.stopPropagation()
147-
}}
148-
style={{
149-
background: '#fff',
150-
height: '18px',
151-
}}
152-
/>
153-
</HoverDisclosure>
154-
</Space>
155-
)
156-
}
157-
158-
export const FieldPicker = () => (
159-
<Tree defaultOpen detailAccessory detail={addButton} label="Custom Fields">
160-
<TreeGroup label="DIMENSIONS">
161-
<TreeItem
162-
detail={fieldDetailButtons}
163-
detailHoverDisclosure
164-
icon="FieldNumber"
165-
onClick={() => {
166-
alert('Clicked on Cost!')
167-
}}
168-
>
169-
<FieldLabel label="Cost" />
170-
</TreeItem>
171-
<Tree label="Created">
172-
<TreeItem detail={fieldDetailButtons} icon="Calendar">
173-
<FieldLabel label="Created Date" />
174-
</TreeItem>
175-
<TreeItem
176-
detail={fieldDetailButtons}
177-
detailHoverDisclosure
178-
icon="Calendar"
179-
>
180-
<FieldLabel label="Created Month" />
181-
</TreeItem>
182-
<TreeItem
183-
detail={fieldDetailButtons}
184-
detailHoverDisclosure
185-
icon="Calendar"
186-
>
187-
<FieldLabel label="Created Year" />
188-
</TreeItem>
189-
<TreeItem
190-
detail={fieldDetailButtons}
191-
detailHoverDisclosure
192-
icon="Calendar"
193-
>
194-
<FieldLabel label="Created Quarter" />
195-
</TreeItem>
196-
</Tree>
197-
<TreeItem
198-
detail={fieldDetailButtons}
199-
icon="FieldLocation"
200-
onClick={() => alert('Clicked on Location!')}
201-
detailHoverDisclosure
202-
>
203-
<FieldLabel label="Location" />
204-
</TreeItem>
205-
<TreeItem
206-
detail={fieldDetailButtons}
207-
detailHoverDisclosure
208-
icon="FieldTier"
209-
onClick={() => alert('Clicked on Tier!')}
210-
>
211-
<FieldLabel label="Tier" />
212-
</TreeItem>
213-
<TreeItem
214-
detail={fieldDetailButtons}
215-
detailHoverDisclosure
216-
icon="FieldYesNo"
217-
onClick={() => alert('Clicked on Yes No!')}
218-
>
219-
<FieldLabel label="Yes No" />
220-
</TreeItem>
221-
</TreeGroup>
222-
<TreeGroup color="warn" label="MEASURES">
223-
<TreeItem
224-
detail={fieldDetailButtons}
225-
detailHoverDisclosure
226-
icon="FieldNumber"
227-
onClick={() => alert('Clicked on Count!')}
228-
>
229-
<FieldLabel label="Count" />
230-
</TreeItem>
231-
<TreeItem
232-
detail={fieldDetailButtons}
233-
detailHoverDisclosure
234-
icon="FieldNumber"
235-
onClick={() => alert('Clicked on Count Distinct!')}
236-
>
237-
<FieldLabel label="Count Distinct" />
238-
</TreeItem>
239-
</TreeGroup>
240-
</Tree>
241-
)
242-
24395
export const Border = () => (
24496
<Tree border label="Orders" defaultOpen>
24597
<Tree label="Orders" defaultOpen>

0 commit comments

Comments
 (0)