Skip to content

Commit d202dc4

Browse files
rigor789rigor789
committed
test: add more elements to app-with-all-components
1 parent a4e2fa5 commit d202dc4

File tree

3 files changed

+219
-33
lines changed

3 files changed

+219
-33
lines changed

‎platform/nativescript/runtime/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,4 +76,11 @@ Vue.prototype.$start = function() {
7676
run()
7777
}
7878

79+
// Define a `nativeView` getter in every NS vue instance
80+
Object.defineProperty(Vue.prototype, 'nativeView', {
81+
get() {
82+
return this.$el.nativeView
83+
}
84+
})
85+
7986
export default Vue

‎platform/nativescript/runtime/modules/transition.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,7 @@ export function enter(vnode, toggleDisplay) {
7676

7777
const beforeEnterHook = isAppear ? beforeAppear || beforeEnter : beforeEnter
7878
const enterHook = isAppear
79-
? typeof appear === 'function'
80-
? appear
81-
: enter
79+
? typeof appear === 'function' ? appear : enter
8280
: enter
8381
const afterEnterHook = isAppear ? afterAppear || afterEnter : afterEnter
8482
const enterCancelledHook = isAppear

‎samples/app/app-with-all-components.js

Lines changed: 211 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,177 @@
11
const Vue = require('./nativescript-vue')
2+
const frame = require('tns-core-modules/ui/frame')
3+
const platform = require('tns-core-modules/platform')
4+
const utils = require('tns-core-modules/utils/utils')
25

36
Vue.config.debug = true
47
Vue.config.silent = false
58

9+
// for animated GIF search
10+
const url = 'https://api.giphy.com/v1/gifs/search'
11+
const key = 'ZboEpjHv00FzK6SI7l33H7wutWlMldQs'
12+
const filter = 'limit=10&offset=0&rating=G&lang=en'
13+
614
new Vue({
715
data() {
816
return {
17+
activeTab: 0,
18+
switchValue: false,
19+
textfieldValue: 'Some text',
20+
textviewValue: 'TextView\nhas\nmultiple\nlines',
21+
selectedItem: 'first',
22+
listOfItems: ['first', 'second', 'third'],
23+
selectedIndex: 0,
924
timesPressed: 0,
1025
labelCondition: true,
11-
selectedDate: new Date()
26+
selectedDate: new Date(),
27+
selectedTime: new Date(),
28+
q: '',
29+
listViewImgs: [],
30+
progressValue: 50
1231
}
1332
},
1433
template: `
15-
<Frame>
16-
<Page>
17-
<ActionBar title="App with all components" />
18-
19-
<StackLayout class="m-t-20">
20-
<Label
21-
v-if="labelCondition"
22-
text="Label with labelCondition enabled. Tap me to disable"
23-
textWrap
24-
@tap="labelCondition = false"/>
25-
26-
<Label
27-
v-else
28-
text="Label with labelCondition disabled. Tap me to enable"
29-
@tap="labelCondition = true"
30-
textWrap />
31-
32-
<DatePicker
33-
ref="date"
34-
v-model="selectedDate"
35-
@dateChange="onDateChanged" />
36-
37-
<Button
38-
:text="buttonText"
39-
@tap="onButtonPress" />
40-
</StackLayout>
41-
</Page>
42-
</Frame>
43-
`,
34+
<Frame>
35+
<Page>
36+
<ActionBar title="test">
37+
<ActionItem
38+
@tap="dismissKeyboard"
39+
ios.position="right"
40+
android.position="right"
41+
text="Hide Keyboard" />
42+
</ActionBar>
43+
<StackLayout>
44+
<TabView ref="tabview" v-model="activeTab">
45+
<TabViewItem title="Form">
46+
<ScrollView orientation="vertical">
47+
<StackLayout>
48+
<Label
49+
v-if="labelCondition"
50+
ref="label1"
51+
text="Label with labelCondition enabled. Tap me to disable"
52+
textWrap
53+
style="margin-top: 10"
54+
@tap="labelCondition = false"/>
55+
<Label
56+
v-else
57+
ref="label2"
58+
text="Label with labelCondition disabled. Tap me to enable"
59+
@tap="labelCondition = true"
60+
textWrap />
61+
<Switch
62+
ref="switch"
63+
v-model="switchValue"
64+
@checkedChange="onSwitchChanged" />
65+
<TextField
66+
ref="textfield"
67+
v-model="textfieldValue"
68+
hint="Enter text..."
69+
@textChange="onTextFiedChanged" />
70+
<TextView
71+
ref="textview"
72+
v-model="textviewValue"
73+
@textChange="onTextViewChanged"
74+
@blur="dismissKeyboard" />
75+
<DatePicker
76+
ref="date"
77+
v-model="selectedDate"
78+
@dateChange="onDateChanged" />
79+
<TimePicker
80+
ref="time"
81+
v-model="selectedTime"
82+
@timeChange="onTimeChanged" />
83+
<ListPicker
84+
ref="listpicker"
85+
v-model="selectedIndex"
86+
:items="listOfItems"
87+
@selectedIndexChange="onListPickerChanged" />
88+
<Button
89+
ref="button"
90+
:text="buttonText"
91+
style="margin-bottom: 10"
92+
@tap="onButtonPress" />
93+
</StackLayout>
94+
</ScrollView>
95+
</TabViewItem>
96+
<TabViewItem title="List">
97+
<StackLayout>
98+
<SearchBar
99+
ref="search"
100+
v-model="q"
101+
hint="Search a GIF"
102+
@submit="onSearchGif" />
103+
<ListView
104+
for="img in listViewImgs"
105+
height="100%">
106+
<v-template>
107+
<StackLayout>
108+
<Label
109+
:text="'Loading ' + $index + ' result...'" />
110+
<Image
111+
:src="getImgUrl(img)"
112+
stretch="none"
113+
@loaded="onImageLoaded" />
114+
</StackLayout>
115+
</v-template>
116+
</ListView>
117+
</StackLayout>
118+
</TabViewItem>
119+
<TabViewItem title="Other">
120+
<StackLayout>
121+
<SegmentedBar
122+
ref="segmentedbar"
123+
@selectedIndexChange="onSegmentedBarChanged">
124+
<SegmentedBarItem title="First" />
125+
<SegmentedBarItem title="Second" />
126+
<SegmentedBarItem title="Third" />
127+
</SegmentedBar>
128+
<Progress
129+
ref="progress"
130+
v-model="progressValue"
131+
minValue="0"
132+
maxValue="100" />
133+
<Slider
134+
ref="slider"
135+
v-model="progressValue"
136+
@valueChange="onSliderChanged" />
137+
<ActivityIndicator
138+
ref="activityindicator"
139+
:busy="progressValue !== 100"
140+
height="50"
141+
style="margin-top: 10" />
142+
<TextView editable="false">
143+
<FormattedString ref="formattedstring">
144+
<Span ref="span1" text="This is a FormattedString. You can use text attributes such as " />
145+
<Span ref="span2" text="bold, " fontWeight="Bold" />
146+
<Span ref="span3" text="italic " fontStyle="Italic" />
147+
<Span ref="span4" text="and " />
148+
<Span ref="span5" text="underline." textDecoration="Underline" />
149+
</FormattedString>
150+
</TextView>
151+
<ScrollView ref="scrollview" orientation="horizontal">
152+
<StackLayout
153+
orientation="horizontal"
154+
style="font-size: 30; margin: 10">
155+
<Label style="margin-right: 10" text="This is" />
156+
<Label style="margin-right: 10" text="a text" />
157+
<Label style="margin-right: 10" text="which scrolls" />
158+
<Label style="margin-right: 10" text="horizontally" />
159+
<Label style="margin-right: 10" text="if necessary." />
160+
</StackLayout>
161+
</ScrollView>
162+
<HtmlView
163+
ref="htmlview"
164+
html="<p><b>HtmlView</b> renders HTML</p>" />
165+
<WebView
166+
ref="webview"
167+
src="<p><b>WebView</b> with some static HTML</p>" />
168+
</StackLayout>
169+
</TabViewItem>
170+
</TabView>
171+
</StackLayout>
172+
</Page>
173+
</Frame>
174+
`,
44175
computed: {
45176
buttonText() {
46177
return this.timesPressed > 0
@@ -49,15 +180,65 @@ new Vue({
49180
}
50181
},
51182
methods: {
183+
isTabActive(key) {
184+
return this.tabs[this.activeTab].key === key
185+
},
186+
onSwitchChanged() {
187+
console.log(`Switch changed to ${this.switchValue}`)
188+
},
189+
onTextFiedChanged() {
190+
console.log(`TextField changed to "${this.textfieldValue}"`)
191+
},
192+
onTextViewChanged() {
193+
console.log(`TextView changed to "${this.textviewValue}"`)
194+
},
195+
onListPickerChanged() {
196+
console.log(`ListPicker selectedIndex changed to ${this.selectedIndex}`)
197+
},
52198
onDateChanged() {
53199
console.log(`Date changed to ${this.selectedDate}`)
54200
},
201+
onTimeChanged() {
202+
console.log(`Time changed to ${this.selectedTime.toTimeString()}`)
203+
},
55204
onButtonPress() {
56205
console.log('Button pressed')
57206
this.timesPressed++
207+
},
208+
onSearchGif() {
209+
this.dismissKeyboard()
210+
fetch(`${url}?api_key=${key}&q=${this.q}&${filter}`)
211+
.then(response => response.json())
212+
.then(json => {
213+
this.listViewImgs = json.data
214+
})
215+
},
216+
onImageLoaded(event) {
217+
console.log('Image loaded')
218+
},
219+
onSegmentedBarChanged(event) {
220+
console.log(`SegmentedBar index changed to ${event.value}`)
221+
},
222+
onSliderChanged() {
223+
console.log(`Slider value changed to ${this.progressValue}`)
224+
},
225+
getImgUrl(img) {
226+
return `${img.images.fixed_height_still.url}?${Date.now()}`
227+
},
228+
dismissKeyboard() {
229+
if (platform.isAndroid) {
230+
utils.ad.dismissSoftInput()
231+
} else {
232+
frame.topmost().nativeView.endEditing(true)
233+
}
58234
}
59235
},
60236
created() {
61237
console.log(Vue.compile(this.$options.template).render.toString())
238+
},
239+
mounted() {
240+
Object.keys(this.$refs).map(key => {
241+
console.log(`this.$refs.${key} -> ${this.$refs[key]}`)
242+
})
62243
}
63244
}).$start()

0 commit comments

Comments
 (0)