plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/useAddress/index.tsx

@@ -1,167 +0,0 @@
-import {getInitialConfigState} from "../initialize";
-import {iAddressConfig, iAddressData, iAddressService, iUseAddress} from "./useAddress.utils";
-import {reactive} from "plain-design-composition";
-import {debounce} from "plain-utils/utils/debounce";
-import {defer} from "plain-utils/utils/defer";
-
-export const useAddress: iUseAddress = (() => {
-    const map = new WeakMap<iAddressConfig, iAddressService>()
-    return () => {
-        const config = getInitialConfigState('useAddressConfig')()
-        let $address = map.get(config)
-        if (!$address) {
-            const useAddressByCodeData = useAddressByCode(config)
-            const useAddressByParentCodeData = useAddressByParentCode(config, (list) => {
-                list.forEach(addr => useAddressByCodeData.saveAddress(addr))
-            })
-            $address = {
-                config: config,
-                ...useAddressByCodeData,
-                ...useAddressByParentCodeData,
-            }
-            map.set(config, $address)
-        }
-        return {$address: $address!}
-    }
-})();
-
-function useAddressByCode(config: iAddressConfig) {
-
-    interface AddressDefer {
-        promise: Promise<iAddressData>,
-        resolve: (data: iAddressData) => void,
-        reject: (...args: any) => void,
-    }
-
-    const state = reactive({
-        codeToAddress: {} as Record<string, iAddressData | undefined>,
-        loadingMsg: '...',
-    })
-
-    setInterval(() => {
-        state.loadingMsg += '.'
-        state.loadingMsg.length > 6 && (state.loadingMsg = '.')
-    }, 500)
-
-    const freezeState = {
-        codesToByQuery: [] as string[],
-        queryPromise: {} as Record<string, AddressDefer | undefined>
-    }
-
-    const doRequest = debounce(async () => {
-        const codesToBeQuery = freezeState.codesToByQuery
-        freezeState.codesToByQuery = []
-        try {
-            const data = await config.getAddressByCodes(codesToBeQuery)
-            codesToBeQuery.forEach((code) => {
-                const addr = data[code] || []
-                freezeState.queryPromise[code]?.resolve(addr)
-                state.codeToAddress[code] = addr
-            })
-        } catch (e) {
-            console.error(e)
-            codesToBeQuery.forEach((code) => {
-                freezeState.queryPromise[code]?.reject(e)
-            })
-        }
-    }, 500)
-
-    const addQueryLovCode = (code: string) => {freezeState.codesToByQuery.indexOf(code) === -1 && (freezeState.codesToByQuery.push(code))}
-
-    const getAddrByCode = async (code: string): Promise<iAddressData> => {
-        let addrDfd = freezeState.queryPromise[code]
-        if (!addrDfd) {
-            const dfd = defer<iAddressData>()
-            addrDfd = freezeState.queryPromise[code] = dfd
-            addQueryLovCode(code)
-            doRequest()
-        }
-        return addrDfd.promise
-    }
-
-    const getNameByCodeComputed = (code: string): string => {
-        if (state.codeToAddress[code] == null) {
-            getAddrByCode(code)
-            return '加载中' + state.loadingMsg
-        } else {
-            return state.codeToAddress[code]?.name || code
-        }
-    }
-
-    const saveAddress = (addr: iAddressData) => {
-        state.codeToAddress[addr.code] = addr
-        freezeState.queryPromise[addr.code] = (() => {
-            const dfd = defer<iAddressData>()
-            dfd.resolve(addr)
-            return dfd
-        })()
-    }
-
-    return {
-        saveAddress,
-        getAddrByCode,
-        getNameByCodeComputed,
-    }
-}
-
-function useAddressByParentCode(config: iAddressConfig, onLoadAddrList: (addrList: iAddressData[]) => void) {
-
-    interface AddressListDefer {
-        promise: Promise<iAddressData[]>,
-        resolve: (data: iAddressData[]) => void,
-        reject: (...args: any) => void,
-    }
-
-    const state = reactive({
-        codeToAddressList: {} as Record<string, iAddressData[] | undefined>,
-        loadingMsg: '...',
-    })
-
-    setInterval(() => {
-        state.loadingMsg += '.'
-        state.loadingMsg.length > 6 && (state.loadingMsg = '.')
-    }, 500)
-
-    const freezeState = {
-        codesToByQuery: [] as string[],
-        queryPromise: {} as Record<string, AddressListDefer | undefined>
-    }
-
-    const doRequest = debounce(async () => {
-        const codesToBeQuery = freezeState.codesToByQuery
-        freezeState.codesToByQuery = []
-        try {
-            const data = await config.getAddressByParentCodes(codesToBeQuery)
-            codesToBeQuery.forEach((code) => {
-                const addrList = data[code] || []
-                freezeState.queryPromise[code]?.resolve(addrList)
-                state.codeToAddressList[code] = addrList
-                onLoadAddrList(addrList)
-            })
-        } catch (e) {
-            console.error(e)
-            codesToBeQuery.forEach((code) => {
-                freezeState.queryPromise[code]?.reject(e)
-            })
-        }
-    }, 500)
-
-    const addQueryLovCode = (code: string) => {freezeState.codesToByQuery.indexOf(code) === -1 && (freezeState.codesToByQuery.push(code))}
-
-    const getAddressByParentCode = async (code: string): Promise<iAddressData[]> => {
-        let addrDfd = freezeState.queryPromise[code]
-        if (!addrDfd) {
-            const dfd = defer<iAddressData[]>()
-            addrDfd = freezeState.queryPromise[code] = dfd
-            addQueryLovCode(code)
-            doRequest()
-        }
-        return addrDfd.promise
-    }
-
-    return {
-        getAddressByParentCode
-    }
-}
-
-export default useAddress

