DataUrlViewerPage

Author: k.golikov

package.json

@@ -34,6 +34,7 @@
         "react-color": "^2.19.3",
         "react-css-theme-switcher": "^0.3.0",
         "react-dom": "^18.0.0",
+        "react-json-view": "^1.21.3",
         "react-konva": "^18.0.0-0",
         "react-redux": "^7.2.6",
         "react-router-dom": "^6.2.2",

src/App.scss

@@ -19,3 +19,10 @@
         }
     }
 }
+
+.view-iframe {
+    flex: 1;
+    border: none;
+    max-width: 100%;
+    overflow: auto;
+}

src/components/code/Code.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, HTMLProps } from 'react';
 import classNames from 'classnames';
 
-/** @deprecated Use code tag instead */
+/** @deprecated Use <Text code/> instead */
 const Code: FunctionComponent<HTMLProps<HTMLSpanElement>> = ({ className, children, ...props }) => {
     return (
         <code className={classNames('code', className)} {...props}>

src/components/pageCol/PageCol.module.scss

@@ -0,0 +1,5 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}

src/components/pageCol/PageCol.tsx

@@ -0,0 +1,41 @@
+import React, { FunctionComponent, useMemo } from 'react';
+import { Col, ColProps } from 'antd';
+import styles from './PageCol.module.scss';
+import classNames from 'classnames';
+import TupleToUnion from '../../types/common/TupleToUnion';
+import { defaults, pick } from 'lodash';
+
+type Props = ColProps;
+
+const sizePropNames = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+
+type SizeProps = Pick<ColProps, TupleToUnion<typeof sizePropNames>>;
+
+const sizePropsDefaults: Record<'default', SizeProps> = {
+    default: {
+        xs: 24,
+        md: 18,
+        lg: 14,
+        xl: 10,
+        xxl: 8
+    }
+};
+
+const PageCol: FunctionComponent<Props> = ({ className, children, ...props }) => {
+    const restProps = useMemo(() => {
+        const overriddenSizeProps = pick(props, sizePropNames);
+
+        return {
+            ...props,
+            ...defaults(overriddenSizeProps, sizePropsDefaults.default)
+        };
+    }, [props]);
+
+    return (
+        <Col className={classNames(styles.container)} {...restProps}>
+            {children}
+        </Col>
+    );
+};
+
+export default PageCol;

src/constants/router/menuItems.ts

@@ -68,6 +68,9 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.dataUrl
             },
+            {
+                route: routes.dataUrlViewer
+            },
             {
                 route: routes.dateUtils
             },

src/constants/router/routes.tsx

@@ -34,6 +34,7 @@ import CounterPage from '../../pages/counterPage/CounterPage';
 import RooksDemoPage from '../../pages/rooksDemoPage/RooksDemoPage';
 import MarkdownCheatSheetPage from '../../pages/markdownCheatSheetPage/MarkdownCheatSheetPage';
 import JsEventTesterPage from '../../pages/jsEventTesterPage/JsEventTesterPage';
+import DataUrlViewerPage from '../../pages/dataUrlViewerPage/DataUrlViewerPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -68,6 +69,7 @@ type AppRoutesMap = Readonly<{
     base64: AppRoute;
     dataUrl: AppRoute;
     dataUrlView: AppRoute;
+    dataUrlViewer: AppRoute;
     counter: AppRoute;
     rooksDemo: AppRoute;
     jsEventTester: AppRoute;
@@ -203,6 +205,11 @@ export const routes: AppRoutesMap = {
         title: 'Content View',
         isLayoutHidden: true
     },
+    dataUrlViewer: {
+        path: '/tools/data-url-viewer',
+        component: DataUrlViewerPage,
+        title: 'Data URL Viewer'
+    },
     counter: {
         path: '/tools/counter',
         component: CounterPage,

src/hooks/useInputState.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
 
 const handleEventTargetValueChange =
     <S>(callback: (value: S) => void) =>
@@ -17,8 +17,9 @@ function useInputState<S = undefined>(): [
 ];
 function useInputState<S>(initialState?: S | (() => S)) {
     const [value, setValue] = useState<PossiblyUndefined<S, typeof initialState>>(initialState);
+    const setValueByEvent = useCallback(handleEventTargetValueChange(setValue), [setValue]);
 
-    return [value, setValue, handleEventTargetValueChange(setValue)];
+    return [value, setValue, setValueByEvent];
 }
 
 export default useInputState;

src/layouts/appLayout/components/appHeader/components/appHeaderSearch/AppHeaderSearch.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useRef, useState } from 'react';
+import React, { FunctionComponent, useCallback, useMemo, useRef, useState } from 'react';
 import Search from 'antd/lib/input/Search';
 import styles from './AppHeaderSearch.module.scss';
 import { AutoComplete, InputRef } from 'antd';
@@ -12,21 +12,12 @@ import { AutoCompleteProps } from 'antd/lib/auto-complete';
 import classNames from 'classnames';
 import { useKey } from 'rooks';
 import { isEmpty } from 'lodash';
+import useAppSettings from '../../../../../../hooks/useAppSettings';
 
 interface OptionType extends DefaultOptionType {
     data: MenuRouteItem;
 }
 
-const allSearchOptions: OptionType[] = menuRouteItems.map((item) => {
-    const title = item.title ?? item.route.title;
-
-    return {
-        label: title,
-        value: title,
-        data: item
-    };
-});
-
 const filterOption: FilterFunc<OptionType> = (inputValue, option) => {
     const query = inputValue.trim().toLocaleLowerCase();
 
@@ -49,11 +40,26 @@ interface Props extends Omit<AutoCompleteProps, 'options' | 'filterOption' | 'on
 
 const AppHeaderSearch: FunctionComponent<Props> = ({ className, inputClassName, ...props }) => {
     const navigate = useNavigate();
-
-    const searchInputRef = useRef<InputRef>(null);
+    const { doShowHiddenMenuItems } = useAppSettings();
 
     const [query, setQuery] = useState<string>('');
 
+    const allSearchOptions = useMemo<OptionType[]>(() => {
+        return menuRouteItems
+            .filter((item) => doShowHiddenMenuItems || !item.isHidden)
+            .map((item) => {
+                const title = item.title ?? item.route.title;
+
+                return {
+                    label: title,
+                    value: title,
+                    data: item
+                };
+            });
+    }, [doShowHiddenMenuItems]);
+
+    const searchInputRef = useRef<InputRef>(null);
+
     const autoCompleteRef = useRef<BaseSelectRef>(null);
 
     const selectOption = useCallback((option: MenuRouteItem) => {

src/pages/dataUrlViewerPage/DataUrlViewerPage.module.scss

@@ -0,0 +1,3 @@
+.iframe {
+    background: white;
+}