feat(core): nativescript.config and webpack updates (#8801)

This commit is contained in:
Nathan Walker
2020-09-01 15:53:37 -07:00
committed by GitHub
parent 757a2ffdf7
commit 54cce4f20c
1093 changed files with 332 additions and 316 deletions

View File

@@ -0,0 +1,20 @@
<Page>
<TabView selectedIndex="1" style="tab-text-color: yellow; color:yellow; selected-tab-text-color: red; android-selected-tab-highlight-color:red; background-color: green; tab-background-color: blue;">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,20 @@
<Page>
<TabView style="background-color: green;">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,20 @@
<Page>
<TabView style="color: green;">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,27 @@
<Page>
<TabView style="color: green;">
<TabView.items>
<TabViewItem title="Title" automationText="tab1" iconSource="res://add_to_fav">
<TabViewItem.view>
<GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="res://add_to_fav" automationText="tab2" >
<TabViewItem.view>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Title" automationText="tab3">
<TabViewItem.view>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,29 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="TabView content sizing" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<TabView id="tabViewContainer">
<TabView.items>
<TabViewItem title="Tab1" >
<TabViewItem.view>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab2" >
<TabViewItem.view>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,33 @@
import { EventData } from '@nativescript/core/data/observable';
import { SubMainPageViewModel } from '../sub-main-page-view-model';
import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
import { Page } from '@nativescript/core/ui/page';
export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
export function loadExamples() {
const examples = new Map<string, string>();
examples.set('tabColor', 'tab-view/color-page');
examples.set('tabBG', 'tab-view/background-page');
examples.set('tabTabsBG', 'tab-view/tabsBackground-page');
examples.set('tabSelected', 'tab-view/selected-page');
examples.set('tabStyle', 'tab-view/all-page');
examples.set('tabmore', 'tab-view/tab-view-more-page');
examples.set('tabViewCss', 'tab-view/tab-view-css-page');
examples.set('tab-view-icons', 'tab-view/tab-view-icon-page');
examples.set('tab-view-icons-local', 'tab-view/tab-view-icon-local-page');
examples.set('tab-view-icon-change', 'tab-view/tab-view-icon-change-page');
examples.set('text-transform', 'tab-view/text-transform-page');
examples.set('tab-view-bottom-position', 'tab-view/tab-view-bottom-position-page');
examples.set('issue-5470', 'tab-view/issue-5470-page');
examples.set('tab-view-tab-text-font-size', 'tab-view/tab-view-tab-text-font-size-page');
examples.set('tab-view-android-swipe', 'tab-view/tab-view-android-swipe-page');
examples.set('tab-view-icon-title-placement', 'tab-view/icon-title-placement-page');
examples.set('tab-text-color', 'tab-view/tab-text-color-page');
return examples;
}

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<ScrollView orientation="vertical" row="1">
<WrapLayout id="wrapLayoutWithExamples"/>
</ScrollView>
</Page>

View File

@@ -0,0 +1,12 @@
<Page>
<StackLayout>
<SegmentedBar>
<SegmentedBar.items>
<SegmentedBarItem title="Incomplete" />
<SegmentedBarItem title="Complete" />
<SegmentedBarItem title="Something Else" />
<SegmentedBarItem title="All" />
</SegmentedBar.items>
</SegmentedBar>
</StackLayout>
</Page>

View File

@@ -0,0 +1,20 @@
<Page>
<TabView selectedTabTextColor="green">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,24 @@
<Page>
<TabView tabTextColor="red">
<TabView.items>
<TabViewItem title="Tab 1">
<TabViewItem.view>
<Label text="Label 1" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2">
<TabViewItem.view>
<Label text="Label 2" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 3">
<TabViewItem.view>
<Label text="Label 3" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,24 @@
<Page loaded="onLoaded">
<TabView androidSwipeEnabled="false">
<TabView.items>
<TabViewItem title="Tab 1">
<TabViewItem.view>
<Label text="Label 1" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2">
<TabViewItem.view>
<Label text="Label 2" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 3">
<TabViewItem.view>
<Label text="Label 3" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,20 @@
<Page>
<TabView androidTabsPosition="bottom">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,2 @@
/* Currently need an empty css file to make this module a style scope host.
This tests sets css on the module and without this empty file the css is set on the frame on top of it */

View File

@@ -0,0 +1,19 @@
import * as view from '@nativescript/core/ui/core/view';
import * as pages from '@nativescript/core/ui/page';
export function loaded(args) {
var page = <pages.Page>(<view.View>args.object).page;
const view = page.getViewById('test-element');
(<any>view).textTransform = 'capitalize';
}
export function applyTap(args) {
var page = <pages.Page>(<view.View>args.object).page;
var css = '#test-element { ' + args.object.tag + ' }';
page.css = css;
}
export function resetTap(args) {
var page = <pages.Page>(<view.View>args.object).page;
page.css = '';
}

View File

@@ -0,0 +1,36 @@
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
loaded="loaded">
<TabView id="test-element">
<TabView.items>
<TabViewItem title="IteM onE">
<TabViewItem.view>
<ScrollView>
<StackLayout>
<Button text="tab-text-color: green;" tap="applyTap" tag="tab-text-color: green;" style.fontSize="8"/>
<Button text="tab-background-color: yellow;" tap="applyTap" tag="tab-background-color: yellow;" style.fontSize="8"/>
<Button text="selected-tab-text-color: red;" tap="applyTap" tag="selected-tab-text-color: red;" style.fontSize="8"/>
<Button text="android-selected-tab-highlight-color: orange;" tap="applyTap" tag="android-selected-tab-highlight-color: orange;" style.fontSize="8"/>
<Button text="text-transform: uppercase;" tap="applyTap" tag="text-transform: uppercase;" style.fontSize="8"/>
<Button text="text-transform: lowercase;" tap="applyTap" tag="text-transform: lowercase;" style.fontSize="8"/>
<Button text="text-transform: capitalize;" tap="applyTap" tag="text-transform: capitalize;" style.fontSize="8"/>
<Button text="text-transform: none;" tap="applyTap" tag="text-transform: none;" style.fontSize="8"/>
<Button text="all" tap="applyTap" tag="tab-text-color: green; tab-background-color: yellow; selected-tab-text-color: red; android-selected-tab-highlight-color: orange; text-transform: uppercase;" style.fontSize="8"/>
<Button text="reset" tap="resetTap" style.fontSize="8"/>
</StackLayout>
</ScrollView>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="IteM twO">
<TabViewItem.view>
<Label text="Item 2"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="IteM threE">
<TabViewItem.view>
<Label text="Item 3"/>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,15 @@
import { TabView, SelectedIndexChangedEventData } from '@nativescript/core/ui/tab-view';
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const tabView = args.object as TabView;
const newItem = tabView.items[args.newIndex];
if (newItem) {
newItem.iconSource = 'res://icon';
}
const oldItem = tabView.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = 'res://testlogo';
}
}

View File

@@ -0,0 +1,16 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<TabView id="tab-view" selectedIndexChanged="onSelectedIndexChanged" iosIconRenderingMode="alwaysOriginal">
<TabView.items>
<TabViewItem iconSource="res://icon">
<TabViewItem.view>
<Label text="first tab"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="res://testlogo">
<TabViewItem.view>
<Label text="second tab"/>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,21 @@
import { EventData } from '@nativescript/core/data/observable';
import { Button } from '@nativescript/core/ui/button';
import { TabView } from '@nativescript/core/ui/tab-view';
let iconModes = ['automatic', 'alwaysOriginal', 'alwaysTemplate', undefined];
export const onNavigate = updateButtons;
export function onChangeRenderingMode(args: EventData) {
let tabView = (<Button>args.object).page.getViewById<TabView>('tab-view');
tabView.iosIconRenderingMode = <'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>iconModes[(iconModes.indexOf(tabView.iosIconRenderingMode) + 1) % iconModes.length];
updateButtons(args);
}
function updateButtons(args) {
let button = <Button>args.object;
let tabView = button.page.getViewById<TabView>('tab-view');
for (let i = 0, length = tabView.items.length; i < length; i++) {
(<Button>tabView.items[i].view).text = '' + tabView.iosIconRenderingMode;
}
}

