feat(prototypes): add prototype for custom scrollbar for menu, dialog…

…, popup and list (#1962) * custom scrollbar for menu, dialog, popup and list
microsoft · Oct 17, 2019 · bd5c78b · bd5c78b
1 parent 6db9dfe
commit bd5c78b
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Documentation
 - Fix 'RTL' and 'Theme it' in examples @miroslavstastny ([#2020](https://github.com/stardust-ui/react/pull/2020))
+- Prototype for custom scrollbar for menu, dialog, popup and list @jurokapsiar ([#1962](https://github.com/stardust-ui/react/pull/1962))
 
 ### Performance
 - Remove redundant usages of `Box` component in `Attachment`, `Popup` and `Tooltip` @layershifter ([#2023](https://github.com/stardust-ui/react/pull/2023))

diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
@@ -281,6 +281,11 @@ class Sidebar extends React.Component<any, any> {
         title: { content: 'Chat Messages', as: NavLink, to: '/prototype-chat-messages' },
         public: true,
       },
+      {
+        key: 'customscrollbar',
+        title: { content: 'Custom Scrollbar', as: NavLink, to: '/prototype-custom-scrollbar' },
+        public: true,
+      },
       {
         key: 'customtoolbar',
         title: { content: 'Custom Styled Toolbar', as: NavLink, to: '/prototype-custom-toolbar' },

diff --git a/docs/src/prototypes/customScrollbar/index.tsx b/docs/src/prototypes/customScrollbar/index.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import Scrollbars from 'react-custom-scrollbars'
+import { Text, Menu, List, Button, Popup, Dialog } from '@stardust-ui/react'
+import { PrototypeSection, ComponentPrototype } from '../Prototypes'
+
+const ScrollbarMenuPrototype = () => {
+  const items = [
+    {
+      key: 'with-scrollbar',
+      content: 'Submenu with scrollbar',
+      menu: {
+        as: Scrollbars,
+        items: _.times(50, (i: number) => `Menu Item No. ${i}`),
+        style: { height: '20rem' },
+      },
+    },
+    {
+      key: 'without-scrollbar',
+      content: 'Submenu without scrollbar',
+      menu: _.times(5, (i: number) => `Menu Item No. ${i}`),
+    },
+  ]
+
+  return <Menu items={items} />
+}
+
+const ScrollbarPopupPrototype = () => {
+  const lines = _.times(50, i => <p key={i}>Long long text line {i}</p>)
+
+  return (
+    <Popup
+      trigger={<Button content="Open popup" />}
+      content={{
+        // NOTE: because scrollbars uses an abs positioned container to fake scroll
+        //       the consumer must specify a width/height value to show the scrollable area
+        styles: { width: '20rem' },
+        content: <Scrollbars style={{ height: '20rem' }}>{lines}</Scrollbars>,
+      }}
+    />
+  )
+}
+
+const ScrollbarDialogPrototype = () => {
+  const lines = _.times(50, i => <p key={i}>Long long text line {i}</p>)
+
+  return (
+    <Dialog
+      trigger={<Button content="Open dialog" />}
+      header="Dialog with scrollbar"
+      cancelButton="Close"
+      content={{
+        styles: { width: '100%' },
+        content: <Scrollbars style={{ height: '20rem' }}>{lines}</Scrollbars>,
+      }}
+    />
+  )
+}
+
+const ScrollbarListPrototype = () => {
+  const items = _.times(50, (i: number) => ({
+    header: `Header ${i}`,
+    content: `Content ${i}`,
+    key: `item-${i}`,
+  }))
+
+  return (
+    <Scrollbars style={{ height: '20rem' }}>
+      <List selectable items={items} />
+    </Scrollbars>
+  )
+}
+
+const CustomScrollbarPrototypes: React.FC = () => {
+  return (
+    <PrototypeSection title="Custom Scrollbar">
+      <Text>
+        Note: Stardust does not provide custom scrollbars. It is possible to integrate Stardust
+        components with any custom scrollbars framework.
+      </Text>
+      <ComponentPrototype title="Menu" description="Scrollbar can be integrated in Menu">
+        <ScrollbarMenuPrototype />
+      </ComponentPrototype>
+      <ComponentPrototype title="Popup" description="Scrollbar can be integrated in Popup content">
+        <ScrollbarPopupPrototype />
+      </ComponentPrototype>
+      <ComponentPrototype
+        title="Dialog"
+        description="Scrollbar can be integrated in Dialog content"
+      >
+        <ScrollbarDialogPrototype />
+      </ComponentPrototype>
+      <ComponentPrototype title="List" description="Scrollbar can be integrated in selectable List">
+        <ScrollbarListPrototype />
+      </ComponentPrototype>
+    </PrototypeSection>
+  )
+}
+
+export default CustomScrollbarPrototypes
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
@@ -44,6 +44,7 @@ import NestedPopupsAndDialogsPrototype from './prototypes/NestedPopupsAndDialogs
 import VirtualizedTreePrototype from './prototypes/VirtualizedTree'
 import CopyToClipboardPrototype from './prototypes/CopyToClipboard'
 import ParticipantsListPrototype from './prototypes/ParticipantsList'
+import CustomScrollbarPrototype from './prototypes/customScrollbar'
 import EditorToolbarPrototype from './prototypes/EditorToolbar'
 
 const Routes = () => (
@@ -63,6 +64,7 @@ const Routes = () => (
           <Route exact path="/quick-start" component={QuickStart} />
           <Route exact path="/prototype-chat-pane" component={ChatPanePrototype} />
           <Route exact path="/prototype-chat-messages" component={ChatMessagesPrototype} />
+          <Route exact path="/prototype-custom-scrollbar" component={CustomScrollbarPrototype} />
           <Route exact path="/prototype-custom-toolbar" component={CustomToolbarPrototype} />
           <Route exact path="/prototype-async-shorthand" component={AsyncShorthandPrototype} />
           <Route exact path="/prototype-employee-card" component={EmployeeCardPrototype} />