From 733050995c5b28692e11c3bc122430c8634e29d4 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Thu, 25 Feb 2021 21:03:07 -0800 Subject: [PATCH] fix(core): type collisions with namespace (#8809) --- .../qualifier-matcher-tests.ts | 12 +- .../src/navigation/transition-tests.ts | 4 +- apps/automated/src/pages/page7.ts | 4 +- .../ui/action-bar/action-bar-tests.android.ts | 6 +- .../src/ui/action-bar/action-bar-tests.ios.ts | 6 +- .../src/ui/animation/animation-tests.ts | 10 +- .../src/ui/animation/css-animation-tests.ts | 26 +- .../src/ui/button/button-tests-native.ios.ts | 8 +- .../ui/label/label-tests-native.android.ts | 8 +- .../src/ui/label/label-tests-native.ios.ts | 8 +- apps/automated/src/ui/label/label-tests.ts | 14 +- .../src/ui/layouts/dock-layout-tests.ts | 4 +- .../src/ui/layouts/stack-layout-tests.ts | 8 +- .../src/ui/styling/style-properties-tests.ts | 6 +- .../text-field/text-field-tests-native.ios.ts | 8 +- .../text-view/text-view-tests-native.ios.ts | 8 +- .../src/ui/text-view/text-view-tests.ts | 10 +- apps/toolbox/src/app.css | 1 - apps/toolbox/src/box-shadow.xml | 16 +- apps/toolbox/src/main-view-model.ts | 2 +- apps/toolbox/src/root-layout.ts | 4 +- apps/toolbox/src/root-layout.xml | 2 +- apps/ui/src/flexbox/flexbox-main-page.ts | 2 +- apps/ui/src/fonts-tests/all-fonts-page.ts | 10 +- apps/ui/src/image-view/mode-matrix-page.ts | 4 +- apps/ui/src/image-view/stretch-modes-page.ts | 6 +- apps/ui/src/issues/main-page.ts | 2 +- apps/ui/src/layouts-percent/stack-page.ts | 8 +- apps/ui/src/layouts-percent/wrap-page.ts | 8 +- apps/ui/src/layouts/stack-page.ts | 8 +- apps/ui/src/layouts/wrap-page.ts | 8 +- apps/ui/src/perf/memory-leaks/main-page.ts | 5 +- apps/ui/src/test-page-main-view-model.ts | 5 +- packages/core/application/index.ios.ts | 1 + packages/core/color/color-common.ts | 156 +- packages/core/color/index.d.ts | 24 +- .../core/ui/action-bar/action-bar-common.ts | 22 +- .../ui/activity-indicator/index.android.ts | 19 +- .../core/ui/animation/animation-interfaces.ts | 6 +- packages/core/ui/animation/index.d.ts | 6 +- .../core/ui/animation/keyframe-animation.ts | 10 +- .../ui/bottom-navigation/index.android.ts | 14 +- .../core/ui/bottom-navigation/index.ios.ts | 6 +- packages/core/ui/button/index.android.ts | 26 +- packages/core/ui/button/index.ios.ts | 45 +- packages/core/ui/core/view-base/index.d.ts | 18 +- packages/core/ui/core/view-base/index.ts | 6 +- packages/core/ui/core/view/index.android.ts | 61 +- packages/core/ui/core/view/index.d.ts | 59 +- packages/core/ui/core/view/index.ios.ts | 17 +- packages/core/ui/core/view/view-common.ts | 105 +- .../view/view-helper/view-helper-common.ts | 6 +- .../editable-text-base-common.ts | 28 +- .../core/ui/editable-text-base/index.d.ts | 22 +- packages/core/ui/enums/index.d.ts | 1396 +++++++++-------- packages/core/ui/enums/index.ts | 444 +++--- packages/core/ui/image/image-common.ts | 17 +- packages/core/ui/image/index.d.ts | 5 +- packages/core/ui/index.ts | 1 - packages/core/ui/label/index.android.ts | 5 +- packages/core/ui/label/index.ios.ts | 23 +- .../absolute-layout/absolute-layout-common.ts | 18 +- .../ui/layouts/absolute-layout/index.ios.ts | 6 +- .../layouts/dock-layout/dock-layout-common.ts | 13 +- .../core/ui/layouts/dock-layout/index.d.ts | 4 +- .../layouts/flexbox-layout/index.android.ts | 6 +- .../core/ui/layouts/layout-base-common.ts | 22 +- .../core/ui/layouts/layout-base.android.ts | 18 +- .../layouts/root-layout/root-layout-common.ts | 4 +- .../core/ui/layouts/stack-layout/index.d.ts | 7 +- .../core/ui/layouts/stack-layout/index.ios.ts | 18 +- .../stack-layout/stack-layout-common.ts | 9 +- .../ui/layouts/wrap-layout/index.android.ts | 6 +- .../core/ui/layouts/wrap-layout/index.d.ts | 2 - .../layouts/wrap-layout/wrap-layout-common.ts | 21 +- packages/core/ui/list-view/index.android.ts | 4 +- packages/core/ui/list-view/index.ios.ts | 8 +- .../core/ui/list-view/list-view-common.ts | 14 +- packages/core/ui/scroll-view/index.d.ts | 2 - .../core/ui/scroll-view/scroll-view-common.ts | 13 +- packages/core/ui/styling/background-common.ts | 6 +- packages/core/ui/styling/background.ios.ts | 11 +- packages/core/ui/styling/box-shadow.ts | 9 + packages/core/ui/styling/converters.ts | 18 +- packages/core/ui/styling/css-shadow.ts | 47 +- packages/core/ui/styling/font-common.ts | 14 +- packages/core/ui/styling/font.android.ts | 8 +- packages/core/ui/styling/font.ios.ts | 10 +- .../core/ui/styling/style-properties.d.ts | 86 +- packages/core/ui/styling/style-properties.ts | 155 +- packages/core/ui/styling/style/index.ts | 78 +- .../tab-strip-item/index.ts | 7 +- packages/core/ui/tab-view/index.android.ts | 5 +- packages/core/ui/tab-view/index.ios.ts | 5 +- packages/core/ui/tab-view/tab-view-common.ts | 6 +- packages/core/ui/tabs/index.android.ts | 16 +- packages/core/ui/tabs/index.ios.ts | 6 +- .../core/ui/text-base/formatted-string.d.ts | 4 +- .../core/ui/text-base/formatted-string.ts | 6 +- packages/core/ui/text-base/index.android.ts | 45 +- packages/core/ui/text-base/index.d.ts | 24 +- packages/core/ui/text-base/index.ios.ts | 20 +- packages/core/ui/text-base/span.d.ts | 4 +- packages/core/ui/text-base/span.ts | 6 +- .../core/ui/text-base/text-base-common.ts | 59 +- .../core/ui/text-base/text-base-interfaces.ts | 7 - packages/core/ui/text-field/index.android.ts | 7 +- packages/core/ui/text-field/index.ios.ts | 20 +- packages/core/ui/text-view/index.ios.ts | 34 +- workspace.json | 2 +- 110 files changed, 1882 insertions(+), 1827 deletions(-) create mode 100644 packages/core/ui/styling/box-shadow.ts delete mode 100644 packages/core/ui/text-base/text-base-interfaces.ts diff --git a/apps/automated/src/name-resolvers-tests/qualifier-matcher-tests.ts b/apps/automated/src/name-resolvers-tests/qualifier-matcher-tests.ts index 979f2e897..f62fb47a9 100644 --- a/apps/automated/src/name-resolvers-tests/qualifier-matcher-tests.ts +++ b/apps/automated/src/name-resolvers-tests/qualifier-matcher-tests.ts @@ -1,39 +1,39 @@ import * as TKUnit from '../tk-unit'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import { findMatch, PlatformContext } from '@nativescript/core/module-name-resolver/qualifier-matcher'; export const androidPhonePortraitContext: PlatformContext = { width: 360, height: 640, - deviceType: enums.DeviceType.Phone, + deviceType: Enums.DeviceType.Phone, os: 'android', }; export const androidPhoneLandscapeContext: PlatformContext = { width: 640, height: 360, - deviceType: enums.DeviceType.Phone, + deviceType: Enums.DeviceType.Phone, os: 'android', }; export const androidTabletPortraitContext: PlatformContext = { width: 600, height: 960, - deviceType: enums.DeviceType.Tablet, + deviceType: Enums.DeviceType.Tablet, os: 'android', }; export const iPhonePortraitContext: PlatformContext = { width: 320, height: 480, - deviceType: enums.DeviceType.Phone, + deviceType: Enums.DeviceType.Phone, os: 'ios', }; export const iPhoneLandscapeContext: PlatformContext = { width: 480, height: 320, - deviceType: enums.DeviceType.Phone, + deviceType: Enums.DeviceType.Phone, os: 'ios', }; diff --git a/apps/automated/src/navigation/transition-tests.ts b/apps/automated/src/navigation/transition-tests.ts index 4ace09557..20cc55b73 100644 --- a/apps/automated/src/navigation/transition-tests.ts +++ b/apps/automated/src/navigation/transition-tests.ts @@ -4,7 +4,7 @@ import { Trace } from '@nativescript/core'; import { Color } from '@nativescript/core/color'; import { NavigationEntry, NavigationTransition } from '@nativescript/core/ui/frame'; import { Page } from '@nativescript/core/ui/page'; -import { AnimationCurve } from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import { CustomTransition } from './custom-transition'; function _testTransition(navigationTransition: NavigationTransition) { @@ -51,7 +51,7 @@ export function test_Transitions() { // Built-in transitions transitions.forEach((name) => { - _testTransition({ name, duration: 20, curve: AnimationCurve.easeIn }); + _testTransition({ name, duration: 20, curve: Enums.AnimationCurve.easeIn }); }); // helper.navigateWithEntry({ create: mainPageFactory, clearHistory: true, animated: false }); diff --git a/apps/automated/src/pages/page7.ts b/apps/automated/src/pages/page7.ts index 6b6a4c9d5..67610297e 100644 --- a/apps/automated/src/pages/page7.ts +++ b/apps/automated/src/pages/page7.ts @@ -1,6 +1,6 @@ import * as pages from '@nativescript/core/ui/page'; import * as buttons from '@nativescript/core/ui/button'; -import { VerticalAlignment } from '@nativescript/core'; +import { Enums } from '@nativescript/core'; export function createPage() { var page = new pages.Page(); @@ -10,7 +10,7 @@ export function createPage() { btn.height = 60; btn.text = 'test'; - var vAligns: VerticalAlignment[] = ['stretch', 'top', 'middle', 'bottom']; + var vAligns: Enums.VerticalAlignmentType[] = ['stretch', 'top', 'middle', 'bottom']; //var hAligns = ["stretch", "left", "center", "right"]; var count = 0; btn.on(buttons.Button.tapEvent, function () { diff --git a/apps/automated/src/ui/action-bar/action-bar-tests.android.ts b/apps/automated/src/ui/action-bar/action-bar-tests.android.ts index edc069f97..260b78db0 100644 --- a/apps/automated/src/ui/action-bar/action-bar-tests.android.ts +++ b/apps/automated/src/ui/action-bar/action-bar-tests.android.ts @@ -1,7 +1,7 @@ import * as TKUnit from '../../tk-unit'; import { createPageAndNavigate } from './action-bar-tests-common'; import { ActionItem } from '@nativescript/core/ui/action-bar'; -import { Visibility } from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import { Button } from '@nativescript/core/ui/button'; export * from './action-bar-tests-common'; @@ -15,7 +15,7 @@ export function test_actionItem_visibility() { const menu = toolbar.getMenu(); TKUnit.assertTrue(menu.hasVisibleItems(), 'Visibility does not work'); - actionItem.visibility = Visibility.collapse; + actionItem.visibility = Enums.Visibility.collapse; TKUnit.assertFalse(menu.hasVisibleItems(), 'Visibility does not work'); } @@ -28,7 +28,7 @@ export function test_navigationButton_visibility() { const toolbar = page.actionBar.nativeViewProtected; TKUnit.assertNotNull(toolbar.getNavigationIcon(), 'Visibility does not work'); - actionItem.visibility = Visibility.collapse; + actionItem.visibility = Enums.Visibility.collapse; TKUnit.assertNull(toolbar.getNavigationIcon(), 'Visibility does not work'); } diff --git a/apps/automated/src/ui/action-bar/action-bar-tests.ios.ts b/apps/automated/src/ui/action-bar/action-bar-tests.ios.ts index ac2b7bd0f..c7c5d98d8 100644 --- a/apps/automated/src/ui/action-bar/action-bar-tests.ios.ts +++ b/apps/automated/src/ui/action-bar/action-bar-tests.ios.ts @@ -5,7 +5,7 @@ import * as LabelModule from '@nativescript/core/ui/label'; import * as helper from '../../ui-helper'; import * as view from '@nativescript/core/ui/core/view'; import * as actionBar from '@nativescript/core/ui/action-bar'; -import { Visibility } from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; export * from './action-bar-tests-common'; @@ -95,7 +95,7 @@ export function test_actionItem_visibility() { var leftBarButtonItemsCount = navigationItem.leftBarButtonItems ? navigationItem.leftBarButtonItems.count : 0; TKUnit.assertEqual(leftBarButtonItemsCount, 1, 'Visibility does not work'); - actionItem.visibility = Visibility.collapse; + actionItem.visibility = Enums.Visibility.collapse; TKUnit.waitUntilReady(() => { leftBarButtonItemsCount = navigationItem.leftBarButtonItems ? navigationItem.leftBarButtonItems.count : 0; @@ -118,7 +118,7 @@ export function test_navigationButton_visibility() { var navigationItem: UINavigationItem = viewController.navigationItem; TKUnit.assertFalse(navigationItem.hidesBackButton, 'Visibility does not work'); - actionItem.visibility = Visibility.collapse; + actionItem.visibility = Enums.Visibility.collapse; TKUnit.waitUntilReady(() => { return navigationItem.hidesBackButton; diff --git a/apps/automated/src/ui/animation/animation-tests.ts b/apps/automated/src/ui/animation/animation-tests.ts index e9d6d9479..0febdb79d 100644 --- a/apps/automated/src/ui/animation/animation-tests.ts +++ b/apps/automated/src/ui/animation/animation-tests.ts @@ -4,12 +4,12 @@ import * as viewModule from '@nativescript/core/ui/core/view'; import { Label } from '@nativescript/core/ui/label'; import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout'; import * as colorModule from '@nativescript/core/color'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import { AnimationPromise } from '@nativescript/core/ui/animation'; // >> animation-require import * as animation from '@nativescript/core/ui/animation'; -import { PercentLength } from '@nativescript/core/ui/styling/style-properties'; +import { PercentLengthType, PercentLength } from '@nativescript/core'; // << animation-require function prepareTest(parentHeight?: number, parentWidth?: number): Label { @@ -46,7 +46,7 @@ export function test_AnimatingProperties(done) { duration: 5, delay: 10, iterations: 3, - curve: enums.AnimationCurve.easeIn, + curve: Enums.AnimationCurve.easeIn, }) .then(() => { //console.log("Animation finished."); @@ -418,7 +418,7 @@ export function test_AnimateRotate(done) { }); } -function animateExtentAndAssertExpected(along: 'height' | 'width', value: PercentLength, pixelExpected: PercentLength): Promise { +function animateExtentAndAssertExpected(along: 'height' | 'width', value: PercentLengthType, pixelExpected: PercentLengthType): Promise { function pretty(val) { return JSON.stringify(val, null, 2); } @@ -478,7 +478,7 @@ export function test_AnimateExtent_Should_AcceptStringPixelValues(done) { const expected = { unit: 'px', value: pair[1], - } as PercentLength; + } as PercentLengthType; promise = promise.then(() => { return animateExtentAndAssertExpected('height', input, expected); }); diff --git a/apps/automated/src/ui/animation/css-animation-tests.ts b/apps/automated/src/ui/animation/css-animation-tests.ts index cf4ffa851..e6a37386b 100644 --- a/apps/automated/src/ui/animation/css-animation-tests.ts +++ b/apps/automated/src/ui/animation/css-animation-tests.ts @@ -1,7 +1,7 @@ import * as TKUnit from '../../tk-unit'; import * as styleScope from '@nativescript/core/ui/styling/style-scope'; import * as keyframeAnimation from '@nativescript/core/ui/animation/keyframe-animation'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as helper from '../../ui-helper'; import * as stackModule from '@nativescript/core/ui/layouts/stack-layout'; import * as labelModule from '@nativescript/core/ui/label'; @@ -37,7 +37,7 @@ export function test_ReadAnimationProperties() { let animation = createAnimationFromCSS(css, 'test'); TKUnit.assertEqual(animation.name, 'first'); TKUnit.assertEqual(animation.duration, 4000); - TKUnit.assertEqual(animation.curve, enums.AnimationCurve.easeIn); + TKUnit.assertEqual(animation.curve, Enums.AnimationCurve.easeIn); TKUnit.assertEqual(animation.delay, 1500); TKUnit.assertEqual(animation.iterations, 10); TKUnit.assertTrue(animation.isForwards); @@ -48,22 +48,22 @@ export function test_ReadTheAnimationProperty() { let animation = createAnimationFromCSS('.test { animation: second 0.2s ease-out 1 2 }', 'test'); TKUnit.assertEqual(animation.name, 'second'); TKUnit.assertEqual(animation.duration, 200); - TKUnit.assertEqual(animation.curve, enums.AnimationCurve.easeOut); + TKUnit.assertEqual(animation.curve, Enums.AnimationCurve.easeOut); TKUnit.assertEqual(animation.delay, 1000); TKUnit.assertEqual(animation.iterations, 2); } export function test_ReadAnimationCurve() { let animation = createAnimationFromCSS('.test { animation-timing-function: ease-in; }', 'test'); - TKUnit.assertEqual(animation.curve, enums.AnimationCurve.easeIn); + TKUnit.assertEqual(animation.curve, Enums.AnimationCurve.easeIn); animation = createAnimationFromCSS('.test { animation-timing-function: ease-out; }', 'test'); - TKUnit.assertEqual(animation.curve, enums.AnimationCurve.easeOut); + TKUnit.assertEqual(animation.curve, Enums.AnimationCurve.easeOut); animation = createAnimationFromCSS('.test { animation-timing-function: linear; }', 'test'); - TKUnit.assertEqual(animation.curve, enums.AnimationCurve.linear); + TKUnit.assertEqual(animation.curve, Enums.AnimationCurve.linear); animation = createAnimationFromCSS('.test { animation-timing-function: ease-in-out; }', 'test'); - TKUnit.assertEqual(animation.curve, enums.AnimationCurve.easeInOut); + TKUnit.assertEqual(animation.curve, Enums.AnimationCurve.easeInOut); animation = createAnimationFromCSS('.test { animation-timing-function: spring; }', 'test'); - TKUnit.assertEqual(animation.curve, enums.AnimationCurve.spring); + TKUnit.assertEqual(animation.curve, Enums.AnimationCurve.spring); animation = createAnimationFromCSS('.test { animation-timing-function: cubic-bezier(0.1, 1.0, 0.5, 0.5); }', 'test'); let curve = animation.curve; TKUnit.assert(curve.x1 === 0.1 && curve.y1 === 1.0 && curve.x2 === 0.5 && curve.y2 === 0.5); @@ -389,8 +389,8 @@ export function test_ReadTwoAnimations() { scope.ensureSelectors(); let selector = findSelectorInScope(scope, 'test'); TKUnit.assertEqual(scope.getAnimations(selector.ruleset).length, 2); - TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[0].curve, enums.AnimationCurve.easeOut); - TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[1].curve, enums.AnimationCurve.easeIn); + TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[0].curve, Enums.AnimationCurve.easeOut); + TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[1].curve, Enums.AnimationCurve.easeIn); TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[1].name, 'two'); TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[1].duration, 2000); } @@ -401,12 +401,12 @@ export function test_AnimationCurveInKeyframes() { scope.ensureSelectors(); let selector = findSelectorInScope(scope, 'test'); let animation = scope.getAnimations(selector.ruleset)[0]; - TKUnit.assertEqual(animation.keyframes[0].curve, enums.AnimationCurve.linear); + TKUnit.assertEqual(animation.keyframes[0].curve, Enums.AnimationCurve.linear); TKUnit.assertEqual(animation.keyframes[1].curve, undefined); TKUnit.assertEqual(animation.keyframes[1].curve, undefined); let realAnimation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animation); - TKUnit.assertEqual(realAnimation.animations[1].curve, enums.AnimationCurve.linear); - TKUnit.assertEqual(realAnimation.animations[2].curve, enums.AnimationCurve.easeIn); + TKUnit.assertEqual(realAnimation.animations[1].curve, Enums.AnimationCurve.linear); + TKUnit.assertEqual(realAnimation.animations[2].curve, Enums.AnimationCurve.easeIn); } function getTransformsValues(declarations) { diff --git a/apps/automated/src/ui/button/button-tests-native.ios.ts b/apps/automated/src/ui/button/button-tests-native.ios.ts index f0f130f5e..b78695bdb 100644 --- a/apps/automated/src/ui/button/button-tests-native.ios.ts +++ b/apps/automated/src/ui/button/button-tests-native.ios.ts @@ -1,6 +1,6 @@ import * as buttonModule from '@nativescript/core/ui/button'; import * as colorModule from '@nativescript/core/color'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import { getColor } from '../../ui-helper'; export function getNativeText(button: buttonModule.Button): string { @@ -26,11 +26,11 @@ export function getNativeBackgroundColor(button: buttonModule.Button): colorModu export function getNativeTextAlignment(button: buttonModule.Button): string { switch (button.ios.titleLabel.textAlignment) { case NSTextAlignment.Left: - return enums.TextAlignment.left; + return Enums.TextAlignment.left; case NSTextAlignment.Center: - return enums.TextAlignment.center; + return Enums.TextAlignment.center; case NSTextAlignment.Right: - return enums.TextAlignment.right; + return Enums.TextAlignment.right; default: return 'unexpected value'; } diff --git a/apps/automated/src/ui/label/label-tests-native.android.ts b/apps/automated/src/ui/label/label-tests-native.android.ts index 025c189a6..76d1107da 100644 --- a/apps/automated/src/ui/label/label-tests-native.android.ts +++ b/apps/automated/src/ui/label/label-tests-native.android.ts @@ -1,20 +1,20 @@ import * as labelModule from '@nativescript/core/ui/label'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as colorModule from '@nativescript/core/color'; export function getNativeTextAlignment(label: labelModule.Label): string { let gravity = label.android.getGravity(); if ((gravity & android.view.Gravity.HORIZONTAL_GRAVITY_MASK) === android.view.Gravity.LEFT) { - return enums.TextAlignment.left; + return Enums.TextAlignment.left; } if ((gravity & android.view.Gravity.HORIZONTAL_GRAVITY_MASK) === android.view.Gravity.CENTER_HORIZONTAL) { - return enums.TextAlignment.center; + return Enums.TextAlignment.center; } if ((gravity & android.view.Gravity.HORIZONTAL_GRAVITY_MASK) === android.view.Gravity.RIGHT) { - return enums.TextAlignment.right; + return Enums.TextAlignment.right; } return 'unexpected value'; diff --git a/apps/automated/src/ui/label/label-tests-native.ios.ts b/apps/automated/src/ui/label/label-tests-native.ios.ts index 96004cbed..78d37eeda 100644 --- a/apps/automated/src/ui/label/label-tests-native.ios.ts +++ b/apps/automated/src/ui/label/label-tests-native.ios.ts @@ -1,16 +1,16 @@ import * as labelModule from '@nativescript/core/ui/label'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as colorModule from '@nativescript/core/color'; import { getColor } from '../../ui-helper'; export function getNativeTextAlignment(label: labelModule.Label): string { switch (label.ios.textAlignment) { case NSTextAlignment.Left: - return enums.TextAlignment.left; + return Enums.TextAlignment.left; case NSTextAlignment.Center: - return enums.TextAlignment.center; + return Enums.TextAlignment.center; case NSTextAlignment.Right: - return enums.TextAlignment.right; + return Enums.TextAlignment.right; default: return 'unexpected value'; } diff --git a/apps/automated/src/ui/label/label-tests.ts b/apps/automated/src/ui/label/label-tests.ts index 259668ee2..764c15f06 100644 --- a/apps/automated/src/ui/label/label-tests.ts +++ b/apps/automated/src/ui/label/label-tests.ts @@ -10,7 +10,7 @@ import * as colorModule from '@nativescript/core/color'; import * as utils from '@nativescript/core/utils/utils'; import * as observableModule from '@nativescript/core/data/observable'; import * as bindable from '@nativescript/core/ui/core/bindable'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as labelTestsNative from './label-tests-native'; import * as fs from '@nativescript/core/file-system'; @@ -489,7 +489,7 @@ export class LabelTest extends testModule.UITest { const actualResult = view.style.textAlignment; TKUnit.assertEqual(actualResult, this.expectedTextAlignment); - page.addCss('label { text-align: ' + enums.TextAlignment.left + '; }'); + page.addCss('label { text-align: ' + Enums.TextAlignment.left + '; }'); TKUnit.assertEqual(view.style.textAlignment, view.style.textAlignment); } @@ -500,7 +500,7 @@ export class LabelTest extends testModule.UITest { view.id = 'testLabel'; page.addCss('#testLabel { text-align: ' + this.expectedTextAlignment + '; }'); - page.addCss('label { text-align: ' + enums.TextAlignment.left + '; }'); + page.addCss('label { text-align: ' + Enums.TextAlignment.left + '; }'); const actualResult = view.style.textAlignment; // actual result is taken from #testLabel tag, because it has a greater priority (id vs type). @@ -585,8 +585,8 @@ export class LabelTest extends testModule.UITest { this.waitUntilTestElementIsLoaded(); view.setInlineStyle('text-transform: uppercase; text-decoration: underline; letter-spacing: 1;'); - TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, 'TextTransform'); - TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, 'TextDecoration'); + TKUnit.assertEqual(view.style.textTransform, Enums.TextTransform.uppercase, 'TextTransform'); + TKUnit.assertEqual(view.style.textDecoration, Enums.TextDecoration.underline, 'TextDecoration'); TKUnit.assertEqual(view.style.letterSpacing, 1, 'LetterSpacing'); } @@ -597,8 +597,8 @@ export class LabelTest extends testModule.UITest { view.formattedText = formattedString; view.setInlineStyle('text-transform: uppercase; text-decoration: underline; letter-spacing: 1;'); - TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, 'TextTransform'); - TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, 'TextDecoration'); + TKUnit.assertEqual(view.style.textTransform, Enums.TextTransform.uppercase, 'TextTransform'); + TKUnit.assertEqual(view.style.textDecoration, Enums.TextDecoration.underline, 'TextDecoration'); TKUnit.assertEqual(view.style.letterSpacing, 1, 'LetterSpacing'); } diff --git a/apps/automated/src/ui/layouts/dock-layout-tests.ts b/apps/automated/src/ui/layouts/dock-layout-tests.ts index 4ba867211..ccbe5300a 100644 --- a/apps/automated/src/ui/layouts/dock-layout-tests.ts +++ b/apps/automated/src/ui/layouts/dock-layout-tests.ts @@ -11,7 +11,7 @@ import * as dockModule from '@nativescript/core/ui/layouts/dock-layout'; // << dock-layout-require // >> dock-layout-others -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; // << dock-layout-others export class DockLayoutTest extends testModule.UITest { @@ -41,7 +41,7 @@ export class DockLayoutTest extends testModule.UITest { public test_dock_DefaultValue() { var testBtn = new button.Button(); var value = dockModule.DockLayout.getDock(testBtn); - TKUnit.assertEqual(value, enums.Dock.left, 'Default dock value.'); + TKUnit.assertEqual(value, Enums.Dock.left, 'Default dock value.'); } public test_setInvalidDock_Throws() { diff --git a/apps/automated/src/ui/layouts/stack-layout-tests.ts b/apps/automated/src/ui/layouts/stack-layout-tests.ts index 74026939c..4d47cd31c 100644 --- a/apps/automated/src/ui/layouts/stack-layout-tests.ts +++ b/apps/automated/src/ui/layouts/stack-layout-tests.ts @@ -2,7 +2,7 @@ import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout'; import { Button } from '@nativescript/core/ui/button'; import * as TKUnit from '../../tk-unit'; import * as helper from '../../ui-helper'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as utils from '@nativescript/core/utils/utils'; import * as testModule from '../../ui-test'; import * as layoutHelper from './layout-helper'; @@ -30,7 +30,7 @@ export class StackLayoutTest extends testModule.UITest { } public test_orientation_DefaultValue() { - TKUnit.assertEqual(this.rootLayout.orientation, enums.Orientation.vertical, 'Default orientation should be Vertical.'); + TKUnit.assertEqual(this.rootLayout.orientation, Enums.Orientation.vertical, 'Default orientation should be Vertical.'); } public test_SetWrongOrientation_ShouldThrowError() { @@ -42,7 +42,7 @@ export class StackLayoutTest extends testModule.UITest { public test_Orientation_Change() { this.waitUntilTestElementLayoutIsValid(); - TKUnit.assertEqual(this.rootLayout.orientation, enums.Orientation.vertical, 'Default orientation should be Vertical.'); + TKUnit.assertEqual(this.rootLayout.orientation, Enums.Orientation.vertical, 'Default orientation should be Vertical.'); this.rootLayout.orientation = 'horizontal'; this.waitUntilTestElementLayoutIsValid(); @@ -54,7 +54,7 @@ export class StackLayoutTest extends testModule.UITest { public test_ShouldMeasureWith_AtMost_OnVertical() { this.waitUntilTestElementLayoutIsValid(); - TKUnit.assertEqual(this.rootLayout.orientation, enums.Orientation.vertical, 'StackLayout should be vertical.'); + TKUnit.assertEqual(this.rootLayout.orientation, Enums.Orientation.vertical, 'StackLayout should be vertical.'); TKUnit.assertTrue(this.rootLayout.measured, 'Layout should be measured.'); TKUnit.assertTrue(this.rootLayout.arranged, 'Layout should be arranged.'); diff --git a/apps/automated/src/ui/styling/style-properties-tests.ts b/apps/automated/src/ui/styling/style-properties-tests.ts index c6146ae07..a643400f1 100644 --- a/apps/automated/src/ui/styling/style-properties-tests.ts +++ b/apps/automated/src/ui/styling/style-properties-tests.ts @@ -1,6 +1,6 @@ import * as TKUnit from '../../tk-unit'; import * as helper from '../../ui-helper'; -import { isAndroid, isIOS, Button, Label, TextField, TextView, StackLayout, View, Color, Length, PercentLength, LengthPercentUnit, LengthPxUnit } from '@nativescript/core'; +import { isAndroid, isIOS, Button, Label, TextField, TextView, StackLayout, View, Color, Length, PercentLength, LengthPercentUnit, LengthPxUnit, LengthType } from '@nativescript/core'; import * as fontModule from '@nativescript/core/ui/styling/font'; export function test_setting_textDecoration_property_from_CSS_is_applied_to_Style() { @@ -821,7 +821,7 @@ export function test_border_width() { testView.style.borderWidth = 10; TKUnit.assertEqual(testView.style.borderWidth, 10, 'all'); - let expected: Length = { value: 10, unit: 'dip' }; + let expected: LengthType = { value: 10, unit: 'dip' }; TKUnit.assertTrue(Length.equals(testView.style.borderTopWidth, expected)); TKUnit.assertTrue(Length.equals(testView.style.borderRightWidth, expected)); TKUnit.assertTrue(Length.equals(testView.style.borderBottomWidth, expected)); @@ -841,7 +841,7 @@ export function test_border_radius() { let testView = new Button(); testView.style.borderRadius = 10; - let expected: Length = { value: 10, unit: 'dip' }; + let expected: LengthType = { value: 10, unit: 'dip' }; TKUnit.assertTrue(Length.equals(testView.style.borderRadius, expected), 'all'); TKUnit.assertTrue(Length.equals(testView.style.borderTopLeftRadius, expected), 'top'); diff --git a/apps/automated/src/ui/text-field/text-field-tests-native.ios.ts b/apps/automated/src/ui/text-field/text-field-tests-native.ios.ts index be6408c13..526c33f9e 100644 --- a/apps/automated/src/ui/text-field/text-field-tests-native.ios.ts +++ b/apps/automated/src/ui/text-field/text-field-tests-native.ios.ts @@ -1,7 +1,7 @@ import * as textFieldModule from '@nativescript/core/ui/text-field'; import * as colorModule from '@nativescript/core/color'; import { getColor } from '../../ui-helper'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; export function getNativeText(textField: textFieldModule.TextField): string { return textField.ios.text; @@ -34,11 +34,11 @@ export function getNativeBackgroundColor(textField: textFieldModule.TextField): export function getNativeTextAlignment(textField: textFieldModule.TextField): string { switch (textField.ios.textAlignment) { case NSTextAlignment.Left: - return enums.TextAlignment.left; + return Enums.TextAlignment.left; case NSTextAlignment.Center: - return enums.TextAlignment.center; + return Enums.TextAlignment.center; case NSTextAlignment.Right: - return enums.TextAlignment.right; + return Enums.TextAlignment.right; default: return 'unexpected value'; } diff --git a/apps/automated/src/ui/text-view/text-view-tests-native.ios.ts b/apps/automated/src/ui/text-view/text-view-tests-native.ios.ts index e06a1b13a..f08ad2bc2 100644 --- a/apps/automated/src/ui/text-view/text-view-tests-native.ios.ts +++ b/apps/automated/src/ui/text-view/text-view-tests-native.ios.ts @@ -1,7 +1,7 @@ import * as textViewModule from '@nativescript/core/ui/text-view'; import * as colorModule from '@nativescript/core/color'; import { getColor } from '../../ui-helper'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; export function getNativeText(textView: textViewModule.TextView): string { return textView.ios.text; @@ -35,11 +35,11 @@ export function getNativeBackgroundColor(textView: textViewModule.TextView): col export function getNativeTextAlignment(textView: textViewModule.TextView): string { switch (textView.ios.textAlignment) { case NSTextAlignment.Left: - return enums.TextAlignment.left; + return Enums.TextAlignment.left; case NSTextAlignment.Center: - return enums.TextAlignment.center; + return Enums.TextAlignment.center; case NSTextAlignment.Right: - return enums.TextAlignment.right; + return Enums.TextAlignment.right; default: return 'unexpected value'; } diff --git a/apps/automated/src/ui/text-view/text-view-tests.ts b/apps/automated/src/ui/text-view/text-view-tests.ts index 46dad19be..6236a472a 100644 --- a/apps/automated/src/ui/text-view/text-view-tests.ts +++ b/apps/automated/src/ui/text-view/text-view-tests.ts @@ -4,7 +4,7 @@ import * as viewModule from '@nativescript/core/ui/core/view'; import * as pagesModule from '@nativescript/core/ui/page'; import * as textViewTestsNative from './text-view-tests-native'; import * as colorModule from '@nativescript/core/color'; -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as platform from '@nativescript/core/platform'; // >> require-textmodules @@ -537,8 +537,8 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormatt view.text = 'NormalText'; view.setInlineStyle('text-transform: uppercase; text-decoration: underline; letter-spacing: 1;'); - TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, 'TextTransform'); - TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, 'TextDecoration'); + TKUnit.assertEqual(view.style.textTransform, Enums.TextTransform.uppercase, 'TextTransform'); + TKUnit.assertEqual(view.style.textDecoration, Enums.TextDecoration.underline, 'TextDecoration'); TKUnit.assertEqual(view.style.letterSpacing, 1, 'LetterSpacing'); }); } @@ -550,8 +550,8 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT view.formattedText = formattedString; view.setInlineStyle('text-transform: uppercase; text-decoration: underline; letter-spacing: 1;'); - TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, 'TextTransform'); - TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, 'TextDecoration'); + TKUnit.assertEqual(view.style.textTransform, Enums.TextTransform.uppercase, 'TextTransform'); + TKUnit.assertEqual(view.style.textDecoration, Enums.TextDecoration.underline, 'TextDecoration'); TKUnit.assertEqual(view.style.letterSpacing, 1, 'LetterSpacing'); }); } diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css index cec187db5..88292f692 100644 --- a/apps/toolbox/src/app.css +++ b/apps/toolbox/src/app.css @@ -6,7 +6,6 @@ The following CSS rule changes the font size of all UI components that have the btn class name. */ .btn-view-demo { - font-size: 18; background-color: #65ADF1; border-radius: 5; font-size: 17; diff --git a/apps/toolbox/src/box-shadow.xml b/apps/toolbox/src/box-shadow.xml index 19bf5963d..64fee8d49 100644 --- a/apps/toolbox/src/box-shadow.xml +++ b/apps/toolbox/src/box-shadow.xml @@ -1,6 +1,6 @@ - + @@ -16,7 +16,7 @@ boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" - background="{{ background }}" + backgroundColor="{{ background }}" tap="{{ toggleAnimation }}" > @@ -29,7 +29,7 @@ boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" - background="{{ background }}" + backgroundColor="{{ background }}" tap="{{ toggleAnimation }}" > @@ -42,7 +42,7 @@ boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" - background="{{ background }}" + backgroundColor="{{ background }}" tap="{{ toggleAnimation }}" > @@ -55,7 +55,7 @@ boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" - background="{{ background }}" + backgroundColor="{{ background }}" tap="{{ toggleAnimation }}" > @@ -68,7 +68,7 @@ boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" - background="{{ background }}" + backgroundColor="{{ background }}" tap="{{ toggleAnimation }}" > @@ -90,7 +90,7 @@ boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" - background="{{ background }}" + backgroundColor="{{ background }}" tap="{{ toggleAnimation }}" text="Label"> @@ -109,7 +109,7 @@ boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" - background="{{ background }}" + backgroundColor="{{ background }}" tap="{{ toggleAnimation }}" text="button" > diff --git a/apps/toolbox/src/main-view-model.ts b/apps/toolbox/src/main-view-model.ts index 195ca882a..12f86e8ad 100644 --- a/apps/toolbox/src/main-view-model.ts +++ b/apps/toolbox/src/main-view-model.ts @@ -1,4 +1,4 @@ -import { Observable, Frame } from '@nativescript/core'; +import { Observable, Frame, StackLayout } from '@nativescript/core'; export class HelloWorldModel extends Observable { viewDemo(args) { diff --git a/apps/toolbox/src/root-layout.ts b/apps/toolbox/src/root-layout.ts index 4fb9539fd..215c5c002 100644 --- a/apps/toolbox/src/root-layout.ts +++ b/apps/toolbox/src/root-layout.ts @@ -1,5 +1,5 @@ import { EventData, Page, Observable, RootLayoutOptions, getRootLayout, StackLayout, View } from '@nativescript/core'; -import { AnimationCurve } from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; export function navigatingTo(args: EventData) { const page = args.object; @@ -78,7 +78,7 @@ export class BoxShadowModel extends Observable { rotate: 180, opacity: 0, duration: 300, - curve: AnimationCurve.spring, + curve: Enums.AnimationCurve.spring, }, }, }, diff --git a/apps/toolbox/src/root-layout.xml b/apps/toolbox/src/root-layout.xml index 06e44f955..a0975848f 100644 --- a/apps/toolbox/src/root-layout.xml +++ b/apps/toolbox/src/root-layout.xml @@ -1,6 +1,6 @@ - + diff --git a/apps/ui/src/flexbox/flexbox-main-page.ts b/apps/ui/src/flexbox/flexbox-main-page.ts index 612fef82e..97d7963cb 100644 --- a/apps/ui/src/flexbox/flexbox-main-page.ts +++ b/apps/ui/src/flexbox/flexbox-main-page.ts @@ -18,7 +18,7 @@ export function loadExamples() { examples.set('flex-perf', 'flexbox/flexbox-perf-comparison-page'); examples.set('flexbox-4143', 'flexbox/flexbox-4143-page'); examples.set('flexbox-4834', 'flexbox/flexbox-4834-page'); - examples.set("flexbox-ispassthroughparent", "flexbox/flexbox-ispassthroughparent-page"); + examples.set('flexbox-ispassthroughparent', 'flexbox/flexbox-ispassthroughparent-page'); return examples; } diff --git a/apps/ui/src/fonts-tests/all-fonts-page.ts b/apps/ui/src/fonts-tests/all-fonts-page.ts index d5dc85e11..4a9ae8cb3 100644 --- a/apps/ui/src/fonts-tests/all-fonts-page.ts +++ b/apps/ui/src/fonts-tests/all-fonts-page.ts @@ -3,7 +3,7 @@ import { Page, NavigatedData } from '@nativescript/core/ui/page'; import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout'; import { ScrollView } from '@nativescript/core/ui/scroll-view'; import { Label } from '@nativescript/core/ui/label'; -import { FontStyle, FontWeight } from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as typeUtils from '@nativescript/core/utils/types'; import { Color } from '@nativescript/core/color'; import { isIOS } from '@nativescript/core/platform'; @@ -12,8 +12,8 @@ const genericFontFamilies = ['system', 'sans-serif', 'serif', 'monospace']; let fontFamilies = []; let fontNames = []; const embeddedFontNames = ['FontAwesome', 'Pacifico', 'Sofia']; -const fontStyles = [FontStyle.normal, FontStyle.italic]; -const fontWeights = [FontWeight.thin, FontWeight.extraLight, FontWeight.light, FontWeight.normal, FontWeight.medium, FontWeight.semiBold, FontWeight.bold, FontWeight.extraBold, FontWeight.black]; +const fontStyles = [Enums.FontStyle.normal, Enums.FontStyle.italic]; +const fontWeights = [Enums.FontWeight.thin, Enums.FontWeight.extraLight, Enums.FontWeight.light, Enums.FontWeight.normal, Enums.FontWeight.medium, Enums.FontWeight.semiBold, Enums.FontWeight.bold, Enums.FontWeight.extraBold, Enums.FontWeight.black]; let green = new Color('Green'); let red = new Color('Red'); @@ -111,8 +111,8 @@ function prepareLabel(fontFamily: string, fontStyle: string, fontWeight: string) let label = new Label(); label['font-family'] = fontFamily; let fontFamilyCss = `font-family: ${fontFamily}; `; - let fontStyleCss = fontStyle !== FontStyle.normal ? `font-style: ${fontStyle}; ` : ''; - let fontWeightCss = fontWeight !== FontWeight.normal ? `font-weight: ${fontWeight}; ` : ''; + let fontStyleCss = fontStyle !== Enums.FontStyle.normal ? `font-style: ${fontStyle}; ` : ''; + let fontWeightCss = fontWeight !== Enums.FontWeight.normal ? `font-weight: ${fontWeight}; ` : ''; let css = `${fontFamilyCss}${fontStyleCss}${fontWeightCss}`; label.text = `${typeUtils.getClass(label)} {${css}};`; label.textWrap = true; diff --git a/apps/ui/src/image-view/mode-matrix-page.ts b/apps/ui/src/image-view/mode-matrix-page.ts index c6dbf1282..91845b44b 100644 --- a/apps/ui/src/image-view/mode-matrix-page.ts +++ b/apps/ui/src/image-view/mode-matrix-page.ts @@ -1,4 +1,4 @@ -import { Image, Stretch } from '@nativescript/core/ui/image'; +import { Image, Enums } from '@nativescript/core'; import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout'; import { Color } from '@nativescript/core/color'; import * as imageSource from '@nativescript/core/image-source'; @@ -9,7 +9,7 @@ const sources = [ { src: 'upflip', rotation: 180 }, { src: 'upccw', rotation: 90 }, ].map(({ src, rotation }) => ({ src: `res://${src}`, rotation })); -const stretchModes: Stretch[] = ['none', 'aspectFill', 'aspectFit', 'fill']; +const stretchModes: Enums.ImageStretchType[] = ['none', 'aspectFill', 'aspectFit', 'fill']; export function navigatingTo(args) { const grid: GridLayout = args.object.getViewById('root'); diff --git a/apps/ui/src/image-view/stretch-modes-page.ts b/apps/ui/src/image-view/stretch-modes-page.ts index 6fc4d6d2c..bc2657b17 100644 --- a/apps/ui/src/image-view/stretch-modes-page.ts +++ b/apps/ui/src/image-view/stretch-modes-page.ts @@ -1,4 +1,4 @@ -import { Image, Stretch } from '@nativescript/core/ui/image'; +import { Image, Enums } from '@nativescript/core'; import { Label } from '@nativescript/core/ui/label'; import { LayoutBase } from '@nativescript/core/ui/layouts/layout-base'; @@ -7,12 +7,12 @@ const sources = [ { w: 32, h: 32, src: 'i32x32' }, { w: 18, h: 32, src: 'i18x32' }, ].map(({ w, h, src }) => ({ w, h, src: `res://${src}` })); -const stretchModes: Stretch[] = ['none', 'aspectFill', 'aspectFit', 'fill']; +const stretchModes: Enums.ImageStretchType[] = ['none', 'aspectFill', 'aspectFit', 'fill']; const widths = [+8, 0, -8]; const heights = [+8, 0, -8]; export function navigatingTo(args) { - const variants: { src: string; stretch: Stretch; width: number; height: number }[] = []; + const variants: { src: string; stretch: Enums.ImageStretchType; width: number; height: number }[] = []; // Better way for cartesian product? sources.forEach((src) => stretchModes.forEach((stretch) => widths.forEach((width) => heights.forEach((height) => variants.push({ src: src.src, stretch, width: src.w + width, height: src.h + height }))))); diff --git a/apps/ui/src/issues/main-page.ts b/apps/ui/src/issues/main-page.ts index 99c9accb1..d402f44a5 100644 --- a/apps/ui/src/issues/main-page.ts +++ b/apps/ui/src/issues/main-page.ts @@ -32,7 +32,7 @@ export function loadExamples() { examples.set('ng-repo-1626', 'issues/issue-ng-repo-1626-page'); examples.set('6439', 'issues/issue-6439-page'); examples.set('open-file-6895', 'issues/open-file-6895-page'); - examples.set("7469", "issues/issue-7469-page"); + examples.set('7469', 'issues/issue-7469-page'); examples.set('8810', 'issues/issue-8810-page'); return examples; diff --git a/apps/ui/src/layouts-percent/stack-page.ts b/apps/ui/src/layouts-percent/stack-page.ts index c149709db..e4d884978 100644 --- a/apps/ui/src/layouts-percent/stack-page.ts +++ b/apps/ui/src/layouts-percent/stack-page.ts @@ -1,4 +1,4 @@ -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as pageModule from '@nativescript/core/ui/page'; import * as model from './myview'; @@ -9,9 +9,9 @@ export function onLoaded(args: { eventName: string; object: any }) { export function onOrientation(args: { eventName: string; object: any }) { var layout = args.object.parent; - if (layout.orientation === enums.Orientation.vertical) { - layout.orientation = enums.Orientation.horizontal; + if (layout.orientation === Enums.Orientation.vertical) { + layout.orientation = Enums.Orientation.horizontal; } else { - layout.orientation = enums.Orientation.vertical; + layout.orientation = Enums.Orientation.vertical; } } diff --git a/apps/ui/src/layouts-percent/wrap-page.ts b/apps/ui/src/layouts-percent/wrap-page.ts index b35fe5e90..8c6280443 100644 --- a/apps/ui/src/layouts-percent/wrap-page.ts +++ b/apps/ui/src/layouts-percent/wrap-page.ts @@ -1,4 +1,4 @@ -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as pageModule from '@nativescript/core/ui/page'; import * as model from './myview'; @@ -9,10 +9,10 @@ export function onLoaded(args: { eventName: string; object: any }) { export function onOrientation(args: { eventName: string; object: any }) { var layout = args.object.parent; - if (layout.orientation === enums.Orientation.vertical) { - layout.orientation = enums.Orientation.horizontal; + if (layout.orientation === Enums.Orientation.vertical) { + layout.orientation = Enums.Orientation.horizontal; } else { - layout.orientation = enums.Orientation.vertical; + layout.orientation = Enums.Orientation.vertical; } } diff --git a/apps/ui/src/layouts/stack-page.ts b/apps/ui/src/layouts/stack-page.ts index e5d16d6db..778d1ea15 100644 --- a/apps/ui/src/layouts/stack-page.ts +++ b/apps/ui/src/layouts/stack-page.ts @@ -1,4 +1,4 @@ -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as pageModule from '@nativescript/core/ui/page'; import * as model from './myview'; @@ -9,9 +9,9 @@ export function onLoaded(args: { eventName: string; object: any }) { export function onOrientation(args: { eventName: string; object: any }) { var layout = args.object.parent; - if (layout.orientation === enums.Orientation.vertical) { - layout.orientation = enums.Orientation.horizontal; + if (layout.orientation === Enums.Orientation.vertical) { + layout.orientation = Enums.Orientation.horizontal; } else { - layout.orientation = enums.Orientation.vertical; + layout.orientation = Enums.Orientation.vertical; } } diff --git a/apps/ui/src/layouts/wrap-page.ts b/apps/ui/src/layouts/wrap-page.ts index 9bd2b78e6..e47c6bdce 100644 --- a/apps/ui/src/layouts/wrap-page.ts +++ b/apps/ui/src/layouts/wrap-page.ts @@ -1,4 +1,4 @@ -import * as enums from '@nativescript/core/ui/enums'; +import { Enums } from '@nativescript/core'; import * as pageModule from '@nativescript/core/ui/page'; import * as model from './myview'; @@ -9,10 +9,10 @@ export function onLoaded(args: { eventName: string; object: any }) { export function onOrientation(args: { eventName: string; object: any }) { var layout = args.object.parent; - if (layout.orientation === enums.Orientation.vertical) { - layout.orientation = enums.Orientation.horizontal; + if (layout.orientation === Enums.Orientation.vertical) { + layout.orientation = Enums.Orientation.horizontal; } else { - layout.orientation = enums.Orientation.vertical; + layout.orientation = Enums.Orientation.vertical; } } diff --git a/apps/ui/src/perf/memory-leaks/main-page.ts b/apps/ui/src/perf/memory-leaks/main-page.ts index 81e602643..fcff784ad 100644 --- a/apps/ui/src/perf/memory-leaks/main-page.ts +++ b/apps/ui/src/perf/memory-leaks/main-page.ts @@ -1,4 +1,4 @@ -import { EventData } from '@nativescript/core/data/observable'; +import { EventData, getViewById } from '@nativescript/core'; import { TestPageMainViewModel } from '../../test-page-main-view-model'; import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout'; import { Page } from '@nativescript/core/ui/page'; @@ -6,9 +6,8 @@ import { isAndroid } from '@nativescript/core/platform'; export function pageLoaded(args: EventData) { let page = args.object; - let view = require('@nativescript/core/ui/core/view'); - let wrapLayout = view.getViewById(page, 'wrapLayoutWithExamples'); + let wrapLayout = getViewById(page, 'wrapLayoutWithExamples'); let examples: Map = new Map(); if (isAndroid) { diff --git a/apps/ui/src/test-page-main-view-model.ts b/apps/ui/src/test-page-main-view-model.ts index 7c59d7a4a..7339af9ce 100644 --- a/apps/ui/src/test-page-main-view-model.ts +++ b/apps/ui/src/test-page-main-view-model.ts @@ -1,9 +1,8 @@ -import { Observable } from '@nativescript/core/data/observable'; +import { Observable, Frame } from '@nativescript/core'; import { Button } from '@nativescript/core/ui/button'; import { Color } from '@nativescript/core/color'; import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout'; import { alert } from '@nativescript/core/ui/dialogs'; -import * as frame from '@nativescript/core/ui/frame'; import * as platform from '@nativescript/core/platform'; export class TestPageMainViewModel extends Observable { @@ -30,7 +29,7 @@ export class TestPageMainViewModel extends Observable { protected navigateToExample(exampleFullPath: string) { try { - frame.topmost().navigate(exampleFullPath); + Frame.topmost().navigate(exampleFullPath); } catch (error) { console.log('EXAMPLE LOAD FAILED:' + error); alert('Error loading example: ' + exampleFullPath + ' \nerror: ' + error && error.message); diff --git a/packages/core/application/index.ios.ts b/packages/core/application/index.ios.ts index d92c04d0d..cdaaf79c8 100644 --- a/packages/core/application/index.ios.ts +++ b/packages/core/application/index.ios.ts @@ -13,6 +13,7 @@ import { View } from '../ui/core/view'; import { NavigationEntry } from '../ui/frame/frame-interfaces'; // TODO: Remove this and get it from global to decouple builder for angular import { Builder } from '../ui/builder'; +import { Observable } from '../data/observable'; import { CSSUtils } from '../css/system-classes'; import { IOSHelper } from '../ui/core/view/view-helper'; import { Device } from '../platform'; diff --git a/packages/core/color/color-common.ts b/packages/core/color/color-common.ts index 8942e3f07..f3ff39561 100644 --- a/packages/core/color/color-common.ts +++ b/packages/core/color/color-common.ts @@ -196,23 +196,35 @@ export class Color implements definition.Color { public getBrightness() { return (this.r * 299 + this.g * 587 + this.b * 114) / 1000; } - + /** * return the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef) * */ public getLuminance() { let R, G, B; - const RsRGB = this.r / 255; - const GsRGB = this.g/255; - const BsRGB = this.b/255; + const RsRGB = this.r / 255; + const GsRGB = this.g / 255; + const BsRGB = this.b / 255; - if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} - if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} - if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} - return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); + if (RsRGB <= 0.03928) { + R = RsRGB / 12.92; + } else { + R = Math.pow((RsRGB + 0.055) / 1.055, 2.4); + } + if (GsRGB <= 0.03928) { + G = GsRGB / 12.92; + } else { + G = Math.pow((GsRGB + 0.055) / 1.055, 2.4); + } + if (BsRGB <= 0.03928) { + B = BsRGB / 12.92; + } else { + B = Math.pow((BsRGB + 0.055) / 1.055, 2.4); + } + return 0.2126 * R + 0.7152 * G + 0.0722 * B; } - + /** * Return this color (as a new Color instance) with the provided alpha * @@ -230,20 +242,20 @@ export class Color implements definition.Color { const hsl = rgbToHsl(this.r, this.g, this.b); return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a }; } - + /** * return the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color * */ public toHslString() { const hsl = rgbToHsl(this.r, this.g, this.b); - const h = Math.round(hsl.h * 360), s = Math.round(hsl.s * 100), l = Math.round(hsl.l * 100); + const h = Math.round(hsl.h * 360), + s = Math.round(hsl.s * 100), + l = Math.round(hsl.l * 100); const a = this.a; - return (a == 255) ? - "hsl(" + h + ", " + s + "%, " + l + "%)" : - "hsla(" + h + ", " + s + "%, " + l + "%, "+ (a/255).toFixed(2) + ")"; + return a == 255 ? 'hsl(' + h + ', ' + s + '%, ' + l + '%)' : 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + (a / 255).toFixed(2) + ')'; } - + /** * return the hsv representation of the color * @@ -252,18 +264,18 @@ export class Color implements definition.Color { const hsv = rgbToHsv(this.r, this.g, this.b); return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a }; } - + /** * return the [CSS hsv](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color * */ public toHsvString() { const hsv = rgbToHsv(this.r, this.g, this.b); - const h = Math.round(hsv.h * 360), s = Math.round(hsv.s * 100), v = Math.round(hsv.v * 100); + const h = Math.round(hsv.h * 360), + s = Math.round(hsv.s * 100), + v = Math.round(hsv.v * 100); const a = this.a; - return (a == 255) ? - "hsv(" + h + ", " + s + "%, " + v + "%)" : - "hsva(" + h + ", " + s + "%, " + v + "%, "+ (a/255).toFixed(2) + ")"; + return a == 255 ? 'hsv(' + h + ', ' + s + '%, ' + v + '%)' : 'hsva(' + h + ', ' + s + '%, ' + v + '%, ' + (a / 255).toFixed(2) + ')'; } /** @@ -272,9 +284,7 @@ export class Color implements definition.Color { */ public toRgbString() { const a = this.a; - return (a == 1) ? - "rgb(" + Math.round(this.r) + ", " + Math.round(this.g) + ", " + Math.round(this.b) + ")" : - "rgba(" + Math.round(this.r) + ", " + Math.round(this.g) + ", " + Math.round(this.b) + ", " + (a/255).toFixed(2) + ")"; + return a == 1 ? 'rgb(' + Math.round(this.r) + ', ' + Math.round(this.g) + ', ' + Math.round(this.b) + ')' : 'rgba(' + Math.round(this.r) + ', ' + Math.round(this.g) + ', ' + Math.round(this.b) + ', ' + (a / 255).toFixed(2) + ')'; } /** @@ -283,26 +293,26 @@ export class Color implements definition.Color { * @param amount (between 0 and 100) */ public desaturate(amount: number) { - amount = (amount === 0) ? 0 : (amount || 10); + amount = amount === 0 ? 0 : amount || 10; const hsl = this.toHsl(); hsl.s -= amount / 100; - hsl.s = Math.min(1, Math.max(0, hsl.s)) + hsl.s = Math.min(1, Math.max(0, hsl.s)); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); } - + /** * Saturate the color a given amount, from 0 to 100. * * @param amount (between 0 and 100) */ public saturate(amount: number) { - amount = (amount === 0) ? 0 : (amount || 10); + amount = amount === 0 ? 0 : amount || 10; const hsl = this.toHsl(); hsl.s += amount / 100; - hsl.s = Math.min(1, Math.max(0, hsl.s)) + hsl.s = Math.min(1, Math.max(0, hsl.s)); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); } - + /** * Completely desaturates a color into greyscale. Same as calling desaturate(100). * @@ -316,11 +326,11 @@ export class Color implements definition.Color { * * @param amount (between 0 and 100) */ - public lighten (amount: number) { - amount = (amount === 0) ? 0 : (amount || 10); + public lighten(amount: number) { + amount = amount === 0 ? 0 : amount || 10; const hsl = this.toHsl(); hsl.l += amount / 100; - hsl.l = Math.min(1, Math.max(0, hsl.l)) + hsl.l = Math.min(1, Math.max(0, hsl.l)); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); } @@ -330,10 +340,10 @@ export class Color implements definition.Color { * @param amount (between 0 and 100) */ public brighten(amount: number) { - amount = (amount === 0) ? 0 : (amount || 10); - const r = Math.max(0, Math.min(255, this.r - Math.round(255 * - (amount / 100)))); - const g = Math.max(0, Math.min(255, this.g - Math.round(255 * - (amount / 100)))); - const b = Math.max(0, Math.min(255, this.b - Math.round(255 * - (amount / 100)))); + amount = amount === 0 ? 0 : amount || 10; + const r = Math.max(0, Math.min(255, this.r - Math.round(255 * -(amount / 100)))); + const g = Math.max(0, Math.min(255, this.g - Math.round(255 * -(amount / 100)))); + const b = Math.max(0, Math.min(255, this.b - Math.round(255 * -(amount / 100)))); return new Color(this.a, r, g, b); } @@ -342,14 +352,14 @@ export class Color implements definition.Color { * * @param amount (between 0 and 100) */ - public darken (amount: number) { - amount = (amount === 0) ? 0 : (amount || 10); + public darken(amount: number) { + amount = amount === 0 ? 0 : amount || 10; const hsl = this.toHsl(); hsl.l -= amount / 100; - hsl.l = Math.min(1, Math.max(0, hsl.l)) + hsl.l = Math.min(1, Math.max(0, hsl.l)); return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); } - + /** * Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before). * @@ -361,7 +371,7 @@ export class Color implements definition.Color { hsl.h = hue < 0 ? 360 + hue : hue; return Color.fromHSL(this.a, hsl.h, hsl.s, hsl.l); } - + /** * returns the color complement * @@ -436,20 +446,26 @@ function argbFromHslOrHsla(value: string): number { // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] // *Returns:* { h, s, l } in [0,1] function rgbToHsl(r, g, b) { - const max = Math.max(r, g, b), min = Math.min(r, g, b); + const max = Math.max(r, g, b), + min = Math.min(r, g, b); let h, s; const l = (max + min) / 2; - if(max == min) { + if (max == min) { h = s = 0; // achromatic - } - else { + } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; } h /= 6; @@ -459,11 +475,11 @@ function rgbToHsl(r, g, b) { } function hue2rgb(p, q, t) { - if(t < 0) t += 1; - if(t > 1) t -= 1; - if(t < 1/6) return p + (q - p) * 6 * t; - if(t < 1/2) return q; - if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; } @@ -473,41 +489,45 @@ function hue2rgb(p, q, t) { // *Returns:* { r, g, b } in the set [0, 255] function hslToRgb(h, s, l) { let r, g, b; - if(s === 0) { + if (s === 0) { r = g = b = l; // achromatic - } - else { + } else { const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); + r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); + b = hue2rgb(p, q, h - 1 / 3); } return { r: r * 255, g: g * 255, b: b * 255 }; } - // `rgbToHsv` // Converts an RGB color value to HSV // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] // *Returns:* { h, s, v } in [0,1] function rgbToHsv(r, g, b) { - const max = Math.max(r, g, b), min = Math.min(r, g, b); + const max = Math.max(r, g, b), + min = Math.min(r, g, b); let h; const v = max; const d = max - min; const s = max === 0 ? 0 : d / max; - if(max == min) { + if (max == min) { h = 0; // achromatic - } - else { - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; + } else { + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; } h /= 6; } diff --git a/packages/core/color/index.d.ts b/packages/core/color/index.d.ts index 56ac39610..5d7d3de25 100644 --- a/packages/core/color/index.d.ts +++ b/packages/core/color/index.d.ts @@ -81,7 +81,7 @@ export class Color { * */ public isDark(): boolean; - + /** * return true if brightenss >= 128 * @@ -98,7 +98,7 @@ export class Color { * */ public getLuminance(): number; - + /** * Return this color (as a new Color instance) with the provided alpha * @@ -109,20 +109,20 @@ export class Color { * return the hsl representation of the color * */ - public toHsl() : { h: number, s: number, l: number, a: number }; - + public toHsl(): { h: number; s: number; l: number; a: number }; + /** * return the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color * */ public toHslString(): string; - + /** * return the hsv representation of the color * */ - public toHsv(): { h: number, s: number, v: number, a: number }; - + public toHsv(): { h: number; s: number; v: number; a: number }; + /** * return the [CSS hsv](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color * @@ -141,14 +141,14 @@ export class Color { * @param amount (between 0 and 100) */ public desaturate(amount: number): Color; - + /** * Saturate the color a given amount, from 0 to 100. * * @param amount (between 0 and 100) */ public saturate(amount: number): Color; - + /** * Completely desaturates a color into greyscale. Same as calling desaturate(100). * @@ -162,7 +162,7 @@ export class Color { * @param amount (between 0 and 100) * @returns olor : Color */ - public lighten (amount: number): Color; + public lighten(amount: number): Color; /** * Brighten the color a given amount, from 0 to 100. @@ -176,8 +176,8 @@ export class Color { * * @param amount (between 0 and 100) */ - public darken (amount: number): Color; - + public darken(amount: number): Color; + /** * Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before). * diff --git a/packages/core/ui/action-bar/action-bar-common.ts b/packages/core/ui/action-bar/action-bar-common.ts index 84fb55753..6d25f4d6f 100644 --- a/packages/core/ui/action-bar/action-bar-common.ts +++ b/packages/core/ui/action-bar/action-bar-common.ts @@ -6,7 +6,7 @@ import { View, CSSType } from '../core/view'; import { ViewBase, booleanConverter } from '../core/view-base'; import { Trace } from '../../trace'; import { ShorthandProperty, CssProperty, Property, unsetValue } from '../core/properties'; -import { Length, horizontalAlignmentProperty, verticalAlignmentProperty } from '../styling/style-properties'; +import { Length, horizontalAlignmentProperty, verticalAlignmentProperty, LengthType } from '../styling/style-properties'; import { Style } from '../styling/style'; @CSSType('ActionBar') @@ -81,24 +81,24 @@ export class ActionBarBase extends View implements ActionBarDefinition { } } - public get androidContentInset(): string | Length { + public get androidContentInset(): string | LengthType { return this.style.androidContentInset; } - public set androidContentInset(value: string | Length) { + public set androidContentInset(value: string | LengthType) { this.style.androidContentInset = value; } - public get androidContentInsetLeft(): Length { + public get androidContentInsetLeft(): LengthType { return this.style.androidContentInsetLeft; } - public set androidContentInsetLeft(value: Length) { + public set androidContentInsetLeft(value: LengthType) { this.style.androidContentInsetLeft = value; } - public get androidContentInsetRight(): Length { + public get androidContentInsetRight(): LengthType { return this.style.androidContentInsetRight; } - public set androidContentInsetRight(value: Length) { + public set androidContentInsetRight(value: LengthType) { this.style.androidContentInsetRight = value; } @@ -363,7 +363,7 @@ export function traceMissingIcon(icon: string) { Trace.write('Could not load action bar icon: ' + icon, Trace.categories.Error, Trace.messageType.error); } -function convertToContentInset(this: void, value: string | Length): [CssProperty, any][] { +function convertToContentInset(this: void, value: string | LengthType): [CssProperty, any][] { if (typeof value === 'string' && value !== 'auto') { const insets = value.split(/[ ,]+/); @@ -409,7 +409,7 @@ export const flatProperty = new Property({ }); flatProperty.register(ActionBarBase); -const androidContentInsetProperty = new ShorthandProperty({ +const androidContentInsetProperty = new ShorthandProperty({ name: 'androidContentInset', cssName: 'android-content-inset', getter: function (this: Style) { @@ -423,7 +423,7 @@ const androidContentInsetProperty = new ShorthandProperty({ +export const androidContentInsetLeftProperty = new CssProperty({ name: 'androidContentInsetLeft', cssName: 'android-content-inset-left', defaultValue: 'auto', @@ -440,7 +440,7 @@ export const androidContentInsetLeftProperty = new CssProperty({ }); androidContentInsetLeftProperty.register(Style); -export const androidContentInsetRightProperty = new CssProperty({ +export const androidContentInsetRightProperty = new CssProperty({ name: 'androidContentInsetRight', cssName: 'android-content-inset-right', defaultValue: 'auto', diff --git a/packages/core/ui/activity-indicator/index.android.ts b/packages/core/ui/activity-indicator/index.android.ts index bf0c42e89..693f6e3f2 100644 --- a/packages/core/ui/activity-indicator/index.android.ts +++ b/packages/core/ui/activity-indicator/index.android.ts @@ -1,6 +1,7 @@ import { ActivityIndicatorBase, busyProperty } from './activity-indicator-common'; -import { colorProperty, visibilityProperty, Visibility } from '../styling/style-properties'; +import { colorProperty, visibilityProperty } from '../styling/style-properties'; import { Color } from '../../color'; +import { Enums } from '../enums'; export * from './activity-indicator-common'; @@ -19,27 +20,27 @@ export class ActivityIndicator extends ActivityIndicatorBase { return false; } [busyProperty.setNative](value: boolean) { - if (this.visibility === Visibility.VISIBLE) { + if (this.visibility === Enums.Visibility.visible) { this.nativeViewProtected.setVisibility(value ? android.view.View.VISIBLE : android.view.View.INVISIBLE); } } - [visibilityProperty.getDefault](): Visibility { - return Visibility.HIDDEN; + [visibilityProperty.getDefault](): Enums.VisibilityType { + return Enums.Visibility.hidden; } - [visibilityProperty.setNative](value: Visibility) { + [visibilityProperty.setNative](value: Enums.VisibilityType) { switch (value) { - case Visibility.VISIBLE: + case Enums.Visibility.visible: this.nativeViewProtected.setVisibility(this.busy ? android.view.View.VISIBLE : android.view.View.INVISIBLE); break; - case Visibility.HIDDEN: + case Enums.Visibility.hidden: this.nativeViewProtected.setVisibility(android.view.View.INVISIBLE); break; - case Visibility.COLLAPSE: + case Enums.Visibility.collapse: this.nativeViewProtected.setVisibility(android.view.View.GONE); break; default: - throw new Error(`Invalid visibility value: ${value}. Valid values are: "${Visibility.VISIBLE}", "${Visibility.HIDDEN}", "${Visibility.COLLAPSE}".`); + throw new Error(`Invalid visibility value: ${value}. Valid values are: "${Enums.Visibility.visible}", "${Enums.Visibility.hidden}", "${Enums.Visibility.collapse}".`); } } diff --git a/packages/core/ui/animation/animation-interfaces.ts b/packages/core/ui/animation/animation-interfaces.ts index b953a6bb2..a3ef65640 100644 --- a/packages/core/ui/animation/animation-interfaces.ts +++ b/packages/core/ui/animation/animation-interfaces.ts @@ -1,6 +1,6 @@ // Types import { View } from '../core/view'; -import { PercentLength } from '../styling/style-properties'; +import { PercentLengthType } from '../styling/style-properties'; import { Color } from '../../color'; export type Transformation = { @@ -53,8 +53,8 @@ export interface AnimationDefinition { backgroundColor?: Color; translate?: Pair; scale?: Pair; - height?: PercentLength | string; - width?: PercentLength | string; + height?: PercentLengthType | string; + width?: PercentLengthType | string; rotate?: number; duration?: number; delay?: number; diff --git a/packages/core/ui/animation/index.d.ts b/packages/core/ui/animation/index.d.ts index 98a3e7b4a..ce260d9ed 100644 --- a/packages/core/ui/animation/index.d.ts +++ b/packages/core/ui/animation/index.d.ts @@ -1,6 +1,6 @@ import { View } from '../core/view'; import { Color } from '../../color'; -import { PercentLength } from '../styling/style-properties'; +import { PercentLengthType } from '../styling/style-properties'; export { KeyframeAnimation, KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo } from './keyframe-animation'; @@ -36,12 +36,12 @@ export interface AnimationDefinition { /** * Animates the height of a view. */ - height?: PercentLength | string; + height?: PercentLengthType | string; /** * Animates the width of a view. */ - width?: PercentLength | string; + width?: PercentLengthType | string; /** * Animates the rotate affine transform of the view. Value should be a number specifying the rotation amount in degrees. diff --git a/packages/core/ui/animation/keyframe-animation.ts b/packages/core/ui/animation/keyframe-animation.ts index 638cef895..a23998f8b 100644 --- a/packages/core/ui/animation/keyframe-animation.ts +++ b/packages/core/ui/animation/keyframe-animation.ts @@ -1,14 +1,14 @@ import { View } from '../core/view'; import { Color } from '../../color'; -import { AnimationCurve } from '../enums'; +import { Enums } from '../enums'; import { Trace } from '../../trace'; // Types. import { unsetValue } from '../core/properties'; import { Animation } from '.'; -import { backgroundColorProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, rotateProperty, opacityProperty, rotateXProperty, rotateYProperty, widthProperty, heightProperty, PercentLength } from '../styling/style-properties'; +import { backgroundColorProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, rotateProperty, opacityProperty, rotateXProperty, rotateYProperty, widthProperty, heightProperty, PercentLength, PercentLengthType } from '../styling/style-properties'; export class Keyframes { name: string; @@ -28,7 +28,7 @@ export class KeyframeDeclaration { export class KeyframeInfo { public duration: number; public declarations: Array; - public curve?: any = AnimationCurve.ease; + public curve?: any = Enums.AnimationCurve.ease; } export class KeyframeAnimationInfo { @@ -48,8 +48,8 @@ interface Keyframe { translate?: { x: number; y: number }; rotate?: { x: number; y: number; z: number }; opacity?: number; - width?: PercentLength; - height?: PercentLength; + width?: PercentLengthType; + height?: PercentLengthType; valueSource?: 'keyframe' | 'animation'; duration?: number; curve?: any; diff --git a/packages/core/ui/bottom-navigation/index.android.ts b/packages/core/ui/bottom-navigation/index.android.ts index 759e0b3cc..49d7223a2 100644 --- a/packages/core/ui/bottom-navigation/index.android.ts +++ b/packages/core/ui/bottom-navigation/index.android.ts @@ -2,7 +2,7 @@ import { TabContentItem } from '../tab-navigation-base/tab-content-item'; import { TabStrip } from '../tab-navigation-base/tab-strip'; import { TabStripItem } from '../tab-navigation-base/tab-strip-item'; -import { TextTransform } from '../text-base'; +import { Enums } from '../enums'; // Requires import * as application from '../../application'; @@ -256,7 +256,7 @@ export class BottomNavigation extends TabNavigationBase { private _currentTransaction: androidx.fragment.app.FragmentTransaction; private _attachedToWindow = false; public _originalBackground: any; - private _textTransform: TextTransform = 'none'; + private _textTransform: Enums.TextTransformType = 'none'; private _selectedItemColor: Color; private _unSelectedItemColor: Color; @@ -623,9 +623,9 @@ export class BottomNavigation extends TabNavigationBase { }); } - private getItemLabelTextTransform(tabStripItem: TabStripItem): TextTransform { + private getItemLabelTextTransform(tabStripItem: TabStripItem): Enums.TextTransformType { const nestedLabel = tabStripItem.label; - let textTransform: TextTransform = null; + let textTransform: Enums.TextTransformType = null; if (nestedLabel && nestedLabel.style.textTransform !== 'initial') { textTransform = nestedLabel.style.textTransform; } else if (tabStripItem.style.textTransform !== 'initial') { @@ -872,17 +872,17 @@ export class BottomNavigation extends TabNavigationBase { tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface()); } - public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { + public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: Enums.TextTransformType): void { const titleLabel = tabStripItem.label; const title = getTransformedText(titleLabel.text, value); tabStripItem.nativeViewProtected.setText(title); } - public getTabBarTextTransform(): TextTransform { + public getTabBarTextTransform(): Enums.TextTransformType { return this._textTransform; } - public setTabBarTextTransform(value: TextTransform): void { + public setTabBarTextTransform(value: Enums.TextTransformType): void { const items = this.tabStrip && this.tabStrip.items; if (items) { items.forEach((tabStripItem) => { diff --git a/packages/core/ui/bottom-navigation/index.ios.ts b/packages/core/ui/bottom-navigation/index.ios.ts index 6f6b30138..608d65c64 100644 --- a/packages/core/ui/bottom-navigation/index.ios.ts +++ b/packages/core/ui/bottom-navigation/index.ios.ts @@ -2,8 +2,8 @@ import { TabContentItem } from '../tab-navigation-base/tab-content-item'; import { TabStrip } from '../tab-navigation-base/tab-strip'; import { TabStripItem } from '../tab-navigation-base/tab-strip-item'; -import { getTransformedText, TextTransform } from '../text-base'; - +import { getTransformedText } from '../text-base'; +import { Enums } from '../enums'; // Requires import { Color } from '../../color'; import { ImageSource } from '../../image-source'; @@ -424,7 +424,7 @@ export class BottomNavigation extends TabNavigationBase { this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label); } - public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { + public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: Enums.TextTransformType): void { tabStripItem.nativeView.title = getTransformedText(tabStripItem.label.text, value); } diff --git a/packages/core/ui/button/index.android.ts b/packages/core/ui/button/index.android.ts index 29cd44bba..2192a07b2 100644 --- a/packages/core/ui/button/index.android.ts +++ b/packages/core/ui/button/index.android.ts @@ -1,8 +1,8 @@ import { ButtonBase } from './button-common'; import { PseudoClassHandler } from '../core/view'; -import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties'; +import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, zIndexProperty, minWidthProperty, minHeightProperty, LengthType } from '../styling/style-properties'; import { textAlignmentProperty } from '../text-base'; -import { TextAlignment } from '../enums'; +import { Enums } from '../enums'; import { profile } from '../../profiling'; import { TouchGestureEventData, GestureTypes, TouchAction } from '../gestures'; import { Device } from '../../platform'; @@ -114,43 +114,43 @@ export class Button extends ButtonBase { } } - [minWidthProperty.getDefault](): Length { + [minWidthProperty.getDefault](): LengthType { const dips = org.nativescript.widgets.ViewHelper.getMinWidth(this.nativeViewProtected); return { value: dips, unit: 'px' }; } - [minHeightProperty.getDefault](): Length { + [minHeightProperty.getDefault](): LengthType { const dips = org.nativescript.widgets.ViewHelper.getMinHeight(this.nativeViewProtected); return { value: dips, unit: 'px' }; } - [paddingTopProperty.getDefault](): Length { + [paddingTopProperty.getDefault](): LengthType { return { value: this._defaultPaddingTop, unit: 'px' }; } - [paddingTopProperty.setNative](value: Length) { + [paddingTopProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0)); } - [paddingRightProperty.getDefault](): Length { + [paddingRightProperty.getDefault](): LengthType { return { value: this._defaultPaddingRight, unit: 'px' }; } - [paddingRightProperty.setNative](value: Length) { + [paddingRightProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0)); } - [paddingBottomProperty.getDefault](): Length { + [paddingBottomProperty.getDefault](): LengthType { return { value: this._defaultPaddingBottom, unit: 'px' }; } - [paddingBottomProperty.setNative](value: Length) { + [paddingBottomProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0)); } - [paddingLeftProperty.getDefault](): Length { + [paddingLeftProperty.getDefault](): LengthType { return { value: this._defaultPaddingLeft, unit: 'px' }; } - [paddingLeftProperty.setNative](value: Length) { + [paddingLeftProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0)); } @@ -167,7 +167,7 @@ export class Button extends ButtonBase { org.nativescript.widgets.ViewHelper.setZIndex(this.nativeViewProtected, value); } - [textAlignmentProperty.setNative](value: TextAlignment) { + [textAlignmentProperty.setNative](value: Enums.TextAlignmentType) { // Button initial value is center. const newValue = value === 'initial' ? 'center' : value; super[textAlignmentProperty.setNative](newValue); diff --git a/packages/core/ui/button/index.ios.ts b/packages/core/ui/button/index.ios.ts index 0ffaa3485..d1a20fd4a 100644 --- a/packages/core/ui/button/index.ios.ts +++ b/packages/core/ui/button/index.ios.ts @@ -1,13 +1,10 @@ import { ControlStateChangeListener } from '../core/control-state-change'; import { ButtonBase } from './button-common'; import { View, PseudoClassHandler } from '../core/view'; -import { borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties'; -import { textAlignmentProperty, whiteSpaceProperty, WhiteSpace } from '../text-base'; -import { TextAlignment } from '../enums'; -import { profile } from '../../profiling'; -import { TouchGestureEventData, GestureTypes, TouchAction } from '../gestures'; -import { Device } from '../../platform'; +import { borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, LengthType } from '../styling/style-properties'; +import { textAlignmentProperty, whiteSpaceProperty } from '../text-base'; import { layout } from '../../utils'; +import { Enums } from '../enums'; export * from './button-common'; @@ -59,13 +56,13 @@ export class Button extends ButtonBase { } } - [borderTopWidthProperty.getDefault](): Length { + [borderTopWidthProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.top, unit: 'px', }; } - [borderTopWidthProperty.setNative](value: Length) { + [borderTopWidthProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -76,13 +73,13 @@ export class Button extends ButtonBase { }; } - [borderRightWidthProperty.getDefault](): Length { + [borderRightWidthProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.right, unit: 'px', }; } - [borderRightWidthProperty.setNative](value: Length) { + [borderRightWidthProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -93,13 +90,13 @@ export class Button extends ButtonBase { }; } - [borderBottomWidthProperty.getDefault](): Length { + [borderBottomWidthProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.bottom, unit: 'px', }; } - [borderBottomWidthProperty.setNative](value: Length) { + [borderBottomWidthProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -110,13 +107,13 @@ export class Button extends ButtonBase { }; } - [borderLeftWidthProperty.getDefault](): Length { + [borderLeftWidthProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.left, unit: 'px', }; } - [borderLeftWidthProperty.setNative](value: Length) { + [borderLeftWidthProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -127,13 +124,13 @@ export class Button extends ButtonBase { }; } - [paddingTopProperty.getDefault](): Length { + [paddingTopProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.top, unit: 'px', }; } - [paddingTopProperty.setNative](value: Length) { + [paddingTopProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -144,13 +141,13 @@ export class Button extends ButtonBase { }; } - [paddingRightProperty.getDefault](): Length { + [paddingRightProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.right, unit: 'px', }; } - [paddingRightProperty.setNative](value: Length) { + [paddingRightProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -161,13 +158,13 @@ export class Button extends ButtonBase { }; } - [paddingBottomProperty.getDefault](): Length { + [paddingBottomProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.bottom, unit: 'px', }; } - [paddingBottomProperty.setNative](value: Length) { + [paddingBottomProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -178,13 +175,13 @@ export class Button extends ButtonBase { }; } - [paddingLeftProperty.getDefault](): Length { + [paddingLeftProperty.getDefault](): LengthType { return { value: this.nativeViewProtected.contentEdgeInsets.left, unit: 'px', }; } - [paddingLeftProperty.setNative](value: Length) { + [paddingLeftProperty.setNative](value: LengthType) { const inset = this.nativeViewProtected.contentEdgeInsets; const left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth); this.nativeViewProtected.contentEdgeInsets = { @@ -195,7 +192,7 @@ export class Button extends ButtonBase { }; } - [textAlignmentProperty.setNative](value: TextAlignment) { + [textAlignmentProperty.setNative](value: Enums.TextAlignmentType) { switch (value) { case 'left': this.nativeViewProtected.titleLabel.textAlignment = NSTextAlignment.Left; @@ -213,7 +210,7 @@ export class Button extends ButtonBase { } } - [whiteSpaceProperty.setNative](value: WhiteSpace) { + [whiteSpaceProperty.setNative](value: Enums.WhiteSpaceType) { const nativeView = this.nativeViewProtected.titleLabel; switch (value) { case 'normal': diff --git a/packages/core/ui/core/view-base/index.d.ts b/packages/core/ui/core/view-base/index.d.ts index 1c3f49232..ce66e52f9 100644 --- a/packages/core/ui/core/view-base/index.d.ts +++ b/packages/core/ui/core/view-base/index.d.ts @@ -245,10 +245,10 @@ export abstract class ViewBase extends Observable { public bindingContext: any; /** - * Gets or sets if the view is reusable. - * Reusable views are not automatically destroyed when removed from the View tree. - */ - public reusable: boolean; + * Gets or sets if the view is reusable. + * Reusable views are not automatically destroyed when removed from the View tree. + */ + public reusable: boolean; /** * Gets the name of the constructor function for this instance. E.g. for a Button class this will return "Button". @@ -385,11 +385,11 @@ export abstract class ViewBase extends Observable { _tearDownUI(force?: boolean): void; /** - * Tears down the UI of a reusable node by making it no longer reusable. - * @see _tearDownUI - * @param forceDestroyChildren Force destroy the children (even if they are reusable) - */ - destroyNode(forceDestroyChildren?: boolean): void; + * Tears down the UI of a reusable node by making it no longer reusable. + * @see _tearDownUI + * @param forceDestroyChildren Force destroy the children (even if they are reusable) + */ + destroyNode(forceDestroyChildren?: boolean): void; /** * Creates a native view. diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index bbfd57345..9c599dff4 100644 --- a/packages/core/ui/core/view-base/index.ts +++ b/packages/core/ui/core/view-base/index.ts @@ -10,7 +10,7 @@ import { Binding, BindingOptions } from '../bindable'; import { Trace } from '../../../trace'; import { Observable, PropertyChangeData, WrappedValue } from '../../../data/observable'; import { Style } from '../../styling/style'; -import { Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../../styling/style-properties'; +import { Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, LengthType } from '../../styling/style-properties'; // TODO: Remove this import! import { getClass } from '../../../utils/types'; @@ -284,8 +284,8 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition public _automaticallyAdjustsScrollViewInsets: boolean; // Dynamic properties. - left: Length; - top: Length; + left: LengthType; + top: LengthType; effectiveLeft: number; effectiveTop: number; dock: 'left' | 'top' | 'right' | 'bottom'; diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts index 5302732b1..57cae46f2 100644 --- a/packages/core/ui/core/view/index.android.ts +++ b/packages/core/ui/core/view/index.android.ts @@ -10,37 +10,8 @@ import { Trace } from '../../../trace'; import { ShowModalOptions } from '../view-base'; import { EventData } from '../../../data/observable'; -import { - perspectiveProperty, - Length, - PercentLength, - Visibility, - HorizontalAlignment, - VerticalAlignment, - visibilityProperty, - opacityProperty, - horizontalAlignmentProperty, - verticalAlignmentProperty, - minWidthProperty, - minHeightProperty, - widthProperty, - heightProperty, - marginLeftProperty, - marginTopProperty, - marginRightProperty, - marginBottomProperty, - rotateProperty, - rotateXProperty, - rotateYProperty, - scaleXProperty, - scaleYProperty, - translateXProperty, - translateYProperty, - zIndexProperty, - backgroundInternalProperty, - androidElevationProperty, - androidDynamicElevationOffsetProperty, -} from '../../styling/style-properties'; +import { perspectiveProperty, visibilityProperty, opacityProperty, horizontalAlignmentProperty, verticalAlignmentProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty, marginLeftProperty, marginTopProperty, marginRightProperty, marginBottomProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, androidElevationProperty, androidDynamicElevationOffsetProperty, LengthType, PercentLengthType } from '../../styling/style-properties'; +import { Enums } from '../../enums'; import { Background, ad as androidBackground } from '../../styling/background'; import { profile } from '../../../profiling'; @@ -759,7 +730,7 @@ export class View extends ViewCommon { this.nativeViewProtected.setFocusable(value); } - [visibilityProperty.getDefault](): Visibility { + [visibilityProperty.getDefault](): Enums.VisibilityType { const nativeVisibility = this.nativeViewProtected.getVisibility(); switch (nativeVisibility) { case android.view.View.VISIBLE: @@ -772,7 +743,7 @@ export class View extends ViewCommon { throw new Error(`Unsupported android.view.View visibility: ${nativeVisibility}. Currently supported values are android.view.View.VISIBLE, android.view.View.INVISIBLE, android.view.View.GONE.`); } } - [visibilityProperty.setNative](value: Visibility) { + [visibilityProperty.setNative](value: Enums.VisibilityType) { switch (value) { case 'visible': this.nativeViewProtected.setVisibility(android.view.View.VISIBLE); @@ -946,10 +917,10 @@ export class View extends ViewCommon { nativeView.setStateListAnimator(stateListAnimator); } - [horizontalAlignmentProperty.getDefault](): HorizontalAlignment { - return org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeViewProtected); + [horizontalAlignmentProperty.getDefault](): Enums.HorizontalAlignmentType { + return org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeViewProtected); } - [horizontalAlignmentProperty.setNative](value: HorizontalAlignment) { + [horizontalAlignmentProperty.setNative](value: Enums.HorizontalAlignmentType) { const nativeView = this.nativeViewProtected; const lp: any = nativeView.getLayoutParams() || new org.nativescript.widgets.CommonLayoutParams(); // Set only if params gravity exists. @@ -984,10 +955,10 @@ export class View extends ViewCommon { } } - [verticalAlignmentProperty.getDefault](): VerticalAlignment { - return org.nativescript.widgets.ViewHelper.getVerticalAlignment(this.nativeViewProtected); + [verticalAlignmentProperty.getDefault](): Enums.VerticalAlignmentType { + return org.nativescript.widgets.ViewHelper.getVerticalAlignment(this.nativeViewProtected); } - [verticalAlignmentProperty.setNative](value: VerticalAlignment) { + [verticalAlignmentProperty.setNative](value: Enums.VerticalAlignmentType) { const nativeView = this.nativeViewProtected; const lp: any = nativeView.getLayoutParams() || new org.nativescript.widgets.CommonLayoutParams(); // Set only if params gravity exists. @@ -1083,7 +1054,7 @@ export class View extends ViewCommon { this._redrawNativeBackground(value); } - [minWidthProperty.setNative](value: Length) { + [minWidthProperty.setNative](value: LengthType) { if (this.parent instanceof CustomLayoutView && this.parent.nativeViewProtected) { this.parent._setChildMinWidthNative(this, value); } else { @@ -1091,7 +1062,7 @@ export class View extends ViewCommon { } } - [minHeightProperty.setNative](value: Length) { + [minHeightProperty.setNative](value: LengthType) { if (this.parent instanceof CustomLayoutView && this.parent.nativeViewProtected) { this.parent._setChildMinHeightNative(this, value); } else { @@ -1180,11 +1151,11 @@ export class CustomLayoutView extends ContainerView implements CustomLayoutViewD // noop } - public _setChildMinWidthNative(child: View, value: Length): void { + public _setChildMinWidthNative(child: View, value: LengthType): void { child._setMinWidthNative(value); } - public _setChildMinHeightNative(child: View, value: Length): void { + public _setChildMinHeightNative(child: View, value: LengthType): void { child._setMinHeightNative(value); } @@ -1221,7 +1192,7 @@ function createNativePercentLengthProperty(options: NativePercentLengthPropertyO const { getter, setter, auto = 0 } = options; let setPixels, getPixels, setPercent; if (getter) { - View.prototype[getter] = function (this: View): PercentLength { + View.prototype[getter] = function (this: View): PercentLengthType { if (options) { setPixels = options.setPixels; getPixels = options.getPixels; @@ -1238,7 +1209,7 @@ function createNativePercentLengthProperty(options: NativePercentLengthPropertyO }; } if (setter) { - View.prototype[setter] = function (this: View, length: PercentLength) { + View.prototype[setter] = function (this: View, length: PercentLengthType) { if (options) { setPixels = options.setPixels; getPixels = options.getPixels; diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts index 3809c9c46..a416c89e5 100644 --- a/packages/core/ui/core/view/index.d.ts +++ b/packages/core/ui/core/view/index.d.ts @@ -3,11 +3,12 @@ import { Property, InheritedProperty } from '../properties'; import { EventData } from '../../../data/observable'; import { Color } from '../../../color'; import { Animation, AnimationDefinition, AnimationPromise } from '../../animation'; -import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from '../../styling/style-properties'; +import { LengthType, PercentLengthType } from '../../styling/style-properties'; import { GestureTypes, GesturesObserver } from '../../gestures'; import { LinearGradient } from '../../styling/gradient'; import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait, AndroidAccessibilityEvent, IOSPostAccessibilityNotificationType } from '../../../accessibility/accessibility-types'; -import { BoxShadow } from '../../styling/box-shadow'; +import { Enums } from '../../enums'; +import { CSSShadow } from '../../styling/css-shadow'; // helpers (these are okay re-exported here) export * from './view-helper'; @@ -192,52 +193,52 @@ export abstract class View extends ViewBase { /** * Gets or sets the border width of the view. */ - borderWidth: string | Length; + borderWidth: string | LengthType; /** * Gets or sets the top border width of the view. */ - borderTopWidth: Length; + borderTopWidth: LengthType; /** * Gets or sets the right border width of the view. */ - borderRightWidth: Length; + borderRightWidth: LengthType; /** * Gets or sets the bottom border width of the view. */ - borderBottomWidth: Length; + borderBottomWidth: LengthType; /** * Gets or sets the left border width of the view. */ - borderLeftWidth: Length; + borderLeftWidth: LengthType; /** * Gets or sets the border radius of the view. */ - borderRadius: string | Length; + borderRadius: string | LengthType; /** * Gets or sets the top left border radius of the view. */ - borderTopLeftRadius: Length; + borderTopLeftRadius: LengthType; /** * Gets or sets the top right border radius of the view. */ - borderTopRightRadius: Length; + borderTopRightRadius: LengthType; /** * Gets or sets the bottom right border radius of the view. */ - borderBottomRightRadius: Length; + borderBottomRightRadius: LengthType; /** * Gets or sets the bottom left border radius of the view. */ - borderBottomLeftRadius: Length; + borderBottomLeftRadius: LengthType; /** * Gets or sets the color of the view. @@ -334,67 +335,67 @@ export abstract class View extends ViewBase { /** * Gets or sets the box shadow of the view. */ - boxShadow: string | BoxShadow; + boxShadow: string | CSSShadow; /** * Gets or sets the minimum width the view may grow to. */ - minWidth: Length; + minWidth: LengthType; /** * Gets or sets the minimum height the view may grow to. */ - minHeight: Length; + minHeight: LengthType; /** * Gets or sets the desired width of the view. */ - width: PercentLength; + width: PercentLengthType; /** * Gets or sets the desired height of the view. */ - height: PercentLength; + height: PercentLengthType; /** * Gets or sets margin style property. */ - margin: string | PercentLength; + margin: string | PercentLengthType; /** * Specifies extra space on the left side of this view. */ - marginLeft: PercentLength; + marginLeft: PercentLengthType; /** * Specifies extra space on the top side of this view. */ - marginTop: PercentLength; + marginTop: PercentLengthType; /** * Specifies extra space on the right side of this view. */ - marginRight: PercentLength; + marginRight: PercentLengthType; /** * Specifies extra space on the bottom side of this view. */ - marginBottom: PercentLength; + marginBottom: PercentLengthType; /** * Gets or sets the alignment of this view within its parent along the Horizontal axis. */ - horizontalAlignment: HorizontalAlignment; + horizontalAlignment: Enums.HorizontalAlignmentType; /** * Gets or sets the alignment of this view within its parent along the Vertical axis. */ - verticalAlignment: VerticalAlignment; + verticalAlignment: Enums.VerticalAlignmentType; /** * Gets or sets the visibility of the view. */ - visibility: Visibility; + visibility: Enums.VisibilityType; /** * Gets or sets the opacity style property. @@ -837,11 +838,11 @@ export abstract class View extends ViewBase { /** * @private */ - _setMinWidthNative(value: Length): void; + _setMinWidthNative(value: LengthType): void; /** * @private */ - _setMinHeightNative(value: Length): void; + _setMinHeightNative(value: LengthType): void; /** * @private */ @@ -917,11 +918,11 @@ export class CustomLayoutView extends ContainerView { /** * @private */ - _setChildMinWidthNative(child: View, value: Length): void; + _setChildMinWidthNative(child: View, value: LengthType): void; /** * @private */ - _setChildMinHeightNative(child: View, value: Length): void; + _setChildMinHeightNative(child: View, value: LengthType): void; //@endprivate } diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts index 60165395f..7676d8ac3 100644 --- a/packages/core/ui/core/view/index.ios.ts +++ b/packages/core/ui/core/view/index.ios.ts @@ -8,10 +8,11 @@ import { Trace } from '../../../trace'; import { layout, iOSNativeHelper } from '../../../utils'; import { IOSHelper } from './view-helper'; import { ios as iosBackground, Background } from '../../styling/background'; -import { perspectiveProperty, Visibility, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, clipPathProperty } from '../../styling/style-properties'; +import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, clipPathProperty } from '../../styling/style-properties'; import { profile } from '../../../profiling'; import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityLiveRegionProperty, accessibilityMediaSessionProperty, accessibilityRoleProperty, accessibilityStateProperty, accessibilityTraitsProperty, accessibilityValueProperty } from '../../../accessibility/accessibility-properties'; import { setupAccessibleView, IOSPostAccessibilityNotificationType, isAccessibilityServiceEnabled, updateAccessibilityProperties } from '../../../accessibility'; +import { Enums } from '../../enums'; export * from './view-common'; // helpers (these are okay re-exported here) @@ -627,20 +628,20 @@ export class View extends ViewCommon implements ViewDefinition { this.nativeViewProtected.userInteractionEnabled = value; } - [visibilityProperty.getDefault](): Visibility { - return this.nativeViewProtected.hidden ? Visibility.COLLAPSE : Visibility.VISIBLE; + [visibilityProperty.getDefault](): Enums.VisibilityType { + return this.nativeViewProtected.hidden ? Enums.Visibility.collapse : Enums.Visibility.visible; } - [visibilityProperty.setNative](value: Visibility) { + [visibilityProperty.setNative](value: Enums.VisibilityType) { switch (value) { - case Visibility.VISIBLE: + case Enums.Visibility.visible: this.nativeViewProtected.hidden = false; break; - case Visibility.HIDDEN: - case Visibility.COLLAPSE: + case Enums.Visibility.hidden: + case Enums.Visibility.collapse: this.nativeViewProtected.hidden = true; break; default: - throw new Error(`Invalid visibility value: ${value}. Valid values are: "${Visibility.VISIBLE}", "${Visibility.HIDDEN}", "${Visibility.COLLAPSE}".`); + throw new Error(`Invalid visibility value: ${value}. Valid values are: "${Enums.Visibility.visible}", "${Enums.Visibility.hidden}", "${Enums.Visibility.collapse}".`); } } diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts index 9e8c13330..f755ff880 100644 --- a/packages/core/ui/core/view/view-common.ts +++ b/packages/core/ui/core/view/view-common.ts @@ -8,9 +8,10 @@ import { Color } from '../../../color'; import { Property, InheritedProperty } from '../properties'; import { EventData } from '../../../data/observable'; import { Trace } from '../../../trace'; +import { Enums } from '../../enums'; import { ViewHelper } from './view-helper'; -import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength, BackgroundRepeat } from '../../styling/style-properties'; +import { PercentLength, LengthType, PercentLengthType } from '../../styling/style-properties'; import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData, fromString as gestureFromString } from '../../gestures'; @@ -19,7 +20,6 @@ import { Builder } from '../../builder'; import { sanitizeModuleName } from '../../builder/module-name-sanitizer'; import { StyleScope } from '../../styling/style-scope'; import { LinearGradient } from '../../styling/linear-gradient'; -import { TextTransform } from '../../text-base'; import * as am from '../../animation'; import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait, AndroidAccessibilityEvent, IOSPostAccessibilityNotificationType } from '../../../accessibility/accessibility-types'; @@ -92,8 +92,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { _currentWidthMeasureSpec: number; _currentHeightMeasureSpec: number; - _setMinWidthNative: (value: Length) => void; - _setMinHeightNative: (value: Length) => void; + _setMinWidthNative: (value: LengthType) => void; + _setMinHeightNative: (value: LengthType) => void; public _gestureObservers = {}; @@ -472,73 +472,73 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { this.style.borderLeftColor = value; } - get borderWidth(): string | Length { + get borderWidth(): string | LengthType { return this.style.borderWidth; } - set borderWidth(value: string | Length) { + set borderWidth(value: string | LengthType) { this.style.borderWidth = value; } - get borderTopWidth(): Length { + get borderTopWidth(): LengthType { return this.style.borderTopWidth; } - set borderTopWidth(value: Length) { + set borderTopWidth(value: LengthType) { this.style.borderTopWidth = value; } - get borderRightWidth(): Length { + get borderRightWidth(): LengthType { return this.style.borderRightWidth; } - set borderRightWidth(value: Length) { + set borderRightWidth(value: LengthType) { this.style.borderRightWidth = value; } - get borderBottomWidth(): Length { + get borderBottomWidth(): LengthType { return this.style.borderBottomWidth; } - set borderBottomWidth(value: Length) { + set borderBottomWidth(value: LengthType) { this.style.borderBottomWidth = value; } - get borderLeftWidth(): Length { + get borderLeftWidth(): LengthType { return this.style.borderLeftWidth; } - set borderLeftWidth(value: Length) { + set borderLeftWidth(value: LengthType) { this.style.borderLeftWidth = value; } - get borderRadius(): string | Length { + get borderRadius(): string | LengthType { return this.style.borderRadius; } - set borderRadius(value: string | Length) { + set borderRadius(value: string | LengthType) { this.style.borderRadius = value; } - get borderTopLeftRadius(): Length { + get borderTopLeftRadius(): LengthType { return this.style.borderTopLeftRadius; } - set borderTopLeftRadius(value: Length) { + set borderTopLeftRadius(value: LengthType) { this.style.borderTopLeftRadius = value; } - get borderTopRightRadius(): Length { + get borderTopRightRadius(): LengthType { return this.style.borderTopRightRadius; } - set borderTopRightRadius(value: Length) { + set borderTopRightRadius(value: LengthType) { this.style.borderTopRightRadius = value; } - get borderBottomRightRadius(): Length { + get borderBottomRightRadius(): LengthType { return this.style.borderBottomRightRadius; } - set borderBottomRightRadius(value: Length) { + set borderBottomRightRadius(value: LengthType) { this.style.borderBottomRightRadius = value; } - get borderBottomLeftRadius(): Length { + get borderBottomLeftRadius(): LengthType { return this.style.borderBottomLeftRadius; } - set borderBottomLeftRadius(value: Length) { + set borderBottomLeftRadius(value: LengthType) { this.style.borderBottomLeftRadius = value; } @@ -584,10 +584,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { this.style.backgroundPosition = value; } - get backgroundRepeat(): BackgroundRepeat { + get backgroundRepeat(): Enums.BackgroundRepeatType { return this.style.backgroundRepeat; } - set backgroundRepeat(value: BackgroundRepeat) { + set backgroundRepeat(value: Enums.BackgroundRepeatType) { this.style.backgroundRepeat = value; } @@ -598,87 +598,88 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { this.style.boxShadow = value; } - get minWidth(): Length { + get minWidth(): LengthType { return this.style.minWidth; } - set minWidth(value: Length) { + + set minWidth(value: LengthType) { this.style.minWidth = value; } - get minHeight(): Length { + get minHeight(): LengthType { return this.style.minHeight; } - set minHeight(value: Length) { + set minHeight(value: LengthType) { this.style.minHeight = value; } - get width(): PercentLength { + get width(): PercentLengthType { return this.style.width; } - set width(value: PercentLength) { + set width(value: PercentLengthType) { this.style.width = value; } - get height(): PercentLength { + get height(): PercentLengthType { return this.style.height; } - set height(value: PercentLength) { + set height(value: PercentLengthType) { this.style.height = value; } - get margin(): string | PercentLength { + get margin(): string | PercentLengthType { return this.style.margin; } - set margin(value: string | PercentLength) { + set margin(value: string | PercentLengthType) { this.style.margin = value; } - get marginLeft(): PercentLength { + get marginLeft(): PercentLengthType { return this.style.marginLeft; } - set marginLeft(value: PercentLength) { + set marginLeft(value: PercentLengthType) { this.style.marginLeft = value; } - get marginTop(): PercentLength { + get marginTop(): PercentLengthType { return this.style.marginTop; } - set marginTop(value: PercentLength) { + set marginTop(value: PercentLengthType) { this.style.marginTop = value; } - get marginRight(): PercentLength { + get marginRight(): PercentLengthType { return this.style.marginRight; } - set marginRight(value: PercentLength) { + set marginRight(value: PercentLengthType) { this.style.marginRight = value; } - get marginBottom(): PercentLength { + get marginBottom(): PercentLengthType { return this.style.marginBottom; } - set marginBottom(value: PercentLength) { + set marginBottom(value: PercentLengthType) { this.style.marginBottom = value; } - get horizontalAlignment(): HorizontalAlignment { + get horizontalAlignment(): Enums.HorizontalAlignmentType { return this.style.horizontalAlignment; } - set horizontalAlignment(value: HorizontalAlignment) { + set horizontalAlignment(value: Enums.HorizontalAlignmentType) { this.style.horizontalAlignment = value; } - get verticalAlignment(): VerticalAlignment { + get verticalAlignment(): Enums.VerticalAlignmentType { return this.style.verticalAlignment; } - set verticalAlignment(value: VerticalAlignment) { + set verticalAlignment(value: Enums.VerticalAlignmentType) { this.style.verticalAlignment = value; } - get visibility(): Visibility { + get visibility(): Enums.VisibilityType { return this.style.visibility; } - set visibility(value: Visibility) { + set visibility(value: Enums.VisibilityType) { this.style.visibility = value; } @@ -717,10 +718,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { this.style.perspective = value; } - get textTransform(): TextTransform { + get textTransform(): Enums.TextTransformType { return this.style.textTransform; } - set textTransform(value: TextTransform) { + set textTransform(value: Enums.TextTransformType) { this.style.textTransform = value; } diff --git a/packages/core/ui/core/view/view-helper/view-helper-common.ts b/packages/core/ui/core/view/view-helper/view-helper-common.ts index 5b328305c..7fa219398 100644 --- a/packages/core/ui/core/view/view-helper/view-helper-common.ts +++ b/packages/core/ui/core/view/view-helper/view-helper-common.ts @@ -1,6 +1,6 @@ // Types import { View as ViewDefinition } from '..'; -import { HorizontalAlignment as HorizontalAlignmentDefinition, VerticalAlignment as VerticalAlignmentDefinition } from '../../../styling/style-properties'; +import { Enums } from '../../../enums'; // Requires import { layout } from '../../../../utils'; @@ -58,7 +58,7 @@ export class ViewHelper { const effectiveMarginTop = child.effectiveMarginTop; const effectiveMarginBottom = child.effectiveMarginBottom; - let vAlignment: VerticalAlignmentDefinition; + let vAlignment: Enums.VerticalAlignmentType; if (child.effectiveHeight >= 0 && childStyle.verticalAlignment === 'stretch') { vAlignment = 'middle'; } else { @@ -88,7 +88,7 @@ export class ViewHelper { const effectiveMarginLeft = child.effectiveMarginLeft; const effectiveMarginRight = child.effectiveMarginRight; - let hAlignment: HorizontalAlignmentDefinition; + let hAlignment: Enums.HorizontalAlignmentType; if (child.effectiveWidth >= 0 && childStyle.horizontalAlignment === 'stretch') { hAlignment = 'center'; } else { diff --git a/packages/core/ui/editable-text-base/editable-text-base-common.ts b/packages/core/ui/editable-text-base/editable-text-base-common.ts index 004eff613..2e73a3489 100644 --- a/packages/core/ui/editable-text-base/editable-text-base-common.ts +++ b/packages/core/ui/editable-text-base/editable-text-base-common.ts @@ -1,21 +1,21 @@ -import { EditableTextBase as EditableTextBaseDefinition, ReturnKeyType, UpdateTextTrigger, AutocapitalizationType } from '.'; +import { EditableTextBase as EditableTextBaseDefinition } from '.'; import { TextBase } from '../text-base'; import { Property, CssProperty, makeValidator, makeParser } from '../core/properties'; import { PseudoClassHandler } from '../core/view'; import { booleanConverter } from '../core/view-base'; import { Style } from '../styling/style'; import { Color } from '../../color'; -import { KeyboardType } from '../enums'; +import { Enums } from '../enums'; export abstract class EditableTextBase extends TextBase implements EditableTextBaseDefinition { public static blurEvent = 'blur'; public static focusEvent = 'focus'; public static textChangeEvent = 'textChange'; - public keyboardType: KeyboardType; - public returnKeyType: ReturnKeyType; - public updateTextTrigger: UpdateTextTrigger; - public autocapitalizationType: AutocapitalizationType; + public keyboardType: Enums.KeyboardInputType; + public returnKeyType: Enums.ReturnKeyButtonType; + public updateTextTrigger: Enums.UpdateTextTriggerType; + public autocapitalizationType: Enums.AutocapitalizationInputType; public editable: boolean; public autocorrect: boolean; public hint: string; @@ -48,14 +48,14 @@ export const placeholderColorProperty = new CssProperty({ }); placeholderColorProperty.register(Style); -const keyboardTypeConverter = makeParser(makeValidator('datetime', 'phone', 'number', 'url', 'email', 'integer'), true); +const keyboardTypeConverter = makeParser(makeValidator(Enums.KeyboardType.datetime, Enums.KeyboardType.phone, Enums.KeyboardType.number, Enums.KeyboardType.url, Enums.KeyboardType.email, Enums.KeyboardType.integer), true); -export const keyboardTypeProperty = new Property({ name: 'keyboardType', valueConverter: keyboardTypeConverter }); +export const keyboardTypeProperty = new Property({ name: 'keyboardType', valueConverter: keyboardTypeConverter }); keyboardTypeProperty.register(EditableTextBase); -const returnKeyTypeConverter = makeParser(makeValidator('done', 'next', 'go', 'search', 'send'), true); +const returnKeyTypeConverter = makeParser(makeValidator(Enums.ReturnKeyType.done, Enums.ReturnKeyType.next, Enums.ReturnKeyType.go, Enums.ReturnKeyType.search, Enums.ReturnKeyType.send), true); -export const returnKeyTypeProperty = new Property({ name: 'returnKeyType', valueConverter: returnKeyTypeConverter }); +export const returnKeyTypeProperty = new Property({ name: 'returnKeyType', valueConverter: returnKeyTypeConverter }); returnKeyTypeProperty.register(EditableTextBase); export const editableProperty = new Property({ @@ -65,14 +65,14 @@ export const editableProperty = new Property({ }); editableProperty.register(EditableTextBase); -export const updateTextTriggerProperty = new Property({ name: 'updateTextTrigger', defaultValue: 'textChanged' }); +export const updateTextTriggerProperty = new Property({ name: 'updateTextTrigger', defaultValue: Enums.UpdateTextTrigger.textChanged }); updateTextTriggerProperty.register(EditableTextBase); -const autocapitalizationTypeConverter = makeParser(makeValidator('none', 'words', 'sentences', 'allcharacters'), true); +const autocapitalizationTypeConverter = makeParser(makeValidator(Enums.AutocapitalizationType.none, Enums.AutocapitalizationType.words, Enums.AutocapitalizationType.sentences, Enums.AutocapitalizationType.allCharacters), true); -export const autocapitalizationTypeProperty = new Property({ +export const autocapitalizationTypeProperty = new Property({ name: 'autocapitalizationType', - defaultValue: 'sentences', + defaultValue: Enums.AutocapitalizationType.sentences, valueConverter: autocapitalizationTypeConverter, }); autocapitalizationTypeProperty.register(EditableTextBase); diff --git a/packages/core/ui/editable-text-base/index.d.ts b/packages/core/ui/editable-text-base/index.d.ts index b144ab044..c8d6b1069 100644 --- a/packages/core/ui/editable-text-base/index.d.ts +++ b/packages/core/ui/editable-text-base/index.d.ts @@ -3,7 +3,7 @@ import { Color } from '../../color'; import { FormattedString } from '../text-base/formatted-string'; import { Style } from '../styling/style'; import { Property, CssProperty } from '../core/properties'; -import { KeyboardType } from '../enums'; +import { Enums } from '../enums'; /** * Represents the base class for all editable text views. @@ -16,22 +16,22 @@ export class EditableTextBase extends TextBase { /** * Gets or sets the soft keyboard type. */ - keyboardType: KeyboardType; + keyboardType: Enums.KeyboardInputType; /** * Gets or sets the soft keyboard return key flavor. */ - returnKeyType: ReturnKeyType; + returnKeyType: Enums.ReturnKeyButtonType; /** * Gets or sets a value indicating when the text property will be updated. */ - updateTextTrigger: UpdateTextTrigger; + updateTextTrigger: Enums.UpdateTextTriggerType; /** * Gets or sets the autocapitalization type. */ - autocapitalizationType: AutocapitalizationType; + autocapitalizationType: Enums.AutocapitalizationType; /** * Gets or sets whether the instance is editable. @@ -71,15 +71,11 @@ export class EditableTextBase extends TextBase { public setSelection(start: number, stop?: number); } -export type ReturnKeyType = 'done' | 'next' | 'go' | 'search' | 'send'; -export type UpdateTextTrigger = 'focusLost' | 'textChanged'; -export type AutocapitalizationType = 'none' | 'words' | 'sentences' | 'allcharacters'; - -export const keyboardTypeProperty: Property; -export const returnKeyTypeProperty: Property; +export const keyboardTypeProperty: Property; +export const returnKeyTypeProperty: Property; export const editableProperty: Property; -export const updateTextTriggerProperty: Property; -export const autocapitalizationTypeProperty: Property; +export const updateTextTriggerProperty: Property; +export const autocapitalizationTypeProperty: Property; export const autocorrectProperty: Property; export const hintProperty: Property; export const placeholderColorProperty: CssProperty; diff --git a/packages/core/ui/enums/index.d.ts b/packages/core/ui/enums/index.d.ts index a35618162..8c8671fac 100644 --- a/packages/core/ui/enums/index.d.ts +++ b/packages/core/ui/enums/index.d.ts @@ -1,703 +1,731 @@ import { CubicBezierAnimationCurve } from '../animation'; -import { ReturnKeyType as BaseReturnKeyType, UpdateTextTrigger as BaseUpdateTrigger, AutocapitalizationType as BaseAutocapitalizationType } from '../editable-text-base'; +import { FontStyleType, FontWeightType } from '../styling/font-common'; -import { WhiteSpace as BaseWhiteSpace, TextAlignment as BaseTextAlignment, TextTransform as BaseTextTransform, TextDecoration as BaseTextDecoration } from '../text-base'; - -import { Orientation as BaseOrientation } from '../layouts/stack-layout'; - -import { Dock as BaseDock } from '../layouts/dock-layout'; - -import { BackgroundRepeat as BaseBackgroundRepeat, Visibility as BaseVisibility, HorizontalAlignment as BaseHorizontalAlignment, VerticalAlignment as BaseVerticalAlignment } from '../styling/style-properties'; - -import { Stretch as BaseStretch } from '../image'; - -import { FontStyle as BaseFontStyle, FontWeight as BaseFontWeight } from '../styling/font-common'; - -export type KeyboardType = 'datetime' | 'phone' | 'number' | 'url' | 'email' | 'integer'; -/** - * Represents a soft keyboard flavor. - */ -export module KeyboardType { +export namespace Enums { + + export type KeyboardInputType = 'datetime' | 'phone' | 'number' | 'url' | 'email' | 'integer'; /** - * Android: [TYPE_CLASS_DATETIME](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_DATETIME) | [TYPE_DATETIME_VARIATION_NORMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_DATETIME_VARIATION_NORMAL) - * iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + * Represents a soft keyboard flavor. */ - export const datetime: KeyboardType; + export module KeyboardType { + /** + * Android: [TYPE_CLASS_DATETIME](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_DATETIME) | [TYPE_DATETIME_VARIATION_NORMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_DATETIME_VARIATION_NORMAL) + * iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + */ + export const datetime: KeyboardInputType; + /** + * Android: [TYPE_CLASS_PHONE](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_PHONE) + * iOS: [UIKeyboardTypePhonePad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + */ + export const phone: KeyboardInputType; + + /** + * Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER) | [TYPE_NUMBER_VARIATION_NORMAL](http://developer.android.com/intl/es/reference/android/text/InputType.html#TYPE_NUMBER_VARIATION_NORMAL) | [TYPE_NUMBER_FLAG_SIGNED](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_SIGNED) | [TYPE_NUMBER_FLAG_DECIMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_DECIMAL) + * iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + */ + export const number: KeyboardInputType; + + /** + * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_URI](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_URI) + * iOS: [UIKeyboardTypeURL](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + */ + export const url: KeyboardInputType; + + /** + * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_EMAIL_ADDRESS](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_EMAIL_ADDRESS) + * iOS: [UIKeyboardTypeEmailAddress](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + */ + export const email: KeyboardInputType; + + /** + * Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER | [TYPE_NUMBER_VARIATION_PASSWORD](android type_text_variation_password)) + * iOS: [UIKeyboardTypeNumberPad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + */ + export const integer: KeyboardInputType; + } + + export type ReturnKeyButtonType = 'done' | 'next' | 'go' | 'search' | 'send'; /** - * Android: [TYPE_CLASS_PHONE](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_PHONE) - * iOS: [UIKeyboardTypePhonePad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + * Represents the flavor of the return key on the soft keyboard. */ - export const phone: KeyboardType; + export module ReturnKeyType { + /** + * Android: [IME_ACTION_DONE](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_DONE) + * iOS: [UIReturnKeyDone](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) + */ + export const done: ReturnKeyButtonType; + + /** + * Android: [IME_ACTION_NEXT](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_NEXT) + * iOS: [UIReturnKeyNext](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) + */ + export const next: ReturnKeyButtonType; + + /** + * Android: [IME_ACTION_GO](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_GO) + * iOS: [UIReturnKeyGo](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) + */ + export const go: ReturnKeyButtonType; + + /** + * Android: [IME_ACTION_SEARCH](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEARCH) + * iOS: [UIReturnKeySearch](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) + */ + export const search: ReturnKeyButtonType; + + /** + * Android: [IME_ACTION_SEND](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEND) + * iOS: [UIReturnKeySend](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) + */ + export const send: string; + } + + export type TextAlignmentType = 'initial' | 'left' | 'center' | 'right'; + /** + * Represents a text-align enumeration. + */ + export module TextAlignment { + /** + * Represents left text-align. + */ + export const left: TextAlignmentType; + + /** + * Represents center text-align. + */ + export const center: TextAlignmentType; + + /** + * Represents right text-align. + */ + export const right: TextAlignmentType; + } + + export type OrientationType = 'horizontal' | 'vertical'; + /** + * Orientation indicates a direction of a layout that can exist in a horizontal or vertical state. + */ + export module Orientation { + /** + * Layout should be horizontally oriented. + */ + export const horizontal: OrientationType; + /** + * Layout should be vertically oriented. + */ + export const vertical: OrientationType; + } + + export type DeviceOrientationType = 'portrait' | 'landscape' | 'unknown'; + /** + * Orientation of a device. + */ + export module DeviceOrientation { + /** + * Portrait orientation. + */ + export const portrait: string; + /** + * Landscape orientation. + */ + export const landscape: string; + /** + * Orientation cannot be determined. + */ + export const unknown: string; + } + + export type HorizontalAlignmentType = 'left' | 'center' | 'right' | 'stretch'; + /** + * HorizontalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element. + */ + export module HorizontalAlignment { + /** + * An element should be left aligned. + */ + export const left: HorizontalAlignmentType; + + /** + * An element should be center aligned. + */ + export const center: HorizontalAlignmentType; + + /** + * An element should be right aligned. + */ + export const right: HorizontalAlignmentType; + + /** + * An element should be stretched to fill all the available size. + */ + export const stretch: HorizontalAlignmentType; + } + + export type VerticalAlignmentType = 'top' | 'middle' | 'bottom' | 'stretch'; + export type VerticalAlignmentTextType = VerticalAlignmentType & 'text-top' | 'text-bottom' | 'super' | 'sub' | 'baseline'; + /** + * VerticalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element. + */ + export module VerticalAlignment { + /** + * An element should be top aligned. + */ + export const top: VerticalAlignmentType; + + /** + * An element should be center aligned. + */ + export const center: VerticalAlignmentType; + + /** + * Same as center. An element should be aligned in the middle. + */ + export const middle: VerticalAlignmentType; + + /** + * An element should be bottom aligned. + */ + export const bottom: VerticalAlignmentType; + + /** + * An element should be stretched to fill all the available size. + */ + export const stretch: VerticalAlignmentType; + } + + export type ImageStretchType = 'none' | 'aspectFill' | 'aspectFit' | 'fill'; + /** + * Describes how content is resized to fill its allocated space. + */ + export module ImageStretch { + /** + * The image preserves its original size. + */ + export const none: ImageStretchType; + + /** + * The image is resized to fill in the destination dimensions while it preserves its native aspect ratio. + * If the aspect ratio of the destination rectangle differs from the image, the image is clipped to fill + * in the destination. + */ + export const aspectFill: ImageStretchType; + + /** + * The image is resized to fit the destination dimensions while it preserves + * its native aspect ratio. + */ + export const aspectFit: ImageStretchType; + + /** + * The image is resized to fill the destination dimensions. The aspect ratio is not preserved. + */ + export const fill: ImageStretchType; + } + + export type VisibilityType = 'visible' | 'hidden' | 'collapse' | 'collapsed'; + /** + * Represents the visibility mode of a view. + */ + export module Visibility { + /** + * The view is visible. + */ + export const visible: VisibilityType; + + /** + * The view is not visible and won't take place in the layout. + */ + export const collapse: VisibilityType; + + /** + * @deprecated Use collapse instead + */ + export const collapsed: VisibilityType; + + /** + * The view is not visible but will take place in the layout. + */ + export const hidden: VisibilityType; + } /** - * Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER) | [TYPE_NUMBER_VARIATION_NORMAL](http://developer.android.com/intl/es/reference/android/text/InputType.html#TYPE_NUMBER_VARIATION_NORMAL) | [TYPE_NUMBER_FLAG_SIGNED](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_SIGNED) | [TYPE_NUMBER_FLAG_DECIMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_DECIMAL) - * iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + * A flag enum that represents common font attributes. */ - export const number: KeyboardType; + export module FontAttributes { + /** + * Denotes that text should be drawn in a normal style. + */ + export const Normal: number; + + /** + * Denotes that text should be drawn in a bold weight. + */ + export const Bold: number; + + /** + * Denotes that text should be drawn in a italic style. + */ + export const Italic: number; + } /** - * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_URI](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_URI) - * iOS: [UIKeyboardTypeURL](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + * Describes the type of a device */ - export const url: KeyboardType; + export module DeviceType { + /** + * Indicates a smart-phone device. + */ + export const Phone: string; + + /** + * Indicates a tablet device. + */ + export const Tablet: string; + } + + export type UpdateTextTriggerType = 'focusLost' | 'textChanged'; + /** + * Represents an enumeration specifying when the text property of an EditableTextBase will be updated. + */ + export module UpdateTextTrigger { + /** + * The text property will be udpaded when the widget loses focus. + */ + export const focusLost: UpdateTextTriggerType; + + /** + * The text property will be udpaded on every single character typed by the user. + */ + export const textChanged: UpdateTextTriggerType; + } /** - * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_EMAIL_ADDRESS](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_EMAIL_ADDRESS) - * iOS: [UIKeyboardTypeEmailAddress](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + * Specifies common accuracy values. */ - export const email: KeyboardType; + export namespace Accuracy { + /** + * The default accuracy. About 300 meters. + */ + export const any: number; + + /** + * High accuracy. About 3 meters. + */ + export const high: number; + } + + export type DockType = 'left' | 'top' | 'right' | 'bottom'; + /** + * Specifies the Dock position of a child element that is inside a DockLayout. + */ + export module Dock { + /** + * A child element that is positioned on the left side of the DockLayout. + */ + export const left: DockType; + + /** + * A child element that is positioned on the top side of the DockLayout. + */ + export const top: DockType; + + /** + * A child element that is positioned on the right side of the DockLayout. + */ + export const right: DockType; + + /** + * A child element that is positioned on the bottom side of the DockLayout. + */ + export const bottom: DockType; + } + + export type AutocapitalizationInputType = 'none' | 'words' | 'sentences' | 'allcharacters'; + /** + * Represents the auto-capitalization style for a text input. + */ + export module AutocapitalizationType { + /** + * Do not capitalize any text automatically. + */ + export const none: AutocapitalizationInputType; + + /** + * Capitalize the first letter of each word automatically. + */ + export const words: AutocapitalizationInputType; + + /** + * Capitalize the first letter of each sentence automatically. + */ + export const sentences: AutocapitalizationInputType; + + /** + * Capitalize all characters automatically. + */ + export const allCharacters: AutocapitalizationInputType; + } /** - * Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER | [TYPE_NUMBER_VARIATION_PASSWORD](android type_text_variation_password)) - * iOS: [UIKeyboardTypeNumberPad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) + * Defines the recognized image formats. */ - export const integer: KeyboardType; + export module ImageFormat { + /** + * The W3C Portable Network Graphics (PNG) image format. + */ + export const png: string; + + /** + * The Joint Photographic Experts Group (JPEG) image format. + */ + export const jpeg: string; + + /** + * The Joint Photographic Experts Group (JPEG) image format. + */ + export const jpg: string; + } + + /** + * Specifies NavigationBar visibility mode. + */ + export module NavigationBarVisibility { + /** + * NavigationBar will be visible if there if frame backstack canGoBack is true or if the page Action Bar is not empty. + */ + export const auto: string; + + /** + * NavigationBar will be hidden. + */ + export const never: string; + + /** + * NavigationBar will be visible. + */ + export const always: string; + } + + /** + * Specifies the visibility of the application bar icon + */ + export module AndroidActionBarIconVisibility { + export const auto: string; + export const never: string; + export const always: string; + } + + /** + * Specifies android MenuItem position. + */ + export module AndroidActionItemPosition { + /** + * Always show this item as a button in an Action Bar. + */ + export const actionBar: string; + + /** + * Show this item as a button in an Action Bar if the system decides there is room for it. + */ + export const actionBarIfRoom: string; + + /** + * Never show this item as a button in an Action Bar. + */ + export const popup: string; + } + + /** + * Specifies different font styles. + */ + export module FontStyle { + /** + * Normal font style. + */ + export const normal: FontStyleType; + + /** + * Italic font style. + */ + export const italic: FontStyleType; + } + + export type TextDecorationType = 'none' | 'underline' | 'line-through' | 'underline line-through'; + /** + * Specifies different text decorations. + */ + export module TextDecoration { + /** + * No decoration. + */ + export const none: TextDecorationType; + + /** + * Text decoration underline. + */ + export const underline: TextDecorationType; + + /** + * Text decoration line-through. + */ + export const lineThrough: TextDecorationType; + } + + export type TextTransformType = 'initial' | 'none' | 'capitalize' | 'uppercase' | 'lowercase'; + /** + * Specifies different text transforms. + */ + export module TextTransform { + /** + * No transform. + */ + export const none: TextTransformType; + + /** + * Text transform capitalize. + */ + export const capitalize: TextTransformType; + + /** + * Text transform uppercase. + */ + export const uppercase: TextTransformType; + + /** + * Text transform lowercase. + */ + export const lowercase: TextTransformType; + } + + export type WhiteSpaceType = 'initial' | 'normal' | 'nowrap'; + /** + * Specifies different white spaces. + */ + export module WhiteSpace { + /** + * Normal wrap. + */ + export const normal: WhiteSpaceType; + + /** + * No wrap. + */ + export const nowrap: WhiteSpaceType; + } + + /** + * Specifies different font weights. + */ + export module FontWeight { + /** + * Thin font weight. CSS font-weight 100. + */ + export const thin: FontWeightType; + + /** + * Extra-light / Ultra-light font weight. CSS font-weight 200. + */ + export const extraLight: FontWeightType; + + /** + * Light font weight. CSS font-weight 300. + */ + export const light: FontWeightType; + + /** + * Normal font weight. CSS font-weight 400. + */ + export const normal: FontWeightType; + + /** + * Medium font weight. CSS font-weight 500. + */ + export const medium: FontWeightType; + + /** + * Semi-bold / Demi-bold font weight. CSS font-weight 600. + */ + export const semiBold: FontWeightType; + + /** + * Bold font weight. CSS font-weight 700. + */ + export const bold: FontWeightType; + + /** + * Extra-bold / Ultra-bold font weight. CSS font-weight 800. + */ + export const extraBold: FontWeightType; + + /** + * Black font weight. CSS font-weight 900. + */ + export const black: FontWeightType; + } + + export type BackgroundRepeatType = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; + /** + * Specifies background repeat. + */ + export module BackgroundRepeat { + export const repeat: BackgroundRepeatType; + export const repeatX: BackgroundRepeatType; + export const repeatY: BackgroundRepeatType; + export const noRepeat: BackgroundRepeatType; + export const isValid: (value: any) => BackgroundRepeatType; + export const parse: (value: any) => BackgroundRepeatType; + } + + /** + * Specifies android MenuItem position. + */ + export module IOSActionItemPosition { + /** + * Show this item at the left of the navigation bar. + */ + export const left: string; + + /** + * Show this item at the right of the action bar. + */ + export const right: string; + } + + /** + * Represents an animation curve type. + */ + export module AnimationCurve { + /** + * Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) + */ + export const ease: string; + + /** + * An ease-in curve causes the animation to begin slowly, and then speed up as it progresses. + */ + export const easeIn: string; + + /** + * An ease-out curve causes the animation to begin quickly, and then slow down as it completes. + */ + export const easeOut: string; + + /** + * An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing. + */ + export const easeInOut: string; + + /** + * A linear animation curve causes an animation to occur evenly over its duration. + */ + export const linear: string; + + /** + * A spring animation curve causes an animation to produce a spring (bounce) effect. + */ + export const spring: string; + + /** + * A custom cubic bezier function defined by its two control points. Possible values are numeric values from 0 to 1 + */ + export function cubicBezier(x1: number, y1: number, x2: number, y2: number): CubicBezierAnimationCurve; + } + + /** + * @deprecated use `SystemAppearance` instead. + * + * Specifies the types of the status bar style. + */ + export module StatusBarStyle { + /** + * The light style of the status bar - light background with dark letters. + */ + export const light: string; + + /** + * The dark style of the status bar - dark background with light letters. + */ + export const dark: string; + } + + /** + * Specifies the types of the system appearance. + */ + export module SystemAppearance { + /** + * The light system appearance. + */ + export const light: string; + + /** + * The dark system appearance. + */ + export const dark: string; + } + + /** + * @deprecated use `SystemAppearance` instead. + * + * Specifies the types of the user interface style. + */ + export module UserInterfaceStyle { + /** + * The light style of the user interface. + */ + export const light: string; + + /** + * The dark style of the user interface. + */ + export const dark: string; + } + + /** + * Singular rollup for convenience of all enums + */ + // export namespace Enums { + // Accuracy: typeof Accuracy; + // AndroidActionBarIconVisibility: typeof AndroidActionBarIconVisibility; + // AndroidActionItemPosition: typeof AndroidActionItemPosition; + // AnimationCurve: typeof AnimationCurve; + // AutocapitalizationType: typeof AutocapitalizationType; + // AutocapitalizationInputType: AutocapitalizationInputType; + // BackgroundRepeat: typeof BackgroundRepeat; + // BackgroundRepeatType: BackgroundRepeatType; + // DeviceOrientation: typeof DeviceOrientation; + // DeviceType: typeof DeviceType; + // Dock: typeof Dock; + // FontAttributes: typeof FontAttributes; + // FontStyle: typeof FontStyle; + // FontStyleType: FontStyleType; + // FontWeight: typeof FontWeight; + // FontWeightType: FontWeightType; + // HorizontalAlignment: typeof HorizontalAlignment; + // HorizontalAlignmentType: HorizontalAlignmentType; + // IOSActionItemPosition: typeof IOSActionItemPosition; + // ImageFormat: typeof ImageFormat; + // KeyboardType: typeof KeyboardType; + // KeyboardInputType: KeyboardInputType; + // NavigationBarVisibility: typeof NavigationBarVisibility; + // Orientation: typeof Orientation; + // OrientationType: OrientationType; + // ReturnKeyType: typeof ReturnKeyType; + // ReturnKeyButtonType: ReturnKeyButtonType; + // StatusBarStyle: typeof StatusBarStyle; + // Stretch: typeof Stretch; + // SystemAppearance: typeof SystemAppearance; + // TextAlignment: typeof TextAlignment; + // TextAlignmentType: typeof TextAlignment; + // TextDecoration: typeof TextDecoration; + // TextDecorationType: TextDecorationType; + // TextTransform: typeof TextTransform; + // TextTransformType: TextTransformType; + // UpdateTextTrigger: typeof UpdateTextTrigger; + // UpdateTextTriggerType: UpdateTextTriggerType; + // VerticalAlignment: typeof VerticalAlignment; + // VerticalAlignmentType: VerticalAlignmentType; + // Visibility: typeof Visibility; + // VisibilityType: VisibilityType; + // WhiteSpace: typeof WhiteSpace; + // WhiteSpaceType: WhiteSpaceType; } - -/** - * Represents the flavor of the return key on the soft keyboard. - */ -export module ReturnKeyType { - /** - * Android: [IME_ACTION_DONE](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_DONE) - * iOS: [UIReturnKeyDone](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) - */ - export const done: BaseReturnKeyType; - - /** - * Android: [IME_ACTION_NEXT](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_NEXT) - * iOS: [UIReturnKeyNext](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) - */ - export const next: BaseReturnKeyType; - - /** - * Android: [IME_ACTION_GO](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_GO) - * iOS: [UIReturnKeyGo](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) - */ - export const go: BaseReturnKeyType; - - /** - * Android: [IME_ACTION_SEARCH](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEARCH) - * iOS: [UIReturnKeySearch](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) - */ - export const search: BaseReturnKeyType; - - /** - * Android: [IME_ACTION_SEND](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEND) - * iOS: [UIReturnKeySend](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType) - */ - export const send: string; -} - -/** - * Represents a text-align enumeration. - */ -export declare class TextAlignment { - /** - * Represents left text-align. - */ - static left: BaseTextAlignment; - - /** - * Represents center text-align. - */ - static center: BaseTextAlignment; - - /** - * Represents right text-align. - */ - static right: BaseTextAlignment; -} - -/** - * Orientation indicates a direction of a layout that can exist in a horizontal or vertical state. - */ -export module Orientation { - /** - * Layout should be horizontally oriented. - */ - export const horizontal: BaseOrientation; - /** - * Layout should be vertically oriented. - */ - export const vertical: BaseOrientation; -} - -/** - * Orientation of a device. - */ -export module DeviceOrientation { - /** - * Portrait orientation. - */ - export const portrait: string; - /** - * Landscape orientation. - */ - export const landscape: string; - /** - * Orientation cannot be determined. - */ - export const unknown: string; -} - -/** - * HorizontalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element. - */ -export module HorizontalAlignment { - /** - * An element should be left aligned. - */ - export const left: BaseHorizontalAlignment; - - /** - * An element should be center aligned. - */ - export const center: BaseHorizontalAlignment; - - /** - * An element should be right aligned. - */ - export const right: BaseHorizontalAlignment; - - /** - * An element should be stretched to fill all the available size. - */ - export const stretch: BaseHorizontalAlignment; -} - -/** - * VerticalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element. - */ -export module VerticalAlignment { - /** - * An element should be top aligned. - */ - export const top: BaseVerticalAlignment; - - /** - * An element should be center aligned. - */ - export const center: BaseVerticalAlignment; - - /** - * Same as center. An element should be aligned in the middle. - */ - export const middle: BaseVerticalAlignment; - - /** - * An element should be bottom aligned. - */ - export const bottom: BaseVerticalAlignment; - - /** - * An element should be stretched to fill all the available size. - */ - export const stretch: BaseVerticalAlignment; -} - -/** - * Describes how content is resized to fill its allocated space. - */ -export module Stretch { - /** - * The image preserves its original size. - */ - export const none: BaseStretch; - - /** - * The image is resized to fill in the destination dimensions while it preserves its native aspect ratio. - * If the aspect ratio of the destination rectangle differs from the image, the image is clipped to fill - * in the destination. - */ - export const aspectFill: BaseStretch; - - /** - * The image is resized to fit the destination dimensions while it preserves - * its native aspect ratio. - */ - export const aspectFit: BaseStretch; - - /** - * The image is resized to fill the destination dimensions. The aspect ratio is not preserved. - */ - export const fill: BaseStretch; -} - -/** - * Represents the visibility mode of a view. - */ -export module Visibility { - /** - * The view is visible. - */ - export const visible: BaseVisibility; - - /** - * The view is not visible and won't take place in the layout. - */ - export const collapse: BaseVisibility; - - /** - * The view is not visible but will take place in the layout. - */ - export const hidden: BaseVisibility; -} - -/** - * A flag enum that represents common font attributes. - */ -export module FontAttributes { - /** - * Denotes that text should be drawn in a normal style. - */ - export const Normal: number; - - /** - * Denotes that text should be drawn in a bold weight. - */ - export const Bold: number; - - /** - * Denotes that text should be drawn in a italic style. - */ - export const Italic: number; -} - -/** - * Describes the type of a device - */ -export module DeviceType { - /** - * Indicates a smart-phone device. - */ - export const Phone: string; - - /** - * Indicates a tablet device. - */ - export const Tablet: string; -} - -/** - * Represents an enumeration specifying when the text property of an EditableTextBase will be updated. - */ -export module UpdateTextTrigger { - /** - * The text property will be udpaded when the widget loses focus. - */ - export const focusLost: BaseUpdateTrigger; - - /** - * The text property will be udpaded on every single character typed by the user. - */ - export const textChanged: BaseUpdateTrigger; -} - -/** - * Specifies common accuracy values. - */ -export module Accuracy { - /** - * The default accuracy. About 300 meters. - */ - export const any: number; - - /** - * High accuracy. About 3 meters. - */ - export const high: number; -} - -/** - * Specifies the Dock position of a child element that is inside a DockLayout. - */ -export module Dock { - /** - * A child element that is positioned on the left side of the DockLayout. - */ - export const left: BaseDock; - - /** - * A child element that is positioned on the top side of the DockLayout. - */ - export const top: BaseDock; - - /** - * A child element that is positioned on the right side of the DockLayout. - */ - export const right: BaseDock; - - /** - * A child element that is positioned on the bottom side of the DockLayout. - */ - export const bottom: BaseDock; -} - -/** - * Represents the auto-capitalization style for a text input. - */ -export module AutocapitalizationType { - /** - * Do not capitalize any text automatically. - */ - export const none: BaseAutocapitalizationType; - - /** - * Capitalize the first letter of each word automatically. - */ - export const words: BaseAutocapitalizationType; - - /** - * Capitalize the first letter of each sentence automatically. - */ - export const sentences: BaseAutocapitalizationType; - - /** - * Capitalize all characters automatically. - */ - export const allCharacters: BaseAutocapitalizationType; -} - -/** - * Defines the recognized image formats. - */ -export module ImageFormat { - /** - * The W3C Portable Network Graphics (PNG) image format. - */ - export const png: string; - - /** - * The Joint Photographic Experts Group (JPEG) image format. - */ - export const jpeg: string; - - /** - * The Joint Photographic Experts Group (JPEG) image format. - */ - export const jpg: string; -} - -/** - * Specifies NavigationBar visibility mode. - */ -export module NavigationBarVisibility { - /** - * NavigationBar will be visible if there if frame backstack canGoBack is true or if the page Action Bar is not empty. - */ - export const auto: string; - - /** - * NavigationBar will be hidden. - */ - export const never: string; - - /** - * NavigationBar will be visible. - */ - export const always: string; -} - -/** - * Specifies the visibility of the application bar icon - */ -export module AndroidActionBarIconVisibility { - export const auto: string; - export const never: string; - export const always: string; -} - -/** - * Specifies android MenuItem position. - */ -export module AndroidActionItemPosition { - /** - * Always show this item as a button in an Action Bar. - */ - export const actionBar: string; - - /** - * Show this item as a button in an Action Bar if the system decides there is room for it. - */ - export const actionBarIfRoom: string; - - /** - * Never show this item as a button in an Action Bar. - */ - export const popup: string; -} - -/** - * Specifies different font styles. - */ -export module FontStyle { - /** - * Normal font style. - */ - export const normal: BaseFontStyle; - - /** - * Italic font style. - */ - export const italic: BaseFontStyle; -} - -/** - * Specifies different text decorations. - */ -export module TextDecoration { - /** - * No decoration. - */ - export const none: BaseTextDecoration; - - /** - * Text decoration underline. - */ - export const underline: BaseTextDecoration; - - /** - * Text decoration line-through. - */ - export const lineThrough: BaseTextDecoration; -} - -/** - * Specifies different text transforms. - */ -export module TextTransform { - /** - * No transform. - */ - export const none: BaseTextTransform; - - /** - * Text transform capitalize. - */ - export const capitalize: BaseTextTransform; - - /** - * Text transform uppercase. - */ - export const uppercase: BaseTextTransform; - - /** - * Text transform lowercase. - */ - export const lowercase: BaseTextTransform; -} - -/** - * Specifies different white spaces. - */ -export module WhiteSpace { - /** - * Normal wrap. - */ - export const normal: BaseWhiteSpace; - - /** - * No wrap. - */ - export const nowrap: BaseWhiteSpace; -} - -/** - * Specifies different font weights. - */ -export module FontWeight { - /** - * Thin font weight. CSS font-weight 100. - */ - export const thin: BaseFontWeight; - - /** - * Extra-light / Ultra-light font weight. CSS font-weight 200. - */ - export const extraLight: BaseFontWeight; - - /** - * Light font weight. CSS font-weight 300. - */ - export const light: BaseFontWeight; - - /** - * Normal font weight. CSS font-weight 400. - */ - export const normal: BaseFontWeight; - - /** - * Medium font weight. CSS font-weight 500. - */ - export const medium: BaseFontWeight; - - /** - * Semi-bold / Demi-bold font weight. CSS font-weight 600. - */ - export const semiBold: BaseFontWeight; - - /** - * Bold font weight. CSS font-weight 700. - */ - export const bold: BaseFontWeight; - - /** - * Extra-bold / Ultra-bold font weight. CSS font-weight 800. - */ - export const extraBold: BaseFontWeight; - - /** - * Black font weight. CSS font-weight 900. - */ - export const black: BaseFontWeight; -} - -/** - * Specifies background repeat. - */ -export module BackgroundRepeat { - export const repeat: BaseBackgroundRepeat; - export const repeatX: BaseBackgroundRepeat; - export const repeatY: BaseBackgroundRepeat; - export const noRepeat: BaseBackgroundRepeat; -} - -/** - * Specifies android MenuItem position. - */ -export module IOSActionItemPosition { - /** - * Show this item at the left of the navigation bar. - */ - export const left: string; - - /** - * Show this item at the right of the action bar. - */ - export const right: string; -} - -/** - * Represents an animation curve type. - */ -export module AnimationCurve { - /** - * Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) - */ - export const ease: string; - - /** - * An ease-in curve causes the animation to begin slowly, and then speed up as it progresses. - */ - export const easeIn: string; - - /** - * An ease-out curve causes the animation to begin quickly, and then slow down as it completes. - */ - export const easeOut: string; - - /** - * An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing. - */ - export const easeInOut: string; - - /** - * A linear animation curve causes an animation to occur evenly over its duration. - */ - export const linear: string; - - /** - * A spring animation curve causes an animation to produce a spring (bounce) effect. - */ - export const spring: string; - - /** - * A custom cubic bezier function defined by its two control points. Possible values are numeric values from 0 to 1 - */ - export function cubicBezier(x1: number, y1: number, x2: number, y2: number): CubicBezierAnimationCurve; -} - -/** - * @deprecated use `SystemAppearance` instead. - * - * Specifies the types of the status bar style. - */ -export module StatusBarStyle { - /** - * The light style of the status bar - light background with dark letters. - */ - export const light: string; - - /** - * The dark style of the status bar - dark background with light letters. - */ - export const dark: string; -} - -/** - * Specifies the types of the system appearance. - */ -export module SystemAppearance { - /** - * The light system appearance. - */ - export const light: string; - - /** - * The dark system appearance. - */ - export const dark: string; -} - -/** - * @deprecated use `SystemAppearance` instead. - * - * Specifies the types of the user interface style. - */ -export module UserInterfaceStyle { - /** - * The light style of the user interface. - */ - export const light: string; - - /** - * The dark style of the user interface. - */ - export const dark: string; -} - -/** - * Singular rollup for convenience of all enums - */ -export declare const Enums: { - Accuracy: typeof Accuracy; - AndroidActionBarIconVisibility: typeof AndroidActionBarIconVisibility; - AndroidActionItemPosition: typeof AndroidActionItemPosition; - AnimationCurve: typeof AnimationCurve; - AutocapitalizationType: typeof AutocapitalizationType; - BackgroundRepeat: typeof BackgroundRepeat; - DeviceOrientation: typeof DeviceOrientation; - DeviceType: typeof DeviceType; - Dock: typeof Dock; - FontAttributes: typeof FontAttributes; - FontStyle: typeof FontStyle; - FontWeight: typeof FontWeight; - HorizontalAlignment: typeof HorizontalAlignment; - IOSActionItemPosition: typeof IOSActionItemPosition; - ImageFormat: typeof ImageFormat; - KeyboardType: typeof KeyboardType; - NavigationBarVisibility: typeof NavigationBarVisibility; - Orientation: typeof Orientation; - ReturnKeyType: typeof ReturnKeyType; - StatusBarStyle: typeof StatusBarStyle; - Stretch: typeof Stretch; - SystemAppearance: typeof SystemAppearance; - TextAlignment: typeof TextAlignment; - TextDecoration: typeof TextDecoration; - TextTransform: typeof TextTransform; - UpdateTextTrigger: typeof UpdateTextTrigger; - VerticalAlignment: typeof VerticalAlignment; - Visibility: typeof Visibility; - WhiteSpace: typeof WhiteSpace; -}; diff --git a/packages/core/ui/enums/index.ts b/packages/core/ui/enums/index.ts index 06fd48536..682eb0731 100644 --- a/packages/core/ui/enums/index.ts +++ b/packages/core/ui/enums/index.ts @@ -1,229 +1,283 @@ // imported for definition purposes only import * as animationModule from '../../ui/animation'; +import { makeValidator, makeParser } from '../core/properties'; -export type KeyboardType = 'datetime' | 'phone' | 'number' | 'url' | 'email' | 'integer'; -export namespace KeyboardType { - export const datetime = 'datetime'; - export const phone = 'phone'; - export const number = 'number'; - export const url = 'url'; - export const email = 'email'; - export const integer = 'integer'; -} +export namespace Enums { -export namespace ReturnKeyType { - export const done = 'done'; - export const next = 'next'; - export const go = 'go'; - export const search = 'search'; - export const send = 'send'; -} + export type KeyboardInputType = 'datetime' | 'phone' | 'number' | 'url' | 'email' | 'integer'; + export module KeyboardType { + export const datetime = 'datetime'; + export const phone = 'phone'; + export const number = 'number'; + export const url = 'url'; + export const email = 'email'; + export const integer = 'integer'; + } -export class TextAlignment { - static left = 'left'; - static center = 'center'; - static right = 'right'; -} + export type ReturnKeyButtonType = 'done' | 'next' | 'go' | 'search' | 'send'; + export module ReturnKeyType { + export const done = 'done'; + export const next = 'next'; + export const go = 'go'; + export const search = 'search'; + export const send = 'send'; + } -export namespace TextDecoration { - export const none = 'none'; - export const underline = 'underline'; - export const lineThrough = 'line-through'; -} + export type TextAlignmentType = 'initial' | 'left' | 'center' | 'right'; + export module TextAlignment { + export const left = 'left'; + export const center = 'center'; + export const right = 'right'; + } -export namespace TextTransform { - export const none = 'none'; - export const capitalize = 'capitalize'; - export const uppercase = 'uppercase'; - export const lowercase = 'lowercase'; -} + export type TextDecorationType = 'none' | 'underline' | 'line-through' | 'underline line-through'; + export module TextDecoration { + export const none = 'none'; + export const underline = 'underline'; + export const lineThrough = 'line-through'; + } -export namespace WhiteSpace { - export const normal = 'normal'; - export const nowrap = 'nowrap'; -} + export type TextTransformType = 'initial' | 'none' | 'capitalize' | 'uppercase' | 'lowercase'; + export module TextTransform { + export const none = 'none'; + export const capitalize = 'capitalize'; + export const uppercase = 'uppercase'; + export const lowercase = 'lowercase'; + } -export namespace Orientation { - export const horizontal = 'horizontal'; - export const vertical = 'vertical'; -} + export type WhiteSpaceType = 'initial' | 'normal' | 'nowrap'; + export module WhiteSpace { + export const normal = 'normal'; + export const nowrap = 'nowrap'; + } -export namespace DeviceOrientation { - export const portrait = 'portrait'; - export const landscape = 'landscape'; - export const unknown = 'unknown'; -} + export type OrientationType = 'horizontal' | 'vertical'; + export module Orientation { + export const horizontal = 'horizontal'; + export const vertical = 'vertical'; + } -export namespace HorizontalAlignment { - export const left = 'left'; - export const center = 'center'; - export const right = 'right'; - export const stretch = 'stretch'; -} + export type DeviceOrientationType = 'portrait' | 'landscape' | 'unknown'; + export module DeviceOrientation { + export const portrait = 'portrait'; + export const landscape = 'landscape'; + export const unknown = 'unknown'; + } -export namespace VerticalAlignment { - export const top = 'top'; - export const middle = 'middle'; - export const bottom = 'bottom'; - export const stretch = 'stretch'; -} + export type HorizontalAlignmentType = 'left' | 'center' | 'right' | 'stretch'; + export module HorizontalAlignment { + export const left = 'left'; + export const center = 'center'; + export const right = 'right'; + export const stretch = 'stretch'; + export const isValid = makeValidator(left, center, right, stretch); + export const parse = makeParser(isValid); + } -export namespace Stretch { - export const none = 'none'; - export const aspectFill = 'aspectFill'; - export const aspectFit = 'aspectFit'; - export const fill = 'fill'; -} -export namespace Visibility { - export const visible = 'visible'; - export const collapse = 'collapse'; - export const collapsed = 'collapsed'; - export const hidden = 'hidden'; -} + export type VerticalAlignmentType = 'top' | 'middle' | 'bottom' | 'stretch'; + export module VerticalAlignment { + export const top = 'top'; + export const middle = 'middle'; + export const bottom = 'bottom'; + export const stretch = 'stretch'; + } + export type VerticalAlignmentTextType = VerticalAlignmentType | 'text-top' | 'text-bottom' | 'sup' | 'sub' | 'baseline'; + export namespace VerticalAlignmentText { + export const top = 'top'; + export const middle = 'middle'; + export const bottom = 'bottom'; + export const stretch = 'stretch'; + export const texttop = 'text-top'; + export const textbottom = 'text-bottom'; + export const sup = 'sup'; + export const sub = 'sub'; + export const baseline = 'baseline'; + export const isValid = makeValidator(top, middle, bottom, stretch, texttop, textbottom, sup, sub, baseline); + export const parse = (value: string) => (value.toLowerCase() === 'center' ? middle : parseStrict(value)); + const parseStrict = makeParser(isValid); + } -export namespace FontAttributes { - export const Normal = 0; - export const Bold = 1; - export const Italic = 1 << 1; -} + export type ImageStretchType = 'none' | 'aspectFill' | 'aspectFit' | 'fill'; + export module ImageStretch { + export const none: ImageStretchType = 'none'; + export const aspectFill: ImageStretchType = 'aspectFill'; + export const aspectFit: ImageStretchType = 'aspectFit'; + export const fill: ImageStretchType = 'fill'; + } -export namespace DeviceType { - export const Phone = 'Phone'; - export const Tablet = 'Tablet'; -} + export type VisibilityType = 'visible' | 'hidden' | 'collapse' | 'collapsed'; + export module Visibility { + export const visible: VisibilityType = 'visible'; + export const collapse: VisibilityType = 'collapse'; + export const collapsed: VisibilityType = 'collapsed'; + export const hidden: VisibilityType = 'hidden'; + export const isValid = makeValidator(visible, hidden, collapse); + export const parse = (value: string) => (value.toLowerCase() === 'collapsed' ? collapse : parseStrict(value)); + const parseStrict = makeParser(isValid); + } -export namespace UpdateTextTrigger { - export const focusLost = 'focusLost'; - export const textChanged = 'textChanged'; -} + export module FontAttributes { + export const Normal = 0; + export const Bold = 1; + export const Italic = 1 << 1; + } -export namespace Accuracy { - export const any = 300; - export const high = 3; -} + export module DeviceType { + export const Phone: string = 'Phone'; + export const Tablet: string = 'Tablet'; + } -export namespace Dock { - export const left = 'left'; - export const top = 'top'; - export const right = 'right'; - export const bottom = 'bottom'; -} + export type UpdateTextTriggerType = 'focusLost' | 'textChanged'; + export module UpdateTextTrigger { + export const focusLost: UpdateTextTriggerType = 'focusLost'; + export const textChanged: UpdateTextTriggerType = 'textChanged'; + } -export namespace AutocapitalizationType { - export const none = 'none'; - export const words = 'words'; - export const sentences = 'sentences'; - export const allCharacters = 'allcharacters'; -} + export module Accuracy { + export const any: number = 300; + export const high: number = 3; + } -export namespace NavigationBarVisibility { - export const auto = 'auto'; - export const never = 'never'; - export const always = 'always'; -} + export type DockType = 'left' | 'top' | 'right' | 'bottom'; + export module Dock { + export const left: DockType = 'left'; + export const top: DockType = 'top'; + export const right: DockType = 'right'; + export const bottom: DockType = 'bottom'; + } -export namespace AndroidActionBarIconVisibility { - export const auto = 'auto'; - export const never = 'never'; - export const always = 'always'; -} + export type AutocapitalizationInputType = 'none' | 'words' | 'sentences' | 'allcharacters'; + export module AutocapitalizationType { + export const none: AutocapitalizationInputType = 'none'; + export const words: AutocapitalizationInputType = 'words'; + export const sentences: AutocapitalizationInputType = 'sentences'; + export const allCharacters: AutocapitalizationInputType = 'allcharacters'; + } -export namespace AndroidActionItemPosition { - export const actionBar = 'actionBar'; - export const actionBarIfRoom = 'actionBarIfRoom'; - export const popup = 'popup'; -} + export module NavigationBarVisibility { + export const auto: string = 'auto'; + export const never: string = 'never'; + export const always: string = 'always'; + } -export namespace IOSActionItemPosition { - export const left = 'left'; - export const right = 'right'; -} + export module AndroidActionBarIconVisibility { + export const auto: string = 'auto'; + export const never: string = 'never'; + export const always: string = 'always'; + } -export namespace ImageFormat { - export const png = 'png'; - export const jpeg = 'jpeg'; - export const jpg = 'jpg'; -} + export module AndroidActionItemPosition { + export const actionBar: string = 'actionBar'; + export const actionBarIfRoom: string = 'actionBarIfRoom'; + export const popup: string = 'popup'; + } -export namespace FontStyle { - export const normal = 'normal'; - export const italic = 'italic'; -} + export module IOSActionItemPosition { + export const left: string = 'left'; + export const right: string = 'right'; + } -export namespace FontWeight { - export const thin = '100'; - export const extraLight = '200'; - export const light = '300'; - export const normal = 'normal'; // 400 - export const medium = '500'; - export const semiBold = '600'; - export const bold = 'bold'; // 700 - export const extraBold = '800'; - export const black = '900'; -} + export module ImageFormat { + export const png: string = 'png'; + export const jpeg: string = 'jpeg'; + export const jpg: string = 'jpg'; + } -export namespace BackgroundRepeat { - export const repeat = 'repeat'; - export const repeatX = 'repeat-x'; - export const repeatY = 'repeat-y'; - export const noRepeat = 'no-repeat'; -} + export module FontStyle { + export const normal: string = 'normal'; + export const italic: string = 'italic'; + } -let animation: typeof animationModule; + export module FontWeight { + export const thin: string = '100'; + export const extraLight: string = '200'; + export const light: string = '300'; + export const normal: string = 'normal'; // 400 + export const medium: string = '500'; + export const semiBold: string = '600'; + export const bold: string = 'bold'; // 700 + export const extraBold: string = '800'; + export const black: string = '900'; + } + + export type BackgroundRepeatType = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; + export module BackgroundRepeat { + export const repeat: BackgroundRepeatType = 'repeat'; + export const repeatX: BackgroundRepeatType = 'repeat-x'; + export const repeatY: BackgroundRepeatType = 'repeat-y'; + export const noRepeat: BackgroundRepeatType = 'no-repeat'; + export const isValid = makeValidator(repeat, repeatX, repeatY, noRepeat); + export const parse = makeParser(isValid); + } -export namespace AnimationCurve { - export const ease = 'ease'; - export const easeIn = 'easeIn'; - export const easeOut = 'easeOut'; - export const easeInOut = 'easeInOut'; - export const linear = 'linear'; - export const spring = 'spring'; - export function cubicBezier(x1: number, y1: number, x2: number, y2: number): Object { - animation = animation || require('../animation'); + let animation: typeof animationModule; - return new animation.CubicBezierAnimationCurve(x1, y1, x2, y2); - } -} + export module AnimationCurve { + export const ease = 'ease'; + export const easeIn = 'easeIn'; + export const easeOut = 'easeOut'; + export const easeInOut = 'easeInOut'; + export const linear = 'linear'; + export const spring = 'spring'; + export function cubicBezier(x1: number, y1: number, x2: number, y2: number): Object { + animation = animation || require('../animation'); -export namespace StatusBarStyle { - export const light = 'light'; - export const dark = 'dark'; -} + return new animation.CubicBezierAnimationCurve(x1, y1, x2, y2); + } + } -export namespace SystemAppearance { - export const light = 'light'; - export const dark = 'dark'; -} + export module StatusBarStyle { + export const light = 'light'; + export const dark = 'dark'; + } -export const Enums = { - Accuracy, - AndroidActionBarIconVisibility, - AndroidActionItemPosition, - AnimationCurve, - AutocapitalizationType, - BackgroundRepeat, - DeviceOrientation, - DeviceType, - Dock, - FontAttributes, - FontStyle, - FontWeight, - HorizontalAlignment, - IOSActionItemPosition, - ImageFormat, - KeyboardType, - NavigationBarVisibility, - Orientation, - ReturnKeyType, - StatusBarStyle, - Stretch, - SystemAppearance, - TextAlignment, - TextDecoration, - TextTransform, - UpdateTextTrigger, - VerticalAlignment, - Visibility, - WhiteSpace, -}; + export module SystemAppearance { + export const light = 'light'; + export const dark = 'dark'; + } + + // Accuracy, + // AndroidActionBarIconVisibility, + // AndroidActionItemPosition, + // AnimationCurve, + // AutocapitalizationType, + // AutocapitalizationInputType: typeof AutocapitalizationType, + // BackgroundRepeat, + // BackgroundRepeatType: typeof BackgroundRepeat, + // DeviceOrientation, + // DeviceType, + // Dock, + // FontAttributes, + // FontStyle, + // FontStyleType: typeof FontStyle, + // FontWeight, + // FontWeightType: typeof FontWeight, + // HorizontalAlignment, + // HorizontalAlignmentType: typeof HorizontalAlignment, + // IOSActionItemPosition, + // ImageFormat, + // KeyboardType, + // KeyboardInputType: typeof KeyboardType, + // NavigationBarVisibility, + // Orientation, + // OrientationType: typeof Orientation, + // ReturnKeyType, + // StatusBarStyle, + // Stretch, + // SystemAppearance, + // TextAlignment, + // TextAlignmentType: typeof TextAlignment, + // TextDecoration, + // TextDecorationType: typeof TextDecoration, + // TextTransform, + // TextTransformType: typeof TextTransform, + // UpdateTextTrigger, + // UpdateTextTriggerType: typeof UpdateTextTrigger, + // VerticalAlignment, + // VerticalAlignmentType: typeof VerticalAlignment, + // Visibility, + // VisibilityType: typeof Visibility, + // WhiteSpace, + // WhiteSpaceType: typeof WhiteSpace +}; \ No newline at end of file diff --git a/packages/core/ui/image/image-common.ts b/packages/core/ui/image/image-common.ts index 3812fb4dc..f7de59edc 100644 --- a/packages/core/ui/image/image-common.ts +++ b/packages/core/ui/image/image-common.ts @@ -1,12 +1,13 @@ -import { Image as ImageDefinition, Stretch } from '.'; +import { Image as ImageDefinition } from '.'; import { View, CSSType } from '../core/view'; import { booleanConverter } from '../core/view-base'; +import { Enums } from '../enums'; import { ImageAsset } from '../../image-asset'; import { ImageSource } from '../../image-source'; import { isDataURI, isFontIconURI, isFileOrResourcePath, RESOURCE_PREFIX } from '../../utils'; import { Color } from '../../color'; import { Style } from '../styling/style'; -import { Length } from '../styling/style-properties'; +import { Length, LengthType } from '../styling/style-properties'; import { Property, InheritedCssProperty } from '../core/properties'; import { Trace } from '../../trace'; @@ -15,10 +16,10 @@ export abstract class ImageBase extends View implements ImageDefinition { public imageSource: ImageSource; public src: string | ImageSource; public isLoading: boolean; - public stretch: Stretch; + public stretch: Enums.ImageStretchType; public loadMode: 'sync' | 'async'; - public decodeWidth: Length; - public decodeHeight: Length; + public decodeWidth: LengthType; + public decodeHeight: LengthType; get tintColor(): Color { return this.style.tintColor; @@ -143,7 +144,7 @@ export const isLoadingProperty = new Property({ }); isLoadingProperty.register(ImageBase); -export const stretchProperty = new Property({ +export const stretchProperty = new Property({ name: 'stretch', defaultValue: 'aspectFit', affectsLayout: global.isIOS, @@ -158,14 +159,14 @@ export const tintColorProperty = new InheritedCssProperty({ }); tintColorProperty.register(Style); -export const decodeHeightProperty = new Property({ +export const decodeHeightProperty = new Property({ name: 'decodeHeight', defaultValue: { value: 0, unit: 'dip' }, valueConverter: Length.parse, }); decodeHeightProperty.register(ImageBase); -export const decodeWidthProperty = new Property({ +export const decodeWidthProperty = new Property({ name: 'decodeWidth', defaultValue: { value: 0, unit: 'dip' }, valueConverter: Length.parse, diff --git a/packages/core/ui/image/index.d.ts b/packages/core/ui/image/index.d.ts index f93b10db6..db5d9caaf 100644 --- a/packages/core/ui/image/index.d.ts +++ b/packages/core/ui/image/index.d.ts @@ -4,6 +4,7 @@ import { ImageSource } from '../../image-source'; import { Color } from '../../color'; import { Property, InheritedCssProperty } from '../core/properties'; import { Length } from '../styling/style-properties'; +import { Enums } from '../enums'; /** * Represents a class that provides functionality for loading and streching image(s). @@ -65,13 +66,11 @@ export class Image extends View { decodeWidth: Length; } -export type Stretch = 'none' | 'aspectFill' | 'aspectFit' | 'fill'; - export const imageSourceProperty: Property; export const srcProperty: Property; export const isLoadingProperty: Property; export const loadMode: Property; -export const stretchProperty: Property; +export const stretchProperty: Property; export const tintColorProperty: InheritedCssProperty; export const decodeHeightProperty: Property; export const decodeWidthProperty: Property; diff --git a/packages/core/ui/index.ts b/packages/core/ui/index.ts index 2cb54afb7..ad6c77955 100644 --- a/packages/core/ui/index.ts +++ b/packages/core/ui/index.ts @@ -78,7 +78,6 @@ export { TabStripItem } from './tab-navigation-base/tab-strip-item'; export { TabView, TabViewItem } from './tab-view'; export { Tabs } from './tabs'; export { TextBase, getTransformedText, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, textShadowProperty, whiteSpaceProperty, lineHeightProperty } from './text-base'; -export type { TextTransform } from './text-base'; export { FormattedString } from './text-base/formatted-string'; export { Span } from './text-base/span'; export { TextField } from './text-field'; diff --git a/packages/core/ui/label/index.android.ts b/packages/core/ui/label/index.android.ts index 44313e0a5..2d741bb35 100644 --- a/packages/core/ui/label/index.android.ts +++ b/packages/core/ui/label/index.android.ts @@ -1,8 +1,9 @@ import { Label as LabelDefinition } from '.'; -import { TextBase, WhiteSpace, whiteSpaceProperty } from '../text-base'; +import { TextBase, whiteSpaceProperty } from '../text-base'; import { profile } from '../../profiling'; import { CSSType } from '../core/view'; import { booleanConverter } from '../core/view-base'; +import { Enums } from '../enums'; export * from '../text-base'; @@ -40,7 +41,7 @@ export class Label extends TextBase implements LabelDefinition { textView.setEllipsize(android.text.TextUtils.TruncateAt.END); } - [whiteSpaceProperty.setNative](value: WhiteSpace) { + [whiteSpaceProperty.setNative](value: Enums.WhiteSpaceType) { // Label initial value is no-wrap. set in initNativeView const newValue = value === 'initial' ? 'nowrap' : value; super[whiteSpaceProperty.setNative](newValue); diff --git a/packages/core/ui/label/index.ios.ts b/packages/core/ui/label/index.ios.ts index fa0aa6c1d..63c49ff7c 100644 --- a/packages/core/ui/label/index.ios.ts +++ b/packages/core/ui/label/index.ios.ts @@ -1,9 +1,10 @@ import { Label as LabelDefinition } from '.'; import { Background } from '../styling/background'; -import { Length, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties'; +import { Length, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, LengthType } from '../styling/style-properties'; import { booleanConverter } from '../core/view-base'; import { View, CSSType } from '../core/view'; -import { TextBase, whiteSpaceProperty, WhiteSpace } from '../text-base'; +import { Enums } from '../enums'; +import { TextBase, whiteSpaceProperty } from '../text-base'; import { layout } from '../../utils'; import { ios } from '../styling/background'; @@ -111,7 +112,7 @@ export class Label extends TextBase implements LabelDefinition { return nativeSize; } - [whiteSpaceProperty.setNative](value: WhiteSpace) { + [whiteSpaceProperty.setNative](value: Enums.WhiteSpaceType) { const nativeView = this.nativeTextViewProtected; switch (value) { case 'normal': @@ -141,7 +142,7 @@ export class Label extends TextBase implements LabelDefinition { this._setNativeClipToBounds(); } - [borderTopWidthProperty.setNative](value: Length) { + [borderTopWidthProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const border = nativeView.borderThickness; nativeView.borderThickness = { @@ -152,7 +153,7 @@ export class Label extends TextBase implements LabelDefinition { }; } - [borderRightWidthProperty.setNative](value: Length) { + [borderRightWidthProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const border = nativeView.borderThickness; nativeView.borderThickness = { @@ -163,7 +164,7 @@ export class Label extends TextBase implements LabelDefinition { }; } - [borderBottomWidthProperty.setNative](value: Length) { + [borderBottomWidthProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const border = nativeView.borderThickness; nativeView.borderThickness = { @@ -174,7 +175,7 @@ export class Label extends TextBase implements LabelDefinition { }; } - [borderLeftWidthProperty.setNative](value: Length) { + [borderLeftWidthProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const border = nativeView.borderThickness; nativeView.borderThickness = { @@ -185,7 +186,7 @@ export class Label extends TextBase implements LabelDefinition { }; } - [paddingTopProperty.setNative](value: Length) { + [paddingTopProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const padding = nativeView.padding; nativeView.padding = { @@ -196,7 +197,7 @@ export class Label extends TextBase implements LabelDefinition { }; } - [paddingRightProperty.setNative](value: Length) { + [paddingRightProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const padding = nativeView.padding; nativeView.padding = { @@ -207,7 +208,7 @@ export class Label extends TextBase implements LabelDefinition { }; } - [paddingBottomProperty.setNative](value: Length) { + [paddingBottomProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const padding = nativeView.padding; nativeView.padding = { @@ -218,7 +219,7 @@ export class Label extends TextBase implements LabelDefinition { }; } - [paddingLeftProperty.setNative](value: Length) { + [paddingLeftProperty.setNative](value: LengthType) { const nativeView = this.nativeTextViewProtected; const padding = nativeView.padding; nativeView.padding = { diff --git a/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts b/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts index 6378787ba..a29dd763a 100644 --- a/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts +++ b/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts @@ -2,7 +2,7 @@ import { AbsoluteLayout as AbsoluteLayoutDefinition } from '.'; import { LayoutBase } from '../layout-base'; import { View, CSSType } from '../../core/view'; import { Property } from '../../core/properties'; -import { Length, zeroLength } from '../../styling/style-properties'; +import { Length, zeroLength, LengthType } from '../../styling/style-properties'; export * from '../layout-base'; @@ -20,37 +20,37 @@ function validateArgs(element: View): View { @CSSType('AbsoluteLayout') export class AbsoluteLayoutBase extends LayoutBase implements AbsoluteLayoutDefinition { // TODO: Do we still need this? it can be get like view.left - public static getLeft(element: View): Length { + public static getLeft(element: View): LengthType { return validateArgs(element).left; } // TODO: Do we still need this? it can be set like view.left=value - public static setLeft(element: View, value: Length): void { + public static setLeft(element: View, value: LengthType): void { validateArgs(element).left = value; } // TODO: Do we still need this? it can be get like view.top - public static getTop(element: View): Length { + public static getTop(element: View): LengthType { return validateArgs(element).top; } // TODO: Do we still need this? it can be set like view.top=value - public static setTop(element: View, value: Length): void { + public static setTop(element: View, value: LengthType): void { validateArgs(element).top = value; } - onLeftChanged(view: View, oldValue: Length, newValue: Length) { + onLeftChanged(view: View, oldValue: LengthType, newValue: LengthType) { // } - onTopChanged(view: View, oldValue: Length, newValue: Length) { + onTopChanged(view: View, oldValue: LengthType, newValue: LengthType) { // } } AbsoluteLayoutBase.prototype.recycleNativeView = 'auto'; -export const leftProperty = new Property({ +export const leftProperty = new Property({ name: 'left', defaultValue: zeroLength, valueChanged: (target, oldValue, newValue) => { @@ -64,7 +64,7 @@ export const leftProperty = new Property({ }); leftProperty.register(View); -export const topProperty = new Property({ +export const topProperty = new Property({ name: 'top', defaultValue: zeroLength, valueChanged: (target, oldValue, newValue) => { diff --git a/packages/core/ui/layouts/absolute-layout/index.ios.ts b/packages/core/ui/layouts/absolute-layout/index.ios.ts index 91aaa0865..602479fe3 100644 --- a/packages/core/ui/layouts/absolute-layout/index.ios.ts +++ b/packages/core/ui/layouts/absolute-layout/index.ios.ts @@ -1,16 +1,16 @@ import { AbsoluteLayoutBase } from './absolute-layout-common'; import { View } from '../../core/view'; -import { Length } from '../../styling/style-properties'; +import { Length, LengthType } from '../../styling/style-properties'; import { layout } from '../../../utils'; export * from './absolute-layout-common'; export class AbsoluteLayout extends AbsoluteLayoutBase { - onLeftChanged(view: View, oldValue: Length, newValue: Length) { + onLeftChanged(view: View, oldValue: LengthType, newValue: LengthType) { this.requestLayout(); } - onTopChanged(view: View, oldValue: Length, newValue: Length) { + onTopChanged(view: View, oldValue: LengthType, newValue: LengthType) { this.requestLayout(); } diff --git a/packages/core/ui/layouts/dock-layout/dock-layout-common.ts b/packages/core/ui/layouts/dock-layout/dock-layout-common.ts index c8ccb09d0..a15587fae 100644 --- a/packages/core/ui/layouts/dock-layout/dock-layout-common.ts +++ b/packages/core/ui/layouts/dock-layout/dock-layout-common.ts @@ -1,4 +1,5 @@ -import { DockLayout as DockLayoutDefinition, Dock } from '.'; +import { DockLayout as DockLayoutDefinition } from '.'; +import { Enums } from '../../enums'; import { LayoutBase } from '../layout-base'; import { View, CSSType } from '../../core/view'; import { Property, makeValidator, makeParser } from '../../core/properties'; @@ -16,25 +17,25 @@ export * from '../layout-base'; @CSSType('DockLayout') export class DockLayoutBase extends LayoutBase implements DockLayoutDefinition { - public static getDock(element: View): Dock { + public static getDock(element: View): Enums.DockType { return validateArgs(element).dock; } - public static setDock(element: View, value: Dock): void { + public static setDock(element: View, value: Enums.DockType): void { validateArgs(element).dock = value; } public stretchLastChild: boolean; - public onDockChanged(view: View, oldValue: Dock, newValue: Dock) { + public onDockChanged(view: View, oldValue: Enums.DockType, newValue: Enums.DockType) { // } } DockLayoutBase.prototype.recycleNativeView = 'auto'; -const dockConverter = makeParser(makeValidator('left', 'top', 'right', 'bottom')); -export const dockProperty = new Property({ +const dockConverter = makeParser(makeValidator(Enums.Dock.left, Enums.Dock.top, Enums.Dock.right, Enums.Dock.bottom)); +export const dockProperty = new Property({ name: 'dock', defaultValue: 'left', valueChanged: (target, oldValue, newValue) => { diff --git a/packages/core/ui/layouts/dock-layout/index.d.ts b/packages/core/ui/layouts/dock-layout/index.d.ts index 6daccde55..12e66ae26 100644 --- a/packages/core/ui/layouts/dock-layout/index.d.ts +++ b/packages/core/ui/layouts/dock-layout/index.d.ts @@ -1,6 +1,7 @@ import { LayoutBase } from '../layout-base'; import { Property } from '../../core/properties'; import { View } from '../../core/view'; +import { Enums } from '../../enums'; /** * A Layout that arranges its children at its outer edges, and allows its last child to take up the remaining space. @@ -23,11 +24,10 @@ export class DockLayout extends LayoutBase { stretchLastChild: boolean; } -export type Dock = 'left' | 'top' | 'right' | 'bottom'; /** * Represents the observable property backing the dock property. */ -export const dockProperty: Property; +export const dockProperty: Property; /** * Represents the observable property backing the stretchLastChild property of each DockLayout instance. diff --git a/packages/core/ui/layouts/flexbox-layout/index.android.ts b/packages/core/ui/layouts/flexbox-layout/index.android.ts index 07e4d7e55..b4201aaba 100644 --- a/packages/core/ui/layouts/flexbox-layout/index.android.ts +++ b/packages/core/ui/layouts/flexbox-layout/index.android.ts @@ -1,6 +1,6 @@ import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, FlexboxLayoutBase, orderProperty, Order, flexGrowProperty, FlexGrow, flexShrinkProperty, FlexShrink, flexWrapBeforeProperty, FlexWrapBefore, alignSelfProperty, AlignSelf, flexDirectionProperty, flexWrapProperty, justifyContentProperty, alignItemsProperty, alignContentProperty } from './flexbox-layout-common'; import { View } from '../../core/view'; -import { Length, minHeightProperty, minWidthProperty } from '../../styling/style-properties'; +import { Length, LengthType } from '../../styling/style-properties'; export * from './flexbox-layout-common'; @@ -149,7 +149,7 @@ export class FlexboxLayout extends FlexboxLayoutBase { child.nativeViewProtected.setLayoutParams(lp); } - public _setChildMinWidthNative(child: View, value: Length): void { + public _setChildMinWidthNative(child: View, value: LengthType): void { // Check needed to maintain back-compat after https://github.com/NativeScript/NativeScript/pull/7804 if (!child._ignoreFlexMinWidthHeightReset) { child._setMinWidthNative(0); @@ -163,7 +163,7 @@ export class FlexboxLayout extends FlexboxLayoutBase { } } - public _setChildMinHeightNative(child: View, value: Length): void { + public _setChildMinHeightNative(child: View, value: LengthType): void { // Check needed to maintain back-compat after https://github.com/NativeScript/NativeScript/pull/7804 if (!child._ignoreFlexMinWidthHeightReset) { child._setMinHeightNative(0); diff --git a/packages/core/ui/layouts/layout-base-common.ts b/packages/core/ui/layouts/layout-base-common.ts index b1d5f2254..ab128d003 100644 --- a/packages/core/ui/layouts/layout-base-common.ts +++ b/packages/core/ui/layouts/layout-base-common.ts @@ -2,7 +2,7 @@ import { LayoutBase as LayoutBaseDefinition } from './layout-base'; import { View, CustomLayoutView, AddChildFromBuilder } from '../core/view'; import { booleanConverter, getViewById } from '../core/view-base'; import { Property } from '../core/properties'; -import { Length } from '../styling/style-properties'; +import { LengthType } from '../styling/style-properties'; export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefinition, AddChildFromBuilder { private _subViews = new Array(); @@ -70,38 +70,38 @@ export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefi } } - get padding(): string | Length { + get padding(): string | LengthType { return this.style.padding; } - set padding(value: string | Length) { + set padding(value: string | LengthType) { this.style.padding = value; } - get paddingTop(): Length { + get paddingTop(): LengthType { return this.style.paddingTop; } - set paddingTop(value: Length) { + set paddingTop(value: LengthType) { this.style.paddingTop = value; } - get paddingRight(): Length { + get paddingRight(): LengthType { return this.style.paddingRight; } - set paddingRight(value: Length) { + set paddingRight(value: LengthType) { this.style.paddingRight = value; } - get paddingBottom(): Length { + get paddingBottom(): LengthType { return this.style.paddingBottom; } - set paddingBottom(value: Length) { + set paddingBottom(value: LengthType) { this.style.paddingBottom = value; } - get paddingLeft(): Length { + get paddingLeft(): LengthType { return this.style.paddingLeft; } - set paddingLeft(value: Length) { + set paddingLeft(value: LengthType) { this.style.paddingLeft = value; } diff --git a/packages/core/ui/layouts/layout-base.android.ts b/packages/core/ui/layouts/layout-base.android.ts index 48f6c9e85..d824da9fc 100644 --- a/packages/core/ui/layouts/layout-base.android.ts +++ b/packages/core/ui/layouts/layout-base.android.ts @@ -1,5 +1,5 @@ import { LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty } from './layout-base-common'; -import { Length, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties'; +import { Length, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, LengthType } from '../styling/style-properties'; export * from './layout-base-common'; @@ -26,31 +26,31 @@ export class LayoutBase extends LayoutBaseCommon { (this.nativeViewProtected).setPassThroughParent(value); } - [paddingTopProperty.getDefault](): Length { + [paddingTopProperty.getDefault](): LengthType { return { value: this._defaultPaddingTop, unit: 'px' }; } - [paddingTopProperty.setNative](value: Length) { + [paddingTopProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0)); } - [paddingRightProperty.getDefault](): Length { + [paddingRightProperty.getDefault](): LengthType { return { value: this._defaultPaddingRight, unit: 'px' }; } - [paddingRightProperty.setNative](value: Length) { + [paddingRightProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0)); } - [paddingBottomProperty.getDefault](): Length { + [paddingBottomProperty.getDefault](): LengthType { return { value: this._defaultPaddingBottom, unit: 'px' }; } - [paddingBottomProperty.setNative](value: Length) { + [paddingBottomProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0)); } - [paddingLeftProperty.getDefault](): Length { + [paddingLeftProperty.getDefault](): LengthType { return { value: this._defaultPaddingLeft, unit: 'px' }; } - [paddingLeftProperty.setNative](value: Length) { + [paddingLeftProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0)); } } diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts index 84a0ab889..195b3ae29 100644 --- a/packages/core/ui/layouts/root-layout/root-layout-common.ts +++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts @@ -1,4 +1,4 @@ -import { AnimationCurve } from '../../enums'; +import { Enums } from '../../enums'; import { Trace } from '../../../trace'; import { CSSType, View } from '../../core/view'; import { GridLayout } from '../grid-layout'; @@ -369,7 +369,7 @@ export const defaultTransitionAnimation: TransitionAnimation = { rotate: 0, opacity: 1, duration: 300, - curve: AnimationCurve.easeIn, + curve: Enums.AnimationCurve.easeIn, }; export const defaultShadeCoverTransitionAnimation: TransitionAnimation = { diff --git a/packages/core/ui/layouts/stack-layout/index.d.ts b/packages/core/ui/layouts/stack-layout/index.d.ts index 4991a75aa..85c2669b3 100644 --- a/packages/core/ui/layouts/stack-layout/index.d.ts +++ b/packages/core/ui/layouts/stack-layout/index.d.ts @@ -1,5 +1,6 @@ import { LayoutBase } from '../layout-base'; import { Property } from '../../core/properties'; +import { Enums } from '../../enums'; /** * A Layout that arranges its children horizontally or vertically. The direction can be set by orientation property. @@ -9,12 +10,10 @@ export class StackLayout extends LayoutBase { * Gets or sets if layout should be horizontal or vertical. * The default value is vertical. */ - orientation: Orientation; + orientation: Enums.OrientationType; } -export type Orientation = 'horizontal' | 'vertical'; - /** * Represents the observable property backing the orientation property of each StackLayout instance. */ -export const orientationProperty: Property; +export const orientationProperty: Property; diff --git a/packages/core/ui/layouts/stack-layout/index.ios.ts b/packages/core/ui/layouts/stack-layout/index.ios.ts index 55913905b..f675944b1 100644 --- a/packages/core/ui/layouts/stack-layout/index.ios.ts +++ b/packages/core/ui/layouts/stack-layout/index.ios.ts @@ -1,6 +1,6 @@ import { StackLayoutBase } from './stack-layout-common'; import { View } from '../../core/view'; -import { VerticalAlignment, HorizontalAlignment } from '../../styling/style-properties'; +import { Enums } from '../../enums'; import { layout } from '../../../utils'; import { Trace } from '../../../trace'; @@ -112,16 +112,16 @@ export class StackLayout extends StackLayoutBase { const childRight = right - left - paddingRight; switch (this.verticalAlignment) { - case VerticalAlignment.MIDDLE: + case Enums.VerticalAlignment.middle: childTop = (bottom - top - this._totalLength) / 2 + paddingTop; break; - case VerticalAlignment.BOTTOM: + case Enums.VerticalAlignment.bottom: childTop = bottom - top - this._totalLength + paddingTop; break; - case VerticalAlignment.TOP: - case VerticalAlignment.STRETCH: + case Enums.VerticalAlignment.top: + case Enums.VerticalAlignment.stretch: default: childTop = paddingTop; break; @@ -146,16 +146,16 @@ export class StackLayout extends StackLayoutBase { const childBottom = bottom - top - paddingBottom; switch (this.horizontalAlignment) { - case HorizontalAlignment.CENTER: + case Enums.HorizontalAlignment.center: childLeft = (right - left - this._totalLength) / 2 + paddingLeft; break; - case HorizontalAlignment.RIGHT: + case Enums.HorizontalAlignment.right: childLeft = right - left - this._totalLength + paddingLeft; break; - case HorizontalAlignment.LEFT: - case HorizontalAlignment.STRETCH: + case Enums.HorizontalAlignment.left: + case Enums.HorizontalAlignment.stretch: default: childLeft = paddingLeft; break; diff --git a/packages/core/ui/layouts/stack-layout/stack-layout-common.ts b/packages/core/ui/layouts/stack-layout/stack-layout-common.ts index 6135fa1f8..46d8aa9fd 100644 --- a/packages/core/ui/layouts/stack-layout/stack-layout-common.ts +++ b/packages/core/ui/layouts/stack-layout/stack-layout-common.ts @@ -1,18 +1,19 @@ -import { StackLayout as StackLayoutDefinition, Orientation } from '.'; +import { StackLayout as StackLayoutDefinition } from '.'; import { LayoutBase } from '../layout-base'; import { CSSType } from '../../core/view'; import { Property, makeParser, makeValidator } from '../../core/properties'; +import { Enums } from '../../enums'; @CSSType('StackLayout') export class StackLayoutBase extends LayoutBase implements StackLayoutDefinition { - public orientation: Orientation; + public orientation: Enums.OrientationType; } StackLayoutBase.prototype.recycleNativeView = 'auto'; -const converter = makeParser(makeValidator('horizontal', 'vertical')); +const converter = makeParser(makeValidator('horizontal', 'vertical')); -export const orientationProperty = new Property({ +export const orientationProperty = new Property({ name: 'orientation', defaultValue: 'vertical', affectsLayout: global.isIOS, diff --git a/packages/core/ui/layouts/wrap-layout/index.android.ts b/packages/core/ui/layouts/wrap-layout/index.android.ts index e20a65a73..7ac4f1901 100644 --- a/packages/core/ui/layouts/wrap-layout/index.android.ts +++ b/packages/core/ui/layouts/wrap-layout/index.android.ts @@ -1,5 +1,5 @@ import { WrapLayoutBase, orientationProperty, itemWidthProperty, itemHeightProperty } from './wrap-layout-common'; -import { Length } from '../../styling/style-properties'; +import { Length, LengthType } from '../../styling/style-properties'; export * from './wrap-layout-common'; @@ -14,11 +14,11 @@ export class WrapLayout extends WrapLayoutBase { this.nativeViewProtected.setOrientation(value === 'vertical' ? org.nativescript.widgets.Orientation.vertical : org.nativescript.widgets.Orientation.horizontal); } - [itemWidthProperty.setNative](value: Length) { + [itemWidthProperty.setNative](value: LengthType) { this.nativeViewProtected.setItemWidth(Length.toDevicePixels(value, -1)); } - [itemHeightProperty.setNative](value: Length) { + [itemHeightProperty.setNative](value: LengthType) { this.nativeViewProtected.setItemHeight(Length.toDevicePixels(value, -1)); } } diff --git a/packages/core/ui/layouts/wrap-layout/index.d.ts b/packages/core/ui/layouts/wrap-layout/index.d.ts index 285eeebb8..3ff18101e 100644 --- a/packages/core/ui/layouts/wrap-layout/index.d.ts +++ b/packages/core/ui/layouts/wrap-layout/index.d.ts @@ -26,8 +26,6 @@ export class WrapLayout extends LayoutBase { itemHeight: Length; } -export type Orientation = 'horizontal' | 'vertical'; - /** * Represents the observable property backing the orientation property of each WrapLayout instance. */ diff --git a/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts b/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts index 85c9055db..a1879fb3d 100644 --- a/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts +++ b/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts @@ -1,23 +1,24 @@ -import { WrapLayout as WrapLayoutDefinition, Orientation } from '.'; +import { WrapLayout as WrapLayoutDefinition } from '.'; import { LayoutBase } from '../layout-base'; import { CSSType } from '../../core/view'; import { Property, makeValidator, makeParser } from '../../core/properties'; -import { Length } from '../../styling/style-properties'; +import { Length, LengthType } from '../../styling/style-properties'; +import { Enums } from '../../enums'; export * from '../layout-base'; @CSSType('WrapLayout') export class WrapLayoutBase extends LayoutBase implements WrapLayoutDefinition { - public orientation: Orientation; - public itemWidth: Length; - public itemHeight: Length; + public orientation: Enums.OrientationType; + public itemWidth: LengthType; + public itemHeight: LengthType; public effectiveItemWidth: number; public effectiveItemHeight: number; } WrapLayoutBase.prototype.recycleNativeView = 'auto'; -export const itemWidthProperty = new Property({ +export const itemWidthProperty = new Property({ name: 'itemWidth', defaultValue: 'auto', affectsLayout: global.isIOS, @@ -26,7 +27,7 @@ export const itemWidthProperty = new Property({ }); itemWidthProperty.register(WrapLayoutBase); -export const itemHeightProperty = new Property({ +export const itemHeightProperty = new Property({ name: 'itemHeight', defaultValue: 'auto', affectsLayout: global.isIOS, @@ -35,10 +36,10 @@ export const itemHeightProperty = new Property({ }); itemHeightProperty.register(WrapLayoutBase); -const converter = makeParser(makeValidator('horizontal', 'vertical')); -export const orientationProperty = new Property({ +const converter = makeParser(makeValidator(Enums.Orientation.horizontal, Enums.Orientation.vertical)); +export const orientationProperty = new Property({ name: 'orientation', - defaultValue: 'horizontal', + defaultValue: Enums.Orientation.horizontal, affectsLayout: global.isIOS, valueConverter: converter, }); diff --git a/packages/core/ui/list-view/index.android.ts b/packages/core/ui/list-view/index.android.ts index 9adfbe54b..bec57c87f 100644 --- a/packages/core/ui/list-view/index.android.ts +++ b/packages/core/ui/list-view/index.android.ts @@ -4,7 +4,7 @@ import { View, KeyedTemplate } from '../core/view'; import { unsetValue } from '../core/properties'; import { Color } from '../../color'; import { Observable } from '../../data/observable'; -import { Length } from '../styling/style-properties'; +import { LengthType } from '../styling/style-properties'; import { StackLayout } from '../layouts/stack-layout'; import { ProxyViewContainer } from '../proxy-view-container'; import { LayoutBase } from '../layouts/layout-base'; @@ -395,7 +395,7 @@ function ensureListViewAdapterClass() { if (this.owner._effectiveRowHeight > -1) { args.view.height = this.owner.rowHeight; } else { - args.view.height = unsetValue; + args.view.height = unsetValue; } this.owner._prepareItem(args.view, index); diff --git a/packages/core/ui/list-view/index.ios.ts b/packages/core/ui/list-view/index.ios.ts index ac763c1d7..8be9bb264 100644 --- a/packages/core/ui/list-view/index.ios.ts +++ b/packages/core/ui/list-view/index.ios.ts @@ -1,7 +1,7 @@ import { ItemEventData } from '.'; import { ListViewBase, separatorColorProperty, itemTemplatesProperty, iosEstimatedRowHeightProperty } from './list-view-common'; import { View, KeyedTemplate } from '../core/view'; -import { Length } from '../styling/style-properties'; +import { Length, LengthType } from '../styling/style-properties'; import { Observable, EventData } from '../../data/observable'; import { Color } from '../../color'; import { layout } from '../../utils'; @@ -365,7 +365,7 @@ export class ListView extends ListViewBase { this._heights[index] = value; } - public _onRowHeightPropertyChanged(oldValue: Length, newValue: Length) { + public _onRowHeightPropertyChanged(oldValue: LengthType, newValue: LengthType) { const value = layout.toDeviceIndependentPixels(this._effectiveRowHeight); const nativeView = this.ios; if (value < 0) { @@ -522,10 +522,10 @@ export class ListView extends ListViewBase { this.refresh(); } - [iosEstimatedRowHeightProperty.getDefault](): Length { + [iosEstimatedRowHeightProperty.getDefault](): LengthType { return DEFAULT_HEIGHT; } - [iosEstimatedRowHeightProperty.setNative](value: Length) { + [iosEstimatedRowHeightProperty.setNative](value: LengthType) { const nativeView = this.ios; const estimatedHeight = Length.toDevicePixels(value, 0); nativeView.estimatedRowHeight = estimatedHeight < 0 ? DEFAULT_HEIGHT : estimatedHeight; diff --git a/packages/core/ui/list-view/list-view-common.ts b/packages/core/ui/list-view/list-view-common.ts index d0df96c7a..19df5ff74 100644 --- a/packages/core/ui/list-view/list-view-common.ts +++ b/packages/core/ui/list-view/list-view-common.ts @@ -1,7 +1,7 @@ import { ListView as ListViewDefinition, ItemsSource, ItemEventData, TemplatedItemsView } from '.'; import { View, ContainerView, Template, KeyedTemplate, CSSType } from '../core/view'; import { Property, CoercibleProperty, CssProperty } from '../core/properties'; -import { Length } from '../styling/style-properties'; +import { Length, LengthType } from '../styling/style-properties'; import { Style } from '../styling/style'; import { Color } from '../../color'; import { Builder } from '../builder'; @@ -36,8 +36,8 @@ export abstract class ListViewBase extends ContainerView implements ListViewDefi public _itemTemplatesInternal = new Array(this._defaultTemplate); public _effectiveRowHeight: number = autoEffectiveRowHeight; - public rowHeight: Length; - public iosEstimatedRowHeight: Length; + public rowHeight: LengthType; + public iosEstimatedRowHeight: LengthType; public items: any[] | ItemsSource; public itemTemplate: string | Template; public itemTemplates: string | Array; @@ -137,7 +137,7 @@ export abstract class ListViewBase extends ContainerView implements ListViewDefi this.refresh(); } - public _onRowHeightPropertyChanged(oldValue: Length, newValue: Length) { + public _onRowHeightPropertyChanged(oldValue: LengthType, newValue: LengthType) { this.refresh(); } @@ -203,11 +203,11 @@ export const itemTemplatesProperty = new Property({ +export const rowHeightProperty = new CoercibleProperty({ name: 'rowHeight', defaultValue: defaultRowHeight, equalityComparer: Length.equals, @@ -223,7 +223,7 @@ export const rowHeightProperty = new CoercibleProperty({ }); rowHeightProperty.register(ListViewBase); -export const iosEstimatedRowHeightProperty = new Property({ +export const iosEstimatedRowHeightProperty = new Property({ name: 'iosEstimatedRowHeight', valueConverter: (v) => Length.parse(v), }); diff --git a/packages/core/ui/scroll-view/index.d.ts b/packages/core/ui/scroll-view/index.d.ts index 5bb019e97..1599695f2 100644 --- a/packages/core/ui/scroll-view/index.d.ts +++ b/packages/core/ui/scroll-view/index.d.ts @@ -81,6 +81,4 @@ export interface ScrollEventData extends EventData { scrollY: number; } -export type Orientation = 'horizontal' | 'vertical'; - export const orientationProperty: Property; diff --git a/packages/core/ui/scroll-view/scroll-view-common.ts b/packages/core/ui/scroll-view/scroll-view-common.ts index 91befe9e4..7cffdeee8 100644 --- a/packages/core/ui/scroll-view/scroll-view-common.ts +++ b/packages/core/ui/scroll-view/scroll-view-common.ts @@ -1,17 +1,18 @@ -import { ScrollView as ScrollViewDefinition, Orientation, ScrollEventData } from '.'; +import { ScrollView as ScrollViewDefinition, ScrollEventData } from '.'; import { ContentView } from '../content-view'; import { profile } from '../../profiling'; import { Property, makeParser, makeValidator } from '../core/properties'; import { CSSType } from '../core/view'; import { booleanConverter } from '../core/view-base'; import { EventData } from '../../data/observable'; +import { Enums } from '../enums'; @CSSType('ScrollView') export abstract class ScrollViewBase extends ContentView implements ScrollViewDefinition { private _scrollChangeCount = 0; public static scrollEvent = 'scroll'; - public orientation: Orientation; + public orientation: Enums.OrientationType; public scrollBarIndicatorVisible: boolean; public isScrollEnabled: boolean; @@ -91,12 +92,12 @@ export interface ScrollViewBase { on(event: 'scroll', callback: (args: ScrollEventData) => void, thisArg?: any); } -const converter = makeParser(makeValidator('horizontal', 'vertical')); -export const orientationProperty = new Property({ +const converter = makeParser(makeValidator(Enums.Orientation.horizontal, Enums.Orientation.vertical)); +export const orientationProperty = new Property({ name: 'orientation', - defaultValue: 'vertical', + defaultValue: Enums.Orientation.vertical, affectsLayout: true, - valueChanged: (target: ScrollViewBase, oldValue: Orientation, newValue: Orientation) => { + valueChanged: (target: ScrollViewBase, oldValue: Enums.OrientationType, newValue: Enums.OrientationType) => { target._onOrientationChanged(); }, valueConverter: converter, diff --git a/packages/core/ui/styling/background-common.ts b/packages/core/ui/styling/background-common.ts index a6d86886b..a0086a4f2 100644 --- a/packages/core/ui/styling/background-common.ts +++ b/packages/core/ui/styling/background-common.ts @@ -1,6 +1,6 @@ // Deifinitions. import { Background as BackgroundDefinition } from './background'; -import { BackgroundRepeat } from '../styling/style-properties'; +import { Enums } from '../enums'; import { LinearGradient } from './linear-gradient'; // Types. import { Color } from '../../color'; @@ -11,7 +11,7 @@ export class Background implements BackgroundDefinition { public color: Color; public image: string | LinearGradient; - public repeat: BackgroundRepeat; + public repeat: Enums.BackgroundRepeatType; public position: string; public size: string; public borderTopColor: Color; @@ -69,7 +69,7 @@ export class Background implements BackgroundDefinition { return clone; } - public withRepeat(value: BackgroundRepeat): Background { + public withRepeat(value: Enums.BackgroundRepeatType): Background { const clone = this.clone(); clone.repeat = value; diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts index c87c089aa..996c7bfc6 100644 --- a/packages/core/ui/styling/background.ios.ts +++ b/packages/core/ui/styling/background.ios.ts @@ -8,7 +8,7 @@ import { iOSNativeHelper, isDataURI, isFileOrResourcePath, layout } from '../../ import { ImageSource } from '../../image-source'; import { CSSValue, parse as cssParse } from '../../css-value'; import { CSSShadow } from './css-shadow'; -import { Length } from './style-properties'; +import { Length, LengthType } from './style-properties'; export * from './background-common'; @@ -735,15 +735,10 @@ function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: CSSShadow, layer.shadowOpacity = background.color?.a ? background.color?.a / 255 : 1; layer.shadowRadius = Length.toDevicePixels(boxShadow.spreadRadius); layer.shadowColor = boxShadow.color.ios.CGColor; - - const adjustedShadowOffset = { - x: Length.toDevicePixels(boxShadow.offsetX), - y: Length.toDevicePixels(boxShadow.offsetY), - }; - layer.shadowOffset = CGSizeMake(adjustedShadowOffset.x, adjustedShadowOffset.y); + layer.shadowOffset = CGSizeMake(Length.toDevicePixels(boxShadow.offsetX), Length.toDevicePixels(boxShadow.offsetY)); // this should match the view's border radius - const cornerRadius = 0; // layout.toDeviceIndependentPixels(view.style.borderRadius); + const cornerRadius = Length.toDevicePixels(view.style.borderRadius); // This has the nice glow with box shadow of 0,0 layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(nativeView.bounds, cornerRadius).CGPath; diff --git a/packages/core/ui/styling/box-shadow.ts b/packages/core/ui/styling/box-shadow.ts new file mode 100644 index 000000000..a2427a64f --- /dev/null +++ b/packages/core/ui/styling/box-shadow.ts @@ -0,0 +1,9 @@ +import { Color } from '../../color'; + +export class BoxShadow { + public offsetX: number; + public offsetY: number; + public blurRadius: number; + public spreadRadius: number; + public color: Color; +} diff --git a/packages/core/ui/styling/converters.ts b/packages/core/ui/styling/converters.ts index ed6547a9f..2779474b2 100644 --- a/packages/core/ui/styling/converters.ts +++ b/packages/core/ui/styling/converters.ts @@ -1,12 +1,12 @@ -import { AnimationCurve } from '../enums'; +import { Enums } from '../enums'; const STYLE_CURVE_MAP = Object.freeze({ - ease: AnimationCurve.ease, - linear: AnimationCurve.linear, - 'ease-in': AnimationCurve.easeIn, - 'ease-out': AnimationCurve.easeOut, - 'ease-in-out': AnimationCurve.easeInOut, - spring: AnimationCurve.spring, + ease: Enums.AnimationCurve.ease, + linear: Enums.AnimationCurve.linear, + 'ease-in': Enums.AnimationCurve.easeIn, + 'ease-out': Enums.AnimationCurve.easeOut, + 'ease-in-out': Enums.AnimationCurve.easeInOut, + spring: Enums.AnimationCurve.spring, }); export function timeConverter(value: string): number { @@ -19,7 +19,7 @@ export function timeConverter(value: string): number { } export function animationTimingFunctionConverter(value: string): any { - return value ? STYLE_CURVE_MAP[value] || parseCubicBezierCurve(value) : AnimationCurve.ease; + return value ? STYLE_CURVE_MAP[value] || parseCubicBezierCurve(value) : Enums.AnimationCurve.ease; } function parseCubicBezierCurve(value: string) { @@ -29,7 +29,7 @@ function parseCubicBezierCurve(value: string) { if (value.startsWith('cubic-bezier') && coordsString && coords.length === 4) { const [x1, x2, y1, y2] = [...coords]; - return AnimationCurve.cubicBezier(x1, x2, y1, y2); + return Enums.AnimationCurve.cubicBezier(x1, x2, y1, y2); } else { throw new Error(`Invalid value for animation: ${value}`); } diff --git a/packages/core/ui/styling/css-shadow.ts b/packages/core/ui/styling/css-shadow.ts index c8820f3b0..645d87913 100644 --- a/packages/core/ui/styling/css-shadow.ts +++ b/packages/core/ui/styling/css-shadow.ts @@ -1,12 +1,12 @@ import { Color } from '../../color'; -import { Length, zeroLength } from './style-properties'; +import { Length, LengthType, zeroLength } from './style-properties'; export interface CSSShadow { inset: boolean; - offsetX: Length; - offsetY: Length; - blurRadius?: Length; - spreadRadius?: Length; + offsetX: LengthType; + offsetY: LengthType; + blurRadius?: LengthType; + spreadRadius?: LengthType; color: Color; } @@ -66,3 +66,40 @@ export function parseCSSShadow(value: string): CSSShadow { color: new Color(colorRaw), }; } + +// if (value.indexOf('rgb') > -1) { +// arr = value.split(' '); +// colorRaw = arr.pop(); +// } else { +// arr = value.split(/[ ,]+/); +// colorRaw = arr.pop(); +// } + +// let offsetX: number; +// let offsetY: number; +// let blurRadius: number; // not currently in use +// let spreadRadius: number; // maybe rename this to just radius +// let color: Color = new Color(colorRaw); + +// if (arr.length === 2) { +// offsetX = parseFloat(arr[0]); +// offsetY = parseFloat(arr[1]); +// } else if (arr.length === 3) { +// offsetX = parseFloat(arr[0]); +// offsetY = parseFloat(arr[1]); +// blurRadius = parseFloat(arr[2]); +// } else if (arr.length === 4) { +// offsetX = parseFloat(arr[0]); +// offsetY = parseFloat(arr[1]); +// blurRadius = parseFloat(arr[2]); +// spreadRadius = parseFloat(arr[3]); +// } else { +// throw new Error('Expected 3, 4 or 5 parameters. Actual: ' + value); +// } +// return { +// offsetX: offsetX, +// offsetY: offsetY, +// blurRadius: blurRadius, +// spreadRadius: spreadRadius, +// color: color, +// }; diff --git a/packages/core/ui/styling/font-common.ts b/packages/core/ui/styling/font-common.ts index e635ccddc..bef98e656 100644 --- a/packages/core/ui/styling/font-common.ts +++ b/packages/core/ui/styling/font-common.ts @@ -15,7 +15,7 @@ export abstract class Font implements FontDefinition { return this.fontWeight === FontWeight.SEMI_BOLD || this.fontWeight === FontWeight.BOLD || this.fontWeight === '700' || this.fontWeight === FontWeight.EXTRA_BOLD || this.fontWeight === FontWeight.BLACK; } - protected constructor(public readonly fontFamily: string, public readonly fontSize: number, public readonly fontStyle: FontStyle, public readonly fontWeight: FontWeight, public readonly fontScale: number) {} + protected constructor(public readonly fontFamily: string, public readonly fontSize: number, public readonly fontStyle: FontStyleType, public readonly fontWeight: FontWeightType, public readonly fontScale: number) {} public abstract getAndroidTypeface(): any /* android.graphics.Typeface */; public abstract getUIFont(defaultFont: any /* UIFont */): any /* UIFont */; @@ -40,15 +40,15 @@ export abstract class Font implements FontDefinition { } } -export type FontStyle = 'normal' | 'italic'; +export type FontStyleType = 'normal' | 'italic'; export namespace FontStyle { export const NORMAL = 'normal'; export const ITALIC = 'italic'; - export const isValid = makeValidator(NORMAL, ITALIC); - export const parse = makeParser(isValid); + export const isValid = makeValidator(NORMAL, ITALIC); + export const parse = makeParser(isValid); } -export type FontWeight = '100' | '200' | '300' | 'normal' | '400' | '500' | '600' | 'bold' | '700' | '800' | '900'; +export type FontWeightType = '100' | '200' | '300' | 'normal' | '400' | '500' | '600' | 'bold' | '700' | '800' | '900'; export namespace FontWeight { export const THIN = '100'; export const EXTRA_LIGHT = '200'; @@ -59,8 +59,8 @@ export namespace FontWeight { export const BOLD = 'bold'; export const EXTRA_BOLD = '800'; export const BLACK = '900'; - export const isValid = makeValidator(THIN, EXTRA_LIGHT, LIGHT, NORMAL, '400', MEDIUM, SEMI_BOLD, BOLD, '700', EXTRA_BOLD, BLACK); - export const parse = makeParser(isValid); + export const isValid = makeValidator(THIN, EXTRA_LIGHT, LIGHT, NORMAL, '400', MEDIUM, SEMI_BOLD, BOLD, '700', EXTRA_BOLD, BLACK); + export const parse = makeParser(isValid); } export function parseFontFamily(value: string): Array { diff --git a/packages/core/ui/styling/font.android.ts b/packages/core/ui/styling/font.android.ts index 005cc1993..d67b7764a 100644 --- a/packages/core/ui/styling/font.android.ts +++ b/packages/core/ui/styling/font.android.ts @@ -1,4 +1,4 @@ -import { Font as FontBase, parseFontFamily, genericFontFamilies, FontWeight } from './font-common'; +import { Font as FontBase, parseFontFamily, genericFontFamilies, FontWeight, FontWeightType } from './font-common'; import { Trace } from '../../trace'; import * as application from '../../application'; import * as fs from '../../file-system'; @@ -14,7 +14,7 @@ export class Font extends FontBase { private _typeface: android.graphics.Typeface; - constructor(family: string, size: number, style: 'normal' | 'italic', weight: FontWeight) { + constructor(family: string, size: number, style: 'normal' | 'italic', weight: FontWeightType) { super(family, size, style, weight, 1); } @@ -26,7 +26,7 @@ export class Font extends FontBase { return new Font(this.fontFamily, this.fontSize, style, this.fontWeight); } - public withFontWeight(weight: FontWeight): Font { + public withFontWeight(weight: FontWeightType): Font { return new Font(this.fontFamily, this.fontSize, this.fontStyle, weight); } @@ -138,7 +138,7 @@ function createTypeface(font: Font): android.graphics.Typeface { return result; } -function getFontWeightSuffix(fontWeight: FontWeight): string { +function getFontWeightSuffix(fontWeight: FontWeightType): string { switch (fontWeight) { case FontWeight.THIN: return android.os.Build.VERSION.SDK_INT >= 16 ? '-thin' : ''; diff --git a/packages/core/ui/styling/font.ios.ts b/packages/core/ui/styling/font.ios.ts index 246072752..7350232b5 100644 --- a/packages/core/ui/styling/font.ios.ts +++ b/packages/core/ui/styling/font.ios.ts @@ -1,4 +1,4 @@ -import { Font as FontBase, parseFontFamily, genericFontFamilies, FontStyle, FontWeight } from './font-common'; +import { Font as FontBase, parseFontFamily, genericFontFamilies, FontStyle, FontWeight, FontStyleType, FontWeightType } from './font-common'; import { Trace } from '../../trace'; import { Device } from '../../platform'; import * as fs from '../../file-system'; @@ -15,7 +15,7 @@ export class Font extends FontBase { private _uiFont: UIFont; - constructor(family: string, size: number, style: FontStyle, weight: FontWeight, scale: number) { + constructor(family: string, size: number, style: FontStyleType, weight: FontWeightType, scale: number) { super(family, size, style, weight, scale); } @@ -23,11 +23,11 @@ export class Font extends FontBase { return new Font(family, this.fontSize, this.fontStyle, this.fontWeight, this.fontScale); } - public withFontStyle(style: FontStyle): Font { + public withFontStyle(style: FontStyleType): Font { return new Font(this.fontFamily, this.fontSize, style, this.fontWeight, this.fontScale); } - public withFontWeight(weight: FontWeight): Font { + public withFontWeight(weight: FontWeightType): Font { return new Font(this.fontFamily, this.fontSize, this.fontStyle, weight, this.fontScale); } @@ -73,7 +73,7 @@ function shouldUseSystemFont(fontFamily: string) { return !fontFamily || fontFamily === genericFontFamilies.sansSerif || fontFamily === genericFontFamilies.system; } -function getNativeFontWeight(fontWeight: FontWeight): number { +function getNativeFontWeight(fontWeight: FontWeightType): number { switch (fontWeight) { case FontWeight.THIN: return UIFontWeightUltraLight; diff --git a/packages/core/ui/styling/style-properties.d.ts b/packages/core/ui/styling/style-properties.d.ts index 5295f71d3..334c689df 100644 --- a/packages/core/ui/styling/style-properties.d.ts +++ b/packages/core/ui/styling/style-properties.d.ts @@ -10,35 +10,35 @@ export type LengthDipUnit = { readonly unit: 'dip'; readonly value: dip }; export type LengthPxUnit = { readonly unit: 'px'; readonly value: px }; export type LengthPercentUnit = { readonly unit: '%'; readonly value: percent }; -export type Length = 'auto' | dip | LengthDipUnit | LengthPxUnit; -export type PercentLength = 'auto' | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit; +export type LengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit; +export type PercentLengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit; export namespace Length { - export function parse(text: string): Length; - export function equals(a: Length, b: Length): boolean; + export function parse(text: string): LengthType; + export function equals(a: LengthType, b: LengthType): boolean; /** * Converts Length unit to device pixels. * @param length The Length to convert. * @param auto Value to use for conversion of "auto". By default is Math.NaN. */ - export function toDevicePixels(length: Length, auto?: number): number; - export function convertToString(length: Length): string; + export function toDevicePixels(length: LengthType, auto?: number): number; + export function convertToString(length: LengthType): string; } export namespace PercentLength { - export function parse(text: string): PercentLength; - export function equals(a: PercentLength, b: PercentLength): boolean; + export function parse(text: string): PercentLengthType; + export function equals(a: PercentLengthType, b: PercentLengthType): boolean; /** - * Converts PercentLength unit to device pixels. - * @param length The PercentLength to convert. + * Converts PercentLengthType unit to device pixels. + * @param length The PercentLengthType to convert. * @param auto Value to use for conversion of "auto". By default is Math.NaN. * @param parentAvailableWidth Value to use as base when converting percent unit. By default is Math.NaN. */ - export function toDevicePixels(length: PercentLength, auto?: number, parentAvailableWidth?: px): number; - export function convertToString(length: PercentLength): string; + export function toDevicePixels(length: PercentLengthType, auto?: number, parentAvailableWidth?: px): number; + export function convertToString(length: PercentLengthType): string; } -export const zeroLength: Length; +export const zeroLength: LengthType; export const rotateProperty: CssAnimationProperty; export const scaleXProperty: CssAnimationProperty; @@ -54,7 +54,7 @@ export const colorProperty: InheritedCssProperty; export const backgroundProperty: ShorthandProperty; export const backgroundColorProperty: CssAnimationProperty; export const backgroundImageProperty: CssProperty; -export const backgroundRepeatProperty: CssProperty; +export const backgroundRepeatProperty: CssProperty; export const backgroundSizeProperty: CssProperty; export const backgroundPositionProperty: CssProperty; @@ -64,41 +64,41 @@ export const borderRightColorProperty: CssProperty; export const borderBottomColorProperty: CssProperty; export const borderLeftColorProperty: CssProperty; -export const borderWidthProperty: ShorthandProperty; -export const borderTopWidthProperty: CssProperty; -export const borderRightWidthProperty: CssProperty; -export const borderBottomWidthProperty: CssProperty; -export const borderLeftWidthProperty: CssProperty; +export const borderWidthProperty: ShorthandProperty; +export const borderTopWidthProperty: CssProperty; +export const borderRightWidthProperty: CssProperty; +export const borderBottomWidthProperty: CssProperty; +export const borderLeftWidthProperty: CssProperty; -export const borderRadiusProperty: ShorthandProperty; -export const borderTopLeftRadiusProperty: CssProperty; -export const borderTopRightRadiusProperty: CssProperty; -export const borderBottomRightRadiusProperty: CssProperty; -export const borderBottomLeftRadiusProperty: CssProperty; +export const borderRadiusProperty: ShorthandProperty; +export const borderTopLeftRadiusProperty: CssProperty; +export const borderTopRightRadiusProperty: CssProperty; +export const borderBottomRightRadiusProperty: CssProperty; +export const borderBottomLeftRadiusProperty: CssProperty; export const zIndexProperty: CssProperty; -export const visibilityProperty: CssProperty; +export const visibilityProperty: CssProperty; export const opacityProperty: CssAnimationProperty; export const minWidthProperty: CssProperty; export const minHeightProperty: CssProperty; -export const widthProperty: CssAnimationProperty; -export const heightProperty: CssAnimationProperty; +export const widthProperty: CssAnimationProperty; +export const heightProperty: CssAnimationProperty; export const lineHeightProperty: CssProperty; -export const marginProperty: ShorthandProperty; -export const marginLeftProperty: CssProperty; -export const marginRightProperty: CssProperty; -export const marginTopProperty: CssProperty; -export const marginBottomProperty: CssProperty; +export const marginProperty: ShorthandProperty; +export const marginLeftProperty: CssProperty; +export const marginRightProperty: CssProperty; +export const marginTopProperty: CssProperty; +export const marginBottomProperty: CssProperty; -export const paddingProperty: ShorthandProperty; -export const paddingLeftProperty: CssProperty; -export const paddingRightProperty: CssProperty; -export const paddingTopProperty: CssProperty; -export const paddingBottomProperty: CssProperty; +export const paddingProperty: ShorthandProperty; +export const paddingLeftProperty: CssProperty; +export const paddingRightProperty: CssProperty; +export const paddingTopProperty: CssProperty; +export const paddingBottomProperty: CssProperty; -export const horizontalAlignmentProperty: CssProperty; -export const verticalAlignmentProperty: CssProperty; +export const horizontalAlignmentProperty: CssProperty; +export const verticalAlignmentProperty: CssProperty; export const fontSizeProperty: InheritedCssProperty; export const fontFamilyProperty: InheritedCssProperty; @@ -111,16 +111,16 @@ export const fontInternalProperty: InheritedCssProperty; export const androidElevationProperty: CssProperty; export const androidDynamicElevationOffsetProperty: CssProperty; -export type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; -export type Visibility = 'visible' | 'hidden' | 'collapse'; -export type HorizontalAlignment = 'left' | 'center' | 'right' | 'stretch'; +export type BackgroundRepeatType = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; +export type VisibilityType = 'visible' | 'hidden' | 'collapse'; +export type HorizontalAlignmentType = 'left' | 'center' | 'right' | 'stretch'; export namespace HorizontalAlignment { export const LEFT: 'left'; export const CENTER: 'center'; export const RIGHT: 'right'; export const STRETCH: 'stretch'; } -export type VerticalAlignment = 'top' | 'middle' | 'bottom' | 'stretch' | 'text-top' | 'text-bottom' | 'super' | 'sub' | 'baseline'; +export type VerticalAlignmentType = 'top' | 'middle' | 'bottom' | 'stretch' | 'text-top' | 'text-bottom' | 'super' | 'sub' | 'baseline'; export namespace VerticalAlignment { export const TOP: 'top'; export const MIDDLE: 'middle'; diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts index be22924f7..88b6d32fa 100644 --- a/packages/core/ui/styling/style-properties.ts +++ b/packages/core/ui/styling/style-properties.ts @@ -14,6 +14,7 @@ import { radiansToDegrees } from '../../utils/number-utils'; import { decompose2DTransformMatrix, getTransformMatrix, matrixArrayToCssMatrix, multiplyAffine2d } from '../../matrix'; import { Trace } from '../../trace'; +import { Enums } from '../enums'; import * as parser from '../../css/parser'; import { LinearGradient } from './linear-gradient'; @@ -23,12 +24,12 @@ export type LengthDipUnit = { readonly unit: 'dip'; readonly value: dip }; export type LengthPxUnit = { readonly unit: 'px'; readonly value: px }; export type LengthPercentUnit = { readonly unit: '%'; readonly value: percent }; -export type Length = 'auto' | dip | LengthDipUnit | LengthPxUnit; -export type PercentLength = 'auto' | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit; +export type LengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit; +export type PercentLengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit; -function equalsCommon(a: Length, b: Length): boolean; -function equalsCommon(a: PercentLength, b: PercentLength): boolean; -function equalsCommon(a: PercentLength, b: PercentLength): boolean { +function equalsCommon(a: LengthType, b: LengthType): boolean; +function equalsCommon(a: PercentLengthType, b: PercentLengthType): boolean; +function equalsCommon(a: PercentLengthType, b: PercentLengthType): boolean { if (a == 'auto') { // tslint:disable-line return b == 'auto'; // tslint:disable-line @@ -59,7 +60,7 @@ function equalsCommon(a: PercentLength, b: PercentLength): boolean { return a.value == b.value && a.unit == b.unit; // tslint:disable-line } -function convertToStringCommon(length: Length | PercentLength): string { +function convertToStringCommon(length: LengthType | PercentLengthType): string { if (length == 'auto') { // tslint:disable-line return 'auto'; @@ -77,7 +78,7 @@ function convertToStringCommon(length: Length | PercentLength): string { return val + length.unit; } -function toDevicePixelsCommon(length: PercentLength, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number { +function toDevicePixelsCommon(length: PercentLengthType, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number { if (length == 'auto') { // tslint:disable-line return auto; @@ -100,7 +101,7 @@ function toDevicePixelsCommon(length: PercentLength, auto: number = Number.NaN, } export namespace PercentLength { - export function parse(fromValue: string | Length): PercentLength { + export function parse(fromValue: string | LengthType): PercentLengthType { if (fromValue == 'auto') { // tslint:disable-line return 'auto'; @@ -145,18 +146,18 @@ export namespace PercentLength { } export const equals: { - (a: PercentLength, b: PercentLength): boolean; + (a: PercentLengthType, b: PercentLengthType): boolean; } = equalsCommon; export const toDevicePixels: { - (length: PercentLength, auto: number, parentAvailableWidth: number): number; + (length: PercentLengthType, auto: number, parentAvailableWidth: number): number; } = toDevicePixelsCommon; export const convertToString: { - (length: PercentLength): string; + (length: PercentLengthType): string; } = convertToStringCommon; } export namespace Length { - export function parse(fromValue: string | Length): Length { + export function parse(fromValue: string | LengthType): LengthType { if (fromValue == 'auto') { // tslint:disable-line return 'auto'; @@ -183,18 +184,18 @@ export namespace Length { return fromValue; } } - export const equals: { (a: Length, b: Length): boolean } = equalsCommon; + export const equals: { (a: LengthType, b: LengthType): boolean } = equalsCommon; export const toDevicePixels: { - (length: Length, auto?: number): number; + (length: LengthType, auto?: number): number; } = toDevicePixelsCommon; export const convertToString: { - (length: Length): string; + (length: LengthType): string; } = convertToStringCommon; } -export const zeroLength: Length = { value: 0, unit: 'px' }; +export const zeroLength: LengthType = { value: 0, unit: 'px' }; -export const minWidthProperty = new CssProperty({ +export const minWidthProperty = new CssProperty({ name: 'minWidth', cssName: 'min-width', defaultValue: zeroLength, @@ -212,7 +213,7 @@ export const minWidthProperty = new CssProperty({ }); minWidthProperty.register(Style); -export const minHeightProperty = new CssProperty({ +export const minHeightProperty = new CssProperty({ name: 'minHeight', cssName: 'min-height', defaultValue: zeroLength, @@ -230,7 +231,7 @@ export const minHeightProperty = new CssProperty({ }); minHeightProperty.register(Style); -export const widthProperty = new CssAnimationProperty({ +export const widthProperty = new CssAnimationProperty({ name: 'width', cssName: 'width', defaultValue: 'auto', @@ -249,7 +250,7 @@ export const widthProperty = new CssAnimationProperty({ }); widthProperty.register(Style); -export const heightProperty = new CssAnimationProperty({ +export const heightProperty = new CssAnimationProperty({ name: 'height', cssName: 'height', defaultValue: 'auto', @@ -268,7 +269,7 @@ export const heightProperty = new CssAnimationProperty({ }); heightProperty.register(Style); -const marginProperty = new ShorthandProperty({ +const marginProperty = new ShorthandProperty({ name: 'margin', cssName: 'margin', getter: function (this: Style) { @@ -282,7 +283,7 @@ const marginProperty = new ShorthandProperty({ }); marginProperty.register(Style); -export const marginLeftProperty = new CssProperty({ +export const marginLeftProperty = new CssProperty({ name: 'marginLeft', cssName: 'margin-left', defaultValue: zeroLength, @@ -292,7 +293,7 @@ export const marginLeftProperty = new CssProperty({ }); marginLeftProperty.register(Style); -export const marginRightProperty = new CssProperty({ +export const marginRightProperty = new CssProperty({ name: 'marginRight', cssName: 'margin-right', defaultValue: zeroLength, @@ -302,7 +303,7 @@ export const marginRightProperty = new CssProperty({ }); marginRightProperty.register(Style); -export const marginTopProperty = new CssProperty({ +export const marginTopProperty = new CssProperty({ name: 'marginTop', cssName: 'margin-top', defaultValue: zeroLength, @@ -312,7 +313,7 @@ export const marginTopProperty = new CssProperty({ }); marginTopProperty.register(Style); -export const marginBottomProperty = new CssProperty({ +export const marginBottomProperty = new CssProperty({ name: 'marginBottom', cssName: 'margin-bottom', defaultValue: zeroLength, @@ -322,7 +323,7 @@ export const marginBottomProperty = new CssProperty({ }); marginBottomProperty.register(Style); -const paddingProperty = new ShorthandProperty({ +const paddingProperty = new ShorthandProperty({ name: 'padding', cssName: 'padding', getter: function (this: Style) { @@ -336,7 +337,7 @@ const paddingProperty = new ShorthandProperty({ }); paddingProperty.register(Style); -export const paddingLeftProperty = new CssProperty({ +export const paddingLeftProperty = new CssProperty({ name: 'paddingLeft', cssName: 'padding-left', defaultValue: zeroLength, @@ -354,7 +355,7 @@ export const paddingLeftProperty = new CssProperty({ }); paddingLeftProperty.register(Style); -export const paddingRightProperty = new CssProperty({ +export const paddingRightProperty = new CssProperty({ name: 'paddingRight', cssName: 'padding-right', defaultValue: zeroLength, @@ -372,7 +373,7 @@ export const paddingRightProperty = new CssProperty({ }); paddingRightProperty.register(Style); -export const paddingTopProperty = new CssProperty({ +export const paddingTopProperty = new CssProperty({ name: 'paddingTop', cssName: 'padding-top', defaultValue: zeroLength, @@ -390,7 +391,7 @@ export const paddingTopProperty = new CssProperty({ }); paddingTopProperty.register(Style); -export const paddingBottomProperty = new CssProperty({ +export const paddingBottomProperty = new CssProperty({ name: 'paddingBottom', cssName: 'padding-bottom', defaultValue: zeroLength, @@ -408,47 +409,21 @@ export const paddingBottomProperty = new CssProperty({ }); paddingBottomProperty.register(Style); -export type HorizontalAlignment = 'left' | 'center' | 'right' | 'stretch'; -export namespace HorizontalAlignment { - export const LEFT = 'left'; - export const CENTER = 'center'; - export const RIGHT = 'right'; - export const STRETCH = 'stretch'; - export const isValid = makeValidator(LEFT, CENTER, RIGHT, STRETCH); - export const parse = makeParser(isValid); -} - -export const horizontalAlignmentProperty = new CssProperty({ +export const horizontalAlignmentProperty = new CssProperty({ name: 'horizontalAlignment', cssName: 'horizontal-align', - defaultValue: HorizontalAlignment.STRETCH, + defaultValue: Enums.HorizontalAlignment.stretch, affectsLayout: global.isIOS, - valueConverter: HorizontalAlignment.parse, + valueConverter: Enums.HorizontalAlignment.parse, }); horizontalAlignmentProperty.register(Style); -export type VerticalAlignment = 'top' | 'middle' | 'bottom' | 'stretch' | 'text-top' | 'text-bottom' | 'super' | 'sub' | 'baseline'; -export namespace VerticalAlignment { - export const TOP = 'top'; - export const MIDDLE = 'middle'; - export const BOTTOM = 'bottom'; - export const STRETCH = 'stretch'; - export const TEXTTOP = 'text-top'; - export const TEXTBOTTOM = 'text-bottom'; - export const SUPER = 'super'; - export const SUB = 'sub'; - export const BASELINE = 'baseline'; - export const isValid = makeValidator(TOP, MIDDLE, BOTTOM, STRETCH, TEXTTOP, TEXTBOTTOM, SUPER, SUB, BASELINE); - export const parse = (value: string) => (value.toLowerCase() === 'center' ? MIDDLE : parseStrict(value)); - const parseStrict = makeParser(isValid); -} - -export const verticalAlignmentProperty = new CssProperty({ +export const verticalAlignmentProperty = new CssProperty({ name: 'verticalAlignment', cssName: 'vertical-align', - defaultValue: VerticalAlignment.STRETCH, + defaultValue: Enums.VerticalAlignmentText.stretch, affectsLayout: global.isIOS, - valueConverter: VerticalAlignment.parse, + valueConverter: Enums.VerticalAlignmentText.parse, }); verticalAlignmentProperty.register(Style); @@ -503,7 +478,7 @@ function parseThickness(value: string): Thickness { } } -function convertToMargins(this: void, value: string | PercentLength): [CssProperty, any][] { +function convertToMargins(this: void, value: string | PercentLengthType): [CssProperty, any][] { if (typeof value === 'string' && value !== 'auto') { const thickness = parseThickness(value); @@ -523,7 +498,7 @@ function convertToMargins(this: void, value: string | PercentLength): [CssProper } } -function convertToPaddings(this: void, value: string | Length): [CssProperty, any][] { +function convertToPaddings(this: void, value: string | LengthType): [CssProperty, any][] { if (typeof value === 'string' && value !== 'auto') { const thickness = parseThickness(value); @@ -835,20 +810,10 @@ export const backgroundColorProperty = new CssAnimationProperty({ }); backgroundColorProperty.register(Style); -export type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; -export namespace BackgroundRepeat { - export const REPEAT = 'repeat'; - export const REPEAT_X = 'repeat-x'; - export const REPEAT_Y = 'repeat-y'; - export const NO_REPEAT = 'no-repeat'; - export const isValid = makeValidator(REPEAT, REPEAT_X, REPEAT_Y, NO_REPEAT); - export const parse = makeParser(isValid); -} - -export const backgroundRepeatProperty = new CssProperty({ +export const backgroundRepeatProperty = new CssProperty({ name: 'backgroundRepeat', cssName: 'background-repeat', - valueConverter: BackgroundRepeat.parse, + valueConverter: Enums.BackgroundRepeat.parse, valueChanged: (target, oldValue, newValue) => { target.backgroundInternal = target.backgroundInternal.withRepeat(newValue); }, @@ -1033,7 +998,7 @@ export const borderLeftColorProperty = new CssProperty({ borderLeftColorProperty.register(Style); // Border Width properties. -const borderWidthProperty = new ShorthandProperty({ +const borderWidthProperty = new ShorthandProperty({ name: 'borderWidth', cssName: 'border-width', getter: function (this: Style) { @@ -1065,7 +1030,7 @@ const borderWidthProperty = new ShorthandProperty({ }); borderWidthProperty.register(Style); -export const borderTopWidthProperty = new CssProperty({ +export const borderTopWidthProperty = new CssProperty({ name: 'borderTopWidth', cssName: 'border-top-width', defaultValue: zeroLength, @@ -1089,7 +1054,7 @@ export const borderTopWidthProperty = new CssProperty({ }); borderTopWidthProperty.register(Style); -export const borderRightWidthProperty = new CssProperty({ +export const borderRightWidthProperty = new CssProperty({ name: 'borderRightWidth', cssName: 'border-right-width', defaultValue: zeroLength, @@ -1113,7 +1078,7 @@ export const borderRightWidthProperty = new CssProperty({ }); borderRightWidthProperty.register(Style); -export const borderBottomWidthProperty = new CssProperty({ +export const borderBottomWidthProperty = new CssProperty({ name: 'borderBottomWidth', cssName: 'border-bottom-width', defaultValue: zeroLength, @@ -1137,7 +1102,7 @@ export const borderBottomWidthProperty = new CssProperty({ }); borderBottomWidthProperty.register(Style); -export const borderLeftWidthProperty = new CssProperty({ +export const borderLeftWidthProperty = new CssProperty({ name: 'borderLeftWidth', cssName: 'border-left-width', defaultValue: zeroLength, @@ -1162,7 +1127,7 @@ export const borderLeftWidthProperty = new CssProperty({ borderLeftWidthProperty.register(Style); // Border Radius properties. -const borderRadiusProperty = new ShorthandProperty({ +const borderRadiusProperty = new ShorthandProperty({ name: 'borderRadius', cssName: 'border-radius', getter: function (this: Style) { @@ -1194,7 +1159,7 @@ const borderRadiusProperty = new ShorthandProperty({ }); borderRadiusProperty.register(Style); -export const borderTopLeftRadiusProperty = new CssProperty({ +export const borderTopLeftRadiusProperty = new CssProperty({ name: 'borderTopLeftRadius', cssName: 'border-top-left-radius', defaultValue: 0, @@ -1210,7 +1175,7 @@ export const borderTopLeftRadiusProperty = new CssProperty({ }); borderTopLeftRadiusProperty.register(Style); -export const borderTopRightRadiusProperty = new CssProperty({ +export const borderTopRightRadiusProperty = new CssProperty({ name: 'borderTopRightRadius', cssName: 'border-top-right-radius', defaultValue: 0, @@ -1226,7 +1191,7 @@ export const borderTopRightRadiusProperty = new CssProperty({ }); borderTopRightRadiusProperty.register(Style); -export const borderBottomRightRadiusProperty = new CssProperty({ +export const borderBottomRightRadiusProperty = new CssProperty({ name: 'borderBottomRightRadius', cssName: 'border-bottom-right-radius', defaultValue: 0, @@ -1242,7 +1207,7 @@ export const borderBottomRightRadiusProperty = new CssProperty({ }); borderBottomRightRadiusProperty.register(Style); -export const borderBottomLeftRadiusProperty = new CssProperty({ +export const borderBottomLeftRadiusProperty = new CssProperty({ name: 'borderBottomLeftRadius', cssName: 'border-bottom-left-radius', defaultValue: 0, @@ -1458,26 +1423,16 @@ const fontProperty = new ShorthandProperty({ }); fontProperty.register(Style); -export type Visibility = 'visible' | 'hidden' | 'collapse'; -export namespace Visibility { - export const VISIBLE = 'visible'; - export const HIDDEN = 'hidden'; - export const COLLAPSE = 'collapse'; - export const isValid = makeValidator(VISIBLE, HIDDEN, COLLAPSE); - export const parse = (value: string) => (value.toLowerCase() === 'collapsed' ? COLLAPSE : parseStrict(value)); - const parseStrict = makeParser(isValid); -} - -export const visibilityProperty = new CssProperty({ +export const visibilityProperty = new CssProperty({ name: 'visibility', cssName: 'visibility', - defaultValue: Visibility.VISIBLE, + defaultValue: Enums.Visibility.visible, affectsLayout: global.isIOS, - valueConverter: Visibility.parse, + valueConverter: Enums.Visibility.parse, valueChanged: (target, oldValue, newValue) => { const view = target.viewRef.get(); if (view) { - view.isCollapsed = newValue === Visibility.COLLAPSE; + view.isCollapsed = newValue === Enums.Visibility.collapse; } else { Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn); } diff --git a/packages/core/ui/styling/style/index.ts b/packages/core/ui/styling/style/index.ts index 1174c6e1f..2ae44c2af 100644 --- a/packages/core/ui/styling/style/index.ts +++ b/packages/core/ui/styling/style/index.ts @@ -4,13 +4,13 @@ import { Font, FontStyle, FontWeight } from '../font'; import { Background } from '../background'; import { dip } from '../../core/view'; import { ViewBase } from '../../core/view-base'; -import { Length, PercentLength, HorizontalAlignment, VerticalAlignment, BackgroundRepeat, Visibility } from '../../styling/style-properties'; +import { LengthType, PercentLengthType } from '../../styling/style-properties'; import { LinearGradient } from '../../styling/linear-gradient'; import { Observable } from '../../../data/observable'; import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from '../../layouts/flexbox-layout'; import { Trace } from '../../../trace'; -import { TextAlignment, TextDecoration, TextTransform, WhiteSpace } from '../../text-base'; +import { Enums } from '../../enums'; import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState } from '../../../accessibility/accessibility-types'; import { CSSShadow } from '../css-shadow'; @@ -31,8 +31,8 @@ export interface CommonLayoutParams { rightMarginPercent: number; bottomMarginPercent: number; - horizontalAlignment: HorizontalAlignment; - verticalAlignment: VerticalAlignment; + horizontalAlignment: Enums.HorizontalAlignmentType; + verticalAlignment: Enums.VerticalAlignmentType; } export class Style extends Observable implements StyleDefinition { @@ -120,7 +120,7 @@ export class Style extends Observable implements StyleDefinition { public background: string; public backgroundColor: Color; public backgroundImage: string | LinearGradient; - public backgroundRepeat: BackgroundRepeat; + public backgroundRepeat: Enums.BackgroundRepeatType; public backgroundSize: string; public backgroundPosition: string; @@ -129,16 +129,16 @@ export class Style extends Observable implements StyleDefinition { public borderRightColor: Color; public borderBottomColor: Color; public borderLeftColor: Color; - public borderWidth: string | Length; - public borderTopWidth: Length; - public borderRightWidth: Length; - public borderBottomWidth: Length; - public borderLeftWidth: Length; - public borderRadius: string | Length; - public borderTopLeftRadius: Length; - public borderTopRightRadius: Length; - public borderBottomRightRadius: Length; - public borderBottomLeftRadius: Length; + public borderWidth: string | LengthType; + public borderTopWidth: LengthType; + public borderRightWidth: LengthType; + public borderBottomWidth: LengthType; + public borderLeftWidth: LengthType; + public borderRadius: string | LengthType; + public borderTopLeftRadius: LengthType; + public borderTopRightRadius: LengthType; + public borderBottomRightRadius: LengthType; + public borderBottomLeftRadius: LengthType; public boxShadow: CSSShadow; @@ -152,32 +152,32 @@ export class Style extends Observable implements StyleDefinition { public androidDynamicElevationOffset: number; public zIndex: number; public opacity: number; - public visibility: Visibility; + public visibility: Enums.VisibilityType; public letterSpacing: number; public lineHeight: number; - public textAlignment: TextAlignment; - public textDecoration: TextDecoration; - public textTransform: TextTransform; + public textAlignment: Enums.TextAlignmentType; + public textDecoration: Enums.TextDecorationType; + public textTransform: Enums.TextTransformType; public textShadow: CSSShadow; - public whiteSpace: WhiteSpace; + public whiteSpace: Enums.WhiteSpaceType; - public minWidth: Length; - public minHeight: Length; - public width: PercentLength; - public height: PercentLength; - public margin: string | PercentLength; - public marginLeft: PercentLength; - public marginTop: PercentLength; - public marginRight: PercentLength; - public marginBottom: PercentLength; - public padding: string | Length; - public paddingLeft: Length; - public paddingTop: Length; - public paddingRight: Length; - public paddingBottom: Length; - public horizontalAlignment: HorizontalAlignment; - public verticalAlignment: VerticalAlignment; + public minWidth: LengthType; + public minHeight: LengthType; + public width: PercentLengthType; + public height: PercentLengthType; + public margin: string | PercentLengthType; + public marginLeft: PercentLengthType; + public marginTop: PercentLengthType; + public marginRight: PercentLengthType; + public marginBottom: PercentLengthType; + public padding: string | LengthType; + public paddingLeft: LengthType; + public paddingTop: LengthType; + public paddingRight: LengthType; + public paddingBottom: LengthType; + public horizontalAlignment: Enums.HorizontalAlignmentType; + public verticalAlignment: Enums.VerticalAlignmentType; // TabView-specific props public tabTextFontSize: number; @@ -197,9 +197,9 @@ export class Style extends Observable implements StyleDefinition { public androidStatusBarBackground: Color; // ActionBar-specific props - public androidContentInset: string | Length; - public androidContentInsetLeft: Length; - public androidContentInsetRight: Length; + public androidContentInset: string | LengthType; + public androidContentInsetLeft: LengthType; + public androidContentInsetRight: LengthType; //flexbox layout properties public flexDirection: FlexDirection; diff --git a/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts b/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts index 32a555709..747125ced 100644 --- a/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts +++ b/packages/core/ui/tab-navigation-base/tab-strip-item/index.ts @@ -12,7 +12,8 @@ import { ViewBase } from '../../core/view-base'; import { backgroundColorProperty, backgroundInternalProperty } from '../../styling/style-properties'; import { Image } from '../../image'; import { Label } from '../../label'; -import { textTransformProperty, TextTransform } from '../../text-base'; +import { textTransformProperty } from '../../text-base'; +import { Enums } from '../../enums'; @CSSType('TabStripItem') export class TabStripItem extends View implements TabStripItemDefinition, AddChildFromBuilder { @@ -269,13 +270,13 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi return tabStripParent && tabStripParent.setTabBarItemBackgroundColor(this, value); } - [textTransformProperty.getDefault](): TextTransform { + [textTransformProperty.getDefault](): Enums.TextTransformType { const parent = this.parent; const tabStripParent = parent && parent.parent; return tabStripParent && tabStripParent.getTabBarItemTextTransform(this); } - [textTransformProperty.setNative](value: TextTransform) { + [textTransformProperty.setNative](value: Enums.TextTransformType) { const parent = this.parent; const tabStripParent = parent && parent.parent; diff --git a/packages/core/ui/tab-view/index.android.ts b/packages/core/ui/tab-view/index.android.ts index 56c11cc01..40ab0c65f 100644 --- a/packages/core/ui/tab-view/index.android.ts +++ b/packages/core/ui/tab-view/index.android.ts @@ -2,7 +2,8 @@ import { TabViewItem as TabViewItemDefinition } from '.'; import { Font } from '../styling/font'; import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, tabTextColorProperty, tabBackgroundColorProperty, tabTextFontSizeProperty, selectedTabTextColorProperty, androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty, traceCategory, traceMissingIcon } from './tab-view-common'; -import { textTransformProperty, TextTransform, getTransformedText } from '../text-base'; +import { textTransformProperty, getTransformedText } from '../text-base'; +import { Enums } from '../enums'; import { ImageSource } from '../../image-source'; import { Trace } from '../../trace'; import { Color } from '../../color'; @@ -406,7 +407,7 @@ export class TabViewItem extends TabViewItemBase { [textTransformProperty.getDefault](): 'default' { return 'default'; } - [textTransformProperty.setNative](value: TextTransform | 'default') { + [textTransformProperty.setNative](value: Enums.TextTransformType | 'default') { const tv = this.nativeViewProtected; if (value === 'default') { tv.setTransformationMethod(this._defaultTransformationMethod); diff --git a/packages/core/ui/tab-view/index.ios.ts b/packages/core/ui/tab-view/index.ios.ts index 853567d11..1f39fe920 100644 --- a/packages/core/ui/tab-view/index.ios.ts +++ b/packages/core/ui/tab-view/index.ios.ts @@ -7,7 +7,8 @@ import { TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty, tab import { Color } from '../../color'; import { Trace } from '../../trace'; import { fontInternalProperty } from '../styling/style-properties'; -import { textTransformProperty, TextTransform, getTransformedText } from '../text-base'; +import { textTransformProperty, getTransformedText } from '../text-base'; +import { Enums } from '../enums'; import { ImageSource } from '../../image-source'; import { profile } from '../../profiling'; import { Frame } from '../frame'; @@ -279,7 +280,7 @@ export class TabViewItem extends TabViewItemBase { updateTitleAndIconPositions(this, this.__controller.tabBarItem, this.__controller); } - [textTransformProperty.setNative](value: TextTransform) { + [textTransformProperty.setNative](value: Enums.TextTransformType) { this._update(); } } diff --git a/packages/core/ui/tab-view/tab-view-common.ts b/packages/core/ui/tab-view/tab-view-common.ts index a9064382a..3bc04b958 100644 --- a/packages/core/ui/tab-view/tab-view-common.ts +++ b/packages/core/ui/tab-view/tab-view-common.ts @@ -5,7 +5,7 @@ import { Style } from '../styling/style'; import { EventData } from '../../data/observable'; import { Color } from '../../color'; import { Property, CssProperty, CoercibleProperty } from '../core/properties'; -import { TextTransform } from '../text-base'; +import { Enums } from '../enums'; import { Trace } from '../../trace'; export const traceCategory = 'TabView'; @@ -16,10 +16,10 @@ export abstract class TabViewItemBase extends ViewBase implements TabViewItemDef private _view: View; private _iconSource: string; - get textTransform(): TextTransform { + get textTransform(): Enums.TextTransformType { return this.style.textTransform; } - set textTransform(value: TextTransform) { + set textTransform(value: Enums.TextTransformType) { this.style.textTransform = value; } diff --git a/packages/core/ui/tabs/index.android.ts b/packages/core/ui/tabs/index.android.ts index 842ef66be..f0a24a13a 100644 --- a/packages/core/ui/tabs/index.android.ts +++ b/packages/core/ui/tabs/index.android.ts @@ -2,7 +2,7 @@ import { TabContentItem } from '../tab-navigation-base/tab-content-item'; import { TabStrip } from '../tab-navigation-base/tab-strip'; import { TabStripItem } from '../tab-navigation-base/tab-strip-item'; -import { TextTransform } from '../text-base'; +import { Enums } from '../enums'; // Requires import * as application from '../../application'; @@ -379,7 +379,7 @@ export class Tabs extends TabsBase { private _pagerAdapter: androidx.viewpager.widget.PagerAdapter; private _androidViewId = -1; public _originalBackground: any; - private _textTransform: TextTransform = 'uppercase'; + private _textTransform: Enums.TextTransformType = 'uppercase'; private _selectedItemColor: Color; private _unSelectedItemColor: Color; public animationEnabled: boolean; @@ -649,9 +649,9 @@ export class Tabs extends TabsBase { }); } - private getItemLabelTextTransform(tabStripItem: TabStripItem): TextTransform { + private getItemLabelTextTransform(tabStripItem: TabStripItem): Enums.TextTransformType { const nestedLabel = tabStripItem.label; - let textTransform: TextTransform = null; + let textTransform: Enums.TextTransformType = null; if (nestedLabel && nestedLabel.style.textTransform !== 'initial') { textTransform = nestedLabel.style.textTransform; } else if (tabStripItem.style.textTransform !== 'initial') { @@ -923,21 +923,21 @@ export class Tabs extends TabsBase { tabStripItem.nativeViewProtected.setTypeface(value.getAndroidTypeface()); } - public getTabBarItemTextTransform(tabStripItem: TabStripItem): TextTransform { + public getTabBarItemTextTransform(tabStripItem: TabStripItem): Enums.TextTransformType { return this.getItemLabelTextTransform(tabStripItem); } - public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { + public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: Enums.TextTransformType): void { const nestedLabel = tabStripItem.label; const title = getTransformedText(nestedLabel.text, value); tabStripItem.nativeViewProtected.setText(title); } - public getTabBarTextTransform(): TextTransform { + public getTabBarTextTransform(): Enums.TextTransformType { return this._textTransform; } - public setTabBarTextTransform(value: TextTransform): void { + public setTabBarTextTransform(value: Enums.TextTransformType): void { const items = this.tabStrip && this.tabStrip.items; if (items) { items.forEach((tabStripItem) => { diff --git a/packages/core/ui/tabs/index.ios.ts b/packages/core/ui/tabs/index.ios.ts index 1a186804c..ae1f2932c 100644 --- a/packages/core/ui/tabs/index.ios.ts +++ b/packages/core/ui/tabs/index.ios.ts @@ -2,7 +2,7 @@ import { TabContentItem } from '../tab-navigation-base/tab-content-item'; import { TabStrip } from '../tab-navigation-base/tab-strip'; import { TabStripItem } from '../tab-navigation-base/tab-strip-item'; -import { TextTransform } from '../text-base'; +import { Enums } from '../enums'; // Requires import { Color } from '../../color'; @@ -1022,7 +1022,7 @@ export class Tabs extends TabsBase { this._ios.tabBar.selectedItemTitleFont = font; } - public getTabBarTextTransform(): TextTransform { + public getTabBarTextTransform(): Enums.TextTransformType { switch (this._ios.tabBar.titleTextTransform) { case MDCTabBarTextTransform.None: return 'none'; @@ -1034,7 +1034,7 @@ export class Tabs extends TabsBase { } } - public setTabBarTextTransform(value: TextTransform): void { + public setTabBarTextTransform(value: Enums.TextTransformType): void { if (value === 'none') { this._ios.tabBar.titleTextTransform = MDCTabBarTextTransform.None; } else if (value === 'uppercase') { diff --git a/packages/core/ui/text-base/formatted-string.d.ts b/packages/core/ui/text-base/formatted-string.d.ts index 9cd836702..1c2745d22 100644 --- a/packages/core/ui/text-base/formatted-string.d.ts +++ b/packages/core/ui/text-base/formatted-string.d.ts @@ -7,7 +7,7 @@ import { ObservableArray } from '../../data/observable-array'; import { ViewBase } from '../core/view-base'; import { Color } from '../../color'; import { FontStyle, FontWeight } from '../styling/font'; -import { TextDecoration } from '../text-base'; +import { Enums } from '../enums'; /** * A class used to create a formatted (rich text) string. @@ -46,7 +46,7 @@ export class FormattedString extends ViewBase { /** * Gets or sets text decorations which will be used for all spans that doesn't have a specific value. */ - public textDecoration: TextDecoration; + public textDecoration: Enums.TextDecorationType; /** * Gets or sets the font foreground color which will be used for all spans that doesn't have a specific value. diff --git a/packages/core/ui/text-base/formatted-string.ts b/packages/core/ui/text-base/formatted-string.ts index 1251df8dc..5f5c43451 100644 --- a/packages/core/ui/text-base/formatted-string.ts +++ b/packages/core/ui/text-base/formatted-string.ts @@ -6,7 +6,7 @@ import { AddArrayFromBuilder, AddChildFromBuilder } from '../core/view'; import { ViewBase } from '../core/view-base'; import { Color } from '../../color'; import { FontStyle, FontWeight } from '../styling/font'; -import { TextDecoration } from '../text-base'; +import { Enums } from '../enums'; export class FormattedString extends ViewBase implements FormattedStringDefinition, AddArrayFromBuilder, AddChildFromBuilder { private _spans: ObservableArray; @@ -45,10 +45,10 @@ export class FormattedString extends ViewBase implements FormattedStringDefiniti this.style.fontWeight = value; } - get textDecoration(): TextDecoration { + get textDecoration(): Enums.TextDecorationType { return this.style.textDecoration; } - set textDecoration(value: TextDecoration) { + set textDecoration(value: Enums.TextDecorationType) { this.style.textDecoration = value; } diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts index 0f45f29f8..8ef522e50 100644 --- a/packages/core/ui/text-base/index.android.ts +++ b/packages/core/ui/text-base/index.android.ts @@ -1,15 +1,16 @@ // Types -import { TextDecoration, TextAlignment, TextTransform, WhiteSpace, getClosestPropertyValue } from './text-base-common'; +import { getClosestPropertyValue } from './text-base-common'; import { CSSShadow } from '../styling/css-shadow'; // Requires import { Font } from '../styling/font'; -import { backgroundColorProperty, VerticalAlignment } from '../styling/style-properties'; +import { backgroundColorProperty } from '../styling/style-properties'; import { TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textProperty, textTransformProperty, textShadowProperty, letterSpacingProperty, whiteSpaceProperty, lineHeightProperty, isBold, resetSymbol } from './text-base-common'; import { Color } from '../../color'; -import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../styling/style-properties'; +import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, LengthType } from '../styling/style-properties'; import { FormattedString } from './formatted-string'; import { Span } from './span'; +import { Enums } from '../enums'; import { layout } from '../../utils'; import { isString, isNullOrUndefined } from '../../utils/types'; @@ -94,7 +95,7 @@ function initializeClickableSpan(): void { } interface BaselineAdjustedSpan { - new (fontSize: number, align?: VerticalAlignment): android.text.style.MetricAffectingSpan; + new (fontSize: number, align?: Enums.VerticalAlignmentTextType): android.text.style.MetricAffectingSpan; } let BaselineAdjustedSpan: BaselineAdjustedSpan; @@ -106,9 +107,9 @@ function initializeBaselineAdjustedSpan(): void { @NativeClass class BaselineAdjustedSpanImpl extends android.text.style.MetricAffectingSpan { fontSize: number; - align: VerticalAlignment = 'baseline'; + align: Enums.VerticalAlignmentTextType = 'baseline'; - constructor(fontSize: number, align?: VerticalAlignment) { + constructor(fontSize: number, align?: Enums.VerticalAlignmentTextType) { super(); this.align = align; @@ -150,7 +151,7 @@ function initializeBaselineAdjustedSpan(): void { return (paint.baselineShift = (metrics.descent - metrics.ascent) / 2 - metrics.descent); } - if (this.align === 'super') { + if (this.align === 'sup') { return (paint.baselineShift = -this.fontSize * 0.4); } @@ -260,7 +261,7 @@ export class TextBase extends TextBaseCommon { } } - [textTransformProperty.setNative](value: TextTransform) { + [textTransformProperty.setNative](value: Enums.TextTransformType) { if (value === 'initial') { this.nativeTextViewProtected.setTransformationMethod(this._defaultTransformationMethod); @@ -275,10 +276,10 @@ export class TextBase extends TextBaseCommon { this.nativeTextViewProtected.setTransformationMethod(new TextTransformation(this)); } - [textAlignmentProperty.getDefault](): TextAlignment { + [textAlignmentProperty.getDefault](): Enums.TextAlignmentType { return 'initial'; } - [textAlignmentProperty.setNative](value: TextAlignment) { + [textAlignmentProperty.setNative](value: Enums.TextAlignmentType) { const verticalGravity = this.nativeTextViewProtected.getGravity() & android.view.Gravity.VERTICAL_GRAVITY_MASK; switch (value) { case 'initial': @@ -298,7 +299,7 @@ export class TextBase extends TextBaseCommon { // Overridden in TextField because setSingleLine(false) will remove methodTransformation. // and we don't want to allow TextField to be multiline - [whiteSpaceProperty.setNative](value: WhiteSpace) { + [whiteSpaceProperty.setNative](value: Enums.WhiteSpaceType) { const nativeView = this.nativeTextViewProtected; switch (value) { case 'initial': @@ -359,7 +360,7 @@ export class TextBase extends TextBaseCommon { return (this._paintFlags = this.nativeTextViewProtected.getPaintFlags()); } - [textDecorationProperty.setNative](value: number | TextDecoration) { + [textDecorationProperty.setNative](value: number | Enums.TextDecorationType) { switch (value) { case 'none': this.nativeTextViewProtected.setPaintFlags(0); @@ -399,31 +400,31 @@ export class TextBase extends TextBaseCommon { org.nativescript.widgets.ViewHelper.setLetterspacing(this.nativeTextViewProtected, value); } - [paddingTopProperty.getDefault](): Length { + [paddingTopProperty.getDefault](): LengthType { return { value: this._defaultPaddingTop, unit: 'px' }; } - [paddingTopProperty.setNative](value: Length) { + [paddingTopProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeTextViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0)); } - [paddingRightProperty.getDefault](): Length { + [paddingRightProperty.getDefault](): LengthType { return { value: this._defaultPaddingRight, unit: 'px' }; } - [paddingRightProperty.setNative](value: Length) { + [paddingRightProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeTextViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0)); } - [paddingBottomProperty.getDefault](): Length { + [paddingBottomProperty.getDefault](): LengthType { return { value: this._defaultPaddingBottom, unit: 'px' }; } - [paddingBottomProperty.setNative](value: Length) { + [paddingBottomProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeTextViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0)); } - [paddingLeftProperty.getDefault](): Length { + [paddingLeftProperty.getDefault](): LengthType { return { value: this._defaultPaddingLeft, unit: 'px' }; } - [paddingLeftProperty.setNative](value: Length) { + [paddingLeftProperty.setNative](value: LengthType) { org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeTextViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0)); } @@ -470,7 +471,7 @@ function getCapitalizedString(str: string): string { return newWords.join(' '); } -export function getTransformedText(text: string, textTransform: TextTransform): string { +export function getTransformedText(text: string, textTransform: Enums.TextTransformType): string { if (!text || !isString(text)) { return ''; } @@ -566,7 +567,7 @@ function setSpanModifiers(ssb: android.text.SpannableStringBuilder, span: Span, ssb.setSpan(new android.text.style.BackgroundColorSpan(backgroundColor.android), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); } - const textDecoration: TextDecoration = getClosestPropertyValue(textDecorationProperty, span); + const textDecoration: Enums.TextDecorationType = getClosestPropertyValue(textDecorationProperty, span); if (textDecoration) { const underline = textDecoration.indexOf('underline') !== -1; diff --git a/packages/core/ui/text-base/index.d.ts b/packages/core/ui/text-base/index.d.ts index afa6cd3e5..8dc350b34 100644 --- a/packages/core/ui/text-base/index.d.ts +++ b/packages/core/ui/text-base/index.d.ts @@ -3,6 +3,7 @@ import { FormattedString } from './formatted-string'; import { Style } from '../styling/style'; import { Length } from '../styling/style-properties'; import { Property, CssProperty, InheritedCssProperty } from '../core/properties'; +import { Enums } from '../enums'; import { CSSShadow } from '../styling/css-shadow'; export class TextBase extends View implements AddChildFromBuilder { @@ -40,17 +41,17 @@ export class TextBase extends View implements AddChildFromBuilder { /** * Gets or sets text-alignment style property. */ - textAlignment: TextAlignment; + textAlignment: Enums.TextAlignmentType; /** * Gets or sets text decorations style property. */ - textDecoration: TextDecoration; + textDecoration: Enums.TextDecorationType; /** * Gets or sets text transform style property. */ - textTransform: TextTransform; + textTransform: Enums.TextTransformType; /** * Gets or sets text shadow style property. @@ -60,7 +61,7 @@ export class TextBase extends View implements AddChildFromBuilder { /** * Gets or sets white space style property. */ - whiteSpace: WhiteSpace; + whiteSpace: Enums.WhiteSpaceType; /** * Gets or sets padding style property. @@ -122,20 +123,15 @@ export interface TextTransformation { export const textProperty: Property; export const formattedTextProperty: Property; -export type WhiteSpace = 'initial' | 'normal' | 'nowrap'; -export type TextAlignment = 'initial' | 'left' | 'center' | 'right'; -export type TextTransform = 'initial' | 'none' | 'capitalize' | 'uppercase' | 'lowercase'; -export type TextDecoration = 'none' | 'underline' | 'line-through' | 'underline line-through'; - -export const textAlignmentProperty: InheritedCssProperty; -export const textDecorationProperty: CssProperty; -export const textTransformProperty: CssProperty; +export const textAlignmentProperty: InheritedCssProperty; +export const textDecorationProperty: CssProperty; +export const textTransformProperty: CssProperty; export const textShadowProperty: CssProperty; -export const whiteSpaceProperty: CssProperty; +export const whiteSpaceProperty: CssProperty; export const letterSpacingProperty: CssProperty; export const lineHeightProperty: CssProperty; //Used by tab view -export function getTransformedText(text: string, textTransform: TextTransform): string; +export function getTransformedText(text: string, textTransform: Enums.TextTransformType): string; export const resetSymbol: symbol; diff --git a/packages/core/ui/text-base/index.ios.ts b/packages/core/ui/text-base/index.ios.ts index 7b1c2488f..f984900fc 100644 --- a/packages/core/ui/text-base/index.ios.ts +++ b/packages/core/ui/text-base/index.ios.ts @@ -1,5 +1,5 @@ // Types -import { TextDecoration, TextAlignment, TextTransform, getClosestPropertyValue } from './text-base-common'; +import { getClosestPropertyValue } from './text-base-common'; import { CSSShadow } from '../styling/css-shadow'; // Requires @@ -8,10 +8,11 @@ import { TextBaseCommon, textProperty, formattedTextProperty, textAlignmentPrope import { Color } from '../../color'; import { FormattedString } from './formatted-string'; import { Span } from './span'; -import { colorProperty, fontInternalProperty, Length, VerticalAlignment } from '../styling/style-properties'; +import { colorProperty, fontInternalProperty, Length } from '../styling/style-properties'; import { isString, isNullOrUndefined } from '../../utils/types'; import { iOSNativeHelper } from '../../utils'; import { Trace } from '../../trace'; +import { Enums } from '../enums'; export * from './text-base-common'; @@ -157,7 +158,7 @@ export class TextBase extends TextBaseCommon { } } - [textAlignmentProperty.setNative](value: TextAlignment) { + [textAlignmentProperty.setNative](value: Enums.TextAlignmentType) { const nativeView = this.nativeTextViewProtected; switch (value) { case 'initial': @@ -173,11 +174,11 @@ export class TextBase extends TextBaseCommon { } } - [textDecorationProperty.setNative](value: TextDecoration) { + [textDecorationProperty.setNative](value: Enums.TextDecorationType) { this._setNativeText(); } - [textTransformProperty.setNative](value: TextTransform) { + [textTransformProperty.setNative](value: Enums.TextTransformType) { this._setNativeText(); } @@ -374,7 +375,6 @@ export class TextBase extends TextBaseCommon { } layer.shadowOffset = CGSizeMake(Length.toDevicePixels(value.offsetX), Length.toDevicePixels(value.offsetY)); - // layer.shadowOffset = CGSizeMake(Length.toDevicePixels(value.offsetX), Length.toDevicePixels(value.offsetY)); layer.masksToBounds = false; // NOTE: generally should not need shouldRasterize @@ -410,7 +410,7 @@ export class TextBase extends TextBaseCommon { return mas; } - getBaselineOffset(font: UIFont, align?: VerticalAlignment): number { + getBaselineOffset(font: UIFont, align?: Enums.VerticalAlignmentTextType): number { if (!align || ['stretch', 'baseline'].includes(align)) { return 0; } @@ -435,7 +435,7 @@ export class TextBase extends TextBaseCommon { return (font.descender - font.ascender) / 2 - font.descender; } - if (align === 'super') { + if (align === 'sup') { return -this.fontSize * 0.4; } @@ -465,7 +465,7 @@ export class TextBase extends TextBaseCommon { attrDict[NSBackgroundColorAttributeName] = backgroundColor.ios; } - const textDecoration: TextDecoration = getClosestPropertyValue(textDecorationProperty, span); + const textDecoration: Enums.TextDecorationType = getClosestPropertyValue(textDecorationProperty, span); if (textDecoration) { const underline = textDecoration.indexOf('underline') !== -1; @@ -487,7 +487,7 @@ export class TextBase extends TextBaseCommon { } } -export function getTransformedText(text: string, textTransform: TextTransform): string { +export function getTransformedText(text: string, textTransform: Enums.TextTransformType): string { if (!text || !isString(text)) { return ''; } diff --git a/packages/core/ui/text-base/span.d.ts b/packages/core/ui/text-base/span.d.ts index 31eb8ef50..dd8478538 100644 --- a/packages/core/ui/text-base/span.d.ts +++ b/packages/core/ui/text-base/span.d.ts @@ -1,7 +1,7 @@ import { Color } from '../../color'; import { ViewBase } from '../core/view-base'; import { FontStyle, FontWeight } from '../styling/font'; -import { TextDecoration } from '../text-base'; +import { Enums } from '../enums'; /** * A class used to create a single part of formatted string with a common text properties. @@ -30,7 +30,7 @@ export class Span extends ViewBase { /** * Gets or sets text decorations for the span. */ - public textDecoration: TextDecoration; + public textDecoration: Enums.TextDecorationType; /** * Gets or sets the font foreground color of the span. diff --git a/packages/core/ui/text-base/span.ts b/packages/core/ui/text-base/span.ts index c33abf481..f4fc8ceb8 100644 --- a/packages/core/ui/text-base/span.ts +++ b/packages/core/ui/text-base/span.ts @@ -2,7 +2,7 @@ import { Span as SpanDefinition } from './span'; import { ViewBase } from '../core/view-base'; import { FontStyle, FontWeight } from '../styling/font'; -import { TextDecoration } from '../text-base'; +import { Enums } from '../enums'; import { EventData } from '../../data/observable'; import { isNullOrUndefined, isString } from '../../utils/types'; @@ -41,10 +41,10 @@ export class Span extends ViewBase implements SpanDefinition { this.style.fontWeight = value; } - get textDecoration(): TextDecoration { + get textDecoration(): Enums.TextDecorationType { return this.style.textDecoration; } - set textDecoration(value: TextDecoration) { + set textDecoration(value: Enums.TextDecorationType) { this.style.textDecoration = value; } diff --git a/packages/core/ui/text-base/text-base-common.ts b/packages/core/ui/text-base/text-base-common.ts index d3be1d299..9e375d974 100644 --- a/packages/core/ui/text-base/text-base-common.ts +++ b/packages/core/ui/text-base/text-base-common.ts @@ -9,16 +9,13 @@ import { Span } from './span'; import { View } from '../core/view'; import { Property, CssProperty, InheritedCssProperty, makeValidator, makeParser } from '../core/properties'; import { Style } from '../styling/style'; -import { Length } from '../styling/style-properties'; +import { Length, LengthType } from '../styling/style-properties'; import { Observable } from '../../data/observable'; - -import { TextAlignment, TextDecoration, TextTransform, WhiteSpace } from './text-base-interfaces'; +import { Enums } from '../enums'; import { TextBase as TextBaseDefinition } from '.'; import { Color } from '../../color'; import { CSSShadow, parseCSSShadow } from '../styling/css-shadow'; -export * from './text-base-interfaces'; - const CHILD_SPAN = 'Span'; const CHILD_FORMATTED_TEXT = 'formattedText'; const CHILD_FORMATTED_STRING = 'FormattedString'; @@ -94,24 +91,24 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition this.style.lineHeight = value; } - get textAlignment(): TextAlignment { + get textAlignment(): Enums.TextAlignmentType { return this.style.textAlignment; } - set textAlignment(value: TextAlignment) { + set textAlignment(value: Enums.TextAlignmentType) { this.style.textAlignment = value; } - get textDecoration(): TextDecoration { + get textDecoration(): Enums.TextDecorationType { return this.style.textDecoration; } - set textDecoration(value: TextDecoration) { + set textDecoration(value: Enums.TextDecorationType) { this.style.textDecoration = value; } - get textTransform(): TextTransform { + get textTransform(): Enums.TextTransformType { return this.style.textTransform; } - set textTransform(value: TextTransform) { + set textTransform(value: Enums.TextTransformType) { this.style.textTransform = value; } @@ -122,45 +119,45 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition this.style.textShadow = value; } - get whiteSpace(): WhiteSpace { + get whiteSpace(): Enums.WhiteSpaceType { return this.style.whiteSpace; } - set whiteSpace(value: WhiteSpace) { + set whiteSpace(value: Enums.WhiteSpaceType) { this.style.whiteSpace = value; } - get padding(): string | Length { + get padding(): string | LengthType { return this.style.padding; } - set padding(value: string | Length) { + set padding(value: string | LengthType) { this.style.padding = value; } - get paddingTop(): Length { + get paddingTop(): LengthType { return this.style.paddingTop; } - set paddingTop(value: Length) { + set paddingTop(value: LengthType) { this.style.paddingTop = value; } - get paddingRight(): Length { + get paddingRight(): LengthType { return this.style.paddingRight; } - set paddingRight(value: Length) { + set paddingRight(value: LengthType) { this.style.paddingRight = value; } - get paddingBottom(): Length { + get paddingBottom(): LengthType { return this.style.paddingBottom; } - set paddingBottom(value: Length) { + set paddingBottom(value: LengthType) { this.style.paddingBottom = value; } - get paddingLeft(): Length { + get paddingLeft(): LengthType { return this.style.paddingLeft; } - set paddingLeft(value: Length) { + set paddingLeft(value: LengthType) { this.style.paddingLeft = value; } @@ -250,8 +247,8 @@ export function getClosestPropertyValue(property: CssProperty, span: } } -const textAlignmentConverter = makeParser(makeValidator('initial', 'left', 'center', 'right')); -export const textAlignmentProperty = new InheritedCssProperty({ +const textAlignmentConverter = makeParser(makeValidator('initial', 'left', 'center', 'right')); +export const textAlignmentProperty = new InheritedCssProperty({ name: 'textAlignment', cssName: 'text-align', defaultValue: 'initial', @@ -259,8 +256,8 @@ export const textAlignmentProperty = new InheritedCssProperty(makeValidator('initial', 'none', 'capitalize', 'uppercase', 'lowercase')); -export const textTransformProperty = new CssProperty({ +const textTransformConverter = makeParser(makeValidator('initial', 'none', 'capitalize', 'uppercase', 'lowercase')); +export const textTransformProperty = new CssProperty({ name: 'textTransform', cssName: 'text-transform', defaultValue: 'initial', @@ -278,8 +275,8 @@ export const textShadowProperty = new CssProperty({ }); textShadowProperty.register(Style); -const whiteSpaceConverter = makeParser(makeValidator('initial', 'normal', 'nowrap')); -export const whiteSpaceProperty = new CssProperty({ +const whiteSpaceConverter = makeParser(makeValidator('initial', 'normal', 'nowrap')); +export const whiteSpaceProperty = new CssProperty({ name: 'whiteSpace', cssName: 'white-space', defaultValue: 'initial', @@ -288,8 +285,8 @@ export const whiteSpaceProperty = new CssProperty({ }); whiteSpaceProperty.register(Style); -const textDecorationConverter = makeParser(makeValidator('none', 'underline', 'line-through', 'underline line-through')); -export const textDecorationProperty = new CssProperty({ +const textDecorationConverter = makeParser(makeValidator('none', 'underline', 'line-through', 'underline line-through')); +export const textDecorationProperty = new CssProperty({ name: 'textDecoration', cssName: 'text-decoration', defaultValue: 'none', diff --git a/packages/core/ui/text-base/text-base-interfaces.ts b/packages/core/ui/text-base/text-base-interfaces.ts deleted file mode 100644 index 037ca86c8..000000000 --- a/packages/core/ui/text-base/text-base-interfaces.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Color } from 'color'; -import { Length } from 'ui/styling/style-properties'; - -export type WhiteSpace = 'initial' | 'normal' | 'nowrap'; -export type TextAlignment = 'initial' | 'left' | 'center' | 'right'; -export type TextTransform = 'initial' | 'none' | 'capitalize' | 'uppercase' | 'lowercase'; -export type TextDecoration = 'none' | 'underline' | 'line-through' | 'underline line-through'; diff --git a/packages/core/ui/text-field/index.android.ts b/packages/core/ui/text-field/index.android.ts index 5a49187d2..62b5956d5 100644 --- a/packages/core/ui/text-field/index.android.ts +++ b/packages/core/ui/text-field/index.android.ts @@ -1,6 +1,7 @@ import { TextFieldBase, secureProperty } from './text-field-common'; -import { whiteSpaceProperty, WhiteSpace } from '../text-base'; +import { whiteSpaceProperty } from '../text-base'; import { keyboardTypeProperty } from '../editable-text-base'; +import { Enums } from '../enums'; export * from './text-field-common'; @@ -96,10 +97,10 @@ export class TextField extends TextFieldBase { this._setInputType(inputType); } - [whiteSpaceProperty.getDefault](): WhiteSpace { + [whiteSpaceProperty.getDefault](): Enums.WhiteSpaceType { return 'nowrap'; } - [whiteSpaceProperty.setNative](value: WhiteSpace) { + [whiteSpaceProperty.setNative](value: Enums.WhiteSpaceType) { // Don't change it otherwise TextField will go to multiline mode. } } diff --git a/packages/core/ui/text-field/index.ios.ts b/packages/core/ui/text-field/index.ios.ts index 877f35f0d..c69fc0b1a 100644 --- a/packages/core/ui/text-field/index.ios.ts +++ b/packages/core/ui/text-field/index.ios.ts @@ -2,13 +2,13 @@ import { TextFieldBase, secureProperty } from './text-field-common'; import { textProperty } from '../text-base'; import { hintProperty, placeholderColorProperty, _updateCharactersInRangeReplacementString } from '../editable-text-base'; import { Color } from '../../color'; -import { colorProperty, Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties'; +import { colorProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, LengthType } from '../styling/style-properties'; import { layout } from '../../utils'; import { profile } from '../../profiling'; export * from './text-field-common'; -const zeroLength: Length = { +const zeroLength: LengthType = { value: 0, unit: 'px', }; @@ -284,31 +284,31 @@ export class TextField extends TextFieldBase { this.nativeTextViewProtected.attributedPlaceholder = attributedPlaceholder; } - [paddingTopProperty.getDefault](): Length { + [paddingTopProperty.getDefault](): LengthType { return zeroLength; } - [paddingTopProperty.setNative](value: Length) { + [paddingTopProperty.setNative](value: LengthType) { // Padding is realized via UITextFieldImpl.textRectForBounds method } - [paddingRightProperty.getDefault](): Length { + [paddingRightProperty.getDefault](): LengthType { return zeroLength; } - [paddingRightProperty.setNative](value: Length) { + [paddingRightProperty.setNative](value: LengthType) { // Padding is realized via UITextFieldImpl.textRectForBounds method } - [paddingBottomProperty.getDefault](): Length { + [paddingBottomProperty.getDefault](): LengthType { return zeroLength; } - [paddingBottomProperty.setNative](value: Length) { + [paddingBottomProperty.setNative](value: LengthType) { // Padding is realized via UITextFieldImpl.textRectForBounds method } - [paddingLeftProperty.getDefault](): Length { + [paddingLeftProperty.getDefault](): LengthType { return zeroLength; } - [paddingLeftProperty.setNative](value: Length) { + [paddingLeftProperty.setNative](value: LengthType) { // Padding is realized via UITextFieldImpl.textRectForBounds method } } diff --git a/packages/core/ui/text-view/index.ios.ts b/packages/core/ui/text-view/index.ios.ts index 4b79ed4cb..939afc428 100644 --- a/packages/core/ui/text-view/index.ios.ts +++ b/packages/core/ui/text-view/index.ios.ts @@ -4,7 +4,7 @@ import { TextViewBase as TextViewBaseCommon, maxLinesProperty } from './text-vie import { editableProperty, hintProperty, placeholderColorProperty, _updateCharactersInRangeReplacementString } from '../editable-text-base'; import { CSSType } from '../core/view'; import { Color } from '../../color'; -import { colorProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, Length } from '../styling/style-properties'; +import { colorProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, Length, LengthType } from '../styling/style-properties'; import { iOSNativeHelper, layout } from '../../utils'; import { profile } from '../../profiling'; @@ -269,13 +269,13 @@ export class TextView extends TextViewBaseCommon { this._refreshColor(); } - [borderTopWidthProperty.getDefault](): Length { + [borderTopWidthProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.top, unit: 'px', }; } - [borderTopWidthProperty.setNative](value: Length) { + [borderTopWidthProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth); this.nativeTextViewProtected.textContainerInset = { @@ -286,13 +286,13 @@ export class TextView extends TextViewBaseCommon { }; } - [borderRightWidthProperty.getDefault](): Length { + [borderRightWidthProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.right, unit: 'px', }; } - [borderRightWidthProperty.setNative](value: Length) { + [borderRightWidthProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth); this.nativeTextViewProtected.textContainerInset = { @@ -303,13 +303,13 @@ export class TextView extends TextViewBaseCommon { }; } - [borderBottomWidthProperty.getDefault](): Length { + [borderBottomWidthProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.bottom, unit: 'px', }; } - [borderBottomWidthProperty.setNative](value: Length) { + [borderBottomWidthProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth); this.nativeTextViewProtected.textContainerInset = { @@ -320,13 +320,13 @@ export class TextView extends TextViewBaseCommon { }; } - [borderLeftWidthProperty.getDefault](): Length { + [borderLeftWidthProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.left, unit: 'px', }; } - [borderLeftWidthProperty.setNative](value: Length) { + [borderLeftWidthProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth); this.nativeTextViewProtected.textContainerInset = { @@ -337,13 +337,13 @@ export class TextView extends TextViewBaseCommon { }; } - [paddingTopProperty.getDefault](): Length { + [paddingTopProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.top, unit: 'px', }; } - [paddingTopProperty.setNative](value: Length) { + [paddingTopProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth); this.nativeTextViewProtected.textContainerInset = { @@ -354,13 +354,13 @@ export class TextView extends TextViewBaseCommon { }; } - [paddingRightProperty.getDefault](): Length { + [paddingRightProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.right, unit: 'px', }; } - [paddingRightProperty.setNative](value: Length) { + [paddingRightProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth); this.nativeTextViewProtected.textContainerInset = { @@ -371,13 +371,13 @@ export class TextView extends TextViewBaseCommon { }; } - [paddingBottomProperty.getDefault](): Length { + [paddingBottomProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.bottom, unit: 'px', }; } - [paddingBottomProperty.setNative](value: Length) { + [paddingBottomProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth); this.nativeTextViewProtected.textContainerInset = { @@ -387,13 +387,13 @@ export class TextView extends TextViewBaseCommon { right: inset.right, }; } - [paddingLeftProperty.getDefault](): Length { + [paddingLeftProperty.getDefault](): LengthType { return { value: this.nativeTextViewProtected.textContainerInset.left, unit: 'px', }; } - [paddingLeftProperty.setNative](value: Length) { + [paddingLeftProperty.setNative](value: LengthType) { const inset = this.nativeTextViewProtected.textContainerInset; const left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth); this.nativeTextViewProtected.textContainerInset = { diff --git a/workspace.json b/workspace.json index dee375327..232a842a2 100644 --- a/workspace.json +++ b/workspace.json @@ -314,4 +314,4 @@ } } } -} \ No newline at end of file +}