@megafon/ui-core 8.17.1 → 8.17.3

package/dist/lib/components/Selector/Selector.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import './Selector.scss';
+export interface ISelectorProps {
+    /** Цвет селектора */
+    color?: 'dark' | 'light';
+    /** Базовый тип компонента */
+    type?: 'radio' | 'checkbox';
+    /** Значение */
+    value: string;
+    /** Имя для тега form */
+    name?: string;
+    /** Управление состоянием вкл/выкл компонента */
+    checked?: boolean;
+    /** Управление состоянием компонента при типе checkbox */
+    checkedOptions?: string[];
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Отобразить компонент в состоянии ошибки */
+    error?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        label?: string;
+        customInput?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+    /** Обработчик изменения значения 'value' */
+    onChange?: (value: string | string[]) => void;
+    /** Ссылка на input */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+declare const Selector: React.FC<ISelectorProps>;
+export default Selector;

package/dist/lib/components/Selector/Selector.js

@@ -0,0 +1,79 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CheckedIcon = function CheckedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 14 12"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M4.523 8.368L12.386 0 14 1.914 4.523 12 0 7.187l1.614-1.914 2.909 3.095z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-selector');
+var Selector = function Selector(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'dark' : _ref$color,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'radio' : _ref$type,
+    value = _ref.value,
+    name = _ref.name,
+    checked = _ref.checked,
+    _ref$checkedOptions = _ref.checkedOptions,
+    checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    error = _ref.error,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    inputRef = _ref.inputRef;
+  var handleChange = function handleChange() {
+    if (type === 'radio') {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+    var isChecked = checkedOptions.includes(value);
+    var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
+      return option !== value;
+    }) : [].concat((0, _toConsumableArray2["default"])(checkedOptions), [value]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('', className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({
+    className: cn('label', (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, color, true), "disabled", disabled), "error", error), classes.label)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('input'),
+    type: type,
+    name: name,
+    value: value,
+    checked: type === 'radio' ? checked : checkedOptions.includes(value),
+    disabled: disabled,
+    onChange: handleChange,
+    ref: inputRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('custom-input', classes.customInput)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children));
+};
+var _default = exports["default"] = Selector;

package/dist/lib/components/Sliders/Slider/Slider.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-slider__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}

package/dist/lib/components/Sliders/Slider/Slider.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import './Slider.scss';
+export interface ISlider {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Текущее значение */
+    value?: number;
+    /** Минимальное значение */
+    minValue: number;
+    /** Максимальное значение */
+    maxValue: number;
+    /** Лейбл */
+    label?: string;
+    /** Тип выводимого значения */
+    displayValueType?: 'input' | 'line';
+    /** Единица измерения выводимого значения */
+    displayValueUnit?: string;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Шаг */
+    step?: number;
+    /** Тип встроенной шкалы */
+    scale?: 'interval' | 'base';
+    /** Кастомная шкала */
+    customScale?: string[];
+    /** Переводит компонент в выключенное состояние */
+    disabled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        rangeInput?: Record<string, string>;
+        scale?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (value: number) => void;
+}
+declare const Slider: React.FC<ISlider>;
+export default Slider;

package/dist/lib/components/Sliders/Slider/Slider.js

@@ -0,0 +1,104 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
+var _SliderScale = _interopRequireDefault(require("../components/SliderScale/SliderScale"));
+var _helpers = require("../helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-slider');
+var Slider = function Slider(_ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    displayValueType = _ref.displayValueType,
+    displayValueUnit = _ref.displayValueUnit,
+    _ref$value = _ref.value,
+    outerValue = _ref$value === void 0 ? 0 : _ref$value,
+    minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    scale = _ref.scale,
+    customScale = _ref.customScale,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange;
+  var outerRangeValue = (0, _helpers.getRangeValue)(outerValue, minValue, maxValue, step);
+  var _React$useState = React.useState(null),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    rawInputValue = _React$useState2[0],
+    setRawInputValue = _React$useState2[1];
+  var _React$useState3 = React.useState(outerRangeValue),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    innerRangeValue = _React$useState4[0],
+    setInnerRangeValue = _React$useState4[1];
+  var rangeValue = isControlled ? outerRangeValue : innerRangeValue;
+  var trackSize = (0, _helpers.getTrackSize)(rangeValue, minValue, maxValue);
+  var showHead = !!label || !!displayValueType;
+  var handleInputChange = function handleInputChange(isRange) {
+    return function (e) {
+      var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
+      var newRangeValue = (0, _helpers.getRangeValue)(targetValue, minValue, maxValue, step);
+      !isControlled && setInnerRangeValue(newRangeValue);
+      !isRange && setRawInputValue(targetValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue);
+    };
+  };
+  var handleInputBlur = function handleInputBlur() {
+    setRawInputValue(null);
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      disabled: disabled
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), showHead && /*#__PURE__*/React.createElement("div", {
+    className: cn('head')
+  }, !!label && /*#__PURE__*/React.createElement("div", {
+    className: cn('label')
+  }, label), !!displayValueType && /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "right",
+    value: rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : rangeValue,
+    fieldType: displayValueType,
+    valueUnit: displayValueUnit,
+    disabled: disabled,
+    onChange: handleInputChange(false),
+    onBlur: handleInputBlur,
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input
+    }
+  })), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('range-input'),
+    type: "range",
+    value: rangeValue,
+    min: minValue,
+    max: maxValue,
+    onChange: handleInputChange(true),
+    disabled: disabled,
+    style: {
+      backgroundSize: "".concat(trackSize, "% 100%")
+    }
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput))), (!!scale || !!customScale) && /*#__PURE__*/React.createElement(_SliderScale["default"], {
+    minValue: minValue,
+    maxValue: maxValue,
+    scale: scale,
+    customScale: customScale,
+    disabled: disabled,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale
+    }
+  }));
+};
+var _default = exports["default"] = Slider;

package/dist/lib/components/Sliders/SliderRange/SliderRange.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}

package/dist/lib/components/Sliders/SliderRange/SliderRange.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import './SliderRange.scss';
+export interface ISliderRange {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Текущее значение ползунка слева */
+    leftValue?: number;
+    /** Текущее значение ползунка справа */
+    rightValue?: number;
+    /** Минимальное значение */
+    minValue: number;
+    /** Максимальное значение */
+    maxValue: number;
+    /** Лейбл */
+    label?: string;
+    /** Тип выводимого значения */
+    displayValueType?: 'input' | 'line';
+    /** Префикс для выводимого значения слева */
+    displayLeftValuePrefix?: string;
+    /** Префикс для выводимого значения справа */
+    displayRightValuePrefix?: string;
+    /** Единица измерения выводимого значения */
+    displayValueUnit?: string;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Шаг */
+    step?: number;
+    /** Тип встроенной шкалы */
+    scale?: 'interval' | 'base';
+    /** Кастомная шкала */
+    customScale?: string[];
+    /** Переводит компонент в выключенное состояние */
+    disabled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        leftInput?: Record<string, string>;
+        rightInput?: Record<string, string>;
+        leftRangeInput?: Record<string, string>;
+        rightRangeInput?: Record<string, string>;
+        scale?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (leftValue: number, rightValue: number) => void;
+}
+declare const SliderRange: React.FC<ISliderRange>;
+export default SliderRange;

package/dist/lib/components/Sliders/SliderRange/SliderRange.js

