plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/PlTable/table/body/cell.tsx

@@ -1,120 +0,0 @@
-import {tPlc} from "../../plc/utils/plc.type";
-import {TableNode} from "../use/useTableNode";
-import {useEdit} from "../../../../use/useEdit";
-import {StyleStatus, useStyle} from "../../../../use/useStyle";
-import {ComputedRef, designComponent, PropType, useClasses, useStyles} from "plain-design-composition";
-import {FormAssociateFields, FormValidateTrigger, tFormRuleData} from "../../../PlForm/form.validate";
-import {PlainTable} from "../../index";
-import {renderBodyCell} from "../../plc/utils/render";
-import React from "react";
-
-function useCellFormItemValidate(props: { plc: tPlc, node: TableNode }, formRuleData: ComputedRef<tFormRuleData>, associateFields?: FormAssociateFields) {
-    const handler = {
-        validateChange: async (trigger: FormValidateTrigger) => {
-            let {plc: {props: {field}}, node} = props
-            const {edit, data, editRow, validateErrors} = node
-            if (!field) {return}
-            const {fitRuleList, fitRuleMap} = formRuleData.value.methods.getRules({
-                field,
-                trigger,
-                associateFields,
-            })
-            if (fitRuleList.length === 0) {return}
-
-            node.validateErrors = await formRuleData.value.methods.validateField({
-                rules: fitRuleMap,
-                formData: edit ? editRow : data,
-                allErrors: validateErrors || [],
-            })
-        },
-        onEditChange: async () => {
-            await handler.validateChange(FormValidateTrigger.change)
-        },
-        onEditBlur: async () => {
-            await handler.validateChange(FormValidateTrigger.blur)
-        },
-    }
-    useEdit({
-        adjust: ret => {
-            ret.disabled = null
-            ret.readonly = null
-            ret.loading = null
-            ret.onChange = handler.onEditChange
-            ret.onBlur = handler.onEditBlur
-        }
-    })
-    useStyle({
-        adjust: (ret) => {
-            const {node: {validateErrors}, plc: {props: {field}}} = props
-            const {status} = ret
-            const inValid = (() => {
-                if (!validateErrors) {return false}
-                const error = validateErrors.find(i => i.field === field)
-                return !!error
-            })()
-            ret.status = status || (inValid ? StyleStatus.error : undefined)
-            return ret
-        }
-    })
-}
-
-export const PltCell = designComponent({
-    name: 'plt-cell',
-    props: {
-        table: {type: PlainTable, required: true},
-        node: {type: Object as PropType<TableNode>, required: true},
-        plc: {type: Object as PropType<tPlc>, required: true},
-    },
-    setup({props}) {
-
-        useCellFormItemValidate(props, props.table.formValidate, props.table.props.associateFields)
-
-        const onClick = (e: React.MouseEvent) => {
-            props.plc.event.emit.onClick({e, scope: {row: props.node.data, node: props.node, plc: props.plc}})
-        }
-
-        return {
-            render: () => {
-                const {node, plc} = props
-                const {body, editable} = renderBodyCell({node, plc, formEdit: false})
-                const span = !!props.table.props.spanMethod ? props.table.props.spanMethod({node, plc}) : {rowspan: 1, colspan: 1}
-
-                if (span.rowspan === 0 || span.colspan === 0) {
-                    /*rowspan为0时，不会正确合并单元格，如果要合并单元格得不渲染这个td*/
-                    return null
-                }
-                const classes = useClasses(() => {
-                    const ret = [
-                        props.plc.classes.body,
-                        props.plc.props.bodyCls,
-                        {
-                            'plt-cell-editing': editable,
-                            'plt-cell-link': plc.props.link,
-                        }
-                    ] as any[]
-                    if (!!props.table.props.cellClassFunc) {
-                        ret.push(props.table.props.cellClassFunc(node, plc))
-                    }
-                    return ret
-                })
-                const styles = useStyles(style => {
-                    Object.assign(style, plc.styles.body)
-                    if (!!props.table.props.cellStyleFunc) {
-                        Object.assign(style, props.table.props.cellStyleFunc(node, plc))
-                    }
-                })
-
-                return (
-                    <td
-                        rowSpan={span.rowspan}
-                        colSpan={span.colspan}
-                        className={classes.value}
-                        style={styles.value}
-                        onClick={onClick}>
-                        {body}
-                    </td>
-                )
-            }
-        }
-    },
-})

