Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/picker custom top element #3465

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

adids1221
Copy link
Contributor

@adids1221 adids1221 commented Dec 23, 2024

Description

Picker new customTopElement, onItemSelection props.
onItemSelection get's called when item selection toggled, and can indicate about the draft value of the multi picker.
customTopElement will be render above the PickerItemList, the custom element will get props only in Multi selection mode.

Changelog

Picker support for new customTopElement and onItemSelection callback function.

Additional info

MADS-4575

@@ -122,6 +132,15 @@ export default class PickerScreen extends Component {
);
};

handleTopElementPress = (allOptionsSelected: boolean, setValue: any) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We usually use on and not handle

const {isMultiMode, value, setValue} = context;
if (customTopElement) {
if (isMultiMode) {
console.log(`renderCustomTopElement, isMultiMode!, value:`, value);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this log

return customTopElement({value, setValue});
}
//@ts-expect-error - PickerWithSingleValue props
return customTopElement();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't like the difference in API

/**
* Custom top element
*/
customTopElement?: () => React.ReactElement;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're calling the prop customTopElement but it's actually a renderCustomTopElement (it's a function)

if (isMultiMode) {
console.log(`renderCustomTopElement, isMultiMode!, value:`, value);
//@ts-expect-error - PickerWithMultiValue props need to pass the correct props
return customTopElement({value, setValue});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid exposing internal workings on the components.
What if we want to change it in the future?

/*
* Set the new multi draft value
*/
setValue: (value: PickerMultiValue) => void;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's remove the setValue and only expose the value, the user can set their internal state thus affecting the component.

@M-i-k-e-l M-i-k-e-l assigned adids1221 and unassigned M-i-k-e-l Jan 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants