@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

package/dist/lib/components/ProductSwitcher/ProductSwitcher.css

@@ -1,372 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-beta-product-switcher {
-  font-family: inherit;
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  background-color: #00863e;
-  border-radius: 50px;
-}
-.mfui-beta-product-switcher__row {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-.mfui-beta-product-switcher__item {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  cursor: pointer;
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-product-switcher__item {
-    width: 54px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher__item {
-    width: 61px;
-  }
-}
-.mfui-beta-product-switcher__item:first-child {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-}
-.mfui-beta-product-switcher__item:last-child {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-}
-.mfui-beta-product-switcher__label {
-  font-size: 22px;
-  line-height: 28px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  width: 64px;
-  height: 64px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  color: #FFFFFF;
-  -webkit-transition: color 0.2s ease-in-out 0.05s;
-  transition: color 0.2s ease-in-out 0.05s;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher__label {
-    font-size: 26px;
-    line-height: 32px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-beta-product-switcher__label {
-    font-size: 28px;
-    line-height: 36px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-beta-product-switcher__label {
-    font-size: 32px;
-    line-height: 40px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-product-switcher__label {
-    width: 48px;
-    height: 48px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher__label {
-    width: 56px;
-    height: 56px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-product-switcher__label {
-    font-size: 32px;
-    line-height: 40px;
-  }
-}
-.mfui-beta-product-switcher__label-unit {
-  display: none;
-}
-.mfui-beta-product-switcher__pointer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background-color: #FFFFFF;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out;
-  transition: transform 0.2s ease-in-out;
-  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-  cursor: pointer;
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-product-switcher__pointer {
-    width: 48px;
-    height: 48px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher__pointer {
-    width: 56px;
-    height: 56px;
-  }
-}
-.mfui-beta-product-switcher__item_active {
-  cursor: default;
-}
-.mfui-beta-product-switcher__item_active .mfui-beta-product-switcher__label {
-  color: #00B956;
-}
-.mfui-beta-product-switcher__color-row {
-  display: none;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase {
-  width: 100%;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: 0 0 0 1px #EDEDED;
-          box-shadow: 0 0 0 1px #EDEDED;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__row {
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__label {
-  font-size: 12px;
-  font-weight: normal;
-  line-height: 44px;
-  color: #000000;
-  width: 44px;
-  height: 44px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__label {
-    width: 52px;
-    height: 52px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__item {
-    width: 44px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__item {
-    width: 63px;
-  }
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__item:hover .mfui-beta-product-switcher__label {
-  color: #10E272;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__item_active .mfui-beta-product-switcher__label {
-  color: #FFFFFF !important;
-  font-size: 15px;
-  font-weight: 500;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__pointer {
-  border: 2px solid #FFFFFF;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  background-color: #00B956;
-  width: 44px;
-  height: 44px;
-}
-@media screen and (min-width: 1280px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_tariff-showcase .mfui-beta-product-switcher__pointer {
-    width: 52px;
-    height: 52px;
-  }
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values {
-  border-radius: 35px;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__item {
-  width: 95px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__item {
-    width: 106px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__item {
-    width: 112px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__item {
-    width: 131px;
-  }
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__label {
-  width: 95px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__label {
-    width: 106px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__label {
-    width: 112px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__label {
-    width: 131px;
-  }
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__pointer {
-  border-radius: 24px;
-  width: 95px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__pointer {
-    width: 106px;
-    border-radius: 26px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__pointer {
-    border-radius: 32px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__pointer {
-    width: 112px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-unit-values .mfui-beta-product-switcher__pointer {
-    width: 131px;
-  }
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 100%;
-  height: 66px;
-  background-color: transparent;
-  border-radius: 6px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row:not(:first-child) {
-  margin-top: 16px;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__row {
-  height: 12px;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  background-color: #EDEDED;
-  border-radius: 6px;
-  z-index: auto;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item {
-  width: 24px;
-  z-index: 3;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item:last-child .mfui-beta-product-switcher__label {
-  right: 0;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item_active {
-  display: block;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item_active .mfui-beta-product-switcher__label {
-  font-size: 15px;
-  font-weight: 500;
-  height: 24px;
-  line-height: 24px;
-  top: -34px;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item_active .mfui-beta-product-switcher__label-unit {
-  display: block;
-  margin-left: 4px;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item_active .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher:last-child .mfui-beta-product-switcher__label,
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item_active .mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher:first-child .mfui-beta-product-switcher__label {
-  -webkit-transform: none;
-          transform: none;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__item_disabled .mfui-beta-product-switcher__label {
-  color: #D8D8D8;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__label {
-  width: auto;
-  position: absolute;
-  top: 17px;
-  color: #333333;
-  height: 12px;
-  line-height: 16px;
-  font-size: 12px;
-  font-weight: 400;
-  -webkit-transition: none;
-  transition: none;
-  white-space: nowrap;
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__pointer {
-  border-radius: 24px;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 21px;
-  left: 0;
-  z-index: 3;
-  -webkit-transition: none;
-  transition: none;
-  -webkit-box-shadow: 0 0 7px 0 rgba(32, 39, 48, 0.29), 0 0 3px 0 rgba(38, 41, 61, 0.06);
-          box-shadow: 0 0 7px 0 rgba(32, 39, 48, 0.29), 0 0 3px 0 rgba(38, 41, 61, 0.06);
-}
-.mfui-beta-product-switcher.mfui-beta-product-switcher_theme_with-color-row .mfui-beta-product-switcher__color-row {
-  display: block;
-  background-color: #00B956;
-  position: absolute;
-  top: 27px;
-  left: 0;
-  height: 12px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-  z-index: 2;
-  -webkit-transition: none;
-  transition: none;
-}

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

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import './ProductSwitcher.less';
-interface IItem {
-    title: string;
-    value: string;
-    unit?: string;
-}
-export interface IProductSwitcherProps {
-    /** Class name */
-    items: IItem[];
-    /** Start index */
-    startIndex?: number;
-    /** Theme */
-    theme?: 'tariff-showcase' | 'with-unit-values' | 'with-color-row';
-    /** Custom class name */
-    className: string;
-    /** Change handler */
-    onChange(e: React.SyntheticEvent<EventTarget> | TouchEvent | MouseEvent, value: string, index: number): boolean;
-}
-interface IProductSwitcherState {
-    /** Current value */
-    currentValue: string;
-    currentIndex: number;
-    isPointerPressed: boolean;
-    isPressedPointerLeaveBlock: boolean;
-}
-declare class ProductSwitcher extends React.Component<IProductSwitcherProps, IProductSwitcherState> {
-    static propTypes: {
-        items: PropTypes.Validator<any[]>;
-        startIndex: PropTypes.Requireable<number>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        theme: PropTypes.Requireable<string>;
-    };
-    static defaultProps: Pick<IProductSwitcherProps, 'startIndex'>;
-    labelNodes: object;
-    rootNode: HTMLElement | null;
-    pointerNode: HTMLElement | null;
-    colorRowNode: HTMLElement | null;
-    timer: number;
-    isTouch: boolean;
-    swipeRowWidth: number;
-    constructor(props: IProductSwitcherProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: IProductSwitcherProps): void;
-    getSafeStartIndex(startIndex: number, items: IItem[]): number;
-    handleWindowSize: () => void;
-    handleClickItem: (value: string, index: number) => (e: React.SyntheticEvent<EventTarget, Event>) => void;
-    setHandlers: () => void;
-    removeHandlers: () => void;
-    setPointerState: (e: Event) => void;
-    handleTouchMove: (e: TouchEvent) => void;
-    handleMouseMove: (e: MouseEvent) => void;
-    handleMouseLeave: (e: MouseEvent) => void;
-    handleMouseUp: (e: MouseEvent) => void;
-    handleBodyMouseUp: (e: MouseEvent) => void;
-    handleTouchEnd: (e: TouchEvent) => void;
-    moveSwitcher: (e: MouseEvent | TouchEvent | React.SyntheticEvent<EventTarget, Event>, eventXCoord: number) => void;
-    handleEndSwitchActions: (e: MouseEvent | TouchEvent | React.SyntheticEvent<EventTarget, Event>, eventXCoord: number) => void;
-    getEntryPointsRange: (centralСoordinate: number) => number[];
-    getNearPoint: (outRowPoint: number) => {
-        item: number;
-        coord: number;
-        title: string;
-        value: string;
-        unit?: string | undefined;
-    }[];
-    getRangeWrapperCoords: (node: HTMLElement) => DOMRect;
-    getSwitcherStep: () => number | undefined;
-    getRowItemsInfo: () => {
-        item: number;
-        coord: number;
-        title: string;
-        value: string;
-        unit?: string | undefined;
-    }[];
-    movePointer(value: string): void;
-    moveSwipePointer: (value: string) => void;
-    getRootNode: (node: HTMLElement | null) => void;
-    getLabelNodes: (value: string) => (node: HTMLElement | null) => void;
-    getPointerNode: (node: HTMLElement | null) => void;
-    getColorRowNode: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
-}
-export default ProductSwitcher;