From 6baaa2ec8fa14bad027155d1c995abaa55a01c0e Mon Sep 17 00:00:00 2001 From: millasml Date: Thu, 5 Aug 2021 14:20:55 -0400 Subject: [PATCH 1/4] Fill option for select --- .../select-examples/selectExample.tsx | 5 +++++ .../select/src/components/select/select.tsx | 19 +++++++++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx index 293aa55a39..211405b466 100644 --- a/packages/docs-app/src/examples/select-examples/selectExample.tsx +++ b/packages/docs-app/src/examples/select-examples/selectExample.tsx @@ -34,6 +34,7 @@ export interface ISelectExampleState { resetOnSelect: boolean; disableItems: boolean; disabled: boolean; + fill: boolean; } export class SelectExample extends React.PureComponent { @@ -43,6 +44,7 @@ export class SelectExample extends React.PureComponent + = ISelectProps; /** @deprecated use SelectProps */ export interface ISelectProps extends IListItemsProps { + /** + * Whether the component should take up the full width of its container. + * This overrides `popoverProps.fill` and `tagInputProps.fill`. + */ + fill?: boolean; + /** * Whether the dropdown list can be filtered. * Disabling this option will remove the `InputGroup` and ignore `inputProps`. @@ -129,7 +135,16 @@ export class Select extends AbstractPureComponent2, ISelectSta private renderQueryList = (listProps: IQueryListRendererProps) => { // not using defaultProps cuz they're hard to type with generics (can't use on static members) - const { filterable = true, disabled = false, inputProps = {}, popoverProps = {} } = this.props; + const { fill, filterable = true, disabled = false, inputProps = {}, popoverProps = {} } = this.props; + + const child = React.Children.only(this.props.children) as React.ReactElement; + + const childProps: { fill?: boolean } = {}; + + if (fill) { + popoverProps.fill = true; + childProps.fill = true; + } const input = ( extends AbstractPureComponent2, ISelectSta onKeyDown={this.state.isOpen ? handleKeyDown : this.handleTargetKeyDown} onKeyUp={this.state.isOpen ? handleKeyUp : undefined} > - {this.props.children} + {React.cloneElement(child, { ...childProps })}
{filterable ? input : undefined} From d0933687cf181ef784a08b0a774dda023a0dcde2 Mon Sep 17 00:00:00 2001 From: millasml Date: Thu, 5 Aug 2021 16:21:39 -0400 Subject: [PATCH 2/4] use React.Children.map in case there is more than 1 child --- packages/select/src/components/select/select.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx index d07bdb4159..5c83acba47 100644 --- a/packages/select/src/components/select/select.tsx +++ b/packages/select/src/components/select/select.tsx @@ -137,8 +137,6 @@ export class Select extends AbstractPureComponent2, ISelectSta // not using defaultProps cuz they're hard to type with generics (can't use on static members) const { fill, filterable = true, disabled = false, inputProps = {}, popoverProps = {} } = this.props; - const child = React.Children.only(this.props.children) as React.ReactElement; - const childProps: { fill?: boolean } = {}; if (fill) { @@ -146,6 +144,10 @@ export class Select extends AbstractPureComponent2, ISelectSta childProps.fill = true; } + const children = React.Children.map(this.props.children, (child: React.ReactNode) => { + return React.cloneElement(child as React.ReactElement, { ...childProps }); + }); + const input = ( extends AbstractPureComponent2, ISelectSta onKeyDown={this.state.isOpen ? handleKeyDown : this.handleTargetKeyDown} onKeyUp={this.state.isOpen ? handleKeyUp : undefined} > - {React.cloneElement(child, { ...childProps })} + {children}
{filterable ? input : undefined} From 9c5e01918ce83686ba1f8d5774a270fd3cbd0bb2 Mon Sep 17 00:00:00 2001 From: millasml Date: Mon, 16 Aug 2021 11:28:45 +0800 Subject: [PATCH 3/4] Remove react cloning element --- packages/select/src/components/select/select.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/select/src/components/select/select.tsx b/packages/select/src/components/select/select.tsx index 5c83acba47..a20fccef7c 100644 --- a/packages/select/src/components/select/select.tsx +++ b/packages/select/src/components/select/select.tsx @@ -41,7 +41,8 @@ export type SelectProps = ISelectProps; export interface ISelectProps extends IListItemsProps { /** * Whether the component should take up the full width of its container. - * This overrides `popoverProps.fill` and `tagInputProps.fill`. + * This overrides `popoverProps.fill`. You also have to ensure that the child + * component has `fill` set to `true` or is styled appropriately. */ fill?: boolean; @@ -137,17 +138,10 @@ export class Select extends AbstractPureComponent2, ISelectSta // not using defaultProps cuz they're hard to type with generics (can't use on static members) const { fill, filterable = true, disabled = false, inputProps = {}, popoverProps = {} } = this.props; - const childProps: { fill?: boolean } = {}; - if (fill) { popoverProps.fill = true; - childProps.fill = true; } - const children = React.Children.map(this.props.children, (child: React.ReactNode) => { - return React.cloneElement(child as React.ReactElement, { ...childProps }); - }); - const input = ( extends AbstractPureComponent2, ISelectSta onKeyDown={this.state.isOpen ? handleKeyDown : this.handleTargetKeyDown} onKeyUp={this.state.isOpen ? handleKeyUp : undefined} > - {children} + {this.props.children}
{filterable ? input : undefined} From 36580fdb869ca683b17f1079a31d0ea452bc1e2a Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Tue, 24 Aug 2021 00:42:19 +0000 Subject: [PATCH 4/4] update example to work correctly --- packages/docs-app/src/common/filmSelect.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/docs-app/src/common/filmSelect.tsx b/packages/docs-app/src/common/filmSelect.tsx index 697cd83de8..6421a08c40 100644 --- a/packages/docs-app/src/common/filmSelect.tsx +++ b/packages/docs-app/src/common/filmSelect.tsx @@ -46,7 +46,7 @@ type Props = Omit< }; // eslint-disable-next-line import/no-default-export -export default function ({ allowCreate = false, ...restProps }: Props) { +export default function ({ allowCreate = false, fill, ...restProps }: Props) { const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined; const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null; @@ -72,6 +72,7 @@ export default function ({ allowCreate = false, ...restProps }: Props) { noResults={} onItemSelect={handleItemSelect} items={items} + fill={fill} {...restProps} >