Skip to content

Commit 093f2d1

Browse files
culturedbarbarianculturedbarbarian
authored
Merge pull request #86 from kylekim-oicr/master
Cascading Pane Navigation Title update
2 parents ed01cb4 + 32a9626 commit 093f2d1

2 files changed

Lines changed: 46 additions & 79 deletions

File tree

‎lib/CascadingPane/CascadingPaneNav.js‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ var CascadingPaneNav = function (_React$Component) {
151151
getCascadingNav = _props3.getCascadingNav,
152152
logoField = _props3.logoField,
153153
titleField = _props3.titleField,
154+
itemIdField = _props3.itemIdField,
154155
isHiddenField = _props3.isHiddenField;
155156
var _state = this.state,
156157
fetched = _state.fetched,
@@ -163,30 +164,23 @@ var CascadingPaneNav = function (_React$Component) {
163164
name: 'Logo',
164165
className: 'nav-group-logo',
165166
display: function display(item) {
166-
return _react2.default.createElement('img', {
167-
role: 'presentation',
168-
src: item[logoField],
169-
className: 'cascading-nav-logo'
170-
});
167+
return _react2.default.createElement('img', { role: 'presentation', src: item[logoField], className: 'cascading-nav-logo' });
171168
}
172169
});
173170
}
174171
navFormat.push({
175172
name: 'Title',
176173
className: 'nav-group-title',
177174
display: function display(item) {
178-
return item[titleField];
175+
return item[titleField] || item[itemIdField];
179176
}
180177
});
181178
if (isHiddenField) {
182179
navFormat.push({
183180
name: 'Visibility',
184181
className: 'nav-group-visibility',
185182
display: function display(item) {
186-
return item[isHiddenField] ? _react2.default.createElement(_reactBootstrap.Glyphicon, {
187-
glyph: 'eye-close',
188-
title: 'Only visible to CUD administrators'
189-
}) : '';
183+
return item[isHiddenField] ? _react2.default.createElement(_reactBootstrap.Glyphicon, { glyph: 'eye-close', title: 'Only visible to CUD administrators' }) : '';
190184
}
191185
});
192186
}
@@ -205,10 +199,7 @@ var CascadingPaneNav = function (_React$Component) {
205199

206200
return _react2.default.createElement(
207201
'div',
208-
{
209-
className: (0, _classnames2.default)(className, 'cascading-pane-nav'),
210-
key: key
211-
},
202+
{ className: (0, _classnames2.default)(className, 'cascading-pane-nav'), key: key },
212203
headerDisplay,
213204
_react2.default.createElement(
214205
_LoadingComponent2.default,

‎src/CascadingPane/CascadingPaneNav.jsx‎

Lines changed: 41 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@ class CascadingPaneNav extends React.Component {
1515
selected: props.cascNav || '',
1616
fetched: props.fetchedNav,
1717
dataWithClass: props.data
18-
? props.data.map(item => {
18+
? props.data.map((item) => {
1919
const newItem = JSON.parse(JSON.stringify(item));
20-
newItem.className = `nav-item-${item[
20+
newItem.className = `nav-item-${item[props.itemIdField]} ${item[
2121
props.itemIdField
22-
]} ${item[props.itemIdField] === props.cascNav
22+
] === props.cascNav
2323
? 'active'
2424
: ''}`;
2525
return newItem;
2626
})
27-
: []
27+
: [],
2828
};
2929

3030
this.onHandleClick = this.onHandleClick.bind(this);
@@ -34,65 +34,62 @@ class CascadingPaneNav extends React.Component {
3434
const { fetchedNav, cascNav, data } = this.props;
3535
if (fetchedNav !== nextProps.fetchedNav) {
3636
this.setState({
37-
fetched: nextProps.fetchedNav
37+
fetched: nextProps.fetchedNav,
3838
});
3939
}
4040
if (cascNav) {
4141
if (!nextProps.cascNav) {
42-
window.location.href = `${window.location.href.split(
43-
'?'
44-
)[0]}?cascNav=${nextProps.data[0][nextProps.itemIdField]}`;
42+
window.location.href = `${window.location.href.split('?')[0]}?cascNav=${nextProps
43+
.data[0][nextProps.itemIdField]}`;
4544
}
4645
if (cascNav !== nextProps.cascNav) {
4746
this.setState({
4847
selected: nextProps.cascNav || '',
4948
dataWithClass: nextProps.data
50-
? nextProps.data.map(item => {
49+
? nextProps.data.map((item) => {
5150
const newItem = JSON.parse(JSON.stringify(item));
52-
newItem.className = `nav-item-${item[
51+
newItem.className = `nav-item-${item[nextProps.itemIdField]} ${item[
5352
nextProps.itemIdField
54-
]} ${item[nextProps.itemIdField] ===
55-
nextProps.cascNav
53+
] === nextProps.cascNav
5654
? 'active'
5755
: ''}`;
5856
return newItem;
5957
})
60-
: []
58+
: [],
6159
});
6260
}
6361
} else if (nextProps.cascNav) {
6462
this.setState({
6563
selected: nextProps.cascNav,
6664
dataWithClass: nextProps.data
67-
? nextProps.data.map(item => {
65+
? nextProps.data.map((item) => {
6866
const newItem = JSON.parse(JSON.stringify(item));
69-
newItem.className = `nav-item-${item[
67+
newItem.className = `nav-item-${item[nextProps.itemIdField]} ${item[
7068
nextProps.itemIdField
71-
]} ${item[nextProps.itemIdField] === nextProps.cascNav
69+
] === nextProps.cascNav
7270
? 'active'
7371
: ''}`;
7472
return newItem;
7573
})
76-
: []
74+
: [],
7775
});
7876
} else if (nextProps.data && nextProps.data.length > 0) {
79-
window.location.href = `${window.location.href.split(
80-
'?'
81-
)[0]}?cascNav=${nextProps.data[0][nextProps.itemIdField]}`;
77+
window.location.href = `${window.location.href.split('?')[0]}?cascNav=${nextProps
78+
.data[0][nextProps.itemIdField]}`;
8279
}
8380
if (JSON.stringify(data) !== JSON.stringify(nextProps.data)) {
8481
this.setState({
8582
dataWithClass: nextProps.data
86-
? nextProps.data.map(item => {
83+
? nextProps.data.map((item) => {
8784
const newItem = JSON.parse(JSON.stringify(item));
88-
newItem.className = `nav-item-${item[
85+
newItem.className = `nav-item-${item[nextProps.itemIdField]} ${item[
8986
nextProps.itemIdField
90-
]} ${item[nextProps.itemIdField] === nextProps.cascNav
87+
] === nextProps.cascNav
9188
? 'active'
9289
: ''}`;
9390
return newItem;
9491
})
95-
: []
92+
: [],
9693
});
9794
}
9895
}
@@ -105,9 +102,7 @@ class CascadingPaneNav extends React.Component {
105102
selected !== prevState.selected ||
106103
JSON.stringify(data) !== JSON.stringify(prevProps.data)
107104
) {
108-
const groupSelected = data.filter(
109-
item => item[itemIdField] === selected
110-
);
105+
const groupSelected = data.filter(item => item[itemIdField] === selected);
111106
updateGroupSelect(groupSelected[0]);
112107
}
113108
}
@@ -117,9 +112,9 @@ class CascadingPaneNav extends React.Component {
117112
const { selected } = this.state;
118113

119114
if (selected !== item[itemIdField]) {
120-
window.location.href = `${window.location.href.split(
121-
'?'
122-
)[0]}?cascNav=${item[itemIdField]}`;
115+
window.location.href = `${window.location.href.split('?')[0]}?cascNav=${item[
116+
itemIdField
117+
]}`;
123118
}
124119
}
125120

@@ -135,7 +130,8 @@ class CascadingPaneNav extends React.Component {
135130
getCascadingNav,
136131
logoField,
137132
titleField,
138-
isHiddenField
133+
itemIdField,
134+
isHiddenField,
139135
} = this.props;
140136
const { fetched, dataWithClass } = this.state;
141137

@@ -145,32 +141,25 @@ class CascadingPaneNav extends React.Component {
145141
name: 'Logo',
146142
className: 'nav-group-logo',
147143
display: item => (
148-
<img
149-
role="presentation"
150-
src={item[logoField]}
151-
className="cascading-nav-logo"
152-
/>
153-
)
144+
<img role="presentation" src={item[logoField]} className="cascading-nav-logo" />
145+
),
154146
});
155147
}
156148
navFormat.push({
157149
name: 'Title',
158150
className: 'nav-group-title',
159-
display: item => item[titleField]
151+
display: item => item[titleField] || item[itemIdField],
160152
});
161153
if (isHiddenField) {
162154
navFormat.push({
163155
name: 'Visibility',
164156
className: 'nav-group-visibility',
165157
display: item =>
166158
item[isHiddenField] ? (
167-
<Glyphicon
168-
glyph="eye-close"
169-
title="Only visible to CUD administrators"
170-
/>
159+
<Glyphicon glyph="eye-close" title="Only visible to CUD administrators" />
171160
) : (
172161
''
173-
)
162+
),
174163
});
175164
}
176165
if (itemConfigDisplay) {
@@ -180,39 +169,26 @@ class CascadingPaneNav extends React.Component {
180169
display: item =>
181170
React.cloneElement(
182171
itemConfigDisplay,
183-
Object.assign(
184-
{},
185-
{ item },
186-
{ updateNav: () => getCascadingNav() }
187-
)
172+
Object.assign({}, { item }, { updateNav: () => getCascadingNav() }),
188173
),
189-
excludeRowClick: true
174+
excludeRowClick: true,
190175
});
191176
}
192177

