styles(async-flowchart): [async-flowchart] add async-flowchart types (o…

…pentiny#1312)

packages/renderless/src/async-flowchart/index.ts

@@ -1,7 +1,22 @@
 import ResizeObserver from '../common/deps/ResizeObserver'
+import type {
+  IAsyncFlowchartState,
+  IAsyncFlowchartProps,
+  IAsyncFlowchartApi,
+  ISharedRenderlessParamHooks,
+  ISharedRenderlessParamUtils
+} from '@/types'
 
 export const observeContainerSize =
-  ({ nextTick, vm, state }) =>
+  ({
+    nextTick,
+    vm,
+    state
+  }: {
+    nextTick: ISharedRenderlessParamHooks['nextTick']
+    vm: ISharedRenderlessParamUtils['vm']
+    state: IAsyncFlowchartState
+  }) =>
   () => {
     nextTick(() => {
       const observedElement = vm.$el
@@ -12,7 +27,7 @@ export const observeContainerSize =
             if (vm.$refs.chart) {
               vm.$refs.chart.refresh({
                 graphWidth: observedElement.offsetWidth,
-                adjustX: -state.config.nodeWrapperSize / 2
+                adjustX: -(state?.config?.nodeWrapperSize || 0) / 2
               })
             }
           })
@@ -24,7 +39,7 @@ export const observeContainerSize =
     })
   }
 
