Skip to content

Commit 26ef7ef

Browse files
AJIXuMuKAJIXuMuK
committed
wip
1 parent aef5604 commit 26ef7ef

19 files changed

Lines changed: 331 additions & 270 deletions

‎src/controls/monacoEditor/MonacoEditor.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { EStatus, useMonaco } from "./useMonaco";
77
import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
88
import { Stack } from "office-ui-fabric-react/lib/Stack";
99
import { Error } from "./Error";
10+
import { editor } from "monaco-editor";
1011

1112
export const MonacoEditor: React.FunctionComponent<IMonacoEditorProps> = (
1213
props: React.PropsWithChildren<IMonacoEditorProps>
@@ -24,19 +25,19 @@ export const MonacoEditor: React.FunctionComponent<IMonacoEditorProps> = (
2425
} = props || ({} as IMonacoEditorProps);
2526

2627
const containerRef = React.useRef<HTMLDivElement>(null);
27-
const editorRef = React.useRef<any>(null);
28+
const editorRef = React.useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
2829
const { controlClasses } = useMonacoEditorStyles();
2930
const { monaco, status, error } = useMonaco();
3031

3132
const onDidChangeModelContent = React.useCallback(
32-
(e: any): void => {
33+
(e: any): void => { // eslint-disable-line @typescript-eslint/no-explicit-any
3334
if (editorRef.current) {
34-
let currentValue: string = editorRef.current.getValue();
35+
const currentValue: string = editorRef.current.getValue();
3536
if (currentValue !== value) {
36-
let validationErrors: string[] = [];
37+
const validationErrors: string[] = [];
3738
try {
3839
if (language === Elanguages.json) {
39-
let jsonParsed: any = JSON.parse(currentValue);
40+
JSON.parse(currentValue);
4041
}
4142
} catch (e) {
4243
validationErrors.push(e.message);
@@ -59,7 +60,7 @@ export const MonacoEditor: React.FunctionComponent<IMonacoEditorProps> = (
5960
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(jscriptDiagnosticsOptions);
6061
}
6162

62-
monaco.editor.onDidCreateModel((m: any) => {
63+
monaco.editor.onDidCreateModel((m: editor.ITextModel) => {
6364
m.updateOptions({
6465
tabSize: 2,
6566
});

‎src/controls/monacoEditor/useMonaco.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ export enum EStatus {
88
ERROR,
99
}
1010

11-
export const useMonaco = () => {
11+
export const useMonaco = (): {
12+
monaco: Monaco;
13+
status: EStatus;
14+
error: Error;
15+
} => {
1216
const [monaco, setMonaco] = useState<Monaco>(undefined);
1317
const [status, setStatus] = useState<EStatus>(EStatus.LOADING);
1418
const [error, setError] = useState<Error>(undefined);
@@ -25,7 +29,7 @@ export const useMonaco = () => {
2529
setMonaco(undefined);
2630
setError(error);
2731
}
28-
})();
32+
})().then(() => { /* no-op; */ }).catch(() => { /* no-op; */ });
2933
}, []);
3034

3135
return {

‎src/controls/monacoEditor/useMonacoEditorStyles.ts‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
import { mergeStyleSets } from "office-ui-fabric-react";
1+
import { IProcessedStyleSet, mergeStyleSets } from "office-ui-fabric-react/lib/Styling";
22
import React from "react";
33

4-
export const useMonacoEditorStyles = () => {
5-
const controlClasses = React.useMemo(() =>{
6-
return mergeStyleSets({
7-
containerStyles:{
8-
height: "800px",
9-
}
10-
});
11-
},[]);
4+
export const useMonacoEditorStyles = (): {
5+
controlClasses: IProcessedStyleSet<{
6+
containerStyles: {
7+
height: string;
8+
};
9+
}>;
10+
} => {
11+
const controlClasses = React.useMemo(() => {
12+
return mergeStyleSets({
13+
containerStyles: {
14+
height: "800px",
15+
}
16+
});
17+
}, []);
1218

13-
return {controlClasses };
19+
return { controlClasses };
1420
};

‎src/controls/pagination/Pagination.tsx‎

Lines changed: 130 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -6,152 +6,154 @@ import * as telemetry from '../../common/telemetry';
66
import { Stack } from "office-ui-fabric-react/lib/Stack";
77

88
export interface IPaginationProps {
9-
/**
10-
* The page initial selected
11-
*/
12-
currentPage: number;
13-
/**
14-
* The total of page that you want to show on control
15-
*/
16-
totalPages: number;
17-
/**
18-
* When the page number change send the page number selected
19-
*/
20-
onChange: (page: number) => void;
21-
/**
22-
* The number of pages showing before the icon
23-
*/
24-
limiter?: number;
25-
/**
26-
* Hide the quick jump to the first page
27-
*/
28-
hideFirstPageJump?: boolean;
29-
/**
30-
* Hide the quick jump to the last page
31-
*/
32-
hideLastPageJump?: boolean;
33-
/**
34-
* Limitir icon, by default is More icon
35-
*/
36-
limiterIcon?: string;
9+
/**
10+
* The page initial selected
11+
*/
12+
currentPage: number;
13+
/**
14+
* The total of page that you want to show on control
15+
*/
16+
totalPages: number;
17+
/**
18+
* When the page number change send the page number selected
19+
*/
20+
onChange: (page: number) => void;
21+
/**
22+
* The number of pages showing before the icon
23+
*/
24+
limiter?: number;
25+
/**
26+
* Hide the quick jump to the first page
27+
*/
28+
hideFirstPageJump?: boolean;
29+
/**
30+
* Hide the quick jump to the last page
31+
*/
32+
hideLastPageJump?: boolean;
33+
/**
34+
* Limitir icon, by default is More icon
35+
*/
36+
limiterIcon?: string;
3737
}
3838

3939
export interface IPaginationState {
40-
currentPage: number;
41-
paginationElements: number[];
42-
limiter: number;
40+
currentPage: number;
41+
paginationElements: number[];
42+
limiter: number;
4343
}
4444

4545
export class Pagination extends React.Component<IPaginationProps, IPaginationState> {
46-
constructor(props: Readonly<IPaginationProps>) {
47-
super(props);
46+
constructor(props: Readonly<IPaginationProps>) {
47+
super(props);
4848

49-
telemetry.track('ReactPagination');
49+
telemetry.track('ReactPagination');
5050

51-
const paginationElements = this.preparePaginationElements(props.totalPages);
51+
const paginationElements = this.preparePaginationElements(props.totalPages);
5252

53-
this.state = {
54-
currentPage: props.currentPage,
55-
paginationElements,
56-
limiter: props.limiter ? props.limiter : 3,
57-
};
58-
}
59-
60-
public componentDidUpdate(prevProps: IPaginationProps) {
61-
let { currentPage, paginationElements } = this.state;
53+
this.state = {
54+
currentPage: props.currentPage,
55+
paginationElements,
56+
limiter: props.limiter ? props.limiter : 3,
57+
};
58+
}
6259

63-
if (prevProps.totalPages !== this.props.totalPages) {
64-
paginationElements = this.preparePaginationElements(this.props.totalPages);
65-
currentPage = this.state.currentPage > this.props.totalPages ? this.props.totalPages : this.state.currentPage;
66-
}
67-
if (this.props.currentPage !== prevProps.currentPage) {
68-
currentPage = this.props.currentPage > this.props.totalPages ? this.props.totalPages : this.props.currentPage;
69-
}
60+
public componentDidUpdate(prevProps: IPaginationProps): void {
61+
let { currentPage, paginationElements } = this.state;
7062

71-
if (!isEqual(this.state.currentPage, currentPage) || !isEqual(this.state.paginationElements, paginationElements)) {
72-
this.setState({
73-
paginationElements,
74-
currentPage
75-
});
76-
}
63+
if (prevProps.totalPages !== this.props.totalPages) {
64+
paginationElements = this.preparePaginationElements(this.props.totalPages);
65+
currentPage = this.state.currentPage > this.props.totalPages ? this.props.totalPages : this.state.currentPage;
7766
}
78-
79-
public render(): React.ReactElement<IPaginationProps> {
80-
return (
81-
<div className={`${styles.pagination} pagination-container`}>
82-
<Stack horizontal horizontalAlign="center" verticalAlign="center" tokens={{childrenGap:1}} wrap>
83-
{!this.props.hideFirstPageJump &&
84-
<DefaultButton
85-
className={`${styles.buttonStyle} pagination-button pagination-button_first`}
86-
onClick={() => this.onClick(1)}
87-
iconProps={{ iconName: "DoubleChevronLeft" }}>
88-
</DefaultButton>
89-
}
90-
91-
{this.state.paginationElements.map((pageNumber) => this.renderPageNumber(pageNumber))}
92-
93-
{!this.props.hideLastPageJump &&
94-
<DefaultButton
95-
className={`${styles.buttonStyle} pagination-button pagination-button_last`}
96-
onClick={() => this.onClick(this.props.totalPages)}
97-
iconProps={{ iconName: "DoubleChevronRight" }}>
98-
</DefaultButton>
99-
}
100-
</Stack>
101-
</div>
102-
);
67+
if (this.props.currentPage !== prevProps.currentPage) {
68+
currentPage = this.props.currentPage > this.props.totalPages ? this.props.totalPages : this.props.currentPage;
10369
}
10470

105-
private preparePaginationElements = (totalPages: number) => {
106-
let paginationElementsArray = [];
107-
for (let i = 0; i < totalPages; i++) {
108-
paginationElementsArray.push(i + 1);
109-
}
110-
return paginationElementsArray;
71+
if (!isEqual(this.state.currentPage, currentPage) || !isEqual(this.state.paginationElements, paginationElements)) {
72+
this.setState({
73+
paginationElements,
74+
currentPage
75+
});
11176
}
77+
}
11278

113-
private onClick = (page: number) => {
114-
this.setState({ currentPage: page });
115-
this.props.onChange(page);
79+
public render(): React.ReactElement<IPaginationProps> {
80+
return (
81+
<div className={`${styles.pagination} pagination-container`}>
82+
<Stack horizontal horizontalAlign="center" verticalAlign="center" tokens={{ childrenGap: 1 }} wrap>
83+
{!this.props.hideFirstPageJump &&
84+
<DefaultButton
85+
className={`${styles.buttonStyle} pagination-button pagination-button_first`}
86+
onClick={() => this.onClick(1)}
87+
iconProps={{ iconName: "DoubleChevronLeft" }} />
88+
}
89+
90+
{this.state.paginationElements.map((pageNumber) => this.renderPageNumber(pageNumber))}
91+
92+
{!this.props.hideLastPageJump &&
93+
<DefaultButton
94+
className={`${styles.buttonStyle} pagination-button pagination-button_last`}
95+
onClick={() => this.onClick(this.props.totalPages)}
96+
iconProps={{ iconName: "DoubleChevronRight" }} />
97+
}
98+
</Stack>
99+
</div>
100+
);
101+
}
102+
103+
private preparePaginationElements = (totalPages: number): number[] => {
104+
const paginationElementsArray: number[] = [];
105+
for (let i = 0; i < totalPages; i++) {
106+
paginationElementsArray.push(i + 1);
116107
}
108+
return paginationElementsArray;
109+
}
110+
111+
private onClick = (page: number): void => {
112+
this.setState({ currentPage: page });
113+
this.props.onChange(page);
114+
}
117115

118-
private renderPageNumber(pageNumber) {
119-
if (pageNumber === this.state.currentPage) {
120-
return (
121-
<PrimaryButton
122-
className={styles.buttonStyle}
123-
onClick={() => this.onClick(pageNumber)}
124-
text={pageNumber}>
125-
</PrimaryButton>
126-
);
127-
} else {
128-
if (!(pageNumber < this.state.currentPage - this.state.limiter || pageNumber > this.state.currentPage + this.state.limiter)) {
129-
return (
130-
<DefaultButton
131-
className={styles.buttonStyle}
132-
onClick={() => this.onClick(pageNumber)}
133-
text={pageNumber}>
134-
</DefaultButton>);
135-
}
136-
else if (!(pageNumber < this.state.currentPage - this.state.limiter - 1 || pageNumber > this.state.currentPage + this.state.limiter + 1)) {
137-
if (this.props.limiterIcon) {
138-
return (<DefaultButton
139-
className={styles.buttonStyle}
140-
onClick={() => this.onClick(pageNumber)}
141-
iconProps={{ iconName: this.props.limiterIcon ? this.props.limiterIcon : "More" }}>
142-
</DefaultButton>);
143-
}
144-
else {
145-
return (<DefaultButton
146-
className={styles.buttonStyle}
147-
onClick={() => this.onClick(pageNumber)}
148-
iconProps={{ iconName: this.props.limiterIcon ? this.props.limiterIcon : "More" }}>
149-
</DefaultButton>);
150-
}
151-
}
152-
else {
153-
return;
154-
}
116+
private renderPageNumber(pageNumber): JSX.Element {
117+
const {
118+
limiterIcon
119+
} = this.props;
120+
121+
const {
122+
currentPage,
123+
limiter
124+
} = this.state;
125+
if (pageNumber === currentPage) {
126+
return (
127+
<PrimaryButton
128+
className={styles.buttonStyle}
129+
onClick={() => this.onClick(pageNumber)}
130+
text={pageNumber} />
131+
);
132+
} else {
133+
if (!(pageNumber < currentPage - limiter || pageNumber > currentPage + limiter)) {
134+
return (
135+
<DefaultButton
136+
className={styles.buttonStyle}
137+
onClick={() => this.onClick(pageNumber)}
138+
text={pageNumber} />);
139+
}
140+
else if (!(pageNumber < currentPage - limiter - 1 || pageNumber > currentPage + limiter + 1)) {
141+
if (limiterIcon) {
142+
return (<DefaultButton
143+
className={styles.buttonStyle}
144+
onClick={() => this.onClick(pageNumber)}
145+
iconProps={{ iconName: limiterIcon ? limiterIcon : "More" }} />);
146+
}
147+
else {
148+
return (<DefaultButton
149+
className={styles.buttonStyle}
150+
onClick={() => this.onClick(pageNumber)}
151+
iconProps={{ iconName: limiterIcon ? limiterIcon : "More" }} />);
155152
}
153+
}
154+
else {
155+
return;
156+
}
156157
}
158+
}
157159
}

0 commit comments

Comments
 (0)