@vkontakte/vkui 4.20.0 → 4.22.1

package/dist/cjs/components/Cell/Cell.js

@@ -13,163 +13,82 @@ var _jsxRuntime = require("../../lib/jsxRuntime");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var React = _interopRequireWildcard(require("react"));
 
 var _classNames = require("../../lib/classNames");
 
-var _getClassName = require("../../helpers/getClassName");
+var _warnOnce = require("../../lib/warnOnce");
 
-var _Touch = require("../Touch/Touch");
+var _getClassName = require("../../helpers/getClassName");
 
 var _platform = require("../../lib/platform");
 
-var _icons = require("@vkontakte/icons");
-
 var _SimpleCell = _interopRequireDefault(require("../SimpleCell/SimpleCell"));
 
 var _Removable = require("../Removable/Removable");
 
 var _usePlatform = require("../../hooks/usePlatform");
 
-var _ListContext = require("../../components/List/ListContext");
-
-var _excluded = ["onRemove", "removePlaceholder", "onDragFinish", "className", "style", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "checked", "defaultChecked", "getRootRef"];
-
-var Cell = function Cell(props) {
-  var _onRemove = props.onRemove,
-      removePlaceholder = props.removePlaceholder,
-      onDragFinish = props.onDragFinish,
-      className = props.className,
-      style = props.style,
-      before = props.before,
-      after = props.after,
-      disabled = props.disabled,
-      removable = props.removable,
-      draggable = props.draggable,
-      selectable = props.selectable,
-      Component = props.Component,
-      onChange = props.onChange,
-      name = props.name,
-      checked = props.checked,
-      defaultChecked = props.defaultChecked,
-      getRootRef = props.getRootRef,
-      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var rootElRef = React.useRef(null);
+var _useDraggable2 = require("./useDraggable");
+
+var _ListContext = require("../List/ListContext");
+
+var _CellDragger = require("./CellDragger/CellDragger");
+
+var _CellCheckbox = require("./CellCheckbox/CellCheckbox");
+
+var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
+    _excluded2 = ["dragging", "rootElRef"];
+var warn = (0, _warnOnce.warnOnce)('Cell');
+
+var Cell = function Cell(_ref) {
+  var propsMode = _ref.mode,
+      _onRemove = _ref.onRemove,
+      _ref$removePlaceholde = _ref.removePlaceholder,
+      removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
+      onDragFinish = _ref.onDragFinish,
+      before = _ref.before,
+      after = _ref.after,
+      disabled = _ref.disabled,
+      deprecatedRemovable = _ref.removable,
+      draggable = _ref.draggable,
+      deprecatedSelectable = _ref.selectable,
+      Component = _ref.Component,
+      onChange = _ref.onChange,
+      name = _ref.name,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
+      getRootRef = _ref.getRootRef,
+      _ref$draggerLabel = _ref.draggerLabel,
+      draggerLabel = _ref$draggerLabel === void 0 ? 'Перенести ячейку' : _ref$draggerLabel,
+      className = _ref.className,
+      style = _ref.style,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // TODO: удалить перед 5.0.0
+  var 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
+
+
+  var selectable = mode === 'selectable';
+  var removable = mode === 'removable';
   var platform = (0, _usePlatform.usePlatform)();
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      dragging = _React$useState2[0],
-      setDragging = _React$useState2[1];
-
-  var _React$useState3 = React.useState(undefined),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      siblings = _React$useState4[0],
-      setSiblings = _React$useState4[1];
-
-  var _React$useState5 = React.useState(undefined),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      dragStartIndex = _React$useState6[0],
-      setDragStartIndex = _React$useState6[1];
-
-  var _React$useState7 = React.useState(undefined),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      dragEndIndex = _React$useState8[0],
-      setDragEndIndex = _React$useState8[1];
-
-  var _React$useState9 = React.useState(0),
-      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      dragShift = _React$useState10[0],
-      setDragShift = _React$useState10[1];
-
-  var _React$useState11 = React.useState(undefined),
-      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
-      dragDirection = _React$useState12[0],
-      setDragDirection = _React$useState12[1];
-
-  var onDragStart = function onDragStart() {
-    var rootEl = rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current;
-    setDragging(true);
-
-    var _siblings = Array.from(rootEl.parentElement.childNodes);
-
-    var rootElIdx = _siblings.indexOf(rootEl);
-
-    setDragStartIndex(rootElIdx);
-    setDragEndIndex(rootElIdx);
-    setSiblings(_siblings);
-    setDragShift(0);
-  };
-
-  var onDragMove = function onDragMove(e) {
-    e.originalEvent.preventDefault();
-    var rootEl = rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current;
-    rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
-    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
-    setDragShift(e.shiftY);
-    setDragEndIndex(dragStartIndex);
-    siblings.forEach(function (sibling, siblingIndex) {
-      var rootGesture = rootEl.getBoundingClientRect();
-      var siblingGesture = sibling.getBoundingClientRect();
-
-      if (dragStartIndex < siblingIndex) {
-        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2) {
-          if (dragDirection === 'down') {
-            sibling.style.transform = 'translateY(-100%)';
-          }
-
-          setDragEndIndex(function (dragEndIndex) {
-            return 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(function (dragEndIndex) {
-            return dragEndIndex - 1;
-          });
-        }
-
-        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2 && dragDirection === 'down') {
-          sibling.style.transform = 'translateY(0)';
-        }
-      }
-    });
-  };
-
-  var onDragEnd = function onDragEnd() {
-    var from = dragStartIndex,
-        to = dragEndIndex;
-    siblings.forEach(function (sibling) {
-      sibling.style.transform = null;
-    });
-    setSiblings(undefined);
-    setDragEndIndex(undefined);
-    setDragStartIndex(undefined);
-    setDragDirection(undefined);
-    setDragShift(undefined);
-    setDragging(false);
-    props.onDragFinish && props.onDragFinish({
-      from: from,
-      to: to
-    });
-  };
-
-  var onDragClick = function onDragClick(e) {
-    e.nativeEvent.stopPropagation();
-    e.preventDefault();
-  };
+  var _useDraggable = (0, _useDraggable2.useDraggable)({
+    onDragFinish: onDragFinish
+  }),
+      dragging = _useDraggable.dragging,
+      rootElRef = _useDraggable.rootElRef,
+      draggableProps = (0, _objectWithoutProperties2.default)(_useDraggable, _excluded2);
 
   var _React$useContext = React.useContext(_ListContext.ListContext),
       toggleDrag = _React$useContext.toggleDrag;
@@ -184,61 +103,69 @@ var Cell = function Cell(props) {
 
     return undefined;
   }, [dragging]);
-  var IconOff = platform === _platform.ANDROID ? _icons.Icon24CheckBoxOff : _icons.Icon24CheckCircleOff;
-  var IconOn = platform === _platform.ANDROID ? _icons.Icon24CheckBoxOn : _icons.Icon24CheckCircleOn;
-  var simpleCell = (0, _jsxRuntime.createScopedElement)(_SimpleCell.default, (0, _extends2.default)({}, restProps, {
-    disabled: draggable || removable || disabled,
-    Component: selectable ? 'label' : Component,
-    htmlFor: selectable ? name : undefined,
-    before: (0, _jsxRuntime.createScopedElement)(React.Fragment, null, (platform === _platform.ANDROID || platform === _platform.VKCOM) && draggable && (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
+  var dragger;
+
+  if (draggable) {
+    dragger = (0, _jsxRuntime.createScopedElement)(_CellDragger.CellDragger, (0, _extends2.default)({
       vkuiClass: "Cell__dragger",
-      onStart: onDragStart,
-      onMoveY: onDragMove,
-      onEnd: onDragEnd,
-      onClick: onDragClick
-    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon24Reorder, null)), selectable && (0, _jsxRuntime.createScopedElement)(React.Fragment, null, (0, _jsxRuntime.createScopedElement)("input", {
-      type: "checkbox",
-      vkuiClass: "Cell__checkbox",
+      "aria-label": draggerLabel
+    }, draggableProps));
+  }
+
+  var checkbox;
+
+  if (selectable) {
+    var checkboxProps = {
       name: name,
       onChange: onChange,
       defaultChecked: defaultChecked,
       checked: checked,
       disabled: disabled
-    }), (0, _jsxRuntime.createScopedElement)("span", {
-      vkuiClass: "Cell__marker"
-    }, (0, _jsxRuntime.createScopedElement)(IconOff, {
-      vkuiClass: "Cell__marker-in"
-    }), (0, _jsxRuntime.createScopedElement)(IconOn, {
-      vkuiClass: "Cell__marker-in Cell__marker-in--checked"
-    }))), before),
-    after: (0, _jsxRuntime.createScopedElement)(React.Fragment, null, platform === _platform.IOS && draggable && (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
-      vkuiClass: "Cell__dragger",
-      onStart: onDragStart,
-      onMoveY: onDragMove,
-      onEnd: onDragEnd,
-      onClick: onDragClick
-    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon24ReorderIos, null)), after)
+    };
+    checkbox = (0, _jsxRuntime.createScopedElement)(_CellCheckbox.CellCheckbox, (0, _extends2.default)({
+      vkuiClass: "Cell__checkbox"
+    }, checkboxProps));
+  }
+
+  var simpleCellDisabled = draggable && !selectable || removable || disabled;
+  var hasActive = !simpleCellDisabled && !dragging;
+  var cellClasses = (0, _classNames.classNames)((0, _getClassName.getClassName)('Cell', platform), {
+    'Cell--dragging': dragging,
+    'Cell--removable': removable,
+    'Cell--selectable': selectable,
+    'Cell--disabled': disabled
+  });
+  var simpleCell = (0, _jsxRuntime.createScopedElement)(_SimpleCell.default, (0, _extends2.default)({
+    hasActive: hasActive,
+    hasHover: hasActive
+  }, restProps, {
+    vkuiClass: "Cell__content",
+    disabled: simpleCellDisabled,
+    Component: selectable ? 'label' : Component,
+    before: (0, _jsxRuntime.createScopedElement)(React.Fragment, null, draggable && (platform === _platform.ANDROID || platform === _platform.VKCOM) && dragger, selectable && checkbox, before),
+    after: (0, _jsxRuntime.createScopedElement)(React.Fragment, null, draggable && platform === _platform.IOS && dragger, after)
   }));
+
+  if (removable) {
+    return (0, _jsxRuntime.createScopedElement)(_Removable.Removable, {
+      vkuiClass: cellClasses,
+      className: className,
+      style: style,
+      getRootRef: rootElRef,
+      removePlaceholder: removePlaceholder,
+      onRemove: function onRemove(e) {
+        return _onRemove(e, rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current);
+      }
+    }, simpleCell);
+  }
+
   return (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Cell', platform), {
-      'Cell--dragging': dragging,
-      'Cell--removable': removable,
-      'Cell--selectable': selectable,
-      'Cell--disabled': disabled
-    }),
+    vkuiClass: cellClasses,
     className: className,
     style: style,
     ref: rootElRef
-  }, removable ? (0, _jsxRuntime.createScopedElement)(_Removable.Removable, {
-    removePlaceholder: removePlaceholder,
-    onRemove: function onRemove(e) {
-      return _onRemove(e, rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current);
-    }
-  }, simpleCell) : simpleCell);
+  }, simpleCell);
 };
 
 exports.Cell = Cell;
