@vkontakte/vkui 4.19.0 → 4.22.0

package/src/components/Cell/Cell.css

@@ -1,93 +1,56 @@
-.Cell {
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.FormItem .Cell {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
 .List--dragging .Cell:not(.Cell--dragging) {
   transition: transform .3s ease;
+  pointer-events: none;
 }
 
-.List--dragging .Cell--dragging,
 .Cell--dragging {
   background-color: var(--background_content);
   box-shadow: 0 0 5px rgba(0, 0, 0, .25);
   z-index: 3;
 }
 
-.Cell__dragger {
-  position: relative;
-}
-
-.Cell .Cell__dragger .Icon {
-  color: var(--icon_secondary);
-}
-
-.Cell__checkbox {
-  display: none;
+.Cell--selectable.Cell--disabled {
+  opacity: .6;
 }
 
-.Cell--selectable .Cell__marker {
+.Cell__checkbox,
+.Cell__dragger {
   position: relative;
   flex-shrink: 0;
-  width: 24px;
-  height: 24px;
   margin-right: 16px;
-  padding: 0;
-  color: var(--icon_tertiary);
 }
 
-.Cell--selectable .Cell__marker-in--checked {
-  position: absolute;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  color: var(--accent);
-}
-
-.Cell--selectable.Cell--disabled {
-  opacity: .6;
+.Cell__dragger {
+  z-index: 2;
 }
 
-.Cell--selectable .Cell__checkbox:checked ~ .Cell__marker .Cell__marker-in--checked {
-  visibility: initial;
+.Cell__content {
+  max-width: 100%;
+  min-width: 0;
 }
 
-.Cell--removable .SimpleCell {
-  max-width: 100%;
+.Cell--removable .Cell__content {
   flex-grow: 1;
-  min-width: 0;
-  padding-right: 2px;
-  flex-shrink: initial;
-  overflow: hidden;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 /**
  * iOS
  */
-.Cell--ios .Cell__in {
-  transition: transform .6s var(--ios-easing);
+.Cell--ios .Cell__dragger {
+  margin-right: 0;
+  margin-left: 12px;
 }
 
-.Cell--ios.Cell--selectable .Cell__marker {
+.Cell--ios .Cell__checkbox {
   margin-right: 12px;
 }
 
-.Cell--ios.Cell--removable .SimpleCell {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 /**
- * ANDROID & VKCOM
+ * CMP:
+ * FormItem
  */
-.Cell--android .Cell__dragger,
-.Cell--vkcom .Cell__dragger {
-  padding-right: 16px;
+.FormItem > .Cell {
+  margin: 0 calc(-1 * var(--formitem_padding));
 }

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>
+  );
+};