Skip to content

Commit 39668ef

Browse files
usulprousulpro
committed
Divide storage by ids
1 parent b664ca5 commit 39668ef

File tree

5 files changed

+101
-63
lines changed

5 files changed

+101
-63
lines changed

‎dev/register.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { register } from '../src/register';
3-
import './config'
3+
import './config';
44

55
const blockStyle = {
66
margin: 2,
@@ -20,15 +20,18 @@ const AddonPanel = ({
2020
}) => {
2121
return (
2222
<Layout style={{ padding: 0 }}>
23-
<Block style={{ ...blockStyle, minWidth: 200 }}>kind: {kind}</Block>
24-
<Block style={blockStyle}><small>{JSON.stringify(api.getCurrentStoryData())}</small></Block>
25-
<Block style={blockStyle} size={200}>
26-
channel store data: <br/> ({JSON.stringify(data)})
27-
</Block>
28-
<Block style={blockStyle}>
23+
<Block style={{ ...blockStyle, minWidth: 50 }} size={200}>
24+
kind: {kind}
25+
<br />
2926
<button onClick={() => setData({ panel: 'bar' })}>setData</button>
3027
</Block>
31-
<Block style={blockStyle}>data ({JSON.stringify(rect, null, 2)})</Block>
28+
{/* <Block style={blockStyle}>
29+
<small>{JSON.stringify(api.getCurrentStoryData())}</small>
30+
</Block> */}
31+
<Block style={blockStyle} >
32+
channel store data: <br /> ({JSON.stringify(data)})
33+
</Block>
34+
{/* <Block style={blockStyle}>data ({JSON.stringify(rect, null, 2)})</Block> */}
3235
</Layout>
3336
);
3437
};

‎dev/withAdk.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@ const DecoratorUI = ({ context, getStory, data, parameters }) => (
1717
</div>
1818
);
1919

20-
export const withAdk = createDecorator(DecoratorUI);
20+
export const withAdk = createDecorator(DecoratorUI, {isGlobal: true});
2121
export const adkParams = setParameters()

‎src/ChannelStore.js‎

Lines changed: 74 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import addons from '@storybook/addons';
22

3+
const GLOBAL = 'global';
4+
35
export default class ChannelStore {
46
constructor({
57
EVENT_ID_INIT,
@@ -9,24 +11,28 @@ export default class ChannelStore {
911
name = 'store',
1012
initData = {},
1113
isPanel = false,
14+
storyId,
1215
}) {
1316
this.EVENT_ID_INIT = EVENT_ID_INIT;
1417
this.EVENT_ID_DATA = EVENT_ID_DATA;
1518
this.EVENT_ID_BACK = EVENT_ID_BACK;
1619
this.name = name;
1720
this.initData = initData;
1821
this.isPanel = isPanel;
22+
this.id = storyId;
1923

20-
21-
22-
console.log(`New Store Created for ${isPanel ? 'Panel' : 'Preview'}`,
23-
EVENT_ID_INIT,
24-
EVENT_ID_DATA,
25-
EVENT_ID_BACK,
24+
console.log(
25+
`New Store Created for ${isPanel ? 'Panel' : 'Preview'}`,
26+
EVENT_ID_INIT,
27+
EVENT_ID_DATA,
28+
EVENT_ID_BACK
2629
);
2730
}
2831

29-
store = this.initData;
32+
store = {
33+
[GLOBAL]: { init: this.initData || {}, over: {} },
34+
};
35+
selectorId = null;
3036

3137
subscriber = () => {};
3238
onConnectedFn = () => {};
@@ -44,12 +50,12 @@ export default class ChannelStore {
4450
};
4551

4652
emit = data =>
47-
this.channel.emit(
48-
this.isPanel ? this.EVENT_ID_BACK : this.EVENT_ID_DATA,
49-
data
50-
);
53+
this.channel.emit(this.isPanel ? this.EVENT_ID_BACK : this.EVENT_ID_DATA, {
54+
data,
55+
id: this.id,
56+
});
5157

52-
init = data => this.channel.emit(this.EVENT_ID_INIT, data);
58+
init = data => this.channel.emit(this.EVENT_ID_INIT, { data, id: this.id });
5359

5460
removeInit = () =>
5561
this.channel.removeListener(this.EVENT_ID_INIT, this.onInitChannel);
@@ -61,41 +67,78 @@ export default class ChannelStore {
6167
);
6268

6369
onInitChannel = initData => {
64-
console.log(
65-
`Channel Store (${
66-
this.isPanel ? 'Panel' : 'Decorator'
67-
}) Received Init Data`,
68-
initData
69-
);
70-
this.store = initData;
71-
this.subscriber(this.store);
70+
const { data, id } = initData;
71+
const selectorId = id || GLOBAL;
72+
const selectedData = this.store[selectorId];
73+
selectedData.init = data;
74+
selectedData.over = selectedData.over || {};
75+
this.selectorId = selectorId;
76+
this.subscriber();
7277
};
7378

7479
onDataChannel = updData => {
75-
this.store = {
76-
...this.store,
77-
...updData,
80+
const { data, id } = updData;
81+
if (this.isPanel) {
82+
const selectorId = id || GLOBAL;
83+
const selectedData = this.store[selectorId];
84+
selectedData.over = data;
85+
this.selectorId = selectorId;
86+
} else {
87+
this.store = updData;
88+
}
89+
90+
this.subscriber();
91+
};
92+
93+
selectData = () => {
94+
const id = this.isPanel ? this.selectorId : this.id;
95+
96+
const { global } = this.store;
97+
const local = this.store[id];
98+
99+
const finalData = {
100+
...global.init,
101+
...local.init,
102+
...global.over,
103+
...local.over,
78104
};
79-
this.subscriber(this.store);
105+
106+
return finalData;
80107
};
81108

82109
onData = subscriberFn => {
83-
this.subscriber = subscriberFn;
110+
this.subscriber = () => {
111+
const data = this.selectData();
112+
subscriberFn(data);
113+
};
84114
};
85115

86116
onConnected = onConnectedFn => {
87117
this.onConnectedFn = onConnectedFn;
88118
};
89119

90-
send = data => {
91-
this.store = {
92-
...this.store,
93-
...data,
94-
};
120+
send = () => {
95121
this.emit(this.store);
96-
this.subscriber(this.store);
97122
};
98123

124+
defaultReducer = (store, payload) => ({
125+
...store,
126+
...payload,
127+
});
128+
129+
_createAction = (reducer = this.defaultReducer, subId) => {
130+
return payload => {
131+
const subData = this.store[subId];
132+
subData.over = reducer(global.over, payload);
133+
this.send();
134+
this.subscriber();
135+
};
136+
};
137+
138+
createGlobalAction = reducer => this._createAction(reducer, GLOBAL);
139+
createLocalAction = reducer =>
140+
this._createAction(reducer, this.selectedId || this.id);
141+
99142
sendInit = data => {
100143
this.init(data);
101144
};

‎src/decorator.js‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
11
import React from 'react';
22
import withChannel from './withChannel';
33

4-
import {
5-
getConfig,
6-
} from './config';
4+
import { getConfig } from './config';
75

8-
export const createDecorator = Component => initData => (getStory, context) => {
6+
export const createDecorator = (Component, { isGlobal } = {}) => initData => (getStory, context) => {
97
const {
108
ADDON_ID,
119
EVENT_ID_INIT,
1210
EVENT_ID_DATA,
1311
EVENT_ID_BACK,
1412
PARAM_Key,
1513
} = getConfig();
14+
15+
const parameters = context.parameters && context.parameters[PARAM_Key];
16+
const storyId = isGlobal ? null : context.id;
17+
1618
const WithChannel = withChannel({
1719
EVENT_ID_INIT,
1820
EVENT_ID_DATA,
1921
EVENT_ID_BACK,
2022
ADDON_ID,
2123
initData,
2224
panel: false,
25+
parameters,
26+
storyId,
2327
})(Component);
2428

25-
const parameters = context.parameters[PARAM_Key];
26-
27-
return (
28-
<WithChannel
29-
getStory={getStory}
30-
context={context}
31-
parameters={parameters}
32-
/>
33-
);
29+
return <WithChannel getStory={getStory} context={context} />;
3430
};
3531

3632
export const setParameters = () => {

‎src/withChannel.js‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,15 @@ import ChannelStore from './ChannelStore';
55
const getDisplayName = WrappedComponent =>
66
WrappedComponent.displayName || WrappedComponent.name || 'Component';
77

8-
/* It return nothing on init */
9-
const getInitDataFromParameters = (api, addonId) => {
10-
if (!api) return null
11-
const storyData = api.getCurrentStoryData()
12-
console.log("TCL: getInitDataFromParameters -> storyData", storyData)
13-
return api.getParameters();
14-
};
15-
168
const withChannel = ({
179
EVENT_ID_INIT,
1810
EVENT_ID_DATA,
1911
EVENT_ID_BACK,
2012
ADDON_ID,
2113
initData,
2214
panel,
15+
parameters,
16+
storyId,
2317
}) => WrappedComponent =>
2418
class extends React.Component {
2519
static displayName = `WithChannel(${getDisplayName(WrappedComponent)})`;
@@ -28,18 +22,19 @@ const withChannel = ({
2822
data: {
2923
...initData,
3024
...this.props.initData,
31-
...getInitDataFromParameters(this.props.api, ADDON_ID),
25+
...parameters,
3226
},
3327
};
3428

35-
isPanel = this.props.panel || panel
29+
isPanel = this.props.panel || panel;
3630
store = new ChannelStore({
3731
EVENT_ID_INIT,
3832
EVENT_ID_DATA,
3933
EVENT_ID_BACK,
4034
name: this.props.pointName,
4135
initData: this.state.data,
4236
isPanel: this.isPanel,
37+
storyId,
4338
});
4439

4540
componentDidMount() {
@@ -85,6 +80,7 @@ const withChannel = ({
8580
setData={this.store.send}
8681
store={this.store}
8782
active={active}
83+
parameters={parameters}
8884
{...props}
8985
/>
9086
);

0 commit comments

Comments
 (0)