@modul/mbui 0.0.0 → 0.0.1-beta-pv-50534-962f5f9d

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.0",
+  "version": "0.0.1-beta-pv-50534-962f5f9d",
   "packageManager": "yarn@3.5.1",
   "main": "src/index.ts",
   "scripts": {
     "build:demo": "webpack --config ./demo/webpack.config.js",
+    "dev:demo": "webpack serve --config ./demo/webpack.config.js --open",
     "demo": "yarn dlx http-server demo/dist -so -c-1"
   },
   "lintConfig": "./.eslintrc.json",
@@ -12,7 +13,8 @@
     "src"
   ],
   "dependencies": {
-    "react-datepicker": "4.16.0"
+    "react-datepicker": "4.16.0",
+    "react-imask": "7.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
@@ -52,7 +54,8 @@
     "tslib": "^2.5.0",
     "typescript": "4.4.4",
     "webpack": "^5.82.1",
-    "webpack-cli": "^5.1.1"
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "4.15.1"
   },
   "peerDependencies": {
     "classnames": "^2.3.2",

package/src/Base/Input/Input.tsx

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

package/src/Base/Input/InputClearable.tsx

@@ -0,0 +1,39 @@
+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('')
+		}
+
+		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}
+					/>
+				)}
+			</div>
+		)
+	}
+)
+
+export default InputClearable

package/src/Base/Input/index.ts

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

package/src/Base/Input/types.ts

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

package/src/index.ts

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