diff --git a/.gitignore b/.gitignore index 3ee748c911e..c21482bdb95 100644 --- a/.gitignore +++ b/.gitignore @@ -17,3 +17,4 @@ build /packages/*/npm/**/*.d.ts .out lerna-debug.log +packages/fiori3/scripts/wrapperGeneration/json diff --git a/packages/fiori3/__karma_snapshots__/CheckBox.md b/packages/fiori3/__karma_snapshots__/CheckBox.md index 6f28c148cb0..b27c1ea6126 100644 --- a/packages/fiori3/__karma_snapshots__/CheckBox.md +++ b/packages/fiori3/__karma_snapshots__/CheckBox.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/CustomListItem.md b/packages/fiori3/__karma_snapshots__/CustomListItem.md index 06ade75e48d..b06ddd1bfca 100644 --- a/packages/fiori3/__karma_snapshots__/CustomListItem.md +++ b/packages/fiori3/__karma_snapshots__/CustomListItem.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/DatePicker.md b/packages/fiori3/__karma_snapshots__/DatePicker.md index 6cf9a2364c8..bee3df07627 100644 --- a/packages/fiori3/__karma_snapshots__/DatePicker.md +++ b/packages/fiori3/__karma_snapshots__/DatePicker.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/FilterBar.md b/packages/fiori3/__karma_snapshots__/FilterBar.md index c629ffa5d28..ae78ab7a1c9 100644 --- a/packages/fiori3/__karma_snapshots__/FilterBar.md +++ b/packages/fiori3/__karma_snapshots__/FilterBar.md @@ -43,9 +43,9 @@ - - - + + + @@ -100,8 +100,8 @@ - + @@ -198,9 +198,9 @@ - - - + + + @@ -255,8 +255,8 @@ - + @@ -379,9 +379,9 @@ - - - + + + @@ -436,8 +436,8 @@ - + diff --git a/packages/fiori3/__karma_snapshots__/List.md b/packages/fiori3/__karma_snapshots__/List.md index 08cd4a4cd99..20b19b00d38 100644 --- a/packages/fiori3/__karma_snapshots__/List.md +++ b/packages/fiori3/__karma_snapshots__/List.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/ObjectPage.md b/packages/fiori3/__karma_snapshots__/ObjectPage.md index f01910a62af..9029703b356 100644 --- a/packages/fiori3/__karma_snapshots__/ObjectPage.md +++ b/packages/fiori3/__karma_snapshots__/ObjectPage.md @@ -147,9 +147,9 @@ - - - + + + @@ -223,9 +223,9 @@ - - - + + + @@ -790,9 +790,9 @@ - - - + + + @@ -860,9 +860,9 @@ - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/Panel.md b/packages/fiori3/__karma_snapshots__/Panel.md index 3edde884af1..09824335c00 100644 --- a/packages/fiori3/__karma_snapshots__/Panel.md +++ b/packages/fiori3/__karma_snapshots__/Panel.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/RadioButton.md b/packages/fiori3/__karma_snapshots__/RadioButton.md index 662bccf3b82..f20cde5036c 100644 --- a/packages/fiori3/__karma_snapshots__/RadioButton.md +++ b/packages/fiori3/__karma_snapshots__/RadioButton.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/Select.md b/packages/fiori3/__karma_snapshots__/Select.md index 54aab20ab90..2ad14b4ef8a 100644 --- a/packages/fiori3/__karma_snapshots__/Select.md +++ b/packages/fiori3/__karma_snapshots__/Select.md @@ -5,8 +5,8 @@ ``` " - + diff --git a/packages/fiori3/__karma_snapshots__/ShellBar.md b/packages/fiori3/__karma_snapshots__/ShellBar.md index 34721e38e58..f5ab422961e 100644 --- a/packages/fiori3/__karma_snapshots__/ShellBar.md +++ b/packages/fiori3/__karma_snapshots__/ShellBar.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/ShellBarItem.md b/packages/fiori3/__karma_snapshots__/ShellBarItem.md index dcd03649392..a5e503ef9ef 100644 --- a/packages/fiori3/__karma_snapshots__/ShellBarItem.md +++ b/packages/fiori3/__karma_snapshots__/ShellBarItem.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/Tab.md b/packages/fiori3/__karma_snapshots__/Tab.md index 5c38d31ed66..b3638ae8d0b 100644 --- a/packages/fiori3/__karma_snapshots__/Tab.md +++ b/packages/fiori3/__karma_snapshots__/Tab.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/TableColumn.md b/packages/fiori3/__karma_snapshots__/TableColumn.md index a7927f324c6..a2a8a69b20e 100644 --- a/packages/fiori3/__karma_snapshots__/TableColumn.md +++ b/packages/fiori3/__karma_snapshots__/TableColumn.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/TextArea.md b/packages/fiori3/__karma_snapshots__/TextArea.md index 283a823b8e3..34af05d5b3a 100644 --- a/packages/fiori3/__karma_snapshots__/TextArea.md +++ b/packages/fiori3/__karma_snapshots__/TextArea.md @@ -5,9 +5,9 @@ ``` " - diff --git a/packages/fiori3/__karma_snapshots__/TimelineItem.md b/packages/fiori3/__karma_snapshots__/TimelineItem.md index 737429eae03..4e5ccf90f9c 100644 --- a/packages/fiori3/__karma_snapshots__/TimelineItem.md +++ b/packages/fiori3/__karma_snapshots__/TimelineItem.md @@ -5,9 +5,9 @@ ``` " - - - + + + diff --git a/packages/fiori3/__karma_snapshots__/VariantManagement.md b/packages/fiori3/__karma_snapshots__/VariantManagement.md index 565707595cc..ce12aaabaf7 100644 --- a/packages/fiori3/__karma_snapshots__/VariantManagement.md +++ b/packages/fiori3/__karma_snapshots__/VariantManagement.md @@ -38,9 +38,9 @@ - - - + + + diff --git a/packages/fiori3/package.json b/packages/fiori3/package.json index 5224fbd0e49..0ea1a2f9761 100644 --- a/packages/fiori3/package.json +++ b/packages/fiori3/package.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "private": false, "scripts": { - "generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' --type-check -r esm ./scripts/wrapperGeneration/generateWebComponentWrappers --onlyStopForMerge && prettier --write --config ../../prettier.config.js \"src/webComponents/**/*.tsx\"", + "generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' -r esm ./scripts/wrapperGeneration/generateWebComponentWrappers --onlyStopForMerge && prettier --write --config ../../prettier.config.js \"src/webComponents/**/*.tsx\"", "build": "webpack --config ./scripts/wrapperGeneration/webpack.config.js", "test:karma": "karma start ../../config/karma.conf.js", "test:karma:update": "cross-env UPDATE=1 yarn run test:karma" @@ -18,7 +18,7 @@ "dependencies": { "@fiori-for-react/styles": "0.2.1-rc.0", "@fiori-for-react/utils": "0.2.1-rc.0", - "@ui5/webcomponents": "0.10.1", + "@ui5/webcomponents": "0.11.0", "core-js": "^2.6.4", "react-scroll": "^1.7.11", "react-toastify": "^5.0.1" diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js index 0a1123df616..bb4a93fb549 100644 --- a/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js +++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js @@ -10,7 +10,6 @@ const f4rEnums = { PopoverHorizontalAlign: require(path.resolve(fiori3Enums, 'PopoverHorizontalAlign.ts')).PopoverHorizontalAlign, InputType: require(path.resolve(fiori3Enums, 'InputType.ts')).InputType, LinkType: require(path.resolve(fiori3Enums, 'LinkType.ts')).LinkType, - BackgroundDesign: require(path.resolve(fiori3Enums, 'BackgroundDesign.ts')).BackgroundDesign, ListMode: require(path.resolve(fiori3Enums, 'ListMode.ts')).ListMode, ListItemTypes: require(path.resolve(fiori3Enums, 'ListItemTypes.ts')).ListItemTypes, ListSeparators: require(path.resolve(fiori3Enums, 'ListSeparators.ts')).ListSeparators, diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js index ea2461c7bc8..970cb7204a8 100644 --- a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js +++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js @@ -2,7 +2,6 @@ import UI5ButtonType from '@ui5/webcomponents/dist/types/ButtonType'; import UI5Icon from '@ui5/webcomponents/dist/Icon'; import UI5InputType from '@ui5/webcomponents/dist/types/InputType'; import UI5LinkType from '@ui5/webcomponents/dist/types/LinkType'; -import UI5BackgroundDesign from '@ui5/webcomponents/dist/types/BackgroundDesign'; import UI5ListMode from '@ui5/webcomponents/dist/types/ListMode'; import UI5ListItemTypes from '@ui5/webcomponents/dist/types/ListItemType'; import UI5PopoverPlacementTypes from '@ui5/webcomponents/dist/types/PopoverPlacementType'; @@ -76,11 +75,6 @@ const mappings = { tsType: 'TitleLevel', isEnum: true }, - [UI5BackgroundDesign]: { - importStatement: "import { BackgroundDesign } from '../../lib/BackgroundDesign';", - tsType: 'BackgroundDesign', - isEnum: true - }, [UI5InputType]: { importStatement: "import { InputType } from '../../lib/InputType';", tsType: 'InputType', @@ -150,7 +144,7 @@ function parseSlots(meta, typings) { } else { typings[propKey] = { tsType: 'any', - originalProp: prop + originalProp: slot }; } }); diff --git a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js index 2c877226c42..1df242cbc2b 100644 --- a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js +++ b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js @@ -9,6 +9,7 @@ const showOptions = require('./showOptions'); let pattern; let onlyStopForMerge = false; +const queue = []; process.argv.forEach((val) => { if (val.startsWith('-pattern') || val.startsWith('--pattern')) { @@ -65,13 +66,8 @@ async function generateWebComponentWrapper(dto) { } } -let queueIndex = 0; -function executeQueue(queue) { - const msg = queue[queueIndex]; - function continueExecution() { - queueIndex++; - executeQueue(queue); - } +function executeQueue() { + const msg = queue.shift(); if (!msg) { return; @@ -79,30 +75,25 @@ function executeQueue(queue) { try { const dto = JSON.parse(msg.text()); if (!pattern || dto.componentName.indexOf(pattern) !== -1) { - generateWebComponentWrapper(dto).then(continueExecution); + generateWebComponentWrapper(dto).then(executeQueue); generateComponentDemos(dto); } else { - continueExecution(); + executeQueue(); } } catch (e) { console.error(e.message); - continueExecution(); + executeQueue(); } } -const url = fileUrl('./scripts/wrapperGeneration/puppeteer.html'); - (async () => { const browser = await puppeteer.launch(); //{devtools: true} const page = await browser.newPage(); - - const queue = []; - page.on('console', (msg) => { // console.log(msg.text()); queue.push(msg); }); - await page.goto(url); + await page.goto(fileUrl('./scripts/wrapperGeneration/puppeteer.html')); // await browser.waitForFunction('false'); - await browser.close().then(() => executeQueue(queue)); + await browser.close().then(executeQueue); })(); diff --git a/packages/fiori3/scripts/wrapperGeneration/json/modules.json b/packages/fiori3/scripts/wrapperGeneration/json/modules.json deleted file mode 100644 index da266f4a7e2..00000000000 --- a/packages/fiori3/scripts/wrapperGeneration/json/modules.json +++ /dev/null @@ -1 +0,0 @@ -["Button","ButtonTemplateContext","Calendar","CalendarHeader","CalendarHeaderTemplateContext","CalendarTemplateContext","Card","CheckBox","CheckBoxTemplateContext","CustomListItem","CustomListItemTemplateContext","DatePicker","DatePickerTemplateContext","DayPicker","DayPickerTemplateContext","Dialog","DialogTemplateContext","GroupHeaderListItem","GroupHeaderListItemTemplateContext","Icon","IconTemplateContext","Input","InputElementsFormSupport","InputSuggestions","InputTemplateContext","Label","LabelTemplateContext","Link","LinkTemplateContext","List","ListItem","ListItemBase","ListItemBaseTemplateContext","ListItemTemplateContext","ListTemplateContext","MessageStrip","MessageStripTemplateContext","MonthPicker","MonthPickerTemplateContext","Panel","PanelTemplateContext","Popover","PopoverTemplateContext","Popup","RadioButton","RadioButtonGroup","RadioButtonTemplateContext","ResourceBundleProvider","Select","SelectTemplateContext","ShellBar","ShellBarItem","ShellBarTemplateContext","StandardListItem","StandardListItemTemplateContext","Suggestions","Switch","SwitchTemplateContext","Tab","TabBase","TabContainer","TabContainerTemplateContext","TabSeparator","TabSeparatorTemplateContext","TabTemplateContext","Table","TableCell","TableColumn","TableRow","TextArea","TextAreaTemplateContext","ThemePropertiesProvider","Timeline","TimelineItem","TimelineItemTemplateContext","TimelineTemplateContext","Title","ToggleButton","ToggleButtonTemplateContext","YearPicker","YearPickerTemplateContext"] \ No newline at end of file diff --git a/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts b/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts index 8764e939480..e725c6fcd63 100644 --- a/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts +++ b/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts @@ -76,7 +76,7 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => { return HSLColor.of(backgroundColor).contrast( parameters.sapUiContentForegroundTextColor, parameters.sapUiContentContrastTextColor, - parameters.sapUiContentContrastTextThreshold + (parameters.sapUiContentContrastTextThreshold as any) as number ); } } diff --git a/packages/fiori3/src/components/Token/Token.jss.ts b/packages/fiori3/src/components/Token/Token.jss.ts deleted file mode 100644 index 128aed2bdc6..00000000000 --- a/packages/fiori3/src/components/Token/Token.jss.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { fonts, HSLColor } from '@fiori-for-react/styles'; -import { ContentDensity } from '../../lib/ContentDensity'; -import { JSSTheme } from '../../interfaces/JSSTheme'; - -const darken = (amount, color) => HSLColor.of(color).darken(amount * 100).hsl; - -const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ - token: { - display: 'inline-block', - overflow: 'hidden', - boxSizing: 'border-box', - fontSize: fonts.sapMFontMediumSize, - paddingLeft: contentDensity === ContentDensity.Compact ? '0.25rem' : '0.3125rem', - // paddingTop: '0.25rem', - // paddingBottom: '0.25rem', - height: contentDensity === ContentDensity.Compact ? '1.25rem' : '1.625rem', - background: darken(0.02, parameters.sapUiButtonBackground), - border: `1px solid ${darken(0.24, parameters.sapUiButtonBackground)}`, - borderRadius: '0.25rem', - color: parameters.sapUiButtonTextColor, - paddingBottom: '0.1rem', - '&$readOnly': { - padding: contentDensity === ContentDensity.Compact ? '0.1rem 0.25rem' : '0rem 0.375rem', - color: parameters.sapUiContentLabelColor, - '&$selected': { - color: parameters.sapUiToggleButtonPressedTextColor - } - }, - '&:hover': { - background: darken(0.02, parameters.sapUiButtonHoverBackground), - border: `1px solid ${darken(0.22, parameters.sapUiButtonHoverBackground)}`, - '&$selected': { - background: parameters.sapUiToggleButtonPressedHoverBackground, - border: `1px solid ${parameters.sapUiToggleButtonPressedHoverBorderColor}` - } - }, - '&:focus': { - position: 'relative', - outline: 'none', - '& $tokenText:before': { - position: 'absolute', - top: '2px', - left: '2px', - right: '2px', - bottom: '2px', - content: '""', - pointerEvents: 'none' - } - } - }, - readOnly: { - '& $tokenText': { - maxWidth: '100%' - } - }, - tokenText: { - display: 'inline-block', - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - userSelect: 'none', - pointerEvents: 'none', - lineHeight: '1.5rem', - fontFamily: fonts.sapUiFontFamily, - // maxWidth: `calc(100% - ${TokenSize}px)`, - boxSizing: 'border-box' - }, - compact: { - '& $tokenText': { - // maxWidth: `calc(100% - ${TokenCompactSize}px)`, - lineHeight: '1.125rem' - }, - '&$token': { - fontSize: fonts.sapMFontSmallSize, - paddingLeft: '0.25rem', - height: '1.25rem', - '&$readOnly': { - padding: '0 0.25rem' - } - }, - '& $tokenIcon': { - padding: '0 0.25rem', - lineHeight: '1.125rem' - }, - '&$withinTokenizer': { - '&$token': { - height: '1.25rem', - marginTop: '0.125rem', - marginBottom: '0.125rem', - marginRight: '0.25rem', - maxWidth: 'calc(100% - 0.25rem)' - } - } - }, - tokenIcon: { - verticalAlign: 'top', - display: 'inline-block', - lineHeight: contentDensity === ContentDensity.Compact ? '1.25rem' : '1.625rem', - width: contentDensity === ContentDensity.Compact ? '1.25rem' : '1.75rem', - height: contentDensity === ContentDensity.Compact ? '1.25rem' : '1.625rem', - padding: '0 0.5rem', - fontSize: fonts.sapMFontLargeSize, - boxSizing: 'border-box' - }, - selected: { - color: parameters.sapUiToggleButtonPressedTextColor, - background: parameters.sapUiToggleButtonPressedBackground, - border: `1px solid ${parameters.sapUiToggleButtonPressedBorderColor}`, - borderRadius: '0.125rem' - }, - withinTokenizer: { - '&$token': { - marginTop: '0.375rem', - marginBottom: '0.125rem', - marginRight: '0.375rem', - lineHeight: 'normal', - maxWidth: 'calc(100% - 0.375rem)' - }, - '&$tokenizerReadOnly': { - '&$token': { - padding: '0 0.375rem' - }, - '& tokenIcon': { - display: 'none' - } - } - }, - tokenizerReadOnly: {} -}); - -export default styles; diff --git a/packages/fiori3/src/components/Token/Token.karma.tsx b/packages/fiori3/src/components/Token/Token.karma.tsx deleted file mode 100644 index 257461ce051..00000000000 --- a/packages/fiori3/src/components/Token/Token.karma.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Token } from '../../lib/Token'; -import { mountThemedComponent } from '@shared/tests/utils'; -import { expect, use } from 'chai'; -import { matchSnapshot } from 'chai-karma-snapshot'; -import React from 'react'; - -use(matchSnapshot); - -describe('Token', () => { - it('first', () => { - const wrapper = mountThemedComponent(Test5); - expect(wrapper.debug()).to.matchSnapshot(); - }); -}); diff --git a/packages/fiori3/src/components/Token/demo.stories.tsx b/packages/fiori3/src/components/Token/demo.stories.tsx deleted file mode 100644 index 66733861d56..00000000000 --- a/packages/fiori3/src/components/Token/demo.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { boolean } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; -import { Token } from '../../lib/Token'; - -function renderStory() { - return ( - - Wayne Enterprises - - ); -} - -storiesOf('F4R Components | Token', module).add('Default', renderStory); diff --git a/packages/fiori3/src/components/Token/index.tsx b/packages/fiori3/src/components/Token/index.tsx deleted file mode 100644 index 7af3118bfaf..00000000000 --- a/packages/fiori3/src/components/Token/index.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { fonts } from '@fiori-for-react/styles'; -import { Event, StyleClassHelper } from '@fiori-for-react/utils'; -import { ContentDensity } from '../../lib/ContentDensity'; -import { Icon } from '../../lib/Icon'; -import React, { Component } from 'react'; -import { ClassProps } from '../../interfaces/ClassProps'; -import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; -import { JSSTheme } from '../../interfaces/JSSTheme'; -import { withStyles } from '@fiori-for-react/styles'; -import styles from './Token.jss'; - -export interface TokenPropTypes extends Fiori3CommonProps { - selected?: boolean; - editable?: boolean; - id?: string; - children: string; - onClick?: (event: Event) => void; - onSelect?: (event: Event) => void; - onDeSelect?: (event: Event) => void; - onDeleteClick?: (event: Event) => void; -} - -interface TokenState { - selectedProp: boolean; - selected: boolean; -} - -interface TokenInternalProps extends TokenPropTypes, ClassProps { - theme?: JSSTheme; - withinTokenizer?: boolean; - tokenizerEditable?: boolean; -} - -@withStyles(styles) -export class Token extends Component { - static defaultProps = { - selected: false, - editable: true, - withinTokenizer: false, - tokenizerEditable: true - }; - - private iconRef: HTMLElement; - - private onClick = (e) => { - const { onDeleteClick, onClick, onSelect, onDeSelect } = this.props; - - const tokenProps = { - ...this.props - }; - - const target = e.target; - if (e === this.iconRef || (target && this.iconRef && this.iconRef.contains(target))) { - return this.triggerClickEvent(e, onDeleteClick, tokenProps); - } - - const isSelected = !this.state.selected; - this.setState({ - selected: isSelected - }); - - if (isSelected) { - this.triggerClickEvent(e, onSelect, tokenProps); - } else { - this.triggerClickEvent(e, onDeSelect, tokenProps); - } - - return this.triggerClickEvent(e, onClick, tokenProps); - }; - - private triggerClickEvent(e, clickHandler, tokenProps) { - if (clickHandler) { - clickHandler(Event.of(this, e, tokenProps)); - } - } - - constructor(props) { - super(props); - const { selected } = this.props; - this.state = { - selectedProp: selected, - selected - }; - } - - static getDerivedStateFromProps(nextProps, prevState) { - if (nextProps.selected !== prevState.selectedProp) { - return { - selectedProp: nextProps.selected, - selected: nextProps.selected - }; - } - return null; - } - - render() { - const { theme, editable, classes, children, withinTokenizer, tokenizerEditable, className, style, tooltip } = this - .props as TokenInternalProps; - - const { parameters } = theme; - - const { selected } = this.state; - - const tokenClasses = StyleClassHelper.of(classes.token); - - if (theme.contentDensity === ContentDensity.Compact) { - tokenClasses.put(classes.compact); - } - - if (selected) { - tokenClasses.put(classes.selected); - } - - if (!editable || !tokenizerEditable) { - tokenClasses.put(classes.readOnly); - } - - if (withinTokenizer) { - tokenClasses.put(classes.withinTokenizer); - } - - if (!tokenizerEditable) { - tokenClasses.put(classes.tokenizerReadOnly); - } - - if (className) { - tokenClasses.put(className); - } - - return ( -
- {children} - {editable && tokenizerEditable && ( -
{ - this.iconRef = ref; - }} - className={classes.tokenIcon} - > - { - - } -
- )} -
- ); - } -} diff --git a/packages/fiori3/src/components/Tokenizer/Tokenizer.jss.ts b/packages/fiori3/src/components/Tokenizer/Tokenizer.jss.ts deleted file mode 100644 index 5b5c379d1ca..00000000000 --- a/packages/fiori3/src/components/Tokenizer/Tokenizer.jss.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { ContentDensity } from '../../lib/ContentDensity'; -import { JSSTheme } from '../../interfaces/JSSTheme'; -import { fonts } from '@fiori-for-react/styles'; - -const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({ - tokenizer: { - paddingLeft: '6px', - position: 'relative', - display: 'inline-block', - whiteSpace: 'nowrap', - flex: '0 1 auto', - overflow: 'hidden', - fontFamily: fonts.sapUiFontFamily, - '&:focus': { - outline: `1px dotted ${parameters.sapUIContentFocusColor}`, - outlineOffset: '-3px' - }, - lineHeight: ContentDensity.Cozy === contentDensity ? '1rem' : '0.5rem' - }, - tokenizerScrollContainer: { - width: '100%', - display: 'inline-block', - userSelect: 'none', - lineHeight: ContentDensity.Cozy === contentDensity ? '1rem' : '0.5rem' - } -}); - -export default styles; diff --git a/packages/fiori3/src/components/Tokenizer/Tokenizer.karma.tsx b/packages/fiori3/src/components/Tokenizer/Tokenizer.karma.tsx deleted file mode 100644 index 7ae5057b8f6..00000000000 --- a/packages/fiori3/src/components/Tokenizer/Tokenizer.karma.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { Icon } from '../../lib/Icon'; -import { Tokenizer } from '../../lib/Tokenizer'; -import { mountThemedComponent } from '@shared/tests/utils'; -import { expect, use } from 'chai'; -import { matchSnapshot } from 'chai-karma-snapshot'; -import React, { cloneElement } from 'react'; -import * as sinon from 'sinon'; -import { Token } from '../Token'; - -use(matchSnapshot); - -const items = [ - { - key: '1', - text: 'Test 1' - }, - { - key: '2', - text: 'Test 2' - }, - { - key: '3', - text: 'Test 3' - } -]; - -const tokenChangeCallback = (e) => { - e.getParameter('removeTokensById')(items); -}; - -describe('Tokenizer', () => { - it('Render without crashing', () => { - const wrapper = mountThemedComponent(); - expect(wrapper.debug()).to.matchSnapshot(); - }); - - it('No Items', () => { - const wrapper = mountThemedComponent(); - expect(wrapper.debug()).to.matchSnapshot(); - }); - - it('Read Only + fix width', () => { - const wrapper = mountThemedComponent(); - expect(wrapper.debug()).to.matchSnapshot(); - }); - - it('Passing renderToken + press delete token', () => { - const callback = sinon.spy(); - - const wrapper = mountThemedComponent( - ( - // @ts-ignore - - {item.text as string} - - )} - /> - ); - wrapper - .find(Token) - .first() - .find(Icon) - .simulate('click'); - - wrapper.update(); - expect(callback.called).to.equal(true); - }); - - it('Trigger componentDidUpdate', () => { - const wrapper = mountThemedComponent(); - wrapper.setProps({ - children: cloneElement(wrapper.props().children, { - items: [ - { - key: '1', - text: 'Test 1' - } - ] - }) - }); - // @ts-ignore - expect(wrapper.find('Tokenizer').instance().props.items.length).to.equal(1); - }); - - it('drag and drop', () => { - const wrapper = mountThemedComponent(); - const point = { - pageX: 300, - pageY: 350 - }; - const tokenizer = wrapper.find(Tokenizer); - tokenizer.simulate('mousedown', { - touches: [point] - }); - tokenizer.simulate('mousedown', point); - - tokenizer.simulate('mousemove', { - buttons: 1 - }); - - tokenizer.simulate('mousemove', { - originalEvent: { - which: 1 - } - }); - - tokenizer.simulate('mousemove', { - pressure: true - }); - - wrapper.update(); - expect(wrapper.debug()).to.matchSnapshot(); - }); -}); diff --git a/packages/fiori3/src/components/Tokenizer/demo.stories.tsx b/packages/fiori3/src/components/Tokenizer/demo.stories.tsx deleted file mode 100644 index cd2e1fade89..00000000000 --- a/packages/fiori3/src/components/Tokenizer/demo.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import { boolean, object as objectKnob } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/react'; -import React from 'react'; -import { Tokenizer } from '../../lib/Tokenizer'; - -storiesOf('F4R Components | Tokenizer', module).add('Default', () => ( - -)); diff --git a/packages/fiori3/src/components/Tokenizer/index.tsx b/packages/fiori3/src/components/Tokenizer/index.tsx deleted file mode 100644 index cbbf132d7fc..00000000000 --- a/packages/fiori3/src/components/Tokenizer/index.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { Event, StyleClassHelper } from '@fiori-for-react/utils'; -import { Token } from '../../lib/Token'; -import React, { cloneElement, Component, CSSProperties } from 'react'; -import { ClassProps } from '../../interfaces/ClassProps'; -import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; -import { InputBaseItemType } from '../../interfaces/InputBaseItemType'; -import { withStyles } from '@fiori-for-react/styles'; -import styles from './Tokenizer.jss'; - -export interface TokenizerPropTypes extends Fiori3CommonProps { - width?: CSSProperties['width']; - items?: InputBaseItemType[]; - renderToken?: (item?: InputBaseItemType) => JSX.Element; - editable?: boolean; - onTokenChange?: (event: Event) => void; -} - -interface TokenizerInternalProps extends TokenizerPropTypes, ClassProps {} - -@withStyles(styles) -export class Tokenizer extends Component { - static defaultProps = { - children: [], - editable: true, - width: null, - items: [] - }; - - private domRef = null; - private scrollContainer = null; - private iX = null; - private iY = null; - - static removeTokensByIdGenerator = (id) => (items) => { - return items.filter((item) => (item.key ? item.key !== id : item !== id)); - }; - - private onMouseDown = (e) => { - const point = e.touches ? e.touches[0] : e; - this.iX = point.pageX; - this.iY = point.pageY; - }; - - private onMouseMove = (event) => { - const e = event.originalEvent || event; - if ((e.buttons || e.which) === 1 || e.pressure) { - this.domRef.scrollLeft = this.domRef.scrollLeft + this.iX - event.pageX; - this.iX = event.pageX; - this.iY = event.pageY; - } - }; - - private renderToken = (item) => { - const { editable } = this.props; - - return ( - - {item.text} - - ); - }; - - private onTokenDeleteClick = (e) => { - const { onTokenChange } = this.props; - if (onTokenChange) { - onTokenChange( - Event.of(this, e.getOriginalEvent(), { - token: e.getParameters(), - removeTokensById: Tokenizer.removeTokensByIdGenerator(e.getParameter('id')) - }) - ); - } - }; - - private enhanceToken = (token) => { - const { editable } = this.props; - - return cloneElement(token, { - withinTokenizer: true, - tokenizerEditable: editable, - onDeleteClick: (e) => { - if (token.props.onTokenDelete) { - token.props.onTokenDelete(e); - } - this.onTokenDeleteClick(e); - } - }); - }; - - componentDidUpdate(prevProps) { - if (prevProps.items.length !== this.props.items.length) { - this.domRef.scrollLeft = this.scrollContainer.scrollWidth; - } - } - - render() { - const { classes, width, editable, items, renderToken, className, style, tooltip } = this - .props as TokenizerInternalProps; - - const tokenizerClasses = StyleClassHelper.of(classes.tokenizer); - const inlineStyle = { width }; - - if (!editable) { - tokenizerClasses.put(classes.tokenizerReadOnly); - } - if (items.length === 0) { - tokenizerClasses.put(classes.tokenizerEmpty); - } - - if (className) { - tokenizerClasses.put(className); - } - - if (style) { - Object.assign(inlineStyle, style); - } - - return ( -
{ - this.domRef = ref; - }} - onMouseDown={this.onMouseDown} - onMouseMove={this.onMouseMove} - style={inlineStyle} - role="list" - className={tokenizerClasses.valueOf()} - tabIndex={0} - title={tooltip} - data-ui5-slot={this.props['data-ui5-slot']} - > -
{ - this.scrollContainer = ref; - }} - className={classes.tokenizerScrollContainer} - > - {items.map((item) => (renderToken ? this.enhanceToken(renderToken(item)) : this.renderToken(item)))} -
-
- ); - } -} diff --git a/packages/fiori3/src/enums/BackgroundDesign.ts b/packages/fiori3/src/enums/BackgroundDesign.ts deleted file mode 100644 index b5fa153f195..00000000000 --- a/packages/fiori3/src/enums/BackgroundDesign.ts +++ /dev/null @@ -1,5 +0,0 @@ -// introduced because of web components -export enum BackgroundDesign { - Solid = 'Solid', - Transparent = 'Transparent' -} diff --git a/packages/fiori3/src/index.ts b/packages/fiori3/src/index.ts index 8d56f828233..9f084c73c20 100644 --- a/packages/fiori3/src/index.ts +++ b/packages/fiori3/src/index.ts @@ -8,7 +8,6 @@ import { AnalyticalCardHeader } from './lib/AnalyticalCardHeader'; import { Avatar } from './lib/Avatar'; import { AvatarShape } from './lib/AvatarShape'; import { AvatarSize } from './lib/AvatarSize'; -import { BackgroundDesign } from './lib/BackgroundDesign'; import { Bar } from './lib/Bar'; import { BusyIndicator } from './lib/BusyIndicator'; import { Button } from './lib/Button'; @@ -59,6 +58,7 @@ import { MessageStrip } from './lib/MessageStrip'; import { MessageStripType } from './lib/MessageStripType'; import { MessageToast } from './lib/MessageToast'; import { MonthPicker } from './lib/MonthPicker'; +import { MultiComboBox } from './lib/MultiComboBox'; import { ObjectPage } from './lib/ObjectPage'; import { ObjectPageMode } from './lib/ObjectPageMode'; import { ObjectPageSection } from './lib/ObjectPageSection'; @@ -115,7 +115,6 @@ export { Avatar, AvatarShape, AvatarSize, - BackgroundDesign, Bar, BusyIndicator, Button, @@ -166,6 +165,7 @@ export { MessageStripType, MessageToast, MonthPicker, + MultiComboBox, ObjectPage, ObjectPageMode, ObjectPageSection, diff --git a/packages/fiori3/src/internal/withWebComponent.tsx b/packages/fiori3/src/internal/withWebComponent.tsx index ea8b7e0444b..711bf0ecad6 100644 --- a/packages/fiori3/src/internal/withWebComponent.tsx +++ b/packages/fiori3/src/internal/withWebComponent.tsx @@ -84,7 +84,7 @@ export function withWebComponent(WebComponent): FC { ...e[val] }; } - acc[val] = e.detail[val] || e[val]; + acc[val] = (e.detail && e.detail[val]) || e[val]; return acc; }, payload); eventHandler(Event.of(this, e, payload)); diff --git a/packages/fiori3/src/lib/BackgroundDesign.ts b/packages/fiori3/src/lib/BackgroundDesign.ts deleted file mode 100644 index 1142d777f4e..00000000000 --- a/packages/fiori3/src/lib/BackgroundDesign.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { BackgroundDesign } from '../enums/BackgroundDesign'; - -export { BackgroundDesign }; diff --git a/packages/fiori3/src/lib/MultiComboBox.ts b/packages/fiori3/src/lib/MultiComboBox.ts new file mode 100644 index 00000000000..f93bb8d7336 --- /dev/null +++ b/packages/fiori3/src/lib/MultiComboBox.ts @@ -0,0 +1,3 @@ +import { MultiComboBox } from '../webComponents/MultiComboBox'; + +export { MultiComboBox }; diff --git a/packages/fiori3/src/lib/Token.ts b/packages/fiori3/src/lib/Token.ts index 837b4867ed6..ac231c7d712 100644 --- a/packages/fiori3/src/lib/Token.ts +++ b/packages/fiori3/src/lib/Token.ts @@ -1,3 +1,3 @@ -import { Token } from '../components/Token'; +import { Token } from '../webComponents/Token'; export { Token }; diff --git a/packages/fiori3/src/lib/Tokenizer.ts b/packages/fiori3/src/lib/Tokenizer.ts index 31058d7b374..cc1dbb63bb9 100644 --- a/packages/fiori3/src/lib/Tokenizer.ts +++ b/packages/fiori3/src/lib/Tokenizer.ts @@ -1,3 +1,3 @@ -import { Tokenizer } from '../components/Tokenizer'; +import { Tokenizer } from '../webComponents/Tokenizer'; export { Tokenizer }; diff --git a/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx b/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx index 6bd4c4deaa9..7d67ca18990 100644 --- a/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx +++ b/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx @@ -8,7 +8,7 @@ import React from 'react'; storiesOf('UI5 Web Components | CheckBox', module).add('Default story', () => ( = withWebComponent(UI5C CheckBox.displayName = 'CheckBox'; CheckBox.defaultProps = { - text: '', // @generated valueState: ValueState.None // @generated }; diff --git a/packages/fiori3/src/webComponents/CustomListItem/index.tsx b/packages/fiori3/src/webComponents/CustomListItem/index.tsx index 90df1c69b51..64a53ce6976 100644 --- a/packages/fiori3/src/webComponents/CustomListItem/index.tsx +++ b/packages/fiori3/src/webComponents/CustomListItem/index.tsx @@ -14,7 +14,7 @@ const CustomListItem: FC = withWebComponent )); diff --git a/packages/fiori3/src/webComponents/DatePicker/index.tsx b/packages/fiori3/src/webComponents/DatePicker/index.tsx index bf863072bf9..b35dc83c169 100644 --- a/packages/fiori3/src/webComponents/DatePicker/index.tsx +++ b/packages/fiori3/src/webComponents/DatePicker/index.tsx @@ -1,8 +1,8 @@ -import { Event } from '@fiori-for-react/utils'; -import { CalendarType } from '../../lib/CalendarType'; +import React, { FC } from 'react'; import { ValueState } from '../../lib/ValueState'; +import { CalendarType } from '../../lib/CalendarType'; +import { Event } from '@fiori-for-react/utils'; import UI5DatePicker from '@ui5/webcomponents/dist/DatePicker'; -import React, { FC } from 'react'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; export interface DatePickerPropTypes extends WithWebComponentPropTypes { @@ -15,7 +15,7 @@ export interface DatePickerPropTypes extends WithWebComponentPropTypes { placeholder?: string; // @generated name?: string; // @generated onChange?: (event: Event) => void; // @generated - onLiveChange?: (event: Event) => void; // @generated + onInput?: (event: Event) => void; // @generated } const DatePicker: FC = withWebComponent(UI5DatePicker); @@ -23,9 +23,7 @@ const DatePicker: FC = withWebComponent ( = withWebComponent(UI5List); List.defaultProps = { - backgroundDesign: BackgroundDesign.Solid, headerText: '', footerText: '', mode: ListMode.None, diff --git a/packages/fiori3/src/webComponents/ListItem/index.tsx b/packages/fiori3/src/webComponents/ListItem/index.tsx index effbba0b735..41fc36d6f50 100644 --- a/packages/fiori3/src/webComponents/ListItem/index.tsx +++ b/packages/fiori3/src/webComponents/ListItem/index.tsx @@ -1,5 +1,5 @@ -import { ListItemTypes } from '../../lib/ListItemTypes'; import React, { FC } from 'react'; +import { ListItemTypes } from '../../lib/ListItemTypes'; import UI5ListItem from '@ui5/webcomponents/dist/ListItem'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; @@ -13,7 +13,7 @@ const ListItem: FC = withWebComponent(UI5L ListItem.displayName = 'ListItem'; ListItem.defaultProps = { - type: ListItemTypes.Inactive // @generated + type: ListItemTypes.Active // @generated }; export { ListItem }; diff --git a/packages/fiori3/src/webComponents/MultiComboBox/demo.stories.tsx b/packages/fiori3/src/webComponents/MultiComboBox/demo.stories.tsx new file mode 100644 index 00000000000..2e26e9e331e --- /dev/null +++ b/packages/fiori3/src/webComponents/MultiComboBox/demo.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { StandardListItem } from '../../lib/StandardListItem'; +import { ValueState } from '../../lib/ValueState'; +import { boolean, select, text } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; +import { MultiComboBox } from './index'; + +storiesOf('UI5 Web Components | MultiComboBox', module).add('Default story', () => ( + + Selection 1 + Selection 2 + Selection 3 + Selection 4 + Selection 5 + +)); diff --git a/packages/fiori3/src/webComponents/MultiComboBox/index.tsx b/packages/fiori3/src/webComponents/MultiComboBox/index.tsx new file mode 100644 index 00000000000..12796c47d98 --- /dev/null +++ b/packages/fiori3/src/webComponents/MultiComboBox/index.tsx @@ -0,0 +1,31 @@ +import React, { FC, ReactNode } from 'react'; +import { ValueState } from '../../lib/ValueState'; +import { Event } from '@fiori-for-react/utils'; +import UI5MultiComboBox from '@ui5/webcomponents/dist/MultiComboBox'; +import '@ui5/webcomponents/dist/InputSuggestions'; +import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; + +export interface MultiComboBoxPropTypes extends WithWebComponentPropTypes { + value?: string; // @generated + placeholder?: string; // @generated + validateInput?: boolean; // @generated + disabled?: boolean; // @generated + valueState?: ValueState; // @generated + readonly?: boolean; // @generated + onChange?: (event: Event) => void; // @generated + onInput?: (event: Event) => void; // @generated + onSelectionChange?: (event: Event) => void; // @generated + children?: ReactNode[]; // @generated +} + +const MultiComboBox: FC = withWebComponent(UI5MultiComboBox); + +MultiComboBox.displayName = 'MultiComboBox'; + +MultiComboBox.defaultProps = { + value: '', // @generated + placeholder: '', // @generated + valueState: ValueState.None // @generated +}; + +export { MultiComboBox }; diff --git a/packages/fiori3/src/webComponents/Panel/demo.stories.tsx b/packages/fiori3/src/webComponents/Panel/demo.stories.tsx index cd0e67b7ce5..ba2ce0b200e 100644 --- a/packages/fiori3/src/webComponents/Panel/demo.stories.tsx +++ b/packages/fiori3/src/webComponents/Panel/demo.stories.tsx @@ -1,4 +1,3 @@ -import { BackgroundDesign } from '../../lib/BackgroundDesign'; import { Panel } from '../../lib/Panel'; import { PanelAccessibleRoles } from '../../lib/PanelAccessibleRoles'; import { action } from '@storybook/addon-actions'; @@ -11,7 +10,6 @@ storiesOf('UI5 Web Components | Panel', module).add('Generated default story', ( headerText={'generatedString'} fixed={boolean('fixed', false)} collapsed={boolean('collapsed', false)} - backgroundDesign={select('backgroundDesign', BackgroundDesign, null)} accessibleRole={select('accessibleRole', PanelAccessibleRoles, null)} onToggle={action('onToggle')} header={null} diff --git a/packages/fiori3/src/webComponents/Panel/index.tsx b/packages/fiori3/src/webComponents/Panel/index.tsx index cb3355d4a03..551ab2aca49 100644 --- a/packages/fiori3/src/webComponents/Panel/index.tsx +++ b/packages/fiori3/src/webComponents/Panel/index.tsx @@ -1,5 +1,4 @@ import { Event } from '@fiori-for-react/utils'; -import { BackgroundDesign } from '../../lib/BackgroundDesign'; import { PanelAccessibleRoles } from '../../lib/PanelAccessibleRoles'; import UI5Panel from '@ui5/webcomponents/dist/Panel'; import React, { FC, ReactNode } from 'react'; @@ -9,7 +8,6 @@ export interface PanelPropTypes extends WithWebComponentPropTypes { headerText?: string; // @generated fixed?: boolean; // @generated collapsed?: boolean; // @generated - backgroundDesign?: BackgroundDesign; // @generated accessibleRole?: PanelAccessibleRoles; // @generated onToggle?: (event: Event) => void; // @generated header?: ReactNode; // @generated @@ -22,7 +20,6 @@ Panel.displayName = 'Panel'; Panel.defaultProps = { headerText: '', // @generated - backgroundDesign: BackgroundDesign.Solid, // @generated accessibleRole: PanelAccessibleRoles.Form // @generated }; diff --git a/packages/fiori3/src/webComponents/RadioButton/demo.stories.tsx b/packages/fiori3/src/webComponents/RadioButton/demo.stories.tsx index 610eb87c09e..a262fad573d 100644 --- a/packages/fiori3/src/webComponents/RadioButton/demo.stories.tsx +++ b/packages/fiori3/src/webComponents/RadioButton/demo.stories.tsx @@ -11,11 +11,10 @@ storiesOf('UI5 Web Components | RadioButton', module).add( () => ( ), diff --git a/packages/fiori3/src/webComponents/RadioButton/index.tsx b/packages/fiori3/src/webComponents/RadioButton/index.tsx index 6083356b8ed..a7b1399a142 100644 --- a/packages/fiori3/src/webComponents/RadioButton/index.tsx +++ b/packages/fiori3/src/webComponents/RadioButton/index.tsx @@ -1,16 +1,17 @@ -import { Event } from '@fiori-for-react/utils'; +import React, { FC } from 'react'; import { ValueState } from '../../lib/ValueState'; +import { Event } from '@fiori-for-react/utils'; import UI5RadioButton from '@ui5/webcomponents/dist/RadioButton'; -import React, { FC } from 'react'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; export interface RadioButtonPropTypes extends WithWebComponentPropTypes { disabled?: boolean; // @generated - readOnly?: boolean; // @generated + readonly?: boolean; // @generated selected?: boolean; // @generated text?: string; // @generated valueState?: ValueState; // @generated - group?: string; // @generated + name?: string; // @generated + value?: string; // @generated onSelect?: (event: Event) => void; // @generated } @@ -19,9 +20,7 @@ const RadioButton: FC = withWebComponent = withWebComponent(UI5Select) Select.displayName = 'Select'; Select.defaultProps = { - disabled: false, // @generated valueState: ValueState.None // @generated }; diff --git a/packages/fiori3/src/webComponents/ShellBar/index.tsx b/packages/fiori3/src/webComponents/ShellBar/index.tsx index 2aa16e13098..cf14bf6a0be 100644 --- a/packages/fiori3/src/webComponents/ShellBar/index.tsx +++ b/packages/fiori3/src/webComponents/ShellBar/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactNode } from 'react'; +import React, { FC, ReactNode, ReactNodeArray } from 'react'; import { Event } from '@fiori-for-react/utils'; import UI5ShellBar from '@ui5/webcomponents/dist/ShellBar'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; @@ -18,8 +18,8 @@ export interface ShellBarPropTypes extends WithWebComponentPropTypes { onLogoPress?: (event: Event) => void; // @generated onCoPilotPress?: (event: Event) => void; // @generated onMenuItemPress?: (event: Event) => void; // @generated - children?: ReactNode | ReactNode[]; // @generated - menuItems?: ReactNode | ReactNode[]; // @generated + children?: ReactNode | ReactNodeArray; // @generated + menuItems?: ReactNode | ReactNodeArray; // @generated searchField?: ReactNode; // @generated icon?: ReactNode; // @generated } @@ -30,8 +30,6 @@ ShellBar.displayName = 'ShellBar'; ShellBar.defaultProps = { logo: null, // @generated - primaryTitle: '', // @generated - secondaryTitle: '', // @generated profile: '' // @generated }; diff --git a/packages/fiori3/src/webComponents/ShellBarItem/index.tsx b/packages/fiori3/src/webComponents/ShellBarItem/index.tsx index 1c7525d0b38..d6776008b7c 100644 --- a/packages/fiori3/src/webComponents/ShellBarItem/index.tsx +++ b/packages/fiori3/src/webComponents/ShellBarItem/index.tsx @@ -14,8 +14,7 @@ const ShellBarItem: FC = withWebComponent = withWebComponent(UI5Tab); @@ -18,9 +18,7 @@ const Tab: FC = withWebComponent(UI5Tab); Tab.displayName = 'Tab'; Tab.defaultProps = { - text: '', // @generated disabled: false, // @generated - additionalText: '', // @generated icon: '', // @generated iconColor: IconColor.Default, // @generated selected: false // @generated diff --git a/packages/fiori3/src/webComponents/TableColumn/index.tsx b/packages/fiori3/src/webComponents/TableColumn/index.tsx index 979cb6efa03..5f12e764379 100644 --- a/packages/fiori3/src/webComponents/TableColumn/index.tsx +++ b/packages/fiori3/src/webComponents/TableColumn/index.tsx @@ -16,7 +16,6 @@ TableColumn.displayName = 'TableColumn'; TableColumn.defaultProps = { minWidth: Infinity, // @generated - popinText: '', // @generated width: '' // @generated }; diff --git a/packages/fiori3/src/webComponents/TextArea/index.tsx b/packages/fiori3/src/webComponents/TextArea/index.tsx index a75920548a4..7a90be15eb7 100644 --- a/packages/fiori3/src/webComponents/TextArea/index.tsx +++ b/packages/fiori3/src/webComponents/TextArea/index.tsx @@ -22,12 +22,8 @@ const TextArea: FC = withWebComponent(UI5T TextArea.displayName = 'TextArea'; TextArea.defaultProps = { - value: '', // @generated - placeholder: '', // @generated rows: 0, // @generated maxLength: null, // @generated - showExceededText: false, // @generated - growing: false, // @generated growingMaxLines: 0 // @generated }; diff --git a/packages/fiori3/src/webComponents/TimelineItem/index.tsx b/packages/fiori3/src/webComponents/TimelineItem/index.tsx index db0c5416020..9cc77b30d41 100644 --- a/packages/fiori3/src/webComponents/TimelineItem/index.tsx +++ b/packages/fiori3/src/webComponents/TimelineItem/index.tsx @@ -18,10 +18,7 @@ const TimelineItem: FC = withWebComponent ( + + Token 1 + +)); diff --git a/packages/fiori3/src/webComponents/Token/index.tsx b/packages/fiori3/src/webComponents/Token/index.tsx new file mode 100644 index 00000000000..31003d4ab1d --- /dev/null +++ b/packages/fiori3/src/webComponents/Token/index.tsx @@ -0,0 +1,18 @@ +import { Event } from '@fiori-for-react/utils'; +import UI5Token from '@ui5/webcomponents/dist/Token'; +import React, { FC, ReactNode, ReactNodeArray } from 'react'; +import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; + +export interface TokenPropTypes extends WithWebComponentPropTypes { + selected?: boolean; // @generated + readonly?: boolean; // @generated + onDelete?: (event: Event) => void; // @generated + onSelect?: (event: Event) => void; // @generated + children?: ReactNode | ReactNodeArray; // @generated +} + +const Token: FC = withWebComponent(UI5Token); + +Token.displayName = 'Token'; + +export { Token }; diff --git a/packages/fiori3/src/webComponents/Tokenizer/demo.stories.tsx b/packages/fiori3/src/webComponents/Tokenizer/demo.stories.tsx new file mode 100644 index 00000000000..f65d88e9d8d --- /dev/null +++ b/packages/fiori3/src/webComponents/Tokenizer/demo.stories.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { boolean } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; +import { Token } from '../../lib/Token'; +import { Tokenizer } from './index'; + +storiesOf('UI5 Web Components | Tokenizer', module).add('Default story', () => ( + + Token 1 + Token 2 + Token 3 + +)); diff --git a/packages/fiori3/src/webComponents/Tokenizer/index.tsx b/packages/fiori3/src/webComponents/Tokenizer/index.tsx new file mode 100644 index 00000000000..3c9b5a6f948 --- /dev/null +++ b/packages/fiori3/src/webComponents/Tokenizer/index.tsx @@ -0,0 +1,18 @@ +import React, { FC, ReactNode } from 'react'; +import { Event } from '@fiori-for-react/utils'; +import UI5Tokenizer from '@ui5/webcomponents/dist/Tokenizer'; +import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; + +export interface TokenizerPropTypes extends WithWebComponentPropTypes { + showMore?: boolean; // @generated + disabled?: boolean; // @generated + onTokenDelete?: (event: Event) => void; // @generated + onShowMoreItemsPress?: (event: Event) => void; // @generated + children?: ReactNode[]; // @generated +} + +const Tokenizer: FC = withWebComponent(UI5Tokenizer); + +Tokenizer.displayName = 'Tokenizer'; + +export { Tokenizer }; diff --git a/yarn.lock b/yarn.lock index 7e828b9ca95..8c874760866 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2671,28 +2671,28 @@ resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916" integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw== -"@ui5/webcomponents-base@0.10.1": - version "0.10.1" - resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.10.1.tgz#6fdc6f627db921ab91e82862099f4e057aacaab5" - integrity sha512-6HVZfnygNObXiqqMXmLu1C3w5VfN2l2In9dVG7+wqRq1XMsv61Lh5aFct6Y2YHKQRQgoQBYSa0vQpL9PjT4q8g== +"@ui5/webcomponents-base@0.11.0": + version "0.11.0" + resolved "https://registry.yarnpkg.com/@ui5/webcomponents-base/-/webcomponents-base-0.11.0.tgz#810c37b255d6f725605169cb24f3a1158a27e166" + integrity sha512-IVzgXzUNEq8jsWOnWWBdB4xY3Me+awXBpmNvubkgP4rrLTrCZ5qKUZXzSZGrMKiQQKJ1WrdcLbXEc1XOTam2Bw== dependencies: - "@ui5/webcomponents-core" "0.10.1" + "@ui5/webcomponents-core" "0.11.0" lit-html "^1.0.0" regenerator-runtime "0.12.1" url-search-params-polyfill "^5.0.0" -"@ui5/webcomponents-core@0.10.1": - version "0.10.1" - resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.10.1.tgz#4ef02fd716e1d1787bfd187a7f081aacc15ff081" - integrity sha512-n4Y38F1yTp8QKxHB11MJ4wLEfNl/uUXWMD0NdVrQFLV1vrMBGRP/5YWzZrX3xLzGOMLTZvuHiW4ol8gJCc+bLQ== +"@ui5/webcomponents-core@0.11.0": + version "0.11.0" + resolved "https://registry.yarnpkg.com/@ui5/webcomponents-core/-/webcomponents-core-0.11.0.tgz#97aa99155d8ae50e344ef5bb99b263542e9bed64" + integrity sha512-akgKnF2s2mM4yQmjwYX3GVbddChL8+Z2JiJrdctxoGaSbTJXw7I/SgP1ZYq6VuZ5k+mOQrYm5jMiS0YCz3bzDg== -"@ui5/webcomponents@0.10.1": - version "0.10.1" - resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-0.10.1.tgz#a1d7ce251266b4ec33a28dfba85a60e68c0f585a" - integrity sha512-6LXO6mrs6eqD3+sReQBiOIkWhUF6KJdSw+d9EjuDxxFaOxfhUvIIkx/TupMBVtqCpmfkyW3AK1dqnVSy5m4LTg== +"@ui5/webcomponents@0.11.0": + version "0.11.0" + resolved "https://registry.yarnpkg.com/@ui5/webcomponents/-/webcomponents-0.11.0.tgz#ac012855bc6cf4df3ee8bc8f37bfb64aea1f4aa9" + integrity sha512-a30Zy7oGHZ0DAxVVRoQdkdGlhDLMLyZjsK6JqrU8mpE2eYlP1wK4mj1PxwTy0v3FXm9r8gl/M99TB2DxVVI6BQ== dependencies: - "@ui5/webcomponents-base" "0.10.1" - "@ui5/webcomponents-core" "0.10.1" + "@ui5/webcomponents-base" "0.11.0" + "@ui5/webcomponents-core" "0.11.0" "@webassemblyjs/ast@1.8.5": version "1.8.5"