Skip to content

Commit 54ce351

Browse files
aafvstamaafvstam
committed
Updated Packages and created Fancy Web
Updated all the NPM Packages and aligned the Web UI to the UI as shown in the TaskPane. So it's less disturbing for OCD people like me.
1 parent 941f2e3 commit 54ce351

File tree

14 files changed

+966
-398
lines changed

14 files changed

+966
-398
lines changed

‎Samples/Office.ASP.NETCoreReactAddins/excel-js/ClientApp/package-lock.json

Lines changed: 325 additions & 163 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Samples/Office.ASP.NETCoreReactAddins/excel-js/ClientApp/package.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,33 @@
77
"core-js": "^3.6.5",
88
"es6-promise": "^4.2.8",
99
"jquery": "^3.5.1",
10-
"office-ui-fabric-react": "^7.113.2",
10+
"office-ui-fabric-react": "^7.121.8",
1111
"react": "^16.13.1",
1212
"react-bootstrap": "^1.0.1",
1313
"react-dom": "^16.13.1",
1414
"react-router-bootstrap": "^0.25.0",
1515
"react-router-dom": "^5.2.0",
1616
"react-scripts": "^3.4.1",
17-
"reactstrap": "^8.4.1",
17+
"reactstrap": "^8.5.1",
1818
"rimraf": "^3.0.2"
1919
},
2020
"devDependencies": {
2121
"@types/core-js": "^2.5.3",
22-
"@types/es6-collections": "^0.5.31",
23-
"@types/office-js": "^1.0.99",
22+
"@types/es6-collections": "^0.5.32",
23+
"@types/office-js": "^1.0.116",
2424
"@types/office-runtime": "^1.0.14",
25-
"@types/react": "^16.9.35",
25+
"@types/react": "^16.9.41",
2626
"@types/react-dom": "^16.9.8",
2727
"@types/react-hot-loader": "^4.1.1",
2828
"ajv": "^6.12.2",
2929
"babel-eslint": "10.1.0",
3030
"cross-env": "^7.0.2",
3131
"eslint": "^6.8.0",
3232
"eslint-config-react-app": "^5.2.1",
33-
"eslint-plugin-flowtype": "^4.7.0",
34-
"eslint-plugin-import": "^2.20.2",
35-
"eslint-plugin-jsx-a11y": "^6.2.3",
36-
"eslint-plugin-react": "^7.20.0",
33+
"eslint-plugin-flowtype": "^5.2.0",
34+
"eslint-plugin-import": "^2.22.0",
35+
"eslint-plugin-jsx-a11y": "^6.3.1",
36+
"eslint-plugin-react": "^7.20.3",
3737
"react-hot-loader": "^4.12.21"
3838
},
3939
"eslintConfig": {

‎Samples/Office.ASP.NETCoreReactAddins/excel-js/ClientApp/src/components/App.js

Lines changed: 75 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -9,84 +9,93 @@
99
import * as React from 'react';
1010
import { Button, ButtonType } from 'office-ui-fabric-react';
1111
import Header from './Header';
12-
import HeroList, { HeroListItem } from './HeroList';
12+
import HeroList from './HeroList';
1313
import Progress from './Progress';
1414

1515
const logo = require('../assets/logo-filled.png');
1616

1717
export default class App extends React.Component {
18-
constructor(props, context) {
19-
super(props, context);
20-
this.state = {
21-
listItems: []
22-
};
23-
}
18+
constructor(props, context) {
19+
super(props, context);
20+
this.state = {
21+
listItems: [],
22+
};
23+
}
2424

25-
componentDidMount() {
26-
this.setState({
27-
listItems: [
28-
{
29-
icon: 'Ribbon',
30-
primaryText: 'Achieve more with Office integration'
31-
},
32-
{
33-
icon: 'Unlock',
34-
primaryText: 'Unlock features and functionality'
35-
},
36-
{
37-
icon: 'Design',
38-
primaryText: 'Create and visualize like a pro'
39-
}
40-
]
41-
});
42-
}
25+
componentDidMount() {
26+
this.setState({
27+
listItems: [
28+
{
29+
icon: 'Ribbon',
30+
primaryText: 'Achieve more with Office integration',
31+
},
32+
{
33+
icon: 'Unlock',
34+
primaryText: 'Unlock features and functionality',
35+
},
36+
{
37+
icon: 'Design',
38+
primaryText: 'Create and visualize like a pro',
39+
},
40+
],
41+
});
42+
}
4343

44-
click = async () => {
45-
try {
46-
await Excel.run(async context => {
47-
/**
48-
* Insert your Excel code here
49-
*/
50-
const range = context.workbook.getSelectedRange();
44+
click = async () => {
45+
try {
46+
await Excel.run(async (context) => {
47+
/**
48+
* Insert your Excel code here
49+
*/
50+
const range = context.workbook.getSelectedRange();
5151

52-
// Read the range address
53-
range.load("address");
52+
// Read the range address
53+
range.load('address');
5454

55-
// Update the fill color
56-
range.format.fill.color = "yellow";
55+
// Update the fill color
56+
range.format.fill.color = 'yellow';
5757

58-
await context.sync();
59-
console.log(`The range address was ${range.address}.`);
60-
});
61-
} catch (error) {
62-
console.error(error);
63-
}
58+
await context.sync();
59+
console.log(`The range address was ${range.address}.`);
60+
});
61+
} catch (error) {
62+
console.error(error);
6463
}
64+
};
6565

66-
render() {
67-
const {
68-
title,
69-
isOfficeInitialized,
70-
} = this.props;
66+
render() {
67+
const { title, isOfficeInitialized } = this.props;
7168

72-
if (!isOfficeInitialized) {
73-
return (
74-
<Progress
75-
title={title}
76-
logo={logo}
77-
message='Please sideload your addin to see app body.'
78-
/>
79-
);
80-
}
81-
82-
return (
83-
<div className='ms-welcome'>
84-
<Header logo={logo} title={this.props.title} message='Welcome' />
85-
<HeroList message='Discover what Office .NET Core 3.1 Add-ins can do for you today!' items={this.state.listItems}>
86-
<p className='ms-font-l'>Modify the source files, then click <b>Run</b>.</p>
87-
<Button className='ms-welcome__action' buttonType={ButtonType.hero} iconProps={{ iconName: 'ChevronRight' }} onClick={this.click}>Run</Button>
88-
</HeroList>
89-
</div>
90-
);
69+
if (!isOfficeInitialized) {
70+
return (
71+
<Progress
72+
title={title}
73+
logo={logo}
74+
message="Please sideload your addin to see app body."
75+
/>
76+
);
9177
}
78+
79+
return (
80+
<div className="ms-welcome">
81+
<Header logo={logo} title={this.props.title} message="Welcome JavaScript" />
82+
<HeroList
83+
message="Discover what Office .NET Core 3.1 Add-ins can do for you today!"
84+
items={this.state.listItems}
85+
>
86+
<p className="ms-font-l">
87+
Modify the source files, then click <b>Run</b>.
88+
</p>
89+
<Button
90+
className="ms-welcome__action"
91+
buttonType={ButtonType.hero}
92+
iconProps={{ iconName: 'ChevronRight' }}
93+
onClick={this.click}
94+
>
95+
Run
96+
</Button>
97+
</HeroList>
98+
</div>
99+
);
100+
}
92101
}

‎Samples/Office.ASP.NETCoreReactAddins/excel-js/ClientApp/src/components/Progress.js

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@
44
*/
55

66
import * as React from 'react';
7+
import Header from './Header';
8+
import HeroList from './HeroList';
79
import { Spinner, SpinnerType } from 'office-ui-fabric-react';
810

911
export default class Progress extends React.Component {
10-
render() {
11-
const {
12-
logo,
13-
message,
14-
title,
15-
} = this.props;
12+
render() {
13+
const { logo, message, title } = this.props;
1614

17-
return (
18-
<section className='ms-welcome__progress ms-u-fadeIn500'>
19-
<img width='90' height='90' src={logo} alt={title} title={title} />
20-
<h1 className='ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary'>{title}</h1>
15+
return (
16+
<section className="ms-welcome__progress ms-u-fadeIn500">
17+
<Header logo={logo} title={title} message="Welcome JavaScript" />
18+
<HeroList
19+
message="Discover what Office .NET Core 3.1 Add-ins can do for you today!"
20+
items={[]}
21+
>
2122
<Spinner type={SpinnerType.large} label={message} />
22-
</section>
23-
);
24-
}
23+
</HeroList>
24+
</section>
25+
);
26+
}
2527
}

0 commit comments

Comments
 (0)