@modul/mbui 0.0.28-beta-pv-53496-934863d9 → 0.0.28

package/src/Audio/Audio.tsx

@@ -0,0 +1,359 @@
+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

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

package/src/Audio/types.ts

@@ -0,0 +1,40 @@
+/**
+ * статусы состояния аудио компонента
+ */
+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

@@ -0,0 +1,58 @@
+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

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

package/src/Base/Input/Base.tsx

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,42 @@
+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

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

package/src/Base/Input/types.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,16 @@
+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

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

package/src/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '../@/lib/utils'
+
+export interface BottomNavigationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	asChild?: boolean
+}
+
+export type IProps = {
+	className?: string
+	children: React.ReactNode
+}
+
+const btnClasses = `
+	inline-flex
+	flex-col
+	place-items-center
+	gap-y-[8px]
+	w-full
+	p-[8px]
+	text-[10px]
+	text-center
+	text-light
+	leading-[1.33]
+	transition
+	duration-300
+	hover:bg-btn-ghost-hover
+	hover:text-primary
+	focus:bg-btn-ghost-focus
+	active:bg-btn-ghost-active
+	data-[status=active]:text-primary
+`
+
+const BottomNavigationLink = React.forwardRef<HTMLButtonElement, BottomNavigationLinkProps>(({ className, asChild, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button"
+	return (
+		<Comp
+			className={cn(btnClasses, className)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
+
+BottomNavigationLink.displayName = 'BottomNavigationLink'
+
+const BottomNavigationListItem = React.forwardRef(({ className, children }: IProps, ref) => (
+	<li className={className}>{children}</li>
+))
+BottomNavigationListItem.displayName = 'BottomNavigationListItem'
+
+const BottomNavigationList = React.forwardRef(({ className, children }: IProps, ref) => (
+	<ul className="flex *:w-[calc(100%_/_5)]">{children}</ul>
+))
+BottomNavigationList.displayName = 'BottomNavigationList'
+
+const BottomNavigation = React.forwardRef(({ className, children }: IProps, ref) => {
+	return <nav className={className}>{children}</nav>
+})
+BottomNavigation.displayName = 'BottomNavigation'
+
+export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink }

package/src/BottomNavigation/index.ts

@@ -0,0 +1 @@
+export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink } from './BottomNavigation'