{
+ setDragRowKey(null)
+ setDragStatus(false)
+ }}
+ onDragStart={onDragStartCallback}
+ onDragEnd={() => {
+ dargInfo.current = {}
+ setDropHightLineStatus(null)
+ }}
+ onDragEnter={onDragEnter}
+ onDragOver={(e) => {
+ e.preventDefault()
+ }}
+ onDragLeave={() => {
+ setDropHightLineStatus(null)
+ }}
className={classNames(`${prefix}__row`, {
[`${prefix}__row--error`]: errorRowKeys.includes(rowData.key),
[`${prefix}__row--highlight`]: hoverRow === rowData.key || highlightedRowKeys.includes(rowData.key),
[`${prefix}__row--total`]: isSumRow,
+ [`${prefix}__row--draggable`]: draggable,
+ [`${prefix}__row--draging`]: dragRowKey === rowKey,
+ [`${prefix}__row--draggable__border--top`]:
+ typeof dargInfo.current.dropKey !== 'undefined' && dropHightLineStatus === 'top',
+ [`${prefix}__row--draggable__border--bottom`]:
+ typeof dargInfo.current.dropKey !== 'undefined' && dropHightLineStatus === 'bottom',
[`${prefix}__row--avg`]: isAvgRow
})}
key="row"
@@ -76,9 +139,6 @@ const Row = ({
setHighlightRows(highlightedRowKeys.concat(rowData.key))
}
}}
- // 可以删除改滑动方法
- // onMouseEnter={(e) => setHoverRow(rowData.key)}
- // onMouseLeave={(e) => setHoverRow(null)}
>
{rowSelection && isFixed !== 'right' && !isSumRow && !isAvgRow && (
{
+ const dargInfo = useRef({ dragKey: null })
+ const [data, setData] = useState(propsData)
+
+ useEffect(() => {
+ const _data = () => {
+ if (fieldKey) {
+ return propsData.map((item) => {
+ item.key = item[fieldKey]
+ return item
+ })
+ }
+ return propsData
+ }
+ setData(_data)
+ }, [propsData, fieldKey])
+
+ const updateData = useCallback(() => {
+ if (typeof dargInfo.current.dropKey !== 'undefined') {
+ const { rowData, dropRowData } = dargInfo.current
+ const restData = deleteRowByKey(_.cloneDeep(data), dargInfo.current)
+ const _data = setRowByKey(_.cloneDeep(restData), dargInfo.current)
+ dargInfo.current = {}
+ onDropEnd && onDropEnd(rowData, dropRowData, _data)
+ setData(_data)
+ }
+ }, [data])
+
const expandedRowKeys = propsExpandRowKeys || expandRowKeys
const [columns, setColumns] = useState(propsColumns)
const hiTable = useRef(null)
@@ -75,7 +114,18 @@ const Table = ({
const [hoverColIndex, setHoverColIndex] = useState(null)
const loadChildren = useRef(null)
const [realColumnsWidth, setRealColumnsWidth] = useState(columns.map((c) => c.width || 'auto'))
- const [expandedTreeRows, setExpandedTreeRows] = useState([])
+
+ const [expandedTreeRows, _setExpandedTreeRows] = useState([])
+
+ const setExpandedTreeRows = useCallback(
+ (expandKeys, expanded, rowItem) => {
+ _setExpandedTreeRows(expandKeys)
+ // 仅支持树形 table onExpand 回调，由于之前设计局限，无法完成对 `expandedRowKeys` 的受控支持
+ onExpand?.(expanded, rowItem)
+ },
+ [onExpand]
+ )
+
// 固定列的宽度
const [fixedColumnsWidth, setFixedColumnsWidth] = useState({ left: 0, right: 0 })
// 获取左右侧固定列的信息
@@ -141,9 +191,11 @@ const Table = ({
}
}
}, [columns, dataSource, data])
+
useEffect(() => {
- setExpandedTreeRows(propsExpandRowKeys || expandRowKeys || [])
- }, [propsExpandRowKeys, data, expandRowKeys])
+ _setExpandedTreeRows(expandedRowKeys || [])
+ }, [expandedRowKeys, data])
+
// 有表头分组那么也要 bordered
const _bordered = flattedColumns.length > columns.length || bordered
@@ -211,6 +263,18 @@ const Table = ({
})
}
}, [dataSource, currentPage])
+
+ const onDropCallback = useCallback(() => {
+ const { rowData, dropRowData, level } = dargInfo.current
+ const onDropCallback = onDrop ? onDrop(rowData, dropRowData, data, level) : true
+ if (onDropCallback.toString() === '[object Promise]') {
+ onDropCallback.then((res) => {
+ res && updateData()
+ })
+ } else {
+ onDropCallback && updateData()
+ }
+ }, [data])
return (
{/* Normal table 普通表格 */}
+ {/* bugfix: 表格头部和内容分离是卡顿的主要原因 */}
@@ -358,6 +429,12 @@ const TableWrapper = ({ columns, uniqueId, standard, data, loading, ...settingPr
const [sortCol, setSortCol] = useState(_sortCol)
const [visibleCols, setVisibleCols] = useState(_visibleCols)
const [cacheVisibleCols, setCacheVisibleCols] = useState(_cacheVisibleCols)
+ // 当column发生改变的时候，同步setting
+ useEffect(() => {
+ setSortCol(columns)
+ setVisibleCols(columns)
+ setCacheVisibleCols(columns)
+ }, [columns])
useEffect(() => {
if (uniqueId) {
window.localStorage.setItem(`${uniqueId}_sortCol`, JSON.stringify(sortCol))
diff --git a/components/table/index.d.ts b/components/table/index.d.ts
index c9581e248..d6137a89e 100644
--- a/components/table/index.d.ts
+++ b/components/table/index.d.ts
@@ -1,17 +1,27 @@
+import React from "react"
import {PaginationProps} from '../pagination'
-type ColumnItem = {
+import { SelectProps } from '../select'
+
+export type TableColumnItem = {
title: string | JSX.Element
dataKey: string
- align?: 'left' | 'right'
+ align?: 'left' | 'right' | 'center'
sorter?: () => boolean
avg?: boolean
total?: boolean
width?: number
- children?: ColumnItem[]
+ children?: TableColumnItem[]
+ selectFilters?: SelectProps
+ defaultSortOrder?: 'ascend' | 'descend'
+ filterIcon?: JSX.Element
+ filterDropdown?: (props: {ColumnItem: ColumnItem, setFilterDropdownVisible: Function}) => ReactNode
+ filterDropdownWidth?: number
+ filterDropdownClassName?: string
+ onFilterDropdownVisibleChange?: (filterDropdownVisible: boolean, ColumnItem: ColumnItem) => void
render?: (text: string, record: object, index: number, dataKey: string) => JSX.Element
}
-type Origin = {
+export type TableDataSource = {
url: string
currentPageName?: string
auto?: boolean
@@ -24,31 +34,33 @@ type Origin = {
withCredentials?: boolean
transformResponse?: (response: object) => object[]
}
-type FixedOption = {
+export type TableFixedOption = {
left?: string
right?: string
}
-type RowSelection = {
+export type TableRowSelection = {
selectedRowKeys?: string[] | number[]
onChange?: (selectedRowKeys: string | number) => void
}
-type HeaderRowReturn = {
- onClick?: (event: MouseEvent) => void
- onDoubleClick?: (event: MouseEvent) => void
- onContextMenu?: (event: MouseEvent) => void
- onMouseEnter?: (event: MouseEvent) => void
- onMouseLeave?: (event: MouseEvent) => void
+export type TableHeaderRowReturn = {
+ onClick?: (event: React.MouseEvent) => void
+ onDoubleClick?: (event: React.MouseEvent) => void
+ onContextMenu?: (event: React.MouseEvent) => void
+ onMouseEnter?: (event: React.MouseEvent) => void
+ onMouseLeave?: (event: React.MouseEvent) => void
}
-type HeaderRowFunc = (colums: ColumnItem[], index: number) => HeaderRowReturn
+export type HeaderRowFunc = (colums: TableColumnItem[], index: number) => TableHeaderRowReturn
-interface Props {
+export interface TableProps {
size?: 'small' | 'large' | 'default' | 'mini'
+ fieldKey?: string
bordered?: boolean
striped?: boolean
loading?: boolean
sticky?: boolean
+ draggable?: boolean
stickyTop?: number
expandRowKeys?: number[]
highlightedColKeys?: string[] | number[]
@@ -58,12 +70,12 @@ interface Props {
rowExpandable?: (record: object ) => JSX.Element | Boolean
maxHeight?: number
scrollWidth?: number
- fixedToColumn?: string | FixedOption
+ fixedToColumn?: string | TableFixedOption
pagination?: PaginationProps
errorRowKeys?: string[] | number[]
highlightedRowKeys?: string[] | number[]
- rowSelection?: RowSelection
- dataSource?: (current: number) => Origin
+ rowSelection?: TableRowSelection
+ dataSource?: (current: number) => TableDataSource
showColMenu?: boolean
showColHighlight?: boolean
striped?: boolean
@@ -72,11 +84,14 @@ interface Props {
standard?: boolean
emptyContent?: string | JSX.Element
onHeaderRow?: HeaderRowFunc
- columns: ColumnItem[]
+ columns: TableColumnItem[]
data: object[]
- style?: CSSProperties
+ style?: React.CSSProperties
className?: string
scrollWidth?: React.ReactText
+ onDragStart?: (rowData: object) => void
+ onDrop?: (dragRowData: object, dropRowData: object, data: object, level: Level) => boolean | Promise
+ onDropEnd?: (dragRowData: object, dropRowData: object, data: object) => void
}
-declare const Table: React.ComponentType
+declare const Table: React.ComponentType
export default Table
diff --git a/components/table/style/index.scss b/components/table/style/index.scss
index e0541c656..038b4b4e9 100644
--- a/components/table/style/index.scss
+++ b/components/table/style/index.scss
@@ -217,6 +217,10 @@
> table {
position: relative;
}
+
+ &__title {
+ display: flex;
+ }
}
&__header--sticky {
@@ -226,6 +230,26 @@
overflow-x: hidden;
}
+ &__body--draging {
+ table tr {
+ &:hover:not(.hi-table__row--draging) {
+ background: use-color('white');
+
+ .hi-table__col--sticky {
+ background: use-color('white');
+ }
+ }
+
+ &.hi-table__row--draging {
+ background: use-color('primary-20');
+
+ .hi-table__col--sticky {
+ background: use-color('primary-20');
+ }
+ }
+ }
+ }
+
table {
table-layout: fixed;
@@ -263,6 +287,18 @@
border-bottom: 1px solid use-color('gray-20');
box-sizing: border-box;
}
+
+ &.hi-table__row--draggable__border--top {
+ td {
+ border-top: 2px dashed use-color('primary');
+ }
+ }
+
+ &.hi-table__row--draggable__border--bottom {
+ td {
+ border-bottom: 2px dashed use-color('primary');
+ }
+ }
}
.#{$table}__row {
@@ -304,6 +340,10 @@
}
}
+ &.#{$table}__row--draggable {
+ cursor: move;
+ }
+
& > .#{$table}__col--highlight {
background: use-color('primary-20');
}
diff --git a/components/table/util.js b/components/table/util.js
index 6915cdf68..905bbe237 100644
--- a/components/table/util.js
+++ b/components/table/util.js
@@ -199,3 +199,35 @@ export const getMaskNums = (columns) => {
getAllItemWidth(columns)
return num
}
+
+export const setRowByKey = (data, dragInfo, inSameLevel = true) => {
+ const { dropKey, dropClientY, startClientY, rowData } = dragInfo
+ data.some((item, index) => {
+ const { key, children } = item
+ if (dropKey === key) {
+ const direction = startClientY > dropClientY ? 0 : 1
+ data.splice(index + direction, 0, rowData)
+ return true
+ }
+ if (children) {
+ inSameLevel = false
+ setRowByKey(children, dragInfo, inSameLevel)
+ }
+ })
+ return data
+}
+
+export const deleteRowByKey = (data, dragInfo) => {
+ const { dragKey } = dragInfo
+ data.some((item, index) => {
+ const { key, children } = item
+ if (dragKey === key) {
+ data.splice(index, 1)
+ return true
+ }
+ if (children) {
+ deleteRowByKey(children, dragInfo)
+ }
+ })
+ return data
+}
diff --git a/components/tabs/hooks/useTranslate.js b/components/tabs/hooks/useTranslate.js
index e8ef91b9c..220934a73 100644
--- a/components/tabs/hooks/useTranslate.js
+++ b/components/tabs/hooks/useTranslate.js
@@ -2,8 +2,8 @@ import React, { useCallback } from 'react'
import Icon from '../../icon'
const useTranslate = ({ elementRef, canScroll, prefixCls }) => {
- // 右移
- const translateRight = useCallback(() => {
+ // 左移
+ const translateLeft = useCallback(() => {
const container = elementRef.current
const width = container.scrollWidth
let transX = Number(document.defaultView.getComputedStyle(container, null).transform.split(',')[4])
@@ -15,8 +15,8 @@ const useTranslate = ({ elementRef, canScroll, prefixCls }) => {
container.style.transform = 'translateX(' + transX + 'px)'
}, [elementRef.current])
- // 左移
- const translateLeft = useCallback(() => {
+ // 右移
+ const translateRight = useCallback(() => {
const container = elementRef.current
const width = container.scrollWidth
const clientWidth = container.clientWidth
diff --git a/components/tabs/index.d.ts b/components/tabs/index.d.ts
index f196a3fde..f92a7987e 100644
--- a/components/tabs/index.d.ts
+++ b/components/tabs/index.d.ts
@@ -1,11 +1,6 @@
-import { CSSProperties } from "react"
+import React from "react"
-type DataItem = {
- content: string
- id: string | number
- disabled?: boolean
-}
-type NodeData = {
+export type TabsItem = {
tabTitle: string | JSX.Element
tabDesc: string | JSX.Element
tabId: string | number
@@ -14,7 +9,7 @@ type NodeData = {
animation: boolean
newIndex?: number
}
-interface Props {
+export interface TabsProps {
type?: 'desc' | 'card' | 'button' | 'editable' | 'line'
placement?: 'vertical' | 'horizontal'
defaultActiveId?: string | number
@@ -22,30 +17,30 @@ interface Props {
max?: number
canScroll?: boolean
draggable?: boolean
- style?: CSSProperties
+ style?: React.CSSProperties
className?: string
- onTabClick?: (tabKey: string | number, event: MouseEvent) => void
+ onTabClick?: (tabKey: string | number, event: React.MouseEvent) => void
onEdit?: (action: 'add' | 'delete', index: number, tabKey: string | number) => void
- onDragStart?: (dragNode: NodeData) => void
- onDropEnd?: (dragNode: NodeData, dropNode: NodeData) => void
- onDrop?: (dragNode: NodeData, dropNode: NodeData) => void
+ onDragStart?: (dragNode: TabsItem) => void
+ onDropEnd?: (dragNode: TabsItem, dropNode: TabsItem) => void
+ onDrop?: (dragNode: TabsItem, dropNode: TabsItem) => void
onAdd?: () => void
- onDelete?: (deleteNode: NodeData, index: number) => void
- onBeforeDelete?: (deleteNode: NodeData) => void
+ onDelete?: (deleteNode: TabsItem, index: number) => void
+ onBeforeDelete?: (deleteNode: TabsItem) => void
}
-interface PaneProps {
+export interface TabsPaneProps {
tabTitle: string | JSX.Element
tabDesc?: string | JSX.Element
tabId: string | number
closeable?: boolean
disabled?: boolean
animation?: boolean
- style?: CSSProperties
+ style?: React.CSSProperties
className?: string
}
-declare class Pane extends React.Component {
+declare class Pane extends React.Component {
}
-declare class Tabs extends React.Component {
+declare class Tabs extends React.Component {
static Pane = Pane
}
export default Tabs
diff --git a/components/tabs/style/index.scss b/components/tabs/style/index.scss
index afdf20ccd..c84bc9114 100644
--- a/components/tabs/style/index.scss
+++ b/components/tabs/style/index.scss
@@ -384,11 +384,12 @@ $prefix: 'hi-tabs' !default;
&__scroll--outter {
display: flex;
+ align-items: center;
.#{$prefix}__scroll__icon {
cursor: pointer;
display: flex;
- font-size: 37px;
+ font-size: 40px;
justify-content: center;
align-items: center;
color: use-color('gray-80');
diff --git a/components/tag/index.d.ts b/components/tag/index.d.ts
index edcdada9a..e1c0006c8 100644
--- a/components/tag/index.d.ts
+++ b/components/tag/index.d.ts
@@ -1,31 +1,32 @@
import React from 'react'
-type TagNode = {
- title?: string
- tagId?: string | number
- closable?: boolean
- editable?: boolean
+export type TagItem = {
+ title?: string;
+ tagId?: string | number;
+ closable?: boolean;
+ editable?: boolean;
}
-interface Props {
+
+export interface TagProps {
type?: 'primary' | 'success' | 'warning' | 'danger'
appearance?: 'default' | 'line'
shape?: 'round' | 'square'
color?: string
- style?: CSSProperties
+ style?: React.CSSProperties
className?: string
- onClick?: (e: MouseEvent) => void
+ onClick?: (e: React.MouseEvent) => void
}
-interface TagGroupProps {
- data?: TagNode[]
+export interface TagGroupProps {
+ data?: TagItem[]
editable?: boolean
- onAdd?:(addNode:TagNode, index:number) => void
- onEdit?:(addNode:TagNode, index:number) => void
- onDelete?:(addNode:TagNode, index:number) => void
+ onAdd?: (addNode: TagItem, index: number) => void
+ onEdit?: (addNode: TagItem, index: number) => void
+ onDelete?: (addNode: TagItem, index: number) => void
}
declare class TagGroup extends React.Component {
}
-declare class Tag extends React.Component {
+declare class Tag extends React.Component {
static Group = TagGroup
}
export default Tag
diff --git a/components/timeline/index.d.ts b/components/timeline/index.d.ts
index 44c79211b..6cf9088b9 100644
--- a/components/timeline/index.d.ts
+++ b/components/timeline/index.d.ts
@@ -1,17 +1,18 @@
-type DataItem = {
+import React from 'react'
+export type TimelineItem = {
title: string | JSX.Element
content?: string | JSX.Element
timestamp?: string
extraTime?: string
icon?: string | JSX.Element
}
-type GroupItem = {
+export type TimelineGroupItem = {
groupTitle: string | JSX.Element
- children: DataItem[]
+ children: TimelineItem[]
}
-interface Props {
+export interface TimelineProps {
type?: 'default' | 'right' | 'cross'
- data: DataItem[] | GroupItem[]
+ data: TimelineItem[] | TimelineGroupItem[]
}
-declare const Timeline: React.ComponentType
+declare const Timeline: React.ComponentType
export default Timeline
diff --git a/components/tooltip/index.d.ts b/components/tooltip/index.d.ts
index cc78f108b..3d9eb7162 100644
--- a/components/tooltip/index.d.ts
+++ b/components/tooltip/index.d.ts
@@ -1,16 +1,17 @@
-interface Props {
+import React from 'react'
+export interface TooltipProps {
title: string | JSX.Element
placement?: 'top' | 'right' | 'bottom' | 'left'
visible?: boolean
}
-type Options = {
+export type TooltipOptions = {
title: string | JSX.Element
placement?: 'top' | 'right' | 'bottom' | 'left'
key: string
}
-const OpenFun: (target: HTMLElement, options: Options) => void
+const OpenFun: (target: HTMLElement, options: TooltipOptions) => void
const CloseFun: (key: string) => void
-declare class Tooltip extends React.Component {
+declare class Tooltip extends React.Component {
static open = OpenFun
static close = CloseFun
}
diff --git a/components/transfer/Transfer.js b/components/transfer/Transfer.js
index f1641a79c..e0e225d97 100755
--- a/components/transfer/Transfer.js
+++ b/components/transfer/Transfer.js
@@ -67,7 +67,8 @@ class Transfer extends Component {
})
}
- componentWillReceiveProps(props) {
+ // eslint-disable-next-line camelcase
+ UNSAFE_componentWillReceiveProps(props) {
this.parseDatas(props)
}
@@ -309,6 +310,7 @@ class Transfer extends Component {
void
- render?: (item: DataItem) => JSX.Element
- onDragStart?: (item: DataItem) => Boolean
- onDragEnd?: (item: DataItem) => void
- onDrop?: (targetItem: DataItem, sourceItem: DataItem) => boolean
+ onChange?: (targetKey: number[] | string[], direction: 'left' | 'right', moveDatas: TransferItem[]) => void
+ render?: (item: TransferItem) => JSX.Element
+ onDragStart?: (item: TransferItem) => Boolean
+ onDragEnd?: (item: TransferItem) => void
+ onDrop?: (targetItem: TransferItem, sourceItem: TransferItem) => boolean
}
-declare const Transfer: React.ComponentType
+declare const Transfer: React.ComponentType
export default Transfer
diff --git a/components/tree/hooks/useSelect.js b/components/tree/hooks/useSelect.js
index bf49efbed..932290ed8 100644
--- a/components/tree/hooks/useSelect.js
+++ b/components/tree/hooks/useSelect.js
@@ -11,13 +11,15 @@ const useSelect = ({ defaultSelectedId, selectedId, onSelect, selectable }) => {
const onSelectNode = useCallback(
(selectedNode) => {
- if (selectable) {
- if (selectedNode !== undefined && !selectedId) {
- setSelectedId(selectedNode.id)
- }
- if (onSelect) {
- onSelect(selectedNode)
- }
+ if (!selectable) return
+ // 兼容老版本：全局开启了 selectable，子节点默认都支持 selectable
+ if (selectedNode.selectable === false) return
+
+ if (selectedNode !== undefined && !selectedId) {
+ setSelectedId(selectedNode.id)
+ }
+ if (onSelect) {
+ onSelect(selectedNode)
}
},
[selectedId, selectable]
diff --git a/components/tree/index.d.ts b/components/tree/index.d.ts
index b6fe94e49..f4fe99618 100644
--- a/components/tree/index.d.ts
+++ b/components/tree/index.d.ts
@@ -1,11 +1,13 @@
-type TreeNode = {
+import React from 'react'
+export type TreeNode = {
id: string | number
title: string | JSX.Element
disabled?: boolean
children?: TreeNode[]
isLeaf?: boolean
+ selectable?: boolean
}
-type LoadTreeNode = {
+export type LoadTreeNode = {
method?: 'get' | 'post'
url: string
headers?: object
@@ -13,19 +15,19 @@ type LoadTreeNode = {
params?: object
transformResponse: (response: object) => TreeNode[]
}
-type ContextMenuOption = {
+export type TreeContextMenuOption = {
type?: 'editNode' | 'addChildNode' | 'addSiblingNode' | 'deleteNode'
title?: string | JSX.Element
onClick?: (item: TreeNode, node: TreeNode) => void
}
const LoadTreeNodeFun: (id: stsring) => TreeNode
-const ContextMenuOptionFun: (item: TreeNode) => ContextMenuOption[]
+const ContextMenuOptionFun: (item: TreeNode) => TreeContextMenuOption[]
-type DataStatus = {
+export type TreeDataStatus = {
before: TreeNode[]
after: TreeNode[]
}
-interface Props {
+export interface TreeProps {
data: TreeNode[]
checkable?: boolean
editable?: boolean
@@ -41,12 +43,12 @@ interface Props {
openIcon?: string
closeIcon?: string
apperance?: 'default' | 'line' | 'folder'
- style?: CSSProperties
+ style?: React.CSSProperties
className?: string
- defaultSelectedId?: string | number
- selectedId?: string | number
- defaultCheckedIds?: string[] | number[]
- contextMenu?: ContextMenuOption[] | ContextMenuOptionFun
+ defaultSelectedId?: string | number
+ selectedId?: string | number
+ defaultCheckedIds?: string[] | number[]
+ contextMenu?: TreeContextMenuOption[] | ContextMenuOptionFun
onChange?: (data: TreeNode[]) => void
onExpand?: (expanded: boolean, expandIds: string[], expandedNode: TreeNode) => void
onCheck?: (checked: boolean, checkedIds: string[], checkedNode: TreeNode) => void
@@ -54,12 +56,12 @@ interface Props {
onDragStart?: (dragNode: TreeNode) => void
onDrop?: (dragNode: TreeNode, dropNode: TreeNode) => boolean
onDropEnd?: (dragNode: TreeNode, dropNode: TreeNode) => void
- onBeforeDelete?: (deletedNode: TreeNode, data: DataStatus, level: number) => boolean
+ onBeforeDelete?: (deletedNode: TreeNode, data: TreeDataStatus, level: number) => boolean
onDelete?: (deletedNode: TreeNode, data: TreeNode[]) => void
- onBeforeSave?: (savedNode: TreeNode, data: DataStatus, level: number) => boolean
+ onBeforeSave?: (savedNode: TreeNode, data: TreeDataStatus, level: number) => boolean
onSave?: (savedNode: TreeNode, data: TreeNode[]) => void
onSelect?: (selectedNode: TreeNode) => void
onLoadChildren?: (selectedNode: TreeNode) => LoadTreeNode
}
-declare const Tree: React.ComponentType
+declare const Tree: React.ComponentType
export default Tree
diff --git a/components/upload/index.d.ts b/components/upload/index.d.ts
index db985d015..bd954e80b 100644
--- a/components/upload/index.d.ts
+++ b/components/upload/index.d.ts
@@ -1,11 +1,12 @@
-type FileItem = {
+import React from 'react'
+export type UploadFileItem = {
fileId?: string
fileType: string
name: string
uploadState: 'success' | 'uploading' | 'error'
url?: string
}
-interface Props {
+export interface UploadProps {
type?: 'default' | 'drag' | 'pictureCard' | 'avatar' | 'photo'
accept?: MimeType
content?: string | JSX.Element,
@@ -25,17 +26,17 @@ interface Props {
withCredentials?: boolean
showUploadList?: boolean
multiple?: boolean
- defaultFileList?: FileItem[]
- fileList?: FileItem[]
+ defaultFileList?: UploadFileItem[]
+ fileList?: UploadFileItem[]
loading?: boolean
- style?: CSSProperties
+ style?: React.CSSProperties
className?: string
- beforeUpload?: (files: FileItem[], fileList: FileItem[]) => boolean
- customUpload?: (files: FileItem[]) => void
- onChange?: (file: FileItem, fileList: FileItem[], response: object) => boolean
- onRemove?: (file: FileItem, fileList: FileItem[], index: number) => boolean
- onDownload?: (file: FileItem) => void
+ beforeUpload?: (files: UploadFileItem[], fileList: UploadFileItem[]) => boolean
+ customUpload?: (files: UploadFileItem[]) => void
+ onChange?: (file: UploadFileItem, fileList: UploadFileItem[], response: object) => boolean
+ onRemove?: (file: UploadFileItem, fileList: UploadFileItem[], index: number) => boolean
+ onDownload?: (file: UploadFileItem) => void
photoSize?: 'small' | 'default' | 'large'
}
-declare const Upload: React.ComponentType
+declare const Upload: React.ComponentType
export default Upload
diff --git a/components/watermark/index.d.ts b/components/watermark/index.d.ts
index 933b81005..0ff1a744a 100644
--- a/components/watermark/index.d.ts
+++ b/components/watermark/index.d.ts
@@ -1,11 +1,12 @@
-interface Props {
+import React from 'react'
+export interface WatermarkProps {
density?: 'low' | 'default' | 'high'
- content?: strgin | string[]
+ content?: string | string[]
logo?: any
opacity?: number
- style?: CSSProperties
+ style?: React.CSSProperties
className?: string
allowCopy?: boolean
}
-declare const Watermark: React.ComponentType
+declare const Watermark: React.ComponentType
export default Watermark
diff --git a/docs/demo/cascader/section-advanced.jsx b/docs/demo/cascader/section-advanced.jsx
index 6ff8f52db..fc6274fbc 100644
--- a/docs/demo/cascader/section-advanced.jsx
+++ b/docs/demo/cascader/section-advanced.jsx
@@ -82,7 +82,8 @@ class Demo extends React.Component {
}
}`,
opt: ['自定义字段名']
- }, {
+ },
+ {
code: `import React from 'react'
import Cascader from '@hi-ui/hiui/es/cascader'\n
class Demo extends React.Component {
@@ -157,109 +158,16 @@ class Demo extends React.Component {
}
}`,
opt: ['自定义显示']
- }, {
+ },
+ {
code: `import React from 'react'
import Cascader from '@hi-ui/hiui/es/cascader'\n
class Demo extends React.Component {
constructor () {
super()
this.state = {
- options: [
- {
- id: '手机',
- content: '手机',
- children: [
- {
- id: '小米',
- content: '小米',
- children: [
- {
- id: '小米1',
- content: '小米1'
- },
- {
- id: '小米2',
- content: '小米2',
- disabled: true
- },
- {
- id: '小米3',
- content: '小米3'
- },
- {
- id: '小米4',
- content: '小米4'
- },
- {
- id: '小米5',
- content: '小米5'
- },
- {
- id: '小米6',
- content: '小米6'
- },
- {
- id: '小米7',
- content: '小米7'
- },
- {
- id: '小米8',
- content: '小米8'
- }
- ]
- },
- {
- id: '红米',
- content: '红米',
- children: [
- {
- id: '红米1',
- content: '红米1'
- },
- {
- id: '红米2',
- content: '红米2'
- },
- {
- id: '红米3',
- content: '红米3'
- },
- {
- id: '红米4',
- content: '红米4'
- }
- ]
- }
- ]
- },
- {
- id: '电视',
- content: '电视',
- children: [
- {
- id: '小米电视4A',
- content: '小米电视4A'
- },
- {
- id: '小米电视4C',
- content: '小米电视4C'
- },
- {
- id: '小米电视4X',
- content: '小米电视4X'
- },
- {
- id: '小米电视4',
- content: '小米电视4'
- }
- ]
- },
- {
- id: 'mix',
- content: 'Mix',
- children: []
- }
- ]
+ options: [],
+ value: ['手机','手机2']
}
}
render(){
@@ -267,13 +175,48 @@ class Demo extends React.Component {
{
console.log('on change', value)
+ this.setState({
+ value: value
+ })
}}
data={this.state.options}
style={{ width: 240 }}
+ value={this.state.value}
+ onOpen={()=>{
+ const {options} = this.state
+ if(options.length === 0){
+ setTimeout(()=>{
+ this.setState({
+ options: [
+ {
+ id: '手机',
+ content: '手机',
+ children: [
+ {
+ id: '手机2',
+ content: '手机2',
+ }
+ ]
+ },
+ {
+ id: '平板',
+ content: '平板'
+ },
+ {
+ id: 'mix',
+ content: 'Mix',
+ children: []
+ }
+ ]
+ })
+ }, 2000)
+ }
+ }}
onActiveItemChange={values=>{
if(values[0] == 'mix') {
setTimeout(()=>{
- this.state.options[2].children = [
+ const _options = this.state.options
+ _options[2].children = [
{
id: 'mix1',
content: 'Mix1'
@@ -285,7 +228,9 @@ class Demo extends React.Component {
content: 'Mix3'
}
]
- this.forceUpdate()
+ this.setState({
+ options: _options
+ })
}, 1000)
}
}}
@@ -294,7 +239,8 @@ class Demo extends React.Component {
}
}`,
opt: ['动态加载选项']
- }, {
+ },
+ {
code: `import React from 'react'
import Cascader from '@hi-ui/hiui/es/cascader'\n
class Demo extends React.Component {
@@ -446,12 +392,6 @@ class Demo extends React.Component {
]
const DemoBasic = () => (
-
+
)
export default DemoBasic
diff --git a/docs/demo/cascader/section-search.jsx b/docs/demo/cascader/section-search.jsx
index 030948c0a..99b74856e 100644
--- a/docs/demo/cascader/section-search.jsx
+++ b/docs/demo/cascader/section-search.jsx
@@ -2,7 +2,7 @@ import React from 'react'
import DocViewer from '../../../libs/doc-viewer'
import Cascader from '../../../components/cascader'
const prefix = 'section-search'
-const desc = '选项数量较大，不熟悉数据的结构关系情况下，用搜索关键词的方式快速定位'
+const desc = '选项数量较大，不熟悉数据的结构关系情况下，用搜索关键词的方式快速定位，需输入关键字并点击回车'
const code = `import React from 'react'
import Cascader from '@hi-ui/hiui/es/cascader'\n
@@ -190,12 +190,5 @@ class Demo extends React.Component {
}
}`
-const DemoBasic = () => (
-
-)
+const DemoBasic = () =>
export default DemoBasic
diff --git a/docs/demo/date-picker/section-date-time.jsx b/docs/demo/date-picker/section-date-time.jsx
index 985397011..094fa5ae0 100644
--- a/docs/demo/date-picker/section-date-time.jsx
+++ b/docs/demo/date-picker/section-date-time.jsx
@@ -17,9 +17,10 @@ class Demo extends React.Component {
{
- console.log('onChange', date, dateStr)
+ onChange={(date, dateStr) => {
+ console.log('onChange', date, dateStr)
this.setState({value: date})
}}
/>
diff --git a/docs/demo/date-picker/section-scope.jsx b/docs/demo/date-picker/section-scope.jsx
index bceda7b10..06f07ca3b 100644
--- a/docs/demo/date-picker/section-scope.jsx
+++ b/docs/demo/date-picker/section-scope.jsx
@@ -136,17 +136,15 @@ class Demo extends React.Component {
class Demo extends React.Component {
constructor() {
super()
- this.state={
- selectDate: ''
- }
+ this.selectDate = ''
}
render () {
- const { selectDate } = this.state
return (
{
+ const { selectDate } = this
if(selectDate){
const timestampCurrent = new Date(val).getTime()
const timestampSelect = new Date(selectDate).getTime()
@@ -158,9 +156,7 @@ class Demo extends React.Component {
onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
onSelect={(val, isCompleted)=>{
console.log(val, isCompleted)
- this.setState({
- selectDate: isCompleted ? '' : val
- })
+ this.selectDate = isCompleted ? '' : val
}}
/>
diff --git a/docs/demo/form/section-check.jsx b/docs/demo/form/section-check.jsx
index 81a4dcdfb..7aa19951f 100644
--- a/docs/demo/form/section-check.jsx
+++ b/docs/demo/form/section-check.jsx
@@ -86,15 +86,23 @@ const code = [
],
rules: {
name: {
+ type: 'string',
required: true,
message: 请输入名称,
trigger: 'onBlur,onChange'
},
region: {
+ type: 'string',
required: true,
message: '请选择区域',
trigger: 'onChange'
},
+ store: {
+ type: 'array',
+ required: true,
+ message: '请选择门店',
+ trigger: 'onChange'
+ },
count: {
required: true,
trigger: 'onChange',
@@ -112,7 +120,7 @@ const code = [
}
}
}
-
+
handleSubmit() {
this.form.current.validate((valid,error) => {
console.log('valid:',valid,'error:',error)
@@ -125,7 +133,7 @@ const code = [
}
})
}
-
+
cancelSubmit() {
this.setState({
form: {
@@ -140,21 +148,21 @@ const code = [
clearValidates() {
this.form.current.clearValidates()
}
-
-
+
+
render(){
const Row = Grid.Row
const Col = Grid.Col
const FormItem = Form.Item
const { form, checkedIndex } = this.state
-
+
return (
- |