mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat(tabs): iconSource support for sys:// and font:// icons
closes https://github.com/NativeScript/NativeScript/issues/10729
This commit is contained in:
4
packages/core/image-source/index.d.ts
vendored
4
packages/core/image-source/index.d.ts
vendored
@@ -65,13 +65,13 @@ export class ImageSource {
|
|||||||
* Loads this instance from the specified system image name.
|
* Loads this instance from the specified system image name.
|
||||||
* @param name the name of the system image
|
* @param name the name of the system image
|
||||||
*/
|
*/
|
||||||
static fromSystemImageSync(name: string, instance: ImageBase): ImageSource;
|
static fromSystemImageSync(name: string, instance?: ImageBase): ImageSource;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loads this instance from the specified system image name asynchronously.
|
* Loads this instance from the specified system image name asynchronously.
|
||||||
* @param name the name of the system image
|
* @param name the name of the system image
|
||||||
*/
|
*/
|
||||||
static fromSystemImage(name: string, instance: ImageBase): Promise<ImageSource>;
|
static fromSystemImage(name: string, instance?: ImageBase): Promise<ImageSource>;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loads this instance from the specified file.
|
* Loads this instance from the specified file.
|
||||||
|
|||||||
@@ -12,7 +12,8 @@ import { CoreTypes } from '../../core-types';
|
|||||||
import { ImageSource } from '../../image-source';
|
import { ImageSource } from '../../image-source';
|
||||||
import { profile } from '../../profiling';
|
import { profile } from '../../profiling';
|
||||||
import { Frame } from '../frame';
|
import { Frame } from '../frame';
|
||||||
import { layout } from '../../utils';
|
import { layout } from '../../utils/layout-helper';
|
||||||
|
import { isFontIconURI, isSystemURI, SYSTEM_PREFIX } from '../../utils/common';
|
||||||
import { SDK_VERSION } from '../../utils/constants';
|
import { SDK_VERSION } from '../../utils/constants';
|
||||||
import { Device } from '../../platform';
|
import { Device } from '../../platform';
|
||||||
export * from './tab-view-common';
|
export * from './tab-view-common';
|
||||||
@@ -239,7 +240,7 @@ export class TabViewItem extends TabViewItemBase {
|
|||||||
const parent = <TabView>this.parent;
|
const parent = <TabView>this.parent;
|
||||||
const controller = this.__controller;
|
const controller = this.__controller;
|
||||||
if (parent && controller) {
|
if (parent && controller) {
|
||||||
const icon = parent._getIcon(this.iconSource);
|
const icon = parent._getIcon(this);
|
||||||
const index = parent.items.indexOf(this);
|
const index = parent.items.indexOf(this);
|
||||||
const title = getTransformedText(this.title, this.style.textTransform);
|
const title = getTransformedText(this.title, this.style.textTransform);
|
||||||
|
|
||||||
@@ -456,7 +457,7 @@ export class TabView extends TabViewBase {
|
|||||||
|
|
||||||
items.forEach((item, i) => {
|
items.forEach((item, i) => {
|
||||||
const controller = this.getViewController(item);
|
const controller = this.getViewController(item);
|
||||||
const icon = this._getIcon(item.iconSource);
|
const icon = this._getIcon(item);
|
||||||
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title || '', icon, i);
|
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title || '', icon, i);
|
||||||
updateTitleAndIconPositions(item, tabBarItem, controller);
|
updateTitleAndIconPositions(item, tabBarItem, controller);
|
||||||
|
|
||||||
@@ -492,20 +493,27 @@ export class TabView extends TabViewBase {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public _getIcon(iconSource: string): UIImage {
|
public _getIcon(item: TabViewItem): UIImage {
|
||||||
if (!iconSource) {
|
if (!item || !item.iconSource) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
let image: UIImage = this._iconsCache[iconSource];
|
let image: UIImage = this._iconsCache[item.iconSource];
|
||||||
if (!image) {
|
if (!image) {
|
||||||
const is = ImageSource.fromFileOrResourceSync(iconSource);
|
let is: ImageSource;
|
||||||
|
if (isSystemURI(item.iconSource)) {
|
||||||
|
is = ImageSource.fromSystemImageSync(item.iconSource.slice(SYSTEM_PREFIX.length));
|
||||||
|
} else if (isFontIconURI(item.iconSource)) {
|
||||||
|
is = ImageSource.fromFontIconCodeSync(item.iconSource, item.style.fontInternal, item.style.color);
|
||||||
|
} else {
|
||||||
|
is = ImageSource.fromFileOrResourceSync(item.iconSource);
|
||||||
|
}
|
||||||
if (is && is.ios) {
|
if (is && is.ios) {
|
||||||
const originalRenderedImage = is.ios.imageWithRenderingMode(this._getIconRenderingMode());
|
const originalRenderedImage = is.ios.imageWithRenderingMode(this._getIconRenderingMode());
|
||||||
this._iconsCache[iconSource] = originalRenderedImage;
|
this._iconsCache[item.iconSource] = originalRenderedImage;
|
||||||
image = originalRenderedImage;
|
image = originalRenderedImage;
|
||||||
} else {
|
} else {
|
||||||
traceMissingIcon(iconSource);
|
traceMissingIcon(item.iconSource);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,9 +7,10 @@ import { GC } from './index';
|
|||||||
export * from './mainthread-helper';
|
export * from './mainthread-helper';
|
||||||
export * from './macrotask-scheduler';
|
export * from './macrotask-scheduler';
|
||||||
|
|
||||||
|
export const FILE_PREFIX = 'file:///';
|
||||||
|
export const FONT_PREFIX = 'font://';
|
||||||
export const RESOURCE_PREFIX = 'res://';
|
export const RESOURCE_PREFIX = 'res://';
|
||||||
export const SYSTEM_PREFIX = 'sys://';
|
export const SYSTEM_PREFIX = 'sys://';
|
||||||
export const FILE_PREFIX = 'file:///';
|
|
||||||
|
|
||||||
export function escapeRegexSymbols(source: string): string {
|
export function escapeRegexSymbols(source: string): string {
|
||||||
const escapeRegex = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
|
const escapeRegex = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
|
||||||
@@ -85,10 +86,14 @@ export function isFontIconURI(uri: string): boolean {
|
|||||||
if (!types.isString(uri)) {
|
if (!types.isString(uri)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
return uri.trim().startsWith(FONT_PREFIX);
|
||||||
|
}
|
||||||
|
|
||||||
const firstSegment = uri.trim().split('//')[0];
|
export function isSystemURI(uri: string): boolean {
|
||||||
|
if (!types.isString(uri)) {
|
||||||
return firstSegment && firstSegment.indexOf('font:') === 0;
|
return false;
|
||||||
|
}
|
||||||
|
return uri.trim().startsWith(SYSTEM_PREFIX);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isDataURI(uri: string): boolean {
|
export function isDataURI(uri: string): boolean {
|
||||||
|
|||||||
6
packages/core/utils/index.d.ts
vendored
6
packages/core/utils/index.d.ts
vendored
@@ -87,6 +87,12 @@ export function mainThreadify(func: Function): (...args: any[]) => void;
|
|||||||
*/
|
*/
|
||||||
export function isFontIconURI(uri: string): boolean;
|
export function isFontIconURI(uri: string): boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns true if the specified URI is a system URI like "sys://...".
|
||||||
|
* @param uri The URI.
|
||||||
|
*/
|
||||||
|
export function isSystemURI(uri: string): boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns true if the specified path points to a resource or local file.
|
* Returns true if the specified path points to a resource or local file.
|
||||||
* @param path The path.
|
* @param path The path.
|
||||||
|
|||||||
Reference in New Issue
Block a user