styles(fall-menu): [fall-menu] add fall-menu types (#1315)

packages/renderless/src/fall-menu/index.ts

@@ -14,17 +14,18 @@ import { REFRESH_INTERVAL } from '../common'
 import { on, off } from '../common/deps/dom'
 import PopupManager from '../common/deps/popup-manager'
 import { xss } from '../common/xss.js'
+import type { IFallMenuApi, IFallMenuState, IFallMenuProps, IPagerData } from '@/types'
 
-export const arrowClick = (state) => (opt) => {
+export const arrowClick = (state: IFallMenuState) => (opt) => {
   state.pager += opt
 }
 
-export const overContent = (state) => (on) => {
+export const overContent = (state: IFallMenuState) => (on) => {
   state.isActive = on
 }
 
 export const mouseover =
-  ({ fall, props, state }) =>
+  ({ fall, props, state }: { fall: any; props: IFallMenuProps; state: IFallMenuState }) =>
   (index) => {
     const popupBox = fall.value
 
@@ -48,19 +49,23 @@ export const mouseover =
     }
   }
 
-export const mouseout = (state) => () => {
+export const mouseout = (state: IFallMenuState) => () => {
   state.isActive = false
   state.activeNode = null
 }
 
 export const computePx =
-  ({ props, refs, state }) =>
+  ({ props, refs, state }: { props: IFallMenuProps; refs: any; state: IFallMenuState }) =>
   () => {
     const list = refs.list
     const width = list.parentElement.clientWidth
-    const arr = list.querySelectorAll('li')
-    const set = { data: [], offset: [], index: [] }
-    const liWidth = []
+    const arr = list.querySelectorAll('li') as NodeListOf<HTMLLIElement>
+    const set: IPagerData = {
+      data: [],
+      offset: [],
+      index: []
+    }
+    const liWidth: number[] = []
     let innerwidth = 0
     let start = 0
 
@@ -69,7 +74,8 @@ export const computePx =
       liWidth.push(arr[i].clientWidth)
 
       if (innerwidth > width || i === len - 1) {
-        set.data.push(props.data.slice(start, i))
+        // todo set.data 类型待确认
+        set.data.push(props.data.slice(start, i) as any)
         set.offset.push(`-${arr[start].offsetLeft}px`)
         set.index.push(i)
 
@@ -92,7 +98,7 @@ export const computePx =
   }
 
 export const reRender =
-  ({ api, state, timeout }) =>
+  ({ api, state, timeout }: { api: IFallMenuApi; state: IFallMenuState; timeout?: NodeJS.Timeout }) =>
   () => {
     timeout && clearTimeout(timeout)
 
@@ -119,7 +125,7 @@ export const computeLeft =
     state.pagerData.offset[state.pager - 1]
 
 export const computeData =
-  ({ props }) =>
+  ({ props }: { props: IFallMenuProps }) =>
   () => {
     if (Array.isArray(props.data) && props.data.length) {
       props.data.forEach((level1) => {

packages/renderless/src/fall-menu/vue.ts

@@ -22,10 +22,27 @@ import {
   computeLeft,
   computeData
 } from './index'
+import type {
+  ISharedRenderlessFunctionParams,
+  ISharedRenderlessParamUtils,
+  IFallMenuApi,
+  IFallMenuState,
+  IFallMenuProps
+} from '@/types'
 
 export const api = ['state', 'fall', 'arrowClick', 'mouseover', 'mouseout', 'overContent', 'reRender', 'left']
 
-const initState = ({ reactive, computed, api, props }) => {
+const initState = ({
+  reactive,
+  computed,
+  api,
+  props
+}: {
+  reactive: ISharedRenderlessFunctionParams<null>['reactive']
+  computed: ISharedRenderlessFunctionParams<null>['computed']
+  api: IFallMenuApi
+  props: IFallMenuProps
+}) => {
   const state = reactive({
     pager: 1,
     level2data: [],
@@ -39,7 +56,19 @@ const initState = ({ reactive, computed, api, props }) => {
   return state
 }
 
-const initApi = ({ api, state, fall, props, refs }) => {
+const initApi = ({
+  api,
+  state,
+  fall,
+  props,
+  refs
+}: {
+  api: IFallMenuApi
+  state: IFallMenuState
+  fall: IFallMenuApi['fall']
+  props: IFallMenuProps
+  refs: ISharedRenderlessFunctionParams<null>['refs']
+}) => {
   Object.assign(api, {
     fall,
     state,
@@ -56,15 +85,19 @@ const initApi = ({ api, state, fall, props, refs }) => {
   })
 }
 
-export const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, ref }, { refs }) => {
-  const api = {}
+export const renderless = (
+  props: IFallMenuProps,
+  { computed, reactive, onMounted, onBeforeUnmount, ref }: ISharedRenderlessFunctionParams,
+  { refs }: ISharedRenderlessParamUtils
+) => {
+  const api: Partial<IFallMenuApi> = {}
   const fall = ref(null)
-  const state = initState({ reactive, computed, api, props })
+  const state = initState({ reactive, computed, api: api as IFallMenuApi, props })
 
-  initApi({ api, state, fall, props, refs })
+  initApi({ api: api as IFallMenuApi, state, fall, props, refs })
 
-  onMounted(api.mounted)
-  onBeforeUnmount(api.beforeDestroy)
+  onMounted((api as IFallMenuApi).mounted)
+  onBeforeUnmount((api as IFallMenuApi).beforeDestroy)
 
   return api
 }

packages/renderless/types/fall-menu.type.ts

@@ -0,0 +1,46 @@
+import type { ExtractPropTypes, Ref } from 'vue'
+import type { fallMenuProps } from '@/fall-menu/src'
+import type {
+  mouseover,
+  mouseout,
+  computePx,
+  reRender,
+  arrowClick,
+  overContent,
+  mounted,
+  beforeDestroy,
+  computeLeft,
+  computeData
+} from '../src/fall-menu'
+
+export interface IPagerData {
+  data: IFallMenuProps['data']
+  offset: string[]
+  index: number[]
+  size?: number
+}
+
+export interface IFallMenuState {
+  pager: number
+  level2data: IFallMenuProps['data']
+  activeNode: null
+  isActive: boolean
+  pagerData: IPagerData
+  left: any
+  data: IFallMenuProps['data']
+}
+export type IFallMenuProps = ExtractPropTypes<typeof fallMenuProps> & { value: boolean }
+export interface IFallMenuApi {
+  fall: Ref<null>
+  state: IFallMenuState
+  computePx: ReturnType<typeof computePx>
+  mounted: ReturnType<typeof mounted>
+  computeLeft: ReturnType<typeof computeLeft>
+  beforeDestroy: ReturnType<typeof beforeDestroy>
+  computeData: ReturnType<typeof computeData>
+  arrowClick: ReturnType<typeof arrowClick>
+  overContent: ReturnType<typeof overContent>
+  mouseout: ReturnType<typeof mouseout>
+  mouseover: ReturnType<typeof mouseover>
+  reRender: ReturnType<typeof reRender>
+}

packages/renderless/types/shared.type.ts

@@ -114,7 +114,7 @@ export interface ISharedRenderlessParamUtils<CT = never> {
 }
 
 /** vue.ts的一个混合上下文，也是index.ts 文件中二层函数的入参混合体。 */
-export type ISharedRenderlessFunctionParams<CT> = {
+export type ISharedRenderlessFunctionParams<CT = null> = {
   api: object
   props: object
   state: object

packages/vue/src/fall-menu/src/index.ts

@@ -12,12 +12,19 @@
 import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc'
 
+interface IData {
+  children: IData[]
+  url: string
+}
+
+export const fallMenuProps = {
+  ...$props,
+  data: { type: Array<IData>, default: () => [] }
+}
+
 export default defineComponent({
   name: $prefix + 'FallMenu',
-  props: {
-    ...$props,
-    data: { type: Array, default: () => [] }
-  },
+  props: fallMenuProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }