(http://souporserious.com)",
35 | "license": "MIT",
36 | "bugs": {
37 | "url": "https://github.com/souporserious/selectly/issues"
38 | },
39 | "homepage": "https://github.com/souporserious/selectly",
40 | "peerDependencies": {
41 | "react": ">0.13.0",
42 | "react-dom": ">0.13.0"
43 | },
44 | "dependencies": {
45 | "react-aria": "^0.9.2",
46 | "react-measure": "^1.4.6",
47 | "react-popper": "^0.7.0",
48 | "react-travel": "^1.3.5"
49 | },
50 | "devDependencies": {
51 | "babel-cli": "^6.16.0",
52 | "babel-core": "^6.17.0",
53 | "babel-loader": "^6.2.5",
54 | "babel-plugin-add-module-exports": "^0.2.1",
55 | "babel-preset-es2015": "^6.16.0",
56 | "babel-preset-react": "^6.16.0",
57 | "babel-preset-stage-0": "^6.16.0",
58 | "chokidar": "^1.6.1",
59 | "css-loader": "^0.25.0",
60 | "git-directory-deploy": "^1.5.1",
61 | "http-server": "^0.9.0",
62 | "node-libs-browser": "^1.0.0",
63 | "node-sass": "^3.2.0",
64 | "postcss-loader": "^0.13.0",
65 | "react": "15.3.2",
66 | "react-dom": "15.3.2",
67 | "react-motion": "^0.3.1",
68 | "react-motion-ui-pack": "^0.5.1",
69 | "sass-loader": "^4.0.2",
70 | "style-loader": "^0.13.1",
71 | "webpack": "^1.13.2",
72 | "webpack-dev-server": "^1.9.0"
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/selectly.scss:
--------------------------------------------------------------------------------
1 | .react-select {
2 | display: inline-block;
3 | width: 100%;
4 | height: auto;
5 | position: relative;
6 | }
7 |
8 | .react-select-trigger {
9 | box-sizing: border-box;
10 | display: flex;
11 | width: 100%;
12 | height: 31px;
13 | padding: 6px 27px 6px 6px;
14 | font-size: 14px;
15 | text-align: left;
16 | border-radius: 3px;
17 | border: 1px solid #d3d4d4;
18 | //outline: 0;
19 | cursor: pointer;
20 | position: relative;
21 | background: {
22 | color: #fff;
23 | image: url('data:image/svg+xml;utf8,');
24 | repeat: no-repeat;
25 | position: calc(100% - 5px) center;
26 | }
27 |
28 | &, &:active {
29 | color: black;
30 | }
31 |
32 | &.react-select-enabled {
33 | }
34 |
35 | &.react-select-target-attached-top {
36 | border-radius: 0 0 3px 3px;
37 | }
38 |
39 | &.react-select-target-attached-bottom {
40 | border-radius: 3px 3px 0 0;
41 | }
42 |
43 | // truncate children with ellipsis
44 | * {
45 | white-space: nowrap;
46 | overflow: hidden;
47 | text-overflow: ellipsis;
48 | }
49 | }
50 |
51 | .react-select-trigger__option {
52 | user-select: none;
53 |
54 | & + & {
55 | margin-left: 6px;
56 | }
57 |
58 | .react-select-trigger--multiple & {
59 | padding: 0 3px;
60 | border-radius: 2px;
61 | background: #E6F9FF;
62 | }
63 | }
64 |
65 | .react-select-trigger__arrow {
66 | position: absolute;
67 | right: 6px;
68 | top: 50%;
69 | transform: translateY(-50%);
70 | }
71 |
72 | .react-select-menu {
73 | max-height: 180px;
74 | padding: 3px 0;
75 | border: 1px solid #e1e1e1;
76 | border-radius: 0 0 3px 3px;
77 | box-shadow: 0 2px 4px 0 rgba(218, 221, 222, 0.35);
78 | background-color: white;
79 | overflow-x: hidden;
80 | overflow-y: auto;
81 | -webkit-tap-highlight-color: transparent;
82 |
83 | .react-select-enabled & {
84 | pointer-events: auto;
85 | }
86 |
87 | .react-select-element-attached-top & {
88 | margin-top: -1px;
89 | border-top: 0;
90 | }
91 |
92 | .react-select-element-attached-bottom & {
93 | margin-top: 1px;
94 | border-bottom: 0;
95 | border-radius: 3px 3px 0 0;
96 | box-shadow: 0 -2px 4px 0 rgba(218, 221, 222, 0.35);
97 | }
98 | }
99 |
100 | .react-select-header {
101 | display: flex;
102 | padding: 8px;
103 | border-bottom: 1px solid #F1F3F5;
104 | border-top: 1px solid #F1F3F5;
105 | }
106 |
107 | .react-select-btn {
108 | flex: 1;
109 | }
110 |
111 | .react-select-options {
112 | padding: 0;
113 | margin: 0;
114 | list-style: none;
115 | }
116 |
117 | .react-select-option {
118 | display: flex;
119 | align-items: center;
120 | padding: 4px 8px;
121 | font-size: 14px;
122 | text-indent: 4px;
123 | border-radius: 2px;
124 | cursor: pointer;
125 | user-select: none;
126 |
127 | &:hover {
128 | background: #FBFBFB;
129 | }
130 | }
131 |
132 | .react-select-option__label {
133 | width: 100%;
134 | overflow: hidden;
135 | text-overflow: ellipsis;
136 | white-space: nowrap;
137 | }
138 |
139 | .react-select-optgroup {
140 | display: block;
141 | padding: 3px 0;
142 | cursor: default;
143 | border-top: 1px solid #F1F3F5;
144 |
145 | &:first-child {
146 | border: 0;
147 | }
148 | }
149 |
150 | .react-select-optgroup__title {
151 | display: block;
152 | padding: 8px 12px 6px;
153 | font-size: 14px;
154 | font-weight: 700;
155 | text-transform: uppercase;
156 | letter-spacing: 1px;
157 | color: #909294;
158 | user-select: none;
159 | }
160 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Selectly
2 |
3 | Build custom select menus in React. Provides a low level way to build the select menu you need.
4 |
5 | ## Install
6 |
7 | `npm install selectly --save`
8 |
9 | `bower install selectly --save`
10 |
11 | ## Example Usage
12 |
13 | ```javascript
14 | import { Select, Trigger, OptionList, Option, utils } from 'Selectly'
15 | const { getToggledValues } = utils
16 |
17 | class MultiSelect extends Component {
18 | constructor(props) {
19 | super(props)
20 | this.state = {
21 | defaultValue: 'Select a color',
22 | currentValues: []
23 | }
24 | }
25 |
26 | _handleChange(value) {
27 | this.setState({
28 | currentValues: getToggledValues(this.state.currentValues, value)
29 | })
30 | }
31 |
32 | render() {
33 | const { defaultValue, currentValues } = this.state
34 | return (
35 |
51 | )
52 | }
53 | }
54 | ```
55 |
56 | ## Select Props
57 |
58 | ### `children`: PropTypes.node.isRequired (Accepts 2 children)
59 |
60 | The first child is used as the `trigger` and the second child is used as the `options` that will be displayed upon clicking the trigger.
61 |
62 | ### `multiple`: PropTypes.bool
63 |
64 | When `true` this allows multiple options to be selected.
65 |
66 | ### `disabled`: PropTypes.bool
67 |
68 | Puts the select menu in a disabled state.
69 |
70 | ### `autoWidth`: PropTypes.bool
71 |
72 | Determines if the `options` should be the same width as the `trigger`.
73 |
74 | ### `onChange`: PropTypes.func
75 |
76 | Callback when an option has been selected. Passes back the value that was selected.
77 |
78 | ## React ARIA Components
79 |
80 | `Trigger`, `OptionList`, and `Option` are exported directly from [React ARIA](https://github.com/souporserious/react-aria)
81 |
82 | ## Utilities
83 |
84 | ### `buildOptionsLookup`: (array options)
85 |
86 | Returns a flat object to allow optgroup options to be accessed easier.
87 |
88 | ```javascript
89 | [
90 | { label: 'Dogs', optgroup: [
91 | { value: 'frenchy', label: 'French Bulldog' },
92 | { value: 'pit-bull', label: 'Pit Bull' }
93 | ]},
94 | { label: 'Cats', optgroup: [
95 | { value: 'munchkin', label: 'Munchkin' },
96 | { value: 'persian', label: 'Persian' }
97 | ]}
98 | ]
99 | ```
100 |
101 | turns into
102 |
103 | ```javascript
104 | {
105 | 'frenchy': { value: 'frenchy', label: 'French Bulldog' },
106 | 'pit-bull': { value: 'pit-bull', label: 'Pit Bull' },
107 | 'munchkin': { value: 'munchkin', label: 'Munchkin' },
108 | 'persian': { value: 'persian', label: 'Persian' }
109 | }
110 | ```
111 |
112 | ### `getAllValues`: (object options)
113 |
114 | Returns an array of all option values.
115 |
116 | ### `getToggledValues`: (object prevValues, [array, string] nextValues)
117 |
118 | Returns a new array of values either added or removed.
119 |
120 | ### `getCurrentOptions`: (object options, [array, string] currentValue)
121 |
122 | Returns an array of the current option or options.
123 |
124 | ### `isOptionSelected`: ([array, string] currentValue, string value)
125 |
126 | Determines if `value` exists in or matches `currentValue`. Returns `true` or `false`.
127 |
128 |
129 |
130 | ## Run Example
131 |
132 | clone repo
133 |
134 | `git clone git@github.com:souporserious/selectly.git`
135 |
136 | move into folder
137 |
138 | `cd ~/selectly`
139 |
140 | install dependencies
141 |
142 | `npm install`
143 |
144 | run dev mode
145 |
146 | `npm run dev`
147 |
148 | open your browser and visit: `http://localhost:8080/`
149 |
--------------------------------------------------------------------------------
/src/Select.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes, Children, cloneElement } from 'react'
2 | import ReactDOM, { findDOMNode } from 'react-dom'
3 | import { Select as ARIASelect } from 'react-aria'
4 | import { Manager as PopperManager } from 'react-popper'
5 | import getToggledValues from './utils/get-toggled-values'
6 | import isOptionSelected from './utils/is-option-selected'
7 |
8 | const { Manager: SelectManager } = ARIASelect
9 |
10 | const arraysEqual = (a, b) => a.sort().join(' ') === b.sort().join(' ')
11 |
12 | const noop = () => null
13 |
14 | class Select extends Component {
15 | static childContextTypes = {
16 | selectly: PropTypes.object,
17 | }
18 |
19 | static propTypes = {
20 | multiple: PropTypes.bool,
21 | disabled: PropTypes.bool,
22 | autoWidth: PropTypes.bool,
23 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
24 | onChange: PropTypes.func,
25 | }
26 |
27 | static defaultProps = {
28 | multiple: false,
29 | disabled: false,
30 | autoWidth: true,
31 | onChange: noop,
32 | }
33 |
34 | state = {
35 | isOpen: false,
36 | triggerWidth: null,
37 | value: this.props.value,
38 | selectedOptions: [],
39 | }
40 | options = []
41 |
42 | getChildContext() {
43 | return {
44 | selectly: {
45 | ...this.state,
46 | autoWidth: this.props.autoWidth,
47 | multiple: this.props.multiple,
48 | open: this.open,
49 | close: this.close,
50 | toggle: this.toggle,
51 | addOption: this._addOption,
52 | removeOption: this._removeOption,
53 | onTriggerMeasure: this._handleTriggerMeasure,
54 | onChange: this._handleChange,
55 | },
56 | }
57 | }
58 |
59 | componentWillReceiveProps(nextProps) {
60 | // update any new values by comparing the current values with incoming values
61 | if (nextProps.value) {
62 | if (nextProps.value.constructor === Array) {
63 | if (
64 | (this.props.value &&
65 | !arraysEqual(this.props.value, nextProps.value)) ||
66 | (this.state.value && !arraysEqual(this.state.value, nextProps.value))
67 | ) {
68 | this._setValue(nextProps.value)
69 | }
70 | } else {
71 | if (
72 | this.props.value !== nextProps.value ||
73 | this.state.value !== nextProps.value
74 | ) {
75 | this._setValue(nextProps.value)
76 | }
77 | }
78 | }
79 |
80 | // if there is an incoming disabled prop we need to make sure the options get closed
81 | if (
82 | this.props.disabled !== nextProps.disabled &&
83 | nextProps.disabled === true
84 | ) {
85 | this.close()
86 | }
87 | }
88 |
89 | open = () => {
90 | this.setState({ isOpen: true })
91 | }
92 |
93 | close = () => {
94 | this.setState({ isOpen: false })
95 | }
96 |
97 | toggle = () => {
98 | this.setState(state => ({ isOpen: !state.isOpen }))
99 | }
100 |
101 | _addOption = option => {
102 | // store option so we can update its state
103 | this.options.push(option)
104 |
105 | // determine if this option is selected or not
106 | if (isOptionSelected(this.state.value, option.value)) {
107 | option.setSelectedState(true)
108 | }
109 | }
110 |
111 | _removeOption = value => {
112 | this.options = this.options.filter(option => option.value !== value)
113 | }
114 |
115 | _handleTriggerMeasure = ({ width }) => {
116 | this.setState({ triggerWidth: width })
117 | }
118 |
119 | _setValue(value, cb = noop) {
120 | const selectedOptions = []
121 |
122 | this.options.forEach(option => {
123 | const isSelected = isOptionSelected(value, option.value)
124 |
125 | option.setSelectedState(isSelected)
126 |
127 | if (isSelected) {
128 | selectedOptions.push(option)
129 | }
130 | })
131 |
132 | this.setState({ value, selectedOptions }, cb)
133 | }
134 |
135 | _getSelectedOptions() {
136 | return this.options.filter(option => option.getSelectedState())
137 | }
138 |
139 | _handleChange = option => {
140 | const { multiple, onChange } = this.props
141 | const newValue = multiple
142 | ? getToggledValues(this.state.value, option.value)
143 | : option.value
144 |
145 | this._setValue(newValue, () => {
146 | onChange({
147 | value: newValue,
148 | option: option,
149 | options: this.options,
150 | selectedOptions: this.state.selectedOptions,
151 | })
152 |
153 | if (!multiple) {
154 | this.close()
155 | }
156 | })
157 | }
158 |
159 | render() {
160 | const {
161 | multiple,
162 | disabled,
163 | autoWidth,
164 | onChange,
165 | children,
166 | ...restProps
167 | } = this.props
168 | return (
169 |
170 |
171 | {children}
172 |
173 |
174 | )
175 | }
176 | }
177 |
178 | export default Select
179 |
--------------------------------------------------------------------------------
/example/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, Children, PropTypes, cloneElement } from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { spring } from 'react-motion'
4 | import {
5 | Select,
6 | Trigger,
7 | Menu,
8 | OptionList,
9 | Option,
10 | utils,
11 | } from '../src/selectly.js'
12 |
13 | import '../src/selectly.scss'
14 | import './main.scss'
15 |
16 | const {
17 | buildOptionsLookup,
18 | getCurrentOptions,
19 | getToggledValues,
20 | getAllValues,
21 | isOptionSelected,
22 | withOptGroupProps,
23 | } = utils
24 |
25 | // TODO:
26 | // recreate these:
27 | // http://tympanus.net/Development/SelectInspiration/index4.html
28 | // accessible:
29 | // http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms
30 |
31 | const OptGroup = withOptGroupProps(
32 | ({ title, children, isAllSelected, selectAll, deselectAll }) =>
33 |
34 |
37 | {children}
38 |
39 | )
40 |
41 | class CustomTrigger extends Component {
42 | _renderLabel(label) {
43 | return (
44 |
45 | {label}
46 |
47 | )
48 | }
49 |
50 | render() {
51 | const {
52 | currentValue,
53 | emptyValue,
54 | isMultiple,
55 | isDisabled,
56 | ...restProps
57 | } = this.props
58 | const isActive = false
59 | return (
60 |
69 | {currentValue.length > 0
70 | ? currentValue.map(({ label }) => this._renderLabel(label))
71 | : emptyValue}
72 |
73 | )
74 | }
75 | }
76 |
77 | class MySelect extends Component {
78 | static propTypes = {
79 | emptyValue: PropTypes.any,
80 | value: PropTypes.any,
81 | options: PropTypes.array,
82 | checkbox: PropTypes.bool,
83 | multiple: PropTypes.bool,
84 | selectAll: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
85 | deselectAll: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
86 | }
87 |
88 | static defaultProps = {
89 | emptyValue: '',
90 | checkbox: false,
91 | multiple: false,
92 | selectAll: false,
93 | deselectAll: false,
94 | }
95 |
96 | open() {
97 | this._select.open()
98 | }
99 |
100 | close() {
101 | this._select.close()
102 | }
103 |
104 | _renderOption({ value, label }) {
105 | const hasCheckbox = this.props.checkbox
106 | const isSelected = isOptionSelected(this.props.value, value)
107 | return (
108 |
131 | )
132 | }
133 |
134 | _renderOptGroup({ label, optgroup }) {
135 | return (
136 |
137 |
138 | {label}
139 |
140 | {this._renderOptions(optgroup)}
141 |
142 | )
143 | }
144 |
145 | _renderOptions(options) {
146 | return (
147 |
148 | {options.map(
149 | (option, index) =>
150 | option.optgroup
151 | ? this._renderOptGroup(option)
152 | : this._renderOption(option)
153 | )}
154 |
155 | )
156 | }
157 |
158 | _renderSelectAll() {
159 | const { selectAll, deselectAll } = this.props
160 | return (
161 |
162 | {selectAll &&
163 | }
170 | {deselectAll &&
171 | }
178 |
179 | )
180 | }
181 |
182 | render() {
183 | const {
184 | value,
185 | emptyValue,
186 | options,
187 | multiple,
188 | onChange,
189 | selectAll,
190 | deselectAll,
191 | } = this.props
192 | const currentOptions = getCurrentOptions(options, value)
193 | return (
194 |
212 | )
213 | }
214 | }
215 |
216 | class Demo1 extends Component {
217 | state = {
218 | value: null,
219 | options: [
220 | {
221 | label: 'Dogs',
222 | optgroup: [
223 | { value: 'beagle', label: 'Beagle' },
224 | { value: 'boxer', label: 'Boxer' },
225 | { value: 'frenchy', label: 'French Bulldog' },
226 | { value: 'pit-bull', label: 'Pit Bull' },
227 | ],
228 | },
229 | {
230 | label: 'Cats',
231 | optgroup: [
232 | { value: 'bengal', label: 'Bengal' },
233 | { value: 'egyptian', label: 'Egyptian' },
234 | { value: 'munchkin', label: 'Munchkin' },
235 | { value: 'persian', label: 'Persian' },
236 | ],
237 | },
238 | ],
239 | }
240 |
241 | _openSelectMenu = () => {
242 | this._select.open()
243 | }
244 |
245 | _handleChange = ({ value }) => {
246 | this.setState({ value })
247 | }
248 |
249 | render() {
250 | const { value, options } = this.state
251 | return (
252 |
253 |
256 | (this._select = c)}
258 | value={value}
259 | options={options}
260 | onChange={this._handleChange}
261 | />
262 |
263 | )
264 | }
265 | }
266 |
267 | class Demo2 extends Component {
268 | state = {
269 | value: ['the-shining', 'halloween'],
270 | options: [
271 | { value: 'the-shining', label: 'The Shining' },
272 | { value: 'poltergeist', label: 'Poltergeist' },
273 | { value: 'halloween', label: 'Halloween' },
274 | { value: 'pumpkinhead', label: 'Pumpkinhead' },
275 | ],
276 | }
277 |
278 | _handleChange = ({ value }) => {
279 | this.setState({ value })
280 | }
281 |
282 | _handleSelectAll = () => {
283 | this.setState({
284 | value: getAllValues(this.state.options),
285 | })
286 | }
287 |
288 | _handleDeselectAll = () => {
289 | this.setState({
290 | value: [],
291 | })
292 | }
293 |
294 | render() {
295 | const { value, options } = this.state
296 | return (
297 |
298 |
299 |
309 |
310 | )
311 | }
312 | }
313 |
314 | class MultiSelect extends Component {
315 | constructor(props) {
316 | super(props)
317 | this.state = {
318 | defaultValue: 'Select a color',
319 | value: [],
320 | options: ['red', 'green', 'blue'],
321 | }
322 | }
323 |
324 | _handleChange = ({ value }) => {
325 | this.setState({ value })
326 | }
327 |
328 | render() {
329 | const { defaultValue, value, options } = this.state
330 | return (
331 |
384 | )
385 | }
386 | }
387 |
388 | class MenuOnly extends Component {
389 | state = { currentValue: 'Select a value below' }
390 | _handleChange = option => {
391 | this.setState({ currentValue: option.value })
392 | }
393 | render() {
394 | const { currentValue } = this.state
395 | return (
396 |
404 | )
405 | }
406 | }
407 |
408 | class App extends Component {
409 | render() {
410 | return (
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |