@modul/mbui 0.0.1-beta-pv-50560-3e5e7e6f → 0.0.1-beta-pv-50520-a5f245c9

package/package.json

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

package/src/Base/Checkbox/Checkbox.tsx

@@ -0,0 +1,66 @@
+import React, { FC, InputHTMLAttributes, ReactNode } from 'react'
+import classnames from 'classnames'
+interface ICheckbox extends InputHTMLAttributes<HTMLInputElement> {
+	switcher?: boolean
+	children?: ReactNode
+	childrenWrapperClassName?: string
+	labelClassName?: string
+	iconId?: string
+	onClick?: () => void
+	disabled?: boolean
+}
+
+const Checkbox: FC<ICheckbox> = ({
+	id,
+	name,
+	checked,
+	onChange,
+	onClick,
+	value = 'on',
+	switcher,
+	onBlur,
+	onFocus,
+	iconId,
+	children,
+	childrenWrapperClassName,
+	labelClassName,
+	disabled,
+}) => {
+	const labelClasses = classnames('label-check', labelClassName, { _switcher: switcher })
+
+	const renderIcon = iconId && (
+		<i
+			className="icon"
+			id={iconId}
+		/>
+	)
+
+	const renderChildren = children && <span className={childrenWrapperClassName}>{children}</span>
+
+	return (
+		<span onClick={onClick}>
+			<input
+				type="checkbox"
+				checked={checked}
+				name={name}
+				id={id}
+				onChange={onChange}
+				value={value}
+				onBlur={onBlur}
+				onFocus={onFocus}
+				disabled={disabled}
+			/>
+
+			<label
+				htmlFor={id}
+				className={labelClasses}
+				data-checked={checked}
+			>
+				{renderIcon}
+				{renderChildren}
+			</label>
+		</span>
+	)
+}
+
+export default Checkbox

package/src/Base/Checkbox/index.ts

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

package/src/index.ts

@@ -2,7 +2,6 @@ import { Button } from './Base/Buttons'
 import { TextLink } from './Base/Links'
 import { DatePicker } from './DatePicker'
 import { Input } from './Base/Input'
-import { AmountFormat } from './Base/AmountFormat'
-import { AmountInput } from './Base/AmountInput'
+import { Checkbox } from './Base/Checkbox'
 
-export { Button, TextLink, DatePicker, Input, AmountFormat, AmountInput }
+export { Button, TextLink, DatePicker, Input, Checkbox }

package/src/Base/AmountFormat/AmountFormat.tsx

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

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

package/src/Base/AmountInput/AmountInput.tsx

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

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

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

package/src/Base/AmountInput/types.ts

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

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

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

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

package/src/Base/CurrencySymbol/index.ts

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