@official-account-dev/oa
v0.2.9-beta.0
Published
OA Component, Single card, medium card, Banner Card, List card
Downloads
32
Maintainers
Readme
Official Account component hub
User can view the OA collection, PromoCom. The kind of OA Nearest, Similar, Suggestion
Implementation
package.json
"@officialaccount/components": "latest"
webpack.config.js
include: [
// ...
/node_modules(.*[/\\])+@officialaccount[/\\]components/
]
IMPORT
import { OaHub, TypeDisplay, DisplaySize } from '@officialaccount/components';
enum TypeDisplay
{
DEFAULT: 'SUGGESTION',
SUGGESTION: 'SUGGESTION',
NEARBY: 'NEARBY',
NEARBY_OA: 'NEARBY_OA',
SIMILAR_TO_OA: 'SIMILAR_TO_OA',
REVIEW: 'REVIEW',
}
enum DisplaySize
{
DEFAULT: 'SLIDER_SMALL',
SINGLE_MEDIUM: 'SINGLE_MEDIUM',
SINGLE_LARGE: 'SINGLE_LARGE',
SLIDER_SMALL: 'SLIDER_SMALL',
LIST_MEDIUM: 'LIST_MEDIUM',
}
1 - Using size SLIDER_SMALL
TYPE = TypeDisplay.SIMILAR_TO_OA
SIZE = DisplaySize.SLIDER_SMALL
return (
<SafeAreaView>
<OaHub params={{
oa_id: oa_id,
store_id: store_id,
limit: 5
}} header={{
title: 'QUÁN TƯƠNG TỰ',
rightButton: {
buttonTitle: 'Xem thêm',
refId: 'oa_local_discovery'
},
isShowHeader: true, //default is true
}}
type={ TypeDisplay.SIMILAR_TO_OA }
size= { DisplaySize.SLIDER_SMALL }/>
</SafeAreaView>
)
2 - Using size LIST_MEDIUM
TYPE = TypeDisplay.NEARBY
SIZE = DisplaySize.LIST_MEDIUM
LOCATION is optional
return (
<SafeAreaView>
<OaHub
type={ TypeDisplay.NEARBY }
size={ DisplaySize.LIST_MEDIUM }
params={{
merchant_id: merchant_id,
store_id: store_id,
limit: 3,
latitude: 10.7741709,
longitude: 106.7014805,
}}
header={{
title: 'Cửa hàng gần bạn',
isShowHeader: false, //default is true,
styleHeaderTitle: { fontWeight: 'bold', fontSize: 16, color: 'rgba(86, 86, 86)' }
}}
styleSection={{
marginHorizontal: 0,
paddingHorizontal: 0
}}
/>
</SafeAreaView>
)
3 - Using size SINGLE_MEDIUM
TYPE = TypeDisplay.DEFAULT
SIZE = DisplaySize.SINGLE_MEDIUM
LOCATION is optional
return (
<SafeAreaView>
<OaHub
type={ TypeDisplay.NEARBY }
size={ DisplaySize.SINGLE_MEDIUM }
params={{
oa_id: oa_id,
merchant_id: merchant_id,
store_id: store_id,
limit: 1,
latitude: 10.7741709,
longitude: 106.7014805,
}}
header={{
title: '',
isShowHeader: true, //default is true,
}}
styleSection={{
marginHorizontal: 0,
paddingHorizontal: 0
}}
/>
</SafeAreaView>
)
Container DEFAULT TYPE: NEARY_OA