@etsoo/materialui 1.0.60 → 1.0.61

package/lib/NotifierMU.js

@@ -1,4 +1,5 @@
 import { NotificationAlign, NotificationMessageType, NotificationType } from '@etsoo/notificationbase';
+import { DomUtils } from '@etsoo/shared';
 import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, Slider, Snackbar, styled, Switch, TextField, Typography } from '@mui/material';
 import { Error, Info, Help, Warning, Done } from '@mui/icons-material';
 import React from 'react';
@@ -134,33 +135,18 @@ export class NotificationMU extends NotificationReact {
                 if (inputs && value == null)
                     value = event.currentTarget.form;
                 if (input) {
-                    if (type === 'date') {
-                        const dateValue = input.valueAsDate;
-                        if (dateValue == null && input.required) {
-                            input.focus();
-                            return false;
-                        }
-                        result = this.onReturn(dateValue);
-                    }
-                    else if (type === 'number') {
-                        const numberValue = input.valueAsNumber;
-                        if (isNaN(numberValue) && input.required) {
-                            input.focus();
-                            return false;
-                        }
-                        result = this.onReturn(numberValue);
-                    }
-                    else if (type === 'switch') {
+                    if (type === 'switch') {
                         const boolValue = input.value === 'true';
                         result = this.onReturn(boolValue);
                     }
                     else {
-                        const textValue = input.value.trim();
-                        if (textValue === '' && input.required) {
+                        const inputValue = DomUtils.getInputValue(input);
+                        if ((inputValue == null || inputValue === '') &&
+                            input.required) {
                             input.focus();
                             return false;
                         }
-                        result = this.onReturn(textValue);
+                        result = this.onReturn(inputValue);
                     }
                 }
                 else if (value != null) {

package/lib/TwoFieldInput.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { InputFieldProps } from './InputField';
+declare type ValueType = string | number | Date | null | undefined;
+/**
+ * TwoField Input props
+ */
+export declare type TwoFieldInputProps = Omit<InputFieldProps, 'InputProps' | 'value'> & {
+    /**
+     * Values
+     */
+    values?: unknown | [ValueType, ValueType];
+    /**
+     * On values change, return false to prevent further onChange handler
+     */
+    onValuesChange?: (values: [ValueType, ValueType]) => boolean | void | Promise<boolean | void>;
+};
+/**
+ * TwoField Input
+ * @param props Props
+ * @returns Component
+ */
+export declare function TwoFieldInput(props: TwoFieldInputProps): JSX.Element;
+export {};

package/lib/TwoFieldInput.js

@@ -0,0 +1,53 @@
+import { Input, InputAdornment } from '@mui/material';
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
+import { useDimensions } from '@etsoo/react';
+import React from 'react';
+import { DomUtils } from '@etsoo/shared';
+import { InputField } from './InputField';
+/**
+ * TwoField Input
+ * @param props Props
+ * @returns Component
+ */
+export function TwoFieldInput(props) {
+    var _a, _b;
+    // Destruct
+    const { name, inputProps, type = inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputMode, values, onValuesChange, onChange, onInput, ...rest } = props;
+    // Local values
+    const localValues = values == null
+        ? [null, null]
+        : Array.isArray(values)
+            ? values
+            : [values, null];
+    // Ref
+    const valueRef = React.useRef(localValues);
+    // Watch container
+    const { dimensions } = useDimensions(1, (target, rect) => {
+        const width = (rect.width - 64) / 2;
+        const inputs = target.querySelectorAll('input');
+        inputs[0].style.width = `${width}px`;
+        inputs[1].parentElement.style.width = `${width}px`;
+    }, 0);
+    // Handle change
+    const handleChange = (event) => {
+        const value = DomUtils.getInputValue(event.target);
+        const index = event.target.name.endsWith('-start') ? 0 : 1;
+        valueRef.current[index] = value;
+        if (onValuesChange) {
+            if (onValuesChange(valueRef.current) === false)
+                return;
+        }
+        if (onChange)
+            onChange(event);
+    };
+    // Layout
+    return (React.createElement(InputField, { name: `${name}-start`, type: type, defaultValue: (_a = localValues[0]) !== null && _a !== void 0 ? _a : '', ref: dimensions[0][0], inputProps: inputProps, InputProps: {
+            endAdornment: (React.createElement(InputAdornment, { position: "end", sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1
+                } },
+                React.createElement(ArrowRightAltIcon, null),
+                React.createElement(Input, { type: type, name: `${name}-end`, defaultValue: (_b = localValues[1]) !== null && _b !== void 0 ? _b : '', disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })))
+        }, onInput: onInput, onChange: handleChange, ...rest }));
+}

package/lib/index.d.ts

@@ -72,6 +72,7 @@ export * from './TabBox';
 export * from './TableEx';
 export * from './TextFieldEx';
 export * from './Tiplist';
+export * from './TwoFieldInput';
 export * from './TooltipClick';
 export * from './UserAvatar';
 export * from './UserAvatarEditor';

package/lib/index.js

@@ -72,6 +72,7 @@ export * from './TabBox';
 export * from './TableEx';
 export * from './TextFieldEx';
 export * from './Tiplist';
+export * from './TwoFieldInput';
 export * from './TooltipClick';
 export * from './UserAvatar';
 export * from './UserAvatarEditor';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.60",
+    "version": "1.0.61",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,12 +51,12 @@
         "@emotion/css": "^11.10.5",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@etsoo/appscript": "^1.3.28",
-        "@etsoo/notificationbase": "^1.1.13",
-        "@etsoo/react": "^1.6.23",
-        "@etsoo/shared": "^1.1.71",
+        "@etsoo/appscript": "^1.3.29",
+        "@etsoo/notificationbase": "^1.1.14",
+        "@etsoo/react": "^1.6.24",
+        "@etsoo/shared": "^1.1.73",
         "@mui/icons-material": "^5.10.9",
-        "@mui/material": "^5.10.12",
+        "@mui/material": "^5.10.13",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.25",
@@ -83,14 +83,14 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@types/jest": "^29.2.2",
-        "@typescript-eslint/eslint-plugin": "^5.42.0",
-        "@typescript-eslint/parser": "^5.42.0",
-        "eslint": "^8.26.0",
+        "@typescript-eslint/eslint-plugin": "^5.42.1",
+        "@typescript-eslint/parser": "^5.42.1",
+        "eslint": "^8.27.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-react": "^7.31.10",
-        "jest": "^29.2.2",
-        "jest-environment-jsdom": "^29.2.2",
+        "jest": "^29.3.0",
+        "jest-environment-jsdom": "^29.3.0",
         "ts-jest": "^29.0.3",
         "typescript": "^4.8.4"
     }

package/src/NotifierMU.tsx

@@ -4,7 +4,7 @@ import {
     NotificationRenderProps,
     NotificationType
 } from '@etsoo/notificationbase';
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, DomUtils } from '@etsoo/shared';
 import {
     Alert,
     AlertColor,
@@ -291,30 +291,19 @@ export class NotificationMU extends NotificationReact {
                 if (inputs && value == null) value = event.currentTarget.form;
 
                 if (input) {
-                    if (type === 'date') {
-                        const dateValue = input.valueAsDate;
-                        if (dateValue == null && input.required) {
-                            input.focus();
-                            return false;
-                        }
-                        result = this.onReturn(dateValue);
-                    } else if (type === 'number') {
-                        const numberValue = input.valueAsNumber;
-                        if (isNaN(numberValue) && input.required) {
-                            input.focus();
-                            return false;
-                        }
-                        result = this.onReturn(numberValue);
-                    } else if (type === 'switch') {
+                    if (type === 'switch') {
                         const boolValue = input.value === 'true';
                         result = this.onReturn(boolValue);
                     } else {
-                        const textValue = input.value.trim();
-                        if (textValue === '' && input.required) {
+                        const inputValue = DomUtils.getInputValue(input);
+                        if (
+                            (inputValue == null || inputValue === '') &&
+                            input.required
+                        ) {
                             input.focus();
                             return false;
                         }
-                        result = this.onReturn(textValue);
+                        result = this.onReturn(inputValue);
                     }
                 } else if (value != null) {
                     result = this.onReturn(value);

package/src/TwoFieldInput.tsx

@@ -0,0 +1,119 @@
+import { Input, InputAdornment } from '@mui/material';
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
+import { useDimensions } from '@etsoo/react';
+import React from 'react';
+import { DomUtils } from '@etsoo/shared';
+import { InputField, InputFieldProps } from './InputField';
+
+type ValueType = string | number | Date | null | undefined;
+
+/**
+ * TwoField Input props
+ */
+export type TwoFieldInputProps = Omit<
+    InputFieldProps,
+    'InputProps' | 'value'
+> & {
+    /**
+     * Values
+     */
+    values?: unknown | [ValueType, ValueType];
+
+    /**
+     * On values change, return false to prevent further onChange handler
+     */
+    onValuesChange?: (
+        values: [ValueType, ValueType]
+    ) => boolean | void | Promise<boolean | void>;
+};
+
+/**
+ * TwoField Input
+ * @param props Props
+ * @returns Component
+ */
+export function TwoFieldInput(props: TwoFieldInputProps) {
+    // Destruct
+    const {
+        name,
+        inputProps,
+        type = inputProps?.inputMode,
+        values,
+        onValuesChange,
+        onChange,
+        onInput,
+        ...rest
+    } = props;
+
+    // Local values
+    const localValues: [ValueType, ValueType] =
+        values == null
+            ? [null, null]
+            : Array.isArray(values)
+            ? (values as [ValueType, ValueType])
+            : [values as ValueType, null];
+
+    // Ref
+    const valueRef = React.useRef<[ValueType, ValueType]>(localValues);
+
+    // Watch container
+    const { dimensions } = useDimensions(
+        1,
+        (target, rect) => {
+            const width = (rect.width - 64) / 2;
+            const inputs = target.querySelectorAll('input');
+            inputs[0].style.width = `${width}px`;
+            inputs[1].parentElement!.style.width = `${width}px`;
+        },
+        0
+    );
+
+    // Handle change
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = DomUtils.getInputValue(event.target);
+        const index = event.target.name.endsWith('-start') ? 0 : 1;
+        valueRef.current[index] = value;
+
+        if (onValuesChange) {
+            if (onValuesChange(valueRef.current) === false) return;
+        }
+        if (onChange) onChange(event);
+    };
+
+    // Layout
+    return (
+        <InputField
+            name={`${name}-start`}
+            type={type}
+            defaultValue={localValues[0] ?? ''}
+            ref={dimensions[0][0]}
+            inputProps={inputProps}
+            InputProps={{
+                endAdornment: (
+                    <InputAdornment
+                        position="end"
+                        sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1
+                        }}
+                    >
+                        <ArrowRightAltIcon />
+                        <Input
+                            type={type}
+                            name={`${name}-end`}
+                            defaultValue={localValues[1] ?? ''}
+                            disableUnderline
+                            onInput={onInput}
+                            onChange={handleChange}
+                            inputProps={inputProps}
+                        />
+                    </InputAdornment>
+                )
+            }}
+            onInput={onInput}
+            onChange={handleChange}
+            {...rest}
+        />
+    );
+}

package/src/index.ts

@@ -75,6 +75,7 @@ export * from './TabBox';
 export * from './TableEx';
 export * from './TextFieldEx';
 export * from './Tiplist';
+export * from './TwoFieldInput';
 export * from './TooltipClick';
 export * from './UserAvatar';
 export * from './UserAvatarEditor';