react-native-divkit 0.1.0-alpha.1

package/src/types/componentContext.d.ts

@@ -0,0 +1,98 @@
+import type { Action, TemplateContext } from '../../typings/common';
+import type { MaybeMissing } from '../expressions/json';
+import type { Variable, VariableType } from '../expressions/variable';
+import type { WrappedError } from '../utils/wrapError';
+import type { Animator, DivBaseData } from './base';
+import type { Store } from '../../typings/store';
+import type { evalExpression } from '../expressions/eval';
+import type { Node } from '../expressions/ast';
+import type { CustomFunctions } from '../expressions/funcs/customFuncs';
+
+interface Readable<T> {
+    subscribe(run: (value: T) => void): () => void;
+}
+
+export type StateSetter = (stateId: string) => Promise<ComponentContext | undefined>;
+
+export interface PagerData {
+    instId: string;
+    size: number;
+    currentItem: number;
+    scrollToPagerItem(index: number): void;
+}
+
+export type PagerListener = (data: PagerData) => void;
+
+export interface PagerRegisterData {
+    update: PagerListener;
+    destroy: () => void;
+}
+
+export type ComponentKey = string | {
+    index: number;
+    data: object;
+};
+
+export interface ComponentContext<T extends DivBaseData = DivBaseData> {
+    path: string[];
+    parent?: ComponentContext;
+
+    json: MaybeMissing<T>;
+    origJson?: MaybeMissing<DivBaseData> | undefined;
+    templateContext: TemplateContext;
+    variables?: Map<string, Variable>;
+    selfVariables?: Set<string>;
+    customFunctions?: CustomFunctions;
+    isRootState?: boolean;
+    isTooltipRoot?: boolean;
+    fakeElement?: number;
+    parentContext?: ComponentContext;
+    id: string;
+    animators?: Record<string, MaybeMissing<Animator>>;
+    states?: Record<string, StateSetter[]>;
+    pagers?: Map<string | undefined, PagerData | null>;
+    pagerListeners?: Map<string | undefined, PagerListener[]>;
+    key?: ComponentKey;
+
+    logError(error: WrappedError): void;
+    execAnyActions(
+        actions: MaybeMissing<Action[]> | undefined,
+        opts?: {
+            processUrls?: boolean;
+            node?: HTMLElement;
+            logType?: string;
+            additionalVars?: Map<string, Variable>;
+        }
+    ): Promise<void>;
+    getDerivedFromVars<T>(
+        jsonProp: T,
+        additionalVars?: Map<string, Variable>,
+        keepComplex?: boolean,
+        maxDepth?: number
+    ): Readable<MaybeMissing<T>>;
+    getJsonWithVars<T>(
+        jsonProp: T,
+        additionalVars?: Map<string, Variable>,
+        keepComplex?: boolean
+    ): MaybeMissing<T>;
+    evalExpression(store: Store | undefined, expr: Node, opts?: {
+        weekStartDay?: number;
+        storeUsedVars?: Set<string>;
+    }): ReturnType<typeof evalExpression>;
+    produceChildContext(div: MaybeMissing<DivBaseData>, opts?: {
+        path?: string | number | undefined;
+        isRootState?: boolean;
+        isTooltipRoot?: boolean;
+        fake?: number;
+        variables?: Map<string, Variable>;
+        id?: string;
+        key?: ComponentKey;
+    }): ComponentContext;
+    dup(fakeReason: number): ComponentContext;
+    getVariable(varName: string, type?: VariableType): Variable | undefined;
+    getAnimator(name: string): MaybeMissing<Animator> | undefined;
+    registerState(stateId: string, setState: StateSetter): () => void;
+    registerPager(pagerId: string | undefined): PagerRegisterData;
+    listenPager(pagerId: string | undefined, listener: PagerListener): () => void;
+    destroy(): void;
+}

package/src/types/container.d.ts

