vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge pull request #1814 from react-toolbox/update-v2-react16 

Update v2 to React 16
old
Rubén Moya 2018-03-03 11:57:48 +01:00 committed by GitHub
parent 7f64a43246 0da9b72a7f
commit a59af9a67f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 787 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/chip/__test__/index.spec.js
View File

@ -17,7 +17,7 @@ describe('Chip', () => {
<span>Test</span>
</Chip>,
);
const chipNode = wrapper.find('div').node;
const chipNode = wrapper.find('div').instance();
expect(chipNode.className).toMatch(/\bavatar-class\b/);
});
@ -29,7 +29,7 @@ describe('Chip', () => {
<span>Test</span>
</TooltippedChip>,
);
const chipNode = wrapper.find('div').node;
const chipNode = wrapper.find('div').instance();
expect(chipNode.className).toMatch(/\bavatar-class\b/);
});
});
@ -41,7 +41,7 @@ describe('Chip', () => {
<span>Test</span>
</Chip>,
);
const chipNode = wrapper.find('div').node;
const chipNode = wrapper.find('div').instance();
expect(chipNode.className).not.toMatch(/\bavatar-class\b/);
});
});

39
components/date_picker/Calendar.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import CSSTransition from 'react-transition-group/CSSTransition';
import { range, getAnimationModule } from '../utils/utils';
import time from '../utils/time';
import CalendarMonth from './CalendarMonth';
@ -135,25 +136,23 @@ const factory = (IconButton) => {
<div data-react-toolbox="calendar">
<IconButton id="left" className={theme.prev} icon="chevron_left" onClick={this.changeViewMonth} />
<IconButton id="right" className={theme.next} icon="chevron_right" onClick={this.changeViewMonth} />
<CssTransitionGroup
transitionName={animationModule}
transitionEnterTimeout={350}
transitionLeaveTimeout={350}
>
<CalendarMonth
enabledDates={this.props.enabledDates}
disabledDates={this.props.disabledDates}
key={this.state.viewDate.getMonth()}
locale={this.props.locale}
maxDate={this.props.maxDate}
minDate={this.props.minDate}
onDayClick={this.handleDayClick}
selectedDate={this.props.selectedDate}
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
theme={this.props.theme}
viewDate={this.state.viewDate}
/>
</CssTransitionGroup>
<TransitionGroup>
<CSSTransition classNames={animationModule} timeout={350}>
<CalendarMonth
enabledDates={this.props.enabledDates}
disabledDates={this.props.disabledDates}
key={this.state.viewDate.getMonth()}
locale={this.props.locale}
maxDate={this.props.maxDate}
minDate={this.props.minDate}
onDayClick={this.handleDayClick}
selectedDate={this.props.selectedDate}
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
theme={this.props.theme}
viewDate={this.state.viewDate}
/>
</CSSTransition>
</TransitionGroup>
</div>
);
}

14
components/hoc/ActivableRenderer.js
View File

