feat: add case-sensitive search

Author: Raubzeug

src/ReactUnipika/ReactUnipika.tsx

@@ -22,6 +22,7 @@ export interface ReactUnipikaProps {
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
     collapseIconType?: CollapseIconType;
+    caseSensitiveSearch?: boolean;
 }
 
 const defaultUnipikaSettings = {
@@ -45,6 +46,7 @@ export function ReactUnipika({
     toolbarStickyTop = 0,
     renderToolbar,
     collapseIconType,
+    caseSensitiveSearch,
 }: ReactUnipikaProps) {
     const convertedValue = React.useMemo(() => {
         // TODO: fix me later
@@ -98,6 +100,7 @@ export function ReactUnipika({
                     toolbarStickyTop={toolbarStickyTop}
                     renderToolbar={renderToolbar}
                     collapseIconType={collapseIconType}
+                    caseSensitiveSearch={caseSensitiveSearch}
                 />
             ) : (
                 <pre

src/ReactUnipika/__stories__/ReactUnipika.stories.tsx

@@ -25,6 +25,13 @@ export const Yson: StoryObj<ReactUnipikaProps> = {
     },
 };
 
+export const WithCaseSensitiveSearch: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        caseSensitiveSearch: true,
+    },
+};
+
 export const WithContentAbove: StoryObj<ReactUnipikaProps> = {
     render() {
         return (

src/StructuredYson/StructuredYson.tsx

@@ -39,6 +39,7 @@ interface Props {
     toolbarStickyTop?: number;
     renderToolbar?: (props: ToolbarProps) => React.ReactNode;
     collapseIconType?: CollapseIconType;
+    caseSensitiveSearch?: boolean;
 }
 
 interface State {
@@ -60,13 +61,15 @@ function calculateState(
     value: State['value'],
     collapsedState: CollapsedState,
     filter: string,
+    caseSensitive: boolean,
     settings: UnipikaSettings,
 ) {
     const flattenResult = flattenUnipika(value, {
         isJson: settings.format !== 'yson',
         collapsedState: collapsedState,
         filter,
         settings: settings,
+        caseSensitive,
     });
 
     return Object.assign(
@@ -93,7 +96,13 @@ export class StructuredYson extends React.PureComponent<Props, State> {
         if (prevValue !== value || !isEmpty_(res)) {
             Object.assign<Partial<State>, Partial<State>>(res, {
                 value,
-                ...calculateState(value, state.collapsedState, state.filter, settings),
+                ...calculateState(
+                    value,
+                    state.collapsedState,
+                    state.filter,
+                    props.caseSensitiveSearch || false,
+                    settings,
+                ),
             });
         }
         return isEmpty_(res) ? null : res;
@@ -131,6 +140,7 @@ export class StructuredYson extends React.PureComponent<Props, State> {
         cb?: () => void,
     ) {
         const {value, settings} = this.state;
+        const {caseSensitiveSearch} = this.props;
         const {
             collapsedState = this.state.collapsedState,
             matchIndex = this.state.matchIndex,
@@ -142,7 +152,13 @@ export class StructuredYson extends React.PureComponent<Props, State> {
                 collapsedState,
                 filter,
                 matchIndex,
-                ...calculateState(value, collapsedState, filter, settings),
+                ...calculateState(
+                    value,
+                    collapsedState,
+                    filter,
+                    caseSensitiveSearch || false,
+                    settings,
+                ),
             },
             cb,
         );

src/StructuredYson/StructuredYsonToolbar.tsx

@@ -1,11 +1,13 @@
 import React, {useRef} from 'react';
 
-import {Button, Icon, TextInput} from '@gravity-ui/uikit';
+import {Button, Icon, TextInput, ActionTooltip} from '@gravity-ui/uikit';
 import {ArrowDownToLine, ArrowUpToLine, ChevronDown, ChevronUp} from '@gravity-ui/icons';
 
 import {Toolbar} from '../Toolbar/Toolbar';
 import {cn} from '../utils/classname';
 
+import i18n from './i18n';
+
 import './StructuredYson.scss';
 
 const block = cn('g-ru-structured-yson');
@@ -50,35 +52,38 @@ export const StructuredYsonToolbar: React.FC<StructuredYsonToolbarProps> = ({
                     size="m"
                     type="text"
                     value={filter}
-                    placeholder="Search..."
+                    placeholder={i18n('description_search')}
                     onUpdate={onFilterChange}
                     autoFocus={false}
                     onKeyDown={onEnterKeyDown}
                     qa={'qa:structuredyson:search'}
                 />
-                <Button
-                    className={block('match-btn')}
-                    view="flat-secondary"
-                    title="Next"
-                    onClick={onNextMatch}
-                    disabled={!count}
-                    pin={'clear-clear'}
-                    qa={'qa:structuredyson:search:next'}
-                >
-                    <Icon data={ChevronDown} />
-                </Button>
-                <Button
-                    className={block('match-btn')}
-                    view="flat-secondary"
-                    title="Back"
-                    onClick={onPrevMatch}
-                    disabled={!count}
-                    pin={'brick-brick'}
-                    qa={'qa:structuredyson:search:prev'}
-                >
-                    <Icon data={ChevronUp} />
-                </Button>
-                <span className={block('match-counter')} title={'Matched rows'}>
+
+                <ActionTooltip title={i18n('action_next')}>
+                    <Button
+                        className={block('match-btn')}
+                        view="flat-secondary"
+                        onClick={onNextMatch}
+                        disabled={!count}
+                        pin={'clear-clear'}
+                        qa={'qa:structuredyson:search:next'}
+                    >
+                        <Icon data={ChevronDown} />
+                    </Button>
+                </ActionTooltip>
+                <ActionTooltip title={i18n('action_back')}>
+                    <Button
+                        className={block('match-btn')}
+                        view="flat-secondary"
+                        onClick={onPrevMatch}
+                        disabled={!count}
+                        pin={'brick-brick'}
+                        qa={'qa:structuredyson:search:prev'}
+                    >
+                        <Icon data={ChevronUp} />
+                    </Button>
+                </ActionTooltip>
+                <span className={block('match-counter')} title={i18n('description_matched-rows')}>
                     {matchPosition} / {count || 0}
                 </span>
             </React.Fragment>
@@ -93,13 +98,17 @@ export const StructuredYsonToolbar: React.FC<StructuredYsonToolbarProps> = ({
                     name: 'buttons',
                     node: (
                         <span className={block('buttons')}>
-                            <Button title="Expand all" onClick={onExpandAll}>
-                                <Icon data={ArrowDownToLine} />
-                            </Button>
+                            <ActionTooltip title={i18n('action_expand-all')}>
+                                <Button onClick={onExpandAll} view="flat-secondary">
+                                    <Icon data={ArrowDownToLine} />
+                                </Button>
+                            </ActionTooltip>
                             &nbsp;&nbsp;
-                            <Button onClick={onCollapseAll} title="Collapse all">
-                                <Icon data={ArrowUpToLine} />
-                            </Button>
+                            <ActionTooltip title={i18n('action_collapse-all')}>
+                                <Button onClick={onCollapseAll} view="flat-secondary">
+                                    <Icon data={ArrowUpToLine} />
+                                </Button>
+                            </ActionTooltip>
                         </span>
                     ),
                 },

src/StructuredYson/i18n/en.json

@@ -0,0 +1,17 @@
+{
+  "action_collapse-all": "Collapse all",
+  "action_expand-all": "Expand all",
+  "action_next": "Next",
+  "action_back": "Back",
+  "description_search": "Search...",
+  "description_matched-rows": "Matched rows",
+  "description_full-value": "Full value",
+  "context_case-sensitive-search": "Case sensitive search enadled",
+  "context_case-sensitive-search-disabled": "Case sensitive search disabled",
+  "context_items-count": [
+    " {{count}} item ",
+    " {{count}} items ",
+    " {{count}} items ",
+    " {{count}} items "
+  ]
+}

src/StructuredYson/i18n/index.ts

@@ -0,0 +1,8 @@
+import {makeKeyset} from '../../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'structured-yson';
+
+export default makeKeyset(COMPONENT, {ru, en});

src/StructuredYson/i18n/ru.json

@@ -0,0 +1,17 @@
+{
+  "action_collapse-all": "Свернуть все",
+  "action_expand-all": "Развернуть все",
+  "action_next": "Далее",
+  "action_back": "Назад",
+  "description_search": "Поиск...",
+  "description_matched-rows": "Совпадающие строки",
+  "description_full-value": "Полное значение",
+  "context_case-sensitive-search": "Поиск с учетом регистра включен",
+  "context_case-sensitive-search-disabled": "Поиск с учетом регистра отключен",
+  "context_items-count": [
+    " {{count}} элемент ",
+    " {{count}} элемента ",
+    " {{count}} элементов ",
+    " {{count}} элементов "
+  ]
+}

src/utils/flattenUnipika.ts

@@ -51,6 +51,7 @@ interface FlattenUnipikaOptions {
     matchedState?: {};
     settings?: UnipikaSettings;
     filter?: string;
+    caseSensitive?: boolean;
 }
 
 export interface FlattenUnipikaResult {
@@ -75,6 +76,7 @@ export function flattenUnipika(
     flattenUnipikaImpl(value, 0, ctx);
     const searchIndex = makeSearchIndex(ctx.dst, options?.filter, {
         settings: options?.settings,
+        caseSensitive: options?.caseSensitive,
     });
     return {data: ctx.dst, searchIndex};
 }
@@ -438,6 +440,7 @@ function fromUnipikaPrimitive(value: UnipikaPrimitive, level: number): UnipikaFl
 
 interface SearchParams {
     settings?: UnipikaSettings;
+    caseSensitive?: boolean;
 }
 
 export interface SearchInfo {
@@ -463,8 +466,8 @@ export function makeSearchIndex(
     const res: SearchIndex = {};
     for (let i = 0; i < tree.length; ++i) {
         const {key, value} = tree[i];
-        const keyMatch = rowSearchInfo(key, filter, settings);
-        const valueMatch = rowSearchInfo(value, filter, settings);
+        const keyMatch = rowSearchInfo(key, filter, settings, options?.caseSensitive);
+        const valueMatch = rowSearchInfo(value, filter, settings, options?.caseSensitive);
         if (keyMatch || valueMatch) {
             res[i] = Object.assign({}, keyMatch && {keyMatch}, valueMatch && {valueMatch});
         }
@@ -478,6 +481,7 @@ function rowSearchInfo(
     v: SearchValue,
     filter: string,
     settings: UnipikaSettings,
+    caseSensitive?: boolean,
 ): Array<number> | undefined {
     if (!v) {
         return undefined;
@@ -492,12 +496,17 @@ function rowSearchInfo(
         tmp = tmp.substring(1, tmp.length - 1); // skip quotes
     }
     let from = 0;
+    let normolizedFilter = filter;
+    if (!caseSensitive) {
+        tmp = tmp.toLowerCase();
+        normolizedFilter = filter.toLowerCase();
+    }
     while (from >= 0 && from < tmp.length) {
-        const index = tmp.indexOf(filter, from);
+        const index = tmp.indexOf(normolizedFilter, from);
         if (-1 === index) {
             break;
         }
-        from = index + filter.length;
+        from = index + normolizedFilter.length;
         res.push(index);
     }
     return res.length ? res : undefined;