From 084e80744feae8985bc97826e215c43e2333aa7c Mon Sep 17 00:00:00 2001 From: Alex Pounds Date: Tue, 23 Feb 2016 21:13:05 -0500 Subject: [PATCH 1/3] Some tweaks to allow tests to run under npm v3 (cf. https://github.com/facebook/jest/issues/554#issuecomment-148783188) --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 092ca24..19e8e3a 100644 --- a/package.json +++ b/package.json @@ -51,9 +51,11 @@ "unmockedModulePathPatterns": [ "/support", "/node_modules/react", + "/node_modules/fbjs", "/node_modules/react-dom", "/node_modules/react-addons-test-utils", "/node_modules/amp-has-class", + "/node_modules/amp-is-string", "/node_modules/classnames" ] } From 9f36ea6e9bc9a57bd42b493f8e548145ac53e40e Mon Sep 17 00:00:00 2001 From: Alex Pounds Date: Tue, 23 Feb 2016 21:15:22 -0500 Subject: [PATCH 2/3] Add support for a transition prop on TableViewCell If TableViewCell has an href prop, then the transition prop gets included as a data-transition attribute on the child tag. Push.js uses this attribute to transition views in and out. --- README.md | 1 + src/TableViewCell.js | 17 ++++++++++------- src/__tests__/TableViewCell.js | 14 +++++++++++++- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 8bde1ea..9834f30 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,7 @@ class MyTableView extends React.Component { @prop [navigateRight] {Boolean} Right-wards chevron @prop [navigateLeft] {Boolean} Left-wards chevron @prop [href] {String} Assigns the given href to the child anchor +@prop [transition] {String} A Push.js transition name to include on the child link @prop [className] {String} Merges with the Ratchet predefined CSS classes ``` Example: diff --git a/src/TableViewCell.js b/src/TableViewCell.js index e664e53..03f3c6f 100644 --- a/src/TableViewCell.js +++ b/src/TableViewCell.js @@ -16,13 +16,16 @@ class TableViewCell extends React.Component { var chevronDirection = this.getChevronDirection() if (this.props.href || chevronDirection) { var classes = chevronDirection ? `navigate-${chevronDirection}` : null - return ( - - ) + var attrs = { + href: this.props.href, + className: classes, + children: this.props.children + } + if (this.props.transition) { + attrs['data-transition'] = this.props.transition + } + + return } else { return this.props.children } diff --git a/src/__tests__/TableViewCell.js b/src/__tests__/TableViewCell.js index e09abed..6c0260a 100644 --- a/src/__tests__/TableViewCell.js +++ b/src/__tests__/TableViewCell.js @@ -7,7 +7,7 @@ describe('TableViewCell', () => { it('adds ratchet classes', () => { expect(hasClass(shallowRender().props.className, 'table-view-cell')).toBe(true) }) - + it('adds user classes', () => { expect(hasClass(shallowRender().props.className, 'asdf')).toBe(true) }) @@ -15,4 +15,16 @@ describe('TableViewCell', () => { it('renders an li element', () => { expect(shallowRender().type).toBe('li') }) + + it('renders a link if we add an href', () => { + var rendered = shallowRender() + expect(rendered.props.children.type).toBe('a') + expect(rendered.props.children.props.href).toBe('lkjh') + }) + + it('adds a transition tag on a link, if we specify one', () => { + var rendered = shallowRender() + expect(rendered.props.children.type).toBe('a') + expect(rendered.props.children.props['data-transition']).toBe('slide-in') + }) }) From 0f2b793951478acf860874fe0ebaafb1e58d2229 Mon Sep 17 00:00:00 2001 From: Alex Pounds Date: Wed, 24 Feb 2016 00:48:26 -0500 Subject: [PATCH 3/3] Add a 'transition' property on the NavButton component. --- README.md | 1 + src/NavButton.js | 11 +++++++++-- src/__tests__/NavButton.js | 11 +++++++++-- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9834f30..284dd5d 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ class MyNavBar extends React.Component { ``` @prop [right] {Boolean} The side of the nav the button will be displayed @prop [href] {String} If defined creates an anchor, else defaults to a button +@prop [transition] {String} A Push.js transition name to include on the child link @prop [className] {String} Merges with the Ratchet predefined CSS classes ``` Example: diff --git a/src/NavButton.js b/src/NavButton.js index 56ac342..1854b94 100644 --- a/src/NavButton.js +++ b/src/NavButton.js @@ -9,18 +9,25 @@ class NavButton extends React.Component { var iconClass = this.props.icon ? this.props.icon : side + "-nav" var icon = + var props; + if (this.props.hasOwnProperty('transition')) { + props = {"data-transition": this.props.transition, ...this.props } + } else { + props = this.props + } + var Component = this.props.href ? 'a' : 'button' if (side == 'left') { return ( - + {icon} {this.props.children} ) } else { // right return ( - + {this.props.children} {icon} diff --git a/src/__tests__/NavButton.js b/src/__tests__/NavButton.js index 6e61af4..7157539 100644 --- a/src/__tests__/NavButton.js +++ b/src/__tests__/NavButton.js @@ -6,7 +6,7 @@ describe('NavButton', () => { it('adds ratchet classes', () => { expect(hasClass(shallowRender().props.className, 'btn-nav btn-link btn')).toBe(true) }) - + it('adds user classes', () => { expect(hasClass(shallowRender().props.className, 'asdf')).toBe(true) }) @@ -21,12 +21,19 @@ describe('NavButton', () => { expect(subject.props.href).toEqual('b') }) + it('renders a data-transition property when transition provided', () => { + var subject = shallowRender() + expect(subject.type).toEqual('a') + expect(subject.props.href).toEqual('c') + expect(subject.props['data-transition']).toEqual('slide-out') + }) + it('pulls left by default', () => { var subject = shallowRender() expect(hasClass(subject.props.className, 'pull-left')).toBe(true) expect(hasClass(subject.props.className, 'pull-right')).toBe(false) }) - + it('pulls right when "right" prop set', () => { var subject = shallowRender() expect(hasClass(subject.props.className, 'pull-right')).toBe(true)