chore(LinearProgress): Refactor to Foundation pattern #239 #195 #141

rmwc · Jun 4, 2018 · 84a02f0 · 84a02f0
1 parent 6c29300
commit 84a02f0
Show file tree

Hide file tree

Showing 4 changed files with 278 additions and 75 deletions.
diff --git a/src/LinearProgress/index.js b/src/LinearProgress/index.js
@@ -5,7 +5,8 @@ import * as React from 'react';
 /* eslint-disable max-len */
 import { MDCLinearProgress } from '@material/linear-progress/dist/mdc.linearProgress';
 /* eslint-enable max-len */
-import { simpleTag, withMDC } from '../Base';
+import { simpleTag } from '../Base';
+import { withFoundation, syncFoundationProp } from '../Base/MDCFoundation';
 
 export const LinearProgressRoot = simpleTag({
   displayName: 'LinearProgressRoot',
@@ -63,45 +64,65 @@ export type LinearProgressPropsT = {
   reversed?: boolean
 } & SimpleTagPropsT;
 
-export const LinearProgress: React.ComponentType<
-  LinearProgressPropsT
-> = withMDC({
-  mdcConstructor: MDCLinearProgress,
-  mdcElementRef: true,
-  defaultProps: {
+export class LinearProgress extends withFoundation({
+  constructor: MDCLinearProgress,
+  adapter: {}
+})<LinearProgressPropsT> {
+  static displayName = 'LinearProgress';
+
+  static defaultProps = {
     progress: 0,
     buffer: undefined,
     determinate: true,
     reversed: false
-  },
-  onUpdate: (props, nextProps, api) => {
-    ['progress', 'buffer', 'determinate', 'reversed', 'accent'].forEach(key => {
-      if (api && nextProps[key] !== undefined && api[key] !== nextProps[key]) {
-        api[key] = nextProps[key];
-      }
-    });
+  };
+
+  syncWithProps(nextProps: LinearProgressPropsT) {
+    // progress
+    syncFoundationProp(
+      nextProps.progress,
+      this.progress,
+      () => (this.progress = nextProps.progress)
+    );
+
+    // buffer
+    syncFoundationProp(
+      nextProps.buffer,
+      this.buffer,
+      () => (this.buffer = nextProps.buffer)
+    );
+
+    // determinate
+    syncFoundationProp(
+      nextProps.determinate,
+      this.determinate,
+      () => (this.determinate = nextProps.determinate)
+    );
+
+    // reversed
+    syncFoundationProp(
+      nextProps.reversed,
+      this.reversed,
+      () => (this.reversed = nextProps.reversed)
+    );
   }
-})(
-  class extends React.Component<LinearProgressPropsT> {
-    static displayName = 'LinearProgress';
-
-    render() {
-      //$FlowFixMe
-      const { progress, buffer, mdcElementRef, ...rest } = this.props;
-      return (
-        <LinearProgressRoot elementRef={mdcElementRef} {...rest}>
-          <LinearProgressBufferingDots />
-          <LinearProgressBuffer />
-          <LinearProgressPrimaryBar>
-            <LinearProgressBarInner />
-          </LinearProgressPrimaryBar>
-          <LinearProgressSecondaryBar>
-            <LinearProgressBarInner />
-          </LinearProgressSecondaryBar>
-        </LinearProgressRoot>
-      );
-    }
+
+  render() {
+    const { progress, buffer, ...rest } = this.props;
+    const { root_ } = this.foundationRefs;
+    return (
+      <LinearProgressRoot elementRef={root_} {...rest}>
+        <LinearProgressBufferingDots />
+        <LinearProgressBuffer />
+        <LinearProgressPrimaryBar>
+          <LinearProgressBarInner />
+        </LinearProgressPrimaryBar>
+        <LinearProgressSecondaryBar>
+          <LinearProgressBarInner />
+        </LinearProgressSecondaryBar>
+      </LinearProgressRoot>
+    );
   }
-);
+}
 
 export default LinearProgress;
diff --git a/src/LinearProgress/linear-progress-ssr.spec.js b/src/LinearProgress/linear-progress-ssr.spec.js
@@ -0,0 +1,12 @@
+/**
+ * @jest-environment node
+ */
+import React from 'react';
+import { renderToString as mount } from 'react-dom/server';
+import { LinearProgress } from './';
+
+describe('LinearProgress SSR', () => {
+  it('renders', () => {
+    mount(<LinearProgress progress={0.5} />);
+  });
+});
diff --git a/src/LinearProgress/linear-progress.spec.js b/src/LinearProgress/linear-progress.spec.js
@@ -3,32 +3,32 @@ import { mount } from 'enzyme';
 import { LinearProgress } from './';
 
 describe('LinearProgress', () => {
-	it('renders', () => {
-		const el = mount(<LinearProgress progress={0.5} />);
-		expect(!!~el.html().search('mdc-linear-progress')).toBe(true);
-	});
+  it('renders', () => {
+    const el = mount(<LinearProgress progress={0.5} />);
+    expect(el.html().includes('mdc-linear-progress')).toBe(true);
+  });
 
-	it('can be accent', () => {
-		const el = mount(<LinearProgress accent />);
-		expect(!!~el.html().search('mdc-linear-progress--accent')).toBe(true);
-	});
+  it('can be accent', () => {
+    const el = mount(<LinearProgress accent />);
+    expect(el.html().includes('mdc-linear-progress--accent')).toBe(true);
+  });
 
-	it('can buffer', () => {
-		const el = mount(<LinearProgress buffer={0.8} />);
-	});
+  it('can buffer', () => {
+    const el = mount(<LinearProgress buffer={0.8} />);
+  });
 
-	it('can be indeterminate', () => {
-		const el = mount(<LinearProgress determinate={false} />);
-		expect(!!~el.html().search('mdc-linear-progress--determinate')).toBe(false);
-	});
+  it('can be indeterminate', () => {
+    const el = mount(<LinearProgress determinate={false} />);
+    expect(el.html().includes('mdc-linear-progress--determinate')).toBe(false);
+  });
 
-	it('can be reversed', () => {
-		const el = mount(<LinearProgress reversed />);
-		expect(!!~el.html().search('mdc-linear-progress--reversed')).toBe(true);
-	});
+  it('can be reversed', () => {
+    const el = mount(<LinearProgress reversed />);
+    expect(el.html().includes('mdc-linear-progress--reversed')).toBe(true);
+  });
 
-	it('can have custom classnames', () => {
-		const el = mount(<LinearProgress className={'my-custom-classname'} />);
-		expect(!!~el.html().search('my-custom-classname')).toEqual(true);
-	});
+  it('can have custom classnames', () => {
+    const el = mount(<LinearProgress className={'my-custom-classname'} />);
+    expect(el.html().includes('my-custom-classname')).toEqual(true);
+  });
 });