@@ -0,0 +1,216 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
+var _SliderScale = _interopRequireDefault(require("../components/SliderScale/SliderScale"));
+var _helpers = require("../helpers");
+var _helpers2 = require("./helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var THUMB_SIZE = 24;
+var cn = (0, _uiHelpers.cnCreate)('mfui-slider-range');
+var SliderRange = function SliderRange(_ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    displayValueType = _ref.displayValueType,
+    displayLeftValuePrefix = _ref.displayLeftValuePrefix,
+    displayRightValuePrefix = _ref.displayRightValuePrefix,
+    displayValueUnit = _ref.displayValueUnit,
+    outerLeftValue = _ref.leftValue,
+    outerRightValue = _ref.rightValue,
+    minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    scale = _ref.scale,
+    customScale = _ref.customScale,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange;
+  var outerLeftRangeValue = (0, _helpers.getRangeValue)(outerLeftValue !== null && outerLeftValue !== void 0 ? outerLeftValue : minValue, minValue, maxValue, step);
+  var outerRightRangeValue = (0, _helpers.getRangeValue)(outerRightValue !== null && outerRightValue !== void 0 ? outerRightValue : maxValue, minValue, maxValue, step);
+  var leftRangeInputRef = React.useRef(null);
+  var rightRangeInputRef = React.useRef(null);
+  var rangeTrackRef = React.useRef(null);
+  var rangeTrackInnerRef = React.useRef(null);
+  var _React$useState = React.useState(null),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    rawLeftInputValue = _React$useState2[0],
+    setRawLeftInputValue = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    rawRightInputValue = _React$useState4[0],
+    setRawRightInputValue = _React$useState4[1];
+  var _React$useState5 = React.useState(outerLeftRangeValue),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    innerLeftRangeValue = _React$useState6[0],
+    setInnerLeftRangeValue = _React$useState6[1];
+  var _React$useState7 = React.useState(outerRightRangeValue),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    innerRightRangeValue = _React$useState8[0],
+    setInnerRightRangeValue = _React$useState8[1];
+  var leftRangeValue = isControlled ? outerLeftRangeValue : innerLeftRangeValue;
+  var rightRangeValue = isControlled ? outerRightRangeValue : innerRightRangeValue;
+  var trackSize = (0, _helpers2.getTrackSize)(leftRangeValue, rightRangeValue, minValue, maxValue);
+  var isThumbAtEndOfTrack = (0, _helpers2.checkForThumbAtEndOfTrack)(leftRangeValue, minValue, maxValue, THUMB_SIZE);
+  var showHead = !!label || !!displayValueType;
+  var handleRangeTrackPointerUp = function handleRangeTrackPointerUp(e) {
+    if (!rangeTrackInnerRef.current || disabled) {
+      return;
+    }
+    var clickValue = (0, _helpers2.getRangeValueByPageX)(e.pageX, minValue, maxValue, rangeTrackInnerRef.current);
+    var newRangeValue = (0, _helpers.getRangeValue)(clickValue, minValue, maxValue, step);
+    var leftHalfTrack = leftRangeValue + (rightRangeValue - leftRangeValue) / 2;
+    if (newRangeValue < leftHalfTrack) {
+      !isControlled && setInnerLeftRangeValue(newRangeValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
+    } else {
+      !isControlled && setInnerRightRangeValue(newRangeValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
+    }
+  };
+  var handleRangeTrackPointerLeave = React.useCallback(function () {
+    var _a, _b, _c;
+    (_a = leftRangeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_b = rightRangeInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    (_c = rangeTrackRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerleave', handleRangeTrackPointerLeave);
+  }, []);
+  var handleRangeTrackPointerDown = function handleRangeTrackPointerDown() {
+    var _a;
+    if (disabled) {
+      return;
+    }
+    (_a = rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerleave', handleRangeTrackPointerLeave);
+  };
+  var handleLeftInputChange = function handleLeftInputChange(isRange) {
+    return function (e) {
+      var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
+      var newRangeValue = (0, _helpers.getRangeValue)(targetValue, minValue, rightRangeValue, step);
+      !isControlled && setInnerLeftRangeValue(newRangeValue);
+      !isRange && setRawLeftInputValue(targetValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
+    };
+  };
+  var handleRightInputChange = function handleRightInputChange(isRange) {
+    return function (e) {
+      var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
+      var newRangeValue = (0, _helpers.getRangeValue)(targetValue, leftRangeValue, maxValue, step);
+      !isControlled && setInnerRightRangeValue(newRangeValue);
+      !isRange && setRawRightInputValue(targetValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
+    };
+  };
+  var handleInputBlur = function handleInputBlur(isLeft) {
+    return function () {
+      if (isLeft) {
+        setRawLeftInputValue(null);
+      } else {
+        setRawRightInputValue(null);
+      }
+    };
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      disabled: disabled
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    style: {
+      '--thumbSize': "".concat(THUMB_SIZE, "px")
+    }
+  }), showHead && /*#__PURE__*/React.createElement("div", {
+    className: cn('head')
+  }, !!label && /*#__PURE__*/React.createElement("div", {
+    className: cn('label')
+  }, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
+    className: cn('display-values')
+  }, /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "left",
+    value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
+    fieldType: displayValueType,
+    valuePrefix: displayLeftValuePrefix,
+    valueUnit: displayValueUnit,
+    disabled: disabled,
+    onChange: handleLeftInputChange(false),
+    onBlur: handleInputBlur(true),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
+    }
+  }), /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "right",
+    value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
+    fieldType: displayValueType,
+    valuePrefix: displayRightValuePrefix,
+    valueUnit: displayValueUnit,
+    disabled: disabled,
+    onChange: handleRightInputChange(false),
+    onBlur: handleInputBlur(false),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightInput
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-container')
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('range-input', {
+      left: true,
+      over: isThumbAtEndOfTrack
+    }),
+    type: "range",
+    value: leftRangeValue,
+    min: minValue,
+    max: maxValue,
+    onChange: handleLeftInputChange(true),
+    disabled: disabled
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput), {
+    ref: leftRangeInputRef
+  })), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('range-input', {
+      right: true
+    }),
+    type: "range",
+    value: rightRangeValue,
+    min: minValue,
+    max: maxValue,
+    onChange: handleRightInputChange(true),
+    disabled: disabled
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput), {
+    ref: rightRangeInputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track'),
+    onPointerUp: handleRangeTrackPointerUp,
+    onPointerDown: handleRangeTrackPointerDown,
+    ref: rangeTrackRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track-inner'),
+    ref: rangeTrackInnerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track-segment'),
+    style: {
+      left: "".concat(trackSize.left, "%"),
+      right: "".concat(trackSize.right, "%")
+    }
+  })))), (!!scale || !!customScale) && /*#__PURE__*/React.createElement(_SliderScale["default"], {
+    minValue: minValue,
+    maxValue: maxValue,
+    scale: scale,
+    customScale: customScale,
+    disabled: disabled,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale
+    }
+  }));
+};
+var _default = exports["default"] = SliderRange;

