@true-engineering/true-react-common-ui-kit 3.53.1 → 3.55.0

package/src/theme/true-jss/TweakStylesManager.ts

@@ -0,0 +1,157 @@
+import type { StyleSheet, Classes, Rule } from 'jss';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  joinStrings,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import { isTweakStyle } from '../helpers';
+
+export type IPartialStyle = object;
+
+interface TweakRules<C extends string> {
+  classes: Classes<C>;
+  refs?: number;
+  rules: Map<C, Rule>;
+}
+
+interface TweakStylesManagerOptions<C extends string> {
+  sheet: StyleSheet<C>;
+  classes: Classes<C>;
+  tweak?: IPartialStyle[];
+}
+
+export class TweakStylesManager<C extends string> {
+  #map = new WeakMap<IPartialStyle, TweakStylesManager<C>>();
+  #sheet: StyleSheet<C>;
+  #classes: Classes<C>;
+  #tweak: IPartialStyle[];
+
+  #tweakRules: TweakRules<C> | undefined;
+  constructor({ sheet, classes, tweak = [] }: TweakStylesManagerOptions<C>) {
+    this.#sheet = sheet;
+    this.#classes = classes;
+    this.#tweak = tweak;
+  }
+
+  public getClasses([next, ...rest]: IPartialStyle[]): Classes<C> {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.getClasses(rest);
+    }
+    return this.getOrCreate()?.classes ?? this.#classes;
+  }
+
+  public manage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.manage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules)) {
+      return;
+    }
+    if (this.#tweakRules.refs === 0) {
+      this.insertRules();
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 0) + 1;
+  }
+
+  public unmanage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.unmanage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules) || this.#tweakRules.refs === 0) {
+      return;
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 1) - 1;
+    if (this.#tweakRules.refs === 0) {
+      this.deleteRules();
+    }
+  }
+
+  private getNextManager(next?: IPartialStyle) {
+    if (!isNotEmpty(next)) {
+      return;
+    }
+    if (!this.#map.has(next)) {
+      const manager = new TweakStylesManager({
+        sheet: this.#sheet,
+        classes: this.#classes,
+        tweak: this.#tweak.concat(next),
+      });
+      this.#map.set(next, manager);
+    }
+    return this.#map.get(next);
+  }
+
+  private getOrCreate() {
+    if (!isNotEmpty(this.#tweakRules) && isArrayNotEmpty(this.#tweak)) {
+      const [first, ...rest] = this.#tweak;
+      const styles = isArrayNotEmpty(rest) ? mergeStyles(first, ...rest) : first;
+
+      const rules = this.addRules(styles);
+
+      const classes = { ...this.#classes };
+      rules.forEach((rule, key) => {
+        classes[key] = joinStrings([classes[key], rule.id], ' ');
+      });
+
+      this.#tweakRules = { classes, rules };
+    }
+    return this.#tweakRules;
+  }
+
+  private addRules(styles: IPartialStyle) {
+    return new Map(
+      Object.entries(styles)
+        .map(([key, style]) => this.addRule(key as C, style))
+        .filter(isNotEmpty),
+    );
+  }
+
+  private addRule(key: C, style: object) {
+    if (isTweakStyle(key)) {
+      return;
+    }
+    const rule = this.#sheet.addRule(key, style, { index: this.getInsertIndex(key) });
+    return isNotEmpty(rule) ? ([key, rule] as const) : undefined;
+  }
+
+  private insertRules() {
+    this.#tweakRules?.rules.forEach((rule, key) => {
+      this.#sheet.rules.register(rule);
+      this.#sheet.rules.index.splice(this.getInsertIndex(key), 0, rule);
+      this.#sheet.insertRule(rule);
+    });
+  }
+
+  private deleteRules() {
+    this.#tweakRules?.rules.forEach((rule) => this.#sheet.deleteRule(rule));
+  }
+
+  private getInsertIndex(key: C) {
+    return (
+      this.#sheet.rules.index.findIndex((rule) => rule.key === key) + 1 ||
+      this.#sheet.rules.index.length
+    );
+  }
+}
+
+declare module 'jss' {
+  export interface RuleList {
+    index: Rule[];
+  }
+  // eslint-disable-next-line no-shadow
+  export interface StyleSheet<RuleName> {
+    rules: RuleList;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    deleteRule(rule: Rule): boolean;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    addRule(
+      name: RuleName,
+      style: JssStyle,
+      options?: Partial<Rule['options']>,
+    ): (Rule & { id: string }) | null;
+  }
+}

package/src/theme/true-jss/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemedStylesManager';
+export * from './jss-context';

package/src/theme/true-jss/jss-context.tsx

@@ -0,0 +1,34 @@
+import { Context, FC, PropsWithChildren, useContext, useMemo } from 'react';
+import { JssContext as JssContextLib } from 'react-jss';
+import { GenerateId } from 'jss';
+
+export interface IJssContext {
+  generateId?: GenerateId;
+  tweakStylesArch?: 'react-jss' | 'true-jss';
+}
+
+/** Типизация JssContext оказалась некорректна */
+export const JssContext = JssContextLib as unknown as Context<IJssContext>;
+
+export const JssProvider: FC<PropsWithChildren<IJssContext>> = ({
+  children,
+  tweakStylesArch,
+  generateId,
+}) => {
+  const context = useContext(JssContext);
+
+  const value: IJssContext = useMemo(
+    () => ({
+      ...context,
+      tweakStylesArch: tweakStylesArch ?? context.tweakStylesArch,
+      generateId: generateId ?? context.generateId,
+    }),
+    [context, tweakStylesArch, generateId],
+  );
+
+  return (
+    <JssContext.Provider key={tweakStylesArch} value={value}>
+      {children}
+    </JssContext.Provider>
+  );
+};

package/src/theme/types.ts

@@ -65,10 +65,12 @@ import type {
   IWithTooltipStyles,
 } from '../components';
 
-export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
+export type IStyles<C extends string, P = unknown> = Styles<C, P, Partial<Styles<C, P>>>;
 
+export type IMaybeArray<T> = T[] | T;
+export type IMixedStyles<T> = IMaybeArray<T | boolean | undefined>;
 export type IUseStyles<C extends string, P = unknown> = (
-  data?: P & { theme?: Partial<Styles<C, P>> },
+  data?: P & { theme?: IMaybeArray<Partial<Styles<C, P>>> },
 ) => Classes<C>;
 
 export type ITweakStyles<

package/src/types.ts

@@ -6,6 +6,7 @@ import {
   ReactNode,
 } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
+import type { IMaybeArray } from './theme';
 
 export interface ITestIdProps {
   testId?: string;
@@ -20,7 +21,7 @@ export interface IDataAttributesProps extends ITestIdProps {
 }
 
 export interface ITweakStylesProps<TweakStyles> {
-  tweakStyles?: TweakStyles;
+  tweakStyles?: IMaybeArray<TweakStyles>;
 }
 
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;