@axinom/mosaic-ui 0.34.0-rc.7 → 0.34.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.34.0-rc.7",
+  "version": "0.34.0-rc.8",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.7-rc.7",
+    "@axinom/mosaic-core": "^0.4.7-rc.8",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2a04de5c6ada810610104313331a4b2324cf065f"
+  "gitHead": "5edc02cc390133cd76b231e57bde5394db8a5aa0"
 }

package/src/components/Filters/Filter/Filter.spec.tsx

@@ -1,7 +1,12 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { Button } from '../../Buttons';
-import { CustomFilterProps, FilterType, FilterTypes } from '../Filters.model';
+import {
+  CustomFilterProps,
+  FilterType,
+  FilterTypes,
+  SelectedValueRenderer,
+} from '../Filters.model';
 import { FreeTextFilter } from '../SelectionTypes/FreeTextFilter/FreeTextFilter';
 import { OptionsFilter } from '../SelectionTypes/OptionsFilter/OptionsFilter';
 import { Filter, FilterProps } from './Filter';
@@ -148,6 +153,24 @@ describe('Filter', () => {
     expect(wrapper.find('.selectedValue').exists()).toBe(false);
   });
 
+  it(`'selectedValueRenderer' value is displayed when the prop is set`, () => {
+    const renderedValue = `${sampleText} renderer`;
+    const selectedValueRenderer: SelectedValueRenderer = (value) => {
+      return `${value} renderer`;
+    };
+
+    const wrapper = mount(
+      <Filter {...defaultProps} options={freeTextFilter} value={sampleText} />,
+    );
+
+    expect(wrapper.find('.selectedValue').text()).toEqual(sampleText);
+
+    wrapper.setProps({ selectedValueRenderer });
+    wrapper.update();
+
+    expect(wrapper.find('.selectedValue').text()).toEqual(renderedValue);
+  });
+
   it('Raises onFilterChange with prop name and new undefined value when filter is closed', () => {
     const mockValue = 'test-value';
     const wrapper = mount(

package/src/components/Filters/Filter/Filter.tsx

@@ -26,6 +26,7 @@ export interface FilterProps<T extends Data> {
   index?: number;
   isActive: boolean;
   className?: string;
+  selectedValueRenderer?: (value: FilterValue) => string;
   onFilterChange: (prop: keyof T, value: FilterValue, index: number) => void;
   onValidate?: (currentValue: FilterValue) => string | null | undefined;
   onFilterClicked: () => void;
@@ -37,6 +38,7 @@ export const Filter = <T extends Data>({
   index = -1,
   isActive,
   className = '',
+  selectedValueRenderer,
   onFilterChange,
   onFilterClicked,
   onValidate,
@@ -72,6 +74,10 @@ export const Filter = <T extends Data>({
   };
 
   const renderValue = (value: unknown): ReactNode => {
+    if (selectedValueRenderer !== undefined) {
+      return selectedValueRenderer(value);
+    }
+
     switch (options.type) {
       case FilterTypes.Date:
         return formatDate(String(value));

package/src/components/Filters/Filters.model.ts

@@ -15,6 +15,7 @@ export interface FilterConfig<T extends Data> {
   label: string;
   property: keyof T;
   type: FilterTypes;
+  selectedValueRenderer?: SelectedValueRenderer;
   onValidate?: FilterValidatorFunction<T>;
 }
 
@@ -105,3 +106,5 @@ export type FilterValidatorFunction<T> = (
   value: FilterValue,
   allValues: FilterValues<T>,
 ) => FilterValidationResult;
+
+export type SelectedValueRenderer = (value: FilterValue) => string;

package/src/components/Filters/Filters.stories.tsx

@@ -153,6 +153,15 @@ const customFilter: FilterType<{ custom: string }> = {
   label: 'Custom Filter (multi select)',
   property: 'custom',
   type: FilterTypes.Custom,
+  selectedValueRenderer: (value: unknown) => {
+    const items = value as string[];
+
+    return String(
+      `${items.length} item${items.length === 1 ? '' : 's'}: ${items
+        .join(', ')
+        .replace(/([a-zA-Z])(\d)/g, '$1 $2')}`,
+    );
+  },
   component: CustomFilterComponent,
 };
 

package/src/components/Filters/Filters.tsx

@@ -134,6 +134,7 @@ export const Filters = <T extends Data>({
         index={index}
         isActive={index === activeFilterIndex}
         onFilterChange={filtersChangedHandler}
+        selectedValueRenderer={filter.selectedValueRenderer}
         onValidate={(currentValue) =>
           filter.onValidate &&
           filter.onValidate(currentValue, activeFilters.current)