From 77613c7e7938072908c3dc5970f84a07a521187e Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Thu, 29 Aug 2019 21:00:39 +0900 Subject: [PATCH 01/10] #289 Popover: mv .js -> .tsx --- src/scripts/{Popover.js => Popover.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/scripts/{Popover.js => Popover.tsx} (100%) diff --git a/src/scripts/Popover.js b/src/scripts/Popover.tsx similarity index 100% rename from src/scripts/Popover.js rename to src/scripts/Popover.tsx From 55a9aced94cf651c3d0e42304c7bd964ad807fbd Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Thu, 29 Aug 2019 21:02:45 +0900 Subject: [PATCH 02/10] #289 Popover: install @types/react-dom --- package.json | 1 + yarn.lock | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index e023895cd..5de71e022 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "@types/jest": "^24.0.11", "@types/power-assert": "^1.5.0", "@types/react": "^16.8.12", + "@types/react-dom": "^16.9.0", "@types/storybook__addon-actions": "^3.4.2", "@types/storybook__addon-knobs": "^5.0.0", "@types/storybook__react": "^4.0.1", diff --git a/yarn.lock b/yarn.lock index fdeaba04e..6b1a5d12d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1819,6 +1819,13 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw== +"@types/react-dom@^16.9.0": + version "16.9.0" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.0.tgz#ba6ddb00bf5de700b0eb91daa452081ffccbfdea" + integrity sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^16.8.12": version "16.8.12" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.12.tgz#ffbdd7bcd2b7037c3f78e26c708922a2befbb71f" From 96183dcb199a32a16aab8be17293fe8470867ce5 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Sun, 1 Sep 2019 04:11:20 +0900 Subject: [PATCH 03/10] #289 Popover: Convert PropTypes to TypeScript types --- src/scripts/Popover.tsx | 89 ++++++++++++++++++++--------------------- 1 file changed, 43 insertions(+), 46 deletions(-) diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx index c9b537bb7..6947698d5 100644 --- a/src/scripts/Popover.tsx +++ b/src/scripts/Popover.tsx @@ -1,30 +1,54 @@ import React from 'react'; -import PropTypes from 'prop-types'; import classnames from 'classnames'; import { findDOMNode } from 'react-dom'; import { isElInChildren, cleanProps } from './util'; -export const PopoverHeader = (props) => ( +export const PopoverHeader: React.FC = (props) => (
{props.children}
); -PopoverHeader.propTypes = { - children: PropTypes.node, -}; +export type PopoverBodyProps = React.HTMLAttributes; -export const PopoverBody = (props) => ( +export const PopoverBody: React.FC = (props) => (
{props.children}
); -PopoverBody.propTypes = { - children: PropTypes.node, +export type PopoverProps = { + position: + | 'top' + | 'top-left' + | 'top-right' + | 'bottom' + | 'bottom-left' + | 'bottom-right' + | 'left' + | 'left-top' + | 'left-bottom' + | 'right' + | 'right-top' + | 'right-bottom'; + hidden?: boolean; + theme?: 'info' | 'success' | 'warning' | 'error'; + tooltip?: boolean; + hover?: boolean; + bodyStyle?: object; + trigger?: () => any; +} & React.HTMLAttributes; + +export type PopoverState = { + hidden?: boolean; }; -export default class Popover extends React.Component { - constructor(props) { - super(); +export default class Popover extends React.Component< + PopoverProps, + PopoverState +> { + private isMouseEntered: boolean = false; + + constructor(props: Readonly) { + super(props); this.state = { hidden: props.hidden, @@ -32,8 +56,6 @@ export default class Popover extends React.Component { this.documentClick = this.documentClick.bind(this); - this.isMouseEntered = false; - this.onMouseEnter = this.onMouseEnter.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); } @@ -60,7 +82,7 @@ export default class Popover extends React.Component { this.toggle(false); } - documentClick(e) { + documentClick(e: any) { let triggerEl; const { trigger } = this.props; if (trigger) { @@ -81,7 +103,7 @@ export default class Popover extends React.Component { } } - toggle(value) { + toggle(value: boolean) { this.setState((prevState) => ({ hidden: typeof value !== 'undefined' ? !value : !prevState.hidden, })); @@ -99,12 +121,16 @@ export default class Popover extends React.Component { const { children, position, + /* eslint-disable @typescript-eslint/no-unused-vars */ + hidden, + hover, + trigger, + /* eslint-enable @typescript-eslint/no-unused-vars */ theme, tooltip, bodyStyle, ...props } = this.props; - const pprops = cleanProps(props, Popover.propTypes); const popoverClassNames = classnames('slds-popover', { 'slds-hide': this.state.hidden, 'slds-popover--tooltip': tooltip, @@ -117,7 +143,7 @@ export default class Popover extends React.Component { onMouseLeave={this.onMouseLeave} className={popoverClassNames} role='dialog' - {...pprops} + {...props} > {children} @@ -125,35 +151,6 @@ export default class Popover extends React.Component { } } -const POPOVER_POSITIONS = [ - 'top', - 'top-left', - 'top-right', - 'bottom', - 'bottom-left', - 'bottom-right', - 'left', - 'left-top', - 'left-bottom', - 'right', - 'right-top', - 'right-bottom', -]; - -const POPOVER_THEMES = ['info', 'success', 'warning', 'error']; - -Popover.propTypes = { - position: PropTypes.oneOf(POPOVER_POSITIONS), - hidden: PropTypes.bool, - theme: PropTypes.oneOf(POPOVER_THEMES), - tooltip: PropTypes.bool, - children: PropTypes.node, - hover: PropTypes.bool, - trigger: PropTypes.func, - /* eslint-disable react/forbid-prop-types */ - bodyStyle: PropTypes.object, -}; - Popover.defaultProps = { hidden: true, }; From 5c92826ce1deb07424aba47044ce591b29901c15 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Sun, 1 Sep 2019 04:14:16 +0900 Subject: [PATCH 04/10] #289 Popover: Use default value of object destructuring assignment instead of defaultProps --- src/scripts/Popover.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx index 6947698d5..a4dcbd6c7 100644 --- a/src/scripts/Popover.tsx +++ b/src/scripts/Popover.tsx @@ -122,7 +122,7 @@ export default class Popover extends React.Component< children, position, /* eslint-disable @typescript-eslint/no-unused-vars */ - hidden, + hidden = true, hover, trigger, /* eslint-enable @typescript-eslint/no-unused-vars */ @@ -150,7 +150,3 @@ export default class Popover extends React.Component< ); } } - -Popover.defaultProps = { - hidden: true, -}; From 56cd166e13507a7a393621da569b7d06a8461bdf Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Sun, 1 Sep 2019 04:14:36 +0900 Subject: [PATCH 05/10] #289 Popover: mv story .js -> .tsx --- stories/{PopoverStories.js => PopoverStories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename stories/{PopoverStories.js => PopoverStories.tsx} (100%) diff --git a/stories/PopoverStories.js b/stories/PopoverStories.tsx similarity index 100% rename from stories/PopoverStories.js rename to stories/PopoverStories.tsx From 87af70ad7095114415ccc8f2e73f78767a00d28e Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Sun, 1 Sep 2019 04:58:20 +0900 Subject: [PATCH 06/10] #289 Popover: `cleanProps` is no longer needed --- src/scripts/Popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx index a4dcbd6c7..8fcabb678 100644 --- a/src/scripts/Popover.tsx +++ b/src/scripts/Popover.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classnames from 'classnames'; import { findDOMNode } from 'react-dom'; -import { isElInChildren, cleanProps } from './util'; +import { isElInChildren } from './util'; export const PopoverHeader: React.FC = (props) => (
{props.children}
From b95528ebd501c26653de73ed9e4c714c90d8f995 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Sun, 1 Sep 2019 04:59:40 +0900 Subject: [PATCH 07/10] #289 Popover: Fix type errors of story --- src/scripts/Popover.tsx | 32 ++++++++++++++++++-------------- stories/PopoverStories.tsx | 17 +++++++++++------ 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx index 8fcabb678..c8fa3f675 100644 --- a/src/scripts/Popover.tsx +++ b/src/scripts/Popover.tsx @@ -15,22 +15,26 @@ export const PopoverBody: React.FC = (props) => ( ); +export type PopoverPosition = + | 'top' + | 'top-left' + | 'top-right' + | 'bottom' + | 'bottom-left' + | 'bottom-right' + | 'left' + | 'left-top' + | 'left-bottom' + | 'right' + | 'right-top' + | 'right-bottom'; + +export type PopoverTheme = 'info' | 'success' | 'warning' | 'error'; + export type PopoverProps = { - position: - | 'top' - | 'top-left' - | 'top-right' - | 'bottom' - | 'bottom-left' - | 'bottom-right' - | 'left' - | 'left-top' - | 'left-bottom' - | 'right' - | 'right-top' - | 'right-bottom'; + position: PopoverPosition; hidden?: boolean; - theme?: 'info' | 'success' | 'warning' | 'error'; + theme?: PopoverTheme; tooltip?: boolean; hover?: boolean; bodyStyle?: object; diff --git a/stories/PopoverStories.tsx b/stories/PopoverStories.tsx index f59cd3a79..397f52ac8 100644 --- a/stories/PopoverStories.tsx +++ b/stories/PopoverStories.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { select, boolean } from '@storybook/addon-knobs'; +import { PopoverPosition, PopoverTheme } from '../src/scripts/Popover'; import { Popover } from '../src/scripts'; const popoverText = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. @@ -13,7 +14,7 @@ storiesOf('Popover', module) 'Controlled with knobs', () => { const positionOptions = { - '': '(none)', + '(none)': '', left: 'left', right: 'right', top: 'top', @@ -27,17 +28,21 @@ storiesOf('Popover', module) 'bottom-left': 'bottom-left', 'bottom-right': 'bottom-right', }; - const position = select('position', positionOptions); + const position = select( + 'position', + positionOptions, + '' + ) as PopoverPosition; const themeOptions = { - '': '(none)', + '(none)': '', info: 'info', success: 'success', warning: 'warning', error: 'error', }; - const theme = select('theme', themeOptions); - const hidden = boolean('hidden', false); - const tooltip = boolean('tooltip'); + const theme = select('theme', themeOptions, '') as PopoverTheme; + const hidden = boolean('hidden', true); + const tooltip = boolean('tooltip', false); return ( Date: Sun, 1 Sep 2019 05:13:36 +0900 Subject: [PATCH 08/10] #289 Popover: `position` should be optional --- src/scripts/Popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx index c8fa3f675..1fb655988 100644 --- a/src/scripts/Popover.tsx +++ b/src/scripts/Popover.tsx @@ -32,7 +32,7 @@ export type PopoverPosition = export type PopoverTheme = 'info' | 'success' | 'warning' | 'error'; export type PopoverProps = { - position: PopoverPosition; + position?: PopoverPosition; hidden?: boolean; theme?: PopoverTheme; tooltip?: boolean; From 8c4c98fe6c59a3309474e8804072a052a5f307e4 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Sun, 1 Sep 2019 05:16:39 +0900 Subject: [PATCH 09/10] #289 Popover: Quit default export --- src/scripts/Popover.tsx | 5 +---- src/scripts/index.js | 5 +---- stories/PopoverStories.tsx | 3 +-- 3 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx index 1fb655988..a5c214e35 100644 --- a/src/scripts/Popover.tsx +++ b/src/scripts/Popover.tsx @@ -45,10 +45,7 @@ export type PopoverState = { hidden?: boolean; }; -export default class Popover extends React.Component< - PopoverProps, - PopoverState -> { +export class Popover extends React.Component { private isMouseEntered: boolean = false; constructor(props: Readonly) { diff --git a/src/scripts/index.js b/src/scripts/index.js index 70d9da024..7503d404a 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -21,7 +21,6 @@ import Table, { TableRowColumn, TableRowColumnActions, } from './Table'; -import Popover, { PopoverHeader, PopoverBody } from './Popover'; export { Datepicker, @@ -38,9 +37,6 @@ export { PageHeaderDetailItem, PageHeaderDetailBody, PageHeaderDetailLabel, - Popover, - PopoverHeader, - PopoverBody, Table, TableHeader, TableBody, @@ -82,4 +78,5 @@ export * from './Notification'; export * from './Tree'; export * from './TreeNode'; export * from './SalesPath'; +export * from './Popover'; export * from './ComponentSettings'; diff --git a/stories/PopoverStories.tsx b/stories/PopoverStories.tsx index 397f52ac8..0972f30ce 100644 --- a/stories/PopoverStories.tsx +++ b/stories/PopoverStories.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { select, boolean } from '@storybook/addon-knobs'; -import { PopoverPosition, PopoverTheme } from '../src/scripts/Popover'; -import { Popover } from '../src/scripts'; +import { Popover, PopoverPosition, PopoverTheme } from '../src/scripts'; const popoverText = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi laudantium molestias reprehenderit nostrum quod natus saepe From a0eb3120f3686a2f20c0bd21ebfaa736661aca76 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 23 Sep 2019 04:38:13 +0900 Subject: [PATCH 10/10] #289 Popover: Fix default value in story --- stories/PopoverStories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/PopoverStories.tsx b/stories/PopoverStories.tsx index 0972f30ce..7928a7cc2 100644 --- a/stories/PopoverStories.tsx +++ b/stories/PopoverStories.tsx @@ -40,7 +40,7 @@ storiesOf('Popover', module) error: 'error', }; const theme = select('theme', themeOptions, '') as PopoverTheme; - const hidden = boolean('hidden', true); + const hidden = boolean('hidden', false); const tooltip = boolean('tooltip', false); return (