-
Notifications
You must be signed in to change notification settings - Fork 722
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
base: master
Are you sure you want to change the base?
Conversation
@@ -122,6 +132,15 @@ export default class PickerScreen extends Component { | |||
); | |||
}; | |||
|
|||
handleTopElementPress = (allOptionsSelected: boolean, setValue: any) => { |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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(); |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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}); |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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.
Description
Picker new
customTopElement, onItemSelection
props.onItemSelection
get's called when item selection toggled, and can indicate about thedraft value
of the multi picker.customTopElement
will be render above thePickerItemList
, the custom element will get props only inMulti
selection mode.Changelog
Picker support for new
customTopElement
andonItemSelection
callback function.Additional info
MADS-4575