From fa130ecca6509dde9be8ac66227588e3275f32ce Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 14 Feb 2018 09:25:51 -0800 Subject: [PATCH 1/9] initial commit --- .../src/components/Layer/Layer.base.tsx | 177 ++++++++++++++++++ .../src/components/Layer/Layer.styles.ts | 37 ++++ .../src/components/Layer/Layer.tsx | 172 ++--------------- .../src/components/Layer/Layer.types.ts | 45 ++++- .../src/components/Layer/LayerHost.tsx | 8 +- .../Layer/examples/Layer.Basic.Example.tsx | 9 +- .../Layer/examples/Layer.Hosted.Example.tsx | 10 +- 7 files changed, 285 insertions(+), 173 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx create mode 100644 packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx new file mode 100644 index 00000000000000..7a1e5b44321caf --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx @@ -0,0 +1,177 @@ +/* tslint:disable:no-unused-variable */ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +/* tslint:enable:no-unused-variable */ + +import { Fabric } from '../../Fabric'; +import { + ILayerProps, + ILayerStyleProps, + ILayerStyles, +} from './Layer.types'; +import { + css, + BaseComponent, + classNamesFunction, + customizable, + getDocument, + setVirtualParent +} from '../../Utilities'; +import * as stylesImport from './Layer.scss'; +const styles: any = stylesImport; + +let _layersByHostId: { [hostId: string]: LayerBase[] } = {}; +let _defaultHostSelector: string | undefined; + +const getClassNames = classNamesFunction(); + +@customizable('Layer', ['theme']) +export class LayerBase extends BaseComponent { + + public static defaultProps: ILayerProps = { + onLayerDidMount: () => undefined, + onLayerWillUnmount: () => undefined + }; + + private _rootElement: HTMLElement; + private _host: Node; + private _layerElement: HTMLElement | undefined; + private _hasMounted: boolean; + /** + * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that + * care about the specific host. + */ + public static notifyHostChanged(id: string) { + if (_layersByHostId[id]) { + _layersByHostId[id].forEach(layer => layer.forceUpdate()); + } + } + + /** + * Sets the default target selector to use when determining the host in which + * Layered content will be injected into. If not provided, an element will be + * created at the end of the document body. + * + * Passing in a falsey value will clear the default target and reset back to + * using a created element at the end of document body. + */ + public static setDefaultTarget(selector?: string) { + _defaultHostSelector = selector; + } + + constructor(props: ILayerProps) { + super(props); + + this._warnDeprecations({ + onLayerMounted: 'onLayerDidMount' + }); + + if (this.props.hostId) { + if (!_layersByHostId[this.props.hostId]) { + _layersByHostId[this.props.hostId] = []; + } + + _layersByHostId[this.props.hostId].push(this); + } + } + + public componentDidMount() { + this.componentDidUpdate(); + } + + public componentWillUnmount() { + this._removeLayerElement(); + + if (this.props.hostId) { + _layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(layer => layer !== this); + if (!_layersByHostId[this.props.hostId].length) { + delete _layersByHostId[this.props.hostId]; + } + } + } + + public componentDidUpdate() { + let host = this._getHost(); + + const { getStyles, theme } = this.props; + const classNames = getClassNames(getStyles!, { theme: theme! }); + + if (host !== this._host) { + this._removeLayerElement(); + } + + if (host) { + this._host = host; + + if (!this._layerElement) { + let doc = getDocument(this._rootElement) as Document; + + this._layerElement = doc.createElement('div'); + this._layerElement.className = css('ms-Layer', { + ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId + }); + + host.appendChild(this._layerElement); + setVirtualParent(this._layerElement, this._rootElement); + } + + // Using this 'unstable' method allows us to retain the React context across the layer projection. + ReactDOM.unstable_renderSubtreeIntoContainer( + this, + ( + // + + { this.props.children } + + ), + this._layerElement, + () => { + if (!this._hasMounted) { + this._hasMounted = true; + + // TODO: @deprecated cleanup required. + if (this.props.onLayerMounted) { + this.props.onLayerMounted(); + } + + this.props.onLayerDidMount!(); + } + }); + } + } + + public render() { + return ( + + ); + } + + private _removeLayerElement() { + if (this._layerElement) { + this.props.onLayerWillUnmount!(); + + ReactDOM.unmountComponentAtNode(this._layerElement); + let parentNode = this._layerElement.parentNode; + if (parentNode) { + parentNode.removeChild(this._layerElement); + } + this._layerElement = undefined; + this._hasMounted = false; + } + } + + private _getHost(): Node { + let { hostId } = this.props; + let doc = getDocument(this._rootElement) as Document; + + if (hostId) { + return doc.getElementById(hostId) as Node; + } else { + return _defaultHostSelector ? doc.querySelector(_defaultHostSelector) as Node : doc.body; + } + } + +} diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts new file mode 100644 index 00000000000000..d9d9420e779fb5 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts @@ -0,0 +1,37 @@ +import { ILayerStyleProps, ILayerStyles } from './Layer.types'; +import { + IStyle, + ITheme, +} from '../../Styling'; + +export const getStyles = ( + props: ILayerStyleProps +): ILayerStyles => { + const { + className, + theme, + } = props; + + const { palette, semanticColors } = theme; + + return ({ + root: [ + 'ms-Layer', + { + position: 'fixed', + zIndex: 1000000, + top: 0, + left: 0, + width: '100vw', + height: '100vh', + visibility: 'hidden' + } + ], + content: [ + 'ms-Layer-content', + { + visibility: 'visible' + } + ] + }); +}; diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx index ad7b7b0845d113..0cdd7535ca9dcd 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx @@ -1,159 +1,13 @@ -/* tslint:disable:no-unused-variable */ -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -/* tslint:enable:no-unused-variable */ - -import { Fabric } from '../../Fabric'; -import { ILayerProps } from './Layer.types'; -import { css, BaseComponent, getDocument, setVirtualParent } from '../../Utilities'; -import * as stylesImport from './Layer.scss'; -const styles: any = stylesImport; - -let _layersByHostId: { [hostId: string]: Layer[] } = {}; -let _defaultHostSelector: string | undefined; - -export class Layer extends BaseComponent { - - public static defaultProps: ILayerProps = { - onLayerDidMount: () => undefined, - onLayerWillUnmount: () => undefined - }; - - private _rootElement: HTMLElement; - private _host: Node; - private _layerElement: HTMLElement | undefined; - private _hasMounted: boolean; - /** - * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that - * care about the specific host. - */ - public static notifyHostChanged(id: string) { - if (_layersByHostId[id]) { - _layersByHostId[id].forEach(layer => layer.forceUpdate()); - } - } - - /** - * Sets the default target selector to use when determining the host in which - * Layered content will be injected into. If not provided, an element will be - * created at the end of the document body. - * - * Passing in a falsey value will clear the default target and reset back to - * using a created element at the end of document body. - */ - public static setDefaultTarget(selector?: string) { - _defaultHostSelector = selector; - } - - constructor(props: ILayerProps) { - super(props); - - this._warnDeprecations({ - onLayerMounted: 'onLayerDidMount' - }); - - if (this.props.hostId) { - if (!_layersByHostId[this.props.hostId]) { - _layersByHostId[this.props.hostId] = []; - } - - _layersByHostId[this.props.hostId].push(this); - } - } - - public componentDidMount() { - this.componentDidUpdate(); - } - - public componentWillUnmount() { - this._removeLayerElement(); - - if (this.props.hostId) { - _layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(layer => layer !== this); - if (!_layersByHostId[this.props.hostId].length) { - delete _layersByHostId[this.props.hostId]; - } - } - } - - public componentDidUpdate() { - let host = this._getHost(); - - if (host !== this._host) { - this._removeLayerElement(); - } - - if (host) { - this._host = host; - - if (!this._layerElement) { - let doc = getDocument(this._rootElement) as Document; - - this._layerElement = doc.createElement('div'); - this._layerElement.className = css('ms-Layer', { - ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId - }); - - host.appendChild(this._layerElement); - setVirtualParent(this._layerElement, this._rootElement); - } - - // Using this 'unstable' method allows us to retain the React context across the layer projection. - ReactDOM.unstable_renderSubtreeIntoContainer( - this, - ( - - { this.props.children } - - ), - this._layerElement, - () => { - if (!this._hasMounted) { - this._hasMounted = true; - - // TODO: @deprecated cleanup required. - if (this.props.onLayerMounted) { - this.props.onLayerMounted(); - } - - this.props.onLayerDidMount!(); - } - }); - } - } - - public render() { - return ( - - ); - } - - private _removeLayerElement() { - if (this._layerElement) { - this.props.onLayerWillUnmount!(); - - ReactDOM.unmountComponentAtNode(this._layerElement); - let parentNode = this._layerElement.parentNode; - if (parentNode) { - parentNode.removeChild(this._layerElement); - } - this._layerElement = undefined; - this._hasMounted = false; - } - } - - private _getHost(): Node { - let { hostId } = this.props; - let doc = getDocument(this._rootElement) as Document; - - if (hostId) { - return doc.getElementById(hostId) as Node; - } else { - return _defaultHostSelector ? doc.querySelector(_defaultHostSelector) as Node : doc.body; - } - } - -} +import { styled } from '../../Utilities'; +import { + ILayerProps, + ILayerStyleProps, + ILayerStyles +} from './Layer.types'; +import { LayerBase } from './Layer.base'; +import { getStyles } from './Layer.styles'; + +export const Layer = styled( + LayerBase, + getStyles +); diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts index fb6f36842cef02..658599c00eed38 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts @@ -1,17 +1,35 @@ import * as React from 'react'; -import { Layer } from './Layer'; +import { LayerBase } from './Layer.base'; +import { IStyle, ITheme } from '../../Styling'; +import { IStyleFunction } from '../../Utilities'; export interface ILayer { } -export interface ILayerProps extends React.HTMLAttributes { +export interface ILayerProps extends React.HTMLAttributes { /** * Optional callback to access the ILayer interface. Use this instead of ref for accessing * the public methods and properties of the component. */ componentRef?: (component: ILayer) => void; + /** + * Call to provide customized styling that will layer on top of the variant rules + */ + getStyles?: IStyleFunction; + + /** + * Theme provided by HOC. + */ + theme?: ITheme; + + /** + * Additional css class to apply to the Layer + * @defaultvalue undefined + */ + className?: string; + /** Callback for when the layer is mounted. */ onLayerMounted?: () => void; @@ -33,3 +51,26 @@ export interface ILayerProps extends React.HTMLAttributes { @@ -15,11 +15,11 @@ export class LayerHost extends BaseComponent { } public componentDidMount() { - Layer.notifyHostChanged(this.props.id!); + LayerBase.notifyHostChanged(this.props.id!); } public componentWillUnmount() { - Layer.notifyHostChanged(this.props.id!); + LayerBase.notifyHostChanged(this.props.id!); } public render() { diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx index 369e6829b2bc40..65464d43b5f13a 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx @@ -2,10 +2,11 @@ import * as React from 'react'; // tslint:disable-line:no-unused-variable import * as PropTypes from 'prop-types'; import './Layer.Example.scss'; import '../../../common/_exampleStyles.scss'; -import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; -import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; -import { Layer } from 'office-ui-fabric-react/lib/Layer'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; +import { autobind, BaseComponent } from '../../../Utilities'; +import { Checkbox } from '../../../Checkbox'; +// import { Layer } from 'office-ui-fabric-react/lib/Layer'; +import { Layer } from '../Layer'; +// import { autobind } from '../../../Utilities'; import { AnimationClassNames } from '../../../Styling'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx index 0dc249b832cfed..5ff7bbc35f528b 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { autobind } from 'office-ui-fabric-react/lib/Utilities'; -import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; -import { Layer, LayerHost } from 'office-ui-fabric-react/lib/Layer'; -import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; +import { autobind } from '../../../Utilities'; +import { Checkbox } from '../../../Checkbox'; +// import { Layer, LayerHost } from 'office-ui-fabric-react/lib/Layer'; +import { Layer } from '../Layer'; +import { LayerHost } from '../LayerHost'; +import { Toggle } from '../../../Toggle'; import { AnimationClassNames } from '../../../Styling'; import './Layer.Example.scss'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; From 58531b64b9002fc3df63105c4b18702f8f4af07f Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 14 Feb 2018 13:16:55 -0800 Subject: [PATCH 2/9] Theme decorater causing bug with static classes --- .../src/components/Layer/Layer.base.tsx | 6 +++++- .../src/components/Layer/LayerHost.tsx | 4 +--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx index 7a1e5b44321caf..f97cfb9d62c3d7 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx @@ -25,7 +25,7 @@ let _defaultHostSelector: string | undefined; const getClassNames = classNamesFunction(); -@customizable('Layer', ['theme']) +// @customizable('Layer', ['theme']) export class LayerBase extends BaseComponent { public static defaultProps: ILayerProps = { @@ -47,6 +47,10 @@ export class LayerBase extends BaseComponent { } } + public static myTestFunction(s: string) { + console.log(`inside ${s}`); + } + /** * Sets the default target selector to use when determining the host in which * Layered content will be injected into. If not provided, an element will be diff --git a/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx index 4882bbfc506c84..054c08096c93d1 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx @@ -3,9 +3,7 @@ import { BaseComponent, css } from '../../Utilities'; -import { - LayerBase -} from './Layer.base'; +import { LayerBase } from './Layer.base'; import { ILayerHostProps } from './LayerHost.types'; export class LayerHost extends BaseComponent { From 848f05c10df213fbd6fd6518d235bbf0e3c6c236 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 14 Feb 2018 14:58:25 -0800 Subject: [PATCH 3/9] disable theme props --- .../office-ui-fabric-react/src/components/Layer/Layer.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts index d9d9420e779fb5..e50573e2613db7 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts @@ -12,7 +12,7 @@ export const getStyles = ( theme, } = props; - const { palette, semanticColors } = theme; + // const { palette, semanticColors } = theme; return ({ root: [ From 0865bf80870dd04b0da3a630dc56487011e613de Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 14 Feb 2018 15:46:29 -0800 Subject: [PATCH 4/9] fixed contextualmenu test import of Layer-LayerBase --- .../layer-scss2ms_2018-02-14-22-55.json | 11 +++++++++++ .../components/ContextualMenu/ContextualMenu.test.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 common/changes/office-ui-fabric-react/layer-scss2ms_2018-02-14-22-55.json diff --git a/common/changes/office-ui-fabric-react/layer-scss2ms_2018-02-14-22-55.json b/common/changes/office-ui-fabric-react/layer-scss2ms_2018-02-14-22-55.json new file mode 100644 index 00000000000000..60e9c25fa5bf09 --- /dev/null +++ b/common/changes/office-ui-fabric-react/layer-scss2ms_2018-02-14-22-55.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Convert Layer component to mergeStyles", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-brgarl@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx index 628199910bb4e9..fc2579800a3fd7 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx @@ -10,7 +10,7 @@ import { FocusZoneDirection } from '../../FocusZone'; import { ContextualMenu, canAnyMenuItemsCheck } from './ContextualMenu'; import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types'; -import { Layer } from '../Layer/Layer'; +import { LayerBase as Layer } from '../Layer/Layer.base'; import { mount } from 'enzyme'; describe('ContextualMenu', () => { From 12b8d61751fe6909b44d2bba577c66c50b29a9be Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 14 Feb 2018 16:53:47 -0800 Subject: [PATCH 5/9] applied classNames --- .../src/components/Layer/Layer.base.tsx | 20 +++++++++---------- .../src/components/Layer/Layer.styles.ts | 3 ++- .../src/components/Layer/Layer.types.ts | 7 ++++++- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx index f97cfb9d62c3d7..d1715f5d3085a0 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx @@ -17,8 +17,8 @@ import { getDocument, setVirtualParent } from '../../Utilities'; -import * as stylesImport from './Layer.scss'; -const styles: any = stylesImport; +// import * as stylesImport from './Layer.scss'; +// const styles: any = stylesImport; let _layersByHostId: { [hostId: string]: LayerBase[] } = {}; let _defaultHostSelector: string | undefined; @@ -47,10 +47,6 @@ export class LayerBase extends BaseComponent { } } - public static myTestFunction(s: string) { - console.log(`inside ${s}`); - } - /** * Sets the default target selector to use when determining the host in which * Layered content will be injected into. If not provided, an element will be @@ -98,7 +94,12 @@ export class LayerBase extends BaseComponent { let host = this._getHost(); const { getStyles, theme } = this.props; - const classNames = getClassNames(getStyles!, { theme: theme! }); + const classNames = getClassNames(getStyles!, + { + theme: theme!, + isNotHost: !this.props.hostId + } + ); if (host !== this._host) { this._removeLayerElement(); @@ -111,9 +112,8 @@ export class LayerBase extends BaseComponent { let doc = getDocument(this._rootElement) as Document; this._layerElement = doc.createElement('div'); - this._layerElement.className = css('ms-Layer', { - ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId - }); + // this._layerElement.className = css('ms-Layer', { ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId }); + this._layerElement.className = classNames.root; host.appendChild(this._layerElement); setVirtualParent(this._layerElement, this._rootElement); diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts index e50573e2613db7..9c4d5b031dd504 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts @@ -10,6 +10,7 @@ export const getStyles = ( const { className, theme, + isNotHost } = props; // const { palette, semanticColors } = theme; @@ -17,7 +18,7 @@ export const getStyles = ( return ({ root: [ 'ms-Layer', - { + isNotHost && 'ms-Layer--fixed' && { position: 'fixed', zIndex: 1000000, top: 0, diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts index 658599c00eed38..7b4151727ecdfe 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts @@ -62,11 +62,16 @@ export interface ILayerStyleProps { * Accept custom classNames */ className?: string; + + /** + * Check if Host + */ + isNotHost?: boolean; } export interface ILayerStyles { /** - * Style for the root element. + * Style for the root element when fixed. */ root?: IStyle; /** From 1a4b677fedb34c2d3662491948ea6104f529d64e Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 15 Feb 2018 11:25:59 -0800 Subject: [PATCH 6/9] removed comments --- .../src/components/Layer/Layer.base.tsx | 4 ---- .../src/components/Layer/Layer.scss | 13 ------------- 2 files changed, 17 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/Layer/Layer.scss diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx index d1715f5d3085a0..bcfcf05bb3ff69 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx @@ -17,8 +17,6 @@ import { getDocument, setVirtualParent } from '../../Utilities'; -// import * as stylesImport from './Layer.scss'; -// const styles: any = stylesImport; let _layersByHostId: { [hostId: string]: LayerBase[] } = {}; let _defaultHostSelector: string | undefined; @@ -112,7 +110,6 @@ export class LayerBase extends BaseComponent { let doc = getDocument(this._rootElement) as Document; this._layerElement = doc.createElement('div'); - // this._layerElement.className = css('ms-Layer', { ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId }); this._layerElement.className = classNames.root; host.appendChild(this._layerElement); @@ -123,7 +120,6 @@ export class LayerBase extends BaseComponent { ReactDOM.unstable_renderSubtreeIntoContainer( this, ( - // { this.props.children } diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss b/packages/office-ui-fabric-react/src/components/Layer/Layer.scss deleted file mode 100644 index f09d8c521d96e5..00000000000000 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss +++ /dev/null @@ -1,13 +0,0 @@ -.rootIsFixed { - position: fixed; - z-index: 1000000; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - visibility: hidden; -} - -.content { - visibility: visible; -} From a7b39b3287a9dbe3815db034047ab2073e0e59e5 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 15 Feb 2018 12:45:17 -0800 Subject: [PATCH 7/9] fixed styles for default host functionality --- .../src/components/Layer/Layer.styles.ts | 22 ++++++++------ .../Layer/examples/Layer.Hosted.Example.tsx | 29 ++++++++++++++++++- 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts index 9c4d5b031dd504..47ba53723ec2be 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts @@ -18,15 +18,19 @@ export const getStyles = ( return ({ root: [ 'ms-Layer', - isNotHost && 'ms-Layer--fixed' && { - position: 'fixed', - zIndex: 1000000, - top: 0, - left: 0, - width: '100vw', - height: '100vh', - visibility: 'hidden' - } + isNotHost && [ + 'ms-Layer--fixed', + { + position: 'fixed', + zIndex: 1000000, + top: 0, + left: 0, + width: '100vw', + height: '100vh', + visibility: 'hidden' + } + ], + className ], content: [ 'ms-Layer-content', diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx index 5ff7bbc35f528b..275ddcabe83d0e 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx @@ -12,6 +12,7 @@ const exampleStyles: any = exampleStylesImport; export class LayerHostedExample extends React.Component<{}, { showLayer: boolean; + showLayerNoId: boolean; showHost: boolean; }> { @@ -19,12 +20,13 @@ export class LayerHostedExample extends React.Component<{}, { super(props); this.state = { showLayer: false, + showLayerNoId: false, showHost: true }; } public render() { - let { showLayer, showHost } = this.state; + let { showLayer, showLayerNoId, showHost } = this.state; let content = (
This is example layer content. @@ -66,6 +68,26 @@ export class LayerHostedExample extends React.Component<{}, {
I am normally below the content.
+

+ If you do not specify a hostId then the hosted layer will default to being fixed to the page by default. +

+ + + + { showLayerNoId ? ( + + { content } + + ) : content } +
); } @@ -81,6 +103,11 @@ export class LayerHostedExample extends React.Component<{}, { this.setState({ showLayer: checked }); } + @autobind + private _onChangeCheckboxNoId(ev: React.FormEvent, checked: boolean): void { + this.setState({ showLayerNoId: checked }); + } + @autobind private _onChangeToggle(checked: boolean): void { this.setState({ showHost: checked }); From dbc609a3f62b619a6f9b4fc406fcacbc7c078df3 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Fri, 16 Feb 2018 16:30:13 -0800 Subject: [PATCH 8/9] fixed component prop className, and added usage to example --- .../office-ui-fabric-react/src/components/Layer/Layer.base.tsx | 3 ++- .../src/components/Layer/examples/Layer.Hosted.Example.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx index bcfcf05bb3ff69..086cf32736fa66 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx @@ -91,10 +91,11 @@ export class LayerBase extends BaseComponent { public componentDidUpdate() { let host = this._getHost(); - const { getStyles, theme } = this.props; + const { className, getStyles, theme } = this.props; const classNames = getClassNames(getStyles!, { theme: theme!, + className, isNotHost: !this.props.hostId } ); diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx index 275ddcabe83d0e..e4e9c46c1ac515 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx @@ -61,6 +61,7 @@ export class LayerHostedExample extends React.Component<{}, { hostId='layerhost1' onLayerDidMount={ this._log('didmount') } onLayerWillUnmount={ this._log('willunmount') } + className={ 'exampleLayerClassName' } > { content } From 0be6aee1963c8e5cfe6cbfeed3521146834a2ea3 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Fri, 16 Feb 2018 17:00:49 -0800 Subject: [PATCH 9/9] cleaned up imports in example files --- .../src/components/Layer/examples/Layer.Basic.Example.tsx | 2 -- .../src/components/Layer/examples/Layer.Hosted.Example.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx index 65464d43b5f13a..cf5d19a3c73339 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx @@ -4,9 +4,7 @@ import './Layer.Example.scss'; import '../../../common/_exampleStyles.scss'; import { autobind, BaseComponent } from '../../../Utilities'; import { Checkbox } from '../../../Checkbox'; -// import { Layer } from 'office-ui-fabric-react/lib/Layer'; import { Layer } from '../Layer'; -// import { autobind } from '../../../Utilities'; import { AnimationClassNames } from '../../../Styling'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx index e4e9c46c1ac515..c08d57d62d8deb 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { autobind } from '../../../Utilities'; import { Checkbox } from '../../../Checkbox'; -// import { Layer, LayerHost } from 'office-ui-fabric-react/lib/Layer'; import { Layer } from '../Layer'; import { LayerHost } from '../LayerHost'; import { Toggle } from '../../../Toggle';