@true-engineering/true-react-common-ui-kit 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -38,7 +38,8 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "full-check": "yarn format:check && yarn lint"
+    "full-check": "yarn format:check && yarn lint",
+    "types-check": "tsc --noEmit"
   },
   "dependencies": {
     "clsx": "1.2.1",

package/src/components/DateInput/DateInput.stories.tsx

@@ -10,7 +10,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof DateInput> = (args) => {
-  const [value, setValue] = useState<string | undefined>(args.date);
+  const [value, setValue] = useState(args.date);
 
   useEffect(() => {
     setValue(args.date);

package/src/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.tsx

@@ -93,7 +93,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
     value?.periodType === 'CUSTOM',
   );
 
-  const [period, setPeriod] = useState<IPeriod | undefined>(value);
+  const [period, setPeriod] = useState(value);
 
   const periodGetters = useMemo(() => {
     const result: Record<string, IPeriodGetter> = { ...PERIODS_GETTERS };

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -21,6 +21,7 @@ import TableRow from './TableRow';
 
 import { FlexibleTableStyles, styles } from './FlexibleTable.styles';
 
+// TODO: Заменить Record<string, any> на Record<string, unknown>
 export interface IFlexibleTableProps<Values extends Record<string, any>>
   extends ICommonProps {
   tweakStyles?: FlexibleTableStyles;
@@ -34,6 +35,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   infinityScrollConfig?: IInfinityScrollConfig;
   uniqueField?: keyof Values;
   onHeadClick?: (column: keyof Values) => void;
+  // TODO: Заменить string на Generic Values[uniqueField]
   onRowClick?: (id: string) => void;
   onRowHover?: (id?: string) => void;
   rowAttributes?: Array<keyof Values>;

package/src/components/FlexibleTable/TableRow.tsx

@@ -6,6 +6,7 @@ import { ICommonProps, IDataAttributes } from '../../types';
 import TableValue from './TableValue';
 import { addDataAttributes } from '../../helpers';
 
+// TODO: Заменить Record<string, any> на Record<string, unknown>
 interface ITableRowProps<Values extends Record<string, any>>
   extends ICommonProps {
   item: Values;
@@ -20,6 +21,7 @@ interface ITableRowProps<Values extends Record<string, any>>
     isOpen: boolean,
     close: () => void,
   ) => React.ReactNode;
+  // TODO: Заменить string на Generic Values[uniqueField]
   onRowHover?: (id?: string) => void;
   onRowClick?: (id: string) => void;
   // чтобы не перерендеривать стили для каждой строчки / ячейки
@@ -131,7 +133,7 @@ function TableRow<Values extends Record<string, any>>({
       >
         {items.map((key, idx) => (
           <TableValue
-            columnName={key as string}
+            columnName={key}
             isSticky={isFirstColumnSticky && idx === 0}
             isSecond={isFirstColumnSticky && idx === 1}
             key={key as string}

package/src/components/FlexibleTable/TableValue.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { format } from 'date-fns';
 
 import type { ICommonProps } from '../../types';
-import type { FlexibleTableConfigType, IValueComponent } from './types';
+import type { FlexibleTableConfigType } from './types';
 
 interface ITableValueProps<Values extends Record<string, any>>
   extends ICommonProps {
@@ -42,10 +42,7 @@ function TableValue<Values extends Record<string, any>>({
   let content = null;
 
   if (itemConfig?.component) {
-    const ValueComponent = itemConfig?.component as IValueComponent<
-      Values,
-      typeof columnName
-    >;
+    const ValueComponent = itemConfig?.component;
     content = (
       <ValueComponent
         value={value}

package/src/components/FlexibleTable/types.ts

@@ -17,7 +17,7 @@ export type ITitleComponent<Value> = FC<{
 }>;
 
 export type IValueComponent<Values, Value> = FC<{
-  value?: Value;
+  value: Value;
   row: Values;
   isFocusedRow?: boolean;
   isNestedComponentExpanded: boolean;
@@ -28,7 +28,7 @@ export type IValueComponent<Values, Value> = FC<{
 export type FlexibleTableConfigType<Values> = {
   [Key in keyof Values]?: {
     title?: ReactNode;
-    titleComponent?: ITitleComponent<any>;
+    titleComponent?: ITitleComponent<unknown>;
     component?: IValueComponent<Values, Values[Key]>;
     dateFormat?: string;
     minWidth?: string | number;

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof IncrementInput> = (args) => {
-  const [value, setValue] = useState<number | undefined>(undefined);
+  const [value, setValue] = useState<number>();
   return (
     <IncrementInput {...args} value={value} onChange={(v) => setValue(v)} />
   );

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof NumberInput> = (args) => {
-  const [value, setValue] = useState<number | undefined>(undefined);
+  const [value, setValue] = useState<number>();
   return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
 };
 

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

@@ -27,21 +27,23 @@ const genLetters = (qnt = 1): string =>
     .replace(/[^a-z]+/g, '')
     .substr(0, qnt);
 
-const convertObjectToString = (v?: ObjectValue): string | undefined =>
-  v !== undefined ? `${v.name}` : undefined;
+const convertObjectToString = (v: ObjectValue): string => v.name;
 
-const convertObjectToId = (v?: ObjectValue): string | undefined =>
-  v !== undefined ? `${v.name}${v.age}` : undefined;
+const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
 
-const convertObjectToReactNode = (v?: ObjectValue): ReactNode | undefined =>
-  v !== undefined ? (
-    <span>
-      <i>{v.name}</i>, {v.age}
-    </span>
-  ) : undefined;
+const convertObjectToReactNode = (
+  v: ObjectValue,
+  isDisabled: boolean,
+): ReactNode => (
+  <span style={{ color: isDisabled ? 'red' : undefined }}>
+    <i>{v.name}</i>, {v.age}
+  </span>
+);
+
+const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
 
-const convertStringToReactNode = (v?: string): ReactNode | undefined =>
-  v !== undefined ? <i>{v}</i> : undefined;
+const isOptionDisabled = (option: string) => option.startsWith('Опция');
+const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
 
 const stringOptions = [
   'Опция 1',
@@ -76,6 +78,7 @@ interface ISelectWithCustomProps<T> extends ISelectProps<T> {
   shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
+  shouldUseCustomIsDisabledFunction?: boolean;
   canBeFlipped?: boolean;
   scrollParent?: 'document' | 'auto';
 }
@@ -87,16 +90,17 @@ function SelectWithCustomProps<T>({
   shouldUsePopper,
   shouldRenderInBody,
   shouldHideOnScroll,
+  shouldUseCustomIsDisabledFunction,
   canBeFlipped,
   scrollParent,
   ...rest
 }: ISelectWithCustomProps<T>) {
-  const [stringValue, setStringValue] = useState<string | undefined>();
+  const [stringValue, setStringValue] = useState<string>();
   const stringHandler = (newValue?: string) => {
     setStringValue(newValue);
   };
 
-  const [objectValue, setObjectValue] = useState<ObjectValue | undefined>();
+  const [objectValue, setObjectValue] = useState<ObjectValue>();
   const objectHandler = (newValue?: ObjectValue) => {
     setObjectValue(newValue);
   };
@@ -125,6 +129,10 @@ function SelectWithCustomProps<T>({
     Array<string | ObjectValue>
   >([]);
 
+  const handleOpen = () => {
+    console.log('isOpen');
+  };
+
   useEffect(() => {
     const api = async () => {
       setDynamicOptions(await getOptions());
@@ -133,10 +141,6 @@ function SelectWithCustomProps<T>({
     api();
   }, [selectValuesType]);
 
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
   const props =
     selectValuesType === 'strings'
       ? {
@@ -146,6 +150,9 @@ function SelectWithCustomProps<T>({
           convertValueToReactNode: shouldRenderAsReactNodes
             ? convertStringToReactNode
             : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction
+            ? isOptionDisabled
+            : undefined,
         }
       : {
           onChange: objectHandler,
@@ -156,6 +163,9 @@ function SelectWithCustomProps<T>({
           convertValueToReactNode: shouldRenderAsReactNodes
             ? convertObjectToReactNode
             : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction
+            ? isObjectOptionDisabled
+            : undefined,
         };
 
   return (
@@ -225,6 +235,8 @@ Default.args = {
   shouldUsePopper: false,
   shouldRenderInBody: false,
   shouldHideOnScroll: false,
+  shouldUseCustomIsDisabledFunction: false,
+  shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',
 };

package/src/components/Select/Select.tsx

@@ -1,5 +1,8 @@
-import React, {
+import {
   ReactNode,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
   useCallback,
   useEffect,
   useMemo,
@@ -11,8 +14,7 @@ import clsx from 'clsx';
 import { merge } from 'lodash';
 import { debounce } from 'ts-debounce';
 import { Portal } from 'react-overlays';
-
-import { SelectList, isOptionDisabled } from './SelectList';
+import { SelectList } from './SelectList';
 import { IInputProps, Input } from '../Input';
 import { IIconType, Icon } from '../Icon';
 import {
@@ -27,8 +29,8 @@ import {
   defaultConvertFunction,
   defaultCompareFunction,
   getActiveValueIndex,
+  defaultIsOptionDisabled,
 } from './helpers';
-
 import { SelectStyles, styles } from './Select.styles';
 
 export interface ISelectProps<Value>
@@ -36,46 +38,34 @@ export interface ISelectProps<Value>
   tweakStyles?: SelectStyles;
   defaultOptionLabel?: string;
   noMatchesLabel?: string;
-  loadingLabel?: React.ReactNode;
+  loadingLabel?: ReactNode;
   optionsMode?: 'search' | 'dynamic' | 'normal';
-  onType?: (value: string) => Promise<void>;
   debounceTime?: number;
   minSymbolsCountToOpenList?: number;
   dropdownOptions?: IDropdownWithPopperOptions;
   dropdownIcon?: IIconType;
-  onOpen?: () => void;
-
-  optionsFilter?: (options: Value[], query: string) => Value[];
   options: Value[];
   value: Value | undefined;
   shouldScrollToList?: boolean;
+  isOptionDisabled?(option: Value): boolean;
   onChange(value: Value | undefined): void; // подумать как возвращать индекс
+  onType?(value: string): Promise<void>;
+  optionsFilter?(options: Value[], query: string): Value[];
+  onOpen?(): void;
   compareValuesOnChange?(v1: Value | undefined, v2: Value | undefined): boolean;
-  // возможно делать какую-то индексацию опций
-
   // Для избежания проблем юзайте useCallback на эти функции
   // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
   convertValueToString?(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value): ReactNode;
+  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
   convertValueToId?(value: Value): string | undefined;
 }
 
 export function Select<Value>({
   options,
   value,
-  onChange,
-  compareValuesOnChange = defaultCompareFunction,
-  convertValueToString = defaultConvertFunction,
-  convertValueToId,
-  convertValueToReactNode,
   defaultOptionLabel,
-  onFocus,
-  onBlur,
-  onType,
-  onOpen,
   debounceTime = 400,
   optionsMode = 'normal',
-  optionsFilter,
   noMatchesLabel,
   loadingLabel,
   tweakStyles,
@@ -85,6 +75,17 @@ export function Select<Value>({
   minSymbolsCountToOpenList = 0,
   dropdownIcon = 'chevron-down',
   shouldScrollToList = true,
+  onChange,
+  onFocus,
+  onBlur,
+  onType,
+  onOpen,
+  isOptionDisabled = defaultIsOptionDisabled,
+  compareValuesOnChange = defaultCompareFunction,
+  convertValueToString = defaultConvertFunction,
+  convertValueToId,
+  convertValueToReactNode,
+  optionsFilter,
   ...inputProps
 }: ISelectProps<Value>): JSX.Element {
   const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
@@ -144,7 +145,7 @@ export function Select<Value>({
     setIsListOpen(true);
   };
 
-  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
     if (onFocus !== undefined) {
       onFocus(event);
     }
@@ -155,7 +156,7 @@ export function Select<Value>({
     handleListOpen();
   };
 
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (onBlur !== undefined) {
       onBlur(event);
     }
@@ -222,7 +223,7 @@ export function Select<Value>({
     setSearchValue(v);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+  const handleKeyDown = (event: KeyboardEvent) => {
     if (!isListOpen) {
       return;
     }
@@ -365,6 +366,47 @@ export function Select<Value>({
     }
   }, [isOpen, onOpen]);
 
+  const listEl = (
+    <div
+      className={clsx(classes.listWrapper, {
+        [classes.withoutPopper]: !shouldUsePopper,
+        [classes.listWrapperInBody]: shouldRenderInBody,
+      })}
+      ref={list}
+      // чтобы предотвратить onBlur на инпуте
+      onMouseDown={(event) => event.preventDefault()}
+      style={popperData?.styles.popper as Styles}
+      {...popperData?.attributes.popper}
+    >
+      {isOpen && (
+        <SelectList
+          options={filteredOptions}
+          defaultOptionLabel={
+            hasDefaultOption && shouldShowDefaultOption
+              ? defaultOptionLabel
+              : undefined
+          }
+          noMatchesLabel={noMatchesLabel}
+          focusedIndex={focusedListCellIndex}
+          activeValue={value}
+          isLoading={inputProps.isLoading}
+          loadingLabel={loadingLabel}
+          tweakStyles={tweakStyles?.tweakSelectList as Styles}
+          testId={testId !== undefined ? `${testId}-list` : undefined}
+          // скролл не работает с включеным поппером
+          shouldScrollToList={
+            shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll
+          }
+          isOptionDisabled={isOptionDisabled}
+          convertValueToString={convertValueToString}
+          convertValueToReactNode={convertValueToReactNode}
+          convertValueToId={convertValueToId}
+          onOptionClick={handleOptionClick}
+        />
+      )}
+    </div>
+  );
+
   return (
     <div className={classes.root} onKeyDown={handleKeyDown}>
       <div
@@ -387,7 +429,7 @@ export function Select<Value>({
           {...inputProps}
         />
         <div
-          onMouseDown={(event: React.MouseEvent) => {
+          onMouseDown={(event: MouseEvent) => {
             event.preventDefault();
           }}
           onClick={onArrowClick}
@@ -396,53 +438,15 @@ export function Select<Value>({
           <Icon type={dropdownIcon} />
         </div>
       </div>
-      <Portal
-        container={shouldRenderInBody ? document.body : inputWrapper.current}
-      >
-        <>
-          {(shouldUsePopper || isOpen) && (
-            <div
-              className={clsx(classes.listWrapper, {
-                [classes.withoutPopper]: !shouldUsePopper,
-                [classes.listWrapperInBody]: shouldRenderInBody,
-              })}
-              ref={list}
-              // чтобы предотвратить onBlur на инпуте
-              onMouseDown={(event) => event.preventDefault()}
-              style={popperData?.styles.popper as Styles}
-              {...popperData?.attributes.popper}
-            >
-              {isOpen && (
-                <SelectList
-                  options={filteredOptions}
-                  convertValueToString={convertValueToString}
-                  convertValueToReactNode={convertValueToReactNode}
-                  convertValueToId={convertValueToId}
-                  onOptionClick={handleOptionClick}
-                  defaultOptionLabel={
-                    hasDefaultOption && shouldShowDefaultOption
-                      ? defaultOptionLabel
-                      : undefined
-                  }
-                  noMatchesLabel={noMatchesLabel}
-                  focusedIndex={focusedListCellIndex}
-                  activeValue={value}
-                  isLoading={inputProps.isLoading}
-                  loadingLabel={loadingLabel}
-                  tweakStyles={tweakStyles?.tweakSelectList as Styles}
-                  testId={testId !== undefined ? `${testId}-list` : undefined}
-                  // скролл не работает с включеным поппером
-                  shouldScrollToList={
-                    shouldScrollToList &&
-                    !shouldUsePopper &&
-                    !shouldHideOnScroll
-                  }
-                />
-              )}
-            </div>
-          )}
-        </>
-      </Portal>
+      {shouldUsePopper ? (
+        <Portal
+          container={shouldRenderInBody ? document.body : inputWrapper.current}
+        >
+          <>{listEl}</>
+        </Portal>
+      ) : (
+        <>{isOpen && listEl}</>
+      )}
     </div>
   );
 }

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

@@ -1,10 +1,9 @@
-import React, { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import { useTheme } from '../../../hooks';
 import { ICommonProps } from '../../../types';
-import { isNotEmpty } from '../../../helpers';
-
+import { addDataAttributes, isNotEmpty } from '../../../helpers';
 import { SelectListStyles, styles } from './SelectList.styles';
 
 export interface ISelectListProps<Value> extends ICommonProps {
@@ -14,67 +13,55 @@ export interface ISelectListProps<Value> extends ICommonProps {
   activeValue?: Value;
   noMatchesLabel?: string;
   isLoading?: boolean;
-  loadingLabel?: React.ReactNode;
+  loadingLabel?: ReactNode;
   defaultOptionLabel?: string;
-  onOptionClick: (index: number) => void;
   testId?: string;
   shouldScrollToList?: boolean;
-  convertValueToString: (value: Value) => string | undefined;
-  convertValueToReactNode?: (value: Value) => ReactNode;
-  convertValueToId?: (value: Value) => string | undefined;
-}
-
-export function isOptionDisabled<Value>(option: Value): boolean {
-  return (
-    typeof option === 'object' &&
-    option !== null &&
-    ((option as { isDisabled?: boolean })?.isDisabled ?? false)
-  );
+  onOptionClick(index: number): void;
+  isOptionDisabled(value: Value): boolean;
+  convertValueToString(value: Value): string | undefined;
+  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
+  convertValueToId?(value: Value): string | undefined;
 }
 
 const DEFAULT_OPTION_INDEX = -1;
 
 export function SelectList<Value>({
   options,
-  onOptionClick,
   focusedIndex,
   activeValue,
   defaultOptionLabel,
   noMatchesLabel = 'Совпадений не найдено',
   isLoading,
   loadingLabel = 'Загрузка...',
-  convertValueToString,
-  convertValueToReactNode,
-  convertValueToId = convertValueToString,
   tweakStyles,
   testId,
   shouldScrollToList = true,
+  isOptionDisabled,
+  onOptionClick,
+  convertValueToString,
+  convertValueToReactNode,
+  convertValueToId = convertValueToString,
 }: ISelectListProps<Value>): JSX.Element {
   const { classes } = useTheme('SelectList', styles, tweakStyles);
   const activeValueId = isNotEmpty(activeValue)
     ? convertValueToId(activeValue)
     : undefined;
 
-  const convertedToStringOptions = useMemo(
-    () => options.map(convertValueToString),
-    [options, convertValueToString],
-  );
-
   const isActiveOption = (item: Value): boolean =>
     convertValueToId(item) === activeValueId;
 
-  const convertedToReactNodesOptions = useMemo(
-    () =>
-      convertValueToReactNode !== undefined
-        ? options.map(convertValueToReactNode)
-        : [],
-    [options, convertValueToReactNode],
+  const convertFunction = convertValueToReactNode ?? convertValueToString;
+
+  const optionsDisableMap = useMemo(
+    () => options.map((o) => isOptionDisabled(o)),
+    [options, isOptionDisabled],
   );
 
-  const listOptions =
-    convertValueToReactNode !== undefined
-      ? convertedToReactNodesOptions
-      : convertedToStringOptions;
+  const listOptions = useMemo(
+    () => options.map((opt, i) => convertFunction(opt, optionsDisableMap[i])),
+    [options, convertFunction, optionsDisableMap],
+  );
 
   return (
     <ScrollIntoViewIfNeeded
@@ -102,23 +89,29 @@ export function SelectList<Value>({
                 {defaultOptionLabel}
               </ScrollIntoViewIfNeeded>
             )}
-            {listOptions.map((opt, index) => {
-              const optionValue = options[index];
+            {listOptions.map((opt, i) => {
+              const optionValue = options[i];
+              const isFocused = i === focusedIndex;
               const isActive = isActiveOption(optionValue);
               // проверяем, что опция задизейблена
-              const isDisabled = isOptionDisabled(optionValue);
+              const isDisabled = optionsDisableMap[i];
 
               return (
                 <ScrollIntoViewIfNeeded
-                  active={index === focusedIndex}
+                  active={isFocused}
                   options={{ block: 'nearest' }}
-                  key={index}
+                  key={i}
                   className={clsx(classes.cell, {
-                    [classes.focused]: index === focusedIndex,
+                    [classes.focused]: isFocused,
                     [classes.active]: isActive,
                     [classes.disabled]: isDisabled,
                   })}
-                  onClick={!isDisabled ? () => onOptionClick(index) : undefined}
+                  {...addDataAttributes({
+                    disabled: isDisabled,
+                    active: isActive,
+                    focused: isFocused,
+                  })}
+                  onClick={!isDisabled ? () => onOptionClick(i) : undefined}
                 >
                   {opt}
                 </ScrollIntoViewIfNeeded>

package/src/components/Select/helpers.ts

@@ -1,5 +1,10 @@
 import { isNotEmpty } from '../../helpers';
 
+export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
+  typeof option === 'object' &&
+  option !== null &&
+  ((option as { isDisabled?: boolean })?.isDisabled ?? false);
+
 export const defaultConvertFunction = (v: unknown) =>
   v === undefined ? undefined : String(v);