package/src/packages/PlTable/table/body/row.tsx

@@ -1,49 +0,0 @@
-import {PltCell} from "./cell";
-import {TableNode} from "../use/useTableNode";
-import {designComponent, PropType, useClasses} from "plain-design-composition";
-import {PlainTable} from "../../index";
-import React from "react";
-
-export const PltRow = designComponent({
-    name: 'plt-row',
-    props: {
-        table: {type: PlainTable, required: true},
-        node: {type: Object as PropType<TableNode>, required: true},
-        vid: {type: [String, Number]},
-    },
-    setup({props}) {
-
-        const handler = {
-            onClick: (e: React.MouseEvent) => props.table.handler.onClickRow(e, props.node),
-            onDoubleClick: (e: React.MouseEvent) => props.table.handler.onDblclickRow(e, props.node),
-            vid: props.vid,
-        }
-
-        const classes = useClasses(() => {
-            const ret = [
-                'plt-row',
-                {
-                    'plt-row-current': props.table.current.value == props.node.key
-                }
-            ] as any[]
-            if (!!props.table.props.rowClassFunc) {
-                ret.push(props.table.props.rowClassFunc(props.node))
-            }
-            return ret
-        })
-
-        return {
-            render: () => {
-                return props.table.hooks.onRenderRow.exec({
-                    content: (
-                        <tr className={classes.value} style={{height: `${props.table.numberState.bodyRowHeight}px`}} {...handler}>
-                            {props.table.plcData.value!.flatPlcList.map((plc, index) => <PltCell key={index} table={props.table} node={props.node} plc={plc}/>)}
-                        </tr>
-                    ),
-                    node: props.node,
-                    row: props.node.data,
-                }).content
-            }
-        }
-    },
-})

package/src/packages/PlTable/table/head/head-cell.tsx

@@ -1,72 +0,0 @@
-import {tPlcType} from "../../plc/utils/plc.type";
-import {useHeadCellResize} from "./useHeadCellResize";
-import {renderHeadCell} from "../../plc/utils/render";
-import {useColDraggier} from "./useColDraggier";
-import {computed, designComponent, PropType} from "plain-design-composition";
-import {PlainTable} from "../../index";
-import {PlainScroll} from "../../../PlScroll";
-import {classnames} from "plain-design-composition";
-import React from "react";
-import {toArray} from "../../../../utils/toArray";
-import PlIcon from "../../../PlIcon";
-
-export const PltHeadCell = designComponent({
-    name: 'plt-head-cell',
-    props: {
-        table: {type: PlainTable, required: true},
-        tablePlc: {type: Object as PropType<tPlcType>, required: true},
-        scroll: {type: Function as PropType<() => PlainScroll>, required: true},
-    },
-    setup({props}) {
-
-        const {resizeHandler} = useHeadCellResize(props.table, props.tablePlc)
-        const {tdAttrs} = useColDraggier(computed(() => ({
-            table: props.table,
-            plc: props.tablePlc,
-            scrollRefer: props.scroll,
-        })))
-
-        const sort = computed(() => {
-            const {tablePlc, table} = props
-            if (!table.props.sort) {return null}
-            if (tablePlc.group) {return null}
-            const sortObj = toArray(props.table.props.sort!).find(i => i.field === tablePlc.props.field)
-            if (!sortObj) {return null}
-            return !!sortObj.desc
-        })
-
-        return {
-            render: () => {
-                const content = renderHeadCell(props.tablePlc)
-                return (
-                    <td
-                        className={classnames([
-                            props.tablePlc.classes.head,
-                            props.tablePlc.props.headCls,
-                            !!props.table.props.headCellClassFunc ? props.table.props.headCellClassFunc(props.tablePlc) : null
-                        ] as any)}
-                        style={{
-                            ...props.tablePlc.styles.head as any,
-                            ...(!!props.table.props.headCellStyleFunc ? props.table.props.headCellStyleFunc(props.tablePlc) : {})
-                        }}
-                        rowSpan={props.tablePlc.rowspan}
-                        colSpan={props.tablePlc.colspan}
-                        onClick={e => props.table.event.emit.onClickHead(props.tablePlc, e)}
-                        {...tdAttrs}
-                    >
-                        {content}
-                        <span className="plt-head-cell-indicator" onMouseDown={resizeHandler.mousedown}/>
-                        {sort.value != null && (
-                            <div className={`plt-head-cell-sorter plt-head-cell-sorter-${sort.value ? 'desc' : 'asc'}`}>
-                                <div className="plt-head-cell-sorter-inner">
-                                    <PlIcon icon="el-icon-caret-top"/>
-                                    <PlIcon icon="el-icon-caret-bottom"/>
-                                </div>
-                            </div>
-                        )}
-                    </td>
-                )
-            }
-        }
-    },
-})

