From 5ceb85a06a55a5833b79333699238ec41a56fd6f Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Thu, 20 Sep 2018 10:41:58 +0530 Subject: [PATCH 01/25] feat(ContextualMenu): base implementation --- .../Types/ContextualMenuExample.shorthand.tsx | 120 ++++++++++++++++++ .../Types/ContextualMenuExample.tsx | 114 +++++++++++++++++ .../components/ContextualMenu/Types/index.tsx | 15 +++ .../components/ContextualMenu/index.tsx | 10 ++ .../ContextualMenu/ContextualMenu.tsx | 72 +++++++++++ src/components/ContextualMenu/index.tsx | 1 + src/index.ts | 1 + src/themes/teams/componentStyles.ts | 2 + src/themes/teams/componentVariables.ts | 2 + .../ContextualMenu/ContextualMenuStyles.tsx | 22 ++++ .../ContextualMenuVariables.tsx | 15 +++ .../components/Popup/popupContentVariables.ts | 2 +- tslint.json | 2 +- 13 files changed, 376 insertions(+), 2 deletions(-) create mode 100644 docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx create mode 100644 docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx create mode 100644 docs/src/examples/components/ContextualMenu/Types/index.tsx create mode 100644 docs/src/examples/components/ContextualMenu/index.tsx create mode 100644 src/components/ContextualMenu/ContextualMenu.tsx create mode 100644 src/components/ContextualMenu/index.tsx create mode 100644 src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx create mode 100644 src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx new file mode 100644 index 0000000000..ac3cdfadae --- /dev/null +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -0,0 +1,120 @@ +import React from 'react' +import { ContextualMenu, Popup, Menu, Button, Avatar, Icon } from '@stardust-ui/react' + +const subb_items = [ + { + key: 'editorials', + content: 'Editorials', + onClick: () => { + alert('hel') + }, + }, + { key: 'review', content: 'Reviews' }, + { + key: 'events', + content: ( + gopal

} content={'jdfngkjdfbgkjdfdfjb'} /> + ), + }, +] + +const menuItemStyle = { + root: { padding: '0px', margin: '0px', minHeight: '50px', borderRadius: '0%' }, + anchor: { padding: '0px' }, +} + +const triggerStyle = { + padding: '15px', +} + +const sub_items = [ + { + key: 'editorials', + styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + content: 'Editorials', + onClick: () => { + alert('hel') + }, + }, + { key: 'review', styles: { ...menuItemStyle, anchor: { padding: '15px' } }, content: 'Reviews' }, + { + key: 'events', + styles: menuItemStyle, + content: ( + Events} + content={} + /> + ), + }, +] + +const items = [ + { + key: 'editorials', + styles: menuItemStyle, + content: ( +
+ + Gopal Goel +
+ ), + onClick: () => { + alert('hel') + }, + }, + { + key: 'review', + icon: 'search', + content: 'Search in channel', + styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + }, + { + key: 'events', + styles: menuItemStyle, + content: ( + Submenu 1} + content={} + /> + ), + }, + { + key: 'events', + styles: menuItemStyle, + content: ( + Submenu 2} + content={} + /> + ), + }, +] + +const ContextualMenuExample = () => ( + + } + content={} + /> + } + /> +) + +export default ContextualMenuExample diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx new file mode 100644 index 0000000000..96f2d22153 --- /dev/null +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx @@ -0,0 +1,114 @@ +import React from 'react' +import { ContextualMenu, Popup, Menu, Button, Avatar, Icon } from '@stardust-ui/react' + +const subb_items = [ + { + key: 'editorials', + content: 'Editorials', + onClick: () => { + alert('hel') + }, + }, + { key: 'review', content: 'Reviews' }, + { + key: 'events', + content: ( + gopal

} content={'jdfngkjdfbgkjdfdfjb'} /> + ), + }, +] + +const sub_items = [ + { + key: 'editorials', + content: 'Editorials', + onClick: () => { + alert('hel') + }, + }, + { key: 'review', content: 'Reviews' }, + { + key: 'events', + content: ( + gopal

} + content={ + // 'jdfngkjdfbgkjdfdfjb' + + } + /> + ), + }, +] + +const items = [ + { + key: 'editorials', + content: ( +
+ + Gopal Goel +
+ ), + onClick: () => { + alert('hel') + }, + }, + { + key: 'review', + content: ( +
+ + Show in channel +
+ ), + }, + { + key: 'events', + content: ( + gopal

} + content={ + // 'jdfngkjdfbgkjdfdfjb' + + } + /> + ), + }, + { + key: 'events', + content: ( + gopal

} + content={ + // 'jdfngkjdfbgkjdfdfjb' + + } + /> + ), + }, +] + +const ContextualMenuExample = () => ( + + + } + content={} + /> + +) + +export default ContextualMenuExample diff --git a/docs/src/examples/components/ContextualMenu/Types/index.tsx b/docs/src/examples/components/ContextualMenu/Types/index.tsx new file mode 100644 index 0000000000..8f5550520a --- /dev/null +++ b/docs/src/examples/components/ContextualMenu/Types/index.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' + +const Types = () => ( + + + +) + +export default Types diff --git a/docs/src/examples/components/ContextualMenu/index.tsx b/docs/src/examples/components/ContextualMenu/index.tsx new file mode 100644 index 0000000000..312112f9c6 --- /dev/null +++ b/docs/src/examples/components/ContextualMenu/index.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import Types from './Types' + +const ContextualMenuExamples = () => ( +
+ +
+) + +export default ContextualMenuExamples diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx new file mode 100644 index 0000000000..565fed7a20 --- /dev/null +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -0,0 +1,72 @@ +import * as PropTypes from 'prop-types' +import * as React from 'react' +import ReactNode = React.ReactNode +import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib' +import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme' +import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' +import Popup from '../Popup/Popup' +import Button from '../Button' +import Menu from '../Menu' + +export interface IContextualMenuProps { + as?: any + className?: string + children?: ReactChildren + content?: ItemShorthand | ItemShorthand[] + styles?: IComponentPartStylesInput + variables?: ComponentVariablesInput +} + +/** + * A contextualMenu. + * @accessibility This is example usage of the accessibility tag. + * This should be replaced with the actual description after the PR is merged + */ +class ContextualMenu extends UIComponent, any> { + public static displayName = 'ContextualMenu' + + public static className = 'ui-contextualMenu' + + public static propTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** Primary content. */ + children: PropTypes.node, + + /** Additional classes. */ + className: PropTypes.string, + + /** Shorthand for primary content. */ + content: customPropTypes.every([ + customPropTypes.disallow(['children']), + PropTypes.oneOfType([ + PropTypes.arrayOf(customPropTypes.itemShorthand), + customPropTypes.itemShorthand, + ]), + ]), + + /** Custom styles to be applied for component. */ + styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + + /** Custom variables to be applied for component. */ + variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + } + + public static handledProps = ['as', 'children', 'className', 'content', 'styles', 'variables'] + + public static defaultProps = { + as: 'div', + } + + public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { + const { children, content } = this.props + return ( + + {childrenExist(children) ? children : content} + + ) + } +} + +export default ContextualMenu diff --git a/src/components/ContextualMenu/index.tsx b/src/components/ContextualMenu/index.tsx new file mode 100644 index 0000000000..578b6138c9 --- /dev/null +++ b/src/components/ContextualMenu/index.tsx @@ -0,0 +1 @@ +export { default } from './ContextualMenu' diff --git a/src/index.ts b/src/index.ts index 28c50034b1..1ab0823da8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,6 +10,7 @@ export { ButtonGroup } from './components/Button' export { default as Chat } from './components/Chat' export { ChatItem } from './components/Chat' export { ChatMessage } from './components/Chat' +export { default as ContextualMenu } from './components/ContextualMenu' export { default as Divider } from './components/Divider' export { default as Grid } from './components/Grid' export { default as Header } from './components/Header' diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts index b136c379f4..0796825004 100644 --- a/src/themes/teams/componentStyles.ts +++ b/src/themes/teams/componentStyles.ts @@ -13,6 +13,8 @@ export { default as Chat } from './components/Chat/chatStyles' export { default as ChatItem } from './components/Chat/chatItemStyles' export { default as ChatMessage } from './components/Chat/chatMessageStyles' +export { default as ContextualMenu } from './components/ContextualMenu/contextualMenuStyles' + export { default as Divider } from './components/Divider/dividerStyles' export { default as Header } from './components/Header/headerStyles' diff --git a/src/themes/teams/componentVariables.ts b/src/themes/teams/componentVariables.ts index df10e0a02a..f7b2cbb975 100644 --- a/src/themes/teams/componentVariables.ts +++ b/src/themes/teams/componentVariables.ts @@ -13,6 +13,8 @@ export { default as ChatItem } from './components/Chat/chatItemVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' +export { default as ContextualMenu } from './components/ContextualMenu/contextualMenuVariables' + export { default as Divider } from './components/Divider/dividerVariables' export { default as Grid } from './components/Grid/gridVariables' diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx new file mode 100644 index 0000000000..ca5410703e --- /dev/null +++ b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx @@ -0,0 +1,22 @@ +import { IContextualMenuVariables } from './contextualMenuVariables' +import { IComponentPartStylesInput, ICSSInJSStyle, IProps } from '../../../../../types/theme' + +const contextualMenuStyles: IComponentPartStylesInput = { + root: ({ + props, + variables: { height, width, padding }, + }: { + props: IProps + variables: IContextualMenuVariables + }): ICSSInJSStyle => { + const styles = { + height, + width, + padding, + } + + return styles + }, +} + +export default contextualMenuStyles diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx b/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx new file mode 100644 index 0000000000..97847b9e68 --- /dev/null +++ b/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx @@ -0,0 +1,15 @@ +export interface IContextualMenuVariables { + height: string + width: string + defaultColumnCount: number + contextualMenuGap?: string + padding?: string +} + +export default (): IContextualMenuVariables => ({ + height: '100%', + width: '100%', + defaultColumnCount: 5, + contextualMenuGap: undefined, + padding: undefined, +}) diff --git a/src/themes/teams/components/Popup/popupContentVariables.ts b/src/themes/teams/components/Popup/popupContentVariables.ts index a5724e0e17..0009a768ef 100644 --- a/src/themes/teams/components/Popup/popupContentVariables.ts +++ b/src/themes/teams/components/Popup/popupContentVariables.ts @@ -13,7 +13,7 @@ export default (siteVars: any): IPopupContentVariables => { return { backgroundColor: siteVars.white, borderColor: siteVars.gray06, - padding: `${pxToRem(10)} ${pxToRem(14)}`, + padding: `${pxToRem(0)} ${pxToRem(0)}`, zIndex: 1000, } } diff --git a/tslint.json b/tslint.json index 435283d1f1..dde0b7be4f 100644 --- a/tslint.json +++ b/tslint.json @@ -4,7 +4,7 @@ "arrow-parens": false, "align": [false], "import-name": [false], - "linebreak-style": [true, "LF"], + "linebreak-style": [false, "LF"], "max-line-length": [false], "no-increment-decrement": false, "no-unused-variable": true, From 93d2042e7c9d97d756bc84b6250e3b2f299ba10f Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Fri, 21 Sep 2018 13:50:25 +0530 Subject: [PATCH 02/25] temp --- .../Types/ContextualMenuExample.shorthand.tsx | 147 +++++------------- .../Types/ContextualMenuExample.tsx | 114 -------------- .../ContextualMenu/ContextualMenu.tsx | 142 ++++++++++++++++- .../ContextualMenu/ContextualMenuStyles.tsx | 5 +- .../ContextualMenuVariables.tsx | 4 +- 5 files changed, 182 insertions(+), 230 deletions(-) delete mode 100644 docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index ac3cdfadae..3cc1df755f 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -1,120 +1,45 @@ import React from 'react' -import { ContextualMenu, Popup, Menu, Button, Avatar, Icon } from '@stardust-ui/react' - -const subb_items = [ - { - key: 'editorials', - content: 'Editorials', - onClick: () => { - alert('hel') - }, - }, - { key: 'review', content: 'Reviews' }, - { - key: 'events', - content: ( - gopal

} content={'jdfngkjdfbgkjdfdfjb'} /> - ), - }, -] - -const menuItemStyle = { - root: { padding: '0px', margin: '0px', minHeight: '50px', borderRadius: '0%' }, - anchor: { padding: '0px' }, -} - -const triggerStyle = { - padding: '15px', -} - -const sub_items = [ - { - key: 'editorials', - styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - content: 'Editorials', - onClick: () => { - alert('hel') - }, - }, - { key: 'review', styles: { ...menuItemStyle, anchor: { padding: '15px' } }, content: 'Reviews' }, - { - key: 'events', - styles: menuItemStyle, - content: ( - Events} - content={} - /> - ), - }, -] +import { ContextualMenu } from '@stardust-ui/react' const items = [ { - key: 'editorials', - styles: menuItemStyle, - content: ( -
- - Gopal Goel -
- ), - onClick: () => { - alert('hel') - }, - }, - { - key: 'review', - icon: 'search', - content: 'Search in channel', - styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - }, - { - key: 'events', - styles: menuItemStyle, - content: ( - Submenu 1} - content={} - /> - ), - }, - { - key: 'events', - styles: menuItemStyle, - content: ( - Submenu 2} - content={} - /> - ), + key: 'personDescription', + content:
Gopal Goel
, + }, + { + key: 'menuItem1', + content: 'Show in channel', + }, + { + key: 'menuItem2', + content: 'Submenu 1', + submenuItems: [ + { + key: 'subItem0', + content: 'Subitem 0', + }, + { + key: 'subItem1', + content: 'Subitem 1', + }, + ], + }, + { + key: 'menuItem3', + content: 'Submenu 2', + submenuItems: [ + { + key: 'subItem0', + content: 'Subitem 0', + }, + { + key: 'subItem1', + content: 'Subitem 1', + }, + ], }, ] -const ContextualMenuExample = () => ( - - } - content={} - /> - } - /> -) +const ContextualMenuExample = () => export default ContextualMenuExample diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx deleted file mode 100644 index 96f2d22153..0000000000 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react' -import { ContextualMenu, Popup, Menu, Button, Avatar, Icon } from '@stardust-ui/react' - -const subb_items = [ - { - key: 'editorials', - content: 'Editorials', - onClick: () => { - alert('hel') - }, - }, - { key: 'review', content: 'Reviews' }, - { - key: 'events', - content: ( - gopal

} content={'jdfngkjdfbgkjdfdfjb'} /> - ), - }, -] - -const sub_items = [ - { - key: 'editorials', - content: 'Editorials', - onClick: () => { - alert('hel') - }, - }, - { key: 'review', content: 'Reviews' }, - { - key: 'events', - content: ( - gopal

} - content={ - // 'jdfngkjdfbgkjdfdfjb' - - } - /> - ), - }, -] - -const items = [ - { - key: 'editorials', - content: ( -
- - Gopal Goel -
- ), - onClick: () => { - alert('hel') - }, - }, - { - key: 'review', - content: ( -
- - Show in channel -
- ), - }, - { - key: 'events', - content: ( - gopal

} - content={ - // 'jdfngkjdfbgkjdfdfjb' - - } - /> - ), - }, - { - key: 'events', - content: ( - gopal

} - content={ - // 'jdfngkjdfbgkjdfdfjb' - - } - /> - ), - }, -] - -const ContextualMenuExample = () => ( - - - } - content={} - /> - -) - -export default ContextualMenuExample diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 565fed7a20..119db5008a 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -7,6 +7,7 @@ import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' import Popup from '../Popup/Popup' import Button from '../Button' import Menu from '../Menu' +import { Avatar, Icon } from '@stardust-ui/react' export interface IContextualMenuProps { as?: any @@ -59,11 +60,150 @@ class ContextualMenu extends UIComponent, any> as: 'div', } + public renderItems = items => { + const menuItemStyle = { + root: { padding: '0px', margin: '0px', minHeight: '50px', borderRadius: '0%' }, + anchor: { padding: '0px' }, + } + const triggerStyle = { + padding: '15px', + } + return items.map(item => { + item.styles = menuItemStyle + }) + } + public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { const { children, content } = this.props + const menuItemStyle = { + root: { padding: '0px', margin: '0px', borderRadius: '0%' }, + anchor: { padding: '0px', minHeight: '50px' }, + } + const triggerStyle = { + padding: '15px', + } + const sub_sub_items = [ + { + key: 'editorials', + styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, + content: 'Editorials', + }, + { + key: 'review', + styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + content: 'Reviews', + onClick: () => { + alert('hel') + }, + }, + { + key: 'events', + styles: menuItemStyle, + content: ( + Events} + content={'goapl'} + /> + ), + }, + ] + const sub_items = [ + { + key: 'editorials', + styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, + content: 'Editorials', + }, + { + key: 'review', + styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + content: 'Reviews', + onClick: () => { + alert('hel') + }, + }, + { + key: 'events', + styles: menuItemStyle, + content: ( + Events} + content={ + + } + /> + ), + }, + ] + const items = [ + { + key: 'editorials', + styles: menuItemStyle, + content: ( +
+ + Gopal Goel +
+ ), + }, + { + key: 'review', + icon: 'search', + content: 'Click for callback', + styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + onClick: () => { + alert('Callback clicked...') + }, + }, + { + key: 'events', + styles: menuItemStyle, + content: ( + Submenu 1} + content={ + + } + /> + ), + }, + { + key: 'events', + styles: menuItemStyle, + content: ( + Submenu 2} + content={ + + } + /> + ), + }, + ] return ( - {childrenExist(children) ? children : content} + {/* {childrenExist(children) ? children : content} */} + {/* + } + content={} + /> */} + ) } diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx index ca5410703e..0ca6a238eb 100644 --- a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx +++ b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx @@ -4,15 +4,16 @@ import { IComponentPartStylesInput, ICSSInJSStyle, IProps } from '../../../../.. const contextualMenuStyles: IComponentPartStylesInput = { root: ({ props, - variables: { height, width, padding }, + variables: { height, maxWidth, padding }, }: { props: IProps variables: IContextualMenuVariables }): ICSSInJSStyle => { const styles = { height, - width, + maxWidth, padding, + border: '1px solid #eeeeee', } return styles diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx b/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx index 97847b9e68..f2de04d9f4 100644 --- a/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx +++ b/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx @@ -1,6 +1,6 @@ export interface IContextualMenuVariables { height: string - width: string + maxWidth: string defaultColumnCount: number contextualMenuGap?: string padding?: string @@ -8,7 +8,7 @@ export interface IContextualMenuVariables { export default (): IContextualMenuVariables => ({ height: '100%', - width: '100%', + maxWidth: '200px', defaultColumnCount: 5, contextualMenuGap: undefined, padding: undefined, From e9db6e346757b081e5444bd48d84a2120c535486 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 24 Sep 2018 11:37:45 +0530 Subject: [PATCH 03/25] Render menu from the menutree passed as a prop --- .../Types/ContextualMenuExample.shorthand.tsx | 30 +- .../ContextualMenu/ContextualMenu.tsx | 278 ++++++++++-------- 2 files changed, 182 insertions(+), 126 deletions(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index 3cc1df755f..e81ecc8710 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -1,13 +1,14 @@ import React from 'react' -import { ContextualMenu } from '@stardust-ui/react' +import { ContextualMenu, Avatar } from '@stardust-ui/react' -const items = [ +const menuTree = [ { - key: 'personDescription', - content:
Gopal Goel
, + key: 'menuItem1', + icon: 'search', + content: 'Show in channel', }, { - key: 'menuItem1', + key: 'menuItem5', content: 'Show in channel', }, { @@ -17,6 +18,16 @@ const items = [ { key: 'subItem0', content: 'Subitem 0', + submenuItems: [ + { + key: 'subItem0', + content: 'Subitem 0', + }, + { + key: 'subItem1', + content: 'Subitem 1', + }, + ], }, { key: 'subItem1', @@ -40,6 +51,13 @@ const items = [ }, ] -const ContextualMenuExample = () => +const personDescription = { + imageUrl: 'public/images/avatar/small/matt.jpg', + description: 'Gopal Goel', +} + +const ContextualMenuExample = () => ( + +) export default ContextualMenuExample diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 119db5008a..7500f449f2 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -6,8 +6,8 @@ import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../typ import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' import Popup from '../Popup/Popup' import Button from '../Button' -import Menu from '../Menu' -import { Avatar, Icon } from '@stardust-ui/react' +import Menu, { MenuItem } from '../Menu' +import Avatar from '../Avatar' export interface IContextualMenuProps { as?: any @@ -18,6 +18,14 @@ export interface IContextualMenuProps { variables?: ComponentVariablesInput } +const menuItemStyle = { + root: { padding: '0px', margin: '0px', borderRadius: '0%' }, + anchor: { padding: '0px', minHeight: '50px' }, +} +const triggerStyle = { + padding: '15px', +} + /** * A contextualMenu. * @accessibility This is example usage of the accessibility tag. @@ -52,6 +60,8 @@ class ContextualMenu extends UIComponent, any> /** Custom variables to be applied for component. */ variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + + calllback: PropTypes.func, } public static handledProps = ['as', 'children', 'className', 'content', 'styles', 'variables'] @@ -60,133 +70,159 @@ class ContextualMenu extends UIComponent, any> as: 'div', } - public renderItems = items => { - const menuItemStyle = { - root: { padding: '0px', margin: '0px', minHeight: '50px', borderRadius: '0%' }, - anchor: { padding: '0px' }, - } - const triggerStyle = { - padding: '15px', + public renderMenuPersonDetail = personDescription => { + const { iconOnly, pills, pointing, type, underlined, vertical } = this.props + const item = { + key: 'personDescription', + styles: menuItemStyle, + content: ( +
+ + {personDescription.description} +
+ ), } - return items.map(item => { - item.styles = menuItemStyle + const index = 4 + return MenuItem.create(item, { + defaultProps: { + iconOnly, + pills, + pointing, + type, + underlined, + vertical, + index, + }, + // overrideProps: this.handleItemOverrides, }) } - public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { - const { children, content } = this.props - const menuItemStyle = { - root: { padding: '0px', margin: '0px', borderRadius: '0%' }, - anchor: { padding: '0px', minHeight: '50px' }, - } - const triggerStyle = { - padding: '15px', - } - const sub_sub_items = [ - { - key: 'editorials', - styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, - content: 'Editorials', - }, - { - key: 'review', - styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - content: 'Reviews', - onClick: () => { - alert('hel') - }, - }, - { - key: 'events', - styles: menuItemStyle, - content: ( - Events} - content={'goapl'} - /> - ), - }, - ] - const sub_items = [ - { - key: 'editorials', - styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, - content: 'Editorials', - }, - { - key: 'review', - styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - content: 'Reviews', - onClick: () => { - alert('hel') - }, - }, - { - key: 'events', - styles: menuItemStyle, - content: ( - Events} - content={ - - } - /> - ), - }, - ] - const items = [ - { - key: 'editorials', - styles: menuItemStyle, - content: ( -
- - Gopal Goel -
- ), - }, - { - key: 'review', - icon: 'search', - content: 'Click for callback', - styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - onClick: () => { - alert('Callback clicked...') - }, - }, - { - key: 'events', - styles: menuItemStyle, - content: ( + public processTree = menuTree => { + const newMenuTree = [] + menuTree.forEach(item => { + // if (item.submenuItems === undefined) { + // item.styles = { ...menuItemStyle, anchor: { padding: '15px' } } + // } + if (item.submenuItems !== undefined) { + const submenutree = this.processTree(item.submenuItems) + const content = item.content + item.content = ( Submenu 1} + trigger={
{content}
} content={ - + } /> - ), - }, - { - key: 'events', - styles: menuItemStyle, - content: ( - Submenu 2} - content={ - - } - /> - ), - }, - ] + ) + item.submenuItems = undefined + item.styles = menuItemStyle + } + newMenuTree.push(item) + }) + return newMenuTree + } + + public renderMenuTree = menuTree => { + const newMt = this.processTree(menuTree) + return + } + + public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { + const { children, content, menutree, persondescription } = this.props + const calllback = () => { + alert('Callback clicked') + } + // const sub_sub_items = [ + // { + // key: 'editorials', + // styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, + // content: 'Editorials', + // }, + // { + // key: 'review', + // styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + // content: 'Reviews', + // onClick: calllback, + // }, + // { + // key: 'events', + // styles: menuItemStyle, + // content: ( + // Events} + // content={'goapl'} + // /> + // ), + // }, + // ] + // const sub_items = [ + // { + // key: 'editorials', + // styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, + // content: 'Editorials', + // }, + // { + // key: 'review', + // styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + // content: 'Reviews', + // onClick: calllback, + // }, + // { + // key: 'events', + // styles: menuItemStyle, + // content: ( + // Events} + // content={ + // + // } + // /> + // ), + // }, + // ] + // const items = [ + // { + // key: 'review', + // icon: 'plus', + // content: 'Click for callback', + // styles: { ...menuItemStyle, anchor: { padding: '15px' } }, + // onClick: calllback, + // }, + // { + // key: 'events', + // styles: menuItemStyle, + // content: ( + // Submenu 1} + // content={ + // + // } + // /> + // ), + // }, + // { + // key: 'eventgs', + // styles: menuItemStyle, + // content: ( + // Submenu 2} + // content={ + // + // } + // /> + // ), + // }, + // ] return ( {/* {childrenExist(children) ? children : content} */} @@ -203,7 +239,9 @@ class ContextualMenu extends UIComponent, any> } content={} /> */} - + {this.renderMenuPersonDetail(persondescription)} + {this.renderMenuTree(menutree)} + {/* */} ) } From d6f2b8f7a8d254354a12ced65799aba22788c9f4 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 24 Sep 2018 14:55:37 +0530 Subject: [PATCH 04/25] Render menu from the menutree passed as a prop --- .../Types/ContextualMenuExample.shorthand.tsx | 30 ++-- .../ContextualMenu/ContextualMenu.tsx | 148 +++--------------- 2 files changed, 39 insertions(+), 139 deletions(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index e81ecc8710..2c3f9bf683 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -3,49 +3,49 @@ import { ContextualMenu, Avatar } from '@stardust-ui/react' const menuTree = [ { - key: 'menuItem1', + key: 'menuItem0', icon: 'search', - content: 'Show in channel', + title: 'Show in channel', }, { - key: 'menuItem5', - content: 'Show in channel', + key: 'menuItem1', + title: 'Show in channel', }, { key: 'menuItem2', - content: 'Submenu 1', - submenuItems: [ + title: 'Submenu 1', + submenuitems: [ { key: 'subItem0', - content: 'Subitem 0', - submenuItems: [ + title: 'Subitem 0', + submenuitems: [ { key: 'subItem0', - content: 'Subitem 0', + title: 'Subitem 0', }, { key: 'subItem1', - content: 'Subitem 1', + title: 'Subitem 1', }, ], }, { key: 'subItem1', - content: 'Subitem 1', + title: 'Subitem 1', }, ], }, { key: 'menuItem3', - content: 'Submenu 2', - submenuItems: [ + title: 'Submenu 2', + submenuitems: [ { key: 'subItem0', - content: 'Subitem 0', + title: 'Subitem 0', }, { key: 'subItem1', - content: 'Subitem 1', + title: 'Subitem 1', }, ], }, diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 7500f449f2..460211e59a 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -98,150 +98,50 @@ class ContextualMenu extends UIComponent, any> } public processTree = menuTree => { - const newMenuTree = [] menuTree.forEach(item => { - // if (item.submenuItems === undefined) { - // item.styles = { ...menuItemStyle, anchor: { padding: '15px' } } - // } - if (item.submenuItems !== undefined) { - const submenutree = this.processTree(item.submenuItems) - const content = item.content + if (item.submenuitems === undefined) { + item.content = item.title + item.styles = { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } } + item.onClick = () => { + alert('callback') + } + } + if (item.submenuitems !== undefined) { + this.processTree(item.submenuitems) + console.log('one') item.content = ( {content}} + trigger={
{item.title}
} content={ - + } /> ) - item.submenuItems = undefined - item.styles = menuItemStyle + item.styles = { ...menuItemStyle } } - newMenuTree.push(item) }) - return newMenuTree } - public renderMenuTree = menuTree => { - const newMt = this.processTree(menuTree) - return + public renderMenuTree = menutree => { + this.processTree(menutree) + return } public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { - const { children, content, menutree, persondescription } = this.props - const calllback = () => { - alert('Callback clicked') - } - // const sub_sub_items = [ - // { - // key: 'editorials', - // styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, - // content: 'Editorials', - // }, - // { - // key: 'review', - // styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - // content: 'Reviews', - // onClick: calllback, - // }, - // { - // key: 'events', - // styles: menuItemStyle, - // content: ( - // Events} - // content={'goapl'} - // /> - // ), - // }, - // ] - // const sub_items = [ - // { - // key: 'editorials', - // styles: { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } }, - // content: 'Editorials', - // }, - // { - // key: 'review', - // styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - // content: 'Reviews', - // onClick: calllback, - // }, - // { - // key: 'events', - // styles: menuItemStyle, - // content: ( - // Events} - // content={ - // - // } - // /> - // ), - // }, - // ] - // const items = [ - // { - // key: 'review', - // icon: 'plus', - // content: 'Click for callback', - // styles: { ...menuItemStyle, anchor: { padding: '15px' } }, - // onClick: calllback, - // }, - // { - // key: 'events', - // styles: menuItemStyle, - // content: ( - // Submenu 1} - // content={ - // - // } - // /> - // ), - // }, - // { - // key: 'eventgs', - // styles: menuItemStyle, - // content: ( - // Submenu 2} - // content={ - // - // } - // /> - // ), - // }, - // ] + const { menutree, persondescription } = this.props + // console.log(menutree) return ( - {/* {childrenExist(children) ? children : content} */} - {/* - } - content={} - /> */} {this.renderMenuPersonDetail(persondescription)} {this.renderMenuTree(menutree)} - {/* */} ) } From c85fd0d74e551186e19a616d5e8c370fbea8e7fc Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 24 Sep 2018 15:21:25 +0530 Subject: [PATCH 05/25] Add callback prop --- .../Types/ContextualMenuExample.shorthand.tsx | 6 ++- .../ContextualMenu/ContextualMenu.tsx | 38 +++++++++++++------ 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index 2c3f9bf683..5cf7955687 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -56,8 +56,12 @@ const personDescription = { description: 'Gopal Goel', } +const callback = () => { + alert('Callback invoked') +} + const ContextualMenuExample = () => ( - + ) export default ContextualMenuExample diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 460211e59a..31a32d2d83 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -40,6 +40,9 @@ class ContextualMenu extends UIComponent, any> /** An element type to render as (string or function). */ as: customPropTypes.as, + /** Function passed which needs to be invoked when menuitem has no submenu */ + callback: PropTypes.func, + /** Primary content. */ children: PropTypes.node, @@ -55,16 +58,29 @@ class ContextualMenu extends UIComponent, any> ]), ]), + /** The tree of menu containing submenus and it's submenus and so on. */ + menutree: PropTypes.arrayOf(PropTypes.object), + + /** An object containing imageUrl and the descrioption of the person*/ + persondescription: PropTypes.object, + /** Custom styles to be applied for component. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), /** Custom variables to be applied for component. */ variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - calllback: PropTypes.func, } - public static handledProps = ['as', 'children', 'className', 'content', 'styles', 'variables'] + public static handledProps = [ + 'as', + 'children', + 'className', + 'content', + 'menutree', + 'persondescription', + 'styles', + 'variables', + ] public static defaultProps = { as: 'div', @@ -97,17 +113,15 @@ class ContextualMenu extends UIComponent, any> }) } - public processTree = menuTree => { + public processTree = (menuTree, callback) => { menuTree.forEach(item => { if (item.submenuitems === undefined) { item.content = item.title item.styles = { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } } - item.onClick = () => { - alert('callback') - } + item.onClick = callback } if (item.submenuitems !== undefined) { - this.processTree(item.submenuitems) + this.processTree(item.submenuitems, callback) console.log('one') item.content = ( , any> }) } - public renderMenuTree = menutree => { - this.processTree(menutree) + public renderMenuTree = (menutree, callback) => { + this.processTree(menutree, callback) return } public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { - const { menutree, persondescription } = this.props + const { menutree, persondescription, callback } = this.props // console.log(menutree) return ( {this.renderMenuPersonDetail(persondescription)} - {this.renderMenuTree(menutree)} + {this.renderMenuTree(menutree, callback)} ) } From c9115dbf06acce17dfe54866eec0aba71083cd51 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 24 Sep 2018 15:58:47 +0530 Subject: [PATCH 06/25] Make code work even if no props are passed --- src/components/ContextualMenu/ContextualMenu.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 31a32d2d83..02f4307ad7 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -87,6 +87,9 @@ class ContextualMenu extends UIComponent, any> } public renderMenuPersonDetail = personDescription => { + if (personDescription === undefined) { + return undefined + } const { iconOnly, pills, pointing, type, underlined, vertical } = this.props const item = { key: 'personDescription', @@ -145,6 +148,9 @@ class ContextualMenu extends UIComponent, any> } public renderMenuTree = (menutree, callback) => { + if (menutree === undefined) { + return undefined + } this.processTree(menutree, callback) return } From faa7a1476b82a7bc7c0f8fcf7fe054087787ba8d Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Tue, 25 Sep 2018 10:41:24 +0530 Subject: [PATCH 07/25] Fix the breaking code introduced by pull 238 --- .../Types/ContextualMenuExample.shorthand.tsx | 23 +++++----- .../ContextualMenu/ContextualMenu.tsx | 43 +++++++++++++------ .../ContextualMenu/ContextualMenuStyles.tsx | 16 +++---- .../ContextualMenuVariables.tsx | 10 ++--- 4 files changed, 53 insertions(+), 39 deletions(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index 5cf7955687..bf8e90402d 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -4,55 +4,54 @@ import { ContextualMenu, Avatar } from '@stardust-ui/react' const menuTree = [ { key: 'menuItem0', - icon: 'search', - title: 'Show in channel', + title: 'Click for callback', }, { key: 'menuItem1', - title: 'Show in channel', + title: 'Click for callback', }, { key: 'menuItem2', - title: 'Submenu 1', + title: 'Open Submenu 1', submenuitems: [ { key: 'subItem0', - title: 'Subitem 0', + title: 'Open Submenu 1.1', submenuitems: [ { key: 'subItem0', - title: 'Subitem 0', + title: 'Click for callback', }, { key: 'subItem1', - title: 'Subitem 1', + title: 'Click for callback', }, ], }, { key: 'subItem1', - title: 'Subitem 1', + title: 'Click for callback', }, ], }, { key: 'menuItem3', - title: 'Submenu 2', + title: 'Open Submenu 2', submenuitems: [ { key: 'subItem0', - title: 'Subitem 0', + title: 'Click for callback', }, { key: 'subItem1', - title: 'Subitem 1', + title: 'Click for callback', }, ], }, ] const personDescription = { - imageUrl: 'public/images/avatar/small/matt.jpg', + imageUrl: 'public/images/avatar/small/elliot.jpg', description: 'Gopal Goel', } diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 02f4307ad7..e5a12837da 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -2,24 +2,25 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import ReactNode = React.ReactNode import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib' -import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme' +import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' import Popup from '../Popup/Popup' import Button from '../Button' import Menu, { MenuItem } from '../Menu' import Avatar from '../Avatar' +import Provider from '../Provider' export interface IContextualMenuProps { as?: any className?: string children?: ReactChildren content?: ItemShorthand | ItemShorthand[] - styles?: IComponentPartStylesInput + styles?: ComponentPartStyle variables?: ComponentVariablesInput } const menuItemStyle = { - root: { padding: '0px', margin: '0px', borderRadius: '0%' }, + root: { padding: '0px', marginBottom: '0px', borderRadius: '0%' }, anchor: { padding: '0px', minHeight: '50px' }, } const triggerStyle = { @@ -93,10 +94,9 @@ class ContextualMenu extends UIComponent, any> const { iconOnly, pills, pointing, type, underlined, vertical } = this.props const item = { key: 'personDescription', - styles: menuItemStyle, content: ( -
- +
+ {personDescription.description}
), @@ -119,18 +119,16 @@ class ContextualMenu extends UIComponent, any> public processTree = (menuTree, callback) => { menuTree.forEach(item => { if (item.submenuitems === undefined) { - item.content = item.title - item.styles = { ...menuItemStyle, anchor: { padding: '15px', minHeight: '50px' } } + item.content = {item.title} item.onClick = callback } if (item.submenuitems !== undefined) { this.processTree(item.submenuitems, callback) - console.log('one') item.content = ( {item.title}
} + trigger={
{item.title}
} content={ , any> } /> ) - item.styles = { ...menuItemStyle } } }) } @@ -152,7 +149,29 @@ class ContextualMenu extends UIComponent, any> return undefined } this.processTree(menutree, callback) - return + return ( + + + + ) } public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx index 0ca6a238eb..05ddd718c6 100644 --- a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx +++ b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx @@ -1,19 +1,17 @@ import { IContextualMenuVariables } from './contextualMenuVariables' import { IComponentPartStylesInput, ICSSInJSStyle, IProps } from '../../../../../types/theme' +import { IContextualMenuProps } from '../../../../components/ContextualMenu/ContextualMenu' -const contextualMenuStyles: IComponentPartStylesInput = { - root: ({ - props, - variables: { height, maxWidth, padding }, - }: { - props: IProps - variables: IContextualMenuVariables - }): ICSSInJSStyle => { +const contextualMenuStyles: IComponentPartStylesInput< + IContextualMenuProps, + IContextualMenuVariables +> = { + root: ({ props, variables: { height, maxWidth, padding, border } }): ICSSInJSStyle => { const styles = { height, maxWidth, padding, - border: '1px solid #eeeeee', + border, } return styles diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx b/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx index f2de04d9f4..cd95bf4cbb 100644 --- a/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx +++ b/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx @@ -1,15 +1,13 @@ export interface IContextualMenuVariables { height: string maxWidth: string - defaultColumnCount: number - contextualMenuGap?: string padding?: string + border?: string } export default (): IContextualMenuVariables => ({ height: '100%', - maxWidth: '200px', - defaultColumnCount: 5, - contextualMenuGap: undefined, - padding: undefined, + maxWidth: '220px', + padding: '0', + border: '1px solid #eeeeee', }) From 1214009527e4b0505fb1be60be4d3ef6f52ae5e6 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 1 Oct 2018 11:30:00 +0530 Subject: [PATCH 08/25] Add divider prop --- .../Types/ContextualMenuExample.shorthand.tsx | 12 ++- .../ContextualMenu/ContextualMenu.tsx | 98 +++++++------------ 2 files changed, 48 insertions(+), 62 deletions(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index bf8e90402d..414ae02a85 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -4,7 +4,10 @@ import { ContextualMenu, Avatar } from '@stardust-ui/react' const menuTree = [ { key: 'menuItem0', - title: 'Click for callback', + persondescription: { + imageUrl: 'public/images/avatar/small/elliot.jpg', + description: 'Gopal Goel', + }, }, { key: 'menuItem1', @@ -12,6 +15,11 @@ const menuTree = [ }, { key: 'menuItem2', + title: 'Click for callback', + divider: true, + }, + { + key: 'menuItem3', title: 'Open Submenu 1', submenuitems: [ { @@ -35,7 +43,7 @@ const menuTree = [ ], }, { - key: 'menuItem3', + key: 'menuItem4', title: 'Open Submenu 2', submenuitems: [ { diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index e5a12837da..7fa88b46bf 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -5,10 +5,10 @@ import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' import Popup from '../Popup/Popup' -import Button from '../Button' -import Menu, { MenuItem } from '../Menu' +import Menu from '../Menu' import Avatar from '../Avatar' import Provider from '../Provider' +import Divider from '../Divider' export interface IContextualMenuProps { as?: any @@ -72,73 +72,53 @@ class ContextualMenu extends UIComponent, any> variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } - public static handledProps = [ - 'as', - 'children', - 'className', - 'content', - 'menutree', - 'persondescription', - 'styles', - 'variables', - ] - public static defaultProps = { as: 'div', } - public renderMenuPersonDetail = personDescription => { - if (personDescription === undefined) { - return undefined - } - const { iconOnly, pills, pointing, type, underlined, vertical } = this.props - const item = { - key: 'personDescription', - content: ( -
- - {personDescription.description} -
- ), - } - const index = 4 - return MenuItem.create(item, { - defaultProps: { - iconOnly, - pills, - pointing, - type, - underlined, - vertical, - index, - }, - // overrideProps: this.handleItemOverrides, - }) - } - public processTree = (menuTree, callback) => { menuTree.forEach(item => { if (item.submenuitems === undefined) { - item.content = {item.title} + if (item.persondescription !== undefined) { + item.content = ( +
+
+ + {item.persondescription.description} +
+ +
+ ) + } else { + item.content = ( + + {item.title} + {item.divider ? : null} + + ) + } item.onClick = callback } if (item.submenuitems !== undefined) { this.processTree(item.submenuitems, callback) item.content = ( - {item.title}} - content={ - - } - /> + + {item.title}} + content={ + + } + /> + {item.divider ? : null} + ) } }) @@ -161,7 +141,7 @@ class ContextualMenu extends UIComponent, any> minWidth: '200px', width: '100%', }, - anchor: { padding: '0px', height: '50px', width: '100%', lineHeight: '50px' }, + anchor: { padding: '0px', height: '100%', width: '100%', lineHeight: '50px' }, }, Menu: { root: { width: '100%' }, @@ -176,10 +156,8 @@ class ContextualMenu extends UIComponent, any> public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { const { menutree, persondescription, callback } = this.props - // console.log(menutree) return ( - {this.renderMenuPersonDetail(persondescription)} {this.renderMenuTree(menutree, callback)} ) From a07b910538e71e5e27719eb412d06285038cb509 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 1 Oct 2018 12:06:36 +0530 Subject: [PATCH 09/25] Add icon prop --- .../Types/ContextualMenuExample.shorthand.tsx | 2 ++ src/components/ContextualMenu/ContextualMenu.tsx | 13 ++++--------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index 414ae02a85..c95b524448 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -11,10 +11,12 @@ const menuTree = [ }, { key: 'menuItem1', + icon: 'user', title: 'Click for callback', }, { key: 'menuItem2', + icon: 'search', title: 'Click for callback', divider: true, }, diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 7fa88b46bf..5527e25e25 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -19,14 +19,6 @@ export interface IContextualMenuProps { variables?: ComponentVariablesInput } -const menuItemStyle = { - root: { padding: '0px', marginBottom: '0px', borderRadius: '0%' }, - anchor: { padding: '0px', minHeight: '50px' }, -} -const triggerStyle = { - padding: '15px', -} - /** * A contextualMenu. * @accessibility This is example usage of the accessibility tag. @@ -146,6 +138,9 @@ class ContextualMenu extends UIComponent, any> Menu: { root: { width: '100%' }, }, + Icon: { + root: { margin: '15px', marginRight: '0px' }, + }, }, }} > @@ -155,7 +150,7 @@ class ContextualMenu extends UIComponent, any> } public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { - const { menutree, persondescription, callback } = this.props + const { menutree, callback } = this.props return ( {this.renderMenuTree(menutree, callback)} From 12f6d08358551fc91075246f5387646fdee68924 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 1 Oct 2018 12:38:46 +0530 Subject: [PATCH 10/25] Cleanup --- .../ContextualMenu/Types/ContextualMenuExample.shorthand.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index c95b524448..06b030fa6e 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { ContextualMenu, Avatar } from '@stardust-ui/react' +import { ContextualMenu } from '@stardust-ui/react' const menuTree = [ { From 4b93b2d22b35e6f08caf3c51a4dd82330c857b98 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 1 Oct 2018 14:45:07 +0530 Subject: [PATCH 11/25] Add icons --- .../Types/ContextualMenuExample.shorthand.tsx | 49 ++++++++++++++++--- .../ContextualMenu/ContextualMenu.tsx | 15 +++++- 2 files changed, 55 insertions(+), 9 deletions(-) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index 06b030fa6e..1f64292eca 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -11,18 +11,35 @@ const menuTree = [ }, { key: 'menuItem1', - icon: 'user', - title: 'Click for callback', + iconName: 'align justify', + title: 'Show in channel', + divider: true, }, { key: 'menuItem2', - icon: 'search', - title: 'Click for callback', - divider: true, + iconName: 'edit', + title: 'Edit', }, { key: 'menuItem3', - title: 'Open Submenu 1', + iconName: 'file word', + title: 'Open in Word', + }, + { + key: 'menuItem4', + iconName: 'search', + title: 'Get link', + }, + { + key: 'menuItem5', + iconName: 'plus', + title: 'Add to...', + divider: true, + }, + { + key: 'menuItem6', + iconName: 'bookmark', + title: 'Move to collection', submenuitems: [ { key: 'subItem0', @@ -45,8 +62,24 @@ const menuTree = [ ], }, { - key: 'menuItem4', - title: 'Open Submenu 2', + key: 'menuItem7', + iconName: 'copy', + title: 'Copy to collection', + submenuitems: [ + { + key: 'subItem0', + title: 'Click for callback', + }, + { + key: 'subItem1', + title: 'Click for callback', + }, + ], + }, + { + key: 'menuItem8', + iconName: 'delete', + title: 'Remove', submenuitems: [ { key: 'subItem0', diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 5527e25e25..85b572c5e0 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -5,6 +5,7 @@ import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' import Popup from '../Popup/Popup' +import Icon from '../Icon' import Menu from '../Menu' import Avatar from '../Avatar' import Provider from '../Provider' @@ -71,6 +72,7 @@ class ContextualMenu extends UIComponent, any> public processTree = (menuTree, callback) => { menuTree.forEach(item => { if (item.submenuitems === undefined) { + if (item.iconName) item.icon = item.iconName if (item.persondescription !== undefined) { item.content = (
@@ -98,7 +100,18 @@ class ContextualMenu extends UIComponent, any> {item.title}
} + trigger={ +
+ {item.iconName ? ( + + ) : null} + {item.title} + +
+ } content={ Date: Tue, 2 Oct 2018 18:15:06 +0530 Subject: [PATCH 12/25] Add test file --- src/components/ContextualMenu/ContextualMenu.tsx | 2 +- .../components/ContextualMenu/ContextualMenu-test.tsx | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 test/specs/components/ContextualMenu/ContextualMenu-test.tsx diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 85b572c5e0..4c13d6d781 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -28,7 +28,7 @@ export interface IContextualMenuProps { class ContextualMenu extends UIComponent, any> { public static displayName = 'ContextualMenu' - public static className = 'ui-contextualMenu' + public static className = 'ui-contextualmenu' public static propTypes = { /** An element type to render as (string or function). */ diff --git a/test/specs/components/ContextualMenu/ContextualMenu-test.tsx b/test/specs/components/ContextualMenu/ContextualMenu-test.tsx new file mode 100644 index 0000000000..739e4fd6f7 --- /dev/null +++ b/test/specs/components/ContextualMenu/ContextualMenu-test.tsx @@ -0,0 +1,7 @@ +import { isConformant } from 'test/specs/commonTests' + +import ContextualMenu from 'src/components/ContextualMenu' + +describe('ContextualMenu', () => { + isConformant(ContextualMenu) +}) From b162b9d7dd07d7147a8445ae3352508e1ba9ffb4 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Tue, 2 Oct 2018 18:31:21 +0530 Subject: [PATCH 13/25] Remove unsued imports --- src/components/ContextualMenu/ContextualMenu.tsx | 2 +- .../teams/components/ContextualMenu/ContextualMenuStyles.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 4c13d6d781..266d3b95c6 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -1,7 +1,7 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import ReactNode = React.ReactNode -import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib' +import { UIComponent, customPropTypes, IRenderResultConfig } from '../../lib' import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' import Popup from '../Popup/Popup' diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx index 05ddd718c6..74d7840fae 100644 --- a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx +++ b/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx @@ -1,5 +1,5 @@ import { IContextualMenuVariables } from './contextualMenuVariables' -import { IComponentPartStylesInput, ICSSInJSStyle, IProps } from '../../../../../types/theme' +import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' import { IContextualMenuProps } from '../../../../components/ContextualMenu/ContextualMenu' const contextualMenuStyles: IComponentPartStylesInput< From d24a7663149b7d37f31fdaa8a97fbdea1ea09efb Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Wed, 3 Oct 2018 15:17:03 +0530 Subject: [PATCH 14/25] Make Popup work after rebasing breaking changes --- .../Types/ContextualMenuExample.shorthand.tsx | 9 +---- .../ContextualMenu/ContextualMenu.tsx | 36 ++---------------- .../ContextualMenu/PopupWithSubmenu.tsx | 38 +++++++++++++++++++ 3 files changed, 42 insertions(+), 41 deletions(-) create mode 100644 src/components/ContextualMenu/PopupWithSubmenu.tsx diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx index 1f64292eca..8d90bb0400 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx @@ -93,17 +93,10 @@ const menuTree = [ }, ] -const personDescription = { - imageUrl: 'public/images/avatar/small/elliot.jpg', - description: 'Gopal Goel', -} - const callback = () => { alert('Callback invoked') } -const ContextualMenuExample = () => ( - -) +const ContextualMenuExample = () => export default ContextualMenuExample diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 266d3b95c6..f27629edbf 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -4,12 +4,11 @@ import ReactNode = React.ReactNode import { UIComponent, customPropTypes, IRenderResultConfig } from '../../lib' import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' -import Popup from '../Popup/Popup' -import Icon from '../Icon' import Menu from '../Menu' import Avatar from '../Avatar' import Provider from '../Provider' import Divider from '../Divider' +import { PopupWithSubmenu } from './PopupWithSubmenu' export interface IContextualMenuProps { as?: any @@ -94,37 +93,8 @@ class ContextualMenu extends UIComponent, any> item.onClick = callback } if (item.submenuitems !== undefined) { - this.processTree(item.submenuitems, callback) - item.content = ( - - - {item.iconName ? ( - - ) : null} - {item.title} - - - } - content={ - - } - /> - {item.divider ? : null} - - ) + // this.processTree(item.submenuitems, callback) + item.content = } }) } diff --git a/src/components/ContextualMenu/PopupWithSubmenu.tsx b/src/components/ContextualMenu/PopupWithSubmenu.tsx new file mode 100644 index 0000000000..4cea3c0aa2 --- /dev/null +++ b/src/components/ContextualMenu/PopupWithSubmenu.tsx @@ -0,0 +1,38 @@ +import * as React from 'react' +import Popup from '../Popup/Popup' +import Icon from '../Icon' +import Divider from '../Divider' +import ContextualMenu from '../ContextualMenu' + +export class PopupWithSubmenu extends React.Component { + state = { popupOpen: false } + togglePopupState = () => { + this.setState(prev => ({ popupOpen: !prev.popupOpen })) + } + render = () => { + const { item, callback } = this.props + return ( + + { + this.setState({ popupOpen: newProps.open }) + }} + align="top" + position="after" + trigger={ +
this.togglePopupState()}> + {item.iconName ? ( + + ) : null} + {item.title} + +
+ } + content={} + /> + {item.divider ? : null} + + ) + } +} From 79df68e8423bf245c3da062ea288f49abc4520f2 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Fri, 5 Oct 2018 11:38:10 +0530 Subject: [PATCH 15/25] Rename ContextualMenu to ContextMenu --- .../Types/ContextMenuExample.shorthand.tsx} | 6 +++--- .../{ContextualMenu => ContextMenu}/Types/index.tsx | 4 ++-- .../{ContextualMenu => ContextMenu}/index.tsx | 4 ++-- .../ContextualMenu.tsx => ContextMenu/ContextMenu.tsx} | 10 +++++----- .../PopupWithSubmenu.tsx | 4 ++-- src/components/ContextMenu/index.tsx | 1 + src/components/ContextualMenu/index.tsx | 1 - src/index.ts | 2 +- src/themes/teams/componentStyles.ts | 2 +- src/themes/teams/componentVariables.ts | 2 +- .../ContextMenuStyles.tsx} | 9 +++------ .../ContextMenuVariables.tsx} | 4 ++-- 12 files changed, 23 insertions(+), 26 deletions(-) rename docs/src/examples/components/{ContextualMenu/Types/ContextualMenuExample.shorthand.tsx => ContextMenu/Types/ContextMenuExample.shorthand.tsx} (90%) rename docs/src/examples/components/{ContextualMenu => ContextMenu}/Types/index.tsx (73%) rename docs/src/examples/components/{ContextualMenu => ContextMenu}/index.tsx (53%) rename src/components/{ContextualMenu/ContextualMenu.tsx => ContextMenu/ContextMenu.tsx} (94%) rename src/components/{ContextualMenu => ContextMenu}/PopupWithSubmenu.tsx (89%) create mode 100644 src/components/ContextMenu/index.tsx delete mode 100644 src/components/ContextualMenu/index.tsx rename src/themes/teams/components/{ContextualMenu/ContextualMenuStyles.tsx => ContextMenu/ContextMenuStyles.tsx} (54%) rename src/themes/teams/components/{ContextualMenu/ContextualMenuVariables.tsx => ContextMenu/ContextMenuVariables.tsx} (63%) diff --git a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx similarity index 90% rename from docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx rename to docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx index 8d90bb0400..cafa194bac 100644 --- a/docs/src/examples/components/ContextualMenu/Types/ContextualMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { ContextualMenu } from '@stardust-ui/react' +import { ContextMenu } from '@stardust-ui/react' const menuTree = [ { @@ -97,6 +97,6 @@ const callback = () => { alert('Callback invoked') } -const ContextualMenuExample = () => +const ContextMenuExample = () => -export default ContextualMenuExample +export default ContextMenuExample diff --git a/docs/src/examples/components/ContextualMenu/Types/index.tsx b/docs/src/examples/components/ContextMenu/Types/index.tsx similarity index 73% rename from docs/src/examples/components/ContextualMenu/Types/index.tsx rename to docs/src/examples/components/ContextMenu/Types/index.tsx index 8f5550520a..3338b386a1 100644 --- a/docs/src/examples/components/ContextualMenu/Types/index.tsx +++ b/docs/src/examples/components/ContextMenu/Types/index.tsx @@ -6,8 +6,8 @@ const Types = () => ( ) diff --git a/docs/src/examples/components/ContextualMenu/index.tsx b/docs/src/examples/components/ContextMenu/index.tsx similarity index 53% rename from docs/src/examples/components/ContextualMenu/index.tsx rename to docs/src/examples/components/ContextMenu/index.tsx index 312112f9c6..15cfb6ef1a 100644 --- a/docs/src/examples/components/ContextualMenu/index.tsx +++ b/docs/src/examples/components/ContextMenu/index.tsx @@ -1,10 +1,10 @@ import React from 'react' import Types from './Types' -const ContextualMenuExamples = () => ( +const ContextMenuExamples = () => (
) -export default ContextualMenuExamples +export default ContextMenuExamples diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx similarity index 94% rename from src/components/ContextualMenu/ContextualMenu.tsx rename to src/components/ContextMenu/ContextMenu.tsx index f27629edbf..e4a4d2cf35 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -10,7 +10,7 @@ import Provider from '../Provider' import Divider from '../Divider' import { PopupWithSubmenu } from './PopupWithSubmenu' -export interface IContextualMenuProps { +export interface IContextMenuProps { as?: any className?: string children?: ReactChildren @@ -24,10 +24,10 @@ export interface IContextualMenuProps { * @accessibility This is example usage of the accessibility tag. * This should be replaced with the actual description after the PR is merged */ -class ContextualMenu extends UIComponent, any> { - public static displayName = 'ContextualMenu' +class ContextMenu extends UIComponent, any> { + public static displayName = 'ContextMenu' - public static className = 'ui-contextualmenu' + public static className = 'ui-contextmenu' public static propTypes = { /** An element type to render as (string or function). */ @@ -142,4 +142,4 @@ class ContextualMenu extends UIComponent, any> } } -export default ContextualMenu +export default ContextMenu diff --git a/src/components/ContextualMenu/PopupWithSubmenu.tsx b/src/components/ContextMenu/PopupWithSubmenu.tsx similarity index 89% rename from src/components/ContextualMenu/PopupWithSubmenu.tsx rename to src/components/ContextMenu/PopupWithSubmenu.tsx index 4cea3c0aa2..f282f5ee18 100644 --- a/src/components/ContextualMenu/PopupWithSubmenu.tsx +++ b/src/components/ContextMenu/PopupWithSubmenu.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Popup from '../Popup/Popup' import Icon from '../Icon' import Divider from '../Divider' -import ContextualMenu from '../ContextualMenu' +import ContextMenu from '../ContextMenu' export class PopupWithSubmenu extends React.Component { state = { popupOpen: false } @@ -29,7 +29,7 @@ export class PopupWithSubmenu extends React.Component { } - content={} + content={} /> {item.divider ? : null} diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx new file mode 100644 index 0000000000..98774c125c --- /dev/null +++ b/src/components/ContextMenu/index.tsx @@ -0,0 +1 @@ +export { default } from './ContextMenu' diff --git a/src/components/ContextualMenu/index.tsx b/src/components/ContextualMenu/index.tsx deleted file mode 100644 index 578b6138c9..0000000000 --- a/src/components/ContextualMenu/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ContextualMenu' diff --git a/src/index.ts b/src/index.ts index 1ab0823da8..e081d7257f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,7 +10,7 @@ export { ButtonGroup } from './components/Button' export { default as Chat } from './components/Chat' export { ChatItem } from './components/Chat' export { ChatMessage } from './components/Chat' -export { default as ContextualMenu } from './components/ContextualMenu' +export { default as ContextMenu } from './components/ContextMenu' export { default as Divider } from './components/Divider' export { default as Grid } from './components/Grid' export { default as Header } from './components/Header' diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts index 0796825004..0611659675 100644 --- a/src/themes/teams/componentStyles.ts +++ b/src/themes/teams/componentStyles.ts @@ -13,7 +13,7 @@ export { default as Chat } from './components/Chat/chatStyles' export { default as ChatItem } from './components/Chat/chatItemStyles' export { default as ChatMessage } from './components/Chat/chatMessageStyles' -export { default as ContextualMenu } from './components/ContextualMenu/contextualMenuStyles' +export { default as ContextMenu } from './components/ContextMenu/contextMenuStyles' export { default as Divider } from './components/Divider/dividerStyles' diff --git a/src/themes/teams/componentVariables.ts b/src/themes/teams/componentVariables.ts index f7b2cbb975..205f616813 100644 --- a/src/themes/teams/componentVariables.ts +++ b/src/themes/teams/componentVariables.ts @@ -13,7 +13,7 @@ export { default as ChatItem } from './components/Chat/chatItemVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' -export { default as ContextualMenu } from './components/ContextualMenu/contextualMenuVariables' +export { default as ContextMenu } from './components/ContextMenu/contextMenuVariables' export { default as Divider } from './components/Divider/dividerVariables' diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx b/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx similarity index 54% rename from src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx rename to src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx index 74d7840fae..ec029ba899 100644 --- a/src/themes/teams/components/ContextualMenu/ContextualMenuStyles.tsx +++ b/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx @@ -1,11 +1,8 @@ -import { IContextualMenuVariables } from './contextualMenuVariables' +import { IContextMenuVariables } from './ContextMenuVariables' import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' -import { IContextualMenuProps } from '../../../../components/ContextualMenu/ContextualMenu' +import { IContextMenuProps } from '../../../../components/ContextMenu/ContextMenu' -const contextualMenuStyles: IComponentPartStylesInput< - IContextualMenuProps, - IContextualMenuVariables -> = { +const contextualMenuStyles: IComponentPartStylesInput = { root: ({ props, variables: { height, maxWidth, padding, border } }): ICSSInJSStyle => { const styles = { height, diff --git a/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx b/src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx similarity index 63% rename from src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx rename to src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx index cd95bf4cbb..0514509ac3 100644 --- a/src/themes/teams/components/ContextualMenu/ContextualMenuVariables.tsx +++ b/src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx @@ -1,11 +1,11 @@ -export interface IContextualMenuVariables { +export interface IContextMenuVariables { height: string maxWidth: string padding?: string border?: string } -export default (): IContextualMenuVariables => ({ +export default (): IContextMenuVariables => ({ height: '100%', maxWidth: '220px', padding: '0', From dae6e2c9d25bad454330c47131d50bfffeeda5ca Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Fri, 5 Oct 2018 12:21:19 +0530 Subject: [PATCH 16/25] Replace Menu component with List component --- .../Types/ContextMenuExample.shorthand.tsx | 154 ++++++++++-------- src/components/ContextMenu/ContextMenu.tsx | 95 +---------- 2 files changed, 96 insertions(+), 153 deletions(-) diff --git a/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx index cafa194bac..3b25a65529 100644 --- a/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx @@ -1,102 +1,128 @@ import React from 'react' -import { ContextMenu } from '@stardust-ui/react' +import { Avatar, ContextMenu, Icon } from '@stardust-ui/react' -const menuTree = [ +const items = [ { key: 'menuItem0', - persondescription: { - imageUrl: 'public/images/avatar/small/elliot.jpg', - description: 'Gopal Goel', - }, + header: 'John Doe', + content: 'Saved on 10/5/2018', + media: , }, { key: 'menuItem1', - iconName: 'align justify', - title: 'Show in channel', - divider: true, + media: , + header: 'Show in channel', + onClick: () => { + alert('ListItem callback invoked..') + }, + // divider: true, }, { key: 'menuItem2', - iconName: 'edit', - title: 'Edit', + media: , + header: 'Edit', }, { key: 'menuItem3', - iconName: 'file word', - title: 'Open in Word', + media: , + header: 'Open in Word', }, { key: 'menuItem4', - iconName: 'search', - title: 'Get link', + media: , + header: 'Get link', }, { key: 'menuItem5', - iconName: 'plus', - title: 'Add to...', + media: , + header: 'Add to...', + headerMedia: , divider: true, + menu: { + items: [ + { + key: 'subItem0', + header: 'Click for callback', + }, + { + key: 'subItem1', + header: 'Click for callback', + }, + ], + }, }, { key: 'menuItem6', - iconName: 'bookmark', - title: 'Move to collection', - submenuitems: [ - { - key: 'subItem0', - title: 'Open Submenu 1.1', - submenuitems: [ - { - key: 'subItem0', - title: 'Click for callback', + media: , + header: 'Move to collection', + headerMedia: , + menu: { + items: [ + { + key: 'subItem0', + header: 'Open Submenu 1.1', + menu: { + items: [ + { + key: 'subItem0', + header: 'Click for callback', + }, + { + key: 'subItem1', + header: 'Click for callback', + }, + ], }, - { - key: 'subItem1', - title: 'Click for callback', - }, - ], - }, - { - key: 'subItem1', - title: 'Click for callback', - }, - ], + }, + { + key: 'subItem1', + header: 'Click for callback', + }, + ], + }, }, { key: 'menuItem7', - iconName: 'copy', - title: 'Copy to collection', - submenuitems: [ - { - key: 'subItem0', - title: 'Click for callback', - }, - { - key: 'subItem1', - title: 'Click for callback', - }, - ], + media: , + header: 'Copy to collection', + headerMedia: , + menu: { + items: [ + { + key: 'subItem0', + header: 'Click for callback', + }, + { + key: 'subItem1', + header: 'Click for callback', + }, + ], + }, }, { key: 'menuItem8', - iconName: 'delete', - title: 'Remove', - submenuitems: [ - { - key: 'subItem0', - title: 'Click for callback', - }, - { - key: 'subItem1', - title: 'Click for callback', - }, - ], + media: , + header: 'Remove', + headerMedia: , + menu: { + items: [ + { + key: 'subItem0', + header: 'Click for callback', + }, + { + key: 'subItem1', + header: 'Click for callback', + }, + ], + }, }, ] const callback = () => { - alert('Callback invoked') + alert('ContextMenu callback invoked...') } -const ContextMenuExample = () => +const ContextMenuExample = () => export default ContextMenuExample diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index e4a4d2cf35..416f416032 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -4,11 +4,7 @@ import ReactNode = React.ReactNode import { UIComponent, customPropTypes, IRenderResultConfig } from '../../lib' import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' -import Menu from '../Menu' -import Avatar from '../Avatar' -import Provider from '../Provider' -import Divider from '../Divider' -import { PopupWithSubmenu } from './PopupWithSubmenu' +import List from '../List' export interface IContextMenuProps { as?: any @@ -33,29 +29,14 @@ class ContextMenu extends UIComponent, any> { /** An element type to render as (string or function). */ as: customPropTypes.as, - /** Function passed which needs to be invoked when menuitem has no submenu */ - callback: PropTypes.func, - - /** Primary content. */ - children: PropTypes.node, - /** Additional classes. */ className: PropTypes.string, - /** Shorthand for primary content. */ - content: customPropTypes.every([ - customPropTypes.disallow(['children']), - PropTypes.oneOfType([ - PropTypes.arrayOf(customPropTypes.itemShorthand), - customPropTypes.itemShorthand, - ]), - ]), - /** The tree of menu containing submenus and it's submenus and so on. */ - menutree: PropTypes.arrayOf(PropTypes.object), + items: PropTypes.arrayOf(PropTypes.object), - /** An object containing imageUrl and the descrioption of the person*/ - persondescription: PropTypes.object, + /** Function passed which needs to be invoked when menuitem has no submenu */ + onItemClick: PropTypes.func, /** Custom styles to be applied for component. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), @@ -68,75 +49,11 @@ class ContextMenu extends UIComponent, any> { as: 'div', } - public processTree = (menuTree, callback) => { - menuTree.forEach(item => { - if (item.submenuitems === undefined) { - if (item.iconName) item.icon = item.iconName - if (item.persondescription !== undefined) { - item.content = ( -
-
- - {item.persondescription.description} -
- -
- ) - } else { - item.content = ( - - {item.title} - {item.divider ? : null} - - ) - } - item.onClick = callback - } - if (item.submenuitems !== undefined) { - // this.processTree(item.submenuitems, callback) - item.content = - } - }) - } - - public renderMenuTree = (menutree, callback) => { - if (menutree === undefined) { - return undefined - } - this.processTree(menutree, callback) - return ( - - - - ) - } - public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { - const { menutree, callback } = this.props + const { items, onItemClick } = this.props return ( - {this.renderMenuTree(menutree, callback)} + ) } From 45b1e342ae88d5f3ad6438a65b07f07e1ef2f61f Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Fri, 5 Oct 2018 15:20:43 +0530 Subject: [PATCH 17/25] Render submenu using Popup --- src/components/ContextMenu/ContextMenu.tsx | 68 ++++++++++++++++--- .../ContextMenu/PopupWithSubmenu.tsx | 37 ++++------ .../ContextMenu/ContextMenuStyles.tsx | 4 +- .../ContextMenu/ContextMenuVariables.tsx | 4 +- 4 files changed, 77 insertions(+), 36 deletions(-) diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 416f416032..5e024ededf 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -1,10 +1,12 @@ +import * as _ from 'lodash' import * as PropTypes from 'prop-types' import * as React from 'react' import ReactNode = React.ReactNode import { UIComponent, customPropTypes, IRenderResultConfig } from '../../lib' import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' -import List from '../List' +import List, { ListItem } from '../List' +import { PopupWithSubmenu } from './PopupWithSubmenu' export interface IContextMenuProps { as?: any @@ -21,11 +23,11 @@ export interface IContextMenuProps { * This should be replaced with the actual description after the PR is merged */ class ContextMenu extends UIComponent, any> { - public static displayName = 'ContextMenu' + static displayName = 'ContextMenu' - public static className = 'ui-contextmenu' + static className = 'ui-contextmenu' - public static propTypes = { + static propTypes = { /** An element type to render as (string or function). */ as: customPropTypes.as, @@ -45,18 +47,68 @@ class ContextMenu extends UIComponent, any> { variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } - public static defaultProps = { + static defaultProps = { as: 'div', } - public renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { - const { items, onItemClick } = this.props + constructor(props, context) { + super(props, context) + this.state = { + subMenuOpen: false, + menuItemKey: '', + } + } + + renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { return ( - + {this.renderItems()} ) } + + renderItems = () => { + const { items, onItemClick } = this.props + const itemProps = _.pick(this.props, List.itemProps) + itemProps.selection = true + itemProps.onClick = onItemClick + const children = _.map(items, item => { + if (item.menu !== undefined) { + return + } + return ListItem.create(item, { defaultProps: itemProps }) + }) + return {children} + } + + // processItems = () => { + // const { items } = this.props + // if (items !== undefined) { + // items.map(item => { + // if (item.menu) { + // item.onClick = () => { + // this.handleClick(item) + // } + // // item.content = + // } + // }) + // } + // } + + // handleClick = item => { + // this.setState(prevState => { + // if (prevState.subMenuOpen === false || prevState.menuItemKey !== item.menu.items) { + // return { + // subMenuOpen: true, + // menuItemKey: item.menu.items, + // } + // } + // return { + // subMenuOpen: !prevState.subMenuOpen, + // menuItemKey: item.menu.items, + // } + // }) + // } } export default ContextMenu diff --git a/src/components/ContextMenu/PopupWithSubmenu.tsx b/src/components/ContextMenu/PopupWithSubmenu.tsx index f282f5ee18..cdb023576e 100644 --- a/src/components/ContextMenu/PopupWithSubmenu.tsx +++ b/src/components/ContextMenu/PopupWithSubmenu.tsx @@ -1,8 +1,8 @@ import * as React from 'react' +import * as _ from 'lodash' import Popup from '../Popup/Popup' -import Icon from '../Icon' -import Divider from '../Divider' import ContextMenu from '../ContextMenu' +import List, { ListItem } from '../List' export class PopupWithSubmenu extends React.Component { state = { popupOpen: false } @@ -10,29 +10,18 @@ export class PopupWithSubmenu extends React.Component { this.setState(prev => ({ popupOpen: !prev.popupOpen })) } render = () => { - const { item, callback } = this.props + const { item, items, onItemClick } = this.props + const itemProps = _.pick(this.props, List.itemProps) + itemProps.onClick = this.togglePopupState + item.selection = true return ( - - { - this.setState({ popupOpen: newProps.open }) - }} - align="top" - position="after" - trigger={ -
this.togglePopupState()}> - {item.iconName ? ( - - ) : null} - {item.title} - -
- } - content={} - /> - {item.divider ? : null} - + } + /> ) } } diff --git a/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx b/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx index ec029ba899..2ff63a55b8 100644 --- a/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx +++ b/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx @@ -3,10 +3,10 @@ import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/t import { IContextMenuProps } from '../../../../components/ContextMenu/ContextMenu' const contextualMenuStyles: IComponentPartStylesInput = { - root: ({ props, variables: { height, maxWidth, padding, border } }): ICSSInJSStyle => { + root: ({ props, variables: { height, width, padding, border } }): ICSSInJSStyle => { const styles = { height, - maxWidth, + width, padding, border, } diff --git a/src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx b/src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx index 0514509ac3..ce06469694 100644 --- a/src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx +++ b/src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx @@ -1,13 +1,13 @@ export interface IContextMenuVariables { height: string - maxWidth: string + width: string padding?: string border?: string } export default (): IContextMenuVariables => ({ height: '100%', - maxWidth: '220px', + width: '220px', padding: '0', border: '1px solid #eeeeee', }) From 2a6664ef68fde91ed5e04eb10c26a656471fd66b Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 8 Oct 2018 11:38:23 +0530 Subject: [PATCH 18/25] Fix breaking code after rebasing --- src/components/ContextMenu/ContextMenu.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 5e024ededf..7104f1c84b 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -4,15 +4,14 @@ import * as React from 'react' import ReactNode = React.ReactNode import { UIComponent, customPropTypes, IRenderResultConfig } from '../../lib' import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' -import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils' +import { Extendable } from '../../../types/utils' import List, { ListItem } from '../List' -import { PopupWithSubmenu } from './PopupWithSubmenu' +import Popup from '../Popup' +// import { PopupWithSubmenu } from './PopupWithSubmenu' export interface IContextMenuProps { as?: any className?: string - children?: ReactChildren - content?: ItemShorthand | ItemShorthand[] styles?: ComponentPartStyle variables?: ComponentVariablesInput } @@ -74,7 +73,16 @@ class ContextMenu extends UIComponent, any> { itemProps.onClick = onItemClick const children = _.map(items, item => { if (item.menu !== undefined) { - return + return ( + } + > + {ListItem.create(item, { defaultProps: itemProps })} + + ) + // return } return ListItem.create(item, { defaultProps: itemProps }) }) From 41887886c18dedffbae0ade4da1f6745e27f9af0 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Mon, 8 Oct 2018 15:29:03 +0530 Subject: [PATCH 19/25] Fix test file --- .../ContextMenu-test.tsx} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename test/specs/components/{ContextualMenu/ContextualMenu-test.tsx => ContextMenu/ContextMenu-test.tsx} (51%) diff --git a/test/specs/components/ContextualMenu/ContextualMenu-test.tsx b/test/specs/components/ContextMenu/ContextMenu-test.tsx similarity index 51% rename from test/specs/components/ContextualMenu/ContextualMenu-test.tsx rename to test/specs/components/ContextMenu/ContextMenu-test.tsx index 739e4fd6f7..22d873add9 100644 --- a/test/specs/components/ContextualMenu/ContextualMenu-test.tsx +++ b/test/specs/components/ContextMenu/ContextMenu-test.tsx @@ -1,7 +1,7 @@ import { isConformant } from 'test/specs/commonTests' -import ContextualMenu from 'src/components/ContextualMenu' +import ContextMenu from 'src/components/ContextMenu' describe('ContextualMenu', () => { - isConformant(ContextualMenu) + isConformant(ContextMenu) }) From 549a4500ba8acabc24e2b3096ecf44b17829c4a1 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Tue, 9 Oct 2018 14:38:58 +0530 Subject: [PATCH 20/25] Code cleanup --- .../Types/ContextMenuExample.shorthand.tsx | 2 - src/components/ContextMenu/ContextMenu.tsx | 54 ++++--------------- .../ContextMenu/PopupWithSubmenu.tsx | 27 ---------- .../ContextMenu/ContextMenuStyles.tsx | 7 +-- .../ContextMenu/ContextMenuVariables.tsx | 4 +- .../components/Popup/popupContentVariables.ts | 2 +- tslint.json | 2 +- 7 files changed, 18 insertions(+), 80 deletions(-) delete mode 100644 src/components/ContextMenu/PopupWithSubmenu.tsx diff --git a/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx index 3b25a65529..097f0bad62 100644 --- a/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx @@ -15,7 +15,6 @@ const items = [ onClick: () => { alert('ListItem callback invoked..') }, - // divider: true, }, { key: 'menuItem2', @@ -37,7 +36,6 @@ const items = [ media: , header: 'Add to...', headerMedia: , - divider: true, menu: { items: [ { diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 7104f1c84b..850a3e601b 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -7,8 +7,6 @@ import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/them import { Extendable } from '../../../types/utils' import List, { ListItem } from '../List' import Popup from '../Popup' -// import { PopupWithSubmenu } from './PopupWithSubmenu' - export interface IContextMenuProps { as?: any className?: string @@ -50,14 +48,6 @@ class ContextMenu extends UIComponent, any> { as: 'div', } - constructor(props, context) { - super(props, context) - this.state = { - subMenuOpen: false, - menuItemKey: '', - } - } - renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { return ( @@ -68,55 +58,31 @@ class ContextMenu extends UIComponent, any> { renderItems = () => { const { items, onItemClick } = this.props - const itemProps = _.pick(this.props, List.itemProps) - itemProps.selection = true - itemProps.onClick = onItemClick const children = _.map(items, item => { + const itemProps = _.pick(this.props, List.itemProps) + itemProps.selection = true if (item.menu !== undefined) { return ( } + content={{ + content: , + styles: { + padding: '0px', + }, + }} + // content={} > {ListItem.create(item, { defaultProps: itemProps })} ) - // return } + itemProps.onClick = onItemClick return ListItem.create(item, { defaultProps: itemProps }) }) return {children} } - - // processItems = () => { - // const { items } = this.props - // if (items !== undefined) { - // items.map(item => { - // if (item.menu) { - // item.onClick = () => { - // this.handleClick(item) - // } - // // item.content = - // } - // }) - // } - // } - - // handleClick = item => { - // this.setState(prevState => { - // if (prevState.subMenuOpen === false || prevState.menuItemKey !== item.menu.items) { - // return { - // subMenuOpen: true, - // menuItemKey: item.menu.items, - // } - // } - // return { - // subMenuOpen: !prevState.subMenuOpen, - // menuItemKey: item.menu.items, - // } - // }) - // } } export default ContextMenu diff --git a/src/components/ContextMenu/PopupWithSubmenu.tsx b/src/components/ContextMenu/PopupWithSubmenu.tsx deleted file mode 100644 index cdb023576e..0000000000 --- a/src/components/ContextMenu/PopupWithSubmenu.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react' -import * as _ from 'lodash' -import Popup from '../Popup/Popup' -import ContextMenu from '../ContextMenu' -import List, { ListItem } from '../List' - -export class PopupWithSubmenu extends React.Component { - state = { popupOpen: false } - togglePopupState = () => { - this.setState(prev => ({ popupOpen: !prev.popupOpen })) - } - render = () => { - const { item, items, onItemClick } = this.props - const itemProps = _.pick(this.props, List.itemProps) - itemProps.onClick = this.togglePopupState - item.selection = true - return ( - } - /> - ) - } -} diff --git a/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx b/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx index 2ff63a55b8..207c5b6793 100644 --- a/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx +++ b/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx @@ -2,8 +2,9 @@ import { IContextMenuVariables } from './ContextMenuVariables' import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' import { IContextMenuProps } from '../../../../components/ContextMenu/ContextMenu' -const contextualMenuStyles: IComponentPartStylesInput = { - root: ({ props, variables: { height, width, padding, border } }): ICSSInJSStyle => { +const contextMenuStyles: IComponentPartStylesInput = { + root: ({ variables }): ICSSInJSStyle => { + const { height, width, padding, border } = variables const styles = { height, width, @@ -15,4 +16,4 @@ const contextualMenuStyles: IComponentPartStylesInput { return { backgroundColor: siteVars.white, borderColor: siteVars.gray06, - padding: `${pxToRem(0)} ${pxToRem(0)}`, + padding: `${pxToRem(10)} ${pxToRem(14)}`, zIndex: 1000, } } diff --git a/tslint.json b/tslint.json index dde0b7be4f..435283d1f1 100644 --- a/tslint.json +++ b/tslint.json @@ -4,7 +4,7 @@ "arrow-parens": false, "align": [false], "import-name": [false], - "linebreak-style": [false, "LF"], + "linebreak-style": [true, "LF"], "max-line-length": [false], "no-increment-decrement": false, "no-unused-variable": true, From 4322aa4052708326eb9c8711aadc13f63afd6ae2 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Tue, 9 Oct 2018 15:11:50 +0530 Subject: [PATCH 21/25] Rename ContextMenuVariables.tsx to contextMenuVariables.tsx --- .../{ContextMenuVariables.tsx => contextMenuVariables.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/themes/teams/components/ContextMenu/{ContextMenuVariables.tsx => contextMenuVariables.tsx} (100%) diff --git a/src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx b/src/themes/teams/components/ContextMenu/contextMenuVariables.tsx similarity index 100% rename from src/themes/teams/components/ContextMenu/ContextMenuVariables.tsx rename to src/themes/teams/components/ContextMenu/contextMenuVariables.tsx From 69b0027f6224618226be020277ac003ef4f43846 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Tue, 9 Oct 2018 15:12:03 +0530 Subject: [PATCH 22/25] Rename ContextMenuStyles.tsx to contextMenuStyles.tsx --- .../ContextMenu/{ContextMenuStyles.tsx => contextMenuStyles.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/themes/teams/components/ContextMenu/{ContextMenuStyles.tsx => contextMenuStyles.tsx} (100%) diff --git a/src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx b/src/themes/teams/components/ContextMenu/contextMenuStyles.tsx similarity index 100% rename from src/themes/teams/components/ContextMenu/ContextMenuStyles.tsx rename to src/themes/teams/components/ContextMenu/contextMenuStyles.tsx From 631df1a6841856c48b32d30776dca8fafb190c12 Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Tue, 9 Oct 2018 15:16:05 +0530 Subject: [PATCH 23/25] fix typo --- src/themes/teams/components/ContextMenu/contextMenuStyles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/teams/components/ContextMenu/contextMenuStyles.tsx b/src/themes/teams/components/ContextMenu/contextMenuStyles.tsx index 207c5b6793..6d771952cd 100644 --- a/src/themes/teams/components/ContextMenu/contextMenuStyles.tsx +++ b/src/themes/teams/components/ContextMenu/contextMenuStyles.tsx @@ -1,4 +1,4 @@ -import { IContextMenuVariables } from './ContextMenuVariables' +import { IContextMenuVariables } from './contextMenuVariables' import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme' import { IContextMenuProps } from '../../../../components/ContextMenu/ContextMenu' From 4916acee49c3777f513e3a687b75b7a98f395a0c Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Tue, 13 Nov 2018 17:43:18 +0530 Subject: [PATCH 24/25] Switch back from List to Menu --- .../Types/ContextMenuExample.shorthand.tsx | 120 ++---------------- src/components/ContextMenu/ContextMenu.tsx | 49 ++++--- .../ContextMenu/contextMenuVariables.tsx | 4 +- 3 files changed, 38 insertions(+), 135 deletions(-) diff --git a/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx index 097f0bad62..1452c253c4 100644 --- a/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx +++ b/docs/src/examples/components/ContextMenu/Types/ContextMenuExample.shorthand.tsx @@ -1,120 +1,28 @@ import React from 'react' -import { Avatar, ContextMenu, Icon } from '@stardust-ui/react' +import { ContextMenu } from '@stardust-ui/react' const items = [ { - key: 'menuItem0', - header: 'John Doe', - content: 'Saved on 10/5/2018', - media: , - }, - { - key: 'menuItem1', - media: , - header: 'Show in channel', - onClick: () => { - alert('ListItem callback invoked..') - }, - }, - { - key: 'menuItem2', - media: , - header: 'Edit', - }, - { - key: 'menuItem3', - media: , - header: 'Open in Word', - }, - { - key: 'menuItem4', - media: , - header: 'Get link', - }, - { - key: 'menuItem5', - media: , - header: 'Add to...', - headerMedia: , + key: 'show', + content: 'Show in channel', + icon: 'search', + divider: true, menu: { items: [ + { key: '1', content: 'item1' }, { - key: 'subItem0', - header: 'Click for callback', - }, - { - key: 'subItem1', - header: 'Click for callback', - }, - ], - }, - }, - { - key: 'menuItem6', - media: , - header: 'Move to collection', - headerMedia: , - menu: { - items: [ - { - key: 'subItem0', - header: 'Open Submenu 1.1', - menu: { - items: [ - { - key: 'subItem0', - header: 'Click for callback', - }, - { - key: 'subItem1', - header: 'Click for callback', - }, - ], - }, - }, - { - key: 'subItem1', - header: 'Click for callback', - }, - ], - }, - }, - { - key: 'menuItem7', - media: , - header: 'Copy to collection', - headerMedia: , - menu: { - items: [ - { - key: 'subItem0', - header: 'Click for callback', - }, - { - key: 'subItem1', - header: 'Click for callback', - }, - ], - }, - }, - { - key: 'menuItem8', - media: , - header: 'Remove', - headerMedia: , - menu: { - items: [ - { - key: 'subItem0', - header: 'Click for callback', - }, - { - key: 'subItem1', - header: 'Click for callback', + key: '2', + content: 'item2', + menu: { items: [{ key: '1', content: 'item1' }, { key: '2', content: 'item2' }] }, }, ], }, }, + { key: 'move', content: 'Move to collection', icon: 'arrow right' }, + { key: 'copy', content: 'Copy to collection', icon: 'copy' }, + { key: 'remove', content: 'Remove', icon: 'delete', divider: true }, + { key: 'edit', content: 'Edit', icon: 'edit' }, + { key: 'getlink', content: 'Get link', icon: 'file' }, ] const callback = () => { diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 850a3e601b..a7cab138d8 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -5,8 +5,9 @@ import ReactNode = React.ReactNode import { UIComponent, customPropTypes, IRenderResultConfig } from '../../lib' import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme' import { Extendable } from '../../../types/utils' -import List, { ListItem } from '../List' -import Popup from '../Popup' +import Menu, { MenuItem } from '../Menu' +// import List, { ListItem } from '../List' +// import Popup from '../Popup' export interface IContextMenuProps { as?: any className?: string @@ -51,37 +52,31 @@ class ContextMenu extends UIComponent, any> { renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { return ( - {this.renderItems()} + {this.renderItems1()} ) } - renderItems = () => { - const { items, onItemClick } = this.props - const children = _.map(items, item => { - const itemProps = _.pick(this.props, List.itemProps) - itemProps.selection = true - if (item.menu !== undefined) { - return ( - , + renderItems1 = () => { + const { items } = this.props + return ( + + {_.map(items, (item, index) => + MenuItem.create(item, { + defaultProps: { + index, styles: { - padding: '0px', + color: 'rgba(37,36,36,0.75)', + fontFamily: 'Segoe UI', + ...(item.divider && { + borderBottom: '2px solid #F3F2F1', + }), }, - }} - // content={} - > - {ListItem.create(item, { defaultProps: itemProps })} - - ) - } - itemProps.onClick = onItemClick - return ListItem.create(item, { defaultProps: itemProps }) - }) - return {children} + }, + }), + )} + + ) } } diff --git a/src/themes/teams/components/ContextMenu/contextMenuVariables.tsx b/src/themes/teams/components/ContextMenu/contextMenuVariables.tsx index 71982b9e9f..d35cbe2a10 100644 --- a/src/themes/teams/components/ContextMenu/contextMenuVariables.tsx +++ b/src/themes/teams/components/ContextMenu/contextMenuVariables.tsx @@ -7,7 +7,7 @@ export interface IContextMenuVariables { export default (): IContextMenuVariables => ({ height: '100%', - width: '220px', + width: '100%', padding: '0', - border: '1px solid #eeeeee', + // border: '1px solid #eeeeee', }) From 0b10e5f0021bfaae6b228d331b490d4d7830210d Mon Sep 17 00:00:00 2001 From: Gopal Goel Date: Fri, 16 Nov 2018 14:17:36 +0530 Subject: [PATCH 25/25] typo fix --- src/components/ContextMenu/ContextMenu.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index a7cab138d8..79081e678d 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -16,7 +16,7 @@ export interface IContextMenuProps { } /** - * A contextualMenu. + * A contextMenu. * @accessibility This is example usage of the accessibility tag. * This should be replaced with the actual description after the PR is merged */ @@ -35,7 +35,7 @@ class ContextMenu extends UIComponent, any> { /** The tree of menu containing submenus and it's submenus and so on. */ items: PropTypes.arrayOf(PropTypes.object), - /** Function passed which needs to be invoked when menuitem has no submenu */ + /** Function passed which needs to be invoked when the menuitem has no submenu. */ onItemClick: PropTypes.func, /** Custom styles to be applied for component. */ @@ -52,12 +52,12 @@ class ContextMenu extends UIComponent, any> { renderComponent({ ElementType, classes, rest }: IRenderResultConfig): ReactNode { return ( - {this.renderItems1()} + {this.renderItems()} ) } - renderItems1 = () => { + renderItems = () => { const { items } = this.props return (