Skip to content

Commit c6ef219

Browse files
JedWatsonJedWatson
committed
Merge branch 'v2' into v2-setup-circleci
2 parents 3fa5f68 + b52bb4d commit c6ef219

35 files changed

+1306
-1830
lines changed

‎.TODO.md

+20-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1+
# Changes planned from Beta -> RC:
2+
3+
* [ ] Look into package size reduction, extract optional modules, e.g
4+
* createFilter could be optional, saving 2.6k gz
5+
* vendor simple Menu by default, allow opt-in to advanced usage
6+
* [ ] Bind getStyles for each component
7+
8+
---
9+
110
# Order of focus:
211

3-
* [x] Tags mode (Creatable)
4-
* [x] Handle changing of isDisabled prop
5-
* [x] Better mobile support and touch handling
6-
* [x] Better control of flip behaviour
7-
* [x] Scroll the menu into view when it opens
8-
* [x] Handle touch outside (see v1 implementation)
9-
* [x] Review implementation of `isSearchable` prop (creates a "fake" input)
10-
* [x] Async + Creatable variant
11-
* [x] Cleanup
12-
* [x] Documentation - Props, Customisation
1312
* [ ] Review how the `required` state of the `<input>` can be handled
14-
* [ ] Upgrade Guide from v1 -> v2
1513
* [ ] Example of how to implement Separators
1614
* [ ] Handle Header and Footer elements in the Menu
1715
* [ ] Keyboard focusing of values in multi select
@@ -70,6 +68,17 @@
7068

7169
# Done:
7270

71+
* [x] Tags mode (Creatable)
72+
* [x] Handle changing of isDisabled prop
73+
* [x] Better mobile support and touch handling
74+
* [x] Better control of flip behaviour
75+
* [x] Scroll the menu into view when it opens
76+
* [x] Handle touch outside (see v1 implementation)
77+
* [x] Review implementation of `isSearchable` prop (creates a "fake" input)
78+
* [x] Async + Creatable variant
79+
* [x] Cleanup
80+
* [x] Documentation - Props, Customisation
81+
* [x] Upgrade Guide from v1 -> v2
7382
* [x] Lock scrolling on Menu (enable with prop)
7483
* [x] Make inputValue a controllable prop
7584
* [x] Make menuIsOpen a controllable prop

‎.babelrc

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
2-
"plugins": ["transform-class-properties", "transform-object-rest-spread"],
2+
"plugins": [
3+
"emotion",
4+
"transform-class-properties",
5+
"transform-object-rest-spread"
6+
],
37
"presets": ["env", "react"],
48
"ignore": ["node_modules"],
59
"env": {

‎.eslintrc.js

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ module.exports = {
1414
argsIgnorePattern: '^event$',
1515
ignoreRestSiblings: true,
1616
vars: 'all',
17-
varsIgnorePattern: '^glam$',
1817
},
1918
],
2019
curly: [2, 'multi-line'],

‎HISTORY.md

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# React-Select
22