@@ -0,0 +1,40 @@
+import type { DivBaseData } from './base';
+import type { DivActionableData } from './actionable';
+import type {
+    ContentAlignmentHorizontal,
+    ContentAlignmentVertical
+} from './alignment';
+import type { BooleanInt } from '../../typings/common';
+import type { Drawable } from './drawable';
+import type { DivAspect } from './image';
+import type { EdgeInsets } from './edgeInserts';
+import type { CollectionItemBuilder } from './itemBuilder';
+
+export type ContainerOrientation = 'vertical' | 'horizontal' | 'overlap';
+
+export type ContainerLayoutMode = 'no_wrap' | 'wrap';
+
+export interface ContainerSeparator {
+    show_at_start?: BooleanInt;
+    show_at_end?: BooleanInt;
+    show_between?: BooleanInt;
+    style: Drawable;
+    margins?: EdgeInsets;
+}
+
+export interface DivContainerData extends DivBaseData, DivActionableData {
+    type: 'container';
+    content_alignment_horizontal?: ContentAlignmentHorizontal;
+    content_alignment_vertical?: ContentAlignmentVertical;
+    orientation?: ContainerOrientation;
+    items: DivBaseData[];
+    // auto_animations_enabled
+    layout_mode?: ContainerLayoutMode;
+    separator?: ContainerSeparator;
+    line_separator?: ContainerSeparator;
+    item_spacing?: number;
+    line_spacing?: number;
+    item_builder?: CollectionItemBuilder;
+    aspect?: DivAspect;
+    clip_to_bounds?: BooleanInt;
+}

package/src/types/edgeInserts.d.ts

@@ -0,0 +1,9 @@
+export interface EdgeInsets {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+    // unit
+    start?: number;
+    end?: number;
+}

package/src/types/general.d.ts

@@ -0,0 +1,3 @@
+export type Style = Record<string, string | number | undefined>;
+
+export type Mods = Record<string, string | boolean | undefined>;

package/src/types/image.d.ts

@@ -0,0 +1,33 @@
+import type { DivBaseData } from './base';
+import type { DivActionableData } from './actionable';
+import type { AlignmentHorizontal, AlignmentVertical } from './alignment';
+import type { FadeTransition } from './base';
+import type { Filter } from './filter';
+import type { ImageScale } from './imageScale';
+import type { BooleanInt } from '../../typings/common';
+
+export type TintMode = 'source_in' | 'source_atop' | 'darken' | 'lighten' | 'multiply' | 'screen';
+
+export interface DivAspect {
+    ratio: number;
+}
+
+export interface DivImageData extends DivBaseData, DivActionableData {
+    type: 'image' | 'gif';
+
+    image_url?: string;
+    gif_url?: string;
+    placeholder_color?: string;
+    scale?: ImageScale;
+    content_alignment_horizontal?: AlignmentHorizontal;
+    content_alignment_vertical?: AlignmentVertical;
+    preview?: string;
+    preview_url?: string;
+    preload_required?: BooleanInt;
+    aspect?: DivAspect;
+    high_priority_preview_show?: BooleanInt;
+    tint_color?: string;
+    tint_mode?: TintMode;
+    appearance_animation?: FadeTransition;
+    filters?: Filter[];
+}

package/src/types/imageScale.d.ts

@@ -0,0 +1 @@
+export type ImageScale = 'fill' | 'no_scale' | 'fit' | 'stretch';

package/src/types/layoutParams.d.ts

@@ -0,0 +1,27 @@
+import type { Orientation } from './orientation';
+
+export type Align = 'start' | 'center' | 'end';
+export type AlignPlusBaseline = Align | 'baseline';
+export type ScrollSnap = 'start' | 'center' | 'end';
+
+export interface LayoutParams {
+    parentHAlign?: Align;
+    parentVAlign?: AlignPlusBaseline;
+    parentContainerOrientation?: Orientation;
+    parentContainerKnownWidth?: boolean;
+    parentContainerKnownHeight?: boolean;
+    parentContainerWrap?: boolean;
+    parentHorizontalWrapContent?: boolean;
+    parentVerticalWrapContent?: boolean;
+    stretchWidth?: boolean;
+    stretchHeight?: boolean;
+    treatMatchParentAs100?: boolean;
+    overlapParent?: boolean;
+    gridArea?: {
+        x: number;
+        y: number;
+        colSpan: number;
+        rowSpan: number;
+    };
+    scrollSnap?: ScrollSnap;
+}

package/src/types/sizes.d.ts

@@ -0,0 +1,37 @@
+import type { BooleanInt } from '../../typings/common';
+
+export interface FixedSize {
+    type: 'fixed';
+    value: number;
+}
+
+export interface MatchParentSize {
+    type: 'match_parent';
+    weight?: number;
+    min_size?: ConstraintSize;
+    max_size?: ConstraintSize;
+}
+
+export interface ConstraintSize {
+    value: number;
+    // unit
+}
+
+export interface WrapContentSize {
+    type: 'wrap_content';
+    constrained?: BooleanInt;
+    min_size?: ConstraintSize;
+    max_size?: ConstraintSize;
+}
+
+export type Size = FixedSize | MatchParentSize | WrapContentSize;
+
+export interface Dimension {
+    value: number;
+    // unit
+}
+
+export interface PercentageSize {
+    type: 'percentage';
+    value: number;
+}

package/src/types/state.d.ts

@@ -0,0 +1,19 @@
+import type { DivBaseData } from './base';
+import type { DivActionableData } from './actionable';
+import type { BooleanInt } from '../../typings/common';
+
+export interface State {
+    state_id: string;
+    div?: DivBaseData;
+}
+
+export interface DivStateData extends DivBaseData, DivActionableData {
+    type: 'state';
+    states: State[];
+    state_id_variable?: string;
+    /** @deprecated */
+    div_id?: string;
+    default_state_id?: string;
+    // transition_animation_selector
+    clip_to_bounds?: BooleanInt;
+}

package/src/types/text.d.ts

