@modul/mbui 0.0.27-beta-webpack-6d7a3f6c → 0.0.27-beta-fix-pv-53496-60a0aad0

package/src/AlertDialog/AlertDialog.tsx

@@ -1,137 +0,0 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import { cn } from "../@/lib/utils"
-import { buttonVariants } from "../../src/Button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-dialog p-[16px] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants({variant: 'primary'}), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline"}),
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/AlertDialog/index.ts

@@ -1,13 +0,0 @@
-export {
-	AlertDialog,
-	AlertDialogPortal,
-	AlertDialogOverlay,
-	AlertDialogTrigger,
-	AlertDialogContent,
-	AlertDialogHeader,
-	AlertDialogFooter,
-	AlertDialogTitle,
-	AlertDialogDescription,
-	AlertDialogAction,
-	AlertDialogCancel,
-} from './AlertDialog'

package/src/Audio/Audio.styl

@@ -1,115 +0,0 @@
-
-.player
-    display flex
-    align-items center
-
-    &__btn
-        position relative
-        margin-right 12px
-        width 40px
-        height @width
-        font-size $fz-large
-        color $cl-white
-        background-color $cl-green-3
-        border 0
-        border-radius 50%
-        outline 0
-        transition background-color .3s ease-in-out
-
-        &:hover
-        &:focus
-            background-color $cl-green-4
-
-        &:active
-            background-color $cl-green-2
-
-        [class*=icon]
-            position absolute
-            top 50%
-            left 53%
-            transform translate(-50%, -50%)
-
-    &__progress
-        position relative
-        flex-grow 1
-
-        &-buffer
-            position absolute
-            top 0
-            left 0
-            height 2px
-            background-color $ca-graphite-5
-            border-radius 1px
-
-        .ant-slider-rail
-            cursor pointer
-            height 2px
-            background-color $ca-graphite-5
-            border-radius 1px
-
-        .ant-slider-track
-            position absolute
-            top 0
-            left 0
-            height 2px
-            background-color $cl-green-2
-            border-radius 1px
-
-        .ant-slider-handle
-            margin 0
-            cursor pointer
-            position absolute
-            top -4px
-            width 10px
-            height @width
-            border-radius 0
-            border 0
-            background-color transparent
-            transform translateX(-50%)
-            &::before
-                position absolute
-                display block
-                content ''
-                width 2px
-                height 8px
-                left 50%
-                top 50%
-                transform translate(-50%, -50%)
-                background-color $cl-green-2
-                border-radius 1px
-
-        .player__time
-            margin-top 14px
-
-        & + .player__time
-            margin-left 12px
-
-    &__range
-        position relative
-        height 2px
-        border-radius 1px
-
-    &__slider
-        position absolute
-        top 50%
-        left 0
-        margin-left -5px
-        width 10px
-        height @width
-        transform translateY(-50%)
-
-        &::after
-            content ''
-            position absolute
-            top 1px
-            left 50%
-            width 2px
-            height 8px
-            background-color $cl-green-2
-            border-radius 1px
-            transform translateX(-50%)
-
-    &__time
-        line-height 1
-        font-size 12px
-        color $cl-text-success

package/src/Audio/Audio.tsx

