auto adjust to height of time picker.

react-component · Aug 24, 2017 · 1a148ed · 1a148ed
1 parent 123460d
commit 1a148ed
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 34 deletions.
diff --git a/assets/common/DatePicker.less b/assets/common/DatePicker.less
@@ -1,4 +1,4 @@
-.@{prefixClass}.data-picker {
+.@{prefixClass} .date-picker {
     display: flex;
     flex-direction: column;
     background: #eee;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rmc-calendar",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React Mobile Calendar Component(web and react-native)",
   "keywords": [
     "react",

diff --git a/src/Calendar.tsx b/src/Calendar.tsx
@@ -23,6 +23,7 @@ export class StateType {
     startDate?: Date = undefined;
     endDate?: Date = undefined;
     disConfirmBtn?: boolean = true;
+    clientHight?: number = 0;
 }
 export default class Calendar extends React.PureComponent<PropsType, StateType> {
     static defaultProps = {
@@ -154,6 +155,12 @@ export default class Calendar extends React.PureComponent<PropsType, StateType>
         });
     }
 
+    setClientHight = (height: number) => {
+        this.setState({
+            clientHight: height,
+        });
+    }
+
     render() {
         const {
             type, locale = {} as Models.Locale, prefixCls, visible, showHeader, pickTime, showShortcut,
@@ -163,7 +170,7 @@ export default class Calendar extends React.PureComponent<PropsType, StateType>
         const {
             showTimePicker, timePickerTitle,
             startDate, endDate,
-            disConfirmBtn
+            disConfirmBtn, clientHight
         } = this.state;
 
         return (
@@ -196,6 +203,7 @@ export default class Calendar extends React.PureComponent<PropsType, StateType>
                             getDateExtra={getDateExtra}
                             onCellClick={this.onSelectedDate}
                             onSelectHasDisableDate={this.onSelectHasDisableDate}
+                            onLayout={this.setClientHight}
                             startDate={startDate}
                             endDate={endDate}
                             rowSize={rowSize}
@@ -212,6 +220,7 @@ export default class Calendar extends React.PureComponent<PropsType, StateType>
                                 onValueChange={this.onTimeChange}
                                 minDate={minDate}
                                 maxDate={maxDate}
+                                clientHeight={clientHight}
                             />
                         }
                         {

diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx
@@ -39,8 +39,11 @@ export default class DatePicker extends Component {
 
     setLayout = (dom: HTMLDivElement) => {
         if (!this.scroller) {
+            const { infinite, initalMonths, onLayout } = this.props;
+            onLayout && onLayout(dom.clientHeight);
+
             const scrollHandler = this.createOnScroll();
-            if (this.props.infinite) {
+            if (infinite) {
                 this.scroller = new DOMScroller(dom.children[0], {
                     scrollingX: false,
                     onScroll: () => scrollHandler({
@@ -55,7 +58,7 @@ export default class DatePicker extends Component {
                 }, () => {
                     this.canLoadPrev() && this.genMonthData(this.state.months[0].firstDate, -1);
 
-                    this.visibleMonth = this.visibleMonth.slice(0, this.props.initalMonths);
+                    this.visibleMonth = this.visibleMonth.slice(0, initalMonths);
 
                     this.state.months.forEach((m) => {
                         m.updateLayout && m.updateLayout();
@@ -80,7 +83,7 @@ export default class DatePicker extends Component {
         const { infinite, prefixCls = '', locale = {} as Models.Locale } = this.props;
 
         return (
-            <div className={`${prefixCls} data-picker`}>
+            <div className={`${prefixCls} date-picker`}>
                 <WeekPanel />
                 <div className="wrapper" style={{ overflow: infinite ? 'hidden' : 'scroll' }} ref={this.setLayout}>
                     <div>

diff --git a/src/DatePickerProps.ts b/src/DatePickerProps.ts
@@ -23,12 +23,13 @@ export default interface PropsType {
     minDate?: Date;
     /** 日期点击回调 */
     onCellClick?: (date: Date) => void;
+    onLayout?: (clientHight: number) => void;
     /** 选择区间包含不可用日期 */
     onSelectHasDisableDate?: (date: Date[]) => void;
     /** (web only) 样式前缀 */
     prefixCls?: string;
-    /** 选择类型，default: range，one: 单日，range: 日期区间 */
-    type?: 'one' | 'range';
     /** 行大小 */
     rowSize?: 'normal' | 'xl';
+    /** 选择类型，default: range，one: 单日，range: 日期区间 */
+    type?: 'one' | 'range';
 }
diff --git a/src/TimePicker.tsx b/src/TimePicker.tsx
@@ -13,6 +13,7 @@ export interface PropsType {
 
     minDate?: Date;
     maxDate?: Date;
+    clientHeight?: number;
 }
 export interface StateType {
 }
@@ -53,15 +54,20 @@ export default class TimePicker extends React.PureComponent<PropsType, StateType
     }
 
     render() {
-        const { locale, title, value, defaultValue, prefixCls, pickerPrefixCls } = this.props;
+        const { locale, title, value, defaultValue, prefixCls, pickerPrefixCls, clientHeight } = this.props;
         const date = value || defaultValue || undefined;
+        const height = (clientHeight && clientHeight * 3 / 8 - 52) || Number.POSITIVE_INFINITY;
 
         return (
             <div className="time-picker">
                 <div className="title">{title}</div>
                 <DateTimePicker
                     prefixCls={prefixCls}
                     pickerPrefixCls={pickerPrefixCls}
+                    style={{
+                        height: height > 164 || height < 0 ? 164 : height,
+                        overflow: 'hidden'
+                    } as React.CSSProperties}
                     mode="time"
                     date={date}
                     locale={locale}

diff --git a/src/calendar/Header.tsx b/src/calendar/Header.tsx
@@ -8,28 +8,6 @@ export default class Header extends React.PureComponent<{
     onCancel?: () => void;
     onClear?: () => void;
 }, {}> {
-    fps: HTMLDivElement;
-
-    setFPS = (dom: HTMLDivElement) => {
-        if (!this.fps) {
-            this.fps = dom;
-            let time = +new Date;
-            let count = 0;
-            const raf = () => requestAnimationFrame(() => {
-                const now = +new Date;
-                if (now - time > 1 * 1000) {
-                    dom.innerText = `JS FPS: ${count}`;
-                    count = 0;
-                    time = now;
-                    console.log(dom.innerText);
-                } else {
-                    count++;
-                }
-                raf();
-            });
-            raf();
-        }
-    }
 
     render() {
         const {

diff --git a/tests/__snapshots__/Calendar.spec.tsx.snap b/tests/__snapshots__/Calendar.spec.tsx.snap
@@ -49,7 +49,7 @@ exports[`Calendar english. renders correctly 1`] = `
         </span>
       </div>
       <div
-        class="rmc-calendar data-picker"
+        class="rmc-calendar date-picker"
       >
         <div
           class="week-panel"
@@ -4712,7 +4712,7 @@ exports[`Calendar show shortcut. 1`] = `
         </span>
       </div>
       <div
-        class="rmc-calendar data-picker"
+        class="rmc-calendar date-picker"
       >
         <div
           class="week-panel"

diff --git a/tests/__snapshots__/DatePicker.spec.tsx.snap b/tests/__snapshots__/DatePicker.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DatePicker renders correctly 1`] = `
 <div
-  class="rmc-calendar data-picker"
+  class="rmc-calendar date-picker"
 >
   <div
     class="week-panel"