package/src/packages/PlTable/table/head/head.tsx

@@ -1,77 +0,0 @@
-import {renderColgroup} from "../../plc/utils/renderColgroup";
-import {PltHeadCell} from "./head-cell";
-import {TableHoverPart} from "../utils/table.utils";
-import {designComponent, onMounted, useRefs, useStyles} from "plain-design-composition";
-import {PlainTable} from "../../index";
-import {PlScroll} from "../../../PlScroll";
-import React from "react";
-
-export const PltHead = designComponent({
-    name: 'plt-head',
-    props: {
-        table: {type: PlainTable, required: true},
-    },
-    setup({props}) {
-
-        const {refs, onRef} = useRefs({
-            scroll: PlScroll,
-            table: HTMLTableElement,
-        })
-        /*Scroll的父节点需要固定高度*/
-        const styles = useStyles(style => {
-            style.height = `${props.table.plcData.value!.headPlcListArray.length * (props.table.numberState.headRowHeight + 1)}px`
-        })
-        /*当总的列宽度大于表格宽度时，设置宽度*/
-        const tableStyles = useStyles(style => {
-            const {targetTableWidth} = props.table.plcData.value!
-            if (!!targetTableWidth) {
-                style.width = `${targetTableWidth}px`
-            }
-        })
-        /*表头表体联动滚动*/
-        const bindScroll = props.table.bindScroll(
-            TableHoverPart.head,
-            (scrollLeft, part) => part !== TableHoverPart.head && refs.scroll!.methods.scroll({x: scrollLeft}, {noEmitScroll: true})
-        )
-        /*表头支持鼠标滚动横向滚动*/
-        const onWheel = (e: WheelEvent) => {
-            const {deltaX, deltaY} = e
-            if (Math.abs(deltaY) > Math.abs(deltaX)) {
-                e.preventDefault()
-                e.stopPropagation()
-                refs.scroll!.refs.wrapper!.scrollLeft = refs.scroll!.refs.wrapper!.scrollLeft + deltaY / 3
-            }
-        }
-        const scrollRef = () => refs.scroll!
-
-        onMounted(() => {
-            refs.table?.addEventListener('wheel', onWheel, true)
-        })
-
-        return {
-            render: () => (
-                <div className="plt-head" style={styles.value} onMouseEnter={bindScroll.onMouseEnter}>
-                    <PlScroll hideScrollbar scrollX refreshState={props.table.plcData.value!.targetTableWidth} onScroll={bindScroll.onScroll} ref={onRef.scroll}>
-                        <table {...{
-                            ref: onRef.table,
-                            cellSpacing: 0,
-                            cellPadding: 0,
-                            border: 0,
-                            style: tableStyles.value,
-                            key: props.table.plcData.value!.plcKeyString,
-                        }}>
-                            {renderColgroup(props.table.plcData.value!.flatPlcList)}
-                            <thead>
-                            {props.table.plcData.value!.headPlcListArray.map((array, arrayIndex) => (
-                                <tr style={{height: `${props.table.numberState.headRowHeight}px`}} key={arrayIndex}>
-                                    {array.map((plc, index) => <PltHeadCell key={index} table={props.table} tablePlc={plc} scroll={scrollRef}/>)}
-                                </tr>
-                            ))}
-                            </thead>
-                        </table>
-                    </PlScroll>
-                </div>
-            )
-        }
-    },
-})

