@conecli/cone-render 0.8.15-isinview.4 → 0.8.15-taroUpdate.0

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/InViewRender/index.tsx +1 -1
  2. package/dist/open/components/index.ts +1 -1
  3. package/package.json +13 -13
  4. package/dist/components/base/InOrOutViewObserver/index.module.scss +0 -0
  5. package/dist/components/base/InOrOutViewObserver/index.tsx +0 -1
package/dist/components/base/InViewRender/index.tsx CHANGED
@@ -1 +1 @@
1
- import Taro from '@tarojs/taro'
2
1
  TaroEventType,
3
2
  const {
4
3
  children,
5
4
  placeholder,
6
5
  height,
7
6
  inViewCallback
8
7
  } = props
9
8
  const [componentShowState, setComponentShowState] = useState(false)
10
9
  const [componentRenderShowState, setComponentRenderShowState] =
11
10
  useState(false)
12
11
  const componentLazyRef = useRef<HTMLElement | null>(null)
13
12
  const componentShowStateRef = useRef(false)
14
13
  if (isH5AndJdShopView) {
15
14
  useEffect(() => {
16
15
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
17
16
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
18
17
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
19
18
  !componentShowStateRef.current && dealPageScrollInfo(res)
20
19
  })
21
20
  }, [])
22
21
  useEffect(() => {
23
22
  if (componentShowState) {
24
23
  typeof inViewCallback === 'function' && inViewCallback()
25
24
  console.log('InViewRender -- 店铺H5 展示啦!')
26
25
  }
27
26
  }, [componentShowState])
28
27
 
29
28
  const dealPageScrollInfo = (res) => {
30
29
  if (componentLazyRef.current) {
31
30
  const eleClientRect =
32
31
  componentLazyRef.current.getBoundingClientRect()
33
32
  const getContainerHeightOffSetY = res.displayHeight + res.offSetY
34
33
  const eleOffsetTop = Math.ceil(eleClientRect.top)
35
34
  if (!componentShowStateRef.current) {
36
35
  if (getContainerHeightOffSetY > eleOffsetTop) {
37
36
  componentShowStateRef.current = true
38
37
  setComponentShowState(true)
39
38
  Taro.nextTick(() => {
40
39
  setComponentRenderShowState(true)
41
40
  })
42
41
  }
43
42
  }
44
43
  }
45
44
  }
