@true-engineering/true-react-common-ui-kit 3.5.0 → 3.7.0

package/src/components/FlexibleTable/types.ts

@@ -1,10 +1,9 @@
-import { FC, ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode } from 'react';
 
-export type ITextAlignment = 'left' | 'center' | 'right';
+export type IFlexibleTableRenderMode = 'table' | 'divs';
 
-export type IVerticalAlignment = 'middle' | 'top' | 'bottom' | 'baseline' | 'sub' | string;
-
-export type IPosition = 'sticky' | 'absolute' | 'relative' | 'static';
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export type ITableRow = Record<string, any>;
 
 export type ITitleComponent<Value> = FC<{
   value?: Value;
@@ -28,10 +27,11 @@ export type IFlexibleTableConfigType<Values> = {
     minWidth?: string | number;
     width?: string | number;
     maxWidth?: string | number;
-    titleAlign?: ITextAlignment;
-    cellAlign?: ITextAlignment;
-    cellVerticalAlign?: IVerticalAlignment;
-    position?: IPosition;
+    /** @default 'left' */
+    titleAlign?: CSSProperties['textAlign'];
+    cellAlign?: CSSProperties['textAlign'];
+    cellVerticalAlign?: CSSProperties['verticalAlign'];
+    position?: CSSProperties['position'];
     right?: number;
     left?: number;
   };

package/src/components/Select/CustomSelect.stories.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { type ComponentMeta, type ComponentStory } from '@storybook/react';
+import { Button, type IButtonStyles } from '../Button';
+import { Input, type IInputStyles } from '../Input';
+import { TextButton } from '../TextButton';
+import { Select, type ISelectProps } from './Select';
+
+interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+const useSelectStyles = createUseStyles({
+  option: {
+    width: '100%',
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) max-content',
+    alignItems: 'center',
+  },
+});
+
+const useDefaultOptionStyles = createUseStyles({
+  customDefaultOption: {
+    width: '100%',
+    padding: [10, 20],
+    justifySelf: 'stretch',
+    alignSelf: 'stretch',
+    backgroundColor: '#ffffff',
+    cursor: 'default',
+  },
+
+  defaultView: {
+    display: 'grid',
+    placeItems: 'center',
+  },
+
+  inputView: {
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: '1fr max-content',
+  },
+});
+
+const inputTweakStyles: IInputStyles = {
+  inputWrapper: {
+    height: 24,
+  },
+
+  input: {
+    padding: [0, 4],
+  },
+};
+
+const buttonTweakStyles: IButtonStyles = {
+  s: {
+    height: 24,
+
+    '&$onlyIcon': {
+      width: 24,
+    },
+  },
+};
+
+interface ICustomDefaultOptionProps {
+  onAdd?: (option?: string) => void;
+}
+
+function CustomDefaultOption({ onAdd }: ICustomDefaultOptionProps) {
+  const classes = useDefaultOptionStyles();
+
+  const [isAdding, setIsAdding] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const onAddClick = () => {
+    onAdd?.(inputValue);
+    setIsAdding(false);
+    setInputValue('');
+  };
+
+  return (
+    <div className={classes.customDefaultOption} onClick={(event) => event.stopPropagation()}>
+      {!isAdding && (
+        <div className={classes.defaultView}>
+          <TextButton icon="plus" hasCircleUnderIcon isBold onClick={() => setIsAdding(true)}>
+            Add Option
+          </TextButton>
+        </div>
+      )}
+      {isAdding && (
+        <div className={classes.inputView}>
+          <Input
+            value={inputValue}
+            border="bottom"
+            placeholder="Option Value"
+            tweakStyles={inputTweakStyles}
+            shouldFocusOnMount
+            onChange={setInputValue}
+          />
+          <Button size="s" icon="plus" tweakStyles={buttonTweakStyles} onClick={onAddClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SelectWithCustomProps({
+  noMatchesLabel,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  canBeFlipped,
+  scrollParent,
+  ...restProps
+}: ISelectWithCustomProps<string>) {
+  const classes = useSelectStyles();
+  const [inputValue, setInputValue] = useState<string>();
+  const [options, setOptions] = useState<string[]>([]);
+
+  const onAdd = (option?: string) => {
+    if (isStringNotEmpty(option)) {
+      setOptions((prevOptions) => [...prevOptions, option]);
+    }
+  };
+
+  const onRemove = (option: string) => {
+    setOptions((prevOptions) => prevOptions.filter((entry) => entry !== option));
+  };
+
+  const renderOption = (value: string) => (
+    <div className={classes.option}>
+      <span>{value}</span>
+      <Button
+        size="s"
+        icon="trash-can"
+        tweakStyles={buttonTweakStyles}
+        onClick={(event) => {
+          event.stopPropagation();
+
+          onRemove(value);
+        }}
+      />
+    </div>
+  );
+
+  const props = {
+    ...restProps,
+    onChange: setInputValue,
+    value: inputValue,
+    options,
+    convertValueToReactNode: renderOption,
+  };
+
+  return (
+    <Select
+      {...props}
+      defaultOptionLabel={<CustomDefaultOption onAdd={onAdd} />}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      tweakStyles={{
+        tweakSelectList: {
+          defaultCell: {
+            padding: 0,
+          },
+        },
+      }}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    scrollParent: {
+      options: ['document', 'auto'],
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof SelectWithCustomProps>;
+
+const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
+  <SelectWithCustomProps {...args} />
+);
+
+export const CustomSelect = Template.bind({});
+
+CustomSelect.args = {
+  label: 'Dropdown',
+  noMatchesLabel: 'No matches',
+  isInvalid: false,
+  errorMessage: '',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: false,
+  isDisabled: false,
+  isRequired: false,
+  isClearable: false,
+
+  shouldUsePopper: false,
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+  shouldScrollToList: true,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};

package/src/components/Select/Select.tsx

@@ -17,6 +17,7 @@ import { debounce } from 'ts-debounce';
 import {
   getTestId,
   isNotEmpty,
+  isReactNodeNotEmpty,
   isStringNotEmpty,
   createFilter,
 } from '@true-engineering/true-react-platform-helpers';
@@ -41,7 +42,7 @@ import { useStyles, ISelectStyles, searchInputStyles, getInputStyles } from './S
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
     ICommonProps<ISelectStyles> {
-  defaultOptionLabel?: string;
+  defaultOptionLabel?: ReactNode;
   allOptionsLabel?: string;
   noMatchesLabel?: string;
   loadingLabel?: ReactNode;
@@ -150,7 +151,7 @@ export function Select<Value>(
   const isMounted = useIsMounted();
   const [isListOpen, setIsListOpen] = useState(false);
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
-  const hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
+  const hasDefaultOption = isReactNodeNotEmpty(defaultOptionLabel);
 
   const [focusedListCellIndex, setFocusedListCellIndex] = useState(DEFAULT_OPTION_INDEX);
   const [searchValue, setSearchValue] = useState('');

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -20,7 +20,7 @@ export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>
   noMatchesLabel?: string;
   isLoading?: boolean;
   loadingLabel?: ReactNode;
-  defaultOptionLabel?: string;
+  defaultOptionLabel?: ReactNode;
   allOptionsLabel?: string;
   areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
@@ -97,7 +97,7 @@ export function SelectList<Value>({
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (
           <>
-            {isStringNotEmpty(defaultOptionLabel) && (
+            {isReactNodeNotEmpty(defaultOptionLabel) && (
               <ScrollIntoViewIfNeeded
                 active={focusedIndex === DEFAULT_OPTION_INDEX}
                 options={{ block: 'nearest' }}

package/src/hooks/use-dropdown.ts

@@ -49,6 +49,8 @@ export const useDropdown = ({
 
   let popperData: ReturnType<typeof usePopper> | undefined;
   if (shouldUsePopper) {
+    // TODO: Вытащить хук из под условия???
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     popperData = usePopper(referenceElement, dropdownElement, {
       enabled: isOpen,
       placement,