package/src/packages/PlTable/table/head/useColDraggier.tsx

@@ -1,347 +0,0 @@
-import {tPlc, tPlcType} from "../../plc/utils/plc.type";
-import {addClass} from "plain-utils/dom/addClass";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
-import PlTable from "../../index";
-import {PlainScroll} from "../../../PlScroll";
-import {useAutoScroll} from "../../../PlScroll/useAutoScroll";
-import {ComputedRef, StyleProperties} from "plain-design-composition"
-import {nextIndex} from "plain-design-composition"
-import React from "react";
-
-interface DragData {
-    left: number
-    width: number
-    plc: tPlcType
-    droppable: boolean
-}
-
-enum HoverPart {
-    left = 'left',
-    right = 'right',
-}
-
-/**
- * 获取可以滚动的父组件
- * @author  韦胜健
- * @date    2020/8/19 23:50
- */
-export function getHorizontalScrollParent(el: HTMLElement): HTMLElement {
-    while (!!el && el.scrollWidth <= el.offsetWidth) {
-        el = el.parentElement!
-    }
-    return el
-}
-
-/**
- * 递归遍历plc数组数据
- * @author  韦胜健
- * @date    2020/9/6 11:24
- */
-function iteratePlc(plcList: tPlcType[], handler: (plc: tPlcType) => 'stop' | void): void {
-
-    for (let i = 0; i < plcList.length; i++) {
-        const item = plcList[i]
-        const flag = handler(item)
-        if (flag === 'stop') {
-            return
-        } else {
-            if (item.group) {
-                iteratePlc(item.children, handler)
-            }
-        }
-    }
-
-}
-
-/**
- * 或者plc对象的兄弟节点
- * @author  韦胜健
- * @date    2020/9/6 11:24
- */
-function getBroPlcList(plcList: tPlcType[], plc: tPlcType): tPlcType[] {
-
-    let broPlcList: tPlcType[] = []
-
-    if (plcList.indexOf(plc) > -1) {
-        broPlcList = plcList
-    } else {
-        iteratePlc(plcList, itarPlc => {
-            if (itarPlc.group) {
-                if (itarPlc.children.indexOf(plc) > -1) {
-                    broPlcList = itarPlc.children
-                    return 'stop'
-                }
-            }
-        })
-    }
-
-    if (broPlcList.length === 0) {
-        /*内部错误，找不到兄弟节点*/
-        throw new Error('Internal error! sibling node not found.')
-    }
-
-    return broPlcList
-}
-
-/**
- * 获取plc的宽度
- * @author  韦胜健
- * @date    2020/9/6 12:09
- */
-function getPlcWidth(plc: tPlcType) {
-    if (!plc.group) {
-        return Number(plc.props.width)
-    } else {
-        return plc.children.reduce((ret: number, item: tPlcType) => {
-            ret += getPlcWidth(item)
-            return ret
-        }, 0)
-    }
-}
-
-/**
- * 获取plc的高度，如果是plc，则高度为currentTarget的高度，如果是plcGroup，则高度等于所有后代层数乘以currentTarget的高度
- * @author  韦胜健
- * @date    2020/9/6 11:29
- */
-function getIndicatorHeight(
-    plc: tPlcType,
-    table: typeof PlTable.use.class,
-) {
-    if (plc.group) {
-        return (table.plcData.value!.maxLevel - plc.level!) * table.numberState.headRowHeight
-    } else {
-        return plc.rowspan! * table.numberState.headRowHeight
-    }
-
-}
-
-/**
- * 获取plcList中最底层的plc
- * @author  韦胜健
- * @date    2020/9/6 20:27
- */
-function getLowestPlcList(plcList: tPlcType[]): tPlc[] {
-
-    return plcList.reduce((ret: tPlc[], plc: tPlcType) => {
-        if (plc.group) {
-            ret.push(...getLowestPlcList(plc.children))
-        } else {
-            ret.push(plc)
-        }
-        return ret
-    }, [] as tPlc[])
-
-}
-
-/**
- * 获取拖拽所需要的数据
- * @author  韦胜健
- * @date    2020/9/6 20:41
- */
-function getDragData(table: typeof PlTable.use.class, plc: tPlcType): {
-    broData: DragData[],
-    broList: tPlcType[]
-} {
-
-    const plcList = table.plcData.value!.plcList
-    const broList = getBroPlcList(plcList, plc)
-
-    const broLowestList = getLowestPlcList(broList)
-    const allLowestList = getLowestPlcList(plcList) as tPlcType[]
-
-    allLowestList.splice(allLowestList.indexOf(broLowestList[0]), broLowestList.length, ...broList)
-
-    const broData: DragData[] = []
-    let left = 0
-
-    allLowestList.forEach(plc => {
-        const item = {
-            left,
-            width: getPlcWidth(plc),
-            plc,
-            droppable: broList.indexOf(plc) > -1
-        }
-        left += item.width
-        broData.push(item)
-    })
-
-    // broData.forEach(bro => console.log(bro.plc.props.title, bro.left, bro.droppable))
-
-    return {
-        broList,
-        broData,
-    }
-
-}
-
-export function useColDraggier(config: ComputedRef<{
-    plc: tPlcType,
-    table: typeof PlTable.use.class,
-    scrollRefer: () => PlainScroll,
-}>) {
-
-    const isDraggable = !!config.value.table.props.colDraggable && config.value.plc.props.colDraggable !== false
-    if (!isDraggable) {return {tdAttrs: {}}}
-    const autoScroller = useAutoScroll({
-        vertical: false,
-        getScroll: config.value.scrollRefer,
-    })
-    const indicatorSize = 3
-    const state = {
-        startClientX: 0,
-        moveClientX: 0,
-
-        startScrollLeft: 0,
-        moveScrollLeft: 0,
-
-        scrollParent: null as null | HTMLElement,
-        currentRect: {
-            top: 0,
-            left: 0,
-            height: 0,
-            width: 0,
-        },
-        scrollRect: {
-            top: 0,
-            left: 0,
-            height: 0,
-            width: 0,
-        },
-        indicator: null as null | HTMLElement,
-        dragData: null as null | DragData[],
-        broList: null as null | tPlcType[],
-        refreshData: null as null | {
-            index: number,
-            dragData: DragData,
-            hover: HoverPart,
-        }
-    }
-
-    const utils = {
-        getDragData: (left: number): { index: number, dragData: DragData, hover: HoverPart } => {
-            for (let i = 0; i < state.dragData!.length; i++) {
-                const dd = state.dragData![i];
-                if (left >= dd.left && left <= dd.left + (dd.width || Infinity)) {
-                    return {
-                        index: i,
-                        dragData: dd,
-                        hover: left - dd.left > dd.width / 2 ? HoverPart.right : HoverPart.left
-                    }
-                }
-            }
-            throw new Error(`Can not get dragData by left:${left}`)
-        },
-        refresh() {
-            const left = (state.moveClientX - state.scrollRect.left) + (state.moveScrollLeft)
-            state.refreshData = utils.getDragData(left)
-            const {dragData, hover} = state.refreshData
-
-            let indicatorLeft = (hover === HoverPart.left ? dragData.left : dragData.left + dragData.width - indicatorSize) + state.scrollRect.left - state.moveScrollLeft
-            indicatorLeft = Math.min(Math.max(state.scrollRect.left, indicatorLeft), state.scrollRect.left + state.scrollRect.width - indicatorSize)
-
-            Object.assign(state.indicator!.style, {
-                left: `${indicatorLeft}px`,
-            } as StyleProperties)
-
-            state.indicator!.setAttribute('droppable', dragData.droppable ? 'true' : 'false')
-        },
-    }
-
-    const handler = {
-        mousedown: (e: React.MouseEvent) => {
-            if (e.button === 2) {return}
-
-            const {broList, broData} = getDragData(config.value.table, config.value.plc)
-            state.dragData = broData
-            state.broList = broList
-
-            const currentTarget = e.currentTarget as HTMLElement
-            state.currentRect = currentTarget.getBoundingClientRect()!
-            const indicatorHeight = getIndicatorHeight(config.value.plc, config.value.table)
-
-            state.startClientX = state.moveClientX = e.clientX
-            state.scrollParent = getHorizontalScrollParent(currentTarget)
-            state.scrollRect = state.scrollParent.parentElement!.getBoundingClientRect()
-            state.startScrollLeft = state.moveScrollLeft = state.scrollParent.scrollLeft
-
-            state.indicator = document.createElement('div')
-            addClass(state.indicator, 'plt-col-draggier-indicator')
-            Object.assign(state.indicator.style, {
-                top: `${state.currentRect.top}px`,
-                left: `${state.currentRect.left}px`,
-                height: `${indicatorHeight}px`,
-                width: `${indicatorSize}px`,
-                position: 'fixed',
-                zIndex: `${nextIndex() + 100}`,  // 加100是为了不被 autoScroller 遮住；
-                pointerEvents: 'none',                  // indicator只是一个指示的作用，这里设置none为了不挡住autoScroller的鼠标事件
-            } as StyleProperties)
-            document.body.appendChild(state.indicator)
-
-            disabledUserSelect()
-            document.addEventListener('mouseup', handler.mouseup)
-            state.scrollParent!.addEventListener('mousemove', handler.mousemove)
-            state.scrollParent!.addEventListener('scroll', handler.scroll)
-
-            utils.refresh()
-            autoScroller.showHover()
-        },
-        mousemove: (e: MouseEvent) => {
-            state.moveClientX = e.clientX
-            utils.refresh()
-        },
-        scroll: () => {
-            state.moveScrollLeft = state.scrollParent!.scrollLeft
-            utils.refresh()
-        },
-        mouseup: () => {
-
-            (() => {
-                if (!state.refreshData) {
-                    return
-                }
-                const {dragData, hover} = state.refreshData
-
-                if (!dragData.droppable) {
-                    return;
-                }
-
-                const startPlc = config.value.plc
-                const endPlc = dragData.plc
-                const broList = state.broList!
-
-                const startIndex = broList.indexOf(startPlc)
-                let endIndex = broList.indexOf(endPlc)
-                if (startIndex === endIndex) {
-                    return;
-                }
-
-                if (startPlc.props.fixed != endPlc.props.fixed) {
-                    startPlc.setPropsState({fixed: endPlc.props.fixed})
-                }
-
-                broList.splice(startIndex, 1)
-                endIndex = broList.indexOf(endPlc)
-                endIndex = hover === HoverPart.right ? endIndex + 1 : endIndex
-                broList.splice(endIndex, 0, startPlc)
-
-                broList.forEach((plc, index) => plc.setPropsState({order: index}))
-            })();
-
-            enableUserSelect()
-            document.removeEventListener('mouseup', handler.mouseup)
-            state.scrollParent!.removeEventListener('mousemove', handler.mousemove)
-            state.scrollParent!.removeEventListener('scroll', handler.scroll)
-            if (!!state.indicator) {
-                state.indicator.parentNode!.removeChild(state.indicator)
-                state.indicator = null
-            }
-            autoScroller.hideHover()
-        }
-    }
-
-    return {
-        tdAttrs: {onMouseDown: handler.mousedown,}
-    }
-}