package/src/packages/useAddress/useAddress.utils.tsx

@@ -1,60 +0,0 @@
-import {tFilterConfigObj} from "../PlFilter/FilterConfig";
-
-export interface iAddressData {
-    id: string,
-    code: string,
-    name: string,
-    parentCode: string,
-    parentName: string,
-    deep: number,
-}
-
-export interface iGetAddressByCodes {
-    (codes: string[]): Promise<Record<string, iAddressData>>
-}
-
-export interface iGetAddressByParentCodes {
-    (codes: string[]): Promise<Record<string, iAddressData[]>>
-}
-
-export interface iGetAddressByName {
-    (name: string, deep?: number): Promise<iAddressData[]>
-}
-
-export interface iAddressConfig {
-    getAddressByCodes: iGetAddressByCodes,
-    getAddressByParentCodes: iGetAddressByParentCodes,
-    getAddressByName: iGetAddressByName,
-}
-
-export interface iUseAddressConfig {
-    (): iAddressConfig
-}
-
-export interface iAddressService {
-    getAddrByCode: (code: string) => Promise<iAddressData>,
-    getNameByCodeComputed: (code: string) => string,
-    getAddressByParentCode: (code: string) => Promise<iAddressData[]>,
-    config: iAddressConfig,
-}
-
-export interface iUseAddress {
-    (): { $address: iAddressService }
-}
-
-export const AddressQueryValueFormatter = {
-    equal: (config: tFilterConfigObj) => {
-        return async (value: any) => {
-            const $address = config.$address as iAddressService
-            const addrList = await $address.config.getAddressByName(value, config.province ? 0 : config.city ? 1 : 2)
-            return addrList.find(i => i.name == value)?.code || 'not found!'
-        }
-    },
-    inLike: (config: tFilterConfigObj) => {
-        return async (value: any) => {
-            const $address = config.$address as iAddressService
-            const addrList = await $address.config.getAddressByName(value, config.province ? 0 : config.city ? 1 : 2)
-            return addrList.length === 0 ? ['not found'] : addrList.map(i => i.code)
-        }
-    },
-}

package/src/packages/useColorPicker/index.tsx

@@ -1,18 +0,0 @@
-import {createUseEditPopperAgent} from "../useEditPopperAgent/createAgentGetter";
-import PlColorPanel from "../PlColorPicker/PlColorPanel";
-import React from "react";
-
-export const useColorPicker = createUseEditPopperAgent({
-    name: 'color-picker',
-    render(attrs: any) {
-        return <PlColorPanel {...attrs}/>
-    },
-    defaultPopperAttrs: {
-        transition: 'pl-transition-popper-drop',
-    },
-    defaultRenderAttrs: {
-        onChange() {this.hide()},
-    },
-})
-
-export default useColorPicker

