Skip to content

Commit

Permalink
add waterfall, pager, pullfooter and pullheader, modify list,image an…
Browse files Browse the repository at this point in the history 
…d webview (Tencent#6)

* add web & pager, and fix scrollview bug

Signed-off-by: wshixjr <987040118@qq.com>

* add waterfall

* add waterfall bannerview

* add pager call func

* add pullheader and footer

* update pullfooter and header

Signed-off-by: wshixjr <987040118@qq.com>

* add image alt

* update pull footer and header; fix image alt bug

---------

Signed-off-by: wshixjr <987040118@qq.com>
Co-authored-by: wshixjr <987040118@qq.com>
  • Loading branch information
@wshixjr @wshixjrnjr
wshixjr and wshixjrnjr authored Feb 23, 2024
1 parent 0fdb35b commit 904f15c
Show file tree
Hide file tree
Showing 17 changed files with 1,484 additions and 25 deletions.
29 changes: 29 additions & 0 deletions framework/ohos/src/main/ets/renderer_native/HippyRenderView.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,24 @@ import { HRImage, HRImageView } from './components/image/HRImageView';
import { HRListItem, HRListItemView } from './components/list/HRListItemView';
import { HRList, HRListView } from './components/list/HRListView';
import { HRModal, HRModalView } from './components/modal/HRModalView';
import { HRViewPager, HRViewPagerView } from './components/pager/HRViewPager';
import { HRViewPagerItem, HRViewPagerItemView } from './components/pager/HRViewPagerItem';
import { HRWaterfall, HRWaterfallView } from './components/waterfall/HRWaterfall';
import { HRWaterfallItem, HRWaterfallItemView } from './components/waterfall/HRWaterfallItem';
import { HRRefreshWrapper,HRRefreshWrapperView } from './components/refreshwrapper/HRRefreshWrapper';
import { HRRefreshWrapperItem, HRRefreshWrapperItemView } from './components/refreshwrapper/HRRefreshWrapperItem';
import { HRRichText, HRRichTextView } from './components/richtext/HRRichTextView';
import { HRScrollContent, HRScrollContentView } from './components/scroller/HRScrollContentView';
import { HRScroll, HRScrollView } from './components/scroller/HRScrollView';
import { HRDiv, HRDivView } from './components/view/HRDivView';
import { HRWeb, HRWebView } from './components/web/HRWebView'
import { IHippyRenderExceptionListener } from './IHippyRenderExceptionListener';
import { NativeRenderContext } from './NativeRenderContext';
import { HRManager } from './uimanager/HRManager';
import { HRSize } from './utils/HRTypes';
import { LogUtils } from '../support/utils/LogUtils';
import { HRPullHeader, HRPullHeaderView } from './components/pullheader/HRPullHeader';
import { HRPullFooter, HRPullFooterView } from './components/pullfooter/HRPullFooter';

export type HRComponent = HRDivView | HRScroll | HRScrollContent | HRModal | null

Expand Down Expand Up @@ -102,6 +112,7 @@ export class HippyRenderView extends HippyRenderBaseView {

@Component
export struct HippyRender {
private readonly TAG = "HippyRender"
@ObjectLink renderView: HippyRenderView
@ObjectLink children: HippyObservedArray<HippyRenderBaseView>
@BuilderParam buildCustomRenderView: ($$: HippyRenderBaseView) => void | null
Expand Down Expand Up @@ -144,6 +155,24 @@ export struct HippyRender {
HRList({ renderView: $$ as HRListView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRListItemView) {
HRListItem({ renderView: $$ as HRListItemView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRWebView) {
HRWeb({ renderView: $$ as HRWebView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRViewPagerView) {
HRViewPager({ renderView: $$ as HRViewPagerView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRViewPagerItemView) {
HRViewPagerItem({ renderView: $$ as HRViewPagerItemView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRWaterfallItemView) {
HRWaterfallItem({ renderView: $$ as HRWaterfallItemView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRWaterfallView) {
HRWaterfall({ renderView: $$ as HRWaterfallView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRRefreshWrapperView) {
HRRefreshWrapper({ renderView: $$ as HRRefreshWrapperView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRRefreshWrapperItemView) {
HRRefreshWrapperItem({ renderView: $$ as HRRefreshWrapperItemView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRPullHeaderView) {
HRPullHeader({ renderView: $$ as HRPullHeaderView, children: $$.children, buildRenderView: this.buildRenderView })
} else if ($$ instanceof HRPullFooterView) {
HRPullFooter({ renderView: $$ as HRPullFooterView, children: $$.children, buildRenderView: this.buildRenderView })
} else {
if (this.buildCustomRenderView !== null) {
this.buildCustomRenderView($$)
Expand Down
18 changes: 18 additions & 0 deletions framework/ohos/src/main/ets/renderer_native/components/HippyRenderRegisterMap.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,15 @@ import { HRListView } from './list/HRListView'
import { HRModalView } from './modal/HRModalView'
import { HRRichTextView } from './richtext/HRRichTextView'
import { HRScrollView } from './scroller/HRScrollView'
import { HRWebView } from './web/HRWebView'
import { HRViewPagerView } from './pager/HRViewPager'
import { HRViewPagerItemView } from './pager/HRViewPagerItem'
import { HRWaterfallView } from './waterfall/HRWaterfall'
import { HRWaterfallItemView } from './waterfall/HRWaterfallItem'
import { HRRefreshWrapperView } from './refreshwrapper/HRRefreshWrapper'
import { HRRefreshWrapperItemView } from './refreshwrapper/HRRefreshWrapperItem'
import { HRPullHeaderView } from './pullheader/HRPullHeader'
import { HRPullFooterView } from './pullfooter/HRPullFooter'
import { HRDivView } from './view/HRDivView'

export type HRRenderViewCreator = (ctx: NativeRenderContext) => HippyRenderBaseView
Expand All @@ -38,6 +47,15 @@ export function hippyRenderViewCreatorRegisterMap(): Map<string, HRRenderViewCre
registerMap.set("ListView", (ctx): HippyRenderBaseView => new HRListView(ctx))
registerMap.set("ListViewItem", (ctx): HippyRenderBaseView => new HRListItemView(ctx))
registerMap.set("ScrollView", (ctx): HippyRenderBaseView => new HRScrollView(ctx))
registerMap.set("WebView", (ctx): HippyRenderBaseView => new HRWebView(ctx))
registerMap.set("ViewPager", (ctx): HippyRenderBaseView => new HRViewPagerView(ctx))
registerMap.set("ViewPagerItem", (ctx): HippyRenderBaseView => new HRViewPagerItemView(ctx))
registerMap.set("WaterfallView", (ctx): HippyRenderBaseView => new HRWaterfallView(ctx))
registerMap.set("WaterfallItem", (ctx): HippyRenderBaseView => new HRWaterfallItemView(ctx))
registerMap.set("RefreshWrapper", (ctx): HippyRenderBaseView => new HRRefreshWrapperView(ctx))
registerMap.set("RefreshWrapperItemView", (ctx): HippyRenderBaseView => new HRRefreshWrapperItemView(ctx))
registerMap.set("PullHeaderView", (ctx): HippyRenderBaseView => new HRPullHeaderView(ctx))
registerMap.set("PullFooterView", (ctx): HippyRenderBaseView => new HRPullFooterView(ctx))

return registerMap
}
80 changes: 75 additions & 5 deletions framework/ohos/src/main/ets/renderer_native/components/image/HRImageView.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { HRNodeProps } from '../../dom_node/HRNodeProps';
import { NativeRenderContext } from '../../NativeRenderContext';
import { HRConvertUtil } from '../../utils/HRConvertUtil';
import HippyRenderBaseView from '../base/HippyRenderBaseView';
import { LogUtils } from '../../../support/utils/LogUtils';

interface ImageLoadEvent {
width: number
Expand All @@ -37,26 +38,89 @@ interface ImageLoadEvent {

@Observed
export class HRImageView extends HippyRenderBaseView {
private static readonly BASE64_IMAGE_PREFIX = "data:image"
private static readonly BASE64_IMAGE_PREFIX = "data:image";
private static readonly RAWFILE_IMAGE_PREFIX = "hpfile://";
private readonly TAG = "HRImageView"
private static readonly ASSETS_IMAGE_PREFIX = "assets://"

cssSrc: string | null = null
cssResizeMode: ImageFit = ImageFit.Cover
cssBorderColor: number = 0
cssBorderStyle: BorderStyle = BorderStyle.Solid
cssBorderWidth: number = 0
cssAlt: string = ''
onCompleteCallback: ((event?: ImageLoadEvent) => void) | null = null
eventLoadSuccess: HippyRenderCallback | null = null
eventLoadResolution: HippyRenderCallback | null = null

constructor(ctx: NativeRenderContext) {
super(ctx)
LogUtils.d(this.TAG, "constructor -------------------- ")
}

setResizeMode(pvalue: string) {
switch (pvalue) {
case 'contain':
this.cssResizeMode = ImageFit.Contain
break;
case 'cover':
this.cssResizeMode = ImageFit.Cover
break;
case 'center':
// TODO: 没有center，随便找一个
this.cssResizeMode = ImageFit.Auto
break;
default:
LogUtils.d(this.TAG, "unknown resizeMode: " + pvalue);
break;
}
}

setBorderStyle(pvalue: string) {
switch (pvalue) {
case 'solid':
this.cssBorderStyle = BorderStyle.Solid;
break;
default:
LogUtils.d(this.TAG, "unknown BorderStyle: " + pvalue);
break;
}
}

setProp(propKey: string, propValue: HippyAny | HippyRenderCallback): boolean {
LogUtils.d(this.TAG, "setProp: propKey " + propKey + " propValue: " + propValue)
switch (propKey) {
case "src":
this.cssSrc = propValue as string
return true
case "defaultSource":
{
this.cssAlt = propValue as string
let splitList = this.cssAlt.split("/")
this.cssAlt = "vue2/assets/"+splitList[splitList.length - 1]
}
return true
case "resizeMode":
{
let pvalue = propValue as string;
this.setResizeMode(pvalue)
}
break;
case "borderStyle":
{
let pvalue = propValue as string;
this.setBorderStyle(pvalue)
}
break;
case "borderColor":
this.cssBorderColor = propValue as number;
break;
case "borderWidth":
this.cssBorderWidth = propValue as number;
break;
case 'alt':
this.cssAlt = propValue as string;
break;
case "tintColor":
return true
case "tintColorBlendMode":
Expand Down Expand Up @@ -117,10 +181,16 @@ export class HRImageView extends HippyRenderBaseView {
export struct HRImage {
@ObjectLink renderView: HRImageView
build() {
Image(this.renderView.getImage())
.applyRenderViewBaseAttr(this.renderView)
.objectFit(this.renderView.cssResizeMode)
.onComplete(this.renderView.onCompleteCallback)
// Text("image")

Image(this.renderView.getImage())
.applyRenderViewBaseAttr(this.renderView)
.objectFit(this.renderView.cssResizeMode)
.onComplete(this.renderView.onCompleteCallback)
.borderWidth(this.renderView.cssBorderWidth)
.borderColor(this.renderView.cssBorderColor)
.borderStyle(this.renderView.cssBorderStyle)
.alt($rawfile(this.renderView.cssAlt))
}
}

Expand Down
3 changes: 3 additions & 0 deletions framework/ohos/src/main/ets/renderer_native/components/list/HRListItemView.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,12 @@ import { HRComponent } from '../../HippyRenderView'
import { NativeRenderContext } from '../../NativeRenderContext'
import { HRRect } from '../../utils/HRTypes'
import HippyRenderBaseView, { HippyObservedArray } from '../base/HippyRenderBaseView'
import { LogUtils } from '../../../support/utils/LogUtils';

@Observed
export class HRListItemView extends HippyRenderBaseView {
private readonly TAG = "HRListItemView"

constructor(ctx: NativeRenderContext) {
super(ctx)
}
Expand Down
Loading

0 comments on commit 904f15c

Please sign in to comment.