Fixed #160

primefaces · Oct 25, 2017 · b056da2 · b056da2
1 parent 3cad697
commit b056da2
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 7 deletions.
diff --git a/src/components/progressbar/ProgressBar.css b/src/components/progressbar/ProgressBar.css
@@ -2,26 +2,105 @@
     height: 1.2em; 
     text-align: left; 
     position: relative;
+    overflow: hidden;
 }
 
-.ui-progressbar .ui-progressbar-value {
+.ui-progressbar-determinate .ui-progressbar-value {
     height: 100%;
     width: 0%;
     position: absolute;
+    display: none;
     border: 0 none;
 }
 
-.ui-progressbar .ui-progressbar-value-animate {
+.ui-progressbar-determinate .ui-progressbar-value-animate {
     -webkit-transition: width 1s ease-in-out;
     -moz-transition: width 1s ease-in-out;
     -o-transition: width 1s ease-in-out;
     transition: width 1s ease-in-out;
 }
 
-.ui-progressbar .ui-progressbar-label {
+.ui-progressbar-determinate .ui-progressbar-label {
     text-align: center;
     height: 100%;
     width: 100%;
     position: absolute;
+    display: none;
     font-weight: bold;
+}
+
+.ui-progressbar-indeterminate .ui-progressbar-value {
+    border: 0 none;
+}
+
+.ui-progressbar-indeterminate .ui-progressbar-value:before {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: ui-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    animation: ui-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.ui-progressbar-indeterminate .ui-progressbar-value:after {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: ui-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation: ui-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 ui-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%; }
+    60% {
+        left: 100%;
+        right: -90%; }
+    100% {
+        left: 100%;
+        right: -90%; }
+}
+@keyframes ui-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%; }
+    60% {
+        left: 100%;
+        right: -90%; }
+    100% {
+        left: 100%;
+        right: -90%; }
+}
+
+@-webkit-keyframes ui-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%; }
+    60% {
+        left: 107%;
+        right: -8%; }
+    100% {
+        left: 107%;
+        right: -8%; }
+}
+@keyframes ui-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%; }
+    60% {
+        left: 107%;
+        right: -8%; }
+    100% {
+        left: 107%;
+        right: -8%; }
 }
diff --git a/src/components/progressbar/ProgressBar.d.ts b/src/components/progressbar/ProgressBar.d.ts
@@ -7,6 +7,7 @@ interface ProgressBarProps {
     unit?: string;
     style?: object;
     className?: string;
+    mode?: string
 }
 
 export class ProgressBar extends React.Component<ProgressBarProps,any> {}
diff --git a/src/components/progressbar/ProgressBar.js b/src/components/progressbar/ProgressBar.js
@@ -10,7 +10,8 @@ export class ProgressBar extends Component {
         showValue: true,
         unit: '%',
         style: null,
-        className: null
+        className: null,
+        mode: 'determinate'
     }
 
     static propTypes = {
@@ -20,17 +21,18 @@ export class ProgressBar extends Component {
         unit: PropTypes.string,
         style: PropTypes.object,
         className: PropTypes.string,
+        mode: PropTypes.string
     };
 
     render() {
-        var className = classNames('ui-progressbar ui-widget ui-widget-content ui-corner-all', this.props.className);
+        var className = classNames('ui-progressbar ui-widget ui-widget-content ui-corner-all', this.props.className, {'ui-progressbar-determinate': (this.props.mode === 'determinate'), 'ui-progressbar-indeterminate': (this.props.mode === 'indeterminate')});
         if(this.props.showValue) {
             var label = <div className="ui-progressbar-label" style={{display: this.props.value ? 'block' : 'none'}}>{this.props.value + this.props.unit}</div>;
         } 
 
         return (
             <div id={this.props.id} className={className} role="progressbar" aria-valuemin="0" aria-valuenow={this.props.value} aria-valuemax="100" style={this.props.style}>
-                <div className="ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all" style={{width: this.props.value + '%'}}></div>
+                <div className="ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all" style={{width: this.props.value + '%', display: 'block'}}></div>
                 {label}
             </div>
         );

diff --git a/src/showcase/progressbar/ProgressBarDemo.js b/src/showcase/progressbar/ProgressBarDemo.js
@@ -49,6 +49,9 @@ export class ProgressBarDemo extends Component {
 
                     <h3>Static</h3>
                     <ProgressBar value={this.state.value2}></ProgressBar>
+
+                    <h3>Indeterminate</h3>
+                    <ProgressBar mode="indeterminate" style={{height: '6px'}}></ProgressBar>
                 </div>
                 <ProgressBarDoc></ProgressBarDoc>
             </div>
@@ -76,14 +79,20 @@ import {ProgressBar} from 'primereact/components/progressbar/ProgressBar';
 </CodeHighlight>
 
             <h3>Getting Started</h3>
-            <p>ProgressBar requires a value between 0 and 100 to display the progress.</p>
+            <p>ProgressBar has two modes; "determinate" and "indeterminate". ProgressBar requires a value between 0 and 100 to display the progress.</p>
 <CodeHighlight className="html">
 {`
 <ProgressBar value={this.state.value1}></ProgressBar>
 
 `}
 </CodeHighlight>
+                        <p>Indeterminate has no such a requirement and is simple enabled using mode property.</p>
+                        <CodeHighlight className="html">
+                            {`
+<ProgressBar mode="indeterminate"></ProgressBar>
 
+`}
+                        </CodeHighlight>
 <CodeHighlight className="javascript">
 {`
 constructor() {
@@ -155,6 +164,12 @@ componentDidMount() {
                             <td>null</td>
                             <td>Style class of the element.</td>
                         </tr>
+                        <tr>
+                            <td>mode</td>
+                            <td>string</td>
+                            <td>determinate</td>
+                            <td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -174,6 +189,14 @@ componentDidMount() {
                             <td>ui-progressbar</td>
                             <td>Container element.</td>
                         </tr>
+                        <tr>
+                            <td>ui-progressbar-determinate</td>
+                            <td>Container element of a determinate progressbar.</td>
+                        </tr>
+                        <tr>
+                            <td>ui-progressbar-indeterminate</td>
+                            <td>Container element of an indeterminate progressbar.</td>
+                        </tr>
                         <tr>
                             <td>ui-progressbar-value</td>
                             <td>Element whose width changes according to value.</td>
@@ -236,6 +259,9 @@ export class ProgressBarDemo extends Component {
 
                     <h3>Static</h3>
                     <ProgressBar value={this.state.value2}></ProgressBar>
+
+                    <h3>Indeterminate</h3>
+                    <ProgressBar mode="indeterminate" style={{height: '6px'}}></ProgressBar>
                 </div>
                 <ProgressBarDoc></ProgressBarDoc>
             </div>