Skip to content

Infra/picker expandable overlay #1632

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.

Sign up for GitHub

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

Merged
merged 10 commits into from
Nov 14, 2021
Merged

Infra/picker expandable overlay #1632

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
09fd90f
Support rendering a custom overlay in ExpandableOverlay (specifically…
ethanshar Oct 31, 2021
81e313e
Refactor Picker to use ExpandableOverlay instead of old TextField exp…
ethanshar Oct 31, 2021
7ce8d32
Remove useless test
ethanshar Oct 31, 2021
1e845b8
Merge branch 'master' into infra/Picker_ExpandableOverlay
ethanshar Nov 3, 2021
3c67c9b
Code review fixes
ethanshar Nov 3, 2021
d627b19
renaming changes
ethanshar Nov 5, 2021
8c08a5e
destruct relevant props at the top of the method
ethanshar Nov 5, 2021
5153fa1
Invoke user's onDismiss callback in ExpandableOverlay component
ethanshar Nov 5, 2021
0252d3a
Change expandableVisible to visible
ethanshar Nov 5, 2021
3b0031a
Merge branch 'master' into infra/Picker_ExpandableOverlay
ethanshar Nov 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions generatedTypes/src/incubator/expandableOverlay/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import { TouchableOpacityProps } from '../../components/touchableOpacity';
import { ModalProps, ModalTopBarProps } from '../../components/modal';
import { DialogProps } from '../../components/dialog';
export interface RenderCustomOverlayProps {
expandableVisible: boolean;
visible: boolean;
openExpandable: () => void;
closeExpandable: () => void;
toggleExpandable: () => void;
}
export declare type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
/**
Expand Down Expand Up @@ -35,7 +36,7 @@ export declare type ExpandableOverlayProps = TouchableOpacityProps & PropsWithCh
/**
* A custom overlay to render instead of Modal or Dialog components
*/
renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement;
renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined;
}>;
interface ExpandableOverlayMethods {
openExpandable: () => void;
Expand Down Expand Up @@ -69,7 +70,7 @@ declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps &
/**
* A custom overlay to render instead of Modal or Dialog components
*/
renderCustomOverlay?: ((props: RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
renderCustomOverlay?: ((props: RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined) | undefined;
} & {
children?: React.ReactNode;
} & React.RefAttributes<ExpandableOverlayMethods>>;
Expand Down
2 changes: 1 addition & 1 deletion src/components/picker/PickerModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// TODO: This should be renamed to PickerOverlayContent cause it's
// responsible for rendering the Modal anymore
// not responsible for rendering the Modal anymore
import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
Expand Down
26 changes: 13 additions & 13 deletions src/components/picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,10 +313,10 @@ class Picker extends Component {
// _.invoke(this.props, 'onPress');
// };

toggleExpandableModal = value => {
this.setState({showExpandableModal: value});
this.clearSearchField();
};
// toggleExpandableModal = value => {
// this.setState({showExpandableModal: value});
// this.clearSearchField();
// };

toggleItemSelection = item => {
const {getItemValue} = this.props;
Expand All @@ -334,15 +334,15 @@ class Picker extends Component {
cancelSelect = () => {
this.setState({value: this.props.value});
// this.toggleExpandableModal(false);
this.pickerExpandable.current.closeExpandable();
this.pickerExpandable.current?.closeExpandable?.();
this.props.topBarProps?.onCancel?.();
};

onDoneSelecting = item => {
this.clearSearchField();
this.setState({value: item});
// this.toggleExpandableModal(false);
this.pickerExpandable.current.closeExpandable();
this.pickerExpandable.current?.closeExpandable?.();
this.props.onChange?.(item);
};

Expand All @@ -363,15 +363,14 @@ class Picker extends Component {
this.setState({searchValue: ''});
};

renderCustomModal = ({expandableVisible, openExpandable, closeExpandable}) => {
renderCustomModal = ({visible, toggleExpandable}) => {
const {renderCustomModal, children} = this.props;
const {value} = this.state;

// TODO: Deprecate renderCustomModal prop
if (renderCustomModal) {
const modalProps = {
visible: expandableVisible,
toggleModal: () => (expandableVisible ? closeExpandable() : openExpandable()),
visible,
toggleModal: toggleExpandable,
onSearchChange: this.onSearchChange,
children,
onDone: () => this.onDoneSelecting(value),
Expand Down Expand Up @@ -513,10 +512,11 @@ class Picker extends Component {
{...this.getAccessibilityInfo()}
importantForAccessibility={'no-hide-descendants'}
value={label}
// expandable
// renderExpandable={this.renderExpandableModal}
// onToggleExpandableModal={this.toggleExpandableModal}
selection={Constants.isAndroid ? {start: 0} : undefined}
// Disable TextField expandable feature
expandable={false}
renderExpandable={_.noop}
onToggleExpandableModal={_.noop}
/>
)}
</ExpandableOverlay>
Expand Down
18 changes: 14 additions & 4 deletions src/incubator/expandableOverlay/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
import Dialog, {DialogProps} from '../../components/dialog';

export interface RenderCustomOverlayProps {
expandableVisible: boolean;
visible: boolean;
openExpandable: () => void;
closeExpandable: () => void;
toggleExpandable: () => void;
}

export type ExpandableOverlayProps = TouchableOpacityProps &
Expand Down Expand Up @@ -40,7 +41,7 @@ export type ExpandableOverlayProps = TouchableOpacityProps &
/**
* A custom overlay to render instead of Modal or Dialog components
*/
renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement;
renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined;
}>;

interface ExpandableOverlayMethods {
Expand All @@ -64,13 +65,17 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
const showExpandable = useCallback(() => setExpandableVisible(true), []);
const hideExpandable = useCallback(() => setExpandableVisible(false), []);
Copy link
Collaborator

Choose a reason for hiding this comment

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

We need to invoke the Modal/Dialog's 'onDismiss' in 'hideExpandable' so the user can pass a callback.
And maybe Modal's 'onShow' in 'showExpandable'

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Fixed


const toggleExpandable = useCallback(() => (expandableVisible ? hideExpandable() : showExpandable()),
[expandableVisible, showExpandable, hideExpandable]);

useImperativeHandle(ref, () => ({
openExpandable: () => {
showExpandable();
},
closeExpandable: () => {
hideExpandable();
}
},
toggleExpandable
}));

const renderModal = () => {
Expand All @@ -92,7 +97,12 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {

const renderOverlay = () => {
if (renderCustomOverlay) {
return renderCustomOverlay({expandableVisible, openExpandable: showExpandable, closeExpandable: hideExpandable});
return renderCustomOverlay({
visible: expandableVisible,
openExpandable: showExpandable,
closeExpandable: hideExpandable,
toggleExpandable
});
} else {
return useDialog ? renderDialog() : renderModal();
}
Expand Down