feat: add transform when variables handling (#427)

feat: add content filtration utils

Author: gorgeousvlad

src/editor/containers/Editor/Editor.tsx

@@ -23,8 +23,10 @@ export const Editor = ({children, customSchema, onChange, ...rest}: EditorProps)
         onSelect,
         injectEditBlockProps,
     } = useEditorState(rest);
+    const formSpecs = useFormSpec(customSchema);
+
     const isEditingMode = viewMode === ViewModeItem.Edititng;
-    const constructorProps = useMemo(() => {
+    const outgoingProps = useMemo(() => {
         const custom = isEditingMode
             ? addCustomDecorator(
                   [
@@ -42,15 +44,13 @@ export const Editor = ({children, customSchema, onChange, ...rest}: EditorProps)
                   rest.custom,
               )
             : rest.custom;
-        return {content, custom};
-    }, [injectEditBlockProps, content, errorBoundaryState, isEditingMode, rest.custom]);
+        return {content, custom, viewMode};
+    }, [injectEditBlockProps, content, errorBoundaryState, isEditingMode, viewMode, rest.custom]);
 
     useEffect(() => {
         onChange?.(content);
     }, [content, onChange]);
 
-    const formSpecs = useFormSpec(customSchema);
-
     return (
         <Layout mode={viewMode} onModeChange={onViewModeUpdate}>
             {isEditingMode && (
@@ -65,7 +65,7 @@ export const Editor = ({children, customSchema, onChange, ...rest}: EditorProps)
                 </Layout.Left>
             )}
             <Layout.Right>
-                <ErrorBoundary key={errorBoundaryState}>{children(constructorProps)}</ErrorBoundary>
+                <ErrorBoundary key={errorBoundaryState}>{children(outgoingProps)}</ErrorBoundary>
                 {isEditingMode && <AddBlock onAdd={onAdd} />}
             </Layout.Right>
         </Layout>

src/editor/types/index.ts

@@ -5,10 +5,14 @@ import {EditBlockActions} from '../components/EditBlock/EditBlock';
 
 export type EditorBlockId = number | string;
 
+export interface EditorOutgoingProps extends Partial<PageConstructorProps> {
+    viewMode: ViewModeItem;
+}
+
 export interface EditorProps
     extends Required<Pick<PageConstructorProps, 'content'>>,
         Partial<Omit<PageConstructorProps, 'content'>> {
-    children: (props: Partial<PageConstructorProps>) => React.ReactNode;
+    children: (props: EditorOutgoingProps) => React.ReactNode;
     onChange?: (data: PageContent) => void;
     customSchema?: SchemaCustomConfig;
 }

src/schema/validators/common.ts

@@ -23,7 +23,9 @@ export const contentThemes = ['default', 'dark', 'light'];
 
 export const BaseProps = {
     type: {},
-    when: {},
+    when: {
+        type: 'string',
+    },
 };
 
 export const containerSizesObject = {

src/text-transform/filter.ts

@@ -0,0 +1,100 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
+
+import evalExp from '@doc-tools/transform/lib/liquid/evaluation';
+
+import {ContentVariables} from './transformers';
+
+type WhenValue = string | boolean | undefined;
+type OrArray<T> = T | T[];
+type OrArrayRecord<T> = Record<string, OrArray<T>>;
+interface FilteredContentItem extends OrArrayRecord<FilteredContentItem> {}
+type FilteredContent = OrArray<FilteredContentItem>;
+type FilterableContentItem = FilteredContentItem & {when: WhenValue};
+export type FilterableContent = OrArray<FilterableContentItem>;
+
+function filterItems(
+    items: FilterableContentItem[],
+    vars: ContentVariables,
+    propertyName?: string,
+): FilterableContentItem[] | FilteredContentItem[] {
+    if (!Array.isArray(items)) {
+        throw new Error(
+            `Error while filtering: items has invalid key '${propertyName}' equals ${JSON.stringify(
+                items,
+            )}`,
+        );
+    }
+
+    return items.reduce<FilteredContentItem[]>((result, item) => {
+        const passedFiltration = checkWhenCondition(item.when, vars);
+
+        if (passedFiltration) {
+            const property = propertyName && item[propertyName];
+
+            if (property === undefined) {
+                result.push(item);
+            } else {
+                const filteredProperty = filterItems(
+                    property as FilterableContentItem[],
+                    vars,
+                    propertyName,
+                );
+
+                if (filteredProperty.length !== 0) {
+                    result.push({
+                        ...item,
+                        [propertyName as string]: filteredProperty,
+                    });
+                }
+            }
+        }
+
+        return result;
+    }, []);
+}
+
+function checkWhenCondition(whenValue: WhenValue, vars: ContentVariables) {
+    return (
+        whenValue === true ||
+        whenValue === undefined ||
+        (typeof whenValue === 'string' && (!whenValue || evalExp(whenValue, vars)))
+    );
+}
+
+function isItemArray(
+    content: FilterableContent | FilteredContent,
+): content is FilterableContentItem[] | FilteredContentItem[] {
+    return Array.isArray(content);
+}
+
+function isItem(
+    content: FilterableContent | FilteredContent,
+): content is FilterableContentItem | FilteredContentItem {
+    return content && typeof content === 'object' && !Array.isArray(content);
+}
+
+/**
+ * Filters content recoursively by result of it's 'when' property evaluation applied to vars argument.
+ * e.g. property {..., when: 'someVar == "someValue"' } will be included in result only if vars.someVar === 'someValue'
+ * @param {FilterableContent} content
+ * @param {ContentVariables} vars
+ * @return {FilteredContent}
+ */
+export function filterContent(
+    content: FilterableContent | FilteredContent,
+    vars: ContentVariables,
+): FilteredContent {
+    if (isItemArray(content)) {
+        return filterItems(content as FilterableContentItem[], vars).map((item) =>
+            filterContent(item, vars),
+        ) as FilteredContent;
+    } else if (isItem(content)) {
+        return Object.entries(content).reduce<FilteredContentItem>((acc, [key, value]) => {
+            acc[key] = filterContent(value, vars);
+            return acc;
+        }, {});
+    } else {
+        return content;
+    }
+}

src/text-transform/index.ts

@@ -2,3 +2,4 @@ export * from './utils';
 export * from './config';
 export * from './common';
 export * from './transformers';
+export * from './filter';

src/text-transform/transformers.ts

@@ -2,19 +2,22 @@
 /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 import _ from 'lodash';
 
-import {ConstructorBlock} from '../models/constructor';
+import {ConstructorBlock, PageContent} from '../models/constructor';
 import {Lang} from '../utils/configure';
 
 import {Transformer} from './common';
 import {BlocksConfig, config} from './config';
+import {FilterableContent, filterContent} from './filter';
 
+export type ContentVariables = Record<string, string>;
 export type ContentTransformerProps = {
     content: {
         blocks?: ConstructorBlock[];
     };
     options: {
         lang: Lang;
         customConfig?: {};
+        vars?: ContentVariables;
     };
 };
 
@@ -66,8 +69,10 @@ function transformBlock(lang: Lang, blocksConfig: BlocksConfig, block: Construct
 }
 
 export const contentTransformer = ({content, options}: ContentTransformerProps) => {
-    const {lang, customConfig = {}} = options;
-    const {blocks = []} = content;
+    const {lang, customConfig = {}, vars} = options;
+    const {blocks = []} = (
+        vars ? filterContent(content as FilterableContent, vars) : content
+    ) as PageContent;
 
     const transformedBlocks = transformBlocks(blocks, lang, customConfig);