PickerTogglerTag#2008 #2087

vik753 · 2024-03-25T09:58:27Z

Issue link(if exists): #2008

Description: added new component PickerTogglerTag to use with maxItems property, and added into a PickerInput new property renderTag, for rendering any custom variants of tags in the PickerToggler.

…t or independently.

github-actions · 2024-03-25T10:04:58Z

Generated by: track-bundle-size
Generated at: Wed, 03 Apr 2024 14:16:11 GMT
Bundle size diff (in kBytes). Not gzipped. Both CSS & JS included.
Baseline: v5.6.1 (2024-03-05)
CI Status: ok

Module	Baseline Size (v5.6.1)	Size	Diff	Within Threshold	Threshold (min - max)
templateApp	1041.48	1043.58	+2.1 `js:+1.65` `css:+0.46`	🆗	937.33 - 1145.63
@epam/app	6402.7	6614.61	+211.92 `js:+208.36` `css:+3.56`	🆗	5762.42 - 7042.96
@epam/draft-rte	53.77	53.78	+0.01 `js:+0.01` `css:+0`	🆗	48.39 - 59.15
@epam/electric	4.46	4.49	+0.01 `js:+0` `css:+0.01`	🆗	4.02 - 4.91
@epam/promo	55.29	55.14	-0.14 `js:+0.06` `css:-0.19`	🆗	49.75 - 60.81
@epam/uui-extra	0.21	0.21	0 `js:0` `css:0`	🆗	0.19 - 0.23
@epam/loveship	101.41	101.17	-0.24 `js:+0` `css:-0.24`	🆗	91.27 - 111.55
@epam/uui-components	269.68	271.33	+1.66 `js:+1.57` `css:+0.08`	🆗	242.71 - 296.64
@epam/uui-core	273.65	274.17	+0.51 `js:+0.51` `css:0`	🆗	246.29 - 301.02
@epam/uui-db	42.31	42.31	0 `js:0` `css:0`	🆗	38.08 - 46.54
@epam/uui-docs	174.98	175.53	+0.56 `js:+0.98` `css:-0.41`	🆗	157.47 - 192.47
@epam/uui-editor	157.65	173.26	+15.61 `js:+15.92` `css:-0.31`	🆗	141.89 - 173.42
@epam/uui-timeline	47.19	47.19	0 `js:+0` `css:0`	🆗	42.47 - 51.91
@epam/uui	580.2	581.31	+1.11 `js:+0.76` `css:+0.35`	🆗	522.18 - 638.23

new sizes (raw)

To set the sizes as a new baseline, you can copy/paste next content to the uui-build/config/bundleSizeBaseLine.json and commit the file.

{
  "version": "5.7.1",
  "timestamp": "2024-04-03",
  "sizes": {
    "templateApp": {
      "css": 284412,
      "js": 784215
    },
    "@epam/app": {
      "css": 1618031,
      "js": 5155332
    },
    "@epam/draft-rte": {
      "css": 9762,
      "js": 45308
    },
    "@epam/electric": {
      "css": 2289,
      "js": 2299
    },
    "@epam/promo": {
      "css": 40368,
      "js": 16101
    },
    "@epam/uui-extra": {
      "css": 0,
      "js": 213
    },
    "@epam/loveship": {
      "css": 49451,
      "js": 54148
    },
    "@epam/uui-components": {
      "css": 22214,
      "js": 255628
    },
    "@epam/uui-core": {
      "css": 0,
      "js": 280745
    },
    "@epam/uui-db": {
      "css": 0,
      "js": 43327
    },
    "@epam/uui-docs": {
      "css": 3189,
      "js": 176559
    },
    "@epam/uui-editor": {
      "css": 12625,
      "js": 164792
    },
    "@epam/uui-timeline": {
      "css": 2251,
      "js": 46073
    },
    "@epam/uui": {
      "css": 272887,
      "js": 322377
    }
  }
}

Generated by: generate-components-api
CI Status: ok

Total amount of exported types/props without JSDoc comments

	Amount
Types	281 (+2) ⚠️🆗
Props	286 (+0) 🆗

New missing comments

NOTE: It's either a new exported types/props without JSDoc, or it's an existing code from which you deleted the JSDoc comments.

Types:
- @epam/uui-components:PickerTogglerRenderItemParams
- @epam/uui:PickerTogglerTagProps
Props:
- <empty>

AlekseyManetov · 2024-03-26T14:39:06Z

