Skip to content

Commit 1a2c9b4

Browse files
MarcusNotheisMarcusNotheis
authored
feat(WebComponents): Update to v1.0.0-rc.5, add ProductSwitch Component (#236)
BREAKING CHANGE: Icon import paths changed from `@ui5/webcomponents/dist/icons/add.js` to `@ui5/webcomponents-icons/dist/icons/add.js`. BREAKING CHANGE: **Icon**: prop `src` was renamed to `name` BREAKING CHANGE: **Icon**: the `sap-icon://` prefix was removed BREAKING CHANGE: **ShellBar** prop `icon` was renamed to `startButton` BREAKING CHANGE: **ShellBarItem**: prop `src` was renamed to `name` BREAKING CHANGE: **Card**: `avatar` prop now accepts a node instead of a string Please also check the [UI5 Web Components Release Notes](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.0.0-rc.5).
1 parent 530917c commit 1a2c9b4

File tree

95 files changed

+783
-465
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+783
-465
lines changed

‎packages/main/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,17 @@
1414
"license": "Apache-2.0",
1515
"private": false,
1616
"sideEffects": [
17-
"@ui5/webcomponents/dist/icons/*"
17+
"@ui5/webcomponents-icons/dist/icons/*"
1818
],
1919
"scripts": {
2020
"generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' -r esm ./scripts/wrapperGeneration/index.js --onlyStopForMerge",
2121
"build": "webpack --config ./scripts/wrapperGeneration/webpack.config.js",
2222
"postbuild": "rollup -c rollup.config.js"
2323
},
2424
"dependencies": {
25-
"@ui5/webcomponents": "1.0.0-rc.4",
25+
"@ui5/webcomponents": "1.0.0-rc.5",
26+
"@ui5/webcomponents-fiori": "^1.0.0-rc.5",
27+
"@ui5/webcomponents-icons": "^1.0.0-rc.5",
2628
"@ui5/webcomponents-react-base": "0.7.0-rc.1",
2729
"lodash.debounce": "^4.0.8",
2830
"react-content-loader": "^4.3.2",

‎packages/main/scripts/wrapperGeneration/parseComponentNames.js

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,9 @@ const fs = require('fs');
22
const path = require('path');
33
const PATHS = require('../../../../config/paths');
44

5-
// create list of modules
6-
const webComponentsModulePath = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents', 'dist');
7-
let files = fs
8-
.readdirSync(webComponentsModulePath)
9-
.filter((file) => file.endsWith('.js'))
10-
.map((file) => path.basename(file, '.js'));
11-
12-
const appDirectory = fs.realpathSync(process.cwd());
13-
const folderName = path.resolve(appDirectory, 'scripts', 'wrapperGeneration', 'json');
14-
15-
if (!fs.existsSync(folderName)) {
16-
fs.mkdirSync(folderName);
17-
}
18-
195
const PRIVATE_COMPONENTS = [
206
'CalendarHeader',
7+
'DefaultTheme',
218
'DayPicker',
229
'ListItem',
2310
'ListItemBase',
@@ -29,7 +16,26 @@ const PRIVATE_COMPONENTS = [
2916
'YearPicker'
3017
];
3118

32-
files = files.filter((file) => !PRIVATE_COMPONENTS.includes(file));
33-
console.log(files);
19+
const appDirectory = fs.realpathSync(process.cwd());
20+
const folderName = path.resolve(appDirectory, 'scripts', 'wrapperGeneration', 'json');
21+
22+
if (!fs.existsSync(folderName)) {
23+
fs.mkdirSync(folderName);
24+
}
3425

35-
fs.writeFileSync(path.resolve(folderName, 'modules.json'), JSON.stringify(files));
26+
// create list of modules
27+
const webComponentsModulePath = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents', 'dist');
28+
const standardWebComponents = fs
29+
.readdirSync(webComponentsModulePath)
30+
.filter((file) => file.endsWith('.js'))
31+
.map((file) => path.basename(file, '.js'))
32+
.filter((file) => !PRIVATE_COMPONENTS.includes(file));
33+
fs.writeFileSync(path.resolve(folderName, 'webcomponents.json'), JSON.stringify(standardWebComponents));
34+
35+
const fioriWebComponentsFolder = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents-fiori', 'dist');
36+
const fioriWebComponents = fs
37+
.readdirSync(fioriWebComponentsFolder)
38+
.filter((file) => file.endsWith('.js'))
39+
.map((file) => path.basename(file, '.js'))
40+
.filter((file) => !PRIVATE_COMPONENTS.includes(file));
41+
fs.writeFileSync(path.resolve(folderName, 'webcomponents-fiori.json'), JSON.stringify(fioriWebComponents));

‎packages/main/scripts/wrapperGeneration/puppeteerScript.js

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
11
import { generateTypings } from './generateTypingsWeb';
22

3-
const modules = require('./json/modules');
3+
const modules = require('./json/webcomponents');
4+
const fioriWebComponents = require('./json/webcomponents-fiori');
5+
6+
const createAndLogDto = (componentName, module) => {
7+
const WebComponent = module.default;
8+
if (WebComponent && WebComponent.getMetadata) {
9+
const metadata = WebComponent.getMetadata().metadata;
10+
const dto = {
11+
componentName,
12+
metadata,
13+
typings: generateTypings(metadata)
14+
};
15+
console.log(JSON.stringify(dto));
16+
}
17+
};
418

519
modules.forEach((moduleName) => {
620
import(
721
/* webpackMode: "eager" */
822
'@ui5/webcomponents/dist/' + moduleName
923
).then((module) => {
10-
const WebComponent = module.default;
11-
if (WebComponent && WebComponent.getMetadata) {
12-
const metadata = WebComponent.getMetadata().metadata;
13-
const dto = {
14-
componentName: moduleName,
15-
metadata,
16-
typings: generateTypings(metadata)
17-
};
18-
console.log(JSON.stringify(dto));
19-
}
24+
createAndLogDto(moduleName, module);
25+
});
26+
});
27+
fioriWebComponents.forEach((moduleName) => {
28+
import(
29+
/* webpackMode: "eager" */
30+
'@ui5/webcomponents-fiori/dist/' + moduleName
31+
).then((module) => {
32+
createAndLogDto(moduleName, module);
2033
});
2134
});
22-
23-
console.log(modules);

‎packages/main/scripts/wrapperGeneration/steps/createDemo.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function getKnownNumber(key, meta) {
4242
}
4343

4444
const knownStrings = {
45-
icon: "'sap-icon://add'"
45+
icon: "'add'"
4646
};
4747

4848
function getStringValue(key, meta) {

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,25 +92,25 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props) => {
9292
>
9393
<List onItemClick={handleSort}>
9494
{showSort && (
95-
<StandardListItem type={ListItemTypes.Active} icon={'sap-icon://sort-ascending'} data-sort={'asc'}>
95+
<StandardListItem type={ListItemTypes.Active} icon={'sort-ascending'} data-sort={'asc'}>
9696
Sort Ascending
9797
</StandardListItem>
9898
)}
9999
{showSort && (
100-
<StandardListItem type={ListItemTypes.Active} icon={'sap-icon://sort-descending'} data-sort={'desc'}>
100+
<StandardListItem type={ListItemTypes.Active} icon={'sort-descending'} data-sort={'desc'}>
101101
Sort Descending
102102
</StandardListItem>
103103
)}
104104
{showFilter && !column.isGrouped && (
105105
<CustomListItem type={ListItemTypes.Inactive}>
106106
<FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>
107-
<Icon src="sap-icon://filter" style={{ paddingRight: '1rem' }} />
107+
<Icon name="filter" style={{ paddingRight: '1rem' }} />
108108
<Filter column={column} />
109109
</FlexBox>
110110
</CustomListItem>
111111
)}
112112
{showGroup && (
113-
<StandardListItem type={ListItemTypes.Active} icon="sap-icon://group-2" data-sort={'group'}>
113+
<StandardListItem type={ListItemTypes.Active} icon="group-2" data-sort={'group'}>
114114
{column.isGrouped ? 'Ungroup' : 'Group'}
115115
</StandardListItem>
116116
)}

‎packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { JSSTheme } from '../../../interfaces/JSSTheme';
77
import { Resizer } from './Resizer';
88
import { ColumnType } from '../types/ColumnType';
99
import { ColumnHeaderModal } from './ColumnHeaderModal';
10-
import '@ui5/webcomponents/dist/icons/filter';
11-
import '@ui5/webcomponents/dist/icons/group-2';
12-
import '@ui5/webcomponents/dist/icons/sort-descending';
13-
import '@ui5/webcomponents/dist/icons/sort-ascending';
10+
import '@ui5/webcomponents-icons/dist/icons/filter';
11+
import '@ui5/webcomponents-icons/dist/icons/group-2';
12+
import '@ui5/webcomponents-icons/dist/icons/sort-descending';
13+
import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
1414

1515
export interface ColumnHeaderProps {
1616
id: string;
@@ -101,9 +101,9 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
101101

102102
const classNames = StyleClassHelper.of(classes.header);
103103

104-
const sortingIcon = column.isSorted ? <Icon src={desc ? 'sort-descending' : 'sort-ascending'} /> : null;
105-
const filterIcon = isFiltered ? <Icon src="sap-icon://filter" /> : null;
106-
const groupingIcon = column.isGrouped ? <Icon src="sap-icon://group-2" /> : null;
104+
const sortingIcon = column.isSorted ? <Icon name={desc ? 'sort-descending' : 'sort-ascending'} /> : null;
105+
const filterIcon = isFiltered ? <Icon name="filter" /> : null;
106+
const groupingIcon = column.isGrouped ? <Icon name="group-2" /> : null;
107107

108108
return (
109109
<div className={classNames.valueOf()}>

0 commit comments

Comments
 (0)