-Cell.defaultProps = {
-  removePlaceholder: 'Удалить'
-};
 //# sourceMappingURL=Cell.js.map

package/dist/cjs/components/Cell/Cell.js.map

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

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { CellProps } from '../Cell';
+import './CellCheckbox.css';
+export declare type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const CellCheckbox: React.FC<CellCheckboxProps>;

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellCheckbox = void 0;
+
+var _jsxRuntime = require("../../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _icons = require("@vkontakte/icons");
+
+var _getClassName = require("../../../helpers/getClassName");
+
+var _usePlatform = require("../../../hooks/usePlatform");
+
+var _classNames = require("../../../lib/classNames");
+
+var _platform = require("../../../lib/platform");
+
+var _excluded = ["className", "style"];
+
+var CellCheckbox = function CellCheckbox(_ref) {
+  var className = _ref.className,
+      style = _ref.style,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var platform = (0, _usePlatform.usePlatform)();
+  var IconOff = platform === _platform.ANDROID ? _icons.Icon24CheckBoxOff : _icons.Icon24CheckCircleOff;
+  var IconOn = platform === _platform.ANDROID ? _icons.Icon24CheckBoxOn : _icons.Icon24CheckCircleOn;
+  return (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('CellCheckbox', platform)),
+    className: className,
+    style: style
+  }, (0, _jsxRuntime.createScopedElement)("input", (0, _extends2.default)({
+    vkuiClass: "CellCheckbox__input",
+    type: "checkbox"
+  }, restProps)), (0, _jsxRuntime.createScopedElement)(IconOff, {
+    vkuiClass: "CellCheckbox__icon CellCheckbox__icon--off"
+  }), (0, _jsxRuntime.createScopedElement)(IconOn, {
+    vkuiClass: "CellCheckbox__icon CellCheckbox__icon--on"
+  }));
+};
+
+exports.CellCheckbox = CellCheckbox;
+//# sourceMappingURL=CellCheckbox.js.map

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"names":["CellCheckbox","className","style","restProps","platform","IconOff","ANDROID","Icon24CheckBoxOff","Icon24CheckCircleOff","IconOn","Icon24CheckBoxOn","Icon24CheckCircleOn"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMO,IAAMA,YAAyC,GAAG,SAA5CA,YAA4C,OAInD;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,OAAO,GAAGD,QAAQ,KAAKE,iBAAb,GACZC,wBADY,GAEZC,2BAFJ;AAIA,MAAMC,MAAM,GAAGL,QAAQ,KAAKE,iBAAb,GACXI,uBADW,GAEXC,0BAFJ;AAIA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,cAAb,EAA6BP,QAA7B,CAAX,CADb;AAEE,IAAA,SAAS,EAAEH,SAFb;AAGE,IAAA,KAAK,EAAEC;AAHT,KAKE;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,IAAA,IAAI,EAAC;AAFP,KAGMC,SAHN,EALF,EAUE,qCAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,IAVF,EAWE,qCAAC,MAAD;AAAQ,IAAA,SAAS,EAAC;AAAlB,IAXF,CADF;AAeD,CA9BM","sourcesContent":["import * as React from 'react';\nimport { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { getClassName } from '../../../helpers/getClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '../../../lib/classNames';\nimport { ANDROID } from '../../../lib/platform';\nimport { CellProps } from '../Cell';\nimport './CellCheckbox.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox: React.FC<CellCheckboxProps> = ({\n  className,\n  style,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  const IconOff = platform === ANDROID\n    ? Icon24CheckBoxOff\n    : Icon24CheckCircleOff;\n\n  const IconOn = platform === ANDROID\n    ? Icon24CheckBoxOn\n    : Icon24CheckCircleOn;\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('CellCheckbox', platform))}\n      className={className}\n      style={style}\n    >\n      <input\n        vkuiClass=\"CellCheckbox__input\"\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <IconOff vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--off\" />\n      <IconOn vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--on\" />\n    </div>\n  );\n};\n"],"file":"CellCheckbox.js"}

