Merge pull request #254 from dnbexperience/develop

release of v4.8.1
dnbexperience · Aug 12, 2019 · d686d25 · d686d25
2 parents 5842e87 + 696451c
commit d686d25
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -43,6 +43,7 @@ const renderProps = {
 
 export const propTypes = {
   id: PropTypes.string,
+  title: PropTypes.string,
   date: PropTypes.oneOfType([
     PropTypes.instanceOf(Date),
     PropTypes.string
@@ -134,6 +135,7 @@ export const propTypes = {
 
 export const defaultProps = {
   id: null,
+  title: null,
   date: null,
   start_date: null,
   end_date: null,
@@ -547,6 +549,7 @@ export default class DatePicker extends PureComponent {
 
     const {
       label,
+      title,
       label_direction,
       only_month,
       hide_navigation_buttons,
@@ -661,6 +664,7 @@ export default class DatePicker extends PureComponent {
           <span className="dnb-date-picker__shell">
             <DatePickerInput
               id={id}
+              title={title}
               disabled={isTrue(disabled)}
               maskOrder={mask_order}
               maskPlaceholder={mask_placeholder}

diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js
@@ -25,6 +25,7 @@ import { isDisabled } from './DatePickerCalc'
 
 export const propTypes = {
   id: PropTypes.string,
+  title: PropTypes.string,
   maskOrder: PropTypes.string,
   maskPlaceholder: PropTypes.string,
   separatorRexExp: PropTypes.instanceOf(RegExp),
@@ -39,6 +40,11 @@ export const propTypes = {
   ]),
   status_state: PropTypes.string,
   status_animation: PropTypes.string,
+  inputElement: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   disabled: PropTypes.bool,
   opened: PropTypes.bool,
   showInput: PropTypes.bool,
@@ -50,6 +56,7 @@ export const propTypes = {
 
 export const defaultProps = {
   id: null,
+  title: null,
   maskOrder: 'dd/mm/yyyy',
   maskPlaceholder: 'dd/mm/åååå',
   separatorRexExp: /[-/ ]/g,
@@ -60,6 +67,7 @@ export const defaultProps = {
   status_animation: null,
   minDate: null,
   maxDate: null,
+  inputElement: null,
   disabled: null,
   opened: false,
   showInput: null,
@@ -418,12 +426,16 @@ export default class DatePickerInput extends PureComponent {
           },
           placeholderChar
         }
+
+        // this makes it possible to use a vanilla <input /> like: inputElement="input"
+        const Input = this.props.inputElement || InputElement
+
         switch (state) {
           case 'd':
             this.refList.push(this[`_${mode}DayRef`])
 
             return (
-              <InputElement
+              <Input
                 {...params}
                 id={`${this.props.id}-${mode}-day`}
                 key={'d' + i}
@@ -443,7 +455,7 @@ export default class DatePickerInput extends PureComponent {
             this.refList.push(this[`_${mode}MonthRef`])
 
             return (
-              <InputElement
+              <Input
                 {...params}
                 id={`${this.props.id}-${mode}-month`}
                 key={'m' + i}
@@ -463,7 +475,7 @@ export default class DatePickerInput extends PureComponent {
             this.refList.push(this[`_${mode}YearRef`])
 
             return (
-              <InputElement
+              <Input
                 {...params}
                 id={`${this.props.id}-${mode}-year`}
                 key={'y' + i}
@@ -496,6 +508,7 @@ export default class DatePickerInput extends PureComponent {
   render() {
     const {
       id,
+      title,
 
       submitAttributes,
       range /* eslint-disable-line */,
@@ -512,6 +525,7 @@ export default class DatePickerInput extends PureComponent {
       onSubmit /* eslint-disable-line */,
       onSubmitButtonFocus /* eslint-disable-line */,
       showInput /* eslint-disable-line */,
+      inputElement /* eslint-disable-line */,
       disabled,
       opened,
       status,
@@ -540,7 +554,7 @@ export default class DatePickerInput extends PureComponent {
             id={id}
             disabled={disabled}
             className={opened ? 'dnb-button--active' : null}
-            // title={submit_button_title} // Not implemented yet
+            title={title}
             type="button"
             icon="calendar"
             variant="secondary"

diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -77,6 +77,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
   status_state="error"
   submit_button_text="Ok"
   sync={true}
+  title={null}
 >
   <span
     className="dnb-date-picker dnb-date-picker__status--error dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker--show-footer"
@@ -98,6 +99,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
           disabled={false}
           endDate={2019-02-15T00:00:00.000Z}
           id="date-picker-id"
+          inputElement={null}
           maskOrder="dd/mm/yyyy"
           maskPlaceholder="dd/mm/åååå"
           maxDate={null}
@@ -119,6 +121,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
               "aria-expanded": false,
             }
           }
+          title={null}
         >
           <Input
             align={null}

diff --git a/packages/dnb-ui-lib/stories/components/DatePicker.js b/packages/dnb-ui-lib/stories/components/DatePicker.js
@@ -21,6 +21,7 @@ export default [
             label="Date Picker 1:"
             right="small"
             date="1981-01-15"
+            title="My Button"
           />
           <DatePicker
             label="Date Picker 2:"
@@ -33,6 +34,7 @@ export default [
             align_picker="right"
             mask_placeholder="dd/mm/yyyy"
             locale={enLocale}
+            inputElement="input"
             first_day="sunday"
             return_format="DD/MM/YYYY"
             date="1981-01-15"