@@ -1,359 +0,0 @@
-import React from 'react'
-import Slider from '../Slider'
-// import './Audio.styl'
-import {EAudioStatuses, IAudioProps, IState} from "./types";
-
-/**
- * Функция отображения продолжительности записи в "мм:cc"
- * @param {number} value Значение в секундах
- * @returns {string}
- */
-function Duration(value) {
-	let result = '––:––'
-	if (value || value === 0) {
-		const minutes = Math.floor(value / 60)
-		const seconds = Math.round(value - minutes * 60)
-		const leadZero = (value) => `${value < 10 ? '0' : ''}${value}`
-		result = `${leadZero(minutes)}:${leadZero(seconds)}`
-	}
-	return result
-}
-
-/**
- * Компонент прослушивания аудиозаписей
- */
-export class Audio extends React.Component<IAudioProps, IState> {
-	/* начальное состояние */
-	state: any = {
-		loadingProgress: 0,
-		progress: 0,
-		duration: 0,
-		status: EAudioStatuses.PAUSED,
-		currentTime: 0,
-		drag: false,
-	}
-
-	// static defaultProps = {
-	// 	onlyOneIsPlayed: true,
-	// }
-
-	/**
-	 * ссылка на аудио элемент на странице
-	 * @memberof Audio
-	 */
-	audioRef = React.createRef<HTMLAudioElement>()
-
-	componentDidMount() {
-		this.changeVolume(this.props.volume)
-		this.setState({
-			duration: this.props.duration,
-		})
-	}
-
-	componentDidUpdate(prevProps) {
-		if (prevProps.changeVolume !== this.props.volume) {
-			this.changeVolume(this.props.volume)
-		}
-	}
-
-	changeVolume(value) {
-		const audio = this.audioRef.current
-		if (audio.volume) {
-			audio.volume = value || 0.5
-		}
-	}
-
-	getDuration = () => {
-		const audio = this.audioRef.current
-		return Number(this.state.duration || audio.duration)
-	}
-
-	/**
-	 * Метод включение записи на проигрывание
-	 * @memberof Audio
-	 */
-	play() {
-		const audio = this.audioRef.current
-		if (audio && (!audio.src || audio.src.indexOf('_abortedAudio') >= 0)) {
-			audio.src = this.props.src
-		}
-		/** Останавливаем проигрывание остальных записей */
-		const allAudioElements = document.getElementsByTagName('audio')
-		for (let i = allAudioElements.length - 1; i >= 0; i--) {
-			const audioElement = allAudioElements.item(i)
-			if (audioElement !== this.audioRef.current && !!audioElement.getAttribute('data-only-one-is-played')) {
-				audioElement.pause()
-			}
-		}
-		audio.play().catch(() => {
-			audio.pause()
-		})
-	}
-
-	/**
-	 * Метод постановки проигрываемой записи на паузу
-	 * @memberof Audio
-	 */
-	pause() {
-		const audio = this.audioRef.current
-		audio.pause()
-	}
-
-	/**
-	 * Метод прерывания процесса загрузки записи
-	 * @memberof Audio
-	 */
-	loadCancel() {
-		this.pause()
-		const audio = this.audioRef.current
-		if (audio.src) {
-			audio.src = '_abortedAudio'
-		}
-	}
-
-	/**
-	 * Метод перемотки записи до нужной секунды
-	 * @param {number} sec значение в секундах
-	 * @memberof Audio
-	 */
-	seek(sec) {
-		const audio = this.audioRef.current
-		audio.currentTime = Math.min(Math.max(sec, 0), this.getDuration())
-	}
-
-	/**
-	 * Обработчик изменения позиции слайдера момента исполнения записи
-	 * @param {*} value значение слайдера
-	 * @memberof Audio
-	 */
-	onSliderChange = (value) => {
-		const duration = this.getDuration()
-		const newTimeValue = (value / 100) * duration
-		this.seek(newTimeValue)
-		const audio = this.audioRef.current
-		const progress = audio ? (audio.currentTime / duration) * 100 : 0
-		this.setState({ progress, drag: true, currentTime: newTimeValue })
-	}
-
-	onAfterChange = () => {
-		this.setState({ drag: false })
-	}
-
-	/**
-	 * Обработчик нажатия кнопки управления
-	 * @memberof Audio
-	 */
-	onButtonClick = () => {
-		switch (this.state.status) {
-			case EAudioStatuses.LOADING:
-				this.loadCancel()
-				break
-			case EAudioStatuses.PLAYING:
-				this.pause()
-				break
-			default:
-				this.play()
-		}
-	}
-
-	/**
-	 * Обработчик события загрузки метаданных записи
-	 * @param {*} event дескриптор события
-	 * @memberof Audio
-	 */
-	onLoadedMetaData = ({ target }) => {
-		const { duration } = target || {}
-		this.setState({
-			duration: duration,
-		})
-	}
-
-	/**
-	 * Обработчик изменения отметки времени исполнения
-	 * @param {*} event дексриптор события
-	 * @memberof Audio
-	 */
-	onTimeUpdate = (event) => {
-		const { currentTime } = event.target
-		const progress = (currentTime / this.getDuration()) * 100
-		this.setState({ progress, currentTime })
-	}
-
-	/**
-	 * Метод расчета прогресса загруженной записи
-	 * @param {TimeRanges} timeRanges загруженные промежутки
-	 * @param {number} duration длительность записи
-	 * @returns {number}
-	 * @memberof Audio
-	 */
-	calcProgress(timeRanges, duration) {
-		let buffered = 0
-		if (timeRanges && timeRanges.length) {
-			for (let i = timeRanges.length - 1; 0 <= i; i--) {
-				buffered += timeRanges.end(i) - timeRanges.start(i) + 1
-			}
-		}
-		return Math.min(duration && buffered !== duration ? (buffered / duration) * 100 : 0, 100)
-	}
-
-	updateLoadingProgress(buffered, duration) {
-		this.setState({
-			loadingProgress: this.calcProgress(buffered, duration),
-		})
-	}
-
-	/**
-	 * Обработчик загрузки нового фрагмента записи
-	 * @param {*} event
-	 * @memberof Audio
-	 */
-	onProgress = ({ target }) => {
-		const { buffered, duration } = target || {}
-		/* считаем и записываем процент загрузки аудиозаписи*/
-		this.updateLoadingProgress(buffered, duration)
-	}
-
-	/**
-	 * Обработчик при включении проигрывания записи
-	 * @param {*} event
-	 * @memberof Audio
-	 */
-	onPlay = () => {
-		this.setState({ status: EAudioStatuses.PLAYING })
-	}
-
-	/**
-	 * Обработчик при постновки записи на паузу
-	 * @param {*} event дескриптор события
-	 * @memberof Audio
-	 */
-	onPause = () => {
-		this.setState({ status: EAudioStatuses.PAUSED })
-	}
-
-	/**
-	 * Обработчик перехода к проигрыванию записи
-	 * @memberof Audio
-	 */
-	onPlaying = () => {
-		if (this.state.waitingTimerId) {
-			clearTimeout(this.state.waitingTimerId)
-		}
-		this.setState({ status: EAudioStatuses.PLAYING })
-	}
-
-	/**
-	 * Обработчик события ожидания, когда что-то грузится
-	 * @param {*} event дескриптор события
-	 * @memberof Audio
-	 */
-	onWaiting = (event) => {
-		const { buffered, duration } = event.target || {}
-		/* устанавливаем статус "загрузка" через задержку, чтобы не видеть моргания "||" -> "Х" -> "||" при переходе к уже загруженному фрагменту */
-		this.setState({
-			waitingTimerId: setTimeout(() => {
-				this.setState({
-					status: EAudioStatuses.LOADING,
-				})
-			}, 5),
-		})
-		this.updateLoadingProgress(buffered, duration)
-	}
-
-	/**
-	 * Обработчик достижения конца проигрываемой записи
-	 * @param {*} event дескриптор события
-	 * @memberof Audio
-	 */
-	onEnded = (event) => {
-		event.target.currentTime = 0
-		this.setState({ status: EAudioStatuses.PAUSED })
-	}
-
-	/**
-	 * Обработчик возникновения ошибки аудио элемента
-	 * @memberof Audio
-	 */
-	onError = () => {
-		this.setState({ status: EAudioStatuses.PAUSED })
-	}
-
-	/**
-	 * Метод рендера содержимого кнопки управления
-	 * @returns
-	 * @memberof Audio
-	 */
-	getButtonCaption() {
-		switch (this.state.status) {
-			case EAudioStatuses.PAUSED:
-				return <i className="icon-play-solid" />
-			case EAudioStatuses.PLAYING:
-				return <i className="icon-pause" />
-			case EAudioStatuses.LOADING:
-				return (
-					<div>
-						<i className="icon-close" />
-					</div>
-				)
-		}
-	}
-
-	durationRender = () => {
-		const duration = this.state.currentTime || this.state.drag ? this.state.currentTime : this.state.duration
-		return Duration(duration)
-	}
-
-	render() {
-		let { src, fileName, durationView = 'right', onlyOneIsPlayed } = this.props
-		return (
-			<>
-				<div className="player">
-					{/* кнопка */}
-					<button
-						className="player__btn"
-						onClick={this.onButtonClick}
-					>
-						{this.getButtonCaption()}
-					</button>
-					{/* полоса прогресса и перемотки */}
-					<div className="player__progress">
-						<div
-							className="player__progress-buffer"
-							style={{ width: `${this.state.loadingProgress}%` }}
-						/>
-						<Slider
-							value={[this.state.progress ? this.state.progress : 0]}
-							onValueChange={this.onSliderChange}
-							onValueCommit={this.onAfterChange}
-						/>
-						{durationView === 'bottom' && <div className="player__time">{this.durationRender()}</div>}
-					</div>
-					{/* продолжительность аудиозаписи */}
-					{durationView === 'right' && <div className="player__time">{this.durationRender()}</div>}
-					{/* HTML5 элемент аудио */}
-					<audio
-						ref={this.audioRef}
-						preload="none"
-						onLoadedMetadata={this.onLoadedMetaData}
-						onDurationChange={this.onLoadedMetaData}
-						onTimeUpdate={this.onTimeUpdate}
-						onProgress={this.onProgress}
-						onPlay={this.onPlay}
-						onPause={this.onPause}
-						onPlaying={this.onPlaying}
-						onWaiting={this.onWaiting}
-						onEnded={this.onEnded}
-						onAbort={this.onError}
-						onError={this.onError}
-						src={src}
-						data-only-one-is-played={onlyOneIsPlayed ? 'true' : ''}
-					>
-						<p>
-							<a href={src}>{fileName}</a>
-						</p>
-					</audio>
-				</div>
-			</>
-		)
-	}
-}

