@modul/mbui 0.0.28-beta-pv-53383-45fd0f43 → 0.0.28-beta-pv-53496-b92f050c

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,
-}

package/src/Badge/Badge.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '../@/lib/utils'
-
-const badgeClasses = {
-	variant: {
-		base: `
-			inline-block
-			focus:ring-2
-			focus:ring-ring
-			focus:ring-offset-2
-			focus:outline-none
-			transition-colors
-			rounded-full
-			`,
-		default: `
-			bg-critical
-			text-white
-		`,
-	},
-	size: {
-		default: 'size-[16px] text-[10px] text-center leadimg-[1] truncate',
-		dot: 'size-[10px] bg-critical-light border-critical border-[3px]',
-		sm: '',
-		md: '',
-		lg: '',
-	},
-}
-
-const badgeVariants = cva(badgeClasses.variant.base, {
-	variants: {
-		variant: {
-			default: badgeClasses.variant.default,
-		},
-		size: {
-			default: badgeClasses.size.default,
-			dot: badgeClasses.size.dot
-		},
-	},
-	defaultVariants: {
-		variant: 'default',
-		size: 'default',
-	},
-})
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, size, ...props }: BadgeProps) {
-	return (
-		<div
-			className={cn(badgeVariants({ variant, size }), className)}
-			{...props}
-		/>
-	)
-}
-
-export { Badge, badgeVariants }

package/src/Badge/index.ts

@@ -1 +0,0 @@
-export { Badge, badgeVariants } from './Badge'

package/src/Base/Input/Base.tsx

@@ -1,37 +0,0 @@
-import React, { ChangeEvent, ForwardedRef } from 'react'
-import { IMaskInput } from 'react-imask'
-import { IInputProps } from './types'
-
-const Base = React.forwardRef<HTMLInputElement, IInputProps>(
-	({ onChange, type = 'text', mask, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
-		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-			// @ts-ignore
-			const val = event.target.value
-			onChange?.(val, event)
-		}
-
-		if (!mask) {
-			return (
-				<input
-					type={type}
-					ref={ref}
-					onChange={handleChange}
-					{...props}
-				/>
-			)
-		}
-
-		return (
-			// @ts-ignore
-			<IMaskInput
-				type={type}
-				inputRef={ref}
-				mask={mask}
-				onChange={handleChange}
-				{...props}
-			/>
-		)
-	}
-)
-
-export default Base

package/src/Base/Input/Input.tsx

@@ -1,42 +0,0 @@
-import React, { ForwardedRef } from 'react'
-import Base from './Base'
-import { IInputProps } from './types'
-
-const Input = React.forwardRef<HTMLInputElement, IInputProps>(
-	({ onChange, value, clearable, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
-		const handleClearClick = (): void => {
-			onChange?.('')
-		}
-
-		if (!clearable) {
-			return (
-				<Base
-					ref={ref}
-					onChange={onChange}
-					value={value}
-					{...props}
-				/>
-			)
-		}
-
-		return (
-			<div className="input_wrap_clear">
-				<Base
-					ref={ref}
-					onChange={onChange}
-					value={value}
-					{...props}
-				/>
-				{value && (
-					<a
-						className="input_clear icon-cancel"
-						onClick={handleClearClick}
-						style={{ visibility: 'initial' }}
-					/>
-				)}
-			</div>
-		)
-	}
-)
-
-export default Input

package/src/Base/Input/index.ts

@@ -1,3 +0,0 @@
-import Input from './Input'
-
-export { Input }

package/src/Base/Input/types.ts

@@ -1,11 +0,0 @@
-import React, { ChangeEvent, ChangeEventHandler } from 'react'
-
-type CustomChangeEventHandler = (value: string, event?: ChangeEvent<HTMLInputElement>) => void
-
-type CombinedChangeEventHandler = ChangeEventHandler<HTMLInputElement> & CustomChangeEventHandler
-
-export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-	onChange?: CombinedChangeEventHandler
-	mask?: string | RegExp | (string | RegExp)[] | NumberConstructor
-	clearable?: boolean
-}

package/src/Base/Links/TextLink.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-
-type TextLinkProps = React.HTMLProps<HTMLAnchorElement>
-
-const TextLink = React.forwardRef<HTMLAnchorElement, TextLinkProps>(({ children, ...props }, ref) => {
-	return (
-		<a
-			ref={ref}
-			{...props}
-		>
-			{children}
-		</a>
-	)
-})
-
-export default TextLink

package/src/Base/Links/index.ts

@@ -1,3 +0,0 @@
-import TextLink from './TextLink'
-
-export { TextLink }