-export const unobserveContainerSize = (state) => () => {
+export const unobserveContainerSize = (state: IAsyncFlowchartState) => () => {
   if (state.temporary.observer) {
     state.temporary.observer.unobserve(state.temporary.observed)
     state.temporary.observer.disconnect()
@@ -34,7 +49,23 @@ export const unobserveContainerSize = (state) => () => {
 }
 
 export const fetchData =
-  ({ Loading, props, state, vm, markRaw, api, nextTick }) =>
+  ({
+    Loading,
+    props,
+    state,
+    vm,
+    markRaw,
+    api,
+    nextTick
+  }: {
+    Loading: any
+    props: IAsyncFlowchartProps
+    state: IAsyncFlowchartState
+    vm: ISharedRenderlessParamUtils['vm']
+    markRaw: ISharedRenderlessParamHooks['markRaw']
+    api: IAsyncFlowchartApi
+    nextTick: ISharedRenderlessParamHooks['nextTick']
+  }) =>
   () => {
     if (typeof props.fetch === 'function') {
       api.unobserveContainerSize()
@@ -64,12 +95,16 @@ export const fetchData =
     }
   }
 
-export const handleClickNode = (emit) => (afterNode, e) => emit('click-node', afterNode, e)
+export const handleClickNode = (emit: ISharedRenderlessParamUtils['emit']) => (afterNode, e) =>
+  emit('click-node', afterNode, e)
 
-export const handleClickLink = (emit) => (afterLink, e) => emit('click-link', afterLink, e)
+export const handleClickLink = (emit: ISharedRenderlessParamUtils['emit']) => (afterLink, e) =>
+  emit('click-link', afterLink, e)
 
-export const handleClickBlank = (emit) => (param, e) => emit('click-blank', param, e)
+export const handleClickBlank = (emit: ISharedRenderlessParamUtils['emit']) => (param, e) =>
+  emit('click-blank', param, e)
 
-export const handleClickGroup = (emit) => (afterGroup, e) => emit('click-group', afterGroup, e)
+export const handleClickGroup = (emit: ISharedRenderlessParamUtils['emit']) => (afterGroup, e) =>
+  emit('click-group', afterGroup, e)
 
-export const refresh = (api) => () => api.fetchData()
+export const refresh = (api: IAsyncFlowchartApi) => () => api.fetchData()

packages/renderless/src/async-flowchart/vue.ts

@@ -8,24 +8,31 @@ import {
   handleClickGroup,
   refresh
 } from './index'
+import type {
+  IAsyncFlowchartProps,
+  IAsyncFlowchartState,
+  IAsyncFlowchartApi,
+  ISharedRenderlessParamHooks,
+  ISharedRenderlessParamUtils
+} from '@/types'
 
 export const api = ['state', 'handleClickNode', 'handleClickLink', 'handleClickBlank', 'handleClickGroup', 'refresh']
 
 export const renderless = (
-  props,
-  { reactive, onMounted, onBeforeUnmount, markRaw },
-  { nextTick, vm, emit },
+  props: IAsyncFlowchartProps,
+  { reactive, onMounted, onBeforeUnmount, markRaw }: ISharedRenderlessParamHooks,
+  { nextTick, vm, emit }: ISharedRenderlessParamUtils,
   { Loading }
 ) => {
-  const state = reactive({
+  const state = reactive<IAsyncFlowchartState>({
     loading: true,
     data: null,
     config: null
   })
 
   state.temporary = {}
 
-  const api = {
+  const api: Partial<IAsyncFlowchartApi> = {
     state,
     observeContainerSize: observeContainerSize({ nextTick, vm, state }),
     unobserveContainerSize: unobserveContainerSize(state),
@@ -36,12 +43,12 @@ export const renderless = (
   }
 
   Object.assign(api, {
-    fetchData: fetchData({ Loading, props, state, vm, markRaw, api, nextTick }),
-    refresh: refresh(api)
+    fetchData: fetchData({ Loading, props, state, vm, markRaw, api: api as IAsyncFlowchartApi, nextTick }),
+    refresh: refresh(api as IAsyncFlowchartApi)
   })
 
-  onMounted(api.fetchData)
-  onBeforeUnmount(() => api.unobserveContainerSize())
+  onMounted((api as IAsyncFlowchartApi).fetchData)
+  onBeforeUnmount(() => (api as IAsyncFlowchartApi).unobserveContainerSize())
 
   return api
 }

packages/renderless/types/async-flowchart.type.ts

@@ -0,0 +1,34 @@
+import type { ExtractPropTypes } from 'vue'
+import type { asyncFlowchartProps } from '@/async-flowchart/src'
+import type ResizeObserver from '../src/common/deps/ResizeObserver'
+import type {
+  observeContainerSize,
+  unobserveContainerSize,
+  handleClickNode,
+  handleClickLink,
+  handleClickBlank,
+  handleClickGroup,
+  fetchData,
+  refresh
+} from '../src/async-flowchart'
+
+export interface IAsyncFlowchartState {
+  loading: boolean
+  data: null
+  config: null | { nodeWrapperSize: number }
+  temporary?: typeof ResizeObserver
+}
+
+export type IAsyncFlowchartProps = ExtractPropTypes<typeof asyncFlowchartProps>
+
+export interface IAsyncFlowchartApi {
+  state: IAsyncFlowchartState
+  observeContainerSize: ReturnType<typeof observeContainerSize>
+  unobserveContainerSize: ReturnType<typeof unobserveContainerSize>
+  handleClickNode: ReturnType<typeof handleClickNode>
+  handleClickLink: ReturnType<typeof handleClickLink>
+  handleClickBlank: ReturnType<typeof handleClickBlank>
+  handleClickGroup: ReturnType<typeof handleClickGroup>
+  fetchData: ReturnType<typeof fetchData>
+  refresh: ReturnType<typeof refresh>
+}

packages/renderless/types/index.ts

@@ -4,6 +4,7 @@ export * from './alert.type'
 export * from './amount.type'
 export * from './anchor.type'
 export * from './area.type'
+export * from './async-flowchart.type'
 export * from './autocomplete.type'
 export * from './autonavi-map.type'
 export * from './avatar.type'

packages/vue/src/async-flowchart/src/index.ts

@@ -12,15 +12,17 @@
 import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile-first'
 
+export const asyncFlowchartProps = {
+  ...$props,
+  fetch: {
+    type: Function,
+    required: true
+  }
+}
+
 export default defineComponent({
   name: $prefix + 'AsyncFlowchart',
-  props: {
-    ...$props,
-    fetch: {
-      type: Function,
-      required: true
-    }
-  },
+  props: asyncFlowchartProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }