@onekeyfe/react-native-image 6.7.0-alpha.415 → 6.7.0-alpha.421

package/src/icon/index.web.tsx

@@ -0,0 +1,36 @@
+import { createElement } from 'react';
+import { View } from 'react-native';
+import { isIconName, type OneKeyIconProps } from './props';
+import type { TextStyle } from 'react-native';
+import { iconResourceHref } from '#onekey-icon-assets';
+
+export type { OneKeyIconProps } from './props';
+
+export function OneKeyIcon({
+  name,
+  color,
+  style,
+  ...viewProps
+}: OneKeyIconProps) {
+  const defaultStyle: TextStyle = {
+    width: 24,
+    height: 24,
+    color: color ?? '#000000',
+  };
+  const href = isIconName(name) ? iconResourceHref(name) : undefined;
+  return createElement(
+    View,
+    { ...viewProps, style: [defaultStyle, style] },
+    href
+      ? createElement('svg', {
+          'width': '100%',
+          'height': '100%',
+          'aria-hidden': true,
+          'focusable': false,
+          'children': createElement('use', {
+            href,
+          }),
+        })
+      : null
+  );
+}

package/src/icon/props.ts

@@ -0,0 +1,38 @@
+import type { ViewProps } from 'react-native';
+
+export interface OneKeyIconProps extends Omit<ViewProps, 'children'> {
+  name: string;
+  color?: string;
+}
+
+export function normalizeIconColor(input = '#000000'): string | undefined {
+  const hex = /^#([\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i.exec(input);
+  if (hex) {
+    let value = hex[1]!;
+    if (value.length < 5)
+      value = [...value].map((part) => part + part).join('');
+    const channels = [0, 2, 4].map((start) =>
+      parseInt(value.slice(start, start + 2), 16)
+    );
+    const alpha = value.length === 8 ? parseInt(value.slice(6), 16) / 255 : 1;
+    return `rgba(${channels.join(',')},${alpha})`;
+  }
+  const rgb =
+    /^(rgb|rgba)\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*((?:\d+(?:\.\d*)?|\.\d+))\s*)?\)$/.exec(
+      input
+    );
+  if (!rgb || (rgb[1] === 'rgba') !== (rgb[5] !== undefined)) return undefined;
+  const channels = rgb.slice(2, 5).map(Number);
+  const alpha = Number(rgb[5] ?? 1);
+  if (
+    channels.some((value) => value > 255) ||
+    !Number.isFinite(alpha) ||
+    alpha > 1
+  )
+    return undefined;
+  return `rgba(${channels.join(',')},${Math.round(alpha * 255) / 255})`;
+}
+
+export function isIconName(name: string): boolean {
+  return /^[A-Z][A-Za-z0-9]*$/.test(name);
+}