46
45
  return (
47
46
  <View
48
47
  ref={componentLazyRef}
49
48
  className={classNames(
50
49
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
51
50
  'd-app-floor-lazy-load',
52
51
  )}
53
52
  style={{
54
53
  minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
55
54
  }`,
56
55
  backgroundColor: componentRenderShowState
57
56
  ? 'transparent'
58
57
  : '#ffffff',
59
58
  }}
60
59
  >
61
60
  {componentShowState ? children : placeholder}
62
61
  </View>
63
62
  )
64
63
  } else {
65
64
  const rootDom = document.querySelector('#J_shopHomeRoot')
66
65
  const { ref, inView } = useInView({
67
66
  threshold: 0,
68
67
  triggerOnce: true,
69
68
  root: rootDom || null,
70
69
  rootMargin: `0px 0px 0px 0px`,
71
70
  })
72
71
  useEffect(() => {
73
72
  if (inView) {
74
73
  typeof inViewCallback === 'function' && inViewCallback()
75
74
  console.log('InViewRender -- 其它H5 展示啦!')
76
75
  }
77
76
  }, [inView])
78
77
  return (
79
78
  <View
80
79
  ref={ref}
81
80
  style={{
82
81
  minHeight: `${inView ? 'auto' : height + 'px'}`,
83
82
  backgroundColor: 'transparent',
84
83
  }}
85
84
  >
86
85
  {inView ? children : placeholder}
87
86
  </View>
88
87
  )
89
88
  }
90
89
  children: null,
91
90
  placeholder: null,
92
91
  height: 1,
93
92
  className: '',
94
93
  lazyNodeClassName: '',
95
94
  inViewCallback: null,
95
+ import Taro from '@tarojs/taro'
96
96
  inViewCallback
97
97
  if (isH5AndJdShopView) {
98
98
  useEffect(() => {
99
99
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
100
100
  !componentShowStateRef.current && dealPageScrollInfo(latestRes)
101
101
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
102
102
  !componentShowStateRef.current && dealPageScrollInfo(res)
103
103
  })
104
104
  }, [])
105
105
  useEffect(() => {
106
106
  if(componentShowState){
107
107
  typeof inViewCallback === 'function' && inViewCallback()
108
108
  console.log('InViewRender -- 店铺H5 展示啦!')
109
109
  }
110
110
  }, [componentShowState])
111
111
 
112
112
  const dealPageScrollInfo = (res) => {
113
113
  if (componentLazyRef.current) {
114
114
  const eleClientRect =
115
115
  componentLazyRef.current.getBoundingClientRect()
116
116
  const getContainerHeightOffSetY = res.displayHeight + res.offSetY
117
117
  const eleOffsetTop = Math.ceil(eleClientRect.top)
118
118
  if (!componentShowStateRef.current) {
119
119
  if (getContainerHeightOffSetY > eleOffsetTop) {
120
120
  componentShowStateRef.current = true
121
121
  setComponentShowState(true)
122
122
  Taro.nextTick(() => {
123
123
  setComponentRenderShowState(true)
124
124
  })
125
125
  }
126
126
  }
127
127
  }
128
128
  }
129
129
  return (
130
130
  <View
131
131
  ref={componentLazyRef}
132
132
  className={classNames(
133
133
  lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
134
134
  'd-app-floor-lazy-load',
135
135
  )}
136
136
  style={{
137
137
  minHeight: `${
138
138
  componentRenderShowState ? 'auto' : height + (typeof height === 'number'? 'px': '')
139
139
  }`,
140
140
  backgroundColor: componentRenderShowState
141
141
  ? 'transparent'
142
142
  : '#ffffff',
143
143
  }}
144
144
  >
145
145
  {componentShowState ? children : placeholder}
146
146
  </View>
147
147
  )
148
148
  } else {
149
149
  const rootDom = document.querySelector('#J_shopHomeRoot')
150
150
  const { ref, inView } = useInView({
151
151
  threshold: 0,
152
152
  triggerOnce: true,
153
153
  root: rootDom,
154
154
  rootMargin: `0px 0px 0px 0px`,
155
155
  })
156
156
  useEffect(() => {
157
157
  if(inView){
158
158
  typeof inViewCallback === 'function' && inViewCallback()
159
159
  console.log('InViewRender -- 其它H5 展示啦!')
160
160
  }
161
161
  }, [inView])
162
162
  return (
163
163
  <View
164
164
  ref={ref}
165
165
  style={{
166
166
  minHeight: `${inView ? 'auto' : height + 'px'}`,
167
167
  backgroundColor: 'transparent',
168
168
  }}
169
169
  >
170
170
  {inView ? children : placeholder}
171
171
  </View>
172
172
  )
173
173
  }
174
174
  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'
2
2
  LazyLayoutLoad,
3
3
  ExposureSmart
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conecli/cone-render",
3
- "version": "0.8.15-isinview.4",
3
+ "version": "0.8.15-taroUpdate.0",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist/"
@@ -60,16 +60,16 @@
60
60
  ],
61
61
  "author": "conecli",
62
62
  "dependencies": {
63
- "@tarojs/cli": "^3.5.4",
64
- "@tarojs/components": "3.5.4",
65
- "@tarojs/plugin-framework-react": "3.5.4",
66
- "@tarojs/react": "3.5.4",
67
- "@tarojs/runtime": "3.5.4",
68
- "@tarojs/shared": "3.5.4",
69
- "@tarojs/taro": "3.5.4",
70
- "@tarojs/taro-h5": "3.5.4",
71
- "@tarojs/taro-loader": "3.5.4",
72
- "@tarojs/webpack5-runner": "3.5.4",
63
+ "@tarojs/cli": "3.6.2",
64
+ "@tarojs/components": "3.6.2",
65
+ "@tarojs/plugin-framework-react": "3.6.2",
66
+ "@tarojs/react": "3.6.2",
67
+ "@tarojs/runtime": "3.6.2",
68
+ "@tarojs/shared": "3.6.2",
69
+ "@tarojs/taro": "3.6.2",
70
+ "@tarojs/plugin-platform-h5": "3.6.2",
71
+ "@tarojs/taro-loader": "3.6.2",
72
+ "@tarojs/webpack5-runner": "3.6.2",
73
73
  "art-template": "^4.13.2",
74
74
  "gulp-filter": "^7.0.0",
75
75
  "normalize.css": "^8.0.1",
@@ -90,11 +90,11 @@
90
90
  "@types/webpack-env": "^1.13.6",
91
91
  "@typescript-eslint/eslint-plugin": "^5.20.0",
92
92
  "@typescript-eslint/parser": "^5.20.0",
93
- "babel-preset-taro": "3.5.4",
93
+ "babel-preset-taro": "3.6.2",
94
94
  "del": "^6.1.1",
95
95
  "escodegen": "^2.0.0",
96
96
  "eslint": "^6.8.0",
97
- "eslint-config-taro": "3.5.4",
97
+ "eslint-config-taro": "3.6.2",
98
98
  "eslint-plugin-import": "^2.12.0",
99
99
  "eslint-plugin-react": "^7.8.2",
100
100
  "eslint-plugin-react-hooks": "^4.2.0",
package/dist/components/base/InOrOutViewObserver/index.tsx DELETED
@@ -1 +0,0 @@
1
- import Taro from '@tarojs/taro'
2
  TaroEventType,
3
1
  const {
4
2
  children,
5
3
  inViewCallback,
6
4
  outViewCallback
7
5
  } = props
8
6
  const [componentShowState, setComponentShowState] = useState(false)
9
7
  const componentObserverRef = useRef<HTMLElement | null>(null)
10
8
  const componentShowStateRef = useRef(false)
11
9
  if (isH5AndJdShopView) {
12
10
  useEffect(() => {
13
11
  const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
14
12
  dealPageScrollInfo(latestRes)
15
13
  Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
16
14
  dealPageScrollInfo(res)
17
15
  })
18
16
  }, [])
19
17
  useEffect(() => {
20
18
  if (componentShowState) {
21
19
  typeof inViewCallback === 'function' && inViewCallback()
22
20
  console.log('app=>in可视区域')
23
21
  } else {
24
22
  typeof outViewCallback === 'function' && outViewCallback()
25
23
  console.log('app=>out可视区域')
26
24
  }
27
25
  }, [componentShowState])
28
26
 
29
27
  const handleInOrOutView = (type: boolean) => {
30
28
  componentShowStateRef.current = type
31
29
  setComponentShowState(type)
32
30
  }
33
31
 
34
32
  const dealPageScrollInfo = (res) => {
35
33
  const { displayHeight, offSetY } = res
36
34
  if (componentObserverRef.current) {
37
35
  const eleClientRect =
38
36
  componentObserverRef.current.getBoundingClientRect()
39
37
  const eleOffsetTop = Math.ceil(eleClientRect.top)
40
38
  const eleHeight = Math.ceil(eleClientRect.height)
41
39
  console.log('==========================eleOffsetTop, eleHeight', eleOffsetTop, eleHeight)
42
40
  if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
43
41
  const isOutView = offSetY > eleOffsetTop + eleHeight
44
42
  handleInOrOutView(isOutView ? false : true)
45
43
  } else {
46
44
  const isInView = (offSetY > eleOffsetTop - displayHeight) && (offSetY < eleOffsetTop + eleHeight)
47
45
  handleInOrOutView(isInView ? true : false)
48
46
  }
49
47
  }
50
48
  }
51
49
  return (
52
50
  <View ref={componentObserverRef}>
53
51
  {children}
54
52
  </View>
55
53
  )
56
54
  } else {
57
55
  const rootDom = document.querySelector('#J_shopHomeRoot')
58
56
  console.log('rootDom', rootDom)
59
57
  const { ref, inView } = useInView({
60
58
  threshold: 0,
61
59
  triggerOnce: false,
62
60
  root: rootDom || null,
63
61
  rootMargin: `0px 0px 0px 0px`,
64
62
  })
65
63
  useEffect(() => {
66
64
  if (inView) {
67
65
  typeof inViewCallback === 'function' && inViewCallback()
68
66
  console.log('其他h5=>in可视区域')
69
67
  } else {
70
68
  typeof outViewCallback === 'function' && outViewCallback()
71
69
  console.log('其他h5=>out可视区域')
72
70
  }
73
71
  }, [inView])
74
72
  return (
75
73
  <View ref={ref}>
76
74
  {children}
77
75
  </View>
78
76
  )
79
77
  }
80
78
  children: null,
81
79
  className: '',
82
80
  inViewCallback: null,
83
81
  outViewCallback: null