@conecli/cone-render 0.8.15-isinview.2 → 0.8.15-isinview.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/base/InOrOutViewObserver/index.module.scss +0 -0
  2. package/dist/components/base/InOrOutViewObserver/index.tsx +1 -0
  3. package/dist/components/base/InViewRender/index.tsx +1 -1
  4. package/dist/open/components/index.ts +1 -1
  5. package/package.json +1 -1
package/dist/components/base/InOrOutViewObserver/index.tsx ADDED
@@ -0,0 +1 @@
1
+ import Taro from '@tarojs/taro'
2
  TaroEventType,
1
3
  const {
2
4
  children,
3
5
  inViewCallback,
4
6
  outViewCallback
5
7
  } = props
6
8
  const [componentShowState, setComponentShowState] = useState(false)
7
9
  const componentObserverRef = useRef<HTMLElement | null>(null)
8
10
  const componentShowStateRef = useRef(false)
9
11
  if (isH5AndJdShopView) {
10
12
  useEffect(() => {
11
13
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
12
14
  dealPageScrollInfo(latestRes)
13
15
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
14
16
  dealPageScrollInfo(res)
15
17
  })
16
18
  }, [])
17
19
  useEffect(() => {
18
20
  if (componentShowState) {
19
21
  typeof inViewCallback === 'function' && inViewCallback()
20
22
  console.log('app=>in可视区域')
21
23
  } else {
22
24
  typeof outViewCallback === 'function' && outViewCallback()
23
25
  console.log('app=>out可视区域')
24
26
  }
25
27
  }, [componentShowState])
26
28
 
27
29
  const handleInOrOutView = (type: boolean) => {
28
30
  componentShowStateRef.current = type
29
31
  setComponentShowState(type)
30
32
  }
31
33
 
32
34
  const dealPageScrollInfo = (res) => {
33
35
  const { displayHeight, offSetY } = res
34
36
  if (componentObserverRef.current) {
35
37
  const eleClientRect =
36
38
  componentObserverRef.current.getBoundingClientRect()
37
39
  const eleOffsetTop = Math.ceil(eleClientRect.top)
38
40
  const eleHeight = Math.ceil(eleClientRect.height)
39
41
  console.log('==========================eleOffsetTop, eleHeight', eleOffsetTop, eleHeight)
40
42
  if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
41
43
  const isOutView = offSetY > eleOffsetTop + eleHeight
42
44
  handleInOrOutView(isOutView ? false : true)
43
45
  } else {
44
46
  const isInView = (offSetY > eleOffsetTop - displayHeight) && (offSetY < eleOffsetTop + eleHeight)
45
47
  handleInOrOutView(isInView ? true : false)
46
48
  }
47
49
  }
48
50
  }
49
51
  return (
50
52
  <View ref={componentObserverRef}>
51
53
  {children}
52
54
  </View>
53
55
  )
54
56
  } else {
55
57
  const rootDom = document.querySelector('#J_shopHomeRoot')
56
58
  console.log('rootDom', rootDom)
57
59
  const { ref, inView } = useInView({
58
60
  threshold: 0,
59
61
  triggerOnce: false,
60
62
  root: rootDom || null,
61
63
  rootMargin: `0px 0px 0px 0px`,
62
64
  })
63
65
  useEffect(() => {
64
66
  if (inView) {
65
67
  typeof inViewCallback === 'function' && inViewCallback()
66
68
  console.log('其他h5=>in可视区域')
67
69
  } else {
68
70
  typeof outViewCallback === 'function' && outViewCallback()
69
71
  console.log('其他h5=>out可视区域')
70
72
  }
71
73
  }, [inView])
72
74
  return (
73
75
  <View ref={ref}>
74
76
  {children}
75
77
  </View>
76
78
  )
77
79
  }
78
80
  children: null,
79
81
  className: '',
80
82
  inViewCallback: null,
81
83
  outViewCallback: null
package/dist/components/base/InViewRender/index.tsx CHANGED
@@ -1 +1 @@
1
- import Taro from '@tarojs/taro'
2
1
  inViewCallback
3
2
  if (isH5AndJdShopView) {
4
3
  useEffect(() => {
5
4
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
6
5
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
7
6
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
8
7
  !componentShowStateRef.current && dealPageScrollInfo(res)
9
8
  })
10
9
  }, [])
11
10
  useEffect(() => {
12
11
  if(componentShowState){
13
12
  typeof inViewCallback === 'function' && inViewCallback()
14
13
  console.log('InViewRender -- 店铺H5 展示啦!')
15
14
  }
16
15
  }, [componentShowState])
17
16
 
18
17
  const dealPageScrollInfo = (res) => {
19
18
  console.log(
20
19
  '收到滚动信息和模块元素以及容器显示状态',
21
20
  res,
22
21
  typeof componentLazyRef.current,
23
22
  componentShowStateRef.current,
24
23
  )
25
24
  if (componentLazyRef.current) {
26
25
  const eleClientRect =
27
26
  componentLazyRef.current.getBoundingClientRect()
28
27
  const getContainerHeightOffSetY = res.displayHeight + res.offSetY
29
28
  const eleOffsetTop = Math.ceil(eleClientRect.top)
30
29
  if (!componentShowStateRef.current) {
31
30
  if (getContainerHeightOffSetY > eleOffsetTop) {
32
31
  componentShowStateRef.current = true
33
32
  setComponentShowState(true)
34
33
  Taro.nextTick(() => {
35
34
  setComponentRenderShowState(true)
36
35
  })
37
36
  }
38
37
  }
39
38
  }
40
39
  }
