From 100e6ffe2f81a0b5038909e3afd80735bf6893e4 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Wed, 18 Sep 2019 07:59:33 +0200 Subject: [PATCH] refactor(ProgressIndicator): Remove visible prop (#126) BREAKING CHANGE: removed `visible` prop [ci skip] --- .../ProgressIndicator.jss.ts | 10 +- .../ProgressIndicator.test.tsx | 2 +- .../ProgressIndicator.test.tsx.snap | 68 ++++---- .../ProgressIndicator/demo.stories.tsx | 11 +- .../components/ProgressIndicator/index.tsx | 159 +++++++----------- 5 files changed, 111 insertions(+), 139 deletions(-) diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts index 459447a9730..80c0498566e 100644 --- a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts +++ b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts @@ -1,6 +1,6 @@ import { fonts } from '@ui5/webcomponents-react-base'; -import { JSSTheme } from '../../interfaces/JSSTheme'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; +import { JSSTheme } from '../../interfaces/JSSTheme'; const styles = ({ parameters }: JSSTheme) => { return { @@ -17,9 +17,6 @@ const styles = ({ parameters }: JSSTheme) => { progressBarTextLeft: { marginRight: '0.375rem' }, - invisible: { - display: 'none !important' - }, wrapper: { display: 'flex', flexDirection: 'row', @@ -28,7 +25,7 @@ const styles = ({ parameters }: JSSTheme) => { outline: 'none', background: parameters.sapUiFieldBackground, width: '100%', - height: '1rem', + height: '1.5rem', minWidth: '4rem', minHeight: '1rem', padding: '0', @@ -37,6 +34,9 @@ const styles = ({ parameters }: JSSTheme) => { borderRadius: '0.5rem', overflow: 'hidden' }, + compact: { + height: '1.125rem' + }, progressbar: { transition: 'flex-basis 1s', justifyContent: 'flex-end', diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx b/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx index 7d7c35e711d..5f368c12854 100644 --- a/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx +++ b/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx @@ -1,8 +1,8 @@ import { mountThemedComponent } from '@shared/tests/utils'; -import React from 'react'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; +import React from 'react'; const testFactory = () => { Object.values(ValueState).forEach((state) => { diff --git a/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap index 49759b0941d..0b3a8a0bedb 100644 --- a/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +++ b/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap @@ -2,18 +2,18 @@ exports[`ProgressIndicator Custom 1`] = `
sdf @@ -23,18 +23,18 @@ exports[`ProgressIndicator Custom 1`] = ` exports[`ProgressIndicator ProgressIndicator with state Error 1`] = `
@@ -44,18 +44,18 @@ exports[`ProgressIndicator ProgressIndicator with state Error 1`] = ` exports[`ProgressIndicator ProgressIndicator with state Information 1`] = `
@@ -65,18 +65,18 @@ exports[`ProgressIndicator ProgressIndicator with state Information 1`] = ` exports[`ProgressIndicator ProgressIndicator with state None 1`] = `
@@ -86,18 +86,18 @@ exports[`ProgressIndicator ProgressIndicator with state None 1`] = ` exports[`ProgressIndicator ProgressIndicator with state Success 1`] = `
@@ -107,18 +107,18 @@ exports[`ProgressIndicator ProgressIndicator with state Success 1`] = ` exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = `
@@ -128,21 +128,21 @@ exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = ` exports[`ProgressIndicator State 1`] = `
`; diff --git a/packages/main/src/components/ProgressIndicator/demo.stories.tsx b/packages/main/src/components/ProgressIndicator/demo.stories.tsx index ce34303cfe1..1cf0175380a 100644 --- a/packages/main/src/components/ProgressIndicator/demo.stories.tsx +++ b/packages/main/src/components/ProgressIndicator/demo.stories.tsx @@ -1,11 +1,18 @@ import React from 'react'; -import { ValueState } from '../..'; +import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator'; +import { number, text, select } from '@storybook/addon-knobs'; export const renderStory = () => { return (
- + diff --git a/packages/main/src/components/ProgressIndicator/index.tsx b/packages/main/src/components/ProgressIndicator/index.tsx index 341c286b392..e3edc6f7af3 100644 --- a/packages/main/src/components/ProgressIndicator/index.tsx +++ b/packages/main/src/components/ProgressIndicator/index.tsx @@ -1,10 +1,10 @@ -import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; -import React, { PureComponent } from 'react'; +import { StyleClassHelper } from '@ui5/webcomponents-react-base'; +import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; -import { ClassProps } from '../../interfaces/ClassProps'; +import React, { forwardRef, Ref, useMemo } from 'react'; +import { createUseStyles, useTheme } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; -import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import styles from './ProgressIndicator.jss'; export interface ProgressIndicatorPropTypes extends CommonProps { @@ -17,11 +17,6 @@ export interface ProgressIndicatorPropTypes extends CommonProps { */ displayValue?: string; - /* - * Flag to make component invisible - */ - visible?: boolean; - /* * Specified width of component */ @@ -38,93 +33,63 @@ export interface ProgressIndicatorPropTypes extends CommonProps { state?: ValueState; } -interface ProgressIndicatorInternalProps extends ProgressIndicatorPropTypes, ClassProps { - theme: JSSTheme; -} +const useStyles = createUseStyles>(styles, { name: 'ProgressIndicator' }); -@withStyles(styles) -export class ProgressIndicator extends PureComponent { - static defaultProps = { - percentValue: 0, - displayValue: '', - visible: true, - width: 'auto', - height: '', - state: 'None' - }; - - render() { - const { - percentValue, - displayValue, - visible, - width, - height, - classes, - theme, - className, - style, - tooltip, - state, - innerRef, - slot - } = this.props as ProgressIndicatorInternalProps; - - // CSS classes - const wrapperClasses = StyleClassHelper.of(classes.wrapper); - const progressBarClasses = StyleClassHelper.of(classes.progressbar); - const progressBarTextClasses = StyleClassHelper.of(classes.progressBarText); - const progressBarContainerStyle = { width, height }; - const progressBarStyle = { flexBasis: `${percentValue}%` }; - - // change content density - switch (theme.contentDensity) { - case ContentDensity.Cozy: - progressBarContainerStyle.height = height || '1.5rem'; - wrapperClasses.put(classes.cozy); - break; - default: - progressBarContainerStyle.height = height || '1.125rem'; - wrapperClasses.put(classes.compact); - } - - // change text color based on percent value - if (percentValue <= 50) { - progressBarTextClasses.put(classes.progressBarTextColorLow); - progressBarTextClasses.put(classes.progressBarTextRight); - } else { - progressBarTextClasses.put(classes.progressBarTextColorHigh); - progressBarTextClasses.put(classes.progressBarTextLeft); - } - - // visibility handling - if (!visible) wrapperClasses.put(classes.invisible); - - const progressBarTextSpan = {displayValue} ; - - progressBarClasses.put(classes[`state${state}`]); - - if (className) { - wrapperClasses.put(className); - } - - if (style) { - Object.assign(progressBarContainerStyle, style); - } - - return ( -
-
- {percentValue <= 50 ? null : progressBarTextSpan} -
-
{percentValue <= 50 ? progressBarTextSpan : null}
-
- ); +const ProgressIndicator = forwardRef((props: ProgressIndicatorPropTypes, ref: Ref) => { + const { percentValue, displayValue, width, height, className, style, tooltip, state, slot } = props; + + const classes = useStyles(); + + // CSS classes + const wrapperClasses = StyleClassHelper.of(classes.wrapper); + const progressBarClasses = StyleClassHelper.of(classes.progressbar); + const progressBarTextClasses = StyleClassHelper.of(classes.progressBarText); + + const progressBarStyle = { flexBasis: `${percentValue}%` }; + + // change content density + const theme = useTheme() as JSSTheme; + if (theme.contentDensity === ContentDensity.Compact) { + wrapperClasses.put(classes.compact); } -} + + // change text color based on percent value + if (percentValue <= 50) { + progressBarTextClasses.put(classes.progressBarTextColorLow); + progressBarTextClasses.put(classes.progressBarTextRight); + } else { + progressBarTextClasses.put(classes.progressBarTextColorHigh); + progressBarTextClasses.put(classes.progressBarTextLeft); + } + + const progressBarTextSpan = {displayValue} ; + + progressBarClasses.put(classes[`state${state}`]); + + if (className) { + wrapperClasses.put(className); + } + + const progressBarContainerStyle = useMemo(() => ({ ...style, width, height }), [style, width, height]); + + return ( +
+
+ {percentValue <= 50 ? null : progressBarTextSpan} +
+
{percentValue <= 50 ? progressBarTextSpan : null}
+
+ ); +}); + +ProgressIndicator.displayName = 'ProgressIndicator'; + +ProgressIndicator.defaultProps = { + percentValue: 0, + displayValue: '', + width: 'auto', + height: '', + state: ValueState.None +}; + +export { ProgressIndicator };