Fixed #2239 - Add iconPos property to Calendar

primefaces · Nov 7, 2021 · 464f82a · 464f82a
1 parent e0296b0
commit 464f82a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/src/components/calendar/Calendar.css b/src/components/calendar/Calendar.css
@@ -8,16 +8,26 @@
     width: 1%;
 }
 
-.p-calendar-w-btn .p-inputtext {
+.p-calendar-w-btn-right .p-inputtext {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
 
-.p-calendar-w-btn .p-datepicker-trigger {
+.p-calendar-w-btn-right .p-datepicker-trigger {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
 
+.p-calendar-w-btn-left .p-inputtext {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-calendar-w-btn-left .p-datepicker-trigger {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 /* Fluid */
 .p-fluid .p-calendar {
     display: flex;

diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
@@ -6,6 +6,8 @@ type CalendarAppendToType = 'self' | HTMLElement | undefined | null;
 
 type CalendarVisibleType = 'outside' | 'dateselect' | undefined | null;
 
+type CalendarIconPosType = 'left' | 'right';
+
 interface CalendarChangeTargetOptions {
     name: string;
     id: string;
@@ -86,6 +88,7 @@ export interface CalendarProps {
     placeholder?: string;
     showIcon?: boolean;
     icon?: IconType<CalendarProps>;
+    iconPos?: CalendarIconPosType;
     showOnFocus?: boolean;
     numberOfMonths?: number;
     view?: string;

diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
@@ -35,6 +35,7 @@ export class Calendar extends Component {
         placeholder: null,
         showIcon: false,
         icon: 'pi pi-calendar',
+        iconPos: 'right',
         showOnFocus: true,
         numberOfMonths: 1,
         view: 'date',
@@ -117,6 +118,7 @@ export class Calendar extends Component {
         placeholder: PropTypes.string,
         showIcon: PropTypes.bool,
         icon: PropTypes.any,
+        iconPos: PropTypes.string,
         showOnFocus: PropTypes.bool,
         numberOfMonths: PropTypes.number,
         view: PropTypes.string,
@@ -3090,6 +3092,27 @@ export class Calendar extends Component {
         return null;
     }
 
+    renderContent() {
+        const input = this.renderInputElement();
+        const button = this.renderButton();
+
+        if (this.props.iconPos === 'left') {
+            return (
+                <>
+                    {button}
+                    {input}
+                </>
+            )
+        }
+
+        return (
+            <>
+                {input}
+                {button}
+            </>
+        )
+    }
+
     renderButtonBar() {
         if (this.props.showButtonBar) {
             const todayClassName = classNames('p-button-text', this.props.todayButtonClassName);
@@ -3123,7 +3146,7 @@ export class Calendar extends Component {
 
     render() {
         const className = classNames('p-calendar p-component p-inputwrapper', this.props.className, {
-            'p-calendar-w-btn': this.props.showIcon,
+            [`p-calendar-w-btn p-calendar-w-btn-${this.props.iconPos}`]: this.props.showIcon,
             'p-calendar-disabled': this.props.disabled,
             'p-calendar-timeonly': this.props.timeOnly,
             'p-inputwrapper-filled': this.props.value || (DomHandler.hasClass(this.inputRef.current, 'p-filled') && this.inputRef.current.value !== ''),
@@ -3137,8 +3160,7 @@ export class Calendar extends Component {
             'p-datepicker-monthpicker': (this.props.view === 'month'),
             'p-datepicker-touch-ui': this.props.touchUI
         });
-        const input = this.renderInputElement();
-        const button = this.renderButton();
+        const content = this.renderContent();
         const datePicker = this.renderDatePicker();
         const timePicker = this.renderTimePicker();
         const buttonBar = this.renderButtonBar();
@@ -3148,8 +3170,7 @@ export class Calendar extends Component {
 
         return (
             <span ref={(el) => this.container = el} id={this.props.id} className={className} style={this.props.style}>
-                {input}
-                {button}
+                {content}
                 <CalendarPanel ref={this.overlayRef} className={panelClassName} style={this.props.panelStyle} appendTo={this.props.appendTo} inline={this.props.inline} onClick={this.onPanelClick} onMouseUp={this.onPanelMouseUp}
                     in={isVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}
                     transitionOptions={this.props.transitionOptions}>

diff --git a/src/showcase/calendar/CalendarDoc.js b/src/showcase/calendar/CalendarDoc.js
@@ -1072,6 +1072,12 @@ const monthNavigatorTemplate = (options) => {
                                         <td>pi pi-calendar</td>
                                         <td>Icon of the calendar button.</td>
                                     </tr>
+                                    <tr>
+                                        <td>iconPos</td>
+                                        <td>string</td>
+                                        <td>right</td>
+                                        <td>Icon position of the calendar button. Valid values is 'left' and 'right'.</td>
+                                    </tr>
                                     <tr>
                                         <td>showOnFocus</td>
                                         <td>boolean</td>