41
40
  return (
42
41
  <View
43
42
  ref={componentLazyRef}
44
43
  className={classNames(
45
44
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
46
45
  'd-app-floor-lazy-load',
47
46
  )}
48
47
  style={{
49
48
  minHeight: `${
50
49
  componentRenderShowState ? 'auto' : height + (typeof height === 'number'? 'px': '')
51
50
  }`,
52
51
  backgroundColor: componentRenderShowState
53
52
  ? 'transparent'
54
53
  : '#ffffff',
55
54
  }}
56
55
  >
57
56
  {componentShowState ? children : placeholder}
58
57
  </View>
59
58
  )
60
59
  } else {
61
60
  const rootDom = document.querySelector('#J_shopHomeRoot')
62
61
  console.log('rootDom', rootDom)
63
62
  const { ref, inView } = useInView({
64
63
  threshold: 0,
65
64
  triggerOnce: true,
66
65
  root: rootDom || null,
67
66
  rootMargin: `0px 0px 0px 0px`,
68
67
  })
69
68
  console.log('ref', ref)
70
69
  console.log('inView', inView)
71
70
  useEffect(() => {
72
71
  if(inView){
73
72
  typeof inViewCallback === 'function' && inViewCallback()
74
73
  console.log('InViewRender -- 其它H5 展示啦!')
75
74
  }
76
75
  }, [inView])
77
76
  return (
78
77
  <View
79
78
  ref={ref}
80
79
  style={{
81
80
  minHeight: `${inView ? 'auto' : height + 'px'}`,
82
81
  backgroundColor: 'transparent',
83
82
  }}
84
83
  >
85
84
  {inView ? children : placeholder}
86
85
  </View>
87
86
  )
88
87
  }
89
88
  inViewCallback: null,
89
+ import Taro from '@tarojs/taro'
90
90
  TaroEventType,
91
91
  const {
92
92
  children,
93
93
  placeholder,
94
94
  height,
95
95
  inViewCallback
96
96
  } = props
97
97
  const [componentShowState, setComponentShowState] = useState(false)
98
98
  const [componentRenderShowState, setComponentRenderShowState] =
99
99
  useState(false)
100
100
  const componentLazyRef = useRef<HTMLElement | null>(null)
101
101
  const componentShowStateRef = useRef(false)
102
102
  if (isH5AndJdShopView) {
103
103
  useEffect(() => {
104
104
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
105
105
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
106
106
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
107
107
  !componentShowStateRef.current && dealPageScrollInfo(res)
108
108
  })
109
109
  }, [])
110
110
  useEffect(() => {
111
111
  if (componentShowState) {
112
112
  typeof inViewCallback === 'function' && inViewCallback()
113
113
  console.log('InViewRender -- 店铺H5 展示啦!')
114
114
  }
115
115
  }, [componentShowState])
116
116
 
117
117
  const dealPageScrollInfo = (res) => {
118
118
  if (componentLazyRef.current) {
119
119
  const eleClientRect =
120
120
  componentLazyRef.current.getBoundingClientRect()
121
121
  const getContainerHeightOffSetY = res.displayHeight + res.offSetY
122
122
  const eleOffsetTop = Math.ceil(eleClientRect.top)
123
123
  if (!componentShowStateRef.current) {
124
124
  if (getContainerHeightOffSetY > eleOffsetTop) {
125
125
  componentShowStateRef.current = true
126
126
  setComponentShowState(true)
127
127
  Taro.nextTick(() => {
128
128
  setComponentRenderShowState(true)
129
129
  })
130
130
  }
131
131
  }
132
132
  }
133
133
  }
134
134
  return (
135
135
  <View
136
136
  ref={componentLazyRef}
137
137
  className={classNames(
138
138
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
139
139
  'd-app-floor-lazy-load',
140
140
  )}
141
141
  style={{
142
142
  minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
143
143
  }`,
144
144
  backgroundColor: componentRenderShowState
145
145
  ? 'transparent'
146
146
  : '#ffffff',
147
147
  }}
148
148
  >
149
149
  {componentShowState ? children : placeholder}
150
150
  </View>
151
151
  )
152
152
  } else {
153
153
  const rootDom = document.querySelector('#J_shopHomeRoot')
154
154
  const { ref, inView } = useInView({
155
155
  threshold: 0,
156
156
  triggerOnce: true,
157
157
  root: rootDom || null,
158
158
  rootMargin: `0px 0px 0px 0px`,
159
159
  })
160
160
  useEffect(() => {
161
161
  if (inView) {
162
162
  typeof inViewCallback === 'function' && inViewCallback()
163
163
  console.log('InViewRender -- 其它H5 展示啦!')
164
164
  }
165
165
  }, [inView])
166
166
  return (
167
167
  <View
168
168
  ref={ref}
169
169
  style={{
170
170
  minHeight: `${inView ? 'auto' : height + 'px'}`,
171
171
  backgroundColor: 'transparent',
172
172
  }}
173
173
  >
174
174
  {inView ? children : placeholder}
175
175
  </View>
176
176
  )
177
177
  }
178
178
  children: null,
179
179
  placeholder: null,
180
180
  height: 1,
181
181
  className: '',
182
182
  lazyNodeClassName: '',
183
183
  inViewCallback: null,
package/dist/open/components/index.ts CHANGED
@@ -1 +1 @@
1
- import CountDown from '../../components/base/CountDown'
1
+ import CountDown from '../../components/base/CountDown'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conecli/cone-render",
3
- "version": "0.8.15-isinview.2",
3
+ "version": "0.8.15-isinview.4",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist/"