package/src/Audio/index.ts

@@ -1,4 +0,0 @@
-import { Audio } from './Audio'
-
-export default Audio
-export { Audio }

package/src/Audio/types.ts

@@ -1,40 +0,0 @@
-/**
- * статусы состояния аудио компонента
- */
-export enum EAudioStatuses {
-	LOADING,
-	PLAYING,
-	PAUSED
-}
-
-export interface IState {
-	/* текущий статус */
-	status: EAudioStatuses;
-	/* процесс загрузки */
-	loadingProgress: number;
-	/* прогресс прослушивания */
-	progress: number;
-	/** Продолжительность записи (инициализация), будет пересчитано при получении метаданных */
-	duration: number;
-	/* ИД таймера задержки перед показом лоадера */
-	waitingTimerId?: ReturnType<typeof setTimeout>;
-	/** Текущее время воспроизведения */
-	currentTime: number,
-	/** признак когда пользователь взял ползунок перемотки */
-	drag: boolean,
-}
-
-export interface IAudioProps {
-	/** Продолжительность записи (инициализация), будет пересчитано при получении метаданных */
-	duration: number;
-	/** Источник аудиозаписи */
-	src: string,
-	/** Имя файла, отображаемое когда невозможно отобразить контрол аудиозаписи */
-	fileName: string,
-	/** Уровень звука [0,1] */
-	volume: number,
-	/** Расположение продолжительности аудиозаписи */
-	durationView: 'right' | 'bottom',
-	/** Только один элемент проигрывается на странице */
-	onlyOneIsPlayed: boolean,
-}