From a948f5fa4d5cb9719108438724006fe9084c0e14 Mon Sep 17 00:00:00 2001 From: badim Date: Wed, 11 Jan 2017 16:37:27 +0200 Subject: [PATCH 1/2] vertical popup offset --- src/modules/Popup/Popup.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index a177798f53..8c7592e8f1 100644 --- a/src/modules/Popup/Popup.js +++ b/src/modules/Popup/Popup.js @@ -76,6 +76,9 @@ export default class Popup extends Component { /** Horizontal offset in pixels to be applied to the popup */ offset: PropTypes.number, + /** Vertical offset in pixels to be applied to the popup */ + verticalOffset: PropTypes.number, + /** Event triggering the popup */ on: PropTypes.oneOf(_meta.props.on), @@ -144,7 +147,7 @@ export default class Popup extends Component { // Do not access window/document when server side rendering if (!isBrowser) return style - const { offset } = this.props + const { offset, verticalOffset } = this.props const { pageYOffset, pageXOffset } = window const { clientWidth, clientHeight } = document.documentElement @@ -187,6 +190,14 @@ export default class Popup extends Component { } } + if (verticalOffset) { + if (_.isNumber(style.top)) { + style.top -= verticalOffset + } else { + style.bottom -= verticalOffset + } + } + return style } From 290a41aae9ba7d61ad291c9933c191474e8178b8 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Thu, 1 Jun 2017 16:10:23 +0300 Subject: [PATCH 2/2] feat(Popup): add vertical offset --- src/collections/Message/Message.d.ts | 2 +- src/modules/Popup/Popup.d.ts | 2 +- src/modules/Popup/Popup.js | 45 +++++++++++++++----------- test/specs/modules/Popup/Popup-test.js | 11 ++++--- 4 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/collections/Message/Message.d.ts b/src/collections/Message/Message.d.ts index c25d6198aa..4020a2c5ed 100644 --- a/src/collections/Message/Message.d.ts +++ b/src/collections/Message/Message.d.ts @@ -9,7 +9,7 @@ import { default as MessageList } from './MessageList'; export interface MessageProps { [key: string]: any; - /** An element type to render as (string or function). */ + /** An element type to render as (string or function). */ as?: any; /** A message can be formatted to attach itself to other content. */ diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts index 74f2a96b87..897dfb2bf6 100644 --- a/src/modules/Popup/Popup.d.ts +++ b/src/modules/Popup/Popup.d.ts @@ -35,7 +35,7 @@ export interface PopupProps extends PortalProps { inverted?: boolean; /** Horizontal offset in pixels to be applied to the popup. */ - offset?: number; + offset?: number | Array; /** Event triggering the popup. */ on?: 'hover' | 'click' | 'focus'; diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index 8b4ce7ab57..9cdb42721a 100644 --- a/src/modules/Popup/Popup.js +++ b/src/modules/Popup/Popup.js @@ -68,7 +68,10 @@ export default class Popup extends Component { inverted: PropTypes.bool, /** Horizontal offset in pixels to be applied to the Popup. */ - offset: PropTypes.number, + offset: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.number, + ]), /** Event triggering the popup. */ on: PropTypes.oneOf(['hover', 'click', 'focus']), @@ -126,6 +129,7 @@ export default class Popup extends Component { static defaultProps = { position: 'top left', + offset: 0, on: 'hover', } @@ -139,13 +143,32 @@ export default class Popup extends Component { state = {} + computeHorizontalOffset = ({ left, right }, offset) => { + if (_.isNumber(right)) return { left, right: right - offset } + return { right, left: left - offset } + } + + computeVerticalOffset = ({ bottom, top }, offset) => { + if (_.isNumber(top)) return { bottom, top: top + offset } + return { top, bottom: bottom + offset } + } + + computeOffset = style => { + const { offset } = this.props + const [horizontal, vertical] = _.isNumber(offset) ? [offset, 0] : offset + + return { + ...this.computeHorizontalOffset(style, horizontal), + ...this.computeVerticalOffset(style, vertical), + } + } + computePopupStyle(positions) { const style = { position: 'absolute' } // Do not access window/document when server side rendering if (!isBrowser) return style - const { offset } = this.props const { pageYOffset, pageXOffset } = window const { clientWidth, clientHeight } = document.documentElement @@ -180,23 +203,7 @@ export default class Popup extends Component { } } - if (offset) { - if (_.isNumber(style.right)) { - style.right -= offset - } else { - style.left -= offset - } - } - - if (verticalOffset) { - if (_.isNumber(style.top)) { - style.top -= verticalOffset - } else { - style.bottom -= verticalOffset - } - } - - return style + return { ...style, ...this.computeOffset(style) } } // check if the style would display diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js index 14a0a2696c..a4f0f03b08 100644 --- a/test/specs/modules/Popup/Popup-test.js +++ b/test/specs/modules/Popup/Popup-test.js @@ -78,8 +78,8 @@ describe('Popup', () => { assertInBody('.ui.popup.visible.some-class') }) - describe('offest', () => { - it('accepts an offest to the left', () => { + describe('offset', () => { + it('accepts an offset as number', () => { wrapperMount( { wrapper.find('button').simulate('click') assertInBody('.ui.popup.visible') }) - it('accepts an offest to the right', () => { + + it('accepts an offset as array', () => { wrapperMount( foo} />