package/src/packages/useContextmenu/PlContextMenuService.tsx

@@ -1,178 +0,0 @@
-import {onBeforeUnmount, onMounted, provide, reactive, ref, Portal, useRefs, useStyles} from "plain-design-composition";
-import {createDefaultService} from "../PlRoot/createDefaultService";
-import {nextIndex} from "plain-design-composition"
-import {ReactNode} from "react";
-import React from "react";
-import PlTransition from "../PlTransition";
-import {ClickBodyListener} from "../../utils/ClickBodyListener";
-
-export type ContextmenuReference = MouseEvent | HTMLElement | { x: number, y: number } | Element | EventTarget | null
-export type ContextContent = (() => ReactNode) | { label: string, icon?: string, disabled?: string }[]
-
-export interface ContextmenuServiceOption {
-    reference: ContextmenuReference,
-    content: ContextContent,
-    width?: number,
-    height?: number,
-    backgroundColor?: string,
-    hide?: () => void,
-}
-
-export function getReferencePosition(reference: ContextmenuReference, bodyPos: { width: number, height: number }): { top: number, left: number } {
-    if (!reference) {
-        throw new Error('reference is null')
-    }
-    const maxPos = {top: document.body.scrollHeight - bodyPos.height, left: document.body.scrollWidth - bodyPos.width}
-    let pos = {top: 0, left: 0}
-
-    if ('addEventListener' in reference) {
-        let el = reference
-        if ('getBoundingClientRect' in el) {
-            const {top, left, height} = el.getBoundingClientRect()
-            pos = {
-                top: top + height,
-                left: left,
-            }
-        } else {
-            console.log('reference', reference)
-            throw new Error('getBoundingClientRect not exist in reference')
-        }
-    } else if ('clientX' in reference) {
-        const {clientX, clientY} = reference
-        pos = {
-            top: clientY,
-            left: clientX,
-        }
-    } else {
-        pos = {
-            top: reference.y,
-            left: reference.x,
-        }
-    }
-
-    if (pos.left > maxPos.left) {pos.left = maxPos.left}
-    if (pos.top > maxPos.top) {pos.top = maxPos.top}
-
-    return pos
-}
-
-export const PlContextMenuService = createDefaultService({
-    name: 'pl-contextmenu-service',
-    setup(option: ContextmenuServiceOption) {
-
-        const {refs, onRef} = useRefs({
-            el: HTMLDivElement,
-        })
-        const isShow = ref(false)
-        const isOpen = ref(false)
-        const state = reactive({
-            option,
-            zIndex: nextIndex(),
-            bodyPos: null,
-        }) as { option: ContextmenuServiceOption, zIndex: number, bodyPos: { width: number, height: number } | null, }
-
-        const mounted = new Promise<void>(resolve => onMounted(resolve))
-        let hideTimer: number | null = null
-        let onTransitionEnd: (() => void) | null = null
-
-        const methods = {
-            service: (option: ContextmenuServiceOption) => {
-                state.option = option
-                methods.show()
-                option.hide = () => methods.hide()
-            },
-            show: async () => {
-                if (!!hideTimer) clearTimeout(hideTimer)
-                state.zIndex = nextIndex()
-                await mounted;
-                isShow.value = true
-                onTransitionEnd = () => {
-                    isOpen.value = true
-                    onTransitionEnd = null
-                }
-            },
-            hide: () => {
-                isShow.value = false
-                onTransitionEnd = () => {
-                    isOpen.value = false
-                    onTransitionEnd = null
-                }
-            },
-        }
-
-        const styles = useStyles(style => {
-            if (!state.bodyPos) {
-                style.opacity = 0
-                return
-            }
-            const {top, left} = getReferencePosition(state.option.reference, state.bodyPos)
-            style.top = `${top}px`
-            style.left = `${left}px`
-            style.zIndex = state.zIndex
-        })
-
-        const bodyStyles = useStyles(style => {
-            const {width, height} = state.option
-            !!width && (style.width = `${width}px`);
-            !!height && (style.height = `${height}px`);
-            style.backgroundColor = state.option.backgroundColor || 'white'
-        })
-
-        const handler = {
-            onTransitionEnd: () => !!onTransitionEnd && onTransitionEnd(),
-            onMousedownWindow: (e: MouseEvent) => {
-                if (!refs.el!.contains(e.target as HTMLDivElement)) {
-                    hideTimer = setTimeout(() => methods.hide(), 50) as any as number
-                }
-            },
-            clickDropdownOption: () => {
-                methods.hide()
-            },
-        }
-
-        onBeforeUnmount(ClickBodyListener.listen(handler.onMousedownWindow))
-
-        provide('@@pl-dropdown', {handler})
-
-        return {
-            refer: {
-                state,
-                isShow,
-                isOpen,
-                ...methods,
-            },
-            render: () => {
-
-                let content: ReactNode;
-                if (typeof state.option.content === "function") {
-                    content = state.option.content()
-                } else {
-                    content = state.option.content.map(item => <div>
-                        {item.label}
-                    </div>)
-                }
-
-                return (
-                    <Portal to=".pl-root-service-container">
-                        <div className="pl-contextmenu-service" style={styles.value} ref={onRef.el} {...{show: String(isShow.value)} as any}>
-                            <PlTransition
-                                key={state.zIndex}
-                                name="pl-transition-scale"
-                                show={isShow.value}
-                                unmount={false}
-                                onEnter={() => state.bodyPos = {width: refs.el!.offsetWidth, height: refs.el!.offsetHeight}}
-                                onEntered={handler.onTransitionEnd}
-                                onExited={handler.onTransitionEnd}>
-                                <div className="pl-contextmenu-service-body" style={bodyStyles.value}>
-                                    {content}
-                                </div>
-                            </PlTransition>
-                        </div>
-                    </Portal>
-                )
-            }
-        }
-    },
-})
-
-export type PlContextMenuServiceComponent = typeof PlContextMenuService.use.class