3+
## v2.0.0-beta.2 / 2018-04-25
4+
5+
* Switched from glam to [emotion](https://emotion.sh) for css-in-js
6+
* Input colour can now be changed
7+
* Use of React 16 Fragment removed, 2.0.0 should work with React 15
8+
* SSR support improved
9+
* Indicator icons are now exported
10+
311
## v2.0.0-beta.1 / 2018-04-20
412

513
* Added `tabIndex` prop

‎docs/App/Footer.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React from 'react';
64

75
// const smallDevice = '@media (max-width: 769px)';
@@ -31,7 +29,7 @@ const Container = props => (
3129

3230
[largeDevice]: {
3331
alignItems: 'center',
34-
display: 'flex ',
32+
display: 'flex',
3533
justifyContent: 'space-between',
3634
paddingBottom: 20,
3735
paddingTop: 20,

‎docs/App/GitHubButton.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React from 'react';
64

75
type Props = { count: number, repo: string };
86

97
const StarButton = ({ count, repo }: Props) => (
10-
<div css={{ alignItems: 'center', display: 'inline-flex ', minWidth: 128 }}>
8+
<div css={{ alignItems: 'center', display: 'inline-flex', minWidth: 128 }}>
119
<a
1210
aria-label="Star react-select on GitHub"
1311
css={{
1412
alignItems: 'center',
15-
display: 'flex ',
13+
display: 'flex',
1614
borderRadius: 2,
1715
color: '#253858',
1816
backgroundColor: 'white',

‎docs/App/Header.js

+27-31
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import fetch from 'unfetch';
64
import React, { Component } from 'react';
75
import { withRouter } from 'react-router-dom';
@@ -44,30 +42,46 @@ const changes = [
4442

4543
function getLabel({ icon, label }) {
4644
return (
47-
<div style={{ alignItems: 'center', display: 'flex ' }}>
45+
<div style={{ alignItems: 'center', display: 'flex' }}>
4846
<span style={{ fontSize: 18, marginRight: '0.5em' }}>{icon}</span>
4947
<span style={{ fontSize: 14 }}>{label}</span>
5048
</div>
5149
);
5250
}
5351

54-
const Gradient = ({ css, innerRef, style, ...props }) => (
52+
const headerSelectStyles = {
53+
control: (base, { isFocused }) => ({
54+
...base,
55+
backgroundClip: 'padding-box',
56+
borderColor: 'rgba(0,0,0,0.1)',
57+
boxShadow: isFocused ? '0 0 0 1px #4C9AFF' : null,
58+
59+
':hover': {
60+
borderColor: 'rgba(0,0,0,0.2)',
61+
},
62+
}),
63+
option: base => ({
64+
...base,
65+
padding: '4px 12px',
66+
}),
67+
placeholder: base => ({
68+
...base,
69+
color: 'black',
70+
}),
71+
};
72+
73+
const Gradient = props => (
5574
<div
5675
css={{
5776
backgroundColor: '#2684FF',
77+
backgroundImage: 'linear-gradient(135deg, #2684FF 0%, #0747A6 100%)',
5878
color: 'white',
5979
position: 'relative',
6080
zIndex: 2,
6181

6282
[largeDevice]: {
6383
boxShadow: '0 5px 0 rgba(0, 0, 0, 0.08)',
6484
},
65-
...css,
66-
}}
67-
ref={innerRef}
68-
style={{
69-
backgroundImage: 'linear-gradient(135deg, #2684FF 0%, #0747A6 100%)',
70-
...style,
7185
}}
7286
{...props}
7387
/>
@@ -198,12 +212,13 @@ const Collapse = ({ height, isCollapsed, innerRef, ...props }) => {
198212
/>
199213
);
200214
};
215+
201216
const Content = ({ onChange, stars }) => (
202217
<div
203218
css={{
204219
marginTop: 16,
205220

206-
[largeDevice]: { display: 'flex ' },
221+
[largeDevice]: { display: 'flex' },
207222
}}
208223
>
209224
<div css={{ flex: 1, [largeDevice]: { paddingRight: 30 } }}>
@@ -242,26 +257,7 @@ const Content = ({ onChange, stars }) => (
242257
onChange={onChange}
243258
value={null}
244259
placeholder="🎉 What's new in V2"
245-
styles={{
246-
control: (css, { isFocused }) => ({
247-
...css,
248-
backgroundClip: 'padding-box',
249-
borderColor: 'rgba(0,0,0,0.1)',
250-
boxShadow: isFocused ? '0 0 0 1px #4C9AFF' : null,
251-
252-
':hover': {
253-
borderColor: 'rgba(0,0,0,0.2)',
254-
},
255-
}),
256-
option: css => ({
257-
...css,
258-
padding: '4px 12px',
259-
}),
260-
placeholder: css => ({
261-
...css,
262-
color: 'black',
263-
}),
264-
}}
260+
styles={headerSelectStyles}
265261
/>
266262
</div>
267263
</div>

‎docs/App/PageNav.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React, { Component, type ElementRef } from 'react';
64
import { Route, Switch } from 'react-router-dom';
75

@@ -112,7 +110,7 @@ const Nav = (props: any) => (
112110
[smallDevice]: {
113111
backgroundColor: 'rgba(255, 255, 255, 0.96)',
114112
boxShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.1)',
115-
display: 'flex ',
113+
display: 'flex',
116114
fontSize: 13,
117115
marginLeft: -appGutter,
118116
marginRight: -appGutter,

‎docs/App/ScrollSpy.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React, {
64
Component,
75
type ElementRef,
@@ -11,9 +9,8 @@ import rafSchedule from 'raf-schd';
119
import NodeResolver from 'react-node-resolver';
1210

1311
type Props = {
14-
children: ReactElement<*>, // Component | Element
12+
children: ReactElement<*>,
1513
onChange: (Array<any>) => void,
16-
query: '[data-hash]',
1714
};
1815
type State = {
1916
elements: Array<HTMLElement>,

‎docs/App/Sticky.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React, {
64
Component,
75
type ElementRef,

‎docs/App/TwitterButton.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React from 'react';
64

75
const TwitterButton = () => (
8-
<div css={{ alignItems: 'center', display: 'inline-flex ' }}>
6+
<div css={{ alignItems: 'center', display: 'inline-flex' }}>
97
<a
108
aria-label="Follow @JedWatson on Twitter"
119
css={{
1210
alignItems: 'center',
13-
display: 'flex ',
11+
display: 'flex',
1412
borderRadius: 2,
1513
color: 'white',
1614
border: '1px solid rgba(255, 255, 255, 0.3)',

‎docs/App/components.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React, { Component } from 'react';
64
import { Link, withRouter } from 'react-router-dom';
75

@@ -71,7 +69,7 @@ export const PrimaryNav = (props: any) => (
7169
<div
7270
css={{
7371
boxSizing: 'border-box',
74-
display: 'flex ',
72+
display: 'flex',
7573
maxWidth: 800,
7674
marginLeft: 'auto',
7775
marginRight: 'auto',

‎docs/App/index.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @flow
2-
// @jsx glam
32

4-
import glam from 'glam';
53
import React, { Component, Fragment } from 'react';
64
import { BrowserRouter, Route, Switch } from 'react-router-dom';
75
import { Helmet } from 'react-helmet';

‎docs/ExampleWrapper.js

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// @jsx glam
2-
3-
import glam from 'glam';
41
import React, { Component } from 'react';
52
import CodeSandboxer from 'react-codesandboxer';
63
import { replaceImports } from 'codesandboxer';
@@ -26,7 +23,7 @@ const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${
2623
}`;
2724

2825
export default class ExampleWrapper extends Component {
29-
state = { isHovered: false, showCode: false, };
26+
state = { isHovered: false, showCode: false };
3027
static defaultProps = { isEditable: true };
3128
handleEnter = () => this.setState({ isHovered: true });
3229
handleLeave = () => this.setState({ isHovered: false });
@@ -52,7 +49,7 @@ export default class ExampleWrapper extends Component {
5249
/>
5350
);
5451
}
55-
}
52+
};
5653

5754
renderSourceViewOption = () => {
5855
let { raw } = this.props;
@@ -79,7 +76,7 @@ export default class ExampleWrapper extends Component {
7976
</Action>
8077
);
8178
}
82-
}
79+
};
8380

8481
renderCSBButton = () => {
8582
let { isEditable, raw, urlPath } = this.props;
@@ -106,7 +103,7 @@ export default class ExampleWrapper extends Component {
106103
} else {
107104
return null;
108105
}
109-
}
106+
};
110107

111108
render() {
112109
const { isHovered } = this.state;
@@ -131,7 +128,7 @@ const ExampleHeading = (props: any) => (
131128
<div
132129
css={{
133130
alignItems: 'center',
134-
display: 'flex ',
131+
display: 'flex',
135132
justifyContent: 'space-between',
136133
paddingBottom: '1em',
137134
paddingTop: '1.25em',
@@ -175,7 +172,7 @@ const Action = ({ css, tag: Tag = 'button', ...props }: ActionProps) => {
175172
boxSizing: 'border-box',
176173
color: colors.neutral40,
177174
cursor: 'pointer',
178-
display: 'flex ',
175+
display: 'flex',
179176
fontSize: 'inherit',
180177
height: 24,
181178
marginLeft: 2,
@@ -207,7 +204,7 @@ const Actions = ({ show, ...props }) => (
207204
<div
208205
css={{
209206
alignItems: 'center',
210-
display: 'flex ',
207+
display: 'flex',
211208
justifyContent: 'space-between',
212209
opacity: show ? 1 : 0,
213210
transition: 'opacity 260ms, visibility 260ms',

‎docs/Svg.js

-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// @jsx glam
2-
3-
import glam from 'glam';
41
import React from 'react';
52

63
const Svg = ({ size, ...props }: { size: number }) => (

‎docs/examples/StyledSingle.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Select from '../../src';
66

77
const dot = (color = '#ccc') => ({
88
alignItems: 'center',
9-
display: 'flex ',
9+
display: 'flex',
1010

1111
':before': {
1212
backgroundColor: color,

0 commit comments

Comments
 (0)