View File

@@ -0,0 +1,26 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigate">
<TabView id="tab-view" tabTextColor="green" selectedTabTextColor="red" tabBackgroundColor="yellow">
<TabView.items>
<TabViewItem iconSource="~/resources/images/icon.png">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="~/resources/images/add_to_fav@3x.png">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="~/resources/images/icon.png" title="NativeScript">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="~/resources/images/add_to_fav@3x.png" title="Favorites">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,21 @@
import { EventData } from '@nativescript/core/data/observable';
import { Button } from '@nativescript/core/ui/button';
import { TabView } from '@nativescript/core/ui/tab-view';
let iconModes = ['automatic', 'alwaysOriginal', 'alwaysTemplate', undefined];
export const onNavigate = updateButtons;
export function onChangeRenderingMode(args: EventData) {
let tabView = (<Button>args.object).page.getViewById<TabView>('tab-view');
tabView.iosIconRenderingMode = <'automatic' | 'alwaysOriginal' | 'alwaysTemplate'>iconModes[(iconModes.indexOf(tabView.iosIconRenderingMode) + 1) % iconModes.length];
updateButtons(args);
}
function updateButtons(args) {
let button = <Button>args.object;
let tabView = button.page.getViewById<TabView>('tab-view');
for (let i = 0, length = tabView.items.length; i < length; i++) {
(<Button>tabView.items[i].view).text = '' + tabView.iosIconRenderingMode;
}
}

View File

@@ -0,0 +1,26 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigate">
<TabView id="tab-view" tabTextColor="green" selectedTabTextColor="red" tabBackgroundColor="yellow">
<TabView.items>
<TabViewItem iconSource="res://icon">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="res://add_to_fav">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="res://icon" title="NativeScript">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="res://add_to_fav" title="Favorites">
<TabViewItem.view>
<Button text="undefined" tap="onChangeRenderingMode"/>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,3 @@
TabView {
font-size: 10;
}

View File

@@ -0,0 +1,42 @@
<Page>
<TabView>
<TabView.items>
<TabViewItem title="Tab 1">
<TabViewItem.view>
<Label text="Label 1" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2">
<TabViewItem.view>
<Label text="Label 2" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 3">
<TabViewItem.view>
<Label text="Label 3" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 4">
<TabViewItem.view>
<Label text="Label 4" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 5">
<TabViewItem.view>
<Label text="Label 5" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 6">
<TabViewItem.view>
<Label text="Label 6" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,20 @@
<Page>
<TabView tabTextFontSize="8">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1,20 @@
<Page>
<TabView tabBackgroundColor="blue">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

View File

@@ -0,0 +1 @@
/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

View File

@@ -0,0 +1,18 @@
import { Page } from '@nativescript/core/ui/page';
const CSS = `
#tab1 { text-transform: none; }
#tab2 { text-transform: lowercase; }
#tab3 { text-transform: uppercase; }
#tab4 { text-transform: capitalize; }
`;
export function applyTap(args) {
var page = <Page>args.object.page;
page.css = CSS;
}
export function resetTap(args) {
var page = <Page>args.object.page;
page.css = '';
}

View File

@@ -0,0 +1,29 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigate">
<TabView>
<TabView.items>
<TabViewItem title="tAb ViEw" id="tab1">
<TabViewItem.view>
<StackLayout>
<Button text="apply" tap="applyTap"/>
<Button text="reset" tap="resetTap"/>
</StackLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="tAb ViEw" id="tab2">
<TabViewItem.view>
<Label text="empty tab" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="tAb ViEw" id="tab3">
<TabViewItem.view>
<Label text="empty tab" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="tAb ViEw" id="tab4">
<TabViewItem.view>
<Label text="empty tab" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>