From 455ee9bb09b5202a0eb7eeefa6bfefd0a169af93 Mon Sep 17 00:00:00 2001 From: Ddouglasz Date: Wed, 30 Oct 2024 14:30:34 +0100 Subject: [PATCH 1/7] feat(filters): testing a commit issue --- .../inputs/async-select-input/src/async-select-input.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/inputs/async-select-input/src/async-select-input.tsx b/packages/components/inputs/async-select-input/src/async-select-input.tsx index c10c796222..cc0a4fa6bd 100644 --- a/packages/components/inputs/async-select-input/src/async-select-input.tsx +++ b/packages/components/inputs/async-select-input/src/async-select-input.tsx @@ -357,6 +357,8 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { return props.loadingMessage || intl.formatMessage(messages.loadingOptions); }; + // Testing a commit issue + return (
From 68ca38c718d5bdf784b2486925446abd24803330 Mon Sep 17 00:00:00 2001 From: Ddouglasz Date: Wed, 30 Oct 2024 14:41:57 +0100 Subject: [PATCH 2/7] feat(filters): add appearance and option styles features to asyn select when used in a filter component --- .../src/async-select-input.tsx | 55 ++++++++++++++++--- 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/packages/components/inputs/async-select-input/src/async-select-input.tsx b/packages/components/inputs/async-select-input/src/async-select-input.tsx index cc0a4fa6bd..d75570f6f5 100644 --- a/packages/components/inputs/async-select-input/src/async-select-input.tsx +++ b/packages/components/inputs/async-select-input/src/async-select-input.tsx @@ -19,7 +19,10 @@ import { messages, createSelectStyles, warnIfMenuPortalPropsAreMissing, + optionStyleCheckboxComponents, + optionsStyleCheckboxSelectProps, } from '@commercetools-uikit/select-utils'; +import { SearchIcon } from '@commercetools-uikit/icons'; const LoadingIndicator = () => ; LoadingIndicator.displayName = 'LoadingIndicator'; @@ -317,11 +320,23 @@ export type TAsyncSelectInputProps = { * Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled. */ iconLeft?: ReactNode; + /** defines how options are rendered */ + optionStyle: 'list' | 'checkbox'; + /** + * Indicates the appearance of the input. + * Filter appearance is meant to be used when the async-select is used as a filter. + */ + appearance?: 'default' | 'filter'; }; const defaultProps: Pick< TAsyncSelectInputProps, - 'value' | 'isSearchable' | 'menuPortalZIndex' | 'controlShouldRenderValue' + | 'value' + | 'isSearchable' + | 'menuPortalZIndex' + | 'controlShouldRenderValue' + | 'appearance' + | 'optionStyle' > = { // Using "null" will ensure that the currently selected value disappears in // case "undefined" gets passed as the next value @@ -329,6 +344,8 @@ const defaultProps: Pick< isSearchable: true, menuPortalZIndex: 1, controlShouldRenderValue: true, + appearance: 'default', + optionStyle: 'list', }; const AsyncSelectInput = (props: TAsyncSelectInputProps) => { @@ -347,8 +364,20 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { componentName: 'AsyncSelectInput', }); - const placeholder = - props.placeholder || intl.formatMessage(messages.placeholder); + // const placeholder = + // props.placeholder || intl.formatMessage(messages.placeholder); + + const placeholder = props.placeholder + ? props.placeholder + : props.appearance === 'filter' + ? 'Search' + : intl.formatMessage(messages.placeholder); + + // TODO: uncomment to replace placeholder logic once select-input PR for this has been merged. + // const placeholder = + // props.appearance === 'filter' && !props.placeholder + // ? intl.formatMessage(messages.selectInputAsFilterPlaceholder) + // : props.placeholder || intl.formatMessage(messages.placeholder); const loadingMessage = () => { if (typeof props.loadingMessage === 'function') { @@ -357,8 +386,6 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { return props.loadingMessage || intl.formatMessage(messages.loadingOptions); }; - // Testing a commit issue - return (
@@ -385,6 +412,13 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { ), } : {}), + ...(props.appearance === 'filter' && { + DropdownIndicator: () => , + ClearIndicator: null, + }), + ...(props.optionStyle === 'checkbox' + ? optionStyleCheckboxComponents() + : {}), ...props.components, } as ReactSelectAsyncProps['components'] } @@ -406,7 +440,6 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { }) as ReactSelectAsyncProps['styles'] } filterOption={props.filterOption} - hideSelectedOptions={props.hideSelectedOptions} // react-select uses "id" (for the container) and "inputId" (for the input), // but we use "id" (for the input) and "containerId" (for the container) // instead. @@ -417,6 +450,9 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { isClearable={props.isReadOnly ? false : props.isClearable} isDisabled={props.isDisabled} isOptionDisabled={props.isOptionDisabled} + {...(props.optionStyle === 'checkbox' + ? optionsStyleCheckboxSelectProps() + : { hideSelectedOptions: props.hideSelectedOptions })} isMulti={props.isMulti} isSearchable={props.isSearchable} maxMenuHeight={props.maxMenuHeight} @@ -487,7 +523,12 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { // @ts-ignore: passed to the react-select components via `selectProps`. isCondensed={props.isCondensed} iconLeft={props.iconLeft} - controlShouldRenderValue={props.controlShouldRenderValue} + controlShouldRenderValue={ + props.appearance === 'filter' + ? false + : props.controlShouldRenderValue + } + appea />
From 16450a08f4f4570fbf632a1d6a882656cacca6e7 Mon Sep 17 00:00:00 2001 From: Ddouglasz Date: Wed, 30 Oct 2024 14:45:00 +0100 Subject: [PATCH 3/7] feat(filters): add appearance and option styles features to asyn select when used in a filter component --- .../select-utils/src/create-select-styles.ts | 2 +- .../src/custom-styled-select-options/index.ts | 1 + .../options-style-checkbox-components.tsx | 58 +++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 packages/components/inputs/select-utils/src/custom-styled-select-options/options-style-checkbox-components.tsx diff --git a/packages/components/inputs/select-utils/src/create-select-styles.ts b/packages/components/inputs/select-utils/src/create-select-styles.ts index 85d0afbd05..59c2ffdee0 100644 --- a/packages/components/inputs/select-utils/src/create-select-styles.ts +++ b/packages/components/inputs/select-utils/src/create-select-styles.ts @@ -22,7 +22,7 @@ type TProps = { hasValue?: boolean; isCondensed?: boolean; controlShouldRenderValue?: boolean; - appearance?: 'default' | 'quiet'; + appearance?: 'default' | 'quiet' | 'filter'; minMenuWidth?: | 2 | 3 diff --git a/packages/components/inputs/select-utils/src/custom-styled-select-options/index.ts b/packages/components/inputs/select-utils/src/custom-styled-select-options/index.ts index bf4cf2c403..327d1c92f5 100644 --- a/packages/components/inputs/select-utils/src/custom-styled-select-options/index.ts +++ b/packages/components/inputs/select-utils/src/custom-styled-select-options/index.ts @@ -1,2 +1,3 @@ export { SELECT_DROPDOWN_OPTION_TYPES } from './constants'; export * from './custom-styled-select-options'; +export * from './options-style-checkbox-components'; diff --git a/packages/components/inputs/select-utils/src/custom-styled-select-options/options-style-checkbox-components.tsx b/packages/components/inputs/select-utils/src/custom-styled-select-options/options-style-checkbox-components.tsx new file mode 100644 index 0000000000..9d9461b368 --- /dev/null +++ b/packages/components/inputs/select-utils/src/custom-styled-select-options/options-style-checkbox-components.tsx @@ -0,0 +1,58 @@ +import { type Props as ReactSelectProps } from 'react-select'; +import CheckboxInput from '@commercetools-uikit/checkbox-input'; +import { css } from '@emotion/react'; +import { designTokens } from '@commercetools-uikit/design-system'; + +/** + * Returns custom components to be used with react-select, when optionStyle is set to "checkbox" + */ +export const optionStyleCheckboxComponents = () => { + return { + Option: (props) => { + const { + innerRef, + innerProps, + label, + isDisabled, + isFocused, + isSelected, + className, + } = props; + + return ( +
+ {}} + > + {label} + +
+ ); + }, + } as ReactSelectProps['components']; +}; + +/** + * Returns react-select props to be used with the