Merge branch 'master' of https://github.com/primefaces/primereact

Author: cagataycivici

CHANGELOG.md

@@ -1,5 +1,69 @@
 # Changelog
 
+## [5.0.0-rc.1](https://github.com/primefaces/primereact/tree/5.0.0-rc.1) (2020-08-20)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.2.2...5.0.0-rc.1)
+
+**Breaking changes:**
+
+- Change the values of position property on Dialog [\#1516](https://github.com/primefaces/primereact/issues/1516)
+- Rename iconsTemplate property to icons property on Dialog [\#1514](https://github.com/primefaces/primereact/issues/1514)
+- Rename iconsTemplate property to icons property on Sidebar [\#1513](https://github.com/primefaces/primereact/issues/1513)
+- Rename Growl component to Toast component [\#1512](https://github.com/primefaces/primereact/issues/1512)
+- Change some property names on Galleria [\#1503](https://github.com/primefaces/primereact/issues/1503)
+- Label Nova, Luna and Rhea as Legacy Themes [\#1501](https://github.com/primefaces/primereact/issues/1501)
+- Change the values of position property on Growl [\#1497](https://github.com/primefaces/primereact/issues/1497)
+- Remove responsive property from OrderList [\#1494](https://github.com/primefaces/primereact/issues/1494)
+- Remove responsive property from PickList [\#1493](https://github.com/primefaces/primereact/issues/1493)
+- Replace dotsContainerClassName with indicatorsContentClassName property on Carousel [\#1491](https://github.com/primefaces/primereact/issues/1491)
+- Remove Spinner Component [\#1488](https://github.com/primefaces/primereact/issues/1488)
+- Remove Lightbox component [\#1487](https://github.com/primefaces/primereact/issues/1487)
+- Migrate to PrimeOne Design Architecture [\#1484](https://github.com/primefaces/primereact/issues/1484)
+- Remove responsive attribute from DataTable [\#1250](https://github.com/primefaces/primereact/issues/1250)
+
+**Implemented New Features and Enhancements:**
+
+- Add emptyTemplate property to FileUpload [\#1508](https://github.com/primefaces/primereact/issues/1508)
+- New Component: Ripple [\#1507](https://github.com/primefaces/primereact/issues/1507)
+- Add index parameter to onRowEditInit and onRowSave callbacks on DataTable [\#1505](https://github.com/primefaces/primereact/issues/1505)
+- Add onEditorInit callback for cell editing mode to Column [\#1504](https://github.com/primefaces/primereact/issues/1504)
+- Add left and right properties to Toolbar [\#1502](https://github.com/primefaces/primereact/issues/1502)
+- Material Theme [\#1500](https://github.com/primefaces/primereact/issues/1500)
+- Bootstrap Theme  [\#1499](https://github.com/primefaces/primereact/issues/1499)
+- Add start and end properties to Menubar [\#1498](https://github.com/primefaces/primereact/issues/1498)
+- Add valueTemplate property to Dropdown [\#1496](https://github.com/primefaces/primereact/issues/1496)
+- Add iconPos property to ToggleButton [\#1495](https://github.com/primefaces/primereact/issues/1495)
+- Add badge and badgeClassName properties to Button [\#1490](https://github.com/primefaces/primereact/issues/1490)
+- Add Badge styles to core css [\#1489](https://github.com/primefaces/primereact/issues/1489)
+- Improved Overlay Animations [\#1486](https://github.com/primefaces/primereact/issues/1486)
+- PrimeOne Themes [\#1485](https://github.com/primefaces/primereact/issues/1485)
+- Label Nova, Luna and Rhea as Legacy Themes [\#1483](https://github.com/primefaces/primereact/issues/1483)
+- Add contentClassName property to Dialog [\#1455](https://github.com/primefaces/primereact/issues/1455)
+- Add listClassName property to Listbox [\#1454](https://github.com/primefaces/primereact/issues/1454)
+- Change onSlideEnd callback param on Slider [\#1437](https://github.com/primefaces/primereact/issues/1437)
+- Improve Tooltip implementation [\#1436](https://github.com/primefaces/primereact/issues/1436)
+- Add onValueChange property to InputNumber [\#1418](https://github.com/primefaces/primereact/issues/1418)
+- It is impossible to type fractional digits on InputNumber [\#1380](https://github.com/primefaces/primereact/issues/1380)
+- Remove browserslist, leave processing and transpilation to applications [\#1312](https://github.com/primefaces/primereact/issues/1312)
+- Custom content support for Button [\#1258](https://github.com/primefaces/primereact/issues/1258)
+
+**Fixed bugs:**
+
+- Global filter is not working with invalid values on TreeTable [\#1517](https://github.com/primefaces/primereact/issues/1517)
+- Captcha throws a JS exception [\#1509](https://github.com/primefaces/primereact/issues/1509)
+- Calendar with appendTo property isn't working as expected [\#1506](https://github.com/primefaces/primereact/issues/1506)
+- Chart does not update when its options and type properties change [\#1492](https://github.com/primefaces/primereact/issues/1492)
+- Dynamic options breaks InputNumber [\#1470](https://github.com/primefaces/primereact/issues/1470)
+- DatePicker Milliseconds jumps from 000 to 199 [\#1456](https://github.com/primefaces/primereact/issues/1456)
+- Typing for selectedItemTemplate in AutoComplete is wrong [\#1428](https://github.com/primefaces/primereact/issues/1428)
+- Can't type - as first symbol into an Inputnumber [\#1427](https://github.com/primefaces/primereact/issues/1427)
+- If the invalid value is entered to Calendar with keepInvalid property, the onChange event returns null [\#1422](https://github.com/primefaces/primereact/issues/1422)
+- Calling clearTimeout is required before unmounting AutoComplete [\#1421](https://github.com/primefaces/primereact/issues/1421)
+- Clear button is not closing Calendar [\#1416](https://github.com/primefaces/primereact/issues/1416)
+- File selection does not work after validation fails [\#1415](https://github.com/primefaces/primereact/issues/1415)
+- InputNumber prevents min key number [\#1412](https://github.com/primefaces/primereact/issues/1412)
+- ListBox, Dropdown: Using non-unique key [\#1397](https://github.com/primefaces/primereact/issues/1397)
+
 ## [4.2.2](https://github.com/primefaces/primereact/tree/4.2.2) (2020-06-09)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/4.2.1...4.2.2)

README.md

@@ -1,15 +1,11 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/primereact.svg)](https://badge.fury.io/js/primereact)
 
-[![PrimeReact Hero](https://www.primefaces.org/wp-content/uploads/2020/03/primereact-github-02032020-2.jpg "PrimeReact Hero")](https://www.primefaces.org/primereact)
+[![PrimeReact Hero](https://www.primefaces.org/wp-content/uploads/2020/08/primereact-promotion-21aug2020@2x.jpg)](https://www.primefaces.org/primereact)
 
 # PrimeReact
 
-PrimeReact is a rich set of open source UI Components for React.
-
-[![PrimeReact Logo](https://www.primefaces.org/wp-content/uploads/2017/09/primereact-transparent-250.png "PrimeReact")](https://www.primefaces.org/primereact)
-
-See [PrimeReact homepage](https://www.primefaces.org/react) for live showcase and documentation.
+PrimeReact is a rich set of open source UI Components for React. See [PrimeReact homepage](https://www.primefaces.org/primereact) for live showcase and documentation.
 
 ## Download
 
@@ -48,15 +44,15 @@ dependencies: {
 The css dependencies are as follows, note that you may change the theme with another one of your choice.
 
 ```
-primereact/resources/themes/nova-light/theme.css
+primereact/resources/themes/saga-blue/theme.css
 primereact/resources/primereact.min.css
 primeicons/primeicons.css
 ```
 
 If you are using a bundler such as webpack with a css loader you may also import them to your main application component, an example from create-react-app would be.
 
 ```javascript
-import 'primereact/resources/themes/nova-light/theme.css';
+import 'primereact/resources/themes/saga-blue/theme.css';
 import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 ```

src/components/message/Message.d.ts

@@ -5,7 +5,8 @@ interface MessageProps {
     className?: string;
     style?: object;
     text?: string;
-    severity?: string
+    severity?: string,
+    content?: ((props: object) => any | any);
 }
 
-export class Message extends React.Component<MessageProps,any> {}
+export class Message extends React.Component<MessageProps,any> {}

src/components/message/Message.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import ObjectUtils from '../utils/ObjectUtils';
 
 export class Message extends Component {
 
@@ -9,37 +10,53 @@ export class Message extends Component {
         className: null,
         style: null,
         text: null,
-        severity: 'info'
+        severity: 'info',
+        content: null
     }
 
     static propTypes = {
         id: PropTypes.string,
         className: PropTypes.string,
         style: PropTypes.object,
         text: PropTypes.string,
-        severity: PropTypes.string
+        severity: PropTypes.string,
+        content: PropTypes.any
     };
 
+    getContent() {
+        if (this.props.content) {
+            return ObjectUtils.getJSXElement(this.props.content, this.props);
+        }
+
+        const icon = classNames('p-inline-message-icon pi', {
+            'pi-info-circle': this.props.severity === 'info',
+            'pi-exclamation-triangle': this.props.severity === 'warn',
+            'pi-times-circle': this.props.severity === 'error',
+            'pi-check': this.props.severity === 'success',
+        });
+
+        return (
+            <>
+                <span className={icon}></span>
+                <span className="p-inline-message-text">{this.props.text}</span>
+            </>
+        );
+    }
+
     render() {
-        let className = classNames('p-inline-message p-component', {
+        const className = classNames('p-inline-message p-component', {
             'p-inline-message-info': this.props.severity === 'info',
             'p-inline-message-warn': this.props.severity === 'warn',
             'p-inline-message-error': this.props.severity === 'error',
             'p-inline-message-success': this.props.severity === 'success',
             'p-inline-message-icon-only': !this.props.text
         }, this.props.className);
 
-        let icon = classNames('p-inline-message-icon pi', {
-            'pi-info-circle': this.props.severity === 'info',
-            'pi-exclamation-triangle': this.props.severity === 'warn',
-            'pi-times-circle': this.props.severity === 'error',
-            'pi-check': this.props.severity === 'success',
-        });
+        const content = this.getContent();
 
         return (
             <div id={this.props.id} aria-live="polite" className={className} style={this.props.style} role="alert">
-                <span className={icon}></span>
-                <span className="p-inline-message-text">{this.props.text}</span>
+                { content }
             </div>
         );
     }

src/showcase/liveeditor/LiveEditor.js

@@ -181,7 +181,7 @@ ${extIndexCSS}
         _files[`src/demo/${name}${extension}`] = {
             content:
                 `import 'primeicons/primeicons.css';
-import 'primereact/resources/themes/nova-light/theme.css';
+import 'primereact/resources/themes/saga-blue/theme.css';
 import 'primereact/resources/primereact.css';
 import 'primeflex/primeflex.css';
 import '../../index.css';

src/showcase/menubar/MenubarDoc.js

@@ -306,10 +306,11 @@ const MenubarDemo = () => {
 
     return (
         <div>
-            <Menubar model={items}>
-                <InputText placeholder="Search" type="text"/>
-                <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-            </Menubar>
+            <Menubar
+              model={items}
+              start={<InputText placeholder="Search" type="text"/>}
+              end={<Button label="Logout" icon="pi pi-power-off"/>}
+            />
         </div>
     );
 }
@@ -455,10 +456,11 @@ const MenubarDemo = () => {
 
     return (
         <div>
-            <Menubar model={items}>
-                <InputText placeholder="Search" type="text"/>
-                <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-            </Menubar>
+            <Menubar
+              model={items}
+              start={<InputText placeholder="Search" type="text"/>}
+              end={<Button label="Logout" icon="pi pi-power-off"/>}
+            />
         </div>
     );
 }
@@ -628,13 +630,14 @@ const items:[
 </CodeHighlight>
 
                         <h5>Custom Content</h5>
-                        <p>Any content inside the menubar will be displayed on the right side by default. You may use ".ui-menubar-custom" style class to change the location of the content.</p>
+                        <p>The menubar can display custom content by using the "start" and "end" properties.</p>
 <CodeHighlight>
 {`
-<Menubar model={items}>
-    <InputText placeholder="Search" type="text"/>
-    <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-</Menubar>
+<Menubar
+  model={items}
+  start={<InputText placeholder="Search" type="text"/>}
+  end={<Button label="Logout" icon="pi pi-power-off"/>}
+/>
 `}
 </CodeHighlight>
 

src/showcase/messages/MessagesDoc.js

@@ -577,6 +577,12 @@ this.messages.show({ life: 5000, severity: 'error', summary: 'Error Message', de
                                         <td>null</td>
                                         <td>Message text.</td>
                                     </tr>
+                                    <tr>
+                                        <td>content</td>
+                                        <td>element</td>
+                                        <td>null</td>
+                                        <td>Template of the message.</td>
+                                    </tr>
                                 </tbody>
                             </table>
                         </div>

src/showcase/ripple/RippleDoc.js

@@ -16,7 +16,7 @@ export class RippleDoc extends Component {
                         <h5>Import</h5>
 <CodeHighlight lang="js">
 {`
-import { PrimeReact } from 'primereact/utils';
+import PrimeReact from 'primereact/utils';
 import { Ripple } from 'primereact/ripple';
 `}
 </CodeHighlight>
@@ -96,11 +96,18 @@ import { Ripple } from 'primereact/ripple';
 <CodeHighlight lang="js">
 {`
 import React, { Component } from 'react';
+import PrimeReact from 'primereact/utils';
 import { Ripple } from 'primereact/ripple';
 import './RippleDemo.scss';
 
 export class RippleDemo extends Component {
 
+    constructor(props) {
+        super(props);
+
+        PrimeReact.ripple = true;
+    }
+
     render() {
         return (
             <div className="ripple-demo">

src/showcase/setup/SetupPage.js

@@ -91,7 +91,7 @@ dependencies: {
 
 <CodeHighlight lang="js">
 {`
-primereact/resources/themes/nova-light/theme.css
+primereact/resources/themes/saga-blue/theme.css
 primereact/resources/primereact.min.css
 primeicons/primeicons.css
 `}
@@ -100,7 +100,7 @@ primeicons/primeicons.css
                     <p>If you are using a bundler such as webpack with a css loader you may also import them to your main application component, an example from create-react-app would be.</p>
 <CodeHighlight lang="js">
 {`
-import 'primereact/resources/themes/nova-light/theme.css';
+import 'primereact/resources/themes/saga-blue/theme.css';
 import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 `}