diff --git a/src/components/CheckBox/checkbox.stories.mdx b/src/components/CheckBox/checkbox.stories.mdx index 1e8d71b..944d0f1 100644 --- a/src/components/CheckBox/checkbox.stories.mdx +++ b/src/components/CheckBox/checkbox.stories.mdx @@ -37,6 +37,14 @@ import {CheckBoxExample} from './checkbox.example' +## 无文字 notext + + + + + + + ## 全选 全选需要自行封装,利用checkbox的状态转移来制作,排斥等特殊规则制作同理:👇 diff --git a/src/components/CheckBox/checkbox.tsx b/src/components/CheckBox/checkbox.tsx index f060c66..a14d822 100644 --- 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; + /** 是否显示文字 */ + text?: boolean; } function CheckBox(props: PropsWithChildren) { @@ -26,7 +28,8 @@ function CheckBox(props: PropsWithChildren) { className, disableIndex, parentSetStateCallback, - parentState + parentState, + text } = props; const classes = classnames("bigbear-checkbox-wrapper", className); @@ -79,7 +82,7 @@ function CheckBox(props: PropsWithChildren) { judgeStateIndex ? "checkbox-active" : "" }`} > - {value} + {text ? {value} : null} ); })} @@ -88,7 +91,8 @@ function CheckBox(props: PropsWithChildren) { } 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 index 75720e4..0a03420 100644 --- a/src/components/Input/input.stories.mdx +++ b/src/components/Input/input.stories.mdx @@ -29,6 +29,7 @@ input本身是受控组件,可以通过传递setValueCallback使得状态转 ref.current.focus()}> 按钮} append={} > + 高度height} append={} > diff --git a/src/components/Input/input.tsx b/src/components/Input/input.tsx index d0ab38d..b322b83 100644 --- a/src/components/Input/input.tsx +++ b/src/components/Input/input.tsx @@ -26,6 +26,8 @@ export interface InputProps extends InputHTMLAttributes { setValueCallback?: (v: string) => void; /** 父组件接管状态时传递 */ value?: string | undefined; + /** 组件高度*/ + height?: string; } export const Input: FC = (props: InputProps) => { @@ -39,6 +41,7 @@ export const Input: FC = (props: InputProps) => { refcallback, setValueCallback, value, + height, ...restProps } = props; const cnames = classNames("bigbear-input-wrapper", { @@ -54,9 +57,14 @@ export const Input: FC = (props: InputProps) => { return (
- {prepend &&
{prepend}
} + {prepend && ( +
+ {prepend} +
+ )} = (props: InputProps) => { }} {...restProps} /> - {append &&
{append}
} + {append && ( +
+ {append} +
+ )}
); }; diff --git a/src/components/InputNumber/_style.scss b/src/components/InputNumber/_style.scss index c3cc9ca..5e41a32 100644 --- 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 index 84511db..60634d2 100644 --- a/src/components/InputNumber/inputnumber.stories.mdx +++ b/src/components/InputNumber/inputnumber.stories.mdx @@ -42,6 +42,16 @@ import InputNumber from './inputnumber'; +## 按钮样式 + + + console.log(e)} > + + ## 属性详情 diff --git a/src/components/InputNumber/inputnumber.tsx b/src/components/InputNumber/inputnumber.tsx index eecc5c8..d58e839 100644 --- 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 { +export interface InputNumberProps extends Omit { /** 容器宽度*/ width?: number; /**输入框宽度 */ @@ -40,11 +50,15 @@ export interface InputNumberProps extends Omit { /** 最小下限 */ minNumber?: number; /** 初始值*/ - defaultValue?: string; + defaultValue?: number; /** 控制2个按钮初始状态 */ initialVisible?: boolean; /** 外层容器类名 */ className?: string; + /** 两边按钮配置属性*/ + btnProps?: ButtonProps; + /** input的高*/ + height: string; /** 不使用内部验证器,自定义验证器*/ customValidate?: (e: string, setState: React.Dispatch>) => 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 ( -
+
@@ -117,7 +137,12 @@ function InputNumber(props: InputNumberProps) { setVisible(!visible); }} > - +
@@ -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 index e25fd89..bcbdbf2 100644 --- 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 index a94f184..4243dd3 100644 --- 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 (