add placeholder

Author: javadbat

CHANGELOG.md

@@ -1,4 +1,7 @@
 #changelog
+## [2.3.0] - 2023-11-12
+### new features
+- add placeholder support when input is empty
 ## [2.2.0] - 2023-10-20
 ### new features
 - add support for `Date` type value

README.md

@@ -85,6 +85,14 @@ you can set minimum date and maximum date range for your app
  <JBDateInput label="تاریخ شروع " value="2020-08-10T08:51:23.176Z" min="2020-08-05T08:51:23.176Z" max="2020-08-15T08:51:23.176Z">
  </JBDateInput>
 ```
+## placeholder
+
+you can set placeholder to show it to user when input is empty. to doing so just set `placeholder` attribute in JSX DOM: 
+
+```jsx
+ <JBDateInput placeholder="Enter Date Here">
+ </JBDateInput>
+```
 ## custom validation
 
 beside of min and max you can also set your own custom validation like any other jb react components family to achive this you must create a array of validations and pass it to validationList props.

lib/JBDateInput.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect, useRef, useState, useImperativeHandle, useCallback, DOMAttributes } from 'react';
-// import PropTypes from 'prop-types';
-// import {type} from 'jb-date-input';
 import 'jb-date-input';
 // eslint-disable-next-line no-duplicate-imports
 import { JBDateInputWebComponent, JBDateInputInputTypes, JBDateInputValidationItem, JBDDateInputInboxElementWebComponent,JBDateInputValueObject } from 'jb-date-input';
@@ -50,6 +48,7 @@ export type JBDateInputProps = {
     required?: boolean,
     calendarDefaultDateView?:{ year:number, month: number, dateType:JBDateInputInputTypes},
     usePersianNumber?: boolean,
+    placeholder:string | null | undefined,
     children?:any,
 }
 
@@ -125,6 +124,11 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
             element.current.value = props.value;
         }
     }, [props.value]);
+    useEffect(() => {
+        if (element.current && props.placeholder !== undefined) {
+            element.current.placeholder = props.placeholder;
+        }
+    }, [props.placeholder]);
     useEffect(() => {
         if (element.current) {
             if(typeof props.style == "string"){
@@ -168,24 +172,3 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
     );
 });
 JBDateInput.displayName = "JBDateInput";
-// JBDateInput.propTypes = {
-//     label: PropTypes.string,
-//     name:PropTypes.string,
-//     className:PropTypes.string,
-//     min: PropTypes.string,
-//     max: PropTypes.string,
-//     format: PropTypes.string,
-//     onKeyup: PropTypes.func,
-//     onChange: PropTypes.func,
-//     onSelect: PropTypes.func,
-//     valueType: PropTypes.oneOf(['GREGORIAN', 'JALALI', 'TIME_STAMP']),
-//     inputType: PropTypes.oneOf(['GREGORIAN', 'JALALI']),
-//     direction: PropTypes.oneOf(['ltr', 'rtl']),
-//     value: PropTypes.string,
-//     validationList: PropTypes.array,
-//     required: PropTypes.bool,
-//     calendarDefaultDateView: PropTypes.shape({ year: PropTypes.number.isRequired, month: PropTypes.number.isRequired, dateType: PropTypes.oneOf<JBDateInputInputTypes>([JBDateInputInputTypes.gregorian, JBDateInputInputTypes.jalali]).isRequired }),
-//     // calendarDefaultDateView: PropTypes.object,
-//     usePersianNumber: PropTypes.bool,
-//     // children:PropTypes.element
-// };

package.json

@@ -18,7 +18,7 @@
     "react component",
     "react"
   ],
-  "version": "2.2.0",
+  "version": "2.3.0",
   "bugs": "https://github.com/javadbat/jb-date-input-react/issues",
   "license": "MIT",
   "files": [
@@ -36,6 +36,6 @@
     "url": "https://github.com/javadbat/jb-date-input-react"
   },
   "dependencies": {
-    "jb-date-input": ">=3.9.0"
+    "jb-date-input": ">=3.10.0"
   }
 }