diff --git a/UNRELEASED.md b/UNRELEASED.md index 4d043ef967d..4152dc9c5cb 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes +- Fixed `DropZone.FileUpload` from incorrectly displaying action hint and title when the default is used and removed ([#1233](https://github.com/Shopify/polaris-react/pull/1233)) - Fixed `ResourceList.Item` interaction states from being incorrectly applied ([#1312](https://github.com/Shopify/polaris-react/pull/1312) - Fixed selected state for date picker in windows high contrast mode ([#1342](https://github.com/Shopify/polaris-react/pull/1342)) - Added background into media query for Microsoft high contrast to fix skeleton accessibility. ([#1341](https://github.com/Shopify/polaris-react/pull/1341)) @@ -40,11 +41,11 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Dependency upgrades - Bump react-utilites to remove a transitive dependency on core-js. ([#1343](https://github.com/Shopify/polaris-react/pull/1343)) - - Updated App Bridge to version 1.3.0 ([#1349](https://github.com/Shopify/polaris-react/pull/1349)) ### Code quality +- Updated `Dropzone.FileUpload` to no longer use `componentWillReceiveProps` and `componentWillMount` ([#1233](https://github.com/Shopify/polaris-react/pull/1233)) - Removed a `window.open` implementation error in `ResourceList.Item` ([#1294](<(https://github.com/Shopify/polaris-react/pull/1294)>)) ### Deprecations diff --git a/src/components/DropZone/components/FileUpload/FileUpload.tsx b/src/components/DropZone/components/FileUpload/FileUpload.tsx index 64f16bf5b03..eb093c9746b 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.tsx +++ b/src/components/DropZone/components/FileUpload/FileUpload.tsx @@ -36,7 +36,40 @@ export interface Props { export type CombinedProps = Props & WithAppProviderProps & WithContextTypes; + export class FileUpload extends React.Component { + static getDerivedStateFromProps( + { + actionTitle: nextActionTitle, + actionHint: nextActionHint, + polaris: { + intl: {translate}, + }, + context: {type}, + }: CombinedProps, + {actionTitle, actionHint}: State, + ) { + const hasActionTitleChanged = nextActionTitle !== actionTitle; + const hasActionHintChanged = nextActionHint !== actionHint; + + if (!hasActionTitleChanged && !hasActionHintChanged) { + return null; + } + + const suffix = capitalize(type); + + return { + actionTitle: + nextActionTitle && hasActionTitleChanged + ? nextActionTitle + : translate(`Polaris.DropZone.FileUpload.actionTitle${suffix}`), + actionHint: + nextActionHint && hasActionHintChanged + ? nextActionHint + : translate(`Polaris.DropZone.FileUpload.actionHint${suffix}`), + }; + } + constructor(props: CombinedProps) { super(props); @@ -56,26 +89,6 @@ export class FileUpload extends React.Component { }; } - updateStateFromProps(props: Props) { - const {actionTitle, actionHint} = this.state; - - if (props.actionTitle && props.actionTitle !== actionTitle) { - this.setState({actionTitle: props.actionTitle}); - } - - if (props.actionHint && props.actionHint !== actionHint) { - this.setState({actionHint: props.actionHint}); - } - } - - componentWillReceiveProps(props: Props) { - this.updateStateFromProps(props); - } - - componentWillMount() { - this.updateStateFromProps(this.props); - } - render() { const { context: {size, type}, diff --git a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx index a9626b26133..db1974e0497 100755 --- a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx +++ b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx @@ -80,4 +80,43 @@ describe('', () => { expect(fileUpload.find(Icon)).toHaveLength(1); }); + + it('sets a default actionTitle if the prop is provided then removed', () => { + const fileUpload = mountWithAppProvider( + + + , + ); + + fileUpload.setProps({children: }); + expect(fileUpload.find(Button).text()).toBe('Add file'); + }); + + it('sets a default actionHint if the prop is provided then removed', () => { + const fileUpload = mountWithAppProvider( + + + , + ); + + fileUpload.setProps({children: }); + expect(fileUpload.find(TextStyle).text()).toBe('or drop files to upload'); + }); + + it('does not use default action title and hint when props are changed', () => { + const actionTitle = 'Add file title'; + const actionHint = 'or drop files to upload hint'; + const fileUpload = mountWithAppProvider( + + + , + ); + + fileUpload.setProps({ + children: ( + + ), + }); + expect(fileUpload.props()).toEqual({actionTitle, actionHint}); + }); });