refactor(Transition): transitionAppear -> transitionOnShow

Semantic-Org · Jul 26, 2017 · a242223 · a242223
1 parent f2224e4
commit a242223
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 28 deletions.
diff --git a/src/modules/Transition/Transition.d.ts b/src/modules/Transition/Transition.d.ts
@@ -59,7 +59,7 @@ export interface TransitionProps {
   reactKey?: string;
 
   /** Run the enter animation when the component mounts, if it is initially shown. */
-  transitionAppear?: boolean;
+  transitionOnShow?: boolean;
 
   /** Unmount the component (remove it from the DOM) when it is not shown. */
   unmountOnHide?: boolean;

diff --git a/src/modules/Transition/Transition.js b/src/modules/Transition/Transition.js
@@ -69,7 +69,7 @@ export default class Transition extends Component {
     reactKey: PropTypes.string,
 
     /** Run the enter animation when the component mounts, if it is initially shown. */
-    transitionAppear: PropTypes.bool,
+    transitionOnShow: PropTypes.bool,
 
     /** Unmount the component (remove it from the DOM) when it is not shown. */
     unmountOnHide: PropTypes.bool,
@@ -80,7 +80,7 @@ export default class Transition extends Component {
     duration: 500,
     visible: true,
     mountOnShow: true,
-    transitionAppear: false,
+    transitionOnShow: false,
     unmountOnHide: false,
   }
 
@@ -219,12 +219,12 @@ export default class Transition extends Component {
     const {
       visible,
       mountOnShow,
-      transitionAppear,
+      transitionOnShow,
       unmountOnHide,
     } = this.props
 
     if (visible) {
-      if (transitionAppear) {
+      if (transitionOnShow) {
         return {
           initial: Transition.EXITED,
           next: Transition.ENTERING,

diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
@@ -78,9 +78,9 @@ export default class TransitionGroup extends React.Component {
       }
 
       // item hasn't changed transition states, copy over the last transition props;
-      const { props: { visible, transitionAppear } } = prevChild
+      const { props: { visible, transitionOnShow } } = prevChild
 
-      children[key] = cloneElement(child, { visible, transitionAppear })
+      children[key] = cloneElement(child, { visible, transitionOnShow })
     })
 
     this.setState({ children })
@@ -98,7 +98,7 @@ export default class TransitionGroup extends React.Component {
     })
   }
 
-  wrapChild = (child, transitionAppear = false) => {
+  wrapChild = (child, transitionOnShow = false) => {
     const { animation, duration } = this.props
     const { key } = child
 
@@ -110,7 +110,7 @@ export default class TransitionGroup extends React.Component {
         key={key}
         onHide={this.handleOnHide}
         reactKey={key}
-        transitionAppear={transitionAppear}
+        transitionOnShow={transitionOnShow}
       />
     )
   }

diff --git a/test/specs/modules/Transition/Transition-test.js b/test/specs/modules/Transition/Transition-test.js
@@ -27,7 +27,7 @@ describe('Transition', () => {
     SUI.DIRECTIONAL_TRANSITIONS.forEach(animation => {
       it(`directional ${animation}`, () => {
         wrapperShallow(
-          <Transition animation={animation} transitionAppear={false}>
+          <Transition animation={animation} transitionOnShow={false}>
             <p />
           </Transition>
         )
@@ -45,7 +45,7 @@ describe('Transition', () => {
     SUI.STATIC_TRANSITIONS.forEach(animation => {
       it(`static ${animation}`, () => {
         wrapperShallow(
-          <Transition animation={animation} transitionAppear={false}>
+          <Transition animation={animation} transitionOnShow={false}>
             <p />
           </Transition>
         )
@@ -74,14 +74,14 @@ describe('Transition', () => {
     })
 
     it('adds classes when ENTERED', () => {
-      wrapperShallow(<Transition transitionAppear={false}><p /></Transition>)
+      wrapperShallow(<Transition transitionOnShow={false}><p /></Transition>)
 
       wrapper.should.have.className('visible')
       wrapper.should.have.className('transition')
     })
 
     it('adds classes when ENTERING', () => {
-      wrapperShallow(<Transition transitionAppear={false}><p /></Transition>)
+      wrapperShallow(<Transition transitionOnShow={false}><p /></Transition>)
       wrapper.setState({ animating: true, status: Transition.ENTERING })
 
       wrapper.should.have.className('animating')
@@ -98,7 +98,7 @@ describe('Transition', () => {
     })
 
     it('adds classes when EXITING', () => {
-      wrapperShallow(<Transition transitionAppear={false}><p /></Transition>)
+      wrapperShallow(<Transition transitionOnShow={false}><p /></Transition>)
       wrapper.setState({ animating: true, status: Transition.EXITING })
 
       wrapper.should.have.className('animating')
@@ -179,7 +179,7 @@ describe('Transition', () => {
 
   describe('visible', () => {
     it('updates status when set to false while ENTERING', () => {
-      wrapperShallow(<Transition transitionAppear={false}><p /></Transition>)
+      wrapperShallow(<Transition transitionOnShow={false}><p /></Transition>)
       wrapper.setState({ status: Transition.ENTERING })
       wrapper.setProps({ visible: false })
 
@@ -188,7 +188,7 @@ describe('Transition', () => {
 
     it('updates status when set to false while ENTERED', () => {
       wrapperShallow(
-        <Transition transitionAppear={false}>
+        <Transition transitionOnShow={false}>
           <p />
         </Transition>
       )
@@ -213,7 +213,7 @@ describe('Transition', () => {
       wrapperMount(
         <Transition
           duration={10}
-          transitionAppear
+          transitionOnShow
           onHide={done}
         >
           <p />
@@ -255,7 +255,7 @@ describe('Transition', () => {
         <Transition
           duration={0}
           onComplete={handleComplete}
-          transitionAppear
+          transitionOnShow
         >
           <p />
         </Transition>
@@ -279,7 +279,7 @@ describe('Transition', () => {
         <Transition
           duration={0}
           onHide={handleHide}
-          transitionAppear={false}
+          transitionOnShow={false}
         >
           <p />
         </Transition>
@@ -304,7 +304,7 @@ describe('Transition', () => {
         <Transition
           duration={0}
           onShow={handleShow}
-          transitionAppear
+          transitionOnShow
         >
           <p />
         </Transition>
@@ -328,7 +328,7 @@ describe('Transition', () => {
         <Transition
           duration={0}
           onStart={handleStart}
-          transitionAppear
+          transitionOnShow
         >
           <p />
         </Transition>
@@ -349,10 +349,10 @@ describe('Transition', () => {
     })
   })
 
-  describe('transitionAppear', () => {
+  describe('transitionOnShow', () => {
     it('sets statuses when is true', () => {
       wrapperShallow(
-        <Transition transitionAppear>
+        <Transition transitionOnShow>
           <p />
         </Transition>
       )
@@ -363,7 +363,7 @@ describe('Transition', () => {
 
     it('updates status after mount when is true', () => {
       wrapperMount(
-        <Transition transitionAppear>
+        <Transition transitionOnShow>
           <p />
         </Transition>
       ).should.have.state('status', Transition.ENTERING)
@@ -381,7 +381,7 @@ describe('Transition', () => {
         <Transition
           duration={0}
           onHide={onHide}
-          transitionAppear={false}
+          transitionOnShow={false}
           unmountOnHide
         >
           <p />
@@ -400,7 +400,7 @@ describe('Transition', () => {
         <Transition
           duration={5}
           onHide={onHide}
-          transitionAppear={false}
+          transitionOnShow={false}
           unmountOnHide={false}
         >
           <p />

diff --git a/test/specs/modules/Transition/TransitionGroup-test.js b/test/specs/modules/Transition/TransitionGroup-test.js
@@ -48,7 +48,7 @@ describe('TransitionGroup', () => {
         })
     })
 
-    it('wraps new child to Transition and sets transitionAppear to true', () => {
+    it('wraps new child to Transition and sets transitionOnShow to true', () => {
       wrapperShallow(
         <TransitionGroup>
           <div key='first' />
@@ -59,7 +59,7 @@ describe('TransitionGroup', () => {
       const child = wrapper.childAt(1)
       child.key().should.equal('.$second')
       child.type().should.equal(Transition)
-      child.should.have.prop('transitionAppear', true)
+      child.should.have.prop('transitionOnShow', true)
     })
 
     it('skips invalid children', () => {