app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx

+import { FlexCell, PickerInput, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { Location } from '@epam/uui-docs';
+
+const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [


Why do we have cascadeSelection options in this example?

removed it, it will work by default

AlekseyManetov · 2024-03-26T14:41:46Z

app/src/docs/pickerInput/PickerInput.doc.tsx

@@ -80,6 +80,7 @@ export class PickerInputDoc extends BaseDocsBlock {
                <DocExample title="Picker with changed array of items" path="./_examples/pickerInput/PickerWithChangingItemsArray.example.tsx" />
                <DocExample title="Linked pickers" path="./_examples/pickerInput/LinkedPickers.example.tsx" />
                <DocExample title="Change portal target and dropdown placement" path="./_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx" />
+                <DocExample title="PickerTogglerTag and renderTag demo" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />


Change title to 'Custom toggler tag render'

AlekseyManetov · 2024-03-26T14:49:29Z

public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json

+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " is a component we recommend to use for rendering Tags."


Let's change this here text to - You can utilize the default UUI implementation of tags for PickerInput by using the PickerTogglerTag component.

AlekseyManetov · 2024-03-26T14:52:30Z

uui-components/src/i18n.tsx

@@ -10,7 +10,7 @@ export const i18n = {
        showAll: 'SHOW ALL',
    },
    pickerToggler: {
-        createItemValue: (length: number, entityName: string) => `${length} ${entityName} selected`,
+        createCollapsedName: (length: number, entityName: string) => `+ ${length} ${entityName} selected`,


we can't rename this object fields since it will cause the breaking change, let's revert it.

AlekseyManetov · 2024-03-26T14:59:27Z

uui/components/pickers/PickerInput.tsx

-export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId>;
+export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {
+    /**
+     * Render Callback for making custom Tags.


Let's change to - 'Render callback for picker toggler selection tag'

AlekseyManetov · 2024-03-26T15:00:06Z

uui/components/pickers/PickerInput.tsx

+export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {
+    /**
+     * Render Callback for making custom Tags.
+     * If omitted, they will be rendered by default component PickerTogglerTag.


- If omitted, default `PickerTogglerTag` component will be rendered.

AlekseyManetov · 2024-03-26T15:03:03Z

uui/components/pickers/PickerInput.tsx

+        const renderTargetFn = props.renderToggler || ((pickerTogglerProps) => (
+            <PickerToggler
+                { ...pickerTogglerProps }
+                renderItem={ props.renderTag ? (renderItemProps) => props.renderTag(renderItemProps) : null }


Can we add renderItem into targetProps params. And also why do we have this condition? i guess we can just pass it as is, without wrapping into arrow function.

AlekseyManetov · 2024-03-26T15:10:57Z

uui/components/pickers/PickerToggler.tsx

+            rowProps={ itemProps.rowProps }
+            key={ itemProps.isCollapsed ? 'collapsed' : itemProps.rowProps?.id as string }
+            size={ props.size }
+            isDisabled={ props.isDisabled || props.isReadonly || itemProps.isDisabled }


I supposed that we shouldn't make any props calculation here, we should receive final prop from params and here just spread it to the component, i believe that default renderItem callback should look like:

const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => ( <PickerTogglerTag { ...itemProps } /> )

I left only size here, or do we want to move it to the uui-components?

AlekseyManetov · 2024-03-27T14:31:11Z

uui-components/src/pickers/PickerToggler.tsx

-                    props.onClear?.();
+        let isDisabled = props.isDisabled || props.isReadonly;
+
+        const multiItems = props.selection?.map((row) => {


Let's rename this variable to 'tags', to be more informative

AlekseyManetov · 2024-03-27T14:31:46Z

uui-components/src/pickers/PickerToggler.tsx

+        const multiItems = props.selection?.map((row) => {
+            isDisabled = isDisabled || row.isDisabled;
+
+            const newMultiItems = {


Let's rename this variable to 'tagProps', to be more informative

AlekseyManetov · 2024-03-27T14:36:55Z

app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx

+                valueType="id"
+                maxItems={ 2 }
+                renderTag={ (props) => {
+                    if (props.isCollapsed) {


Let's add comment that it renders 'N items selected' tag

AlekseyManetov · 2024-03-27T14:42:12Z

uui/components/pickers/PickerToggler.tsx

-        />
-    );
+function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>): JSX.Element {
+    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => <PickerTogglerTag { ...itemProps } size={ props.size } />;


Add size to the result itemProps which will be passed to the user renderItem

AlekseyManetov · 2024-03-27T14:44:28Z

uui/components/pickers/PickerTogglerTag.tsx

+    size?: types.ControlSize;
+    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */
+    isCollapsed?: boolean;
+    /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */


/** DataRowProps object of the rendered item. */

AlekseyManetov · 2024-03-27T14:46:57Z

uui/components/pickers/PickerTogglerTag.tsx

+export interface PickerTogglerTagProps<TItem, TId> extends TagProps {
+    /** Defines component size */
+    size?: types.ControlSize;
+    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */


/** Indicates that tag is collapsed rest selected items, like '+N items selected' */

AlekseyManetov · 2024-03-27T14:49:20Z

app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx

+
+export default function PickerTogglerTagDemoExample() {
+    const svc = useUuiContext();
+    const [value, onValueChange] = useState<string[]>([]);


Add initial items, for example 5

AlekseyManetov · 2024-04-03T13:26:32Z

public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json

+    "type": "paragraph",
+    "children": [
+      {
+        "text": "You can utilize the default UUI implementation of tags for PickerInput by using the "


Add description that user should use renderTag prop for such cunstomization

AlekseyManetov · 2024-04-03T13:28:43Z

uui/components/pickers/PickerInput.tsx

+     * Render callback for picker toggler selection tag
+     * If omitted, default `PickerTogglerTag` component will be rendered
+     */
+    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;


I believe this callback receive IRenderItemProps interface, not PickerTogglerTagProps, yes?

AlekseyManetov · 2024-04-03T13:29:45Z

uui-components/src/pickers/PickerToggler.tsx

 import { getMaxItems } from './helpers';

+export interface IRenderItemProps<TItem, TId> extends IHasCaption, IDisableable {


Lets rename to PickerTogglerRenderItemParams

# Conflicts: # changelog.md

vik753 and others added 4 commits March 22, 2024 14:08

[PickerTogglerTag]: made to use in PickerToggler renderItem by defaul…

de21b86

…t or independently.

Merge branch 'develop' into feature/PickerTogglerTag-#2008

8105bcb

[PickerTogglerTag]: PickerTogglerProps in progress

0f20602

[PickerInput]: added renderTag property

0cd6d1a

vik753 requested a review from AlekseyManetov March 25, 2024 09:58

vik753 added 6 commits March 25, 2024 16:00

[PickerTogglerTag]: fixed test for new realisation of maxItems prop

e82dff9

Merge branch 'develop' into feature/PickerTogglerTag-#2008

1535bea

[PickerTogglerTag]: removed tooltipContext and made a doc example

e74fe08

[PickerTogglerTag]: fixed TS error

ab89517

Merge branch 'develop' into feature/PickerTogglerTag-#2008

898f9ef

[PickerTogglerTag]: added changelog

3a38dd9

AlekseyManetov requested changes Mar 26, 2024

View reviewed changes

vik753 added 2 commits March 27, 2024 12:09

[PickerTogglerTag]: fixed MR remarks

8cf9d8c

Merge branch 'develop' into feature/PickerTogglerTag-#2008

34ad4a1

AlekseyManetov requested changes Mar 27, 2024

View reviewed changes

vik753 added 2 commits March 28, 2024 11:03

[PickerTogglerTag]: fixed interfaces for renderItem, and reworked demo.

2b83528

Merge branch 'develop' into feature/PickerTogglerTag-#2008

1fb50c7

AlekseyManetov requested changes Apr 3, 2024

View reviewed changes

vik753 added 2 commits April 3, 2024 16:55

Merge branch 'develop' into feature/PickerTogglerTag-#2008

2ff7675

# Conflicts: # changelog.md

[PickerTogglerTag]: fixed renderItem interface.

ba8da41

AlekseyManetov merged commit 744dffa into develop Apr 3, 2024
4 checks passed

		import { getMaxItems } from './helpers';

		export interface IRenderItemProps<TItem, TId> extends IHasCaption, IDisableable {

PickerTogglerTag#2008 #2087

PickerTogglerTag#2008 #2087

Conversation

vik753 commented Mar 25, 2024

Issue link(if exists): #2008

Description: added new component PickerTogglerTag to use with maxItems property, and added into a PickerInput new property renderTag, for rendering any custom variants of tags in the PickerToggler.

github-actions bot commented Mar 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Mar 25, 2024 •

edited

Loading