@modul/mbui 0.0.1-beta-pv-50534-fc27fe54 → 0.0.1-beta-pv-50560-3e5e7e6f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.1-beta-pv-50534-fc27fe54",
+  "version": "0.0.1-beta-pv-50560-3e5e7e6f",
   "packageManager": "yarn@3.5.1",
   "main": "src/index.ts",
   "scripts": {
@@ -13,6 +13,8 @@
     "src"
   ],
   "dependencies": {
+    "accounting": "0.4.1",
+    "modul-helpers": "0.1.108",
     "react-datepicker": "4.16.0",
     "react-imask": "7.1.3"
   },

package/src/Base/AmountFormat/AmountFormat.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { validateHelper } from 'modul-helpers'
+import accounting from 'accounting'
+import { CurrencySymbol } from '../CurrencySymbol'
+
+interface AmountFormatProps {
+	value: string | number
+	currency?: string
+	precision?: number
+	def?: string
+	className?: string
+	whiteSpace?: string
+}
+
+//FIXME: def
+const AmountFormat: React.FC<AmountFormatProps> = ({
+	value,
+	currency = 'RUR',
+	precision = 2,
+	def = '',
+	className = '',
+	whiteSpace = '&nbsp;',
+}) => {
+	const clearValue = (value: string) => (value.replace ? value.replace(/[^0-9.,]+/g, '').replace(',', '.') : value)
+
+	const formattedValue = React.useMemo(() => {
+		const numericValue = parseFloat(clearValue(String(value)))
+		return !isNaN(numericValue) ? accounting.formatNumber(numericValue, precision, whiteSpace) : def
+	}, [value, precision, whiteSpace, def])
+
+	//FIXME: возможно просто вернуть null
+	if (validateHelper.isEmpty(value)) {
+		return null
+		// return <span className={className}>{def}</span>
+	}
+
+	//FIXME: dangerouslySetInnerHTML ???
+	return (
+		<span className={className}>
+			{formattedValue}&nbsp;
+			{currency && <CurrencySymbol value={currency} />}
+		</span>
+	)
+}
+
+export default AmountFormat

package/src/Base/AmountFormat/index.ts

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

package/src/Base/AmountInput/AmountInput.tsx

@@ -0,0 +1,127 @@
+import React, { useState, useEffect, forwardRef, ForwardedRef, ChangeEvent, KeyboardEvent, useCallback } from 'react'
+import accounting from 'accounting'
+import { numberHelper } from 'modul-helpers'
+import { calculateStart, cleanValue, parseFloatOrNull } from './utils'
+import { useForwardedRef } from './hooks'
+import { CombinedChangeEventHandler } from './types'
+
+const { trimValidLength } = numberHelper
+
+accounting.settings = {
+	number: {
+		decimal: ',',
+	},
+}
+
+interface IAmountInput extends React.InputHTMLAttributes<HTMLInputElement> {
+	value?: string | number
+	precision?: number
+	onChange?: CombinedChangeEventHandler
+}
+
+const AmountInput = forwardRef<HTMLInputElement, IAmountInput>(
+	(
+		{ onChange, precision = 2, value, type = 'text', ...props }: IAmountInput,
+		ref: ForwardedRef<HTMLInputElement>
+	) => {
+		const innerRef = useForwardedRef(ref)
+		//Состояния для отслеживания текущего значения и позиции курсора
+		const [viewValue, setViewValue] = useState<string>('')
+		const [startPos, setStartPos] = useState<number | null>(null)
+
+		//Функция для обработки и форматирования входного значения
+		const parseValue = useCallback(
+			(val: string | number | undefined): { viewValue: string; startPos: number | null } => {
+				const el = innerRef.current
+				const cleanedValue = cleanValue(val === undefined || val === null ? '' : val.toString(), false)
+				const clean = trimValidLength(cleanedValue, '.', precision)
+				const parsedValue = parseFloatOrNull(clean)
+				const formattedValue = parsedValue ? accounting.formatNumber(parsedValue, precision, ' ') : ''
+
+				// Инициализация стартовой позиции для курсора
+				let parsedStartPos = el?.selectionStart || null
+
+				// Вычисление новой позиции курсора при изменении значения
+				if (parsedValue && el && formattedValue.length !== clean.length) {
+					parsedStartPos = calculateStart(el.selectionStart, clean, formattedValue)
+				}
+
+				// Формирование отформатированного значения для отображения
+				let parsedViewValue = formattedValue
+
+				// Обработка случая, когда значение равно нулю или пусто
+				if (!parsedValue) {
+					if (!/^0[,.]?0*/.test(clean)) {
+						parsedViewValue = ''
+					} else {
+						parsedViewValue = clean.replace('.', ',')
+						if (parsedViewValue === '0' || parsedViewValue === '0,' || parsedViewValue === '0,0') {
+							parsedViewValue = `0,${[...Array(precision)].map(() => '0').join('')}`
+							parsedStartPos = calculateStart(el.selectionStart, clean, parsedViewValue)
+						}
+					}
+				}
+
+				// Возвращение отформатированного значения и позиции курсора
+				return { viewValue: parsedViewValue, startPos: parsedStartPos }
+			},
+			[innerRef, precision]
+		)
+
+		//для обновления значений при изменении входного значения
+		useEffect(() => {
+			const { viewValue: parsedViewValue, startPos: parsedStartPos } = parseValue(value)
+			setViewValue(parsedViewValue)
+			setStartPos(parsedStartPos)
+		}, [value, parseValue])
+
+		// для установки позиции курсора при изменении startPos
+		useEffect(() => {
+			if (startPos !== null && innerRef.current) {
+				innerRef.current.setSelectionRange(startPos, startPos)
+			}
+		}, [startPos, innerRef])
+
+		const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+			const el = innerRef.current
+			const isDeletingKey = e.key === 'Backspace'
+			const inputValue = el?.value || ''
+			const prevCharValue = inputValue[el.selectionStart - 1]
+
+			// Проверка на удаление пробела или десятичного разделителя
+			const isDeletingWhiteSpace = isDeletingKey && el.selectionStart >= 2 && /\s/g.test(prevCharValue)
+			const isDeletingDecimalSeparator = isDeletingKey && prevCharValue === ','
+
+			// Вычисление новой позиции курсора после удаления
+			const newStartPos = isDeletingDecimalSeparator || isDeletingWhiteSpace ? el.selectionStart - 1 : null
+
+			// Установка новой позиции курсора и вызов onChange
+			if (newStartPos !== startPos) {
+				setStartPos(newStartPos)
+			}
+
+			onChange?.(viewValue, e)
+		}
+
+		const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+			const inputValue = e.target.value
+			const { viewValue: parsedViewValue, startPos: parsedStartPos } = parseValue(inputValue)
+			setViewValue(parsedViewValue)
+			setStartPos(parsedStartPos)
+			onChange?.(parsedViewValue, e)
+		}
+
+		return (
+			<input
+				type={type}
+				ref={innerRef}
+				value={viewValue}
+				onKeyDown={handleKeyDown}
+				onChange={handleChange}
+				{...props}
+			/>
+		)
+	}
+)
+
+export default AmountInput

package/src/Base/AmountInput/hooks.ts

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react'
+
+export function useForwardedRef<T>(ref: React.ForwardedRef<T>) {
+	const innerRef = React.useRef<T>(null)
+
+	useEffect(() => {
+		if (!ref) return
+		if (typeof ref === 'function') {
+			ref(innerRef.current)
+		} else {
+			ref.current = innerRef.current
+		}
+	}, [ref])
+
+	return innerRef
+}

package/src/Base/AmountInput/index.ts

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

package/src/Base/AmountInput/types.ts

@@ -0,0 +1,8 @@
+import { ChangeEvent, KeyboardEvent, ChangeEventHandler } from 'react'
+
+type CustomChangeEventHandler = (
+	value: string,
+	e?: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>
+) => void
+
+export type CombinedChangeEventHandler = ChangeEventHandler<HTMLInputElement> & CustomChangeEventHandler

package/src/Base/AmountInput/utils.ts

