filter/filterBox datepicker bug.

src/components/common/filterBox/filter.jsx

@@ -95,9 +95,14 @@ class Filter extends React.Component {
                         allowClear
                         // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
                         defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
-                        onFocus={() => {
+                        onFocus={(e) => {
                             let obj = {};
+                            let inputBox = e.target.getBoundingClientRect();
+                            const warpHeight = 379;
+                            let bottomY = inputBox.top + inputBox.height + warpHeight + 10;
+                            let overH = bottomY - document.body.offsetHeight
                             obj['datePickerOpen' + index] = true;
+                            obj[`datePicker${index}-marginTop`] = overH > 0 ? `-${overH}px` : 0;
                             this.setState(obj);
                         }}
                         onChange={() => {
@@ -106,7 +111,8 @@ class Filter extends React.Component {
                         }}
                     />
                     <DatePicker
-                        key={Math.random()}
+                        key={'datePickerOpen' + index}
+                        style={{ marginTop: this.state[`datePicker${index}-marginTop`] }}
                         defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
                         showToday={operator !== '='}
                         open={this.state['datePickerOpen' + index]}
@@ -115,7 +121,7 @@ class Filter extends React.Component {
                             obj['datePickerOpen' + index] = status;
                             this.setState(obj);
                         }}
-                        getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
+                        // getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
                         onChange={(value) => {this.changeFilterValue(filter, value, index)}}
                         renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
                     />

src/components/common/filterBox/filter.less

@@ -22,6 +22,9 @@
         width: 0;
         height: 0;
         overflow: hidden;
+        position: absolute;
+        top: 43px;
+        left: 0;
     }
     .ant-calendar-picker-container {
         left: 2px !important;

src/components/common/filterBox/filter2.jsx

@@ -111,7 +111,12 @@ class Filter extends React.Component {
                         defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
                         onFocus={(e) => {
                             let obj = {};
+                            let inputBox = e.target.getBoundingClientRect();
+                            const warpHeight = 379;
+                            let bottomY = inputBox.top + inputBox.height + warpHeight + 10;
+                            let overH = bottomY - document.body.offsetHeight
                             obj['datePickerOpen' + index] = true;
+                            obj[`datePicker${index}-marginTop`] = overH > 0 ? `-${overH}px` : 0;
                             this.setState(obj);
                         }}
                         onChange={() => {
@@ -120,7 +125,8 @@ class Filter extends React.Component {
                         }}
                     />
                     <DatePicker
-                        key={Math.random()}
+                        key={'datePickerOpen' + index}
+                        style={{ marginTop: this.state[`datePicker${index}-marginTop`] }}
                         defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
                         showToday={operator !== '='}
                         open={this.state['datePickerOpen' + index]}
@@ -129,7 +135,7 @@ class Filter extends React.Component {
                             obj['datePickerOpen' + index] = status;
                             this.setState(obj);
                         }}
-                        getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
+                        // getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
                         onChange={(value) => {this.changeFilterValue(filter, value, index)}}
                         renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
                     />

src/components/common/filterBox/filterBox.jsx

@@ -228,7 +228,7 @@ class FilterBox extends React.Component {
         }
     }
 
-    generateTimeTags = (filter, index, defaultValue) => {
+    generateTimeTags = (filter, index, defaultValue, filterIndex) => {
         const timeTypes = [
             { dynamic: true, label: '今天', name: 'today' },
             { dynamic: true, label: '本月', name: 'month' },
@@ -240,12 +240,12 @@ class FilterBox extends React.Component {
         return timeTypes.map(t => <Tag key={t.name} className={`cus-time-tag${defaultValue && defaultValue.name === t.name ? ' current' : ''}`} onClick={() => {
             this.changeFilterValue(filter, t, index);
             let obj = {};
-            obj['datePickerOpen' + index] = false;
+            obj[`datePickerOpen-${filterIndex}-${index}`] = false;
             this.setState(obj);
         }}>{t.label}</Tag>);
     }
 
-    getFilterValueField = (filter, index) => {
+    getFilterValueField = (filter, index, filterIndex) => {
         const { columns, fetching } = this.state;
         
         let field;
@@ -295,9 +295,14 @@ class FilterBox extends React.Component {
                         allowClear
                         // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
                         defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
-                        onFocus={() => {
+                        onFocus={(e) => {
                             let obj = {};
-                            obj['datePickerOpen' + index] = true;
+                            let inputBox = e.target.getBoundingClientRect();
+                            const warpHeight = 379;
+                            let bottomY = inputBox.top + inputBox.height + warpHeight + 10;
+                            let overH = bottomY - document.body.offsetHeight
+                            obj[`datePickerOpen-${filterIndex}-${index}`] = true;
+                            obj[`datePicker-${filterIndex}-${index}-marginTop`] = overH > 0 ? `-${overH}px` : 0;
                             this.setState(obj);
                         }}
                         onChange={() => {
@@ -307,16 +312,17 @@ class FilterBox extends React.Component {
                     />
                     <DatePicker
                         key={Math.random()}
+                        style={{ marginTop: this.state[`datePicker-${filterIndex}-${index}-marginTop`] }}
                         defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
                         showToday={operator !== '='}
-                        open={this.state['datePickerOpen' + index]}
+                        open={this.state[`datePickerOpen-${filterIndex}-${index}`]}
                         onOpenChange={status => {
                             let obj = {};
-                            obj['datePickerOpen' + index] = status;
+                            obj[`datePickerOpen-${filterIndex}-${index}`] = status;
                             this.setState(obj);
                         }}
                         onChange={(value) => {this.changeFilterValue(filter, value, index)}}
-                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
+                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue, filterIndex) : null}
                     />
                 </div>
             }
@@ -521,7 +527,7 @@ class FilterBox extends React.Component {
                                 key={key}
                                 className='filterValueOne'
                             >
-                                {this.getFilterValueField(f, 1)}
+                                {this.getFilterValueField(f, 1, index)}
                             </FormItem>
                         </Col>
                         {operator==='between' && type !== 'time' && <Col span={6}>
@@ -529,7 +535,7 @@ class FilterBox extends React.Component {
                                 key={key}
                                 className='filterValueTwo'
                             >
-                                {this.getFilterValueField(f, 2)}
+                                {this.getFilterValueField(f, 2, index)}
                             </FormItem>
                         </Col>}
                     </Col>
@@ -556,7 +562,7 @@ class FilterBox extends React.Component {
                 title='筛选条件'
                 visible={visibleFilterBox}
                 footer={<div>
-                    <Button type='danger' onClick={this.removeAllFilters}>清空条件</Button>
+                    <Button className='btn-clear' type='danger' onClick={this.removeAllFilters}>清空条件</Button>
                     <Button onClick={hideFilterBox}>取消</Button>
                     <Button type='primary' onClick={this.getFilters}>确定</Button>
                     </div>

src/components/common/filterBox/filterBox.less

@@ -16,6 +16,12 @@
     div {
       button:first-child {
         float: left;
+        &.btn-clear {
+          background: transparent;
+          box-shadow: none;
+          border: none;
+          text-shadow: none;
+        }
       }
     }
   }

src/components/common/filterBox/filterBox2.jsx

@@ -321,7 +321,7 @@ class FilterBox extends React.Component {
                                 key={key}
                                 className='filterValueOne'
                             >
-                                {this.generateValueItem(f, 1)}
+                                {this.generateValueItem(f, 1, index)}
                             </FormItem>
                         </Col>
                         {operator==='between' && type !== 'time' && <Col span={6}>
@@ -329,7 +329,7 @@ class FilterBox extends React.Component {
                                 key={key}
                                 className='filterValueTwo'
                             >
-                                {this.generateValueItem(f, 2)}
+                                {this.generateValueItem(f, 2, index)}
                             </FormItem>
                         </Col>}
                     </Col>
@@ -375,7 +375,7 @@ class FilterBox extends React.Component {
         </Select>)
     }
 
-    generateTimeTags = (filter, index, defaultValue) => {
+    generateTimeTags = (filter, index, defaultValue, filterIndex) => {
         const timeTypes = [
             { dynamic: true, label: '今天', name: 'today' },
             { dynamic: true, label: '本月', name: 'month' },
@@ -387,12 +387,12 @@ class FilterBox extends React.Component {
         return timeTypes.map(t => <Tag key={t.name} className={`cus-time-tag${defaultValue && defaultValue.name === t.name ? ' current' : ''}`} onClick={() => {
             this.changeFilterValue(filter, t, index);
             let obj = {};
-            obj['datePickerOpen' + index] = false;
+            obj[`datePickerOpen-${filterIndex}-${index}`] = false;
             this.setState(obj);
         }}>{t.label}</Tag>);
     }
 
-    generateValueItem = (filter, index) => {
+    generateValueItem = (filter, index, filterIndex) => {
         const { fetching } = this.state;
         // const dropdownOpen = filter.key ? (this.state['dropdownOpen-' + filter.key] || false) : false;
         const columnData = filter.name ? (this.state['columnData-' + filter.name] || []) : [];
@@ -438,9 +438,14 @@ class FilterBox extends React.Component {
                         allowClear
                         // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
                         defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
-                        onFocus={() => {
+                        onFocus={(e) => {
                             let obj = {};
-                            obj['datePickerOpen' + index] = true;
+                            let inputBox = e.target.getBoundingClientRect();
+                            const warpHeight = 379;
+                            let bottomY = inputBox.top + inputBox.height + warpHeight + 10;
+                            let overH = bottomY - document.body.offsetHeight
+                            obj[`datePickerOpen-${filterIndex}-${index}`] = true;
+                            obj[`datePicker-${filterIndex}-${index}-marginTop`] = overH > 0 ? `-${overH}px` : 0;
                             this.setState(obj);
                         }}
                         onChange={() => {
@@ -450,16 +455,17 @@ class FilterBox extends React.Component {
                     />
                     <DatePicker
                         key={Math.random()}
+                        style={{ marginTop: this.state[`datePicker-${filterIndex}-${index}-marginTop`] }}
                         defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
                         showToday={operator !== '='}
-                        open={this.state['datePickerOpen' + index]}
+                        open={this.state[`datePickerOpen-${filterIndex}-${index}`]}
                         onOpenChange={status => {
                             let obj = {};
-                            obj['datePickerOpen' + index] = status;
+                            obj[`datePickerOpen-${filterIndex}-${index}`] = status;
                             this.setState(obj);
                         }}
                         onChange={(value) => {this.changeFilterValue(filter, value, index)}}
-                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
+                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue, filterIndex) : null}
                     />
                 </div>
             }
@@ -602,7 +608,7 @@ class FilterBox extends React.Component {
                 title='筛选条件'
                 visible={visibleFilterBox}
                 footer={<div>
-                    <Button type='danger' onClick={this.removeAllFilters}>清空条件</Button>
+                    <Button className='btn-clear' type='danger' onClick={this.removeAllFilters}>清空条件</Button>
                     <Button onClick={hideFilterBox}>取消</Button>
                     <Button type='primary' onClick={this.getFilters}>确定</Button>
                     </div>