Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 0df1bae

Browse files
layershifterlayershifter
committed
wip
1 parent aaa33b2 commit 0df1bae

File tree

6 files changed

+131
-298
lines changed

6 files changed

+131
-298
lines changed

‎docs/src/app.tsx‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import * as React from 'react'
22
import { hot } from 'react-hot-loader/root'
3-
import { Provider, Debug, themes } from '@fluentui/react'
43

5-
import { mergeThemes } from '@fluentui/react/src/utils'
6-
import { ThemeContext, ThemeContextData, themeContextDefaults } from './context/ThemeContext'
4+
import { ThemeContextData, themeContextDefaults } from './context/ThemeContext'
75
import Routes from './routes'
8-
import { PerfDataProvider } from './components/ComponentDoc/PerfChart'
96

107
// Experimental dev-time accessibility attributes integrity validation.
118
import { setup } from '@fluentui/ability-attributes'
@@ -24,30 +21,7 @@ class App extends React.Component<any, ThemeContextData> {
2421
}
2522

2623
render() {
27-
const { themeName } = this.state
28-
return (
29-
<ThemeContext.Provider value={this.state}>
30-
<Provider
31-
as={React.Fragment}
32-
theme={mergeThemes(themes.fontAwesome, themes[themeName], {
33-
staticStyles: [
34-
{
35-
a: {
36-
textDecoration: 'none',
37-
},
38-
},
39-
],
40-
})}
41-
>
42-
<PerfDataProvider>
43-
<div>
44-
<Debug />
45-
<Routes />
46-
</div>
47-
</PerfDataProvider>
48-
</Provider>
49-
</ThemeContext.Provider>
50-
)
24+
return <Routes />
5125
}
5226
}
5327

‎docs/src/prototypes/customScrollbar/index.tsx‎

