From f3b4068b4480052912e06ddbbb2a5b00fd12537e Mon Sep 17 00:00:00 2001 From: panagiotis vourtsis Date: Tue, 28 Nov 2023 15:14:22 +0200 Subject: [PATCH] fix(MultiselectTextField): deleted as unused --- .../MultiselectTextField.style.ts | 157 -------------- .../MultiselectTextField.tsx | 201 ------------------ .../components/MultiselectTextField/index.ts | 1 - 3 files changed, 359 deletions(-) delete mode 100644 src/components/Select/components/MultiselectTextField/MultiselectTextField.style.ts delete mode 100644 src/components/Select/components/MultiselectTextField/MultiselectTextField.tsx delete mode 100644 src/components/Select/components/MultiselectTextField/index.ts diff --git a/src/components/Select/components/MultiselectTextField/MultiselectTextField.style.ts b/src/components/Select/components/MultiselectTextField/MultiselectTextField.style.ts deleted file mode 100644 index 50cab9494..000000000 --- a/src/components/Select/components/MultiselectTextField/MultiselectTextField.style.ts +++ /dev/null @@ -1,157 +0,0 @@ -import type { SerializedStyles } from '@emotion/react'; -import { css } from '@emotion/react'; -import { rem } from 'polished'; -import type { Theme } from 'theme'; - -import { LABEL_TRANSFORM_LEFT_SPACING } from 'components/Label/Label.style'; -import { getTextInputBaseTokens } from 'components/TextInputBase/TextInputBase.tokens'; - -export const chipContent = - ({ maxWidth }: { maxWidth?: number }) => - (): SerializedStyles => - css` - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: ${maxWidth ? rem(maxWidth - 120) : 'unset'}; - `; - -export const rightIconsContainer = - () => - (theme: Theme): SerializedStyles => - css` - position: absolute !important; - bottom: 0; - right: ${theme.globals.spacing.get('3')}; - top: 0; - display: flex; - align-items: center; - `; - -export const progressIndicatorStyles = - () => - (theme: Theme): SerializedStyles => - css` - padding-right: ${theme.globals.spacing.get('3')}; - `; - -export const rightIconStyles = - ({ isClickable }: { isClickable: boolean }) => - (theme: Theme): SerializedStyles => { - return css` - /** @TODO: revisit these styles when Interactive Icon is implemented */ - width: ${rem(36)}; - height: ${rem(36)}; - display: flex; - align-items: center; - justify-content: center; - - cursor: ${isClickable ? 'pointer' : 'auto'}; - - /** @TODO: revisit these styles when Interactive Icon is implemented */ - &:focus-visible, - &:hover { - background: ${theme.tokens.state.get('backgroundColor.hover')}; - border-radius: ${theme.globals.borderRadius.get('7')}; - } - `; - }; - -export const chipStyle = - () => - (theme: Theme): SerializedStyles => - css` - position: relative; - margin-right: ${theme.globals.spacing.get('3')}; - & > div { - height: ${rem(20)}; - border-radius: ${rem(4)}; - } - `; - -export const inputContainer = - () => - (theme: Theme): SerializedStyles => - css` - position: static; - width: 100%; - display: flex; - flex-wrap: wrap; - row-gap: ${theme.globals.spacing.get('3')}; - z-index: 2; - `; - -/** TextField overrides */ - -export const textInputBaseOverrides = - ({ - hasValue, - isLoading, - hasLabel, - isResponsive, - isTextfield, - }: { - hasValue: boolean; - isLoading?: boolean; - hasLabel?: boolean; - isResponsive?: boolean; - isTextfield?: boolean; - }) => - (theme: Theme) => { - const labelStyles = { - fontWeight: `${theme.globals.typography.fontWeight.get('bold')}`, - transform: `translate(${LABEL_TRANSFORM_LEFT_SPACING}, -82%) scale(0.8) !important`, - bottom: 'auto', - }; - - const paddingTop = hasLabel ? 21 : 13; - const paddingBottom = hasLabel ? 5 : 13; - - const tokens = getTextInputBaseTokens(theme); - - return { - wrapper: { - height: 'unset', - // TODO - fix this - minHeight: `${rem(52)} !important`, - ...(hasValue - ? { label: labelStyles } - : { - 'input:focus': { - label: labelStyles, - }, - label: { - transform: `translate(${LABEL_TRANSFORM_LEFT_SPACING}, -8px)`, - }, - }), - }, - textField: { - // For the paddings we use specifically custom numbers that don't match the - // ictinus spacing (the are calculated by combining internal absolute positioned component widths) - // so we can override the existing TextFieldInputBase paddings to - // perfectly position and align the content inside. - padding: isLoading - ? `${rem(paddingTop)} ${rem(80)} ${rem(paddingBottom)} ${tokens('paddingContentLeft')}` - : `${rem(paddingTop)} ${rem(40)} ${rem(paddingBottom)} ${tokens('paddingContentLeft')}`, - ...(isResponsive - ? { width: 'max-content', minWidth: rem(tokens('minWidth.large.normal')) } - : {}), - ...(isTextfield ? { minWidth: rem(tokens('minWidth.large.normal')), width: '100%' } : {}), - }, - }; - }; - -export const inputOverrides = () => { - return { - input: { - top: 'unset', - flex: '1 1 0%', - minWidth: '20%', - '&:focus, &:not(:placeholder-shown)': { - '& + label': { - transform: `translate(${LABEL_TRANSFORM_LEFT_SPACING}, -82%) scale(0.8)`, - }, - }, - }, - }; -}; diff --git a/src/components/Select/components/MultiselectTextField/MultiselectTextField.tsx b/src/components/Select/components/MultiselectTextField/MultiselectTextField.tsx deleted file mode 100644 index f1afe7297..000000000 --- a/src/components/Select/components/MultiselectTextField/MultiselectTextField.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import useTheme from 'hooks/useTheme'; -import omit from 'lodash/omit'; -import React, { useMemo } from 'react'; -import isEqual from 'react-fast-compare'; -import { generateUniqueKey } from 'utils/helpers'; -import type { TestProps } from 'utils/types'; - -import { - chipContent, - chipStyle, - inputContainer, - inputOverrides, - rightIconsContainer, - rightIconStyles, - textInputBaseOverrides, -} from './MultiselectTextField.style'; -import Chip from 'components/Chip'; -import type { AcceptedIconNames } from 'components/Icon'; -import Icon from 'components/Icon'; -import Label from 'components/Label'; -import ProgressIndicator from 'components/ProgressIndicator'; -import type { SelectOption } from 'components/Select'; -import type { InputProps, TextFieldProps } from 'components/TextField/TextField'; -import TextInputBase from 'components/TextInputBase'; -import { inputStyle } from 'components/TextInputBase/TextInputBase.style'; - -type Props = { - /** the values of the MultiSelect if MultiSelect is controlled */ - selectedOptions?: SelectOption[]; - /** Callback fired when the `input` value typed is changed */ - onInput?: React.EventHandler; - /** Value of the `input` element */ - value?: string | number; - /** Callback fired when the Delete button of each Chip is clicked */ - onOptionDelete: (option?: SelectOption) => void; - /** Callback fired when the Delete button of the whole MultiSelect is clicked */ - onClearAllOptions: () => void; - /** If the component is loading */ - isLoading?: boolean; -} & Omit; - -const MultiselectTextField = React.forwardRef( - (props, ref) => { - const { - selectedOptions, - value, - isDisabled, - status = { type: 'normal' }, - label, - id, - placeholder, - isRequired = false, - onOptionDelete, - onClearAllOptions, - isLoading, - suffix, - ...rest - } = props; - - const isLocked = status.type === 'read-only'; - - const TextfieldRef = React.useRef(null); - - const theme = useTheme(); - - const hasValue = Boolean(value || (selectedOptions?.length && selectedOptions?.length > 0)); - - const inputPlaceholder = useMemo(() => { - if (!label && placeholder) { - return isRequired ? `${placeholder} *` : placeholder; - } - - return label; - }, [label, placeholder, isRequired]); - - const iconName = useMemo(() => { - if (isLocked) { - return 'lock'; - } - - if (hasValue) { - return 'close'; - } - - return 'search'; - }, [hasValue, isLocked]); - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (value === '' && event.key === 'Backspace') { - onOptionDelete(); - } - }; - - const chips = useMemo( - () => ( - <> - {selectedOptions?.map((option, index) => ( - - onOptionDelete(option) : undefined} - fill="lightGrey" - dataTestId={`chip_${index}`} - > -
- {option.label} -
- - - ))} - - ), - [isDisabled, isLocked, onOptionDelete, selectedOptions] - ); - - const icon = useMemo(() => { - if (suffix) { - if (typeof suffix === 'string') { - return ( - - ); - } - - return suffix; - } - - return ( - - ); - }, [hasValue, iconName, isLocked, onClearAllOptions, suffix, theme.utils]); - - return ( -
- -
- {chips} - - {label && ( -
- - {!isDisabled && ( -
- {isLoading && ( - - )} -
{icon}
-
- )} - -
- ); - } -); - -MultiselectTextField.displayName = 'MultiselectTextField'; - -export default React.memo(MultiselectTextField, isEqual); diff --git a/src/components/Select/components/MultiselectTextField/index.ts b/src/components/Select/components/MultiselectTextField/index.ts deleted file mode 100644 index ffde88409..000000000 --- a/src/components/Select/components/MultiselectTextField/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './MultiselectTextField';