From 270037a489782542e62ca8400349d0c92ced4875 Mon Sep 17 00:00:00 2001 From: bang88 Date: Sat, 26 Jan 2019 15:33:21 +0800 Subject: [PATCH 1/4] refactor: popover fixes #285 --- .jest.config.js | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 2624 ++++++++++++++++- components/popover/demo/basic.tsx | 70 +- components/popover/index.tsx | 141 +- components/popover/style/index.tsx | 23 + package.json | 2 +- typings/custom.d.ts | 2 - yarn.lock | 23 +- 8 files changed, 2738 insertions(+), 149 deletions(-) create mode 100644 components/popover/style/index.tsx diff --git a/.jest.config.js b/.jest.config.js index 35445bf96..3df8415e4 100644 --- a/.jest.config.js +++ b/.jest.config.js @@ -2,7 +2,7 @@ const libDir = process.env.LIB_DIR; const {defaults: tsjPreset} = require('ts-jest/presets'); const transformPackages = [ - 'react-native', 'react-native-menu', 'react-native-tab-view', + 'react-native', 'react-native-modal-popover', 'react-native-tab-view', 'react-native-collapsible', 'react-native-swipeout', 'react-native-camera-roll-picker', '@bang88/react-native-ultimate-listview', 'react-native-safe-area-view' diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap index ed43afc45..5f3df92e5 100644 --- a/components/popover/__tests__/__snapshots__/demo.test.js.snap +++ b/components/popover/__tests__/__snapshots__/demo.test.js.snap @@ -2,97 +2,2615 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` - - - 选择了： - - - + + + + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + + + + + + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + + + + + + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + + + + + + + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + + + + + + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + + + + + + + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + + + + + + - - 菜单 - + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + > + + + + + 选择了： + + + + + + + 菜单 + + + + + + + + + + + + option + 1 + + + + + option + 2 + + + + + option + 3 + + + + + disabled opt + + + + + 关闭 + + + + + + + + + + + + + `; diff --git a/components/popover/demo/basic.tsx b/components/popover/demo/basic.tsx index f24f9b952..ec76edabd 100644 --- a/components/popover/demo/basic.tsx +++ b/components/popover/demo/basic.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Platform, StyleSheet, Text, View, ViewStyle } from 'react-native'; -import { Popover } from '../../'; +import { StyleSheet, Text, View } from 'react-native'; +import { List, Popover } from '../../'; const Item = Popover.Item; @@ -22,7 +22,7 @@ export default class PopoverExample extends React.Component { // visible: false, selected: value, }); - } + }; // handleVisibleChange = (_visible) => { // this.setState({ // visible, @@ -43,60 +43,44 @@ export default class PopoverExample extends React.Component { , ]); return ( - - - - 选择了：{this.state.selected} - - - + + {[1, 2, 3, 4, 5, 6, 7, 8].map(item => this.newMethod(overlay, item))} + + ); + } + + private newMethod(overlay: JSX.Element[], key: number) { + return ( + + this.setState({ + [`selected${key}`]: v, + }) + } > 菜单 + } + > + + 选择了：{this.state[`selected${key}`]} - + ); } } const styles = StyleSheet.create({ - contextStyle: { - margin: 50, - flex: 1, - }, - menuContainer: { - flexDirection: 'row', - justifyContent: 'flex-end', - height: 400, - paddingHorizontal: 5, - paddingVertical: 10, - } as ViewStyle, + triggerStyle: { - flexDirection: 'row', - paddingHorizontal: 10, - }, - overlayStyle: { - left: 90, - marginTop: 20, - }, - // 在 iOS 上弹出层有阴影，Android 上没有， - // 详细：http://facebook.github.io/react-native/releases/0.39/docs/shadow-props.html#shadowcolor - androidOverlayStyle: { - borderWidth: 1, - borderColor: '#ccc', + paddingHorizontal: 6, }, + }); export const title = 'Popover'; diff --git a/components/popover/index.tsx b/components/popover/index.tsx index d4195f1fb..e19e5549d 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -1,54 +1,115 @@ -import React from 'react'; -import { StyleProp, ViewStyle } from 'react-native'; -import Menu, { MenuContext, MenuOption, MenuOptions, MenuTrigger } from 'react-native-menu'; -export interface PopoverProps { - style?: StyleProp; +import React, { isValidElement } from 'react'; +import { ScrollView, StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native'; +import { Popover as Pop, PopoverController } from 'react-native-modal-popover'; +import { WithTheme, WithThemeStyles } from '../style'; +import PopoverStyles, { PopoverStyle } from './style'; + +export interface PopoverProps extends WithThemeStyles { triggerStyle?: StyleProp; - overlayStyle?: StyleProp; - contextStyle?: StyleProp; - renderOverlayComponent?: (values: any) => JSX.Element; - name?: string; onSelect?: (node: any, index?: number) => void; overlay: React.ReactNode; disabled?: boolean; } -export default class Popover extends React.Component { +export interface PopoverItemProps { + value: any; + [key: string]: any; + disabled?: boolean; + style?: StyleProp; +} +export class PopoverItem extends React.PureComponent { + static displayName: 'PopoverItem'; + render() { + const { value, disabled, children, onPress, style } = this.props; + return ( + + {(_, theme) => ( + { + if (typeof onPress === 'function') { + onPress(value); + } + }} + style={[ + { + padding: theme.v_spacing_md, + }, + style, + ]} + > + {children} + + )} + + ); + } +} +export default class Popover extends React.PureComponent { static defaultProps = { onSelect: () => {}, }; - static Item = MenuOption; - menuContextRef: any; - + static Item = PopoverItem; + onSelect = (value: any, closePopover: any) => { + const { onSelect } = this.props; + if (onSelect) { + onSelect(value); + } + closePopover(); + }; + renderOverlay = (closePopover: any) => { + const { overlay } = this.props; + const items = React.Children.map(overlay, child => { + if (!isValidElement(child)) { + return child; + } + return React.cloneElement(child, { + onPress: (v: any) => this.onSelect(v, closePopover), + } as any); + }); + return {items}; + }; render() { - const { - children, - onSelect, - overlay, - disabled, - contextStyle, - name, - style, - triggerStyle, - overlayStyle, - renderOverlayComponent, - } = this.props; - const menuOptionsProp = { - optionsContainerStyle: overlayStyle, - renderOptionsContainer: renderOverlayComponent, - }; + const { children, disabled, triggerStyle, styles } = this.props; + return ( - (this.menuContextRef = el)} - style={contextStyle} - > - - - {children} - - {overlay} - - + + {s => ( + + {({ + openPopover, + closePopover, + popoverVisible, + setPopoverAnchor, + popoverAnchorRect, + }) => ( + + + {children} + + + {this.renderOverlay(closePopover)} + + + )} + + )} + ); } } diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx new file mode 100644 index 000000000..8f14c00a3 --- /dev/null +++ b/components/popover/style/index.tsx @@ -0,0 +1,23 @@ +import { StyleSheet, ViewStyle } from 'react-native'; +import { Theme } from '../../style'; + +export interface PopoverStyle { + content: ViewStyle; + arrow: ViewStyle; + background: ViewStyle; +} + +export default (theme: Theme) => + StyleSheet.create({ + content: { + backgroundColor: theme.fill_base, + borderRadius: theme.radius_sm, + padding: 0, + }, + arrow: { + borderTopColor: theme.fill_base, + }, + background: { + backgroundColor: 'transparent', + }, + }); diff --git a/package.json b/package.json index 6aa1ccce2..754b6741d 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "normalize-css-color": "^1.0.2", "react-native-collapsible": "^1.4.0", "react-native-drawer-layout": "~2.0.0", - "react-native-menu": "^0.23.0", + "react-native-modal-popover": "^0.0.12", "react-native-safe-area-view": "^0.11.0", "react-native-swipeout": "^2.3.6", "utility-types": "^2.1.0" diff --git a/typings/custom.d.ts b/typings/custom.d.ts index fae760cc4..fdc24ee7a 100644 --- a/typings/custom.d.ts +++ b/typings/custom.d.ts @@ -2,8 +2,6 @@ declare module '@ant-design/react-native'; declare module 'antd-mobile-demo-data'; -declare module 'react-native-menu'; - declare module 'normalize-css-color'; declare module '@bang88/react-native-ultimate-listview'; diff --git a/yarn.lock b/yarn.lock index d6bbc444d..38e210f64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -748,6 +748,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c" integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ== +"@types/prop-types@^15.5.5": + version "15.5.8" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce" + integrity sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw== + "@types/prop-types@^15.5.7": version "15.5.7" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.7.tgz#c6f1e0d0109ff358b132d98b7b4025c7a7b707c5" @@ -12420,15 +12425,6 @@ react-native-drawer-layout@~2.0.0: resolved "https://registry.yarnpkg.com/react-native-drawer-layout/-/react-native-drawer-layout-2.0.0.tgz#8ce1e4027bd3f3a09045afdb46080e18346be232" integrity sha512-zYmzv+4QKDwxmAj7pF1yr8VUb+Hp7oBlwMjRZsvv56vPwO89I+kPTI8G78uwSNIf5b4e/iOChE4vpB5J2XsJFA== -react-native-menu@^0.23.0: - version "0.23.0" - resolved "https://registry.yarnpkg.com/react-native-menu/-/react-native-menu-0.23.0.tgz#3c023239aed95d419275df50c199982ad7eb062b" - integrity sha1-PAIyOa7ZXUGSdd9QwZmYKtfrBis= - dependencies: - create-react-class "^15.6.0" - prop-types "^15.5.10" - react-timer-mixin "^0.13.3" - react-native-mocker@^0.0.12: version "0.0.12" resolved "https://registry.yarnpkg.com/react-native-mocker/-/react-native-mocker-0.0.12.tgz#ddfe80be86744a24b744cfd9e30150f98c823c4e" @@ -12447,6 +12443,15 @@ react-native-mocker@^0.0.12: react-timer-mixin "^0.13.3" warning "^2.1.0" +react-native-modal-popover@^0.0.12: + version "0.0.12" + resolved "https://registry.yarnpkg.com/react-native-modal-popover/-/react-native-modal-popover-0.0.12.tgz#5c0b5e9e0323490c3c5867821fc94b6582bfa3dc" + integrity sha512-uZQsTDcGOI8y/05L/Lb0OMBesJYYRWEc0pj2038a579LnDnJJpKay0kD654cQpA4Ozt3xbu4DMTGwenynBSEFg== + dependencies: + "@types/prop-types" "^15.5.5" + lodash.debounce "^4.0.8" + prop-types "^15.6.2" + react-native-safe-area-view@0.11.0, react-native-safe-area-view@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.11.0.tgz#4f3dda43c2bace37965e7c6aef5fc83d4f19d174" From a269498c4cdad9ca015812dff07ace58efb7ab0f Mon Sep 17 00:00:00 2001 From: bang88 Date: Sat, 26 Jan 2019 16:49:51 +0800 Subject: [PATCH 2/4] doc: popover --- components/popover/demo/basic.tsx | 75 ++++++++++++++++++++++++------- components/popover/index.en-US.md | 16 +++---- components/popover/index.tsx | 14 +++--- components/popover/index.zh-CN.md | 16 +++---- 4 files changed, 79 insertions(+), 42 deletions(-) diff --git a/components/popover/demo/basic.tsx b/components/popover/demo/basic.tsx index ec76edabd..623a313b5 100644 --- a/components/popover/demo/basic.tsx +++ b/components/popover/demo/basic.tsx @@ -8,26 +8,16 @@ export default class PopoverExample extends React.Component { constructor(props: any) { super(props); this.state = { - // visible: false, selected: '', }; } - // componentDidMount() { - // setInterval(() => { - // this.refs.mc.refs.menuContext.toggleMenu('m'); - // }, 2000); - // } + onSelect = (value: any) => { this.setState({ // visible: false, selected: value, }); }; - // handleVisibleChange = (_visible) => { - // this.setState({ - // visible, - // }); - // } render() { let overlay = [1, 2, 3].map((i, index) => ( @@ -43,13 +33,66 @@ export default class PopoverExample extends React.Component { , ]); return ( - - {[1, 2, 3, 4, 5, 6, 7, 8].map(item => this.newMethod(overlay, item))} - + + + {[1, 2, 3, 4, 5, 6, 7, 8].map(item => this.renderList(overlay, item))} + + + 自定义组件 x + + } + renderOverlayComponent={nodes => ( + + + 我是自定义组件title + + {nodes} + + )} + > + + 自定义组件 + + + + 自定义组件 x + + } + styles={{ + arrow: { + borderTopColor: 'transparent', + }, + }} + > + + 隐藏箭头 + + + ); } - private newMethod(overlay: JSX.Element[], key: number) { + private renderList(overlay: JSX.Element[], key: number) { return ( { } const styles = StyleSheet.create({ - triggerStyle: { paddingHorizontal: 6, }, - }); export const title = 'Popover'; diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index 668873886..3c89b6395 100644 --- a/components/popover/index.en-US.md +++ b/components/popover/index.en-US.md @@ -14,19 +14,15 @@ If set mask prop, it is recommended to exit by clicking on any of the mask layer Properties | Descrition | Type | Default -----------|------------|------|-------- | overlay | Popup layer content | ReactNode | - | -| onSelect | when an option is selected | (node: any, index?: number): void | - | -| style | set style | Object | - | -| triggerStyle | trigger style | Object | - | -| overlayStyle | overlay style | Object | - | -| contextStyle | context style | Object | - | -| renderOverlayComponent | A function that renders takes in the MenuOptions element and renders a container element that contains the options. Default function wraps options with a `ScrollView`. e.g. `(opts) => {opts}` | (opts: any): ReactNode | - | -| name | menu name, used for manual control | String | - | -| openMenu / closeMenu / toggleMenu | Set the menu's open/close status, the parameter is menu name. | Function(name) | - | +| onSelect | when an option is selected | (value: any): void | - | +| triggerStyle | trigger style | ViewStyle | - | +| renderOverlayComponent | A function that renders takes in the MenuOptions element and renders a container element that contains the options. Default function wraps options with a `ScrollView`. e.g. `(nodes) => {nodes}` | (node: React.ReactNode) => React.ReactNode | - | + ### Popover.Item Properties | Descrition | Type | Default -----------|------------|------|-------- | disabled | set disabled | Boolean | false | -| style | item style | Object | - | -| value | can be used as the selected option ID | string/number | - | +| style | item style | ViewStyle | - | +| value | can be used as the selected option ID | any | - | diff --git a/components/popover/index.tsx b/components/popover/index.tsx index e19e5549d..a37cab8a3 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -9,6 +9,7 @@ export interface PopoverProps extends WithThemeStyles { onSelect?: (node: any, index?: number) => void; overlay: React.ReactNode; disabled?: boolean; + renderOverlayComponent?: (node: React.ReactNode) => React.ReactNode; } export interface PopoverItemProps { value: any; @@ -19,7 +20,7 @@ export interface PopoverItemProps { export class PopoverItem extends React.PureComponent { static displayName: 'PopoverItem'; render() { - const { value, disabled, children, onPress, style } = this.props; + const { value, disabled, children, onSelect, style } = this.props; return ( {(_, theme) => ( @@ -27,8 +28,8 @@ export class PopoverItem extends React.PureComponent { activeOpacity={0.75} disabled={disabled} onPress={() => { - if (typeof onPress === 'function') { - onPress(value); + if (typeof onSelect === 'function') { + onSelect(value); } }} style={[ @@ -59,15 +60,18 @@ export default class Popover extends React.PureComponent { closePopover(); }; renderOverlay = (closePopover: any) => { - const { overlay } = this.props; + const { overlay, renderOverlayComponent } = this.props; const items = React.Children.map(overlay, child => { if (!isValidElement(child)) { return child; } return React.cloneElement(child, { - onPress: (v: any) => this.onSelect(v, closePopover), + onSelect: (v: any) => this.onSelect(v, closePopover), } as any); }); + if (typeof renderOverlayComponent === 'function') { + return renderOverlayComponent(items); + } return {items}; }; render() { diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index d7147cd72..ceeccc9ed 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -15,19 +15,15 @@ subtitle: 气泡 属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | overlay | 弹出层内容 | ReactNode | - | -| onSelect | 选中某选项时的回调函数 | (node: any, index?: number): void | - | -| style | 设置样式 | Object | - | -| triggerStyle | 触发元素外围容器样式 | Object | - | -| overlayStyle | 弹出层外围容器样式 | Object | - | -| contextStyle | 最外围容器样式 | Object | - | -| renderOverlayComponent | 自定义弹出层的外围组件，默认是`ScrollView`，示例`(opts) => {opts}` | (opts: any): ReactNode | - | -| name | menu 名字，用于手动触发开关 menu | String | - | -| openMenu / closeMenu / toggleMenu | 用于手动开关 menu，参数为上边 menu 的 name. 使用示例见 demo | Function(name) | - | +| onSelect | 选中某选项时的回调函数 | (value: any): void | - | +| triggerStyle | 触发元素外围容器样式 | ViewStyle | - | +| renderOverlayComponent | 自定义弹出层的外围组件，默认是`ScrollView`，示例`(nodes) => {nodes}` | (node: React.ReactNode) => React.ReactNode | - | + ### Popover.Item 属性 | 说明 | 类型 | 默认值 ----|-----|------|------ | disabled | 是否禁用 | Boolean | false | -| style | item 样式 | Object | - | -| value | 可作为选中的条目ID | string/number | - | +| style | item 样式 | ViewStyle | - | +| value | 可作为选中的条目ID | any | - | From 99db659044960c7205e5d044abe604f354b015f2 Mon Sep 17 00:00:00 2001 From: bang88 Date: Sat, 26 Jan 2019 17:06:57 +0800 Subject: [PATCH 3/4] doc: popover --- components/popover/demo/basic.md | 127 ++++++++++++++++++------------- package.json | 4 +- yarn.lock | 48 ++++-------- 3 files changed, 90 insertions(+), 89 deletions(-) diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md index df6eab5aa..7621e590f 100644 --- a/components/popover/demo/basic.md +++ b/components/popover/demo/basic.md @@ -9,17 +9,12 @@ title: ```jsx import React from 'react'; -import { Platform, StyleSheet, Text, View } from 'react-native'; -import { Popover } from '@ant-design/react-native'; +import { StyleSheet, Text, View } from 'react-native'; +import { List, Popover } from '@ant-design/react-native'; const Item = Popover.Item; export default class PopoverExample extends React.Component { constructor(props) { super(props); - // componentDidMount() { - // setInterval(() => { - // this.refs.mc.refs.menuContext.toggleMenu('m'); - // }, 2000); - // } this.onSelect = value => { this.setState({ // visible: false, @@ -27,15 +22,9 @@ export default class PopoverExample extends React.Component { }); }; this.state = { - // visible: false, selected: '', }; } - // handleVisibleChange = (_visible) => { - // this.setState({ - // visible, - // }); - // } render() { let overlay = [1, 2, 3].map((i, index) => ( @@ -51,58 +40,92 @@ export default class PopoverExample extends React.Component { , ]); return ( - - - - 选择了：{this.state.selected} + + + {[1, 2, 3, 4, 5, 6, 7, 8].map(item => this.renderList(overlay, item))} + + + 自定义组件 x + + } + renderOverlayComponent={nodes => ( + + + 我是自定义组件title + + {nodes} + + )} + > + + 自定义组件 - - + + + 自定义组件 x + + } + styles={{ + arrow: { + borderTopColor: 'transparent', + }, + }} + > + + 隐藏箭头 + + + + ); + } + renderList(overlay, key) { + return ( + + this.setState({ + [`selected${key}`]: v, + }) + } > 菜单 + } + > + + 选择了：{this.state[`selected${key}`]} - + ); } } const styles = StyleSheet.create({ - contextStyle: { - margin: 50, - flex: 1, - }, - menuContainer: { - flexDirection: 'row', - justifyContent: 'flex-end', - height: 400, - paddingHorizontal: 5, - paddingVertical: 10, - }, triggerStyle: { - flexDirection: 'row', - paddingHorizontal: 10, - }, - overlayStyle: { - left: 90, - marginTop: 20, - }, - // 在 iOS 上弹出层有阴影，Android 上没有， - // 详细：http://facebook.github.io/react-native/releases/0.39/docs/shadow-props.html#shadowcolor - androidOverlayStyle: { - borderWidth: 1, - borderColor: '#ccc', + paddingHorizontal: 6, }, }); export const title = 'Popover'; diff --git a/package.json b/package.json index 754b6741d..c0c2cb6d8 100644 --- a/package.json +++ b/package.json @@ -91,16 +91,14 @@ "qrcode.react": "^0.8.0", "raf": "^3.4.0", "rc-form": "2.2.7", - "react": "^16.7.0-alpha.2", "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.1", - "react-dom": "^16.7.0-alpha.2", "react-github-button": "^0.1.9", "react-intl": "^2.2.3", "react-native": "^0.57.7", "react-native-mocker": "^0.0.12", "react-navigation": "^2.18.2", - "react-test-renderer": "^16.7.0-alpha.2", + "react-test-renderer": "^16.7.0", "regenerator-runtime": "^0.13.1", "ts-jest": "^23.10.4", "typescript": "^3.2.2" diff --git a/yarn.lock b/yarn.lock index 38e210f64..28867f29d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12336,16 +12336,6 @@ react-dom@^16.0.0: prop-types "^15.6.2" scheduler "^0.11.2" -react-dom@^16.7.0-alpha.2: - version "16.7.0-alpha.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.2.tgz#16632880ed43676315991d8b412cce6975a30282" - integrity sha512-o0mMw8jBlwHjGZEy/vvKd/6giAX0+skREMOTs3/QHmgi+yAhUClp4My4Z9lsKy3SXV+03uPdm1l/QM7NTcGuMw== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.12.0-alpha.2" - react-error-overlay@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" @@ -12374,10 +12364,10 @@ react-is@^16.5.2, react-is@^16.6.1, react-is@^16.6.3: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0" integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA== -react-is@^16.7.0-alpha.2: - version "16.7.0-alpha.2" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0-alpha.2.tgz#0dd7f95d45ad5318b7f7bcb99dcb84da9385cb57" - integrity sha512-1Q3qN8nMWUfFcRz/bBC1f9zSL3il9OcSxMd9CNnpJbeFf4VCX0qYxL3TuwT4f+tFk1TkidwIL11yYgk4HjldYg== +react-is@^16.7.0: + version "16.7.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa" + integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g== react-lazy-load@^3.0.13: version "3.0.13" @@ -12652,15 +12642,15 @@ react-test-renderer@^16.0.0-0: react-is "^16.6.3" scheduler "^0.11.2" -react-test-renderer@^16.7.0-alpha.2: - version "16.7.0-alpha.2" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0-alpha.2.tgz#8606a5a82240c405539da0401d7b3572898b5611" - integrity sha512-taA9MrHMi7hEM/cKgvcvht+9cszhPirCaSP99yxkVQ2JwQxYSltGYq2gFf/UQBqGJMgmgEghN62rxziaL1EK+A== +react-test-renderer@^16.7.0: + version "16.7.0" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0.tgz#1ca96c2b450ab47c36ba92cd8c03fcefc52ea01c" + integrity sha512-tFbhSjknSQ6+ttzmuGdv+SjQfmvGcq3PFKyPItohwhhOBmRoTf1We3Mlt3rJtIn85mjPXOkKV+TaKK4irvk9Yg== dependencies: object-assign "^4.1.1" prop-types "^15.6.2" - react-is "^16.7.0-alpha.2" - scheduler "^0.12.0-alpha.2" + react-is "^16.7.0" + scheduler "^0.12.0" react-timer-mixin@^0.13.2, react-timer-mixin@^0.13.3: version "0.13.4" @@ -12693,16 +12683,6 @@ react@^16.0.0: prop-types "^15.6.2" scheduler "^0.11.2" -react@^16.7.0-alpha.2: - version "16.7.0-alpha.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.2.tgz#924f2ae843a46ea82d104a8def7a599fbf2c78ce" - integrity sha512-Xh1CC8KkqIojhC+LFXd21jxlVtzoVYdGnQAi/I2+dxbmos9ghbx5TQf9/nDxc4WxaFfUQJkya0w1k6rMeyIaxQ== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.12.0-alpha.2" - read-file-stdin@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61" @@ -13546,10 +13526,10 @@ scheduler@^0.11.2: loose-envify "^1.1.0" object-assign "^4.1.1" -scheduler@^0.12.0-alpha.2: - version "0.12.0-alpha.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0-alpha.2.tgz#2a8bc8dc6ecdb75fa6480ceeedc1f187c9539970" - integrity sha512-bfqFzGH18MjjhePIzYQNR0uGQ1wMCX6Q83c2s+3fzyuqKT6zBI2wNQTpq01q72C7QItAp8if5w2LfMiXnI2SYw== +scheduler@^0.12.0: + version "0.12.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b" + integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" From 683d99b296118ede5fe3ee97b72f1a5862eac029 Mon Sep 17 00:00:00 2001 From: bang88 Date: Sat, 26 Jan 2019 17:09:24 +0800 Subject: [PATCH 4/4] test: update snap --- .../__tests__/__snapshots__/demo.test.js.snap | 4567 +++++++++-------- 1 file changed, 2466 insertions(+), 2101 deletions(-) diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap index 5f3df92e5..7ae9274c5 100644 --- a/components/popover/__tests__/__snapshots__/demo.test.js.snap +++ b/components/popover/__tests__/__snapshots__/demo.test.js.snap @@ -1,56 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` - - +Array [ + @@ -58,322 +41,322 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - + - - - - - option - 1 - - - - - option - 2 - - - + + + - - option - 3 - - - + + option + 1 + + + - + + option + 2 + + + - disabled opt - - - + option + 3 + + + + + disabled opt + + + - - 关闭 - + > + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + - - @@ -381,322 +364,322 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - + - - - - - option - 1 - - - - - option - 2 - - - + + + - - option - 3 - - - + + option + 1 + + + + + option + 2 + + + - + + option + 3 + + + - disabled opt - - - + disabled opt + + + - - 关闭 - + > + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + - - @@ -704,322 +687,322 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - - - - - - option - 1 - - - + + - - option - 2 - - - - - option - 3 - - - + + + - + + option + 1 + + + - disabled opt - - - + option + 2 + + + + + option + 3 + + + + + disabled opt + + + - - 关闭 - + > + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + - - @@ -1027,322 +1010,322 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - + - - - - - option - 1 - - - - - option - 2 - - - + + + - - option - 3 - - - + + option + 1 + + + - + + option + 2 + + + - disabled opt - - - + option + 3 + + + + + disabled opt + + + - - 关闭 - + > + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + - - @@ -1350,322 +1333,322 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - + - - - - - option - 1 - - - - - option - 2 - - - + + + - - option - 3 - - - + + option + 1 + + + + + option + 2 + + + - + + option + 3 + + + - disabled opt - - - + disabled opt + + + - - 关闭 - + > + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + - - @@ -1673,322 +1656,322 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - + - - - - - option - 1 - - - - - option - 2 - - - + + + - - option - 3 - - - + + option + 1 + + + - + + option + 2 + + + - disabled opt - - - + option + 3 + + + + + disabled opt + + + - - 关闭 - + > + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + - - @@ -1996,322 +1979,322 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - + - - - - - option - 1 - - - - - option - 2 - - - + + + - - option - 3 - - - + + option + 1 + + + - + + option + 2 + + + - disabled opt - - - + option + 3 + + + + + disabled opt + + + - - 关闭 - + > + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + - - @@ -2319,298 +2302,680 @@ exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = ` style={ Array [ Object { + "alignItems": "center", + "borderBottomColor": "#dddddd", + "borderBottomWidth": 0.5, "flex": 1, - "flexDirection": "column", + "flexDirection": "row", + "minHeight": 44, + "paddingRight": 15, + "paddingVertical": 6, }, + false, + false, ] } > - - - 选择了： - - - - - - 菜单 - - - + + + 选择了： + + + + + + 菜单 + + + - + - - - - - option - 1 - - - - - option - 2 - - - + + + - - option - 3 - - - + + option + 1 + + + - + + option + 2 + + + - disabled opt - - - + option + 3 + + + - - 关闭 - + > + + disabled opt + + + + + 关闭 + + - - - - + + + useNativeDriver={false} + /> + - - + + + + , + + + 自定义组件 + + + + + + + + + + 我是自定义组件title + + + + 自定义组件 x + + + + + + + + + , + + + + 隐藏箭头 + + + - - + transparent={true} + visible={false} + > + + + + + + + + + 自定义组件 x + + + + + + + + + + , +] `;