package/src/packages/useContextmenu/contextmenu-service.scss

@@ -1,19 +0,0 @@
-@include theme {
-  .pl-contextmenu-service {
-    position: fixed;
-
-    .pl-contextmenu-service-body {
-      transition: all $transition 150ms;
-      transform-origin: top left;
-      box-sizing: border-box;
-      box-shadow: $boxshadow;
-      padding: 4px 0;
-      border: solid 1px $ibc;
-
-      .pl-dropdown-option {
-        font-size: 12px;
-        color: $itc;
-      }
-    }
-  }
-}

package/src/packages/useContextmenu/index.tsx

@@ -1,45 +0,0 @@
-import {createServiceWithoutContext, createUseService} from "../PlRoot/registryRootService";
-import {createDefaultManager} from "../PlRoot/createDefaultManager";
-import {ContextContent, ContextmenuReference, ContextmenuServiceOption, getReferencePosition, PlContextMenuService, PlContextMenuServiceComponent} from "./PlContextMenuService";
-import './contextmenu-service.scss'
-
-export const useContextmenu = createUseService({
-        name: 'contextmenu',
-        managerComponent: createDefaultManager('pl-contextmenu-service-manager', PlContextMenuService, ((items: PlContextMenuServiceComponent[], option: ContextmenuServiceOption) => {
-
-            let exist: PlContextMenuServiceComponent | null = null
-            let available: PlContextMenuServiceComponent | null = null
-            items.forEach(item => {
-                if (!!exist) {
-                    return
-                }
-                if (item.state.option === option) {
-                    exist = item
-                    return;
-                }
-                if (item.state.option.reference === option.reference) {
-                    exist = item
-                    return;
-                }
-                if (!item.isShow.value && !item.isOpen.value) {
-                    available = item
-                }
-            })
-            return exist || available
-        }) as any),
-        createService: (getManager) => {
-            return async (reference: ContextmenuReference, content: ContextContent, opt?: ContextmenuServiceOption) => {
-                let option = {reference, content}
-                if (!!opt) {
-                    option = Object.assign(opt, option)
-                }
-                const manager = await getManager()
-                return manager.service(option)
-            }
-        }
-    },
-)
-
-export default useContextmenu
-
-export const $$contextmenu = createServiceWithoutContext(useContextmenu)