@@ -0,0 +1,26 @@
+export function cleanValue(val, ignoreSpace = true) {
+	let res = ignoreSpace ? val.replace(/[^0-9.,]+/g, '') : val.replace(/[^0-9., ]+/g, '')
+	res = res.replace(/,/g, '.').replace('-', '')
+	const dotPos = res.indexOf('.')
+	if (dotPos > -1) {
+		const output = res.split('.')
+		res = output.shift() + '.' + output.join('')
+	}
+	return res
+}
+
+export function calculateStart(start, originValue, formattedValue) {
+	const substr = originValue.substring(0, start).replace(/ /g, '')
+	let regex = '^'
+
+	for (let i = 0, len = substr.length; i < len; i++) {
+		regex += substr[i] + ' {0,1}'
+	}
+	const match = new RegExp(regex).exec(formattedValue)
+	return (match && match[0].length) || 0
+}
+
+export function parseFloatOrNull(val) {
+	const result = parseFloat(cleanValue(val))
+	return isNaN(result) ? null : result
+}

package/src/Base/CurrencySymbol/CurrencySymbol.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { currencySymbols } from './enums'
+
+interface CurrencySymbolProps {
+	value: string
+}
+
+const CurrencySymbol: React.FC<CurrencySymbolProps> = ({ value }) => {
+	const symbol = currencySymbols[value] || value
+	const currencyClass = currencySymbols[value] ? 'currency-iso' : ''
+
+	return <span className={currencyClass}>{symbol}</span>
+}
+
+export default CurrencySymbol

package/src/Base/CurrencySymbol/enums.ts

@@ -0,0 +1,7 @@
+export enum currencySymbols {
+	USD = '$',
+	EUR = '€',
+	CNY = '¥',
+	RUB = '₽',
+	RUR = '₽',
+}

package/src/Base/CurrencySymbol/index.ts

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

package/src/Base/Input/Input.tsx

@@ -3,7 +3,7 @@ import { IMaskInput } from 'react-imask'
 import { IInputProps } from './types'
 
 const Input = React.forwardRef<HTMLInputElement, IInputProps>(
-	({ onChange, type = 'text', ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+	({ onChange, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
 		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
 			const val = event.target.value
 			onChange?.(val, event)
@@ -11,7 +11,6 @@ const Input = React.forwardRef<HTMLInputElement, IInputProps>(
 
 		return (
 			<IMaskInput
-				type={type}
 				ref={ref}
 				{...props}
 				onChange={handleChange}

package/src/Base/Input/index.ts

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

package/src/Base/Input/types.ts

@@ -6,5 +6,5 @@ type CombinedChangeEventHandler = ChangeEventHandler<HTMLInputElement> & CustomC
 
 export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	onChange?: CombinedChangeEventHandler
-	mask?: string | RegExp | (string | RegExp)[] | NumberConstructor
+	mask?: string | RegExp | (string | RegExp)[]
 }

package/src/index.ts

@@ -1,6 +1,8 @@
 import { Button } from './Base/Buttons'
 import { TextLink } from './Base/Links'
 import { DatePicker } from './DatePicker'
-import { Input, InputClearable } from './Base/Input'
+import { Input } from './Base/Input'
+import { AmountFormat } from './Base/AmountFormat'
+import { AmountInput } from './Base/AmountInput'
 
-export { Button, TextLink, DatePicker, Input, InputClearable }
+export { Button, TextLink, DatePicker, Input, AmountFormat, AmountInput }

package/src/Base/Input/InputClearable.tsx

@@ -1,41 +0,0 @@
-import React, { ChangeEvent, ForwardedRef, useState } from 'react'
-import { IMaskInput } from 'react-imask'
-import { IInputProps } from './types'
-
-const InputClearable = React.forwardRef<HTMLInputElement, IInputProps>(
-	({ onChange, value = '', type = 'text', ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
-		const [inputValue, setInputValue] = useState(value)
-
-		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-			const val = event.target.value
-			setInputValue(val)
-			onChange?.(val, event)
-		}
-
-		const handleClearClick = (): void => {
-			setInputValue('')
-		}
-
-		//TODO: fix style
-		return (
-			<div className="input_wrap_clear">
-				<IMaskInput
-					type={type}
-					ref={ref}
-					{...props}
-					value={inputValue}
-					onChange={handleChange}
-				/>
-				{inputValue && (
-					<a
-						className="input_clear icon-cancel"
-						onClick={handleClearClick}
-						style={{ visibility: 'initial' }}
-					/>
-				)}
-			</div>
-		)
-	}
-)
-
-export default InputClearable