193178
return (
194-
<div
195-
className={classNames(className, 'cascading-pane-nav')}
196-
key={key}
197-
>
179+
<div className={classNames(className, 'cascading-pane-nav')} key={key}>
198180
{headerDisplay}
199181
<LoadingComponent {...navFetch}>
200182
<div className="cascading-pane-nav-list">
201-
{fetched &&
202-
!data && (
203-
<Alert bsStyle="danger">
204-
No data available
205-
</Alert>
206-
)}
183+
{fetched && !data && <Alert bsStyle="danger">No data available</Alert>}
207184
{fetched &&
208185
data && (
209186
<FilteredTable
210187
className="table table-striped table-bordered table-condensed table-cascading-nav"
211188
data={dataWithClass}
212189
itemFormat={navFormat}
213190
rowClickable
214-
onRowClick={item =>
215-
this.onHandleClick(item)}
191+
onRowClick={item => this.onHandleClick(item)}
216192
/>
217193
)}
218194
</div>
@@ -230,7 +206,7 @@ CascadingPaneNav.propTypes = {
230206
getCascadingNav: PropTypes.func,
231207
navFetch: PropTypes.shape({
232208
status: PropTypes.string,
233-
isFetching: PropTypes.bool
209+
isFetching: PropTypes.bool,
234210
}),
235211
fetchedNav: PropTypes.bool,
236212
cascNav: PropTypes.string,
@@ -244,7 +220,7 @@ CascadingPaneNav.propTypes = {
244220

245221
headerDisplay: PropTypes.element,
246222
footerDisplay: PropTypes.element,
247-
itemConfigDisplay: PropTypes.element
223+
itemConfigDisplay: PropTypes.element,
248224
};
249225

250226
CascadingPaneNav.defaultProps = {
@@ -254,7 +230,7 @@ CascadingPaneNav.defaultProps = {
254230
getCascadingNav: f => f,
255231
navFetch: {
256232
status: '',
257-
isFetching: false
233+
isFetching: false,
258234
},
259235
fetchedNav: false,
260236
cascNav: '',
@@ -264,7 +240,7 @@ CascadingPaneNav.defaultProps = {
264240
itemIdField: 'id',
265241
logoField: '',
266242
titleField: 'title',
267-
isHiddenField: ''
243+
isHiddenField: '',
268244
};
269245

270246
export default CascadingPaneNav;

0 commit comments

Comments
 (0)