Skip to content

Commit

Permalink
Refactor #4602 - For ProgressBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulasturann
ulasturann committed Jul 18, 2023
1 parent 793daf5 commit 66dda8d
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 109 deletions.
96 changes: 0 additions & 96 deletions components/lib/progressbar/ProgressBar.css
View file

This file was deleted.

26 changes: 14 additions & 12 deletions components/lib/progressbar/ProgressBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import * as React from 'react';
import { classNames, mergeProps } from '../utils/Utils';
import { mergeProps } from '../utils/Utils';
import { ProgressBarBase } from './ProgressBarBase';
import { PrimeReactContext } from '../api/Api';
import { useStyle } from '../hooks/Hooks';

export const ProgressBar = React.memo(
React.forwardRef((inProps, ref) => {
const context = React.useContext(PrimeReactContext);
const props = ProgressBarBase.getProps(inProps, context);
const { ptm } = ProgressBarBase.setMetaData({
const { ptm, cx, sx } = ProgressBarBase.setMetaData({
props
});

useStyle(ProgressBarBase.css.styles, { name: 'progressbar' });

const elementRef = React.useRef(null);

const createLabel = () => {
Expand All @@ -23,13 +27,12 @@ export const ProgressBar = React.memo(
};

const createDeterminate = () => {
const className = classNames('p-progressbar p-component p-progressbar-determinate', props.className);
const label = createLabel();
const rootProps = mergeProps(
{
id: props.id,
ref: elementRef,
className,
className: cx('root'),

This comment has been minimized.

Sign in to view

Copy link
@Kimblis

Kimblis Oct 2, 2023

You left a bug here :) @ulasturann now the className passed through the props are not getting applied
style: props.style,
role: 'progressbar',
'aria-valuemin': '0',
Expand All @@ -41,15 +44,15 @@ export const ProgressBar = React.memo(
);
const valueProps = mergeProps(
{
className: 'p-progressbar-value p-progressbar-value-animate',
style: { width: props.value + '%', display: 'flex', backgroundColor: props.color }
className: cx('value'),
style: sx('value')
},
ptm('value')
);

const labelProps = mergeProps(
{
className: 'p-progressbar-label'
className: cx('label')
},
ptm('label')
);
Expand All @@ -62,12 +65,11 @@ export const ProgressBar = React.memo(
};

const createIndeterminate = () => {
const className = classNames('p-progressbar p-component p-progressbar-indeterminate', props.className);
const rootProps = mergeProps(
{
id: props.id,
ref: elementRef,
className,
className: cx('root'),
style: props.style,
role: 'progressbar'
},
Expand All @@ -77,15 +79,15 @@ export const ProgressBar = React.memo(

const indeterminateContainerProps = mergeProps(
{
className: 'p-progressbar-indeterminate-container'
className: cx('indeterminateContainer')
},
ptm('indeterminateContainer')
);

const valueProps = mergeProps(
{
className: 'p-progressbar-value p-progressbar-value-animate',
style: { backgroundColor: props.color }
className: cx('value'),
style: sx('value')
},
ptm('value')
);
Expand Down
115 changes: 115 additions & 0 deletions components/lib/progressbar/ProgressBarBase.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,114 @@
import { ComponentBase } from '../componentbase/ComponentBase';
import { classNames } from '../utils/utils';

const classes = {
root: ({ props }) => props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate', props.className) : classNames('p-progressbar p-component p-progressbar-determinate', props.className),
value: 'p-progressbar-value p-progressbar-value-animate',
label: 'p-progressbar-label',
indeterminateContainer: 'p-progressbar-indeterminate-container'
}
const styles = `
.p-progressbar {
position: relative;
overflow: hidden;
}
.p-progressbar-determinate .p-progressbar-value {
height: 100%;
width: 0%;
position: absolute;
display: none;
border: 0 none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.p-progressbar-determinate .p-progressbar-label {
display: inline-flex;
}
.p-progressbar-determinate .p-progressbar-value-animate {
transition: width 1s ease-in-out;
}
.p-progressbar-indeterminate .p-progressbar-value::before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.p-progressbar-indeterminate .p-progressbar-value::after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
@-webkit-keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; }
}
@keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; }
}
@-webkit-keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; }
}
@keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; }
}
`

const inlineStyles = {
value: ({ props }) => (props.mode === "indeterminate" ? { backgroundColor: props.color } : { width: props.value + '%', display: 'flex', backgroundColor: props.color })
}

export const ProgressBarBase = ComponentBase.extend({
defaultProps: {
Expand All @@ -13,5 +123,10 @@ export const ProgressBarBase = ComponentBase.extend({
displayValueTemplate: null,
color: null,
children: undefined
},
css: {
classes,
styles,
inlineStyles
}
});
5 changes: 5 additions & 0 deletions components/lib/progressbar/progressbar.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@ export interface ProgressBarProps extends Omit<React.DetailedHTMLProps<React.HTM
* @type {ProgressBarPassThroughOptions}
*/
pt?: ProgressBarPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
Expand Down
1 change: 0 additions & 1 deletion styles/primereact.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
@import "../components/lib/paginator/Paginator.css";
@import "../components/lib/panelmenu/PanelMenu.css";
@import "../components/lib/picklist/PickList.css";
@import "../components/lib/progressbar/ProgressBar.css";
@import "../components/lib/progressspinner/ProgressSpinner.css";
@import "../components/lib/sidebar/Sidebar.css";
@import "../components/lib/slidemenu/SlideMenu.css";
Expand Down

1 comment on commit 66dda8d

@Kimblis
Copy link

@Kimblis Kimblis commented on 66dda8d Oct 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't leave bugs

Please sign in to comment.