From d2b48f0fcd3bccc9e9e487803753ce6f6e477793 Mon Sep 17 00:00:00 2001 From: Ron Rennick Date: Wed, 14 Aug 2019 14:35:28 -0300 Subject: [PATCH 1/5] scroll import action to import section of settings page --- .../client/analytics/settings/index.js | 13 ++++++++++++- .../src/Notes/WC_Admin_Notes_Historical_Data.php | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-admin/client/analytics/settings/index.js b/plugins/woocommerce-admin/client/analytics/settings/index.js index ca1843a547d..07211acd2d1 100644 --- a/plugins/woocommerce-admin/client/analytics/settings/index.js +++ b/plugins/woocommerce-admin/client/analytics/settings/index.js @@ -4,7 +4,7 @@ */ import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { Component, Fragment } from '@wordpress/element'; +import { Component, Fragment, createRef } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { partial, remove, transform } from 'lodash'; import { withDispatch } from '@wordpress/data'; @@ -39,12 +39,15 @@ class Settings extends Component { isDirty: false, }; + this.importRef = createRef(); this.handleInputChange = this.handleInputChange.bind( this ); this.warnIfUnsavedChanges = this.warnIfUnsavedChanges.bind( this ); + this.scrollToImport = this.scrollToImport.bind( this ); } componentDidMount() { window.addEventListener( 'beforeunload', this.warnIfUnsavedChanges ); + setTimeout( this.scrollToImport, 250 ); } componentWillUnmount() { @@ -162,6 +165,13 @@ class Settings extends Component { this.setState( { settings, isDirty: true } ); } + scrollToImport() { + const { query } = this.props; + if ( query.import === 'true' ) { + window.scrollTo( 0, this.importRef.current.offsetTop ); + } + } + render() { const { createNotice } = this.props; const { hasError } = this.state; @@ -190,6 +200,7 @@ class Settings extends Component { + ); diff --git a/plugins/woocommerce-admin/src/Notes/WC_Admin_Notes_Historical_Data.php b/plugins/woocommerce-admin/src/Notes/WC_Admin_Notes_Historical_Data.php index 0bb6c70c9e8..b5b3a58bed6 100644 --- a/plugins/woocommerce-admin/src/Notes/WC_Admin_Notes_Historical_Data.php +++ b/plugins/woocommerce-admin/src/Notes/WC_Admin_Notes_Historical_Data.php @@ -52,7 +52,7 @@ class WC_Admin_Notes_Historical_Data { $note->add_action( 'get-started', __( 'Get Started', 'woocommerce-admin' ), - '?page=wc-admin&path=/analytics/settings', + '?page=wc-admin&path=/analytics/settings&import=true', 'actioned', true ); From 1517f865e1985ce68fb28d49b530cdbea4ebdb52 Mon Sep 17 00:00:00 2001 From: Ron Rennick Date: Mon, 19 Aug 2019 03:18:40 -0300 Subject: [PATCH 2/5] convert scroll functionality to a component --- .../client/analytics/settings/index.js | 18 +++------- .../packages/components/src/index.js | 1 + .../components/src/scroll-to/index.js | 33 +++++++++++++++++++ 3 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 plugins/woocommerce-admin/packages/components/src/scroll-to/index.js diff --git a/plugins/woocommerce-admin/client/analytics/settings/index.js b/plugins/woocommerce-admin/client/analytics/settings/index.js index 07211acd2d1..a078f6ac925 100644 --- a/plugins/woocommerce-admin/client/analytics/settings/index.js +++ b/plugins/woocommerce-admin/client/analytics/settings/index.js @@ -4,7 +4,7 @@ */ import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { Component, Fragment, createRef } from '@wordpress/element'; +import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { partial, remove, transform } from 'lodash'; import { withDispatch } from '@wordpress/data'; @@ -12,7 +12,7 @@ import { withDispatch } from '@wordpress/data'; /** * WooCommerce dependencies */ -import { SectionHeader, useFilters } from '@woocommerce/components'; +import { SectionHeader, useFilters, ScrollTo } from '@woocommerce/components'; /** * Internal dependencies @@ -39,15 +39,12 @@ class Settings extends Component { isDirty: false, }; - this.importRef = createRef(); this.handleInputChange = this.handleInputChange.bind( this ); this.warnIfUnsavedChanges = this.warnIfUnsavedChanges.bind( this ); - this.scrollToImport = this.scrollToImport.bind( this ); } componentDidMount() { window.addEventListener( 'beforeunload', this.warnIfUnsavedChanges ); - setTimeout( this.scrollToImport, 250 ); } componentWillUnmount() { @@ -165,15 +162,8 @@ class Settings extends Component { this.setState( { settings, isDirty: true } ); } - scrollToImport() { - const { query } = this.props; - if ( query.import === 'true' ) { - window.scrollTo( 0, this.importRef.current.offsetTop ); - } - } - render() { - const { createNotice } = this.props; + const { createNotice, query } = this.props; const { hasError } = this.state; if ( hasError ) { return null; @@ -200,7 +190,7 @@ class Settings extends Component { - + { query.import === 'true' ? : '' } ); diff --git a/plugins/woocommerce-admin/packages/components/src/index.js b/plugins/woocommerce-admin/packages/components/src/index.js index 8730b7b6ee4..baa820e9381 100644 --- a/plugins/woocommerce-admin/packages/components/src/index.js +++ b/plugins/woocommerce-admin/packages/components/src/index.js @@ -41,6 +41,7 @@ export { default as SearchListControl } from './search-list-control'; export { default as SearchListItem } from './search-list-control/item'; export { default as SectionHeader } from './section-header'; export { default as SegmentedSelection } from './segmented-selection'; +export { default as ScrollTo } from './scroll-to'; export { default as SimpleSelectControl } from './simple-select-control'; export { default as SplitButton } from './split-button'; export { default as Spinner } from './spinner'; diff --git a/plugins/woocommerce-admin/packages/components/src/scroll-to/index.js b/plugins/woocommerce-admin/packages/components/src/scroll-to/index.js new file mode 100644 index 00000000000..07e829497e5 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/scroll-to/index.js @@ -0,0 +1,33 @@ +/** @format */ +/** + * External dependencies + */ +import { Component, createRef } from '@wordpress/element'; + +class ScrollTo extends Component { + constructor() { + super(); + this.scrollTo = this.scrollTo.bind( this ); + } + + componentDidMount() { + setTimeout( this.scrollTo, 250 ); + } + + scrollTo() { + if ( this.ref.current && this.ref.current.offsetTop ) { + window.scrollTo( 0, this.ref.current.offsetTop ); + } else { + setTimeout( this.scrollTo, 250 ); + } + } + + render() { + this.ref = createRef(); + return ( + + ); + } +} + +export default ScrollTo; From fadb20c1bc3d2a315c63e0b1499e2ef2d095d3c2 Mon Sep 17 00:00:00 2001 From: Ron Rennick Date: Tue, 20 Aug 2019 10:06:08 -0300 Subject: [PATCH 3/5] update component change log --- plugins/woocommerce-admin/packages/components/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 83a6bfd8a5c..2e1dc70fb50 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -1,3 +1,6 @@ +# unreleased +- Added a new `` component. + # 3.2.0 - AdvancedFilters component: fire `onAdvancedFilterAction` for match changes. - TableCard component: add `onSearch` and `onSort` function props. From 9d2d085aee8fb0ed5fd5bb63830887011e8093ed Mon Sep 17 00:00:00 2001 From: Ron Rennick Date: Fri, 23 Aug 2019 15:34:44 -0300 Subject: [PATCH 4/5] handle offset attribute and children --- .../client/analytics/settings/index.js | 9 +++++-- .../components/src/scroll-to/index.js | 24 +++++++++++++++---- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/plugins/woocommerce-admin/client/analytics/settings/index.js b/plugins/woocommerce-admin/client/analytics/settings/index.js index a078f6ac925..dc30437dcbb 100644 --- a/plugins/woocommerce-admin/client/analytics/settings/index.js +++ b/plugins/woocommerce-admin/client/analytics/settings/index.js @@ -190,8 +190,13 @@ class Settings extends Component { - { query.import === 'true' ? : '' } - + { query.import === 'true' ? ( + + + + ) : ( + + ) } ); } diff --git a/plugins/woocommerce-admin/packages/components/src/scroll-to/index.js b/plugins/woocommerce-admin/packages/components/src/scroll-to/index.js index 07e829497e5..27871649a24 100644 --- a/plugins/woocommerce-admin/packages/components/src/scroll-to/index.js +++ b/plugins/woocommerce-admin/packages/components/src/scroll-to/index.js @@ -3,10 +3,11 @@ * External dependencies */ import { Component, createRef } from '@wordpress/element'; +import PropTypes from 'prop-types'; class ScrollTo extends Component { - constructor() { - super(); + constructor( props ) { + super( props ); this.scrollTo = this.scrollTo.bind( this ); } @@ -15,19 +16,34 @@ class ScrollTo extends Component { } scrollTo() { + const { offset } = this.props; if ( this.ref.current && this.ref.current.offsetTop ) { - window.scrollTo( 0, this.ref.current.offsetTop ); + window.scrollTo( 0, this.ref.current.offsetTop + parseInt( offset ) ); } else { setTimeout( this.scrollTo, 250 ); } } render() { + const { children } = this.props; this.ref = createRef(); return ( - + + { children } + ); } } +ScrollTo.propTypes = { + /** + * The offset from the top of the component. + */ + offset: PropTypes.string, +}; + +ScrollTo.defaultProps = { + offset: '0', +}; + export default ScrollTo; From 193c961d22f4937430cb728520b9278fe6e01833 Mon Sep 17 00:00:00 2001 From: Ron Rennick Date: Tue, 3 Sep 2019 14:09:22 -0300 Subject: [PATCH 5/5] add backticks to component tag in changelog --- plugins/woocommerce-admin/packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index b2da68a7729..f4410652c4b 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -1,6 +1,6 @@ # 4.0.0 - Added a new `` component. -- Changed the `description` prop to `content` and allowed content nodes to be passed in addition to strings. +- Changed the `` `description` prop to `content` and allowed content nodes to be passed in addition to strings. # 3.2.0 - AdvancedFilters component: fire `onAdvancedFilterAction` for match changes.