Merge pull request #544 from edison-hm/feat-bscroll-stop

feat: stop wheel scroll when click onOk
ZhongAnTech · Jan 11, 2021 · 26bba3e · 26bba3e
2 parents a82747a + 47d7509
commit 26bba3e
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 121 deletions.
diff --git a/components/date-picker-view/DatePickerView.tsx b/components/date-picker-view/DatePickerView.tsx
@@ -49,6 +49,7 @@ export default class DatePickerView extends Component<DatePickerViewProps, any>
     defaultValue: '',
     minuteStep: 1,
     valueMember: 'value',
+    stopScroll: false,
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -362,7 +363,7 @@ export default class DatePickerView extends Component<DatePickerViewProps, any>
   };
 
   getDefaultMinDate = () => {
-    return getGregorianCalendar(2000, 0, 1, 0, 0, 0);
+    return getGregorianCalendar(1900, 0, 1, 0, 0, 0);
   };
 
   getDefaultMaxDate = () => {
@@ -404,12 +405,6 @@ export default class DatePickerView extends Component<DatePickerViewProps, any>
     return date;
   };
 
-  onTransition = (isScrolling) => {
-    if (typeof this.props.onTransition === 'function') {
-      this.props.onTransition!(isScrolling);
-    }
-  };
-
   render() {
     const { prefixCls, className, onInit, ...others } = this.props;
     const { dataSource, value } = this.getColsValue();
@@ -421,7 +416,6 @@ export default class DatePickerView extends Component<DatePickerViewProps, any>
         dataSource={dataSource}
         value={value}
         onChange={this.onValueChange}
-        onTransition={(isScrolling) => { this.onTransition(isScrolling); }}
       />
     );
   }

diff --git a/components/date-picker-view/PropsType.tsx b/components/date-picker-view/PropsType.tsx
@@ -12,6 +12,6 @@ export default interface BaseDatePickerViewProps {
   min?: object | string;
   max?: object | string;
   valueMember?: string;
-  onTransition?: (value: boolean) => void;
   locale?: Locale['DatePickerView'] & Locale['DatePicker'] & Locale['DateSelect'];
+  stopScroll: boolean;
 }
diff --git a/components/date-picker/DatePicker.tsx b/components/date-picker/DatePicker.tsx
@@ -32,11 +32,9 @@ export default class DatePicker extends Component<DatePickerProps, any> {
     return null;
   }
 
-  private isScrolling = false;
-
   constructor(props) {
     super(props);
-    this.state = parseState(props);
+    this.state = { ...parseState(props), stopScroll: false };
   }
 
   onCancel = () => {
@@ -46,28 +44,19 @@ export default class DatePicker extends Component<DatePickerProps, any> {
     }
   };
 
