@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/Cell/Cell.tsx

@@ -1,26 +1,35 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
+import { warnOnce } from '../../lib/warnOnce';
 import { getClassName } from '../../helpers/getClassName';
-import { Touch, TouchEvent } from '../Touch/Touch';
 import { ANDROID, IOS, VKCOM } from '../../lib/platform';
-import { Icon24Reorder, Icon24ReorderIos, Icon24CheckCircleOn, Icon24CheckCircleOff, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
 import SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { HasPlatform } from '../../types';
 import { Removable, RemovableProps } from '../Removable/Removable';
 import { usePlatform } from '../../hooks/usePlatform';
-import { ListContext } from '../../components/List/ListContext';
+import { useDraggable } from './useDraggable';
+import { ListContext } from '../List/ListContext';
+import { CellDragger } from './CellDragger/CellDragger';
+import { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';
 import './Cell.css';
 
 export interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps {
+  mode?: 'removable' | 'selectable';
   /**
    * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
    */
   draggable?: boolean;
+  /**
+   * @deprecated Будет удалено в 5.0.0. Используйте mode="removable"
+   */
   removable?: boolean;
   /**
    * Имя для input в режиме selectable
    */
   name?: string;
+  /**
+   * @deprecated Будет удалено в 5.0.0. Используйте mode="selectable"
+   */
   selectable?: boolean;
   /**
    * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
@@ -37,117 +46,56 @@ export interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps
    * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
    */
   onDragFinish?: ({ from, to }: { from: number; to: number }) => void;
+  /**
+   * aria-label для кнопки перетаскивания ячейки
+   */
+  draggerLabel?: string;
 }
 
-export const Cell: React.FC<CellProps> = (props: CellProps) => {
-  const {
-    onRemove,
-    removePlaceholder,
-    onDragFinish,
-    className,
-    style,
-    before,
-    after,
-    disabled,
-    removable,
-    draggable,
-    selectable,
-    Component,
-    onChange,
-    name,
-    checked,
-    defaultChecked,
-    getRootRef,
-    ...restProps
-  } = props;
-  const rootElRef = React.useRef(null);
-  const platform = usePlatform();
-
-  const [dragging, setDragging] = React.useState<boolean>(false);
-
-  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);
-  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);
-  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);
-  const [dragShift, setDragShift] = React.useState<number>(0);
-  const [dragDirection, setDragDirection] = React.useState<'down' | 'up'>(undefined);
-
-  const onDragStart = () => {
-    const rootEl = rootElRef?.current;
-
-    setDragging(true);
-
-    const _siblings: HTMLElement[] = Array.from(rootEl.parentElement.childNodes);
-    const rootElIdx = _siblings.indexOf(rootEl);
-
-    setDragStartIndex(rootElIdx);
-    setDragEndIndex(rootElIdx);
-    setSiblings(_siblings);
-    setDragShift(0);
-  };
-
-  const onDragMove = (e: TouchEvent) => {
-    e.originalEvent.preventDefault();
-
-    const rootEl = rootElRef?.current;
-
-    rootEl.style.transform = `translateY(${e.shiftY}px)`;
-    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
-    setDragShift(e.shiftY);
-    setDragEndIndex(dragStartIndex);
-
-    siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
-      const rootGesture = rootEl.getBoundingClientRect();
-
-      const siblingGesture = sibling.getBoundingClientRect();
-
-      if (dragStartIndex < siblingIndex) {
-        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2) {
-          if (dragDirection === 'down') {
-            sibling.style.transform = 'translateY(-100%)';
-          }
-
-          setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
-        }
-        if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2 && dragDirection === 'up') {
-          sibling.style.transform = 'translateY(0)';
-        }
-      } else if (dragStartIndex > siblingIndex) {
-        if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2) {
-          if (dragDirection === 'up') {
-            sibling.style.transform = 'translateY(100%)';
-          }
-
-          setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
-        }
-        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2 && dragDirection === 'down') {
-          sibling.style.transform = 'translateY(0)';
-        }
-      }
-    });
-  };
-
-  const onDragEnd = () => {
-    const [from, to] = [dragStartIndex, dragEndIndex];
-
-    siblings.forEach((sibling: HTMLElement) => {
-      sibling.style.transform = null;
-    });
-
-    setSiblings(undefined);
-    setDragEndIndex(undefined);
-    setDragStartIndex(undefined);
-    setDragDirection(undefined);
-    setDragShift(undefined);
+const warn = warnOnce('Cell');
+export const Cell: React.FC<CellProps> = ({
+  mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0
+  onRemove,
+  removePlaceholder = 'Удалить',
+  onDragFinish,
+  before,
+  after,
+  disabled,
+  removable: deprecatedRemovable, // TODO: удалить перед 5.0.0
+  draggable,
+  selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0
+  Component,
+  onChange,
+  name,
+  checked,
+  defaultChecked,
+  getRootRef,
+  draggerLabel = 'Перенести ячейку',
+  className,
+  style,
+  ...restProps
+}: CellProps) => {
+  // TODO: удалить перед 5.0.0
+  let mode: CellProps['mode'] = propsMode;
+
+  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {
+    mode = deprecatedSelectable
+      ? 'selectable'
+      : 'removable';
+
+    if (process.env.NODE_ENV === 'development') {
+      deprecatedSelectable && warn('Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".');
+      deprecatedRemovable && warn('Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".');
+    }
+  }
+  // /end TODO
 
-    setDragging(false);
+  const selectable = mode === 'selectable';
+  const removable = mode === 'removable';
 
-    props.onDragFinish && props.onDragFinish({ from, to });
-  };
+  const platform = usePlatform();
 
-  const onDragClick = (e: React.MouseEvent) => {
-    e.nativeEvent.stopPropagation();
-    e.preventDefault();
-  };
+  const { dragging, rootElRef, ...draggableProps } = useDraggable({ onDragFinish });
 
   const { toggleDrag } = React.useContext(ListContext);
   React.useEffect(() => {
@@ -158,83 +106,74 @@ export const Cell: React.FC<CellProps> = (props: CellProps) => {
     return undefined;
   }, [dragging]);
 
-  const IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
-  const IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
+  let dragger;
+  if (draggable) {
+    dragger = <CellDragger vkuiClass="Cell__dragger" aria-label={draggerLabel} {...draggableProps} />;
+  }
+
+  let checkbox;
+  if (selectable) {
+    const checkboxProps: CellCheckboxProps = { name, onChange, defaultChecked, checked, disabled };
+    checkbox = <CellCheckbox vkuiClass="Cell__checkbox" {...checkboxProps} />;
+  }
+
+  const simpleCellDisabled = draggable && !selectable || removable || disabled;
+  const hasActive = !simpleCellDisabled && !dragging;
+
+  const cellClasses = classNames(getClassName('Cell', platform), {
+    'Cell--dragging': dragging,
+    'Cell--removable': removable,
+    'Cell--selectable': selectable,
+    'Cell--disabled': disabled,
+  });
 
   const simpleCell = (
     <SimpleCell
+      hasActive={hasActive}
+      hasHover={hasActive}
       {...restProps}
-      disabled={draggable || removable || disabled}
+      vkuiClass="Cell__content"
+      disabled={simpleCellDisabled}
       Component={selectable ? 'label' : Component}
-      htmlFor={selectable ? name : undefined}
       before={
         <React.Fragment>
-          {(platform === ANDROID || platform === VKCOM) && draggable && (
-            <Touch
-              vkuiClass="Cell__dragger"
-              onStart={onDragStart}
-              onMoveY={onDragMove}
-              onEnd={onDragEnd}
-              onClick={onDragClick}
-            ><Icon24Reorder /></Touch>
-          )}
-          {selectable && (
-            <React.Fragment>
-              <input
-                type="checkbox"
-                vkuiClass="Cell__checkbox"
-                name={name}
-                onChange={onChange}
-                defaultChecked={defaultChecked}
-                checked={checked}
-                disabled={disabled}
-              />
-              <span vkuiClass="Cell__marker">
-                <IconOff vkuiClass="Cell__marker-in" />
-                <IconOn vkuiClass="Cell__marker-in Cell__marker-in--checked" />
-              </span>
-            </React.Fragment>
-          )}
+          {draggable && (platform === ANDROID || platform === VKCOM) && dragger}
+          {selectable && checkbox}
           {before}
         </React.Fragment>
       }
       after={
         <React.Fragment>
-          {platform === IOS && draggable && (
-            <Touch
-              vkuiClass="Cell__dragger"
-              onStart={onDragStart}
-              onMoveY={onDragMove}
-              onEnd={onDragEnd}
-              onClick={onDragClick}
-            ><Icon24ReorderIos /></Touch>
-          )}
+          {draggable && platform === IOS && dragger}
           {after}
         </React.Fragment>
       }
     />
   );
 
+  if (removable) {
+    return (
+      <Removable
+        vkuiClass={cellClasses}
+        className={className}
+        style={style}
+        getRootRef={rootElRef}
+        removePlaceholder={removePlaceholder}
+        onRemove={(e) => onRemove(e, rootElRef?.current)}
+      >
+        {simpleCell}
+      </Removable>
+    );
+  }
+
   return (
     <div
-      vkuiClass={classNames(getClassName('Cell', platform), {
-        'Cell--dragging': dragging,
-        'Cell--removable': removable,
-        'Cell--selectable': selectable,
-        'Cell--disabled': disabled,
-      })}
+      vkuiClass={cellClasses}
       className={className}
       style={style}
       ref={rootElRef}
     >
-      {removable
-        ? <Removable removePlaceholder={removePlaceholder} onRemove={(e) => onRemove(e, rootElRef?.current)}>{simpleCell}</Removable>
-        : simpleCell
-      }
+      {simpleCell}
     </div>
   );
 };
-
-Cell.defaultProps = {
-  removePlaceholder: 'Удалить',
-};

package/src/components/Cell/CellCheckbox/CellCheckbox.css

@@ -0,0 +1,17 @@
+.CellCheckbox__icon {
+  color: var(--icon_tertiary);
+}
+
+.CellCheckbox__input,
+.CellCheckbox__icon {
+  display: none;
+}
+
+.CellCheckbox__icon--on {
+  color: var(--accent);
+}
+
+.CellCheckbox__input:not(:checked) ~ .CellCheckbox__icon--off,
+.CellCheckbox__input:checked ~ .CellCheckbox__icon--on {
+  display: block;
+}

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { getClassName } from '../../../helpers/getClassName';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { classNames } from '../../../lib/classNames';
+import { ANDROID } from '../../../lib/platform';
+import { CellProps } from '../Cell';
+import './CellCheckbox.css';
+
+export type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;
+
+export const CellCheckbox: React.FC<CellCheckboxProps> = ({
+  className,
+  style,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  const IconOff = platform === ANDROID
+    ? Icon24CheckBoxOff
+    : Icon24CheckCircleOff;
+
+  const IconOn = platform === ANDROID
+    ? Icon24CheckBoxOn
+    : Icon24CheckCircleOn;
+
+  return (
+    <div
+      vkuiClass={classNames(getClassName('CellCheckbox', platform))}
+      className={className}
+      style={style}
+    >
+      <input
+        vkuiClass="CellCheckbox__input"
+        type="checkbox"
+        {...restProps}
+      />
+      <IconOff vkuiClass="CellCheckbox__icon CellCheckbox__icon--off" />
+      <IconOn vkuiClass="CellCheckbox__icon CellCheckbox__icon--on" />
+    </div>
+  );
+};

package/src/components/Cell/CellDragger/CellDragger.css

@@ -0,0 +1,4 @@
+.CellDragger {
+  cursor: ns-resize;
+  color: var(--icon_secondary);
+}

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
+import { getClassName } from '../../../helpers/getClassName';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { classNames } from '../../../lib/classNames';
+import { IOS } from '../../../lib/platform';
+import { Touch } from '../../Touch/Touch';
+import { DraggableProps } from '../useDraggable';
+import './CellDragger.css';
+
+type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
+
+export const CellDragger: React.FC<CellDraggerProps> = ({
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  const onClick = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+  }, []);
+
+  return (
+    <Touch
+      vkuiClass={classNames(getClassName('CellDragger', platform))}
+      onStart={onDragStart}
+      onMoveY={onDragMove}
+      onEnd={onDragEnd}
+      onClick={onClick}
+      {...restProps}
+    >
+      {platform === IOS
+        ? <Icon24ReorderIos />
+        : <Icon24Reorder />
+      }
+    </Touch>
+  );
+};

package/src/components/Cell/Readme.md

@@ -1,58 +1,96 @@
 Надстройка над SimpleCell, позволяющая удалять, перетаскивать и выделять ячейки.
 
 ```jsx
-  class Example extends React.Component {
-
-    constructor() {
-      this.state = {
-        activePanel: 'list',
-        removeList: ['Михаил Андриевский', 'Вадим Дорохов', 'Саша Колобов'],
-        draggingList: ['Say', 'Hello', 'To', 'My', 'Little', 'Friend']
-      };
-    }
+const [removeList, updateRemoveList] = React.useState(['Михаил Андриевский', 'Вадим Дорохов', 'Саша Колобов']);
+const [draggingList, updateDraggingList] = React.useState(['Say', 'Hello', 'To', 'My', 'Little', 'Friend']);
+const [dragAndSelectList, updateDragAndSelectList] = React.useState([{ label: 'Фотографии', defaultChecked: true }, { label: 'Музыка' }, { label: 'Видео' }]);
+const [dragAndRemoveList, updateDragAndRemoveList] = React.useState(['Евгения Полозова', 'Артур Стамбульцян', 'Владимир Клепов']);
+
+const removeFromList = (idx, list, updateListFn) => {
+  const _list = [...list];
+  _list.splice(idx, 1);
+  updateListFn(_list);
+}
+
+const reorderList = ({ from, to }, list, updateListFn) => {
+  const _list = [...list];
+  _list.splice(from, 1);
+  _list.splice(to, 0, list[from]);
+  updateListFn(_list);
+}
+
+<View activePanel="list">
+  <Panel id="list">
+    <PanelHeader>Cell</PanelHeader>
+
+
+    <Group header={<Header subtitle={<code>mode="selectable"</code>}>Выделение</Header>}>
+      <Cell mode="selectable" before={<Avatar />}>Артур Стамбульцян</Cell>
+      <Cell mode="selectable" before={<Avatar />}>Игорь Федоров</Cell>
+      <Cell mode="selectable" disabled before={<Avatar />}>Михаил Лихачев</Cell>
+    </Group>
 
-    render() {
-      return (
-        <View activePanel={this.state.activePanel}>
-          <Panel id="list">
-            <PanelHeader>
-              Cell
-            </PanelHeader>
-            <Group header={<Header mode="secondary">Выделение</Header>}>
-              <Cell selectable before={<Avatar />}>Артур Стамбульцян</Cell>
-              <Cell selectable before={<Avatar />}>Игорь Федоров</Cell>
-              <Cell selectable disabled before={<Avatar />}>Михаил Лихачев</Cell>
-            </Group>
-            {this.state.removeList.length > 0 &&
-              <Group header={<Header mode="secondary">Удаление</Header>}>
-                <List>
-                  {this.state.removeList.map((item, index) => (
-                    <Cell key={item} removable onRemove={() => {
-                      this.setState({
-                        removeList: [...this.state.removeList.slice(0, index), ...this.state.removeList.slice(index + 1)]
-                      })
-                    }}>{item}</Cell>
-                  ))}
-                </List>
-              </Group>
-            }
-            <Group header={<Header mode="secondary">Перетаскивание</Header>}>
-              <List>
-                {this.state.draggingList.map((item) => (
-                  <Cell before={<Avatar />} key={item} draggable onDragFinish={({ from, to }) => {
-                    const draggingList = [...this.state.draggingList];
-                    draggingList.splice(from, 1);
-                    draggingList.splice(to, 0, this.state.draggingList[from]);
-                    this.setState({ draggingList });
-                  }}>{item}</Cell>
-                ))}
-              </List>
-            </Group>
-          </Panel>
-        </View>
-      )
+
+    {removeList.length > 0 &&
+    <Group header={<Header subtitle={<code>mode="removable"</code>}>Удаление</Header>}>
+      <List>
+        {removeList.map((item, idx) => (
+          <Cell
+            key={item}
+            mode="removable"
+            onRemove={() => removeFromList(idx, removeList, updateRemoveList)}
+          >{item}</Cell>
+        ))}
+      </List>
+    </Group>
     }
-  }
 
-  <Example />
+
+    <Group header={<Header subtitle={<code>draggable</code>}>Перетаскивание</Header>}>
+      <List>
+        {draggingList.map((item) => (
+          <Cell
+            key={item}
+            before={<Avatar />}
+            draggable
+            onDragFinish={({ from, to }) => reorderList({from, to}, draggingList, updateDraggingList)}
+          >{item}</Cell>
+        ))}
+      </List>
+    </Group>
+
+
+    <Group header={<Header subtitle={<code>draggable mode="selectable"</code>}>Перетаскивание c выделением</Header>}>
+      <List>
+        {dragAndSelectList.map(({ label, ...restItem }) => (
+          <Cell
+            key={label}
+            mode="selectable"
+            draggable
+            before={<Avatar mode="app" size={32} />}
+            onDragFinish={({ from, to }) => reorderList({from, to}, dragAndSelectList, updateDragAndSelectList)}
+            {...restItem}
+          >{label}</Cell>
+        ))}
+      </List>
+    </Group>
+
+    {dragAndRemoveList.length > 0 &&
+    <Group header={<Header subtitle={<code>draggable mode="removable"</code>} >Перетаскивание c удалением</Header>}>
+      <List>
+        {dragAndRemoveList.map((item, idx) => (
+          <Cell
+            key={item}
+            mode="removable"
+            draggable
+            before={<Avatar />}
+            onRemove={() => removeFromList(idx, dragAndRemoveList, updateDragAndRemoveList)}
+            onDragFinish={({ from, to }) => reorderList({from, to}, dragAndRemoveList, updateDragAndRemoveList)}
+          >{item}</Cell>
+        ))}
+      </List>
+    </Group>
+    }
+  </Panel>
+</View>
 ```