fix(virtuallist): virtuallist event havnt remove when resize

yehuozhili · Jul 6, 2020 · 8bf623b · 8bf623b
1 parent e9fac51
commit 8bf623b
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 22 deletions.
diff --git a/src/components/CheckBox/checkbox.stories.mdx b/src/components/CheckBox/checkbox.stories.mdx
@@ -37,6 +37,14 @@ import {CheckBoxExample} from './checkbox.example'
     </Story>
 </Preview>
 
+## 无文字 notext
+
+<Preview>
+    <Story name='notext'> 
+        <CheckBox data={['check1','check2','check3']}  text={false}></CheckBox>
+    </Story>
+</Preview>
+
 ## 全选 
 
 全选需要自行封装，利用checkbox的状态转移来制作，排斥等特殊规则制作同理：👇

diff --git a/src/components/CheckBox/checkbox.tsx b/src/components/CheckBox/checkbox.tsx
@@ -16,6 +16,8 @@ interface CheckBoxProps {
 	parentSetStateCallback?: (e: boolean[], index: number) => void;
 	/**控制转移的state */
 	parentState?: Array<boolean>;
+	/** 是否显示文字 */
+	text?: boolean;
 }
 
 function CheckBox(props: PropsWithChildren<CheckBoxProps>) {
@@ -26,7 +28,8 @@ function CheckBox(props: PropsWithChildren<CheckBoxProps>) {
 		className,
 		disableIndex,
 		parentSetStateCallback,
-		parentState
+		parentState,
+		text
 	} = props;
 	const classes = classnames("bigbear-checkbox-wrapper", className);
 
@@ -79,7 +82,7 @@ function CheckBox(props: PropsWithChildren<CheckBoxProps>) {
 								judgeStateIndex ? "checkbox-active" : ""
 							}`}
 						></span>
-						<span className={"bigbear-checkbox-value"}>{value}</span>
+						{text ? <span className={"bigbear-checkbox-value"}>{value}</span> : null}
 					</label>
 				);
 			})}
@@ -88,7 +91,8 @@ function CheckBox(props: PropsWithChildren<CheckBoxProps>) {
 }
 
 CheckBox.defaultProps = {
-	data: []
+	data: [],
+	text: true
 };
 
 export default CheckBox;
diff --git a/src/components/Input/input.stories.mdx b/src/components/Input/input.stories.mdx
@@ -29,6 +29,7 @@ input本身是受控组件，可以通过传递setValueCallback使得状态转
         <Input  value={'defaultvalue'}></Input>
         <Input prepend='focus' refcallback={(ref)=>ref.current.focus()}></Input>
         <Input prepend={<Button>按钮</Button>} append={<Button><Icon icon='search'></Icon></Button>} ></Input>
+         <Input height='50px' prepend={<Button>高度height</Button>} append={<Button><Icon icon='search'></Icon></Button>} ></Input>
     </div>
 </Story>
 </Preview>

diff --git a/src/components/Input/input.tsx b/src/components/Input/input.tsx
@@ -26,6 +26,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLElement> {
 	setValueCallback?: (v: string) => void;
 	/** 父组件接管状态时传递 */
 	value?: string | undefined;
+	/** 组件高度*/
+	height?: string;
 }
 
 export const Input: FC<InputProps> = (props: InputProps) => {
@@ -39,6 +41,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 		refcallback,
 		setValueCallback,
 		value,
+		height,
 		...restProps
 	} = props;
 	const cnames = classNames("bigbear-input-wrapper", {
@@ -54,9 +57,14 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 
 	return (
 		<div className={cnames} style={style}>
-			{prepend && <div className="bigbear-input-group-prepend">{prepend}</div>}
+			{prepend && (
+				<div className="bigbear-input-group-prepend" style={{ height }}>
+					{prepend}
+				</div>
+			)}
 			<input
 				ref={ref}
+				style={{ height }}
 				className="bigbear-input-inner"
 				disabled={disabled}
 				value={setValueCallback ? value : inputvalue}
@@ -66,7 +74,11 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 				}}
 				{...restProps}
 			/>
-			{append && <div className="bigbear-input-group-append">{append}</div>}
+			{append && (
+				<div className="bigbear-input-group-append" style={{ height }}>
+					{append}
+				</div>
+			)}
 		</div>
 	);
 };

diff --git a/src/components/InputNumber/_style.scss b/src/components/InputNumber/_style.scss
@@ -20,6 +20,9 @@
             border-radius: 5px;
             .bigbear-input-inner{
                 text-align: center;
+                width: 5px;
+                font-size: $font-size-sm;
+                padding:0
             }
         }
     }

diff --git a/src/components/InputNumber/inputnumber.stories.mdx b/src/components/InputNumber/inputnumber.stories.mdx
@@ -42,6 +42,16 @@ import   InputNumber  from './inputnumber';
     </Story>
 </Preview>
 
+## 按钮样式
+<Preview>
+    <Story name='default6'>
+        <InputNumber 
+        inputWidth={30}
+        extraWidth={5}
+        btnProps={{btnType:'primary',size:'sm'}}
+        initialVisible={true} inputNumberCallback={(e)=>console.log(e)} ></InputNumber>
+    </Story>
+</Preview>
 
 ## 属性详情
 

diff --git a/src/components/InputNumber/inputnumber.tsx b/src/components/InputNumber/inputnumber.tsx
@@ -2,29 +2,39 @@ import React, { useState } from "react";
 import Icon from "../Icon";
 import Button from "../Button";
 import Input, { InputProps } from "../Input/input";
+import { ButtonProps } from "../Button/button";
+
+function betterparseInt(value: string) {
+	let res = parseInt(value);
+	if (isNaN(res)) {
+		return 0;
+	} else {
+		return res;
+	}
+}
 
 function transformCalc(value: string, add: boolean, tmp: number) {
 	if (add) {
-		return parseInt(value) + tmp + "";
+		return betterparseInt(value) + tmp + "";
 	} else {
-		return parseInt(value) - tmp + "";
+		return betterparseInt(value) - tmp + "";
 	}
 }
 function transformString(v: string, maxNumber: number | undefined, minNumber: number | undefined) {
 	if (v === "") {
 		return "";
 	} else {
-		if (maxNumber && parseInt(v) > maxNumber) {
+		if (maxNumber && betterparseInt(v) > maxNumber) {
 			return maxNumber + "";
 		}
-		if (minNumber && parseInt(v) < minNumber) {
+		if (minNumber && betterparseInt(v) < minNumber) {
 			return minNumber + "";
 		}
-		return parseInt(v) + "";
+		return betterparseInt(v) + "";
 	}
 }
 
-export interface InputNumberProps extends Omit<InputProps, "value"> {
+export interface InputNumberProps extends Omit<InputProps, "defaultValue"> {
 	/** 容器宽度*/
 	width?: number;
 	/**输入框宽度 */
@@ -40,11 +50,15 @@ export interface InputNumberProps extends Omit<InputProps, "value"> {
 	/** 最小下限 */
 	minNumber?: number;
 	/** 初始值*/
-	defaultValue?: string;
+	defaultValue?: number;
 	/** 控制2个按钮初始状态 */
 	initialVisible?: boolean;
 	/** 外层容器类名 */
 	className?: string;
+	/** 两边按钮配置属性*/
+	btnProps?: ButtonProps;
+	/** input的高*/
+	height: string;
 	/** 不使用内部验证器，自定义验证器*/
 	customValidate?: (e: string, setState: React.Dispatch<React.SetStateAction<string>>) => string;
 }
@@ -66,9 +80,11 @@ function InputNumber(props: InputNumberProps) {
 		defaultValue,
 		initialVisible,
 		className,
+		btnProps,
+		height,
 		...restProps
 	} = props;
-	const [state, setState] = useState(defaultValue!);
+	const [state, setState] = useState(defaultValue! + "");
 	const [visible, setVisible] = useState(initialVisible!);
 	const handleOnchange = (e: string) => {
 		if (customValidate) {
@@ -88,7 +104,10 @@ function InputNumber(props: InputNumberProps) {
 		}
 	};
 	return (
-		<div className={`bigbear-inputnumber-wrapper ${className}`} style={{ width }}>
+		<div
+			className={`bigbear-inputnumber-wrapper ${className ? className : ""}`}
+			style={{ width }}
+		>
 			<div
 				className={`bigbear-inputnumber-prev`}
 				style={{ display: visible ? "inline-block" : "none" }}
@@ -105,6 +124,7 @@ function InputNumber(props: InputNumberProps) {
 							return res;
 						})
 					}
+					{...btnProps}
 				>
 					<Icon icon="angle-left"></Icon>
 				</Button>
@@ -117,7 +137,12 @@ function InputNumber(props: InputNumberProps) {
 					setVisible(!visible);
 				}}
 			>
-				<Input value={state} setValueCallback={handleOnchange} {...restProps}></Input>
+				<Input
+					value={state}
+					setValueCallback={handleOnchange}
+					{...{ height: height }}
+					{...restProps}
+				></Input>
 			</div>
 			<div
 				className="bigbear-inputnumber-next"
@@ -135,6 +160,7 @@ function InputNumber(props: InputNumberProps) {
 							return res;
 						})
 					}
+					{...btnProps}
 				>
 					<Icon icon="angle-right"></Icon>
 				</Button>
@@ -148,8 +174,9 @@ InputNumber.defaultProps = {
 	inputWidth: 50,
 	extraWidth: 20,
 	step: 1,
-	defaultValue: "0",
-	initialVisible: false
+	defaultValue: 0,
+	initialVisible: false,
+	height: "32px"
 };
 
 export default InputNumber;
diff --git a/src/components/Table/_style.scss b/src/components/Table/_style.scss
@@ -16,6 +16,7 @@
 
                 padding:10px;
                 position: relative;
+                text-align: center;
                 .bigbear-table-icon{
                     cursor: pointer;
                     position: absolute;
@@ -36,8 +37,9 @@
                 }
                 .bigbear-table-data-item{
                     @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
-
-                    padding: 10px;
+                    text-align: center;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
                 }
             }
         }

diff --git a/src/components/VirtualList/virtuallist.tsx b/src/components/VirtualList/virtuallist.tsx
@@ -107,13 +107,13 @@ function VirtualList(props: Props) {
 				});
 			});
 		};
+		const combinedFunc = throttle(scrollFunc, props.delay!);
 		if (props.scrollDom) {
-			props.scrollDom.addEventListener("scroll", throttle(scrollFunc, props.delay!));
+			props.scrollDom.addEventListener("scroll", combinedFunc);
 		}
 		if (props.onloadFunc) props.onloadFunc();
 		return () => {
-			if (props.scrollDom)
-				props.scrollDom.removeEventListener("scroll", throttle(scrollFunc, props.delay!));
+			if (props.scrollDom) props.scrollDom.removeEventListener("scroll", combinedFunc);
 		};
 	}, [props]);
 	return (