package/dist/cjs/components/Cell/CellDragger/CellDragger.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { DraggableProps } from '../useDraggable';
+import './CellDragger.css';
+declare type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
+export declare const CellDragger: React.FC<CellDraggerProps>;
+export {};

package/dist/cjs/components/Cell/CellDragger/CellDragger.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellDragger = void 0;
+
+var _jsxRuntime = require("../../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _icons = require("@vkontakte/icons");
+
+var _getClassName = require("../../../helpers/getClassName");
+
+var _usePlatform = require("../../../hooks/usePlatform");
+
+var _classNames = require("../../../lib/classNames");
+
+var _platform = require("../../../lib/platform");
+
+var _Touch = require("../../Touch/Touch");
+
+var _excluded = ["onDragStart", "onDragMove", "onDragEnd"];
+
+var CellDragger = function CellDragger(_ref) {
+  var onDragStart = _ref.onDragStart,
+      onDragMove = _ref.onDragMove,
+      onDragEnd = _ref.onDragEnd,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var platform = (0, _usePlatform.usePlatform)();
+  var onClick = React.useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  return (0, _jsxRuntime.createScopedElement)(_Touch.Touch, (0, _extends2.default)({
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('CellDragger', platform)),
+    onStart: onDragStart,
+    onMoveY: onDragMove,
+    onEnd: onDragEnd,
+    onClick: onClick
+  }, restProps), platform === _platform.IOS ? (0, _jsxRuntime.createScopedElement)(_icons.Icon24ReorderIos, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Reorder, null));
+};
+
+exports.CellDragger = CellDragger;
+//# sourceMappingURL=CellDragger.js.map