-  onOk = () => {
-    if (this.isScrolling) {
-      return false;
-    }
-
+  onOk = async () => {
     const { onOk } = this.props;
-    const { date } = this.state;
-
     this.setState({
-      date,
+      stopScroll: true,
     });
-    if (typeof onOk === 'function') {
-      onOk(date);
-    }
-  };
 
-  onTransition = (isScrolling) => {
-    const { onTransition } = this.props;
-    this.isScrolling = isScrolling;
-    if (typeof onTransition === 'function') {
-      onTransition(isScrolling);
-    }
+    setTimeout(() => {
+      const { date } = this.state;
+
+      if (typeof onOk === 'function') {
+        onOk(date);
+      }
+    }, 0);
   };
 
   onInit = (selected) => {
@@ -78,9 +67,9 @@ export default class DatePicker extends Component<DatePickerProps, any> {
 
   onValueChange = (newValue) => {
     const { onChange } = this.props;
-    this.setState({
-      date: newValue,
-    });
+    const { stopScroll } = this.state;
+    const stateData = stopScroll ? { date: newValue, stopScroll: false } : { date: newValue };
+    this.setState(stateData);
 
     if (typeof onChange === 'function') {
       onChange(newValue);
@@ -89,7 +78,7 @@ export default class DatePicker extends Component<DatePickerProps, any> {
 
   render() {
     const { prefixCls, className, title, okText, cancelText, locale, mountContainer, maskClosable, onOk, onCancel, onInit, visible, ...others } = this.props;
-    const { date } = this.state;
+    const { date, stopScroll } = this.state;
     const noop = () => {};
 
     return (
@@ -117,7 +106,7 @@ export default class DatePicker extends Component<DatePickerProps, any> {
             value={date}
             onInit={this.onInit}
             onChange={this.onValueChange}
-            onTransition={(isScrolling) => { this.onTransition(isScrolling); }}
+            stopScroll={stopScroll}
           />
         </div>
       </Popup>

diff --git a/components/date-picker/PropsType.tsx b/components/date-picker/PropsType.tsx
@@ -1,7 +1,7 @@
 import BaseDatePickerViewProps from '../date-picker-view/PropsType';
 import { ContainerType } from '../utils/dom';
 
-export default interface BaseDatePickerProps extends Omit<BaseDatePickerViewProps, 'onChange'> {
+export default interface BaseDatePickerProps extends Omit<BaseDatePickerViewProps, 'onChange' | 'stopScroll'> {
   visible?: boolean;
   title?: string;
   okText?: string;

diff --git a/components/picker-view/PickerView.tsx b/components/picker-view/PickerView.tsx
@@ -32,19 +32,13 @@ export default class PickerView extends Component<PickerViewProps, PickerViewSta
   state: PickerViewState = parseProps.getSource(this.props);
 
   static getDerivedStateFromProps(props, state) {
-    if (!isEqual(removeFnFromProps(props, ['onChange', 'onTransition']), removeFnFromProps(state.prevProps, ['onChange', 'onTransition']))) {
+    if (!isEqual(removeFnFromProps(props, ['onChange']), removeFnFromProps(state.prevProps, ['onChange']))) {
       return {
         prevProps: props,
         ...parseProps.getSource(props),
       };
     }
 
-    // if (!_.isEqual(state.value, state.prevValue)) {
-    //   return {
-    //     prevValue: state.value,
-    //     ...parseProps.getSource({ ...props, value: state.value }),
-    //   };
-    // }
     return null;
   }
 
@@ -56,22 +50,16 @@ export default class PickerView extends Component<PickerViewProps, PickerViewSta
       value.length = level + 1;
     }
     value[level] = selected;
+
     const newState = parseProps.getSource({ dataSource, value, valueMember, cols });
     this.setState(newState);
     if (typeof onChange === 'function') {
       onChange(newState.objValue, level);
     }
   };
 
-  onTransition = (isScrolling) => {
-    const { onTransition } = this.props;
-    if (typeof onTransition === 'function') {
-      onTransition!(isScrolling);
-    }
-  };
-
   renderWheel = () => {
-    const { valueMember, itemRender, disabled } = this.props;
+    const { valueMember, itemRender, disabled, stopScroll } = this.props;
     const { dataSource, value } = this.state;
 
     return dataSource.map((item, index) => (
@@ -83,7 +71,7 @@ export default class PickerView extends Component<PickerViewProps, PickerViewSta
         itemRender={itemRender}
         disabled={disabled}
         onChange={(selected) => this.onValueChange(selected, index)}
-        onTransition={(isScrolling) => { this.onTransition(isScrolling); }}
+        stopScroll={stopScroll}
       />
     ));
   };

diff --git a/components/picker-view/PropsType.tsx b/components/picker-view/PropsType.tsx
@@ -1,13 +1,11 @@
+import BaseWheelProps from '../wheel/PropsType';
+
 export type DataSource = Array<{ [key: string]: any; children?: DataSource }>;
 
-export default interface BasePickerViewProps {
+export default interface BasePickerViewProps extends Pick<BaseWheelProps, 'valueMember' | 'itemRender' | 'disabled' | 'stopScroll'>{
   value?: string | string[] | number[];
   defaultValue?: string | string[] | number[] | object;
-  valueMember?: string;
   dataSource: DataSource;
   onChange?: (value?: object[], i?: number) => void;
-  itemRender?: (item?: object) => string;
   cols?: number;
-  disabled?: boolean;
-  onTransition?: (value: boolean) => void;
 }
diff --git a/components/picker/Picker.tsx b/components/picker/Picker.tsx
@@ -15,10 +15,11 @@ export type DataSource = Array<{ [key: string]: any; children?: DataSource }>;
 
 export interface PickerState {
   value: string[] | number[];
-  objValue?: Array<{ [key: string]: any }>;
+  objValue: Array<{ [key: string]: any }>;
   dataSource: DataSource;
   tempObjValue?: Array<{ [key: string]: any }>;
   tempValue?: string[] | number[];
+  stopScroll?: boolean;
 }
 
 export default class Picker extends Component<PickerProps, PickerState> {
@@ -32,9 +33,7 @@ export default class Picker extends Component<PickerProps, PickerState> {
     destroy: false,
   };
 
-  private isScrolling = false;
-
-  state: PickerState = parseProps.getSource(this.props);
+  state: PickerState = { ...parseProps.getSource(this.props), stopScroll: false };
 
   static getDerivedStateFromProps(props, state) {
     if (!isEqual(removeFnFromProps(props, ['onOk', 'onCancel', 'onChange']), removeFnFromProps(state.prevProps, ['onOk', 'onCancel', 'onChange']))) {
@@ -51,11 +50,10 @@ export default class Picker extends Component<PickerProps, PickerState> {
 
   onChange = (selected) => {
     const { valueMember, onChange } = this.props;
+    const { stopScroll } = this.state;
     const value = selected.map((item) => item[valueMember!]);
-    this.setState({
-      value,
-      objValue: selected,
-    });
+    const stateData = stopScroll ? { value, objValue: selected, stopScroll: false } : { value, objValue: selected };
+    this.setState(stateData);
 
     if (typeof onChange === 'function') {
       onChange(selected);
@@ -74,33 +72,24 @@ export default class Picker extends Component<PickerProps, PickerState> {
     }
   };
 
-  onOk = () => {
-    if (this.isScrolling) {
-      return false;
-    }
-    const { value, objValue = [] } = this.state;
+  onOk = async () => {
     this.setState({
-      value,
-      objValue,
+      stopScroll: true,
     });
 
-    const { onOk } = this.props;
-    if (typeof onOk === 'function') {
-      onOk(objValue);
-    }
-  };
+    setTimeout(() => {
+      const { objValue } = this.state;
 
-  onTransition = (isScrolling) => {
-    const { onTransition } = this.props;
-    this.isScrolling = isScrolling;
-    if (typeof onTransition === 'function') {
-      onTransition(isScrolling);
-    }
+      const { onOk } = this.props;
+      if (typeof onOk === 'function') {
+        onOk(objValue);
+      }
+    }, 0);
   };
 
   render() {
     const { prefixCls, className, cancelText, okText, title, locale, maskClosable, mountContainer, destroy, onOk, onCancel, visible, ...others } = this.props;
-    const { value } = this.state;
+    const { value, stopScroll = false } = this.state;
     const noop = () => {};
     return (
       <Popup
@@ -120,7 +109,7 @@ export default class Picker extends Component<PickerProps, PickerState> {
             {...others}
             value={value}
             onChange={this.onChange}
-            onTransition={(isScrolling) => { this.onTransition(isScrolling); }}
+            stopScroll={stopScroll}
           />
         </div>
       </Popup>

diff --git a/components/picker/PropsType.tsx b/components/picker/PropsType.tsx
@@ -2,7 +2,7 @@ import BasePickerViewProps from '../picker-view/PropsType';
 import { Locale } from '../config-provider/PropsType';
 import { ContainerType } from '../utils/dom';
 
-export default interface BasePickerProps extends Omit<BasePickerViewProps, 'onChange'> {
+export default interface BasePickerProps extends Omit<BasePickerViewProps, 'onChange' | 'stopScroll'> {
   visible?: boolean;
   title?: string;
   okText?: string;

diff --git a/components/picker/demo.md b/components/picker/demo.md
@@ -10,6 +10,9 @@ import { Cell, Button, Picker, Toast } from 'zarm';
 const SINGLE_DATA = [
   { value: '1', label: '选项一' },
   { value: '2', label: '选项二' },
+  { value: '3', label: '选项三' },
+  { value: '4', label: '选项四' },
+  { value: '5', label: '选项五' },
 ];
 
 // 普通多列数据

diff --git a/components/wheel/PropsType.tsx b/components/wheel/PropsType.tsx
@@ -1,10 +1,10 @@
-export interface BaseWheelProps {
+export default interface BaseWheelProps {
   value?: string | number;
   defaultValue?: string | number;
   valueMember?: string;
   dataSource: Array<{ [key: string]: any }>;
   onChange?: (value?: string | number) => void;
   itemRender?: (item?: { [key: string]: any }) => string;
   disabled?: boolean;
-  onTransition?: (value: boolean) => void;
+  stopScroll: boolean;
 }