package/dist/lib/components/Sliders/SliderRange/helpers.d.ts

@@ -0,0 +1,6 @@
+export declare const getTrackSize: (vleftValue: number | undefined, rightValue: number | undefined, minValue: number, maxValue: number) => {
+    left: number;
+    right: number;
+};
+export declare const getRangeValueByPageX: (pageX: number, minValue: number, maxValue: number, trackInnerNode: HTMLDivElement) => number;
+export declare const checkForThumbAtEndOfTrack: (leftRangeValue: number, minValue: number, maxValue: number, thumbSize: number) => boolean;

package/dist/lib/components/Sliders/SliderRange/helpers.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTrackSize = exports.getRangeValueByPageX = exports.checkForThumbAtEndOfTrack = void 0;
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.number.to-fixed.js");
+var getTrackSize = exports.getTrackSize = function getTrackSize() {
+  var vleftValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var rightValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var minValue = arguments.length > 2 ? arguments[2] : undefined;
+  var maxValue = arguments.length > 3 ? arguments[3] : undefined;
+  var valueDifference = maxValue - minValue;
+  if (valueDifference <= 0) {
+    return {
+      left: 0,
+      right: 0
+    };
+  }
+  var leftPercent = (vleftValue - minValue) * 100 / valueDifference;
+  var rightPercent = (maxValue - rightValue) * 100 / valueDifference;
+  return {
+    left: Number(leftPercent.toFixed(3)),
+    right: Number(rightPercent.toFixed(3))
+  };
+};
+var getRangeValueByPageX = exports.getRangeValueByPageX = function getRangeValueByPageX(pageX, minValue, maxValue, trackInnerNode) {
+  var clickPosition = pageX - trackInnerNode.getBoundingClientRect().left;
+  var clickPositionPercent = clickPosition * 100 / trackInnerNode.offsetWidth;
+  return (maxValue - minValue) * clickPositionPercent / 100 + minValue;
+};
+var checkForThumbAtEndOfTrack = exports.checkForThumbAtEndOfTrack = function checkForThumbAtEndOfTrack(leftRangeValue, minValue, maxValue, thumbSize) {
+  return leftRangeValue > maxValue - thumbSize * (maxValue - minValue) / 100;
+};

package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(img/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(img/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}

package/dist/lib/components/Sliders/SliderRatio/SliderRatio.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { ValueType } from './types';
+import './SliderRatio.scss';
+export interface ISliderRatio {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Список значений */
+    values: ValueType[];
+    /** Индекс текущего значения */
+    index?: number;
+    /** Лейбл */
+    label?: string;
+    /** Тип выводимого значения */
+    displayValueType?: 'input' | 'line';
+    /** Префикс для выводимого значения слева */
+    displayLeftValuePrefix?: string;
+    /** Префикс для выводимого значения справа */
+    displayRightValuePrefix?: string;
+    /** Единица измерения выводимого значения слева */
+    displayLeftValueUnit?: string;
+    /** Единица измерения выводимого значения справа */
+    displayRightValueUnit?: string;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Переводит компонент в выключенное состояние */
+    disabled?: boolean;
+    /** Включает отображение шкалы */
+    showScale?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        leftInput?: Record<string, string>;
+        rightInput?: Record<string, string>;
+        rangeInput?: Record<string, string>;
+        scale?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (index: number) => void;
+}
+declare const SliderRatio: React.FC<ISliderRatio>;
+export default SliderRatio;