package/dist/cjs/components/Cell/CellDragger/CellDragger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","restProps","platform","onClick","React","useCallback","e","preventDefault","IOS"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAKjD;AAAA,MAJJC,WAII,QAJJA,WAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,OAAO,GAAGC,KAAK,CAACC,WAAN,CAAkB,UAACC,CAAD,EAAyB;AACzDA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFe,EAEb,EAFa,CAAhB;AAIA,SACE,qCAAC,YAAD;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,aAAb,EAA4BL,QAA5B,CAAX,CADb;AAEE,IAAA,OAAO,EAAEJ,WAFX;AAGE,IAAA,OAAO,EAAEC,UAHX;AAIE,IAAA,KAAK,EAAEC,SAJT;AAKE,IAAA,OAAO,EAAEG;AALX,KAMMF,SANN,GAQGC,QAAQ,KAAKM,aAAb,GACG,qCAAC,uBAAD,OADH,GAEG,qCAAC,oBAAD,OAVN,CADF;AAeD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { getClassName } from '../../../helpers/getClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '../../../lib/classNames';\nimport { IOS } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport './CellDragger.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger: React.FC<CellDraggerProps> = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      vkuiClass={classNames(getClassName('CellDragger', platform))}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === IOS\n        ? <Icon24ReorderIos />\n        : <Icon24Reorder />\n      }\n    </Touch>\n  );\n};\n"],"file":"CellDragger.js"}

package/dist/cjs/components/Cell/useDraggable.d.ts

@@ -0,0 +1,13 @@
+import { TouchEvent } from '../Touch/Touch';
+import { CellProps } from './Cell';
+export interface DraggableProps {
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    onDragMove: (e: TouchEvent) => void;
+}
+interface UseDraggableProps extends DraggableProps {
+    dragging: boolean;
+    rootElRef: any;
+}
+export declare const useDraggable: ({ onDragFinish }: Pick<CellProps, "onDragFinish">) => UseDraggableProps;
+export {};