Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Commit 7ce2d03

Browse files
thefringeninjathefringeninja
committed
styling
1 parent 12eed37 commit 7ce2d03

File tree

2 files changed

+115
-94
lines changed

2 files changed

+115
-94
lines changed

‎src/components/StreamBrowser.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@ import React from 'react';
22
import { List, ListItem, Typography, withStyles } from '@material-ui/core';
33
import Hyperlink from './Hyperlink';
44

5-
const StreamBrowser = ({ streams, onNavigate }) => (
6-
<div>
5+
const StreamBrowser = withStyles(theme => ({
6+
popover: {
7+
padding: theme.spacing.unit * 2.5,
8+
},
9+
}))(({ streams, onNavigate, classes }) => (
10+
<div className={classes.popover}>
711
<Typography variant={'title'}>Stream Browser</Typography>
812
{streams.length ? (
913
<List>
1014
{streams.map(({ title, href }) => (
1115
<ListItem button key={href}>
1216
<Hyperlink href={href} onNavigate={onNavigate}>
13-
{title}
17+
<span>{title}</span>
1418
</Hyperlink>
1519
</ListItem>
1620
))}
@@ -21,10 +25,6 @@ const StreamBrowser = ({ streams, onNavigate }) => (
2125
</Typography>
2226
)}
2327
</div>
24-
);
28+
));
2529

26-
export default withStyles(theme => ({
27-
paper: {
28-
padding: theme.spacing.unit * 2.5,
29-
},
30-
}))(StreamBrowser);
30+
export default StreamBrowser;

‎src/stream-store/views/StreamMessage.js‎

Lines changed: 106 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
ExpansionPanel,
77
ExpansionPanelSummary,
88
ExpansionPanelDetails,
9+
withStyles,
910
} from '@material-ui/core';
1011
import Inspector, {
1112
ObjectLabel,
@@ -99,89 +100,109 @@ const getStreamIds = ({ _embedded = {} }) =>
99100
.map(({ _links = {} }) => _links[rels.feed])
100101
.filter(link => link);
101102

102-
class StreamMessageJson extends PureComponent {
103-
state = {
104-
anchorElement: undefined,
105-
streams: [],
106-
};
107-
108-
_handlePotentialStreamIdClick = async (
109-
{ currentTarget: anchorElement },
110-
p,
111-
) => {
112-
const { authorization, links } = this.props;
113-
114-
this.setState({
115-
anchorElement,
116-
});
117-
118-
const template = uriTemplate.parse(decodeURI(links[rels.browse].href));
119-
120-
const responses = await Promise.all(
121-
[...new Set([p, String(p).replace('-', '')])].map(p =>
122-
http.get({
123-
url: template.expand({ p, t: 'e' }),
124-
headers: { authorization },
125-
}),
126-
),
127-
);
128-
129-
this.setState({
130-
streams: Object.values(
131-
responses.flatMap(({ body }) => getStreamIds(body)).reduce(
132-
(akk, { href, title }) => ({
133-
...akk,
134-
[href]: { href, title },
135-
}),
136-
{},
103+
const StreamMessageJson = withStyles({
104+
streamId: {
105+
'&:hover': {
106+
textDecoration: 'underline',
107+
},
108+
},
109+
})(
110+
class StreamMessageJson extends PureComponent {
111+
state = {
112+
anchorElement: undefined,
113+
streams: [],
114+
};
115+
116+
_handlePotentialStreamIdClick = async (
117+
{ currentTarget: anchorElement },
118+
pattern,
119+
) => {
120+
const { authorization, links } = this.props;
121+
122+
this.setState({
123+
anchorElement,
124+
});
125+
126+
if (!links[rels.browse]) {
127+
return;
128+
}
129+
130+
const template = uriTemplate.parse(
131+
decodeURI(links[rels.browse].href),
132+
);
133+
134+
const responses = await Promise.all(
135+
[...new Set([pattern, String(pattern).replace('-', '')])].map(
136+
p =>
137+
http.get({
138+
url: template.expand({ p, t: 'e' }),
139+
headers: { authorization },
140+
}),
137141
),
138-
),
139-
});
140-
};
142+
);
141143

142-
_handlePotentialStreamIdClose = () =>
143-
this.setState({
144-
anchorElement: undefined,
145-
});
146-
147-
_renderNode = ({ depth, name, data, path, isNonEnumerable, ...props }) =>
148-
depth === 0 ? (
149-
<ObjectRootLabel
150-
name={name}
151-
data={{}}
152-
path={path}
153-
isNonEnumerable={isNonEnumerable}
154-
{...props}
155-
/>
156-
) : isPotentialStreamId(data) ? (
157-
<span>
158-
<ObjectName name={name} dimmed={isNonEnumerable} />
159-
<span>: </span>
160-
<span
161-
onClick={e => this._handlePotentialStreamIdClick(e, data)}
162-
>
163-
{data}
144+
this.setState({
145+
streams: Object.values(
146+
responses.flatMap(({ body }) => getStreamIds(body)).reduce(
147+
(akk, { href, title }) => ({
148+
...akk,
149+
[href]: { href, title },
150+
}),
151+
{},
152+
),
153+
),
154+
});
155+
};
156+
157+
_handlePotentialStreamIdClose = () =>
158+
this.setState({
159+
anchorElement: undefined,
160+
});
161+
162+
_renderNode = ({
163+
depth,
164+
name,
165+
data,
166+
path,
167+
isNonEnumerable,
168+
...props
169+
}) =>
170+
depth === 0 ? (
171+
<ObjectRootLabel
172+
name={name}
173+
data={{}}
174+
path={path}
175+
isNonEnumerable={isNonEnumerable}
176+
{...props}
177+
/>
178+
) : isPotentialStreamId(data) ? (
179+
<span>
180+
<ObjectName name={name} dimmed={isNonEnumerable} />
181+
<span>: </span>
182+
<span
183+
className={this.props.classes.streamId}
184+
onClick={e =>
185+
this._handlePotentialStreamIdClick(e, data)
186+
}
187+
>
188+
{data}
189+
</span>
164190
</span>
165-
</span>
166-
) : (
167-
<ObjectLabel
168-
name={name}
169-
data={props.children ? {} : data}
170-
path={path}
171-
isNonEnumerable={isNonEnumerable}
172-
{...props}
173-
/>
174-
);
175-
176-
render() {
177-
const { json, title, onNavigate } = this.props;
178-
const { anchorElement, streams } = this.state;
179-
return (
180-
<ExpansionPanel expanded>
181-
<ExpansionPanelSummary expandIcon={<Code />}>
182-
<Typography variant={'h6'}>{title}</Typography>
183-
</ExpansionPanelSummary>
184-
<ExpansionPanelDetails>
191+
) : (
192+
<ObjectLabel
193+
name={name}
194+
data={props.children ? {} : data}
195+
path={path}
196+
isNonEnumerable={isNonEnumerable}
197+
{...props}
198+
/>
199+
);
200+
201+
render() {
202+
const { json, onNavigate } = this.props;
203+
const { anchorElement, streams } = this.state;
204+
return (
205+
<div>
185206
<Inspector
186207
data={json}
187208
expandLevel={32}
@@ -205,11 +226,11 @@ class StreamMessageJson extends PureComponent {
205226
onNavigate={onNavigate}
206227
/>
207228
</Popover>
208-
</ExpansionPanelDetails>
209-
</ExpansionPanel>
210-
);
211-
}
212-
}
229+
</div>
230+
);
231+
}
232+
},
233+
);
213234

214235
const StreamMessageData = ({ payload, ...props }) => (
215236
<StreamMessageJson title={'Data'} json={payload} {...props} />

0 commit comments

Comments
 (0)