Merge pull request #3 from febababy/calender_icon_#3525_fix

Calendar icon as optional prop
Hacker0x01 · Feb 1, 2023 · a23e564 · a23e564
2 parents 92554b6 + 171411c
commit a23e564
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/docs-site/src/examples/default.js b/docs-site/src/examples/default.js
@@ -1,6 +1,10 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+    />
   );
 };
diff --git a/docs/datepicker.md b/docs/datepicker.md
@@ -44,6 +44,7 @@ General datepicker component.
 | `injectTimes`                | `array`                        |                 |                                                                                               |
 | `inline`                     | `bool`                         |                 |                                                                                               |
 | `isClearable`                | `bool`                         |                 |                                                                                               |
+| `showIcon`                   | `bool`                         |                 |                                                                                               |
 | `locale`                     | `string`                       |                 |                                                                                               |
 | `maxDate`                    | `instanceOf(Date)`             |                 |                                                                                               |
 | `maxTime`                    | `instanceOf(Date)`             |                 |                                                                                               |

diff --git a/docs/index.md b/docs/index.md
@@ -52,6 +52,7 @@
 | `injectTimes`                | `array`                        |                    |             |
 | `inline`                     | `bool`                         |                    |             |
 | `isClearable`                | `bool`                         |                    |             |
+| `showIcon`                   | `bool`                         |                    |             |
 | `locale`                     | `union(string\|shape)`         |                    |             |
 | `maxDate`                    | `instanceOfDate`               |                    |             |
 | `maxTime`                    | `instanceOfDate`               |                    |             |

diff --git a/src/index.jsx b/src/index.jsx
@@ -181,6 +181,7 @@ export default class DatePicker extends React.Component {
     injectTimes: PropTypes.array,
     inline: PropTypes.bool,
     isClearable: PropTypes.bool,
+    showIcon: PropTypes.bool,
     locale: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.shape({ locale: PropTypes.object }),
@@ -1176,15 +1177,22 @@ export default class DatePicker extends React.Component {
   };
 
   renderInputContainer() {
+    const { showIcon } = this.props;
     return (
-      <div className="react-datepicker__input-container">
-        <svg
-          className="react-datepicker__calender-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512"
-        >
-          <path d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" />
-        </svg>
+      <div
+        className={`react-datepicker__input-container ${
+          showIcon ? "react-datepicker__view-calendar-icon" : ""
+        }`}
+      >
+        {showIcon && (
+          <svg
+            className="react-datepicker__calendar-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 448 512"
+          >
+            <path d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" />
+          </svg>
+        )}
         {this.renderAriaLiveRegion()}
         {this.renderDateInput()}
         {this.renderClearButton()}

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -517,10 +517,12 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  .react-datepicker__calender-icon {
+  .react-datepicker__calendar-icon {
     position: absolute;
     padding: 0.5rem;
   }
+}
+.react-datepicker__view-calendar-icon {
   input {
     padding: 6px 10px 5px 25px;
   }
@@ -709,7 +711,7 @@
   white-space: nowrap;
 }
 
-.react-datepicker__calender-icon {
+.react-datepicker__calendar-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.125em;