Skip to content

Commit

Permalink
Change "item" to "suggestion" in theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@moroshko
moroshko committed Dec 20, 2015
1 parent 1e96b22 commit 29e61c8
Show file tree
Hide file tree
Showing 12 changed files with 312 additions and 153 deletions.
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
1. Add your goodness
2. Add tests
3. Update docs to reflect changes
4. Make sure that `npm run build` is happy
4. Make sure that `npm run lint && npm test` is happy
5. Commit changes **without including any `dist` or `demo/dist` files**
6. Create Pull Request
6. Submit a Pull Request
119 changes: 61 additions & 58 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,9 +373,9 @@ For example, to style the Autosuggest using CSS Modules, do:

.container { ... }
.input { ... }
.items-container { ... }
.item { ... }
.item--focused { ... }
.suggestions-container { ... }
.suggestion { ... }
.suggestion--focused { ... }
...
```

Expand All @@ -390,71 +390,74 @@ When not specified, `theme` defaults to:

```js
{
'container': 'react-autosuggest__container',
'container--open': 'react-autosuggest__container--open',
'input': 'react-autosuggest__input',
'items-container': 'react-autosuggest__suggestions-container',
'item': 'react-autosuggest__item',
'item--focused': 'react-autosuggest__item--focused',
'section-container': 'react-autosuggest__section-container',
'section-title': 'react-autosuggest__section-title',
'section-items-container': 'react-autosuggest__section-suggestions-container'
'container': 'react-autosuggest__container',
'container--open': 'react-autosuggest__container--open',
'input': 'react-autosuggest__input',
'suggestions-container': 'react-autosuggest__suggestions-container',
'suggestion': 'react-autosuggest__suggestion',
'suggestion--focused': 'react-autosuggest__suggestion--focused',
'section-container': 'react-autosuggest__section-container',
'section-title': 'react-autosuggest__section-title',
'section-suggestions-container': 'react-autosuggest__section-suggestions-container'
}
```

An example of styling an Autosuggest using CSS Modules can be found [here](https://github.com/moroshko/react-autosuggest/blob/master/demo/src/components/theme.less).

The following diagrams illustrate how `theme` is structured.

##### No sections

+--| container |-----------------+
| |
| +--| input |---------------+ |
| | | |
| +--------------------------+ |
| |
| +--| items-container |-----+ |
| | | |
| | +--| item |----------+ | |
| | | | | |
| | +--------------------+ | |
| | | |
| +--------------------------+ |
| |
+--------------------------------+

##### Plain list

+--| container |-----------------------+
| |
| +--| input |---------------------+ |
| | | |
| +--------------------------------+ |
| |
| +--| suggestions-container |-----+ |
| | | |
| | +--| suggestion |----------+ | |
| | | | | |
| | +--------------------------+ | |
| | | |
| +--------------------------------+ |
| |
+--------------------------------------+

##### Multiple sections


+--| container |----------------------------------+
| |
| +--| input |--------------------------------+ |
| | | |
| +-------------------------------------------+ |
| |
| +--| items-container |----------------------+ |
| | | |
| | +--| section-container |--------------+ | |
| | | | | |
| | | +--| section-title |------------+ | | |
| | | | | | | |
| | | +-------------------------------+ | | |
| | | | | |
| | | +--| section-items-container |--+ | | |
| | | | | | | |
| | | | +--| item |---------------+ | | | |
| | | | | | | | | |
| | | | +-------------------------+ | | | |
| | | | | | | |
| | | +-------------------------------+ | | |
| | | | | |
| | +-------------------------------------+ | |
| | | |
| +-------------------------------------------+ |
| |
+-------------------------------------------------+
+--| container |----------------------------------------+
| |
| +--| input |--------------------------------------+ |
| | | |
| +-------------------------------------------------+ |
| |
| +--| suggestions-container |----------------------+ |
| | | |
| | +--| section-container |--------------------+ | |
| | | | | |
| | | +--| section-title |------------------+ | | |
| | | | | | | |
| | | +-------------------------------------+ | | |
| | | | | |
| | | +--| section-suggestions-container |--+ | | |
| | | | | | | |
| | | | +--| suggestion |---------------+ | | | |
| | | | | | | | | |
| | | | +-------------------------------+ | | | |
| | | | | | | |
| | | +-------------------------------------+ | | |
| | | | | |
| | +-------------------------------------------+ | |
| | | |
| | +--| section-container |--------------------+ | |
| | | | | |
| | | ... | | |
| | | | | |
| | +-------------------------------------------+ | |
| +-------------------------------------------------+ |
| |
+-------------------------------------------------------+

## Development

Expand Down
4 changes: 2 additions & 2 deletions demo/src/components/App/components/BasicUsage/autosuggest.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@
z-index: 2;
}

.react-autosuggest__item {
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}

.react-autosuggest__item--focused {
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}

Expand Down
8 changes: 4 additions & 4 deletions demo/src/components/theme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}
}

.items-container {
.suggestions-container {
position: relative;
top: -1px;
width: 280px;
Expand All @@ -43,12 +43,12 @@
z-index: 2;
}

.item {
.suggestion {
cursor: pointer;
padding: 10px 20px;
}

.item--focused {
.suggestion--focused {
background-color: #ddd;
}

Expand All @@ -63,7 +63,7 @@
}
}

.section-items-container {
.section-suggestions-container {
margin: 0;
padding: 0;
list-style-type: none;
Expand Down
4 changes: 2 additions & 2 deletions demo/standalone/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@
z-index: 2;
}

.react-autosuggest__item {
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}

.react-autosuggest__item--focused {
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}

Expand Down
68 changes: 54 additions & 14 deletions dist/AutosuggestContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,47 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var defaultTheme = {
container: 'react-autosuggest__container',
'container--open': 'react-autosuggest__container--open',
input: 'react-autosuggest__input',
'suggestions-container': 'react-autosuggest__suggestions-container',
suggestion: 'react-autosuggest__suggestion',
'suggestion--focused': 'react-autosuggest__suggestion--focused',
'section-container': 'react-autosuggest__section-container',
'section-title': 'react-autosuggest__section-title',
'section-suggestions-container': 'react-autosuggest__section-suggestions-container'
};

function mapToAutowhateverTheme(theme) {
var result = {};

for (var key in theme) {
switch (key) {
case 'suggestions-container':
result['items-container'] = theme[key];
break;

case 'suggestion':
result['item'] = theme[key];
break;

case 'suggestion--focused':
result['item--focused'] = theme[key];
break;

case 'section-suggestions-container':
result['section-items-container'] = theme[key];
break;

default:
result[key] = theme[key];
}
}

return result;
}

var AutosuggestContainer = (function (_Component) {
_inherits(AutosuggestContainer, _Component);

Expand All @@ -41,6 +82,7 @@ var AutosuggestContainer = (function (_Component) {
var shouldRenderSuggestions = props.shouldRenderSuggestions;
var suggestions = props.suggestions;
var inputProps = props.inputProps;
var theme = props.theme;

var initialState = {
isFocused: false,
Expand All @@ -52,6 +94,7 @@ var AutosuggestContainer = (function (_Component) {
};

_this.store = (0, _redux.createStore)(_reducerAndActions2.default, initialState);
_this.theme = mapToAutowhateverTheme(theme);
return _this;
}

Expand All @@ -68,7 +111,6 @@ var AutosuggestContainer = (function (_Component) {
var getSectionSuggestions = _props.getSectionSuggestions;
var inputProps = _props.inputProps;
var onSuggestionSelected = _props.onSuggestionSelected;
var theme = _props.theme;

return _react2.default.createElement(
_reactRedux.Provider,
Expand All @@ -82,7 +124,7 @@ var AutosuggestContainer = (function (_Component) {
getSectionSuggestions: getSectionSuggestions,
inputProps: inputProps,
onSuggestionSelected: onSuggestionSelected,
theme: theme })
theme: this.theme })
);
}
}]);
Expand Down Expand Up @@ -110,7 +152,15 @@ AutosuggestContainer.propTypes = {
multiSection: _react.PropTypes.bool,
renderSectionTitle: _react.PropTypes.func,
getSectionSuggestions: _react.PropTypes.func,
theme: _react.PropTypes.object
theme: function theme(props, propName, componentName) {
var theme = props[propName];

for (var key in theme) {
if (!(key in defaultTheme)) {
throw new Error('\'' + key + '\' is not a valid property in \'theme\'. Valid properties are:\n\n' + Object.keys(defaultTheme).join('\n') + '\n\n');
}
}
}
};
AutosuggestContainer.defaultProps = {
shouldRenderSuggestions: function shouldRenderSuggestions(value) {
Expand All @@ -125,16 +175,6 @@ AutosuggestContainer.defaultProps = {
throw new Error('`getSectionSuggestions` must be provided');
},

theme: {
container: 'react-autosuggest__container',
'container--open': 'react-autosuggest__container--open',
input: 'react-autosuggest__input',
'items-container': 'react-autosuggest__suggestions-container',
item: 'react-autosuggest__item',
'item--focused': 'react-autosuggest__item--focused',
'section-container': 'react-autosuggest__section-container',
'section-title': 'react-autosuggest__section-title',
'section-items-container': 'react-autosuggest__section-suggestions-container'
}
theme: defaultTheme
};
exports.default = AutosuggestContainer;
Loading

0 comments on commit 29e61c8

Please sign in to comment.