@ -28,13 +28,6 @@ const ActivableRendererFactory = (options = { delay: 500 }) =>
clearTimeout(this.unrenderTimeout);
}
renderAndActivate() {
if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
this.setState({ rendered: true, active: false }, () => {
this.activateTimeout = setTimeout(() => this.setState({ active: true }), 20);
});
}
deactivateAndUnrender() {
this.setState({ rendered: true, active: false }, () => {
this.unrenderTimeout = setTimeout(() => {
@ -44,6 +37,13 @@ const ActivableRendererFactory = (options = { delay: 500 }) =>
});
}
renderAndActivate() {
if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
this.setState({ rendered: true, active: false }, () => {
this.activateTimeout = setTimeout(() => this.setState({ active: true }), 20);
});
}
render() {
const { delay, ...others } = this.props; // eslint-disable-line no-unused-vars
const { active, rendered } = this.state;

10
components/progress_bar/__test__/index.spec.js
View File

@ -27,25 +27,25 @@ describe('ProgressBar', () => {
describe('#render', () => {
it('renders the value and buffer bars when it is linear', () => {
const wrapper = mount(<ProgressBar theme={theme} />);
expect(wrapper.childAt(0).props().children.length).toEqual(2);
expect(wrapper.childAt(0).childAt(0).props().children.length).toEqual(2);
});
it('renders the value and buffer bars when it is linear', () => {
const wrapper = mount(<ProgressBar mode="determinate" value={30} buffer={60} theme={theme} />);
const buffer = wrapper.childAt(0).childAt(0);
const value = wrapper.childAt(0).childAt(1);
const buffer = wrapper.childAt(0).childAt(0).childAt(0);
const value = wrapper.childAt(0).childAt(0).childAt(1);
expect(buffer.props().style.transform).toEqual(`scaleX(${0.6})`);
expect(value.props().style.transform).toEqual(`scaleX(${0.3})`);
});
it('renders the svg circle when it is circular', () => {
const wrapper = mount(<ProgressBar type="circular" theme={theme} />);
expect(wrapper.childAt(0).props().children.type).toEqual('circle');
expect(wrapper.childAt(0).childAt(0).props().children.type).toEqual('circle');
});
it('renders the proper circle length style when it is circular and determinate', () => {
const wrapper = mount(<ProgressBar type="circular" mode="determinate" value={30} theme={theme} />);
const circle = wrapper.childAt(0).props().children;
const circle = wrapper.childAt(0).childAt(0).props().children;
const strokeLength = 2 * Math.PI * circle.props.r * 0.3;
expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
});

12
components/slider/__tests__/index.spec.js
View File

@ -93,7 +93,7 @@ describe('Slider', () => {
it('sets pressed state when knob is clicked', () => {
const onChange = jest.fn();
const wrapper = mount(<Slider min={-500} max={500} onChange={onChange} />);
const knob = wrapper.childAt(0).childAt(0);
const knob = wrapper.childAt(0).childAt(0).childAt(0);
knob.simulate('mouseDown');
expect(wrapper.state().pressed).toEqual(true);
});
@ -102,7 +102,7 @@ describe('Slider', () => {
const onChange = jest.fn();
const event = { touches: [{ pageX: 200 }] };
const wrapper = mount(<Slider min={-500} max={500} onChange={onChange} />);
const knob = wrapper.childAt(0).childAt(0);
const knob = wrapper.childAt(0).childAt(0).childAt(0);
knob.simulate('touchStart', event);
expect(wrapper.state().pressed).toEqual(true);
});
@ -114,7 +114,7 @@ describe('Slider', () => {
const instance = wrapper.instance();
instance.setState({ sliderStart: 0, sliderLength: 1000 });
instance.handleResize = (evt, callback) => { callback(); };
wrapper.childAt(0).simulate('mouseDown', event);
wrapper.childAt(0).childAt(0).simulate('mouseDown', event);
expect(onChange).toHaveBeenCalledWith(-300);
});
@ -125,7 +125,7 @@ describe('Slider', () => {
const instance = wrapper.instance();
instance.setState({ sliderStart: 0, sliderLength: 1000 });
instance.handleResize = (evt, callback) => { callback(); };
wrapper.childAt(0).simulate('touchStart', event);
wrapper.childAt(0).childAt(0).simulate('touchStart', event);
expect(onChange).toHaveBeenCalledWith(-300);
});
@ -136,7 +136,7 @@ describe('Slider', () => {
const instance = wrapper.instance();
instance.setState({ sliderStart: 0, sliderLength: 1000 });
instance.handleResize = (evt, callback) => { callback(); };
wrapper.childAt(0).simulate('mouseDown', event);
wrapper.childAt(0).childAt(0).simulate('mouseDown', event);
expect(onChange).toHaveBeenCalledWith(90);
});
@ -154,7 +154,7 @@ describe('Slider', () => {
const onChange = jest.fn();
const wrapper = mount(<Slider editable value={50} onChange={onChange} />);
wrapper.instance().setState({ sliderStart: 0, sliderLength: 1000 });
wrapper.childAt(0).simulate('mouseDown', { pageX: 900, pageY: 0 });
wrapper.childAt(0).childAt(0).simulate('mouseDown', { pageX: 900, pageY: 0 });
expect(onChange).toHaveBeenCalled();
});
});

2
components/snackbar/Snackbar.js
View File

@ -19,7 +19,7 @@ const factory = (Button) => {
PropTypes.element,
]),
onClick: PropTypes.func,
onTimeout: PropTypes.func,
onTimeout: PropTypes.func, // eslint-disable-line
theme: PropTypes.shape({
accept: PropTypes.string,
active: PropTypes.string,

2
components/tabs/TabContent.js
View File

@ -4,7 +4,7 @@ import classnames from 'classnames';
import { themr } from 'react-css-themr';
import { TABS } from '../identifiers';
class TabContent extends Component {
class TabContent extends Component { // eslint-disable-line react/prefer-stateless-function
static propTypes = {
active: PropTypes.bool,
children: PropTypes.node,

6
components/tabs/__tests__/index.spec.js
View File

@ -24,21 +24,27 @@ describe('Tabs', () => {
it('defaults to only rendering the current tab', () => {
const wrapper = mount(<Composition />);
expect(wrapper.find(TabContent).length).toEqual(1);
expect(wrapper.find(TabContent).first().prop('tabIndex')).toEqual(0);
wrapper.instance().setState({ index: 1 });
wrapper.update();
expect(wrapper.find(TabContent).length).toEqual(1);
expect(wrapper.find(TabContent).first().prop('tabIndex')).toEqual(1);
});
it('renders inactive tabs when hideMode is set to display', () => {
const wrapper = mount(<Composition hideMode="display" />);
expect(wrapper.find(TabContent).length).toEqual(2);
expect(wrapper.find(TabContent).at(0).prop('hidden')).toEqual(false);
expect(wrapper.find(TabContent).at(1).prop('hidden')).toEqual(true);
wrapper.instance().setState({ index: 1 });
wrapper.update();
expect(wrapper.find(TabContent).length).toEqual(2);
expect(wrapper.find(TabContent).at(0).prop('hidden')).toEqual(true);
expect(wrapper.find(TabContent).at(1).prop('hidden')).toEqual(false);

29
components/time_picker/Clock.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import CSSTransition from 'react-transition-group/CSSTransition';
import { getAnimationModule } from '../utils/utils';
import time from '../utils/time';
import Hours from './ClockHours';
@ -116,20 +117,18 @@ class Clock extends Component {
style={{ height: this.state.radius * 2 }}
ref={(node) => { this.placeholderNode = node; }}
>
<CssTransitionGroup
transitionName={animationModule}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
<div
key={this.props.display}
className={theme.clockWrapper}
style={{ height: this.state.radius * 2 }}
>
{this.props.display === 'hours' ? this.renderHours() : null}
{this.props.display === 'minutes' ? this.renderMinutes() : null}
</div>
</CssTransitionGroup>
<TransitionGroup>
<CSSTransition classNames={animationModule} timeout={500}>
<div
key={this.props.display}
className={theme.clockWrapper}
style={{ height: this.state.radius * 2 }}
>
{this.props.display === 'hours' ? this.renderHours() : null}
{this.props.display === 'minutes' ? this.renderMinutes() : null}
</div>
</CSSTransition>
</TransitionGroup>
</div>
</div>
);

2
components/utils/testing.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import TestUtils from 'react-dom/test-utils';
export default {
renderComponent(Component, props = {}, state = {}) {

3
jest.polyfills.js Normal file
View File

@ -0,0 +1,3 @@
global.requestAnimationFrame = function (callback) {
setTimeout(callback, 0);
};

8
jest.setup.js
View File

@ -1 +1,7 @@
Object.defineProperty(window, 'requestAnimationFrame', { value: fn => fn() });
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({
adapter: new Adapter(),
disableLifecycleMethods: true,
});

50
package.json
View File

@ -26,38 +26,42 @@
"toolkit"
],
"dependencies": {
"@types/prop-types": "^15.5.2",
"classnames": "^2.2.5",
"core-js": "^2.4.0",
"ramda": "^0.23.0",
"react-css-themr": "^2.1.2",
"react-style-proptype": "^3.0.0",
"react-transition-group": "^1.1.3"
"react-transition-group": "^2.2.1"
},
"devDependencies": {
"@types/node": "^7.0.4",
"@types/react": "^15.0.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"@types/react": "^16.0.7",
"ajv": "^6.1.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-loader": "^7.1.2",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"caniuse-db": "^1.0.30000652",
"cpx": "^1.5.0",
"cross-env": "^5.0.0",
"css-loader": "^0.28.2",
"enzyme": "^2.8.2",
"enzyme-to-json": "^1.5.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.0.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-compat": "^1.0.2",
"eslint-plugin-import": "^2.3.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-compat": "^1.0.4",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"eslint-plugin-react": "^7.4.0",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.0",
"git-dirty": "^1.0.2",
@ -79,21 +83,20 @@
"postcss-nesting": "^4.0.1",
"postcss-reporter": "^3.0.0",
"pre-commit": "^1.2.2",
"prop-types": "^15.5.10",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0",
"react-test-renderer": "^15.5.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-test-renderer": "^16.2.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.6",
"redbox-react": "^1.5.0",
"rimraf": "^2.6.1",
"sinon": "^2.0.0-pre.2",
"style-loader": "^0.18.1",
"stylelint": "^7.10.1",
"stylelint-config-standard": "^16.0.0",
"stylelint-order": "^0.4.4",
"typescript": "^2.1.5",
"typescript": "^2.3.0",
"webpack": "^2.6.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"
@ -132,6 +135,7 @@
"<rootDir>/components"
],
"setupFiles": [
"./jest.polyfills.js",
"./jest.setup.js"
],
"snapshotSerializers": [
@ -140,10 +144,10 @@
},
"peerDependencies": {
"classnames": "^2.2.0",
"prop-types": "^15.5.7",
"react": "^15.5.0",
"react-dom": "^15.5.0",
"react-transition-group": "^1.1.3"
"prop-types": "^15.6.0",
"react": "^15.5.0 || ^16.0.0",
"react-dom": "^15.5.0 || ^16.0.0",
"react-transition-group": "^2.2.0"
},
"pre-commit": "lint:staged"
}

7
spec/ts/dialog.tsx
View File

@ -1,4 +1,5 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import Button from '../../components/button';
import Dialog from '../../components/dialog';
import Dropdown from '../../components/dropdown';
@ -64,11 +65,11 @@ class DialogTest extends React.Component<any, any> {
class ContextComponent extends React.Component<any, any> {
static propTypes = {
children: React.PropTypes.any,
children: PropTypes.any,
};
static childContextTypes = {
message: React.PropTypes.string,
message: PropTypes.string,
}
getChildContext() {
@ -84,7 +85,7 @@ class ContextComponent extends React.Component<any, any> {
class DialogChild extends React.Component<any, any> {
static contextTypes = {
message: React.PropTypes.string,
message: PropTypes.string,
}
render() {

4
spec/ts/pickers.tsx
View File

@ -3,8 +3,8 @@ import DatePicker from '../../components/date_picker';
import TimePicker from '../../components/time_picker';
const datetime = new Date(2015, 10, 16);
const min_datetime = new Date(new Date(datetime).setDate(8));
const max_datetime = new Date(new Date(datetime).setDate(24));
const min_datetime = new Date(new Date(datetime.toString()).setDate(8));
const max_datetime = new Date(new Date(datetime.toString()).setDate(24));
datetime.setHours(17);
datetime.setMinutes(28);
const today = new Date();

1015
yarn.lock
View File

File diff suppressed because it is too large Load Diff