[FileUpload] Remove outdated lifecycle methods and fix issue with stale state

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

src/components/DropZone/components/FileUpload/FileUpload.tsx

@@ -36,7 +36,40 @@ export interface Props {
 export type CombinedProps = Props &
   WithAppProviderProps &
   WithContextTypes<DropZoneContext>;
+
 export class FileUpload extends React.Component<CombinedProps, State> {
+  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<CombinedProps, State> {
     };
   }
 
-  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},

src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx

@@ -80,4 +80,43 @@ describe('<FileUpload />', () => {
 
     expect(fileUpload.find(Icon)).toHaveLength(1);
   });
+
+  it('sets a default actionTitle if the prop is provided then removed', () => {
+    const fileUpload = mountWithAppProvider(
+      <Provider value={{size: 'large', type: 'file'}}>
+        <FileUpload actionTitle="Title" />
+      </Provider>,
+    );
+
+    fileUpload.setProps({children: <FileUpload />});
+    expect(fileUpload.find(Button).text()).toBe('Add file');
+  });
+
+  it('sets a default actionHint if the prop is provided then removed', () => {
+    const fileUpload = mountWithAppProvider(
+      <Provider value={{size: 'large', type: 'file'}}>
+        <FileUpload actionHint="Hint" />
+      </Provider>,
+    );
+
+    fileUpload.setProps({children: <FileUpload />});
+    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(
+      <Provider value={{size: 'large', type: 'file'}}>
+        <FileUpload actionTitle={actionTitle} actionHint={actionHint} />
+      </Provider>,
+    );
+
+    fileUpload.setProps({
+      children: (
+        <FileUpload actionTitle={actionTitle} actionHint={actionHint} />
+      ),
+    });
+    expect(fileUpload.props()).toEqual({actionTitle, actionHint});
+  });
 });