From 4b19532e8cc7a3ef1bb76b8f19e129213e3b16e6 Mon Sep 17 00:00:00 2001 From: ShanaMaid Date: Tue, 30 Oct 2018 16:11:00 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8A=BD=E7=A6=BBPopover=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E5=A4=8D=E7=94=A8=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/PopOver/PopOver.tsx | 132 +++++++++++++++++++ components/PopOver/__tests__/e2e.test.tsx | 12 ++ components/PopOver/__tests__/props.test.tsx | 14 ++ components/PopOver/index.tsx | 3 + components/PopOver/style/index.js | 3 + components/PopOver/style/index.less | 9 ++ components/PopOver/style/less.js | 3 + components/PopOver/style/var.less | 1 + components/TimePicker/TimePicker.tsx | 139 +++++++------------- components/TimePicker/style/index.js | 3 +- components/TimePicker/style/less.js | 3 +- components/index.tsx | 2 + components/styles/components.less | 3 +- 13 files changed, 229 insertions(+), 98 deletions(-) create mode 100644 components/PopOver/PopOver.tsx create mode 100644 components/PopOver/__tests__/e2e.test.tsx create mode 100644 components/PopOver/__tests__/props.test.tsx create mode 100644 components/PopOver/index.tsx create mode 100644 components/PopOver/style/index.js create mode 100644 components/PopOver/style/index.less create mode 100644 components/PopOver/style/less.js create mode 100644 components/PopOver/style/var.less diff --git a/components/PopOver/PopOver.tsx b/components/PopOver/PopOver.tsx new file mode 100644 index 0000000..1066157 --- /dev/null +++ b/components/PopOver/PopOver.tsx @@ -0,0 +1,132 @@ +// tslint:disable no-any +import {Component} from 'react'; +import * as React from 'react'; +import {IBaseComponent} from '../template/component'; +import { RenderInRootDom } from '../utils/'; +import Helpers from '../Helpers'; +import Transitions from '../Transitions'; + +const { Scale } = Transitions; +const { ClickOutside } = Helpers; + +export interface IPopOverProps extends IBaseComponent { + /** + * 面板是否展开 + */ + open: boolean; + /** + * 面板展开回调 + */ + onOpenChange?: (v: boolean) => void; + /** + * 浮层内容 + */ + pop: any; + /** + * 进入后 + */ + onEntered?: () => void; +} + +export interface IPopOverState { + popPos: { + left: number; + top: number; + }; +} + +/** + * **组件中文名称**-组件描述。 + */ +export class PopOver extends Component { + preCls = 'yoshino-pop-over'; + refPopOverContainer: Element; + + static defaultProps = { + }; + + state = { + popPos: { + left: 0, + top: 0, + }, + }; + + setPopOverPosition = () => { + if (!this.refPopOverContainer) { + return; + } + const rect = this.refPopOverContainer.getBoundingClientRect(); + const pageY = window.pageYOffset; // 当前滚动条y轴偏移量 + const pageX = window.pageXOffset; // 当前滚动条x轴偏移量 + this.setState({ + popPos: { + left: rect.left + pageX, + top: rect.top + pageY, + } + }); + } + + onOpenChange = (open: boolean) => { + const { onOpenChange } = this.props; + if (onOpenChange) { + onOpenChange(open); + } + // 调整面板位置 + this.setPopOverPosition(); + } + + render() { + const { + children, pop, open, + onEntered, + } = this.props; + const preCls = this.preCls; + const child = React.Children.only(children); + return ( + + { + React.cloneElement(child, { + onClick: () => { + if (child.props.onClick) { + child.props.onClick(); + } + this.onOpenChange(true); + }, + ref: (v: any) => { + if (child.props.ref) { + child.props.ref(v); + } + if (v) { + this.refPopOverContainer = v; + } + } + }) + } + + { + this.onOpenChange(false); + }} + > +
+ { + if (onEntered) { + onEntered(); + } + }} + > + {pop} + +
+ + + + ); + } +} + +export default PopOver; diff --git a/components/PopOver/__tests__/e2e.test.tsx b/components/PopOver/__tests__/e2e.test.tsx new file mode 100644 index 0000000..9f2555b --- /dev/null +++ b/components/PopOver/__tests__/e2e.test.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils'; +import {findDOMNode} from 'react-dom'; +import PopOver from '../index'; + +describe('多选', () => { + test('点击其中一个选项后可通过 onChange 拿到最新的值', () => { + const component = renderIntoDocument( + , + ) as PopOver; + }); +}); diff --git a/components/PopOver/__tests__/props.test.tsx b/components/PopOver/__tests__/props.test.tsx new file mode 100644 index 0000000..67bccb7 --- /dev/null +++ b/components/PopOver/__tests__/props.test.tsx @@ -0,0 +1,14 @@ +import * as renderer from 'react-test-renderer'; +import * as React from 'react'; +import PopOver from '../index'; + +describe('Props', () => { + + test('默认', () => { + const component = renderer.create( + , + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/components/PopOver/index.tsx b/components/PopOver/index.tsx new file mode 100644 index 0000000..8aab80a --- /dev/null +++ b/components/PopOver/index.tsx @@ -0,0 +1,3 @@ +import PopOver from './PopOver'; + +export default PopOver; diff --git a/components/PopOver/style/index.js b/components/PopOver/style/index.js new file mode 100644 index 0000000..b8d82d5 --- /dev/null +++ b/components/PopOver/style/index.js @@ -0,0 +1,3 @@ +import '../../Transitions/style/'; +import '../../Helpers/style/'; +import './index.css'; \ No newline at end of file diff --git a/components/PopOver/style/index.less b/components/PopOver/style/index.less new file mode 100644 index 0000000..37f0937 --- /dev/null +++ b/components/PopOver/style/index.less @@ -0,0 +1,9 @@ +@import './var.less'; + +@popOver-prefix-cls: ~"@{css-prefix}-pop-over"; + +.@{popOver-prefix-cls} { + &-box { + position: absolute; + } +} diff --git a/components/PopOver/style/less.js b/components/PopOver/style/less.js new file mode 100644 index 0000000..1676c7a --- /dev/null +++ b/components/PopOver/style/less.js @@ -0,0 +1,3 @@ +import '../../Transitions/style/less.js'; +import '../../Helpers/style/less.js'; +import './index.less' \ No newline at end of file diff --git a/components/PopOver/style/var.less b/components/PopOver/style/var.less new file mode 100644 index 0000000..b514cfb --- /dev/null +++ b/components/PopOver/style/var.less @@ -0,0 +1 @@ +@import '../../styles/var.less'; diff --git a/components/TimePicker/TimePicker.tsx b/components/TimePicker/TimePicker.tsx index 2f62f63..1e539ef 100644 --- a/components/TimePicker/TimePicker.tsx +++ b/components/TimePicker/TimePicker.tsx @@ -5,14 +5,10 @@ import * as classNames from 'classnames'; import {IBaseComponent, TSize} from '../template/component'; import Input from '../Input'; import Icon from '../Icon'; -import Transitions from '../Transitions'; -import { RenderInRootDom, valueTransition } from '../utils/'; -import Helpers from '../Helpers'; +import { valueTransition } from '../utils/'; +import Popover from '../PopOver'; import * as moment from 'moment'; -const { Scale } = Transitions; -const { ClickOutside } = Helpers; - export interface ITimePickerProps extends IBaseComponent { /** * 默认提示文本 @@ -63,10 +59,6 @@ export interface ITimePickerProps extends IBaseComponent { } export interface ITimePickerState { - panelPos: { - left: number; - top: number; - }; open: boolean; value: string; } @@ -106,10 +98,6 @@ export class TimePicker extends Component { value: this.props.defaultValue!, }; - componentDidMount() { - this.setPanelPosition(); - } - getOpen = () => { const { open } = this.props; return open !== undefined ? open : this.state.open; @@ -120,21 +108,6 @@ export class TimePicker extends Component { return value !== undefined ? value : this.state.value; } - setPanelPosition = () => { - if (!this.refTimePickerConatainer) { - return; - } - const rect = this.refTimePickerConatainer.getBoundingClientRect(); - const pageY = window.pageYOffset; // 当前滚动条y轴偏移量 - const pageX = window.pageXOffset; // 当前滚动条x轴偏移量 - this.setState({ - panelPos: { - left: rect.left + pageX, - top: rect.top + pageY, - } - }); - } - renderSelectItem = (type: 'h' | 'm' | 's') => { const values: string[] = []; let selectedItem = 0; @@ -263,9 +236,6 @@ export class TimePicker extends Component { open, }); }, 10); - - // 调整面板位置 - this.setPanelPosition(); } onChange = (value: string) => { @@ -292,70 +262,53 @@ export class TimePicker extends Component { ); const valueR = this.getValue(); const openR = this.getOpen(); - return ( -
{ - if (v) { - this.refTimePickerConatainer = v; - } - }} - {...otherProps} - > - - - - { - this.onOpenChange(false); + const pop = ( +
+
+ { + if (v) { + this.refPanelInput = v; + } }} - > -
- { - if (this.refPanelInput) { - this.refPanelInput.focus(); - } - }} - > -
-
- { - if (v) { - this.refPanelInput = v; - } - }} - /> - -
-
- {disabledHours ? null : this.renderSelectItem('h')} - {disabledMinutes ? null : this.renderSelectItem('m')} - {disabledSeconds ? null : this.renderSelectItem('s')} -
-
- -
- - + /> + +
+
+ {disabledHours ? null : this.renderSelectItem('h')} + {disabledMinutes ? null : this.renderSelectItem('m')} + {disabledSeconds ? null : this.renderSelectItem('s')} +
); + return ( + +
+ + +
+ + ); } } diff --git a/components/TimePicker/style/index.js b/components/TimePicker/style/index.js index a3eaf4c..bdc886e 100644 --- a/components/TimePicker/style/index.js +++ b/components/TimePicker/style/index.js @@ -1,5 +1,4 @@ import '../../Icon/style/'; import '../../Input/style/'; -import '../../Transitions/style/'; -import '../../Helpers/style/'; +import '../../PopOver/style/'; import './index.css'; diff --git a/components/TimePicker/style/less.js b/components/TimePicker/style/less.js index 9ce9465..9a814f2 100644 --- a/components/TimePicker/style/less.js +++ b/components/TimePicker/style/less.js @@ -1,5 +1,4 @@ import '../../Icon/style/less.js'; import '../../Input/style/less.js'; -import '../../Transitions/style/less.js'; -import '../../Helpers/style/less.js'; +import '../../PopOver/style/less.js'; import './index.less'; diff --git a/components/index.tsx b/components/index.tsx index 3a59bab..423c2d1 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -23,6 +23,7 @@ import Modal from './Modal'; import Notification from './Notification'; import Pagination from './Pagination'; import Pop from './Pop'; +import PopOver from './PopOver'; import Progress from './Progress'; import Radio from './Radio'; import Rate from './Rate'; @@ -65,6 +66,7 @@ export { Notification, Pagination, Pop, + PopOver, Progress, Radio, Rate, diff --git a/components/styles/components.less b/components/styles/components.less index 68cd1e5..535fcc0 100644 --- a/components/styles/components.less +++ b/components/styles/components.less @@ -37,4 +37,5 @@ @import '../Carousel/style/index'; @import '../Tabs/style/index'; @import '../Grid/style/index'; -@import '../TimePicker/style/index'; \ No newline at end of file +@import '../TimePicker/style/index'; +@import '../PopOver/style/index'; \ No newline at end of file