@@ -0,0 +1,126 @@
+import type { DivBaseData } from './base';
+import type { DivActionableData } from './actionable';
+import type { Action } from '../../typings/common';
+import type { FixedSize } from './sizes';
+import type { AlignmentHorizontal, AlignmentVertical } from './alignment';
+import type { GradientBackground, SolidBackground } from './background';
+import type { BooleanInt } from '../../typings/common';
+import type { TintMode } from './image';
+import type { Shadow, Stroke } from './border';
+import type { EdgeInsets } from './edgeInserts';
+import type { FontVariationSettings } from './fontVariationSettings';
+
+export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
+
+export type LineStyle = 'none' | 'single';
+
+export type Truncate = 'none' | 'end';
+
+export interface TextStyles {
+    font_size?: number;
+    font_family?: string;
+    // font_size_unit
+    font_feature_settings?: string;
+    letter_spacing?: number;
+    font_weight?: FontWeight;
+    font_weight_value?: number;
+    text_color?: string;
+    underline?: LineStyle;
+    strike?: LineStyle;
+    line_height?: number;
+    text_shadow?: Shadow;
+    font_variation_settings?: FontVariationSettings;
+}
+
+export interface CloudBackground {
+    type: 'cloud';
+    color: string;
+    corner_radius: number;
+    paddings?: EdgeInsets;
+}
+
+export type RangeBackground = SolidBackground | CloudBackground;
+
+export interface TextRangeBorder {
+    stroke?: Stroke;
+    corner_radius?: number;
+}
+
+export type TextVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline';
+
+export interface TextMaskParticles {
+    type: 'particles';
+    is_enabled?: boolean;
+    color: string;
+    is_animated?: boolean;
+    particle_size?: FixedSize;
+    density?: number;
+}
+
+export interface TextMaskSolid{
+    type: 'solid';
+    is_enabled?: boolean;
+    color: string;
+}
+
+export type TextMask = TextMaskParticles | TextMaskSolid;
+
+export interface TextRange extends TextStyles {
+    start?: number;
+    end?: number;
+    actions?: Action[];
+    top_offset?: number;
+    border?: TextRangeBorder;
+    background?: RangeBackground;
+    alignment_vertical?: TextVerticalAlignment;
+    baseline_offset?: number;
+    mask?: TextMask;
+}
+
+export type TextIndexingDirection = 'normal' | 'reversed';
+
+export type TextImageAccessibilityType = 'none' | 'button' | 'image' | 'text' | 'auto';
+
+export interface TextImageAccessibility {
+    description?: string;
+    type?: TextImageAccessibilityType;
+}
+
+export interface TextImage {
+    start: number;
+    url: string;
+    width?: FixedSize;
+    height?: FixedSize;
+    tint_color?: string;
+    tint_mode?: TintMode;
+    preload_required?: BooleanInt;
+    alignment_vertical?: TextVerticalAlignment;
+    indexing_direction?: TextIndexingDirection;
+    accessibility?: TextImageAccessibility;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TextEllipsis {
+    // text
+    // actions
+    // ranges
+    // images
+}
+
+export interface DivTextData extends DivBaseData, DivActionableData, TextStyles {
+    type: 'text';
+    // font_size_unit;
+    max_lines?: number;
+    // min_hidden_lines;
+    auto_ellipsize?: BooleanInt;
+    text_alignment_horizontal?: AlignmentHorizontal;
+    text_alignment_vertical?: AlignmentVertical;
+    focused_text_color?: string;
+    text_gradient?: GradientBackground;
+    text: string;
+    ranges?: TextRange[];
+    images?: TextImage[];
+    // ellipsis;
+    selectable?: BooleanInt;
+    truncate?: Truncate;
+}

package/src/utils/applyTemplate.ts

@@ -0,0 +1,145 @@
+import type { WrappedError } from "./wrapError";
+import type { DivBase, TemplateContext } from "../../typings/common";
+import type { DivBaseData } from "../types/base";
+
+export function applyTemplate<T extends DivBase>(
+  json: T,
+  templateContext: TemplateContext,
+  templates: Record<string, unknown>,
+  _logError: (error: WrappedError) => void,
+): {
+  json: T;
+  templateContext: TemplateContext;
+};
+export function applyTemplate(
+  json: DivBaseData,
+  templateContext: TemplateContext,
+  templates: Record<string, unknown>,
+  _logError: (error: WrappedError) => void,
+): {
+  json: DivBaseData;
+  templateContext: TemplateContext;
+} {
+  const template = templates[json.type];
+
+  if (!template) {
+    // If template is missing, treat it as a standard component
+    return {
+      json,
+      templateContext,
+    };
+  }
+
+  let i;
+  const newContext: TemplateContext = {};
+
+  for (i in templateContext) {
+    if (Object.prototype.hasOwnProperty.call(templateContext, i)) {
+      newContext[i] = templateContext[i];
+    }
+  }
+
+  for (i in json) {
+    if (i === "type" || i === "__proto__") {
+      continue;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(json, i)) {
+      newContext[i] = json[i as keyof typeof json];
+    }
+  }
+
+  function copyTemplated(base: any, extender: any) {
+    const keys = Object.keys(extender).filter((key) => key !== "__proto__");
+    const simpleKeys = keys.filter((key) => key.charAt(0) !== "$");
+    const templateKeys = keys.filter((key) => key.charAt(0) === "$");
+
+    simpleKeys.forEach((key) => {
+      const item = extender[key];
+
+      if (typeof item === "object" && item !== null) {
+        base[key] = Array.isArray(item) ? [] : {};
+        copyTemplated(base[key], item);
+      } else {
+        base[key] = item;
+      }
+    });
+
+    templateKeys.forEach((key) => {
+      const item = extender[key];
+
+      const val = newContext[item];
+
+      if (val !== undefined) {
+        const prop = key.substring(1);
+        base[prop] = val;
+      }
+    });
+
+    return base;
+  }
+
+  const newJson = copyTemplated({}, template);
+
+  for (i in json) {
+    if (i === "type" || i === "__proto__") {
+      continue;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(json, i)) {
+      newJson[i] = json[i as keyof typeof json];
+    }
+  }
+
+  return {
+    json: newJson,
+    templateContext: newContext,
+  };
+}
+
+export function applyTemplatesRecursively(
+  json: any,
+  templates: Record<string, unknown>,
+  logError: (error: WrappedError) => void,
+): any {
+  if (!json || typeof json !== "object") {
+    return json;
+  }
+
+  if (Array.isArray(json)) {
+    return json.map((item) =>
+      applyTemplatesRecursively(item, templates, logError),
+    );
+  }
+
+  let resolvedJson = json;
+
+  // Attempt expansion if type matches a template
+  if (json.type && templates[json.type]) {
+    try {
+      const res = applyTemplate(json, {}, templates, logError);
+      resolvedJson = res.json;
+    } catch (_e) {
+      // Expansion failed
+    }
+  }
+
+  // Recursively process children
+  const result: any = {};
+  for (const key in resolvedJson) {
+    if (!Object.prototype.hasOwnProperty.call(resolvedJson, key)) continue;
+
+    if (key === "type") {
+      result[key] = resolvedJson[key];
+      continue;
+    }
+
+    result[key] = applyTemplatesRecursively(
+      resolvedJson[key],
+      templates,
+      logError,
+    );
+  }
+
+  return result;
+}

package/src/utils/correctColor.ts

@@ -0,0 +1,102 @@
+import { padLeft } from './padLeft';
+
+/**
+ * Converts color from app format (ARGB) to css format (RGBA)
+ * @param color Color with format #RGB, #ARGB, #RRGGBB, #AARRGGBB
+ * @param alpha Color additional opacity
+ * @param defaultColor Default color value, used if input color is incorrect
+ * @returns Color with opacity if it has correct format, or defaultColor elsewhere
+ */
+export function correctColor(color: string | undefined, alpha = 1, defaultColor = 'transparent'): string {
+    color = (typeof color === 'string' && color || '').toLowerCase();
+
+    if (color.charAt(0) !== '#') {
+        return defaultColor;
+    }
+
+    const parsedColor = parseColor(color);
+    if (parsedColor) {
+        parsedColor.a *= alpha;
+        return stringifyColorToCss(parsedColor);
+    }
+
+    return defaultColor;
+}
+
+export function correctColorWithAlpha(color: string | undefined, alpha: number, defaultColor = 'transparent'): string {
+    color = (typeof color === 'string' && color || '').toLowerCase();
+
+    if (color.charAt(0) !== '#') {
+        return defaultColor;
+    }
+
+    const parsedColor = parseColor(color);
+    if (parsedColor) {
+        parsedColor.a = alpha;
+        return stringifyColorToCss(parsedColor);
+    }
+
+    return defaultColor;
+}
+
+export interface ParsedColor {
+    a: number;
+    r: number;
+    g: number;
+    b: number;
+}
+
+export function stringifyColorToCss(color: ParsedColor): string {
+    if (color.a === 255) {
+        return `#${[color.r, color.g, color.b].map(it => {
+            return padLeft(Math.round(it).toString(16), 2);
+        }).join('')}`;
+    }
+
+    return `rgba(${color.r},${color.g},${color.b},${(color.a / 255).toFixed(2)})`;
+}
+
+export function parseColor(color: string): ParsedColor | null {
+    const colorMatch = (
+        // #AARRGGBB
+        color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i) ||
+        // #ARGB
+        color.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])$/i) ||
+        // #RRGGBB
+        color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i) ||
+        // #RGB
+        color.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
+    );
+
+    if (colorMatch) {
+        // with alpha part in color
+        if (colorMatch.length === 5) {
+            const [_, a, r, g, b] = colorMatch;
+            const redPart = r.length === 2 ? r : r + r;
+            const greenPart = g.length === 2 ? g : g + g;
+            const bluePart = b.length === 2 ? b : b + b;
+            const alphaPart = a.length === 2 ? a : a + a;
+
+            return {
+                a: parseInt(alphaPart, 16),
+                r: parseInt(redPart, 16),
+                g: parseInt(greenPart, 16),
+                b: parseInt(bluePart, 16)
+            };
+        }
+
+        const [_, r, g, b] = colorMatch;
+        const redPart = r.length === 2 ? r : r + r;
+        const greenPart = g.length === 2 ? g : g + g;
+        const bluePart = b.length === 2 ? b : b + b;
+
+        return {
+            a: 255,
+            r: parseInt(redPart, 16),
+            g: parseInt(greenPart, 16),
+            b: parseInt(bluePart, 16)
+        };
+    }
+
+    return null;
+}

package/src/utils/escapeRegExp.ts

@@ -0,0 +1,3 @@
+export function escapeRegExp(str: string): string {
+    return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+}