Skip to content
This repository was archived by the owner on Aug 25, 2021. It is now read-only.

Commit 99600ae

Browse files
PanSpagetkaPanSpagetka
committed
Review changes
1 parent 79649f9 commit 99600ae

16 files changed

+208
-146
lines changed

‎demo/demo-app.jsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import * as ReactDOM from 'react-dom';
22
import * as React from 'react';
3-
import { Provider } from 'react-redux';
43
import { createStore } from 'redux';
54
import { TaggingWithButtonsConnected } from '../src/tagging/containers/tagging';
65
import taggingApp from '../src/tagging/reducers';
76
import { loadState } from '../src/tagging/actions';
87

98
const newTags = [
10-
{ description: 'Name', id: 1, singleValue: true, values: [{ description: 'Pepa', id: 11 }, { description: 'Franta', id: 12 }] },
9+
{
10+
description: 'Name', id: 1, singleValue: true, values: [{ description: 'Pepa', id: 11 }, { description: 'Franta', id: 12 }],
11+
},
1112
{ description: 'Number', id: 2, values: [{ description: '1', id: 21 }, { description: '2', id: 22 }] },
1213
{ description: 'Animal', id: 3, values: [{ description: 'Duck', id: 31 }, { description: 'Cat', id: 32 }, { description: 'Dog', id: 33 }] },
1314
{ description: 'Food', id: 4, values: [{ description: 'Steak', id: 41 }, { description: 'Duck', id: 42 }, { description: 'Salad', id: 43 }] },
@@ -25,11 +26,15 @@ const defaultState = { tags: newTags, assignedTags: newAssignedTags };
2526

2627
export default function renderApp() {
2728
const store = createStore(taggingApp);
29+
if (module.hot) {
30+
module.hot.accept('../src/tagging/reducers', () => {
31+
const nextRootReducer = taggingApp;
32+
store.replaceReducer(nextRootReducer);
33+
});
34+
}
2835
store.dispatch(loadState(defaultState));
2936
ReactDOM.render(
30-
<Provider store={store}>
31-
<TaggingWithButtonsConnected/>
32-
</Provider>,
37+
<TaggingWithButtonsConnected store={store} />,
3338
document.getElementById('demo-app'),
3439
);
3540
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
},
9595
"dependencies": {
9696
"lodash": "^4.17.4",
97-
"patternfly-react": "^1.8.0",
97+
"patternfly-react": "^1.16.4",
9898
"prop-types": "^15.6.0",
9999
"react": "^16.2.0",
100100
"react-dom": "^16.2.0",

‎scripts/webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ module.exports = (env) => {
3131
enforce: 'pre',
3232
test: /\.(js|jsx)$/,
3333
exclude: /node_modules/,
34+
loader: 'eslint-loader',
3435
},
3536
{
3637
test: /\.(js|jsx)$/,

‎src/tagging/components/categoryModifier.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Col, ControlLabel, FormGroup } from 'patternfly-react';
4+
import TagSelector from './tagSelector';
5+
6+
const CategoryModifier = ({
7+
tagCategories, onTagCategoryChange, selectedTagCategory, categoryLabel,
8+
}) => (
9+
<FormGroup>
10+
<Col xs={12} md={4} lg={6}>
11+
<ControlLabel>{categoryLabel}</ControlLabel>
12+
</Col>
13+
<Col xs={12} md={8} lg={6}>
14+
<TagSelector tagCategories={tagCategories} onTagCategoryChange={onTagCategoryChange} selectedOption={selectedTagCategory} />
15+
</Col>
16+
</FormGroup>
17+
);
18+
19+
CategoryModifier.propTypes = {
20+
tagCategories: PropTypes.arrayOf(PropTypes.object),
21+
selectedTagCategory: PropTypes.object.isRequired,
22+
onTagCategoryChange: PropTypes.func.isRequired,
23+
categoryLabel: PropTypes.string,
24+
};
25+
26+
CategoryModifier.defaultProps = {
27+
categoryLabel: 'Category:',
28+
};
29+
30+
export default CategoryModifier;

‎src/tagging/components/tag.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import { Label } from 'patternfly-react';
4-
import './tag.scss';
4+
import styles from './tag.scss';
5+
56

67
const Tag = ({
78
onTagDeleteClick, tagCategory, tagValue,
89
}) => (
9-
<li key={`${tagValue.id}`}>
10+
<li key={tagValue.id}>
1011
<Label
1112
key={tagValue.id}
12-
bsStyle='primary'
13-
onRemoveClick={() => { onTagDeleteClick(tagCategory, tagValue); }}
14-
style={{color: 'white'}}
13+
bsStyle="primary"
14+
onRemoveClick={() => onTagDeleteClick(tagCategory, tagValue)}
15+
style={{ color: styles.defaultColor }}
1516
>
1617
{tagValue.description}
1718
</Label>

‎src/tagging/components/tag.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
@import '~patternfly/dist/sass/patternfly/variables';
2+
:export { defaultColor: $color-pf-white; }
3+
14
.remove-button {
2-
color: white;
5+
color: $color-pf-black;
36
margin-left: 5px;
47
}

‎src/tagging/components/tagCategory.jsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { FormGroup, ControlLabel } from 'patternfly-react';
43
import Tag from './tag';
5-
import './tagCategory.scss'
4+
import './tagCategory.scss';
65

76
class TagCategory extends React.Component {
87
generateTag = tagValue =>
98
(<Tag
10-
key={`${tagValue.id}`}
9+
key={tagValue.id}
1110
tagCategory={this.props.tagCategory}
1211
tagValue={tagValue}
1312
onTagDeleteClick={this.props.onTagDeleteClick}
1413
/>);
1514

1615
render() {
1716
return (
18-
<React.Fragment>
19-
<ul className="tag-category list-inline">
20-
{this.props.tagCategory.description}:
21-
{this.props.tagValues.map(this.generateTag)}
22-
</ul>
23-
</React.Fragment>
17+
<ul className="tag-category list-inline">
18+
{this.props.tagCategory.description}:
19+
{this.props.tagValues.map(tagValue => this.generateTag(tagValue))}
20+
</ul>
2421
);
2522
}
2623
}

‎src/tagging/components/tagCategory.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1+
@import '~patternfly/dist/sass/patternfly/variables';
2+
13
ul.tag-category.list-inline {
24
display: inline-block;
3-
background-color: #00659c;
5+
background-color: $color-pf-blue-500;
46
padding: 5px 5px 5px 5px !important;
5-
color: white;
7+
color: $color-pf-white;
68
margin-left: 5px;
79
margin-right: 10px;
810
margin-bottom: 5px;
911
li a span {
10-
color: white;
12+
color: $color-pf-white;
1113
}
1214
}

‎src/tagging/components/tagModifier.jsx‎

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,24 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Row, Col, ControlLabel, FormGroup, Form } from 'patternfly-react';
4-
import TagSelector from './tagSelector';
5-
import ValueSelector from './valueSelector';
3+
import { Row, Col, Form } from 'patternfly-react';
64

7-
const TagModifier = ({
8-
tags, selectedTagCategory, selectedTagValue, onTagCategoryChange, onTagValueChange, header, categoryLabel, valueLabel, multiValue,
9-
}) => {
10-
const tagValues = (tags.find(tag => (tag.id === selectedTagCategory.id)) && tags.find(tag => (tag.id === selectedTagCategory.id)).values) || [];
11-
const tagCategories = tags.map(tag => ({ description: tag.description, id: tag.id, singleValue: tag.singleValue })) || [];
12-
return (
13-
<React.Fragment>
14-
<Row><Col lg={12}><h2>{header}</h2></Col></Row>
15-
<Form horizontal>
16-
<FormGroup>
17-
<Col xs={12} md={4} lg={6}>
18-
<ControlLabel>{categoryLabel}</ControlLabel>
19-
</Col>
20-
<Col xs={12} md={8} lg={6}>
21-
<TagSelector tagCategories={tagCategories} onTagCategoryChange={onTagCategoryChange} selectedOption={selectedTagCategory} />
22-
</Col>
23-
</FormGroup>
24-
<FormGroup>
25-
<Col xs={12} md={4} lg={6}>
26-
<ControlLabel>{valueLabel}</ControlLabel>
27-
</Col>
28-
<Col xs={12} md={8} lg={6}>
29-
<ValueSelector tagValues={tagValues} onTagValueChange={onTagValueChange} selectedOption={selectedTagValue} multiValue={multiValue} />
30-
</Col>
31-
</FormGroup>
32-
</Form>
5+
const TagModifier = ({ header, children }) => (
6+
<React.Fragment>
7+
<Row><Col lg={12}><h2>{header}</h2></Col></Row>
8+
<Form horizontal>
9+
{children}
10+
</Form>
3311

34-
</React.Fragment>
35-
);
36-
};
12+
</React.Fragment>
13+
);
3714

3815
TagModifier.propTypes = {
39-
tags: PropTypes.arrayOf(PropTypes.object),
40-
selectedTagCategory: PropTypes.object.isRequired,
41-
onTagCategoryChange: PropTypes.func.isRequired,
42-
selectedTagValue: PropTypes.object.isRequired,
43-
onTagValueChange: PropTypes.func.isRequired,
4416
header: PropTypes.string,
45-
categoryLabel: PropTypes.string,
46-
valueLabel: PropTypes.string,
47-
multiValue: PropTypes.bool,
17+
children: PropTypes.arrayOf(PropTypes.element).isRequired,
4818
};
4919

5020
TagModifier.defaultProps = {
5121
header: 'Add/Modify tag',
52-
categoryLabel: 'Category:',
53-
valueLabel: 'Assigned Value:',
54-
multiValue: true,
5522
};
5623

5724
export default TagModifier;

‎src/tagging/components/tagSelector.jsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,26 @@ import PropTypes from 'prop-types';
44

55
class TagSelector extends React.Component {
66
handleChange = (selectedOption) => {
7-
this.props.onTagCategoryChange({ id: selectedOption.value,
8-
description: this.props.tagCategories.find( category => (category.id === selectedOption.value)).description });
7+
this.props.onTagCategoryChange({
8+
id: selectedOption.value,
9+
description: this.props.tagCategories.find(category => (category.id === selectedOption.value)).description,
10+
});
911
}
1012

13+
14+
tagCategories = this.props.tagCategories.map(category =>
15+
({ value: category.id, label: (category.description + (category.singleValue ? '*' : '')) }));
16+
1117
render() {
12-
const value = this.props.selectedOption.id;
1318
const label = this.props.selectedOption.description;
14-
const tagCategories = this.props.tagCategories.map(category => ({ value: category.id, label: (category.description + (category.singleValue ? '*' : '') )}));
19+
const value = this.props.selectedOption.id;
1520
return (
1621
<Select
1722
name="form-field-name"
1823
value={value}
1924
label={label}
2025
onChange={this.handleChange}
21-
options={tagCategories}
26+
options={this.tagCategories}
2227
resetValue={{ label: '', value: '' }}
2328
/>
2429
);

0 commit comments

Comments
 (0)