From c8c43e3dc181a4736396db1d1e0bfe65475ceeff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Thu, 3 Mar 2022 18:25:07 +0800 Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=E7=BB=84=E4=BB=B6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98=EF=BC=9ASteps=20=E7=82=B9=E7=8A=B6?= =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E6=9D=A1=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20#554?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-steps/src/Step.tsx | 22 ++++++++++++---------- packages/react-steps/src/Steps.tsx | 6 +++--- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/react-steps/src/Step.tsx b/packages/react-steps/src/Step.tsx index b47a45387a..9cda70ff20 100644 --- a/packages/react-steps/src/Step.tsx +++ b/packages/react-steps/src/Step.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties } from 'react'; -import Icon, { IconProps } from '@uiw/react-icon'; +import Icon, { IconProps, IconsName } from '@uiw/react-icon'; import { IProps, HTMLDivProps } from '@uiw/utils'; import './style/index.less'; @@ -57,14 +57,16 @@ export default function Step(props: StepProps) { } else if ((icon && typeof icon === 'string') || status === 'finish' || status === 'error') { iconNode = ( ); } else { @@ -73,7 +75,7 @@ export default function Step(props: StepProps) { return (
- +
diff --git a/packages/react-steps/src/Steps.tsx b/packages/react-steps/src/Steps.tsx index 599abd866f..962e02d747 100644 --- a/packages/react-steps/src/Steps.tsx +++ b/packages/react-steps/src/Steps.tsx @@ -3,8 +3,8 @@ import { IProps, HTMLDivProps } from '@uiw/utils'; import Step, { StepProps } from './Step'; export interface StepsProps extends IProps, HTMLDivProps { - status?: StepProps['status']; - progressDot?: StepProps['progressDot']; + status?: StepProps['status']; + progressDot?: StepProps['progressDot']; direction?: 'horizontal' | 'vertical'; /** * 指定当前步骤，从 `0` 开始记数。 @@ -71,7 +71,7 @@ function InternalSteps(props: StepsProps) { childProps.className = `${prefixCls}-next-error`; } if (!child.props.status) { - if (index === current) { + if (index === current!) { childProps.status = status; } else if (index < (current as number)) { childProps.status = 'finish'; From 81c604856fa99831781451eca8e26e605bf3c955 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Fri, 4 Mar 2022 10:15:39 +0800 Subject: [PATCH 02/16] =?UTF-8?q?chore:=20form=E6=94=AF=E6=8C=81TreeChecke?= =?UTF-8?q?d=20=E6=A0=91=E5=BD=A2=E9=80=89=E6=8B=A9=E6=8E=A7=E4=BB=B6=20#6?= =?UTF-8?q?05?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/src/routes/components/form/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/src/routes/components/form/index.tsx b/website/src/routes/components/form/index.tsx index 432704d064..2d4b797b19 100755 --- a/website/src/routes/components/form/index.tsx +++ b/website/src/routes/components/form/index.tsx @@ -17,6 +17,7 @@ import { Notify, Menu, Dropdown, + TreeChecked, } from 'uiw'; import Markdown from '../../../components/Markdown'; @@ -41,6 +42,7 @@ export default function Page() { Textarea, Notify, Menu, + TreeChecked, Dropdown, useRef, }} From 27245dd2ae2dd603dc4f134ca68af34c036b6c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Fri, 4 Mar 2022 14:09:29 +0800 Subject: [PATCH 03/16] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0TreeChecked=20#605?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-tree-checked/README.md | 113 ++++++++++++++++++ packages/react-tree/src/index.tsx | 14 ++- .../routes/components/tree-checked/index.tsx | 6 +- 3 files changed, 126 insertions(+), 7 deletions(-) diff --git a/packages/react-tree-checked/README.md b/packages/react-tree-checked/README.md index 37e7b618b1..90729c051d 100644 --- a/packages/react-tree-checked/README.md +++ b/packages/react-tree-checked/README.md @@ -109,6 +109,119 @@ const Demo = () => ( ReactDOM.render(, _mount_); ``` +### 表单使用 + + +```jsx +import React, { useState, useRef } from "react"; +import ReactDOM from 'react-dom'; +import { Form, Input, Row, Col, TreeChecked, Slider, Button, Notify } from 'uiw'; + +const data = [ + { + label: '湖北省', + key: '0-0-0', + children:[ + { + label: '武汉市', + key: '0-1-0', + children:[ + { label: '新洲区', key: '0-1-1', disabled: true }, + { label: '武昌区', key: '0-1-2' }, + { + label: '汉南区', + key: '0-1-3', + children:[ + { label: '汉南区1', key: '0-1-3-1' }, + { label: '汉南区2', key: '0-1-3-2' }, + { label: '汉南区3', key: '0-1-3-3' }, + ] + }, + ] + }, + { label: '黄冈市', key: '0-2-0' }, + { + label: '黄石市', + key: '0-3-0', + children:[ + { label: '青山区', key: '0-3-1' }, + { label: '黄陂区', key: '0-3-2' }, + { label: '青山区', key: '0-3-3' }, + ] + }, + ] + }, + { label: '澳门', key: '3' }, +]; + +function Demo() { + const form = useRef() + + const onSubmit = () => { + form.current.onSubmit() + } + const resetForm = () => { + form.current.resetForm() + } + const getFieldValues = () => { + console.log('getFieldValues', form.current.getFieldValues()) + } + + const setFieldValue=()=>{ + form.current.setFieldValue('name','UIW') + } + + return ( +
+
{ + console.log('onChange', initial, current); + }} + onSubmit={({ initial, current }) => { + if (current.tree === initial.tree) { + Notify.error({ + title: '提交失败！', + description: `表单提交内容为空！`, + }); + } else { + Notify.success({ + title: '提交成功！', + }); + } + }} + fields={{ + tree: { + label: "树", + initialValue: ['3'], + children: + } + }} + > + {({ fields, state, canSubmit }) => { + return ( +
+ + {fields.tree} + + + + + + +
+ ) + }} + +
+ ) +} +ReactDOM.render(, _mount_); +``` + ## Props 完全继承 [Tree](#/components/Tree) 组件属性，默认初始值不一样，下面仅列出默认不一致的 Props。 diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx index 57fb1236a0..a9bb2a4229 100644 --- a/packages/react-tree/src/index.tsx +++ b/packages/react-tree/src/index.tsx @@ -12,7 +12,7 @@ export type TreeRenderTitleNode = { selectedKeys?: TreeProps['selectedKeys']; }; -export interface TreeProps extends IProps, HTMLDivProps { +export interface TreeProps extends IProps, Omit { icon?: IconProps['type']; data?: TreeData[]; openKeys?: TreeData['key'][]; @@ -45,6 +45,8 @@ export interface TreeProps extends IProps, HTMLDivProps { item: TreeData, evn: React.MouseEvent, ) => void; + onChange?: (keys: (string | number | undefined)[]) => void; + value?: TreeData['key'][]; } export interface TreeData { @@ -137,16 +139,19 @@ export default function Tree(props: TreeProps) { className, autoExpandParent = true, renderTitle, + onChange, ...elementProps } = props; const [curOpenKeys, setCurOpenKeys] = useState(openKeys); - const [curSelectedKeys, setCurSelectedKeys] = useState(selectedKeys); + const [curSelectedKeys, setCurSelectedKeys] = useState(props.value || selectedKeys); useEffect(() => { setCurSelectedKeys(props.selectedKeys || []); }, [JSON.stringify(props.selectedKeys)]); - + useEffect(() => { + setCurSelectedKeys(props.value || []); + }, [JSON.stringify(props.value)]); // useEffect(() => setCurOpenKeys(openKeys), [openKeys]); // useEffect(() => setCurSelectedKeys(selectedKeys), [selectedKeys]); @@ -155,7 +160,7 @@ export default function Tree(props: TreeProps) { if (defaultExpandAll) { arrOpenKeys = getChildKeys(data); } else if (autoExpandParent) { - arrOpenKeys.push(...getChildKeys(data, undefined, 1)); + arrOpenKeys.push(...getChildKeys(data || [], undefined, 1)); } setCurOpenKeys(arrOpenKeys); }, []); @@ -209,6 +214,7 @@ export default function Tree(props: TreeProps) { } setCurSelectedKeys(selKeys); onSelected && onSelected(selKeys, item.key, selected, item, evn); + onChange?.(selKeys); } return (
diff --git a/website/src/routes/components/tree-checked/index.tsx b/website/src/routes/components/tree-checked/index.tsx index 80b40e9143..70cf8e806f 100644 --- a/website/src/routes/components/tree-checked/index.tsx +++ b/website/src/routes/components/tree-checked/index.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import { TreeChecked, Row, Col, Card, Icon } from 'uiw'; +import React, { useRef } from 'react'; import Markdown from '../../../components/Markdown'; +import { Form, Input, Row, Col, TreeChecked, Slider, Button, Notify } from 'uiw'; export default () => ( { const md = await import('uiw/node_modules/@uiw/react-tree-checked/README.md'); return md.default || md; From c4b2470237bd89aec8576137d3a6e0ec6d74dba9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Mon, 7 Mar 2022 17:52:14 +0800 Subject: [PATCH 04/16] =?UTF-8?q?fix(Table):=20=20footer=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E5=86=85=E7=9A=84=E5=85=83=E7=B4=A0=EF=BC=8C=E5=92=8CTable?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E9=95=BF=E5=BA=A6=E4=B8=8D=E4=B8=80=E8=87=B4?= =?UTF-8?q?=20#621?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-table/src/index.tsx | 92 +++++++++++++++--------------- 1 file changed, 47 insertions(+), 45 deletions(-) diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx index 0ca040f16e..4518e135c4 100644 --- a/packages/react-table/src/index.tsx +++ b/packages/react-table/src/index.tsx @@ -69,54 +69,56 @@ export default (props: TableProps = {}) => { const { header, render, ellipsis } = getLevelItems(columns); const keys = getAllColumnsKeys(columns); return ( -
- - {title && } - {columns && columns.length > 0 && } - {data && data.length > 0 && ( - - {data.map((trData, rowNum) => ( - - {keys.map((keyName, colNum) => { - let objs: React.TdHTMLAttributes = { - children: trData[keyName], - }; - if (render[keyName]) { - const child = render[keyName](trData[keyName], keyName, trData, rowNum, colNum); - if (React.isValidElement(child)) { - objs.children = child; - } else { - if (child.props) { - objs = { ...child.props, children: objs.children }; - if (child.props.rowSpan === 0 || child.props.colSpan === 0) return null; - } - if (child.children) { - objs.children = child.children; +
+
+
{title}
+ {title && } + {columns && columns.length > 0 && } + {data && data.length > 0 && ( + + {data.map((trData, rowNum) => ( + + {keys.map((keyName, colNum) => { + let objs: React.TdHTMLAttributes = { + children: trData[keyName], + }; + if (render[keyName]) { + const child = render[keyName](trData[keyName], keyName, trData, rowNum, colNum); + if (React.isValidElement(child)) { + objs.children = child; + } else { + if (child.props) { + objs = { ...child.props, children: objs.children }; + if (child.props.rowSpan === 0 || child.props.colSpan === 0) return null; + } + if (child.children) { + objs.children = child.children; + } } } - } - if (ellipsis && ellipsis[keyName]) { - objs.className = `${prefixCls}-ellipsis`; - } - return ( - + ))} + + )} + {data && data.length === 0 && empty && ( + + + - ))} - - )} - {data && data.length === 0 && empty && ( - - - - - - )} - {props.children} -
{title}
onCell(trData, { rowNum, colNum, keyName }, evn)} /> - ); - })} + if (ellipsis && ellipsis[keyName]) { + objs.className = `${prefixCls}-ellipsis`; + } + return ( + onCell(trData, { rowNum, colNum, keyName }, evn)} /> + ); + })} +
+ {empty} +
- {empty} -
+ + )} + {props.children} + +
{footer &&
{footer}
}
); From 01265786225a20fcc575ece95f1abbb3758bbe0e Mon Sep 17 00:00:00 2001 From: WmW <48251883+nullptr-z@users.noreply.github.com> Date: Tue, 8 Mar 2022 10:07:33 +0800 Subject: [PATCH 05/16] =?UTF-8?q?feat(Tabs):=20=E9=80=89=E9=A1=B9=E5=8D=A1?= =?UTF-8?q?=E8=BF=87=E5=A4=9A,=E8=B6=85=E8=BF=87=E5=AE=BD=E5=BA=A6?= =?UTF-8?q?=E6=97=B6,=E6=94=B6=E7=BC=A9=E8=B6=85=E5=87=BA=E9=83=A8?= =?UTF-8?q?=E5=88=86=20#559=20(#626)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-tabs/README.md | 44 ++++++- packages/react-tabs/package.json | 1 + packages/react-tabs/src/index.tsx | 154 +++++++++++++++++------ packages/react-tabs/src/style/index.less | 11 ++ 4 files changed, 170 insertions(+), 40 deletions(-) diff --git a/packages/react-tabs/README.md b/packages/react-tabs/README.md index 05fb130aca..c4eb458f34 100644 --- a/packages/react-tabs/README.md +++ b/packages/react-tabs/README.md @@ -146,7 +146,45 @@ class Demo extends React.Component { ReactDOM.render(, _mount_); ``` -## Tabs.Porps +### 超出收缩 + +当pane过多,超出宽度度时,会将超出部分收缩到下拉选项 + + +```jsx +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Tabs } from 'uiw'; + +class Demo extends React.Component { + +render() { + const panes=[] + for (let index = 0; index < 20; index++) { + panes.push({label:`Tabs-${index}`,key:index}) + } + + return ( + { + console.log("=>", key, tab); + }}> + {panes.map(item=>{ + return( + {item.label} + ) + })} + + ); + } +} +ReactDOM.render(, _mount_); +``` + + +## Tabs.Porps | 参数 | 说明 | 类型 | 默认值 | |------ |-------- |---------- |-------- | @@ -154,10 +192,10 @@ ReactDOM.render(, _mount_); | activeKey | 当前激活 `tab` 面板的 `key` | String | - | | onTabClick | `tab` 被点击的回调 | Function | `(item, key, e)=>{}` | -## Tabs.Pane.Porps +## Tabs.Pane.Porps | 参数 | 说明 | 类型 | 默认值 | |------ |-------- |---------- |-------- | | label | 选项卡标题 | String,Node | - | | key | 对应 activeKey | String,Node | - | -| disabled | 标签是禁用不可点击 | Boolean | `false` | \ No newline at end of file +| disabled | 标签是禁用不可点击 | Boolean | `false` | diff --git a/packages/react-tabs/package.json b/packages/react-tabs/package.json index 5238248575..28a7d43871 100644 --- a/packages/react-tabs/package.json +++ b/packages/react-tabs/package.json @@ -44,6 +44,7 @@ "react-dom": ">=16.9.0" }, "dependencies": { + "@uiw/react-popover": "^4.13.7", "@uiw/utils": "^4.13.7" } } diff --git a/packages/react-tabs/src/index.tsx b/packages/react-tabs/src/index.tsx index 1639921ee3..959716cce7 100644 --- a/packages/react-tabs/src/index.tsx +++ b/packages/react-tabs/src/index.tsx @@ -1,7 +1,8 @@ -import React, { useEffect, useState, useRef } from 'react'; +import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react'; import { IProps, HTMLDivProps } from '@uiw/utils'; import Pane from './Pane'; import './style/index.less'; +import Popover from '@uiw/react-popover'; export * from './Pane'; @@ -15,6 +16,14 @@ export interface TabsProps extends IProps, HTMLDivProps { onTabClick?: (key: string, item: React.ReactElement, e: React.MouseEvent) => void; } +type flowNavType = { + content: number; + nav: Array>; + flowLeft: number; + displayStart: number; + displayEnd: number; +}; + export default function Tabs(props: TabsProps) { const { prefixCls = 'w-tabs', @@ -25,11 +34,70 @@ export default function Tabs(props: TabsProps) { onTabClick, ...elementProps } = props; + const [activeKey, setActiveKey] = useState(props.activeKey); const [slideStyle, setSlideStyle] = useState({ width: 0, left: 0 }); const activeItem = useRef(); const cls = [prefixCls, className, type ? `${prefixCls}-${type}` : null].filter(Boolean).join(' ').trim(); + const [flowNav, flowNavSet] = useState({ + content: 0, + nav: [], + flowLeft: -1, + displayStart: 0, + displayEnd: 0, + }); + const [hiddenNav, hiddenNavSet] = useState>([]); + const deviation = 15; + + const [nodes, nodesSet] = useState(); + const divContentRef = useCallback((node) => { + if (node !== null) { + nodesSet(nodes); + node.addEventListener('scroll', (e: any) => { + const { clientWidth, scrollLeft } = e.target; + flowNav.displayStart = scrollLeft; + flowNav.displayEnd = clientWidth + scrollLeft; + flowNavSet({ ...flowNav }); + }); + flowNav.displayEnd = node.getBoundingClientRect().width; + flowNavSet({ ...flowNav }); + } + }, []); + + const divNavRef = useCallback((node, key: number) => { + if (node !== null) { + node.addEventListener('click', (e: any) => { + activeItem.current = node; + }); + divNavWidthChange(node.getBoundingClientRect().width, key); + } + }, []); + + const divNavWidthChange = (width: number, index: number) => { + let curWidth = 0; + flowNav.nav.slice(0, index + 1).forEach((nav) => (curWidth += nav.width)); + flowNav.nav[index] = { width, curWidth: Math.floor(curWidth), index }; + flowNavSet(flowNav); + }; + + useEffect(() => { + showHideenNav(); + }, [flowNav.displayEnd > flowNav.nav[flowNav.nav.length - 1]?.curWidth]); + + const showHideenNav = () => { + const hiddenNav: Array = []; + if (flowNav.nav.length > 0) { + flowNav.nav.forEach((item) => { + const curWidth = item.curWidth - deviation; + if (curWidth < flowNav.displayStart || curWidth > flowNav.displayEnd) { + hiddenNav.push(item.index); + } + }); + hiddenNavSet(hiddenNav); + } + }; + useEffect(() => setActiveKey(props.activeKey), [props.activeKey]); useEffect(() => calcSlideStyle(), [activeKey]); @@ -44,44 +112,29 @@ export default function Tabs(props: TabsProps) { return (
-
-
- {React.Children.map(children as React.ReactElement[], (item: React.ReactElement, key: number) => { - if (!item) { - return null; - } - const divProps: HTMLDivProps = { - className: [ - `${prefixCls}-item`, - item.key === activeKey ? 'active' : null, - item.props.disabled ? 'disabled' : null, - ] - .filter(Boolean) - .join(' ') - .trim(), - children: item.props.label, - }; - if (!item.props.disabled) { - divProps.onClick = (e: React.MouseEvent) => { - setActiveKey(item.key as string); - onTabClick && onTabClick(item.key as string, item, e); - calcSlideStyle(); - }; - } - return ( -
{ - if (node && item.key === activeKey) { - activeItem.current = node; - } - }} - {...divProps} - /> - ); - })} +
+
+
+ {renderNav(children)} +
+ {hiddenNav.length > 0 && ( + + {renderNav(hiddenNav.map((idx) => (children as Array)[idx]))} +
+ } + > +
+ … +
+ + )}
{React.Children.map(children, (item: any) => { if (!item || activeKey !== item.key) { @@ -91,4 +144,31 @@ export default function Tabs(props: TabsProps) { })}
); + + function renderNav(children: React.ReactNode): React.ReactNode { + return React.Children.map(children as React.ReactElement[], (item: React.ReactElement, key: number) => { + if (!item) { + return null; + } + const divProps: HTMLDivProps = { + className: [ + `${prefixCls}-item`, + item.key === activeKey ? 'active' : null, + item.props.disabled ? 'disabled' : null, + ] + .filter(Boolean) + .join(' ') + .trim(), + children: item.props.label, + }; + if (!item.props.disabled) { + divProps.onClick = (e: React.MouseEvent) => { + setActiveKey(item.key as string); + onTabClick && onTabClick(item.key as string, item, e); + calcSlideStyle(); + }; + } + return
divNavRef(ref, key)} {...divProps} />; + }); + } } diff --git a/packages/react-tabs/src/style/index.less b/packages/react-tabs/src/style/index.less index 09ab8a4feb..9012b74c93 100644 --- a/packages/react-tabs/src/style/index.less +++ b/packages/react-tabs/src/style/index.less @@ -3,10 +3,15 @@ .@{w-tabs} { &-bar { position: relative; + overflow-x: auto; } &-nav { position: relative; } + &-nav-hidden { + display: flex; + flex-direction: column; + } &-item { padding: 7px 10px; display: inline-block; @@ -26,6 +31,12 @@ color: rgba(0, 0, 0, 0.25); } } + &-flow-content { + margin-left: 5px; + padding: 0px 10px 0px 10px; + box-shadow: 1px 0px 0px #d9d9d9 inset; + cursor: pointer; + } } .@{w-tabs} { From bb7f93fc7c5f17f2d0eb21403ef8cbd6296e2ae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Tue, 8 Mar 2022 11:22:18 +0800 Subject: [PATCH 06/16] =?UTF-8?q?chore(Form):=20Select=20=E8=B7=9FInput=20?= =?UTF-8?q?=E5=9C=A8=E8=A1=A8=E5=8D=95=E4=B8=AD=E4=BD=BF=E7=94=A8=EF=BC=8C?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80=20#622?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-form/src/style/form-item.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-form/src/style/form-item.less b/packages/react-form/src/style/form-item.less index d2d0a0d151..1948d1b741 100644 --- a/packages/react-form/src/style/form-item.less +++ b/packages/react-form/src/style/form-item.less @@ -10,6 +10,10 @@ color: #dc3545; } .w-input-inner, + .w-select, + .w-select-default, + .w-select:hover, + .w-select-default:hover, .w-input-inner:hover, .w-input-inner:focus.w-input-inner:hover, .w-textarea, From af0bef0ddcabed9a820a0b5564a05c49c2fe2a70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Tue, 8 Mar 2022 16:10:51 +0800 Subject: [PATCH 07/16] =?UTF-8?q?chore(Tabs):=20=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E5=BD=93pane=E8=BF=87=E6=97=B6=E7=9A=84=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1=EF=BC=8C=E4=BC=98=E5=8C=96=E4=B8=8B=E6=8B=89=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-tabs/src/index.tsx | 8 +++++--- packages/react-tabs/src/style/index.less | 4 ++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react-tabs/src/index.tsx b/packages/react-tabs/src/index.tsx index 959716cce7..78fa0e109c 100644 --- a/packages/react-tabs/src/index.tsx +++ b/packages/react-tabs/src/index.tsx @@ -113,9 +113,11 @@ export default function Tabs(props: TabsProps) { return (
-
-
- {renderNav(children)} +
+
+
+ {renderNav(children)} +
diff --git a/packages/react-tabs/src/style/index.less b/packages/react-tabs/src/style/index.less index 9012b74c93..6c884d76fb 100644 --- a/packages/react-tabs/src/style/index.less +++ b/packages/react-tabs/src/style/index.less @@ -4,12 +4,16 @@ &-bar { position: relative; overflow-x: auto; + height: calc(100% + 17px); } &-nav { position: relative; } &-nav-hidden { display: flex; + overflow-x: scroll; + padding: 5px 30px 5px 5px; + max-height: 200px; flex-direction: column; } &-item { From e137bd6475e9acc50a661112126771f1be5e0744 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Tue, 8 Mar 2022 16:27:10 +0800 Subject: [PATCH 08/16] =?UTF-8?q?chore(Tabs):=20=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E5=BD=93pane=E8=BF=87=E6=97=B6=E7=9A=84=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1=EF=BC=8C=E4=BC=98=E5=8C=96=E4=B8=8B=E6=8B=89=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-tabs/src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-tabs/src/index.tsx b/packages/react-tabs/src/index.tsx index 78fa0e109c..de92ac40a0 100644 --- a/packages/react-tabs/src/index.tsx +++ b/packages/react-tabs/src/index.tsx @@ -16,7 +16,7 @@ export interface TabsProps extends IProps, HTMLDivProps { onTabClick?: (key: string, item: React.ReactElement, e: React.MouseEvent) => void; } -type flowNavType = { +type FlowNavType = { content: number; nav: Array>; flowLeft: number; @@ -40,7 +40,7 @@ export default function Tabs(props: TabsProps) { const activeItem = useRef(); const cls = [prefixCls, className, type ? `${prefixCls}-${type}` : null].filter(Boolean).join(' ').trim(); - const [flowNav, flowNavSet] = useState({ + const [flowNav, flowNavSet] = useState({ content: 0, nav: [], flowLeft: -1, From 8f2f8918f19387bbba9db8eac04466fd84838a1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Tue, 8 Mar 2022 17:56:23 +0800 Subject: [PATCH 09/16] =?UTF-8?q?feat(Tree):=20=E5=88=9D=E5=A7=8B=E5=80=BC?= =?UTF-8?q?=E5=A4=B1=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-tree/src/index.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx index a9bb2a4229..780469a46b 100644 --- a/packages/react-tree/src/index.tsx +++ b/packages/react-tree/src/index.tsx @@ -140,20 +140,16 @@ export default function Tree(props: TreeProps) { autoExpandParent = true, renderTitle, onChange, + value, ...elementProps } = props; const [curOpenKeys, setCurOpenKeys] = useState(openKeys); - const [curSelectedKeys, setCurSelectedKeys] = useState(props.value || selectedKeys); + const [curSelectedKeys, setCurSelectedKeys] = useState(value || selectedKeys); useEffect(() => { - setCurSelectedKeys(props.selectedKeys || []); - }, [JSON.stringify(props.selectedKeys)]); - useEffect(() => { - setCurSelectedKeys(props.value || []); - }, [JSON.stringify(props.value)]); - // useEffect(() => setCurOpenKeys(openKeys), [openKeys]); - // useEffect(() => setCurSelectedKeys(selectedKeys), [selectedKeys]); + setCurSelectedKeys(props.value || props.selectedKeys || []); + }, [JSON.stringify(props.selectedKeys), JSON.stringify(props.value)]); useEffect(() => { let arrOpenKeys: TreeData['key'][] = [...curOpenKeys]; From 19c9c5e82358a894672d344466b00fc33c7adc36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Wed, 9 Mar 2022 16:04:31 +0800 Subject: [PATCH 10/16] =?UTF-8?q?chore(Tree):=20=E5=A2=9E=E5=8A=A0Tree?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8Form=E4=B8=AD=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E7=9A=84=E4=BE=8B=E5=AD=90,=E4=BF=AE=E6=94=B9Tree=20onChange?= =?UTF-8?q?=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-tree/README.md | 134 ++++++++++++++++++- packages/react-tree/src/index.tsx | 4 +- website/src/routes/components/tree/index.tsx | 4 +- 3 files changed, 137 insertions(+), 5 deletions(-) diff --git a/packages/react-tree/README.md b/packages/react-tree/README.md index d5bd08d878..f2e06abab3 100644 --- a/packages/react-tree/README.md +++ b/packages/react-tree/README.md @@ -18,7 +18,7 @@ import Tree from '@uiw/react-tree'; ```jsx import ReactDOM from 'react-dom'; -import { Tree, Card, Row, Col } from 'uiw'; +import { Tree, Card, Row, Col, } from 'uiw'; const data = [ { @@ -651,6 +651,138 @@ const Demo = () => ( ReactDOM.render(, _mount_); ``` + +### Form中使用 + + +```jsx +import ReactDOM from 'react-dom'; +import { Tree, Row, Col, Form, Button } from 'uiw'; + +const data = [ + { + label: '湖北省', + key: '0-0-0', + children:[ + { + label: '武汉市', + key: '0-1-0', + children:[ + { label: '新洲区', key: '0-1-1' }, + { label: '武昌区', key: '0-1-2' }, + { + label: '汉南区', + key: '0-1-3', + children:[ + { label: '汉南区1', key: '0-1-3-1' }, + { label: '汉南区2', key: '0-1-3-2' }, + { label: '汉南区3', key: '0-1-3-3' }, + ] + }, + ] + }, + { label: '黄冈市', key: '0-2-0' }, + { + label: '黄石市', + key: '0-3-0', + children:[ + { label: '青山区', key: '0-3-1' }, + { label: '黄陂区', key: '0-3-2' }, + { label: '青山区', key: '0-3-3' }, + ] + }, + ] + }, + { + label: '上海市', + key: '1-0-0', + children:[ + { label: '黄浦区', key: '1-0-1' }, + { label: '卢湾区', key: '1-0-2' }, + { + label: '徐汇区', + key: '1-0-3', + children:[ + { label: '半淞园路街道', key: '1-1-0' }, + { label: '南京东路街道', key: '1-2-0' }, + { label: '外滩街道', key: '1-3-0' }, + ] + }, + ] + }, + { + label: '北京市', + key: '2-0-0', + children:[ + { label: '东城区', key: '2-1-0' }, + { label: '西城区', key: '2-2-0' }, + ] + } +]; + +const Demo = () => { + return ( +
{}} + resetOnSubmit={false} + onSubmitError={(error) => error && error.filed ? { ...error.filed } : null} + onSubmit={({initial, current}) => { + console.log('current: ', current); + const ErrObj = {}; + if (current.tree === 'unknown') { + ErrObj.radioGroup = '请选择性别！'; + } + if(Object.keys(ErrObj).length > 0) { + const err = new Error(); + err.filed = ErrObj; + throw err; + } + Notify.success({ + title: '提交成功！', description: `填写：【填写成功】！` + }); + }} + fields={{ + tree: { + value: 'girl', + label: '请输入内容', + help: '必须选择性别！', + initialValue: ['0-1-1'], + children: , + }, + }} + > + {({ fields, state, canSubmit }) => { + return ( +
+ + {fields.tree} + + + + + + + + + 
+                  {JSON.stringify(state.current, null, 2)}
+
+ + +
+ ); + }} + + ) +} +ReactDOM.render(, _mount_); +``` + + ## Props | 参数 | 说明 | 类型 | 默认值 | diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx index c0a45a41fe..ef8c9bfe9a 100644 --- a/packages/react-tree/src/index.tsx +++ b/packages/react-tree/src/index.tsx @@ -45,7 +45,7 @@ export interface TreeProps extends IProps, Omit { item: TreeData, evn: React.MouseEvent, ) => void; - onChange?: (keys: (string | number | undefined)[]) => void; + onChange?: (key: string | number, eys: (string | number | undefined)[]) => void; value?: TreeData['key'][]; } @@ -210,7 +210,7 @@ export default function Tree(props: TreeProps) { } setCurSelectedKeys(selKeys); onSelected && onSelected(selKeys, item.key, selected, item, evn); - onChange?.(selKeys); + onChange?.(item.key, selKeys); } return (
diff --git a/website/src/routes/components/tree/index.tsx b/website/src/routes/components/tree/index.tsx index 1bd542dc23..754892eefc 100755 --- a/website/src/routes/components/tree/index.tsx +++ b/website/src/routes/components/tree/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { Tree, Row, Col, Card, Icon } from 'uiw'; +import { Tree, Row, Col, Card, Icon, Form, Button } from 'uiw'; import Markdown from '../../../components/Markdown'; export default () => ( { const md = await import('uiw/node_modules/@uiw/react-tree/README.md'); return md.default || md; From a9c34af03954486fecee54cc9958521192e327b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Thu, 10 Mar 2022 11:01:49 +0800 Subject: [PATCH 11/16] =?UTF-8?q?chore(Form):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=9C=A8fields=E5=B1=9E=E6=80=A7=E4=B8=AD=E5=86=99onChange=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=B2=A1=E6=9C=89event=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-form/src/FormItem.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/react-form/src/FormItem.tsx b/packages/react-form/src/FormItem.tsx index aa82321c0c..dff2f9b5df 100644 --- a/packages/react-form/src/FormItem.tsx +++ b/packages/react-form/src/FormItem.tsx @@ -1,10 +1,10 @@ -import React, { CSSProperties } from 'react'; +import React from 'react'; import { Col, Row } from '@uiw/react-grid'; import { IProps, HTMLInputProps } from '@uiw/utils'; import { FormFieldsProps } from './Form'; import './style/form-item.less'; -export interface FormItemProps extends IProps, HTMLInputProps { +export interface FormItemProps extends IProps, Omit { inline?: boolean; hasError?: boolean; label?: React.ReactNode; @@ -12,8 +12,9 @@ export interface FormItemProps extends IProps, HTMLInputProps { labelFor?: string; labelClassName?: string; help?: React.ReactNode; - labelStyle?: CSSProperties; + labelStyle?: React.CSSProperties; initialValue?: string | number | T; + onChange?: (e: React.ChangeEvent) => void; validator?: FormFieldsProps['validator']; } @@ -36,6 +37,7 @@ export default class FormItem extends React.PureComponent> { initialValue, validator, hasError, + onChange, ...otherProps } = this.props; @@ -43,7 +45,7 @@ export default class FormItem extends React.PureComponent> { const labelCls = ['w-form-label', labelClassName].filter(Boolean).join(' ').trim(); if (inline) { return ( -
+
{required && } @@ -62,7 +64,7 @@ export default class FormItem extends React.PureComponent> { ); } return ( -
+
{label && ( {required && } From 55b0ad9e7c1a2137d80b1e7b05766f493584f934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Thu, 10 Mar 2022 15:33:18 +0800 Subject: [PATCH 12/16] =?UTF-8?q?chore(Form):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-form/src/FormItem.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react-form/src/FormItem.tsx b/packages/react-form/src/FormItem.tsx index dff2f9b5df..38a61a7f81 100644 --- a/packages/react-form/src/FormItem.tsx +++ b/packages/react-form/src/FormItem.tsx @@ -4,7 +4,7 @@ import { IProps, HTMLInputProps } from '@uiw/utils'; import { FormFieldsProps } from './Form'; import './style/form-item.less'; -export interface FormItemProps extends IProps, Omit { +export interface FormItemProps extends IProps, HTMLInputProps { inline?: boolean; hasError?: boolean; label?: React.ReactNode; @@ -14,7 +14,6 @@ export interface FormItemProps extends IProps, Omit) => void; validator?: FormFieldsProps['validator']; } @@ -37,7 +36,6 @@ export default class FormItem extends React.PureComponent> { initialValue, validator, hasError, - onChange, ...otherProps } = this.props; @@ -45,7 +43,7 @@ export default class FormItem extends React.PureComponent> { const labelCls = ['w-form-label', labelClassName].filter(Boolean).join(' ').trim(); if (inline) { return ( -
+
{required && } @@ -64,7 +62,7 @@ export default class FormItem extends React.PureComponent> { ); } return ( -
+
{label && ( {required && } From ea987c2b2f4626bf705b2ae8d295a144986fd882 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Thu, 10 Mar 2022 20:08:28 +0800 Subject: [PATCH 13/16] =?UTF-8?q?fix(DatePicker):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E4=BA=8C=E6=9C=88=E4=B8=89=E6=9C=88=E6=97=B6=E9=97=B4=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20#635?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-date-picker/src/DatePickerDay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-date-picker/src/DatePickerDay.tsx b/packages/react-date-picker/src/DatePickerDay.tsx index 38f0b7ba93..b658de3859 100644 --- a/packages/react-date-picker/src/DatePickerDay.tsx +++ b/packages/react-date-picker/src/DatePickerDay.tsx @@ -102,7 +102,7 @@ export function DayRect(props: DayRectProps) { cls.next = true; } } - let cellDate = useMemo(() => new Date(new Date(date!).setDate(day)), [day]); + let cellDate = new Date(new Date(date!).setDate(day)); if (today && today.toDateString() === cellDate.toDateString()) { cls.today = true; } From 6968e30ce5df89f0f508f04b2f23c650fa9fe3cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Fri, 11 Mar 2022 10:31:34 +0800 Subject: [PATCH 14/16] =?UTF-8?q?fix(DatePicker):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E9=80=89=E4=B8=AD=E6=8F=90=E7=A4=BA=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E5=B1=95=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-date-picker/src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-date-picker/src/index.tsx b/packages/react-date-picker/src/index.tsx index 268d6c46b5..4e5852053d 100644 --- a/packages/react-date-picker/src/index.tsx +++ b/packages/react-date-picker/src/index.tsx @@ -94,7 +94,7 @@ export default function DatePicker(props: DatePickerProps) { } setType(curType); } else { - let currentDate = new Date(selectDate || selectPanelDate); + let currentDate = new Date(selectPanelDate); let month = currentDate.getMonth(); if (curType === 'prev') { month -= 1; @@ -107,7 +107,7 @@ export default function DatePicker(props: DatePickerProps) { onPanelChange && onPanelChange(new Date(currentDate), curType); } setSelectPanelDate(curType === 'today' ? today : currentDate); - setSelectDate(curType === 'today' ? today : currentDate); + curType === 'today' && setSelectDate(today); setType('day'); } From e207efb60ac5948b546d04b99544ba094772ddba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Fri, 11 Mar 2022 20:51:40 +0800 Subject: [PATCH 15/16] =?UTF-8?q?chore(Table):=20=E4=BC=98=E5=8C=96table?= =?UTF-8?q?=20columns=20render=E5=B1=9E=E6=80=A7=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-table/src/Thead.tsx | 16 +++++++++------- packages/react-table/src/index.tsx | 28 +++++++++++----------------- packages/react-table/src/util.ts | 30 +++++++++++++++--------------- 3 files changed, 35 insertions(+), 39 deletions(-) diff --git a/packages/react-table/src/Thead.tsx b/packages/react-table/src/Thead.tsx index 55d5983ed1..92b11475fc 100644 --- a/packages/react-table/src/Thead.tsx +++ b/packages/react-table/src/Thead.tsx @@ -3,22 +3,24 @@ import { IProps, noop } from '@uiw/utils'; import { TableProps, TableColumns } from './'; import './style/index.less'; -export interface TheadProps extends IProps { - data?: TableProps['data'][]; - onCellHead?: TableProps['onCellHead']; +export interface TheadProps extends IProps { + data?: TableColumns[][]; + onCellHead?: TableProps['onCellHead']; } -export default (props: TheadProps & React.HTMLAttributes = {}) => { +export default function TheadComponent( + props: TheadProps & React.HTMLAttributes = {}, +) { const { prefixCls = 'w-table', className, data = [], onCellHead = noop, ...other } = props; return ( {data && data.length > 0 && - data.map((tds?: TableColumns[], rowNum?: number) => ( + data.map((tds?: TableColumns[], rowNum?: number) => ( {(tds || []).map((item, colNum) => { const { title, key, render, children, ellipsis, ...thProps } = item; - const titleNode: TableColumns['title'] = + const titleNode: TableColumns['title'] = typeof title === 'function' ? title(item, colNum, rowNum!) : title; if (thProps.colSpan === 0) { return null; @@ -36,4 +38,4 @@ export default (props: TheadProps & React.HTMLAttributes ); -}; +} diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx index 4518e135c4..02b468a27c 100644 --- a/packages/react-table/src/index.tsx +++ b/packages/react-table/src/index.tsx @@ -4,28 +4,22 @@ import Thead from './Thead'; import { getLevelItems, getAllColumnsKeys } from './util'; import './style/index.less'; -export type TableColumns = { - title?: string | ((data: TableColumns, rowNum: number, colNum: number) => JSX.Element) | JSX.Element; +export type TableColumns = { + title?: string | ((data: TableColumns, rowNum: number, colNum: number) => JSX.Element) | JSX.Element; key?: string; width?: number; colSpan?: number; - children?: TableColumns[]; + children?: TableColumns[]; ellipsis?: boolean; - render?: ( - text: string, - keyName: string, - rowData: { [key: string]: any }, - rowNumber: number, - columnNumber: number, - ) => void; + render?: (text: V, keyName: V, rowData: T, rowNumber: number, columnNumber: number) => React.ReactNode; style?: React.CSSProperties; [key: string]: any; }; -export interface TableProps extends IProps, Omit { +export interface TableProps extends IProps, Omit { prefixCls?: string; - columns?: TableColumns[]; - data?: Record[]; + columns?: TableColumns[]; + data?: Array; title?: React.ReactNode; footer?: React.ReactNode; bordered?: boolean; @@ -36,7 +30,7 @@ export interface TableProps extends IProps, Omit { evn: React.MouseEvent, ) => void | React.ReactNode; onCellHead?: ( - data: TableColumns, + data: TableColumns, rowNum: number, colNum: number, evn: React.MouseEvent, @@ -49,7 +43,7 @@ export interface ICellOptions { keyName: string; } -export default (props: TableProps = {}) => { +export default function Table(props: TableProps = {}) { const { prefixCls = 'w-table', className, @@ -67,7 +61,7 @@ export default (props: TableProps = {}) => { const cls = [prefixCls, className, bordered ? `${prefixCls}-bordered` : null].filter(Boolean).join(' ').trim(); const { header, render, ellipsis } = getLevelItems(columns); - const keys = getAllColumnsKeys(columns); + const keys = getAllColumnsKeys(columns); return (
@@ -122,4 +116,4 @@ export default (props: TableProps = {}) => { {footer &&
{footer}
}
); -}; +} diff --git a/packages/react-table/src/util.ts b/packages/react-table/src/util.ts index a9463b4b52..76786d2f84 100644 --- a/packages/react-table/src/util.ts +++ b/packages/react-table/src/util.ts @@ -4,8 +4,8 @@ import { TableColumns } from './'; * Get colspan number * @param {Array} date */ -function getColspanNum(data: TableColumns[] = [], num = 1) { - let childs: TableColumns[] = []; +function getColspanNum(data: TableColumns[] = [], num = 1) { + let childs: TableColumns[] = []; for (let i = 0; i < data.length; i += 1) { if (data[i].children) { childs = childs.concat(data[i].children || []); @@ -21,8 +21,8 @@ function getColspanNum(data: TableColumns[] = [], num = 1) { * Get rowspan number * @param {Array} date */ -function getRowspanNum(data: TableColumns[] = [], child = []) { - let childs: TableColumns[] = []; +function getRowspanNum(data: TableColumns[] = [], child = []) { + let childs: TableColumns[] = []; for (let i = 0; i < data.length; i += 1) { if (!data[i].children) { childs.push(data[i]); @@ -33,8 +33,8 @@ function getRowspanNum(data: TableColumns[] = [], child = []) { return childs; } -export interface ILevelItems { - header: TableColumns[][]; +export interface ILevelItems { + header: TableColumns[][]; ellipsis?: Record; render: { [key: string]: any; @@ -45,7 +45,7 @@ export interface ILevelItems { * JSON Array => Array * @param {Array} date */ -export const getLevelItems = (data: TableColumns[], result?: ILevelItems): ILevelItems => { +export function getLevelItems(data: TableColumns[], result?: ILevelItems): ILevelItems { if (!result) { result = { header: [], render: {} }; } @@ -55,8 +55,8 @@ export const getLevelItems = (data: TableColumns[], result?: ILevelItems): ILeve if (result && !result.render) { result.render = {}; } - let child: TableColumns[] = []; - const levelTop: TableColumns[] = []; + let child: TableColumns[] = []; + const levelTop: TableColumns[] = []; for (let i = 0; i < data.length; i += 1) { if (data[i].render && data[i].key) { result.render[data[i].key as string] = data[i].render; @@ -68,13 +68,13 @@ export const getLevelItems = (data: TableColumns[], result?: ILevelItems): ILeve if (result.header.length === 0) { // Calculation rowspan if (data[i].children && data[i].children && data[i].children!.length > 0) { - data[i].colSpan = getRowspanNum(data[i].children as TableColumns[]).length; + data[i].colSpan = getRowspanNum(data[i].children as TableColumns[]).length; } levelTop.push(data[i]); } if (data[i] && data[i].children) { child = child.concat( - data[i].children!.map((item: TableColumns) => { + data[i].children!.map((item: TableColumns) => { // Calculation rowspan if (item.children && item.children.length > 0) { item.colSpan = getRowspanNum(item.children).length; @@ -100,7 +100,7 @@ export const getLevelItems = (data: TableColumns[], result?: ILevelItems): ILeve if (child && child.length > 0) { const num = getColspanNum(child); result.header.push( - child.map((item: TableColumns) => { + child.map((item: TableColumns) => { if (num === 1) return item; if (!item.children || (item.children && item.children.length === 0)) { item.rowSpan = num; @@ -111,13 +111,13 @@ export const getLevelItems = (data: TableColumns[], result?: ILevelItems): ILeve result = getLevelItems(child, result); } return result; -}; +} /** * Get all columns keys * @param {Array} data */ -export const getAllColumnsKeys = (data: TableColumns[], keys: any[] = []): string[] => { +export function getAllColumnsKeys(data: TableColumns[], keys: any[] = []): string[] { for (let i = 0; i < data.length; i += 1) { if (data[i].children) { keys = keys.concat(getAllColumnsKeys(data[i].children || [])); @@ -126,4 +126,4 @@ export const getAllColumnsKeys = (data: TableColumns[], keys: any[] = []): strin } } return keys; -}; +} From 625e5acb12e2f7ae3e90cde7e4ea5b36d36b2224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Mon, 14 Mar 2022 10:39:11 +0800 Subject: [PATCH 16/16] =?UTF-8?q?chore(Table):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E9=BB=98=E8=AE=A4=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-table/src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx index 02b468a27c..3549dc1436 100644 --- a/packages/react-table/src/index.tsx +++ b/packages/react-table/src/index.tsx @@ -4,7 +4,7 @@ import Thead from './Thead'; import { getLevelItems, getAllColumnsKeys } from './util'; import './style/index.less'; -export type TableColumns = { +export type TableColumns = { title?: string | ((data: TableColumns, rowNum: number, colNum: number) => JSX.Element) | JSX.Element; key?: string; width?: number; @@ -16,7 +16,7 @@ export type TableColumns = { [key: string]: any; }; -export interface TableProps extends IProps, Omit { +export interface TableProps extends IProps, Omit { prefixCls?: string; columns?: TableColumns[]; data?: Array;