Skip to content

Commit 97c6c2a

Browse files
author
Maciej Warszawski
committed
hide editor window when unpinned
1 parent f8932ea commit 97c6c2a

File tree

10 files changed

+92
-50
lines changed

10 files changed

+92
-50
lines changed

‎integration/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ addLocaleData(pl[0]);
2121
setLogLevel(LogLevel.debug);
2222

2323
const options: Editor.RequiredProps = {
24-
apiKey: '2d70c966-362a-4607-ad92-2818adb044b6',
24+
apiKey: '84574b87-00ad-4c93-b493-9b6906c71c45',
2525
language: 'en',
26-
projectId: '06192059-3c48-4603-88ca-c0096e694e8b',
26+
projectId: '049d7805-abf8-428a-82e0-0b4758bf3cce',
2727
referenceLanguage: 'en',
2828
};
2929
const resourceServer = new LocizeClient(window, options);
3030

3131
const languagesPromise = resourceServer.getLanguages();
32-
const x = ResourceProvider;
32+
3333
const resourceProvider = new ResourceProvider(resourceServer);
3434

3535
const getMessagesFromNamespaceFactory: IntlBackendProvider.GetMessagesFromNamespaceFactory = getIntlProps => (
@@ -63,8 +63,8 @@ class App extends React.Component<App.Props, App.State> {
6363
<div>
6464
<IntlBackendProvider
6565
locale={this.state.language}
66-
defaultLocale={this.state.language}
67-
key={`${this.state.language} - ${this.state.showIds}`}
66+
defaultLocale={options.referenceLanguage}
67+
key={`${this.state.language},${this.state.showIds}`}
6868
includeMetadata={true}
6969
showIds={this.state.showIds}
7070
getMessagesFromNamespaceFactory={getMessagesFromNamespaceFactory}
@@ -79,7 +79,7 @@ class App extends React.Component<App.Props, App.State> {
7979
this.setState({ ...this.state, showIds: show });
8080
}}
8181
language={this.state.language}
82-
getLanguages={() => this.state.languages}
82+
languages={this.state.languages}
8383
onChangeLanguage={language => {
8484
this.setState({ language });
8585
resourceProvider.changeLanguage(language);

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"react": "^16.2.0",
5454
"react-dom": "^16.2.0",
5555
"react-intl": "^2.4.0",
56-
"rollup": "^0.56.1",
56+
"rollup": "^0.56.2",
5757
"rollup-plugin-babel": "^3.0.3",
5858
"rollup-plugin-postcss": "^1.2.8",
5959
"rollup-plugin-typescript": "^0.8.1",

‎packages/react-intl-namespaces-locize-editor/src/Components/Editor.test.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('Editor', () => {
114114
EditorPanel.State
115115
> = wrapper.find(EditorPanel);
116116

117-
const onRefresh = editorPanel.props().onShowIds();
117+
editorPanel.props().onShowIds();
118118
});
119119
it('should show ids when show ids button is clicked', () => {
120120
const onShowIds = jest.fn();
@@ -135,6 +135,24 @@ describe('Editor', () => {
135135

136136
expect(onShowIds).toMatchSnapshot();
137137
});
138+
it('should do unpin when pin button is clicked', () => {
139+
const wrapper = mount(<Editor {...options} enabled={true} />);
140+
const panel: React.ComponentClass<EditorPanel.Props> = EditorPanel;
141+
const editorPanel: ReactWrapper<
142+
EditorPanel.Props,
143+
EditorPanel.State
144+
> = wrapper.find(EditorPanel);
145+
146+
const editorComponent: ReactWrapper<{}, Editor.State> = wrapper.find(
147+
EditorComponent,
148+
);
149+
150+
expect(editorComponent.instance().state.pinned).toBe(true);
151+
152+
editorPanel.props().onTogglePinned();
153+
154+
expect(editorComponent.instance().state.pinned).toBe(false);
155+
});
138156
it('should do nothing by default when new language is selected', () => {
139157
const wrapper = mount(<Editor {...options} enabled={true} />);
140158
const panel: React.ComponentClass<EditorPanel.Props> = EditorPanel;
@@ -256,7 +274,7 @@ describe('Editor', () => {
256274
EditorPanel.State
257275
> = wrapper.find(EditorPanel);
258276

259-
editorPanel.props().onSearchEnabled();
277+
editorPanel.props().onToggleSearch();
260278

261279
const spanWithResourceText = wrapper
262280
.find(FormattedMessage)

‎packages/react-intl-namespaces-locize-editor/src/Components/Editor.tsx

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export class EditorComponent extends React.Component<
3131
constructor(props: Editor.RequiredProps & Editor.OptionalProps, context: {}) {
3232
super(props, context);
3333
this.state = {
34+
pinned: true,
3435
searchEnabled: true,
3536
showEditor: this.props.enabled,
3637
showIds: false,
@@ -44,12 +45,12 @@ export class EditorComponent extends React.Component<
4445

4546
this.keypress = (ev: KeyboardEvent) => {
4647
if (ev[toggleKeyModifier] && ev.key === toggleKey) {
47-
this.onSearchEnabled();
48+
this.onToggleSearch();
4849
}
4950
};
5051
this.message = (ev: MessageEvent) => {
5152
if (ev.data[toggleKeyModifier] && ev.data.key === toggleKey) {
52-
this.onSearchEnabled();
53+
this.onToggleSearch();
5354
}
5455
};
5556

@@ -78,25 +79,30 @@ export class EditorComponent extends React.Component<
7879
showIds={showIds}
7980
searchEnabled={searchEnabled}
8081
onRefresh={() => this.onRefresh()}
81-
onSearchEnabled={() => this.onSearchEnabled()}
82+
onToggleSearch={() => this.onToggleSearch()}
8283
onShowIds={() => this.onShowIds()}
8384
language={this.props.language}
8485
onChangeLanguage={this.props.onChangeLanguage}
85-
getLanguages={this.props.getLanguages}
86+
languages={this.props.languages}
87+
pinned={this.state.pinned}
88+
onTogglePinned={() => this.onTogglePinned()}
8689
/>
8790
<EditorWindow
8891
mode={this.props.mode}
8992
editorWidthInPixels={this.props.editorWidthInPixels}
9093
windowOpenTimeout={3000}
9194
window={window}
9295
url={this.props.url}
96+
pinned={this.state.pinned}
9397
onOpen={callback => this.open(callback)}
9498
/>
9599
</div>,
96100
this.editor,
97101
);
98102
}
99-
103+
private onTogglePinned() {
104+
this.setState({ pinned: !this.state.pinned });
105+
}
100106
private onShowIds() {
101107
const { showIds: oldShowIds, ...rest } = this.state;
102108
const showIds = !oldShowIds;
@@ -149,7 +155,7 @@ export class EditorComponent extends React.Component<
149155
};
150156
}
151157

152-
private onSearchEnabled() {
158+
private onToggleSearch() {
153159
const { searchEnabled } = this.state;
154160
this.setState({ searchEnabled: !searchEnabled });
155161
}
@@ -163,13 +169,14 @@ export namespace Editor {
163169
searchEnabled: boolean;
164170
showIds: boolean;
165171
showEditor: boolean;
172+
pinned: boolean;
166173
}
167174
export const defaultProps: Editor.OptionalProps = {
168175
document,
169176
editorId: 'locize-editor',
170177
editorWidthInPixels: 700,
171178
enabled: false,
172-
getLanguages: () => [],
179+
languages: [],
173180
mode: 'iframe',
174181
onChangeLanguage: language => void 0,
175182
onRefresh: () => void 0,
@@ -194,7 +201,7 @@ export namespace Editor {
194201
version: string;
195202
onShowIds: (show: boolean) => void;
196203
onChangeLanguage: (language: string) => void;
197-
getLanguages: () => string[];
204+
languages: string[];
198205
onRefresh: () => void;
199206
}
200207

‎packages/react-intl-namespaces-locize-editor/src/Components/EditorPanel.test.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import * as React from 'react';
33
import { Editor } from './Editor';
44
import { EditorPanel } from './EditorPanel';
55

6+
function delay(timeout: number = 0) {
7+
return new Promise<void>(resolve => {
8+
window.setTimeout(resolve, timeout);
9+
});
10+
}
611
const options: Editor.RequiredProps = {
712
apiKey: '6b9ac145-b395-47dc-bcc4-001398c4c843',
813
language: 'en',
@@ -11,18 +16,20 @@ const options: Editor.RequiredProps = {
1116
};
1217
describe('EditorPanel', () => {
1318
const PropsMock = jest.fn<EditorPanel.Props>(() => ({
14-
getLanguages: jest.fn().mockReturnValue(['en', 'pl']),
19+
languages: ['en', 'pl'],
1520
onChangeLanguage: jest.fn(),
1621
onRefresh: jest.fn(),
17-
onSearchEnabled: jest.fn(),
1822
onShowIds: jest.fn(),
23+
onTogglePinned: jest.fn(),
24+
onToggleSearch: jest.fn(),
1925
}));
2026

21-
it('should show panel and handle events', () => {
27+
it('should show panel and handle events', async () => {
2228
const mock = new PropsMock();
2329

2430
const wrapper = mount(
2531
<EditorPanel
32+
pinned={true}
2633
showIds={true}
2734
searchEnabled={true}
2835
language="en"
@@ -34,15 +41,14 @@ describe('EditorPanel', () => {
3441
wrapper.find('button').forEach(b => b.simulate('click'));
3542
wrapper.find('select').forEach(b => b.simulate('change'));
3643

37-
expect(wrapper.html()).toMatchSnapshot();
38-
3944
expect(mock).toMatchSnapshot();
4045
});
4146
it('should not show editor', () => {
4247
const mock = new PropsMock();
4348

4449
const wrapper = mount(
4550
<EditorPanel
51+
pinned={false}
4652
showIds={true}
4753
searchEnabled={false}
4854
language="en"

‎packages/react-intl-namespaces-locize-editor/src/Components/EditorPanel.tsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ export class EditorPanel extends React.Component<
99
> {
1010
constructor(props: EditorPanel.Props, state: EditorPanel.State) {
1111
super(props, state);
12-
this.state = { pinned: true };
1312
}
1413

1514
public render() {
16-
const languages = this.props.getLanguages();
15+
const languages = this.props.languages;
1716
return (
1817
<div
1918
className={classNames(styles.panel, {
20-
[styles.pinned]: this.state.pinned,
19+
[styles.pinned]: this.props.pinned,
2120
})}
2221
>
2322
{
@@ -37,7 +36,7 @@ export class EditorPanel extends React.Component<
3736
</select>
3837
)}{' '}
3938
<button
40-
onClick={() => this.props.onSearchEnabled()}
39+
onClick={() => this.props.onToggleSearch()}
4140
className={classNames(styles.button, {
4241
[styles.buttonOn]: this.props.searchEnabled,
4342
[styles.buttonOff]: !this.props.searchEnabled,
@@ -65,12 +64,12 @@ export class EditorPanel extends React.Component<
6564

6665
<button
6766
className={classNames(styles.button, styles.pin, {
68-
[styles.pinned]: this.state.pinned,
69-
[styles.buttonOn]: this.state.pinned,
70-
[styles.unpinned]: !this.state.pinned,
71-
[styles.buttonOff]: !this.state.pinned,
67+
[styles.pinned]: this.props.pinned,
68+
[styles.buttonOn]: this.props.pinned,
69+
[styles.unpinned]: !this.props.pinned,
70+
[styles.buttonOff]: !this.props.pinned,
7271
})}
73-
onClick={() => this.setState({ pinned: !this.state.pinned })}
72+
onClick={() => this.props.onTogglePinned()}
7473
>
7574
{' '}
7675
</button>
@@ -79,17 +78,17 @@ export class EditorPanel extends React.Component<
7978
}
8079
}
8180
export namespace EditorPanel {
82-
export interface State {
83-
pinned: boolean;
84-
}
81+
export interface State {}
8582
export interface Props {
8683
searchEnabled: boolean;
8784
showIds: boolean;
85+
onTogglePinned: () => void;
86+
pinned: boolean;
8887
onRefresh: () => void;
89-
onSearchEnabled: () => void;
88+
onToggleSearch: () => void;
9089
onShowIds: () => void;
9190
language: string;
9291
onChangeLanguage: (language: string) => void;
93-
getLanguages: () => string[];
92+
languages: string[];
9493
}
9594
}

‎packages/react-intl-namespaces-locize-editor/src/Components/EditorWindow.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
right: 0;
66
top: 0;
77
z-index: 2000;
8+
display: none;
9+
}
10+
.containerVisible {
11+
display: block;
812
}
913

1014
.iframe {

‎packages/react-intl-namespaces-locize-editor/src/Components/EditorWindow.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom';
33

44
import { DOMHelpers } from '../DOMHelpers';
55

6+
import classNames from 'classnames';
67
import styles from './EditorWindow.css';
78

89
class IframeWindow extends React.Component<EditorWindow.Props> {
@@ -11,7 +12,12 @@ class IframeWindow extends React.Component<EditorWindow.Props> {
1112
this.props.editorWidthInPixels,
1213
);
1314
return (
14-
<div className={styles.container} style={container}>
15+
<div
16+
className={classNames(styles.container, {
17+
[styles.containerVisible]: this.props.pinned,
18+
})}
19+
style={container}
20+
>
1521
<iframe
1622
className={styles.iframe}
1723
ref={e => this.iframeRef(e)}
@@ -106,6 +112,7 @@ export namespace EditorWindow {
106112
windowOpenTimeout: number;
107113
mode: 'iframe' | 'window';
108114
window: Window;
115+
pinned: boolean;
109116
}
110117
export type PostMessage = (
111118
message: any,

‎packages/react-intl-namespaces-locize-editor/src/Components/__snapshots__/Editor.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ exports[`Editor should refresh when refresh button is clicked 1`] = `
108108
}
109109
`;
110110

111-
exports[`Editor should render hidden by default 1`] = `"<div data-ignore-editor=\\"true\\"><div class=\\"panel pinned\\"><span class=\\"content\\"><div class=\\"title\\">locize editor</div> <button class=\\"button buttonOn\\">On</button> <button class=\\"button buttonOff\\">id's</button> <button class=\\"button buttonOn\\">refresh</button> </span><button class=\\"button pin pinned buttonOn\\"> </button></div><div class=\\"container\\" style=\\"width: 700px;\\"><iframe class=\\"iframe\\" style=\\"width: 700px;\\" src=\\"https://www.locize.io\\"></iframe></div></div>"`;
111+
exports[`Editor should render hidden by default 1`] = `"<div data-ignore-editor=\\"true\\"><div class=\\"panel pinned\\"><span class=\\"content\\"><div class=\\"title\\">locize editor</div> <button class=\\"button buttonOn\\">On</button> <button class=\\"button buttonOff\\">id's</button> <button class=\\"button buttonOn\\">refresh</button> </span><button class=\\"button pin pinned buttonOn\\"> </button></div><div class=\\"container containerVisible\\" style=\\"width: 700px;\\"><iframe class=\\"iframe\\" style=\\"width: 700px;\\" src=\\"https://www.locize.io\\"></iframe></div></div>"`;
112112
113113
exports[`Editor should render hidden by default 2`] = `null`;
114114

‎packages/react-intl-namespaces-locize-editor/src/Components/__snapshots__/EditorPanel.test.tsx.snap

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`EditorPanel should not show editor 1`] = `"<div class=\\"panel pinned\\"><span class=\\"content\\"><div class=\\"title\\">locize editor</div><select class=\\"select\\"><option value=\\"en\\" class=\\"option\\">en</option><option value=\\"pl\\" class=\\"option\\">pl</option></select> <button class=\\"button buttonOff\\">Off</button> <button class=\\"button buttonOn\\">id's</button> <button class=\\"button buttonOn\\">refresh</button> </span><button class=\\"button pin pinned buttonOn\\"> </button></div>"`;
3+
exports[`EditorPanel should not show editor 1`] = `"<div class=\\"panel\\"><span class=\\"content\\"><div class=\\"title\\">locize editor</div><select class=\\"select\\"><option value=\\"en\\" class=\\"option\\">en</option><option value=\\"pl\\" class=\\"option\\">pl</option></select> <button class=\\"button buttonOff\\">Off</button> <button class=\\"button buttonOn\\">id's</button> <button class=\\"button buttonOn\\">refresh</button> </span><button class=\\"button pin unpinned buttonOff\\"> </button></div>"`;
44
55
exports[`EditorPanel should show panel and handle events 1`] = `"<div class=\\"panel pinned\\"><span class=\\"content\\"><div class=\\"title\\">locize editor</div><select class=\\"select\\"><option value=\\"en\\" class=\\"option\\">en</option><option value=\\"pl\\" class=\\"option\\">pl</option></select> <button class=\\"button buttonOn\\">On</button> <button class=\\"button buttonOn\\">id's</button> <button class=\\"button buttonOn\\">refresh</button> </span><button class=\\"button pin pinned buttonOn\\"> </button></div>"`;
66
7-
exports[`EditorPanel should show panel and handle events 2`] = `"<div class=\\"panel\\"><span class=\\"content\\"><div class=\\"title\\">locize editor</div><select class=\\"select\\"><option value=\\"en\\" class=\\"option\\">en</option><option value=\\"pl\\" class=\\"option\\">pl</option></select> <button class=\\"button buttonOn\\">On</button> <button class=\\"button buttonOn\\">id's</button> <button class=\\"button buttonOn\\">refresh</button> </span><button class=\\"button pin unpinned buttonOff\\"> </button></div>"`;
8-
9-
exports[`EditorPanel should show panel and handle events 3`] = `
7+
exports[`EditorPanel should show panel and handle events 2`] = `
108
Object {
11-
"getLanguages": [MockFunction] {
12-
"calls": Array [
13-
Array [],
14-
Array [],
15-
],
16-
},
9+
"languages": Array [
10+
"en",
11+
"pl",
12+
],
1713
"onChangeLanguage": [MockFunction] {
1814
"calls": Array [
1915
Array [
@@ -26,12 +22,17 @@ Object {
2622
Array [],
2723
],
2824
},
29-
"onSearchEnabled": [MockFunction] {
25+
"onShowIds": [MockFunction] {
3026
"calls": Array [
3127
Array [],
3228
],
3329
},
34-
"onShowIds": [MockFunction] {
30+
"onTogglePinned": [MockFunction] {
31+
"calls": Array [
32+
Array [],
33+
],
34+
},
35+
"onToggleSearch": [MockFunction] {
3536
"calls": Array [
3637
Array [],
3738
],

0 commit comments

Comments
 (0)