Lines changed: 108 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,121 @@
11
import * as React from 'react'
2-
import * as _ from 'lodash'
3-
import Scrollbars from 'react-custom-scrollbars'
4-
import { Text, Menu, List, Button, Popup, Dialog } from '@fluentui/react'
5-
import { PrototypeSection, ComponentPrototype } from '../Prototypes'
6-
7-
const ScrollbarMenuPrototype = () => {
8-
const items = [
9-
{
10-
key: 'with-scrollbar',
11-
content: 'Submenu with scrollbar',
12-
menu: {
13-
as: Scrollbars,
14-
items: _.times(50, (i: number) => `Menu Item No. ${i}`),
15-
style: { height: '20rem' },
16-
},
17-
},
18-
{
19-
key: 'without-scrollbar',
20-
content: 'Submenu without scrollbar',
21-
menu: _.times(5, (i: number) => `Menu Item No. ${i}`),
22-
},
23-
]
24-
25-
return <Menu items={items} />
26-
}
27-
28-
const ScrollbarPopupPrototype = () => {
29-
const lines = _.times(50, i => <p key={i}>Long long text line {i}</p>)
2+
import { SandboxApp } from '@fluentui/code-sandbox'
3+
import { Button, Flex, Input, Menu, Toolbar, Provider, themes } from '@fluentui/react'
304

5+
const PopupBoard = () => {
6+
const [textValue, updateText] = React.useState('')
7+
React.useLayoutEffect(() => {
8+
// const canvas = document.getElementById("123canvas");
9+
// const ctx = canvas.getContext("2d");
10+
// ctx.fillStyle = "#FFa4a2";
11+
// ctx.fillRect(0, 0, 300, 150);
12+
// ctx.font = "30px TImes New Roman";
13+
// ctx.fillStyle = "black";
14+
// ctx.textAlign = "center";
15+
// ctx.fillText(textValue, canvas.width / 2, canvas.height / 2);
16+
// console.log(textValue);
17+
})
3118
return (
32-
<Popup
33-
trigger={<Button content="Open popup" />}
34-
content={{
35-
// NOTE: because scrollbars uses an abs positioned container to fake scroll
36-
// the consumer must specify a width/height value to show the scrollable area
37-
styles: { width: '20rem' },
38-
content: <Scrollbars style={{ height: '20rem' }}>{lines}</Scrollbars>,
39-
}}
40-
/>
19+
<Flex
20+
vAlign="center"
21+
space="between"
22+
gap="gap.small"
23+
design={{ height: '200px', width: '400px' }}
24+
>
25+
<Menu
26+
fluid
27+
vertical
28+
pointing
29+
defaultActiveIndex={0}
30+
styles={{
31+
borderRightWidth: '0.5px',
32+
borderRightStyle: 'solid',
33+
borderRightColor: '#F6F2F2',
34+
padding: '0px',
35+
margin: '0px',
36+
}}
37+
items={[
38+
{ content: 'Apples', key: 'a' },
39+
{ content: 'Oranges', key: 'o' },
40+
]}
41+
/>
42+
<Flex column padding="padding.medium" gap="gap.medium">
43+
{/* <Flex.Item> */}
44+
{/* <canvas id="123canvas" style={{ width: "100%" }} /> */}
45+
{/* </Flex.Item> */}
46+
<Flex>
47+
<Input
48+
value={textValue}
49+
onChange={e => updateText(e.target.value)}
50+
fluid
51+
input={{
52+
as: 'textarea',
53+
rows: '4',
54+
styles: { resize: 'none', width: '100%' },
55+
}}
56+
/>
57+
</Flex>
58+
<Flex.Item>
59+
<Flex gap="gap.small">
60+
<Flex.Item>
61+
<Button content="Done" primary />
62+
</Flex.Item>
63+
<Flex.Item>
64+
<Button content="Cancel" />
65+
</Flex.Item>
66+
</Flex>
67+
</Flex.Item>
68+
</Flex>
69+
</Flex>
4170
)
4271
}
4372

44-
const ScrollbarDialogPrototype = () => {
45-
const lines = _.times(50, i => <p key={i}>Long long text line {i}</p>)
46-
73+
const BodyWrap = () => {
4774
return (
48-
<Dialog
49-
trigger={<Button content="Open dialog" />}
50-
header="Dialog with scrollbar"
51-
cancelButton="Close"
52-
content={{
53-
styles: { width: '100%' },
54-
content: <Scrollbars style={{ height: '20rem' }}>{lines}</Scrollbars>,
55-
}}
56-
/>
57-
)
58-
}
75+
<SandboxApp>
76+
<Provider theme={themes.teams} styles={{ padding: '2rem' }} rtl>
77+
<Flex
78+
vAlign="end"
79+
style={{
80+
backgroundColor: '#B8887D',
81+
height: '50%',
82+
width: '80%',
5983

60-
const ScrollbarListPrototype = () => {
61-
const items = _.times(50, (i: number) => ({
62-
header: `Header ${i}`,
63-
content: `Content ${i}`,
64-
key: `item-${i}`,
65-
}))
84+
// height: '400px',
85+
// width: '400px',
6686

67-
return (
68-
<Scrollbars style={{ height: '20rem' }}>
69-
<List selectable items={items} />
70-
</Scrollbars>
87+
position: 'fixed',
88+
}}
89+
>
90+
<Flex
91+
style={{
92+
height: '20px',
93+
backgroundColor: '#F5E8E5',
94+
width: '100%',
95+
}}
96+
>
97+
<Toolbar
98+
items={[
99+
{
100+
key: 'read',
101+
style: { width: '100px', border: '1px solid red' },
102+
icon: 'read-aloud',
103+
popup: { content: <PopupBoard /> },
104+
},
105+
]}
106+
/>
107+
</Flex>
108+
</Flex>
109+
</Provider>
110+
</SandboxApp>
71111
)
72112
}
73113

74-
const CustomScrollbarPrototypes: React.FC = () => {
75-
return (
76-
<PrototypeSection title="Custom Scrollbar">
77-
<Text>
78-
Note: Stardust does not provide custom scrollbars. It is possible to integrate Stardust
79-
components with any custom scrollbars framework.
80-
</Text>
81-
<ComponentPrototype title="Menu" description="Scrollbar can be integrated in Menu">
82-
<ScrollbarMenuPrototype />
83-
</ComponentPrototype>
84-
<ComponentPrototype title="Popup" description="Scrollbar can be integrated in Popup content">
85-
<ScrollbarPopupPrototype />
86-
</ComponentPrototype>
87-
<ComponentPrototype
88-
title="Dialog"
89-
description="Scrollbar can be integrated in Dialog content"
90-
>
91-
<ScrollbarDialogPrototype />
92-
</ComponentPrototype>
93-
<ComponentPrototype title="List" description="Scrollbar can be integrated in selectable List">
94-
<ScrollbarListPrototype />
95-
</ComponentPrototype>
96-
</PrototypeSection>
97-
)
98-
}
114+
const PopupExampleInline = () => (
115+
<>
116+
{/* <Popup trigger={<Button icon="more" />} content={<PopupBoard />} /> */}
117+
<BodyWrap />
118+
</>
119+
)
99120

100-
export default CustomScrollbarPrototypes
121+
export default PopupExampleInline

‎docs/src/routes.tsx‎

Lines changed: 2 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,11 @@
11
import * as React from 'react'
2-
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
2+
import { BrowserRouter, Route } from 'react-router-dom'
33

4-
import ExternalExampleLayout from './components/ExternalExampleLayout'
5-
import DocsLayout from './components/DocsLayout'
6-
import DocsRoot from './components/DocsRoot'
7-
import DocsBehaviorRoot from './components/DocsBehaviorRoot'
8-
import MarkdownPage from 'docs/src/components/MarkdownPage'
9-
10-
import * as Composition from './pages/Composition.mdx'
11-
import * as Layout from './pages/Layout.mdx'
12-
import Accessibility from './views/Accessibility'
13-
import Colors from './views/Colors'
14-
import ColorPalette from './views/ColorPalette'
15-
import CategoryColorPalette from './views/CategoryColorPalette'
16-
import ColorSchemes from './views/ColorSchemes'
17-
import CategoryColorSchemes from './views/CategoryColorSchemes'
18-
19-
import FAQ from './views/FAQ'
20-
import Performance from './views/Performance'
21-
import * as ShorthandProps from './pages/ShorthandProps.mdx'
22-
import Introduction from './views/Introduction'
23-
import PageNotFound from './views/PageNotFound'
24-
import QuickStart from './views/QuickStart'
25-
import Theming from './views/Theming'
26-
import ThemingExamples from './views/ThemingExamples'
27-
import IntegrateCustomComponents from './views/IntegrateCustomComponents'
28-
import AccessibilityBehaviors from './views/AccessibilityBehaviors'
29-
import FocusZone from './views/FocusZoneDoc'
30-
import FocusTrapZone from './views/FocusTrapZoneDoc'
31-
import AutoFocusZone from './views/AutoFocusZoneDoc'
32-
import CustomToolbarPrototype from './prototypes/customToolbar'
33-
import ChatPanePrototype from './prototypes/chatPane'
34-
import ChatMessagesPrototype from './prototypes/chatMessages'
35-
import AsyncShorthandPrototype from './prototypes/AsyncShorthand'
36-
import EmployeeCardPrototype from './prototypes/employeeCard'
37-
import MeetingOptionsPrototype from './prototypes/meetingOptions'
38-
import SearchPagePrototype from './prototypes/SearchPage'
39-
import MentionsPrototype from './prototypes/mentions'
40-
import DropdownsPrototype from './prototypes/dropdowns'
41-
import PopupsPrototype from './prototypes/popups'
42-
import IconViewerPrototype from './prototypes/IconViewer'
43-
import AlertsPrototype from './prototypes/alerts'
44-
import NestedPopupsAndDialogsPrototype from './prototypes/NestedPopupsAndDialogs'
45-
import VirtualizedTreePrototype from './prototypes/VirtualizedTree'
46-
import CopyToClipboardPrototype from './prototypes/CopyToClipboard'
47-
import ParticipantsListPrototype from './prototypes/ParticipantsList'
484
import CustomScrollbarPrototype from './prototypes/customScrollbar'
49-
import EditorToolbarPrototype from './prototypes/EditorToolbar'
50-
import HexagonalAvatarPrototype from './prototypes/hexagonalAvatar'
515

526
const Routes = () => (
537
<BrowserRouter basename={__BASENAME__}>
54-
<Switch>
55-
<Route exact path="/maximize/:exampleName/:rtl?" component={ExternalExampleLayout} />
56-
<DocsLayout>
57-
<Switch>
58-
<Route exact path="/" component={Introduction} />
59-
<Route exact path="/components/:name/:tab" component={DocsRoot} sidebar />
60-
<Route
61-
exact
62-
path="/components/:name"
63-
render={routeProps => <Redirect to={`${routeProps.location.pathname}/definition`} />}
64-
/>
65-
<Route exact path="/behaviors/:name" component={DocsBehaviorRoot} sidebar />
66-
<Route exact path="/quick-start" component={QuickStart} />
67-
<Route exact path="/prototype-chat-pane" component={ChatPanePrototype} />
68-
<Route exact path="/prototype-chat-messages" component={ChatMessagesPrototype} />
69-
<Route exact path="/prototype-custom-scrollbar" component={CustomScrollbarPrototype} />
70-
<Route exact path="/prototype-custom-toolbar" component={CustomToolbarPrototype} />
71-
<Route exact path="/prototype-async-shorthand" component={AsyncShorthandPrototype} />
72-
<Route exact path="/prototype-employee-card" component={EmployeeCardPrototype} />
73-
<Route exact path="/prototype-meeting-options" component={MeetingOptionsPrototype} />
74-
<Route exact path="/prototype-participants-list" component={ParticipantsListPrototype} />
75-
<Route exact path="/prototype-search-page" component={SearchPagePrototype} />
76-
<Route exact path="/prototype-mentions" component={MentionsPrototype} />
77-
<Route exact path="/prototype-dropdowns" component={DropdownsPrototype} />
78-
<Route exact path="/prototype-popups" component={PopupsPrototype} />
79-
<Route exact path="/icon-viewer" component={IconViewerPrototype} />
80-
<Route exact path="/prototype-alerts" component={AlertsPrototype} />
81-
<Route exact path="/prototype-editor-toolbar" component={EditorToolbarPrototype} />
82-
<Route exact path="/prototype-hexagonal-avatar" component={HexagonalAvatarPrototype} />
83-
<Route
84-
exact
85-
path="/prototype-nested-popups-and-dialogs"
86-
component={NestedPopupsAndDialogsPrototype}
87-
/>
88-
<Route exact path="/virtualized-tree" component={VirtualizedTreePrototype} />
89-
<Route exact path="/prototype-copy-to-clipboard" component={CopyToClipboardPrototype} />
90-
<Route exact path="/faq" component={FAQ} />
91-
<Route exact path="/accessibility" component={Accessibility} />
92-
<Route exact path="/accessibility-behaviors" component={AccessibilityBehaviors} />
93-
<Route exact path="/focus-zone" component={FocusZone} />
94-
<Route exact path="/focus-trap-zone" component={FocusTrapZone} />
95-
<Route exact path="/auto-focus-zone" component={AutoFocusZone} />
96-
<Route exact path="/theming" component={Theming} />
97-
<Route exact path="/theming-examples" component={ThemingExamples} />
98-
<Route exact path="/layout">
99-
<MarkdownPage page={Layout} />
100-
</Route>
101-
<Route exact path="/shorthand-props">
102-
<MarkdownPage page={ShorthandProps} />
103-
</Route>
104-
<Route exact path="/integrate-custom-components" component={IntegrateCustomComponents} />
105-
<Route exact path="/performance" component={Performance} />
106-
<Route exact path="/composition">
107-
<MarkdownPage page={Composition} />
108-
</Route>
109-
<Route exact path="/colors" component={Colors} />
110-
<Route exact path="/color-palette" component={ColorPalette} />
111-
<Route exact path="/color-palette-category" component={CategoryColorPalette} />
112-
<Route exact path="/color-schemes" component={ColorSchemes} />
113-
<Route exact path="/color-schemes-category" component={CategoryColorSchemes} />
114-
<Route exact path="/*" component={PageNotFound} />
115-
</Switch>
116-
</DocsLayout>
117-
</Switch>
8+
<Route exact path="/prototype-custom-scrollbar" component={CustomScrollbarPrototype} />
1189
</BrowserRouter>
11910
)
12011

0 commit comments

Comments
 (0)