Added deleteable feature and fixed icons style on DateTimePicker.

canpolatoral · May 9, 2019 · 7dcfcfc · 7dcfcfc
1 parent e91722c
commit 7dcfcfc
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 13 deletions.
diff --git a/packages/components/src/DateTimePicker/DatePicker.js b/packages/components/src/DateTimePicker/DatePicker.js
@@ -5,6 +5,7 @@ import { Input } from '../Input';
 import { isEqualDateTime, getLocalizedDate, getLocalizedTime } from './dateUtils';
 import DatePickerDialog from './DatePickerDialog';
 import TimePickerDialog from './TimePickerDialog';
+import { IconButton } from '../IconButton';
 
 class DatePicker extends ComponentBase {
   static propTypes = {
@@ -96,6 +97,7 @@ class DatePicker extends ComponentBase {
     this.handleFocus = this.handleFocus.bind(this);
     this.handleFocusDateInput = this.handleFocusDateInput.bind(this);
     this.handleFocusTimeInput = this.handleFocusTimeInput.bind(this);
+    this.clearDate = this.clearDate.bind(this);
   }
 
   componentWillMount() {
@@ -244,6 +246,10 @@ class DatePicker extends ComponentBase {
     return dateResult && timeResult;
   }
 
+  clearDate() {
+    this.setState({ date: '' });
+  }
+
   renderDate() {
     const {
       valueConstraint,
@@ -286,14 +292,42 @@ class DatePicker extends ComponentBase {
       noDialog,
     } = this.props;
 
-    let cloneSuffixText = this.props.suffixText;
+    const iconStyle = {
+      color: this.props.context.theme.boaPalette.pri500,
+      width: 18,
+      height: 18,
+    };
 
+    let cloneSuffixText = this.props.suffixText;
+    const dateSuffix =
+      <div style={{ display: 'flex' }}>
+        {this.state.date && <IconButton
+          iconProperties={{ style: iconStyle }}
+          context={this.props.context}
+          dynamicIcon="Clear"
+          style={{
+            width: 24,
+            height: 24,
+          }}
+          onClick={this.clearDate}
+          disabled={this.state.disabled} />}
+        <IconButton
+          iconProperties={{ style: iconStyle }}
+          context={this.props.context}
+          dynamicIcon="Event"
+          style={{
+            width: 24,
+            height: 24,
+          }}
+          onClick={this.handleFocusDateInput}
+          disabled={this.state.disabled} />
+        {cloneSuffixText}
+      </div>;
     if (this.props.pageType !== 'browse' && this.props.suffixText) {
       cloneSuffixText = React.cloneElement(this.props.suffixText, {
         onClick: this.handleFocusDateInput.bind(this),
       });
     }
-
     const inputLocalizedDate = getLocalizedDate(this.state.date, dateFormat);
     // inputLocalizedDate=inputLocalizedDate== '' ?undefined:inputLocalizedDate;
     const isMobile = this.isMobile();
@@ -311,11 +345,11 @@ class DatePicker extends ComponentBase {
               valueConstraint={valueConstraint}
               hintText={hintTextDate}
               floatingLabelText={floatingLabelTextDate}
-              onFocus={this.handleFocusDateInput}
+              // onFocus={this.handleFocusDateInput}
               value={inputLocalizedDate}
               mask={this.props.formats.dateMask}
               prefixText={this.props.prefixText}
-              suffixText={cloneSuffixText}
+              suffixText={dateSuffix}
               inputAlign={this.props.style.inputAlign}
               ref={r => (this.bActionInputDate = r)}
               disabled={disabled}
@@ -410,6 +444,26 @@ class DatePicker extends ComponentBase {
       // ...other
     } = this.props;
 
+    const iconStyle = {
+      color: this.props.context.theme.boaPalette.pri500,
+      width: 16,
+      height: 16,
+    };
+    const timeSuffix =
+      <div style={{ display: 'flex' }}>
+        {this.state.date && !dateFormat && <IconButton
+          iconProperties={{ style: iconStyle }}
+          context={this.props.context}
+          dynamicIcon="Clear"
+          style={{
+            width: 18,
+            height: 18,
+            marginTop: 3,
+            marginRight: 3,
+          }}
+          onClick={this.clearDate}
+          disabled={this.state.disabled} />}
+      </div>;
     const inputLocalizedTime = getLocalizedTime(this.state.date, datetimeOption, timeFormat);
     const isMobile = this.isMobile();
     if (timeFormat) {
@@ -436,7 +490,7 @@ class DatePicker extends ComponentBase {
               disabled={disabled}
               errorText={errorTextTime}
               prefixText={null}
-              suffixText={null}
+              suffixText={timeSuffix}
             />
           )}
           <TimePickerDialog

diff --git a/packages/components/src/DateTimePicker/DateTimePicker.js b/packages/components/src/DateTimePicker/DateTimePicker.js
@@ -491,8 +491,8 @@ class DateTimePicker extends ComponentBase {
 
     const iconStyle = {
       color: this.props.context.theme.boaPalette.pri500,
-      width: 16,
-      height: 16,
+      width: 18,
+      height: 18,
     };
 
     let suffix = (
@@ -501,9 +501,8 @@ class DateTimePicker extends ComponentBase {
         context={this.props.context}
         dynamicIcon="AddCircleOutline"
         style={{
-          width: 16,
-          height: 16,
-          marginTop: 7,
+          width: 24,
+          height: 24,
         }}
         onClick={this.handleAddDate}
         disabled={this.state.disabled}
@@ -516,9 +515,8 @@ class DateTimePicker extends ComponentBase {
         context={this.props.context}
         dynamicIcon="RemoveCircleOutline"
         style={{
-          width: 16,
-          height: 16,
-          marginTop: 7,
+          width: 24,
+          height: 24,
         }}
         onClick={this.handleRemoveDate}
         disabled={this.state.disabled}