@megafon/ui-shared 8.3.0 → 8.5.0

package/dist/es/components/ChipsBox/ChipBox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Chip } from '@megafon/ui-core';
+export type ChipBoxPropsType = Omit<React.ComponentProps<typeof Chip>, 'color' | 'checked'>;
+declare const ChipBox: React.FC<ChipBoxPropsType>;
+export default ChipBox;

package/dist/es/components/ChipsBox/ChipBox.js

@@ -0,0 +1,7 @@
+/* eslint-disable react/no-unused-prop-types */
+import * as React from 'react';
+var ChipBox = function ChipBox(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+export default ChipBox;

package/dist/es/components/ChipsBox/ChipsBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-chips-box__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.mfui-chips-box__panel{display:none}.mfui-chips-box__panel_current{display:block}

package/dist/es/components/ChipsBox/ChipsBox.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Chips } from '@megafon/ui-core';
+import { ChipBoxPropsType } from './ChipBox';
+import './ChipsBox.scss';
+export type ChipsItemsPropsType = React.ComponentProps<typeof Chips>['items'];
+export type ChipBoxChildrenType = Array<React.ReactElement<ChipBoxPropsType>>;
+export type ChipsBoxPropsType = Omit<React.ComponentProps<typeof Chips>, 'items'> & {
+    /** Рендер содержимого только для текущего варианта */
+    renderOnlyCurrentPanel?: boolean;
+    /** Дочерние элементы */
+    children: ChipBoxChildrenType;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+};
+declare const ChipsBox: React.FC<ChipsBoxPropsType>;
+export default ChipsBox;

package/dist/es/components/ChipsBox/ChipsBox.js

@@ -0,0 +1,76 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { Chips } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./ChipsBox.css";
+var cn = cnCreate('mfui-chips-box');
+var ChipsBox = function ChipsBox(_a) {
+  var _b;
+  var _a$renderOnlyCurrentP = _a.renderOnlyCurrentPanel,
+    renderOnlyCurrentPanel = _a$renderOnlyCurrentP === void 0 ? false : _a$renderOnlyCurrentP,
+    _a$isScrollable = _a.isScrollable,
+    isScrollable = _a$isScrollable === void 0 ? true : _a$isScrollable,
+    rootRef = _a.rootRef,
+    children = _a.children,
+    value = _a.value,
+    onChange = _a.onChange,
+    chipsProps = __rest(_a, ["renderOnlyCurrentPanel", "isScrollable", "rootRef", "children", "value", "onChange"]);
+  var childArray = React.Children.toArray(children).filter(function (child) {
+    return /*#__PURE__*/React.isValidElement(child);
+  });
+  var chipsItems = childArray.map(function (child) {
+    return _extends(_extends({}, child.props), {
+      children: null
+    });
+  });
+  var _React$useState = React.useState(value || ((_b = chipsItems[0]) === null || _b === void 0 ? void 0 : _b.id)),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentId = _React$useState2[0],
+    setCurrentId = _React$useState2[1];
+  var panels = childArray.map(function (child) {
+    var props = child.props;
+    var id = props.id,
+      panel = props.children;
+    var isCurrentPanel = currentId === id;
+    if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: cn('panel', {
+        current: isCurrentPanel
+      })
+    }, panel);
+  });
+  var handleChange = React.useCallback(function (id) {
+    setCurrentId(id);
+    onChange === null || onChange === void 0 ? void 0 : onChange(id);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(Chips, _extends({}, chipsProps, {
+    value: currentId,
+    items: chipsItems,
+    isScrollable: isScrollable,
+    onChange: handleChange
+  }))), panels);
+};
+export default ChipsBox;