@modul/mbui 0.0.1 → 0.0.2-beta-pv-52768-9b2131f6

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/Base/Buttons/Button.tsx

@@ -1,47 +1,72 @@
-import React from 'react'
-import classNames from 'classnames'
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-interface IProps {
-	children?: React.ReactNode
-	loading?: boolean
-	sizeType?: 'normal' | 'big' | 'small' | 'xsmall' | 'xxsmall'
-	variant?: 'primary' | 'green' | 'light' | 'lightPrimary' | 'grey' | 'clean'
-	icon?: string
-	wide?: boolean
-}
-
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IProps
+import { cn } from "../../@/lib/utils"
+// import { cn } from "@/lib/utils" порешать с алиасами
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	(
-		{
-			children,
-			loading = false,
-			sizeType = 'normal',
-			variant = 'primary',
-			className,
-			icon,
-			wide = false,
-			...props
+const buttonVariants = cva(
+	'inline-flex items-center border-[2px] justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring ring-offset-1 disabled:pointer-events-none disabled:opacity-[.24]',
+	{
+		variants: {
+			variant: {
+				primary: 'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
+				secondary: 'text-btn-secondary bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
+				success: 'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
+				'primary-outline': 'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
+				outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
+				ghost:	 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
+				// link: 	 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				lg:			'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
+				md:			'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
+				sm:			'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
+				xs:			'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
+				xxs:		'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]'
+			}
+		},
+		defaultVariants: {
+			variant: 'primary',
+			size: 'md',
 		},
-		ref
-	) => {
-		const styles = classNames('button', sizeType, variant, className, {
-			loader: loading,
-			[`icon-${icon}`]: !!icon,
-			wide,
-		})
-
-		return (
-			<button
-				ref={ref}
-				className={styles}
-				{...props}
-			>
-				{children}
-			</button>
-		)
 	}
 )
+const textVariants = cva(
+	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current rounded-[.25em] disabled:pointer-events-none disabled:opacity-[.24]',
+	{
+		variants: {
+			variant: {
+				primary: 'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
+			}
+		},
+		defaultVariants: {
+			variant: 'primary'
+		},
+	}
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean,
+  asText?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+	const classes = asText ? textVariants({ variant, className }) : buttonVariants({ variant, size, className });
+    return (
+      <Comp
+        className={cn(classes)}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+
+Button.displayName = "Button"
 
-export default Button
+export { Button, buttonVariants }

package/src/Base/Buttons/index.ts

@@ -1,3 +1,4 @@
-import Button from './Button'
+import {Button} from './Button'
 
 export { Button }
+export default Button

package/src/Base/Input/Base.tsx

@@ -0,0 +1,35 @@
+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 => {
+			const val = event.target.value
+			onChange?.(val, event)
+		}
+
+		if (!mask) {
+			return (
+				<input
+					type={type}
+					ref={ref}
+					onChange={handleChange}
+					{...props}
+				/>
+			)
+		}
+
+		return (
+			<IMaskInput
+				type={type}
+				inputRef={ref}
+				mask={mask}
+				onChange={handleChange}
+				{...props}
+			/>
+		)
+	}
+)
+
+export default Base

package/src/Base/Input/Input.tsx

@@ -1,20 +1,40 @@
-import React, { ChangeEvent, ForwardedRef } from 'react'
-import { IMaskInput } from 'react-imask'
+import React, { ForwardedRef } from 'react'
+import Base from './Base'
 import { IInputProps } from './types'
 
 const Input = React.forwardRef<HTMLInputElement, IInputProps>(
-	({ onChange, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
-		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-			const val = event.target.value
-			onChange?.(val, event)
+	({ onChange, value, clearable, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+		const handleClearClick = (): void => {
+			onChange?.('')
+		}
+
+		if (!clearable) {
+			return (
+				<Base
+					ref={ref}
+					onChange={onChange}
+					value={value}
+					{...props}
+				/>
+			)
 		}
 
 		return (
-			<IMaskInput
-				ref={ref}
-				{...props}
-				onChange={handleChange}
-			/>
+			<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>
 		)
 	}
 )

package/src/Base/Input/types.ts

@@ -1,10 +1,11 @@
 import React, { ChangeEvent, ChangeEventHandler } from 'react'
 
-type CustomChangeEventHandler = (value: string, event: ChangeEvent<HTMLInputElement>) => void
+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)[]
+	mask?: string | RegExp | (string | RegExp)[] | NumberConstructor
+	clearable?: boolean
 }