@etsoo/materialui 1.0.62 → 1.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/TwoFieldInput.js +14 -4
  2. package/package.json +4 -4
  3. package/src/TwoFieldInput.tsx +11 -3
package/lib/TwoFieldInput.js CHANGED
@@ -2,7 +2,7 @@ import { Input, InputAdornment } from '@mui/material';
2
2
  import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
3
3
  import { useDimensions } from '@etsoo/react';
4
4
  import React from 'react';
5
- import { DomUtils } from '@etsoo/shared';
5
+ import { DateUtils, DomUtils } from '@etsoo/shared';
6
6
  import { InputField } from './InputField';
7
7
  /**
8
8
  * TwoField Input
@@ -10,7 +10,6 @@ import { InputField } from './InputField';
10
10
  * @returns Component
11
11
  */
12
12
  export function TwoFieldInput(props) {
13
- var _a, _b;
14
13
  // Destruct
15
14
  const { name, inputProps, type = inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputMode, values, onValuesChange, onChange, onInput, ...rest } = props;
16
15
  // Local values
@@ -40,14 +39,25 @@ export function TwoFieldInput(props) {
40
39
  if (onChange)
41
40
  onChange(event);
42
41
  };
42
+ const formatValue = (v, type) => {
43
+ if (v == null)
44
+ return '';
45
+ if (typeof v === 'number')
46
+ return v;
47
+ if (type === 'date')
48
+ return DateUtils.formatForInput(v);
49
+ if (type === 'datetime-local')
50
+ return DateUtils.formatForInput(v, true);
51
+ return v;
52
+ };
43
53
  // Layout
44
- 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: {
54
+ return (React.createElement(InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
45
55
  endAdornment: (React.createElement(InputAdornment, { position: "end", sx: {
46
56
  display: 'flex',
47
57
  alignItems: 'center',
48
58
  gap: 1
49
59
  } },
50
60
  React.createElement(ArrowRightAltIcon, null),
51
- 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 })))
61
+ React.createElement(Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })))
52
62
  }, onInput: onInput, onChange: handleChange, ...rest }));
53
63
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.0.62",
3
+ "version": "1.0.64",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -54,7 +54,7 @@
54
54
  "@etsoo/appscript": "^1.3.29",
55
55
  "@etsoo/notificationbase": "^1.1.14",
56
56
  "@etsoo/react": "^1.6.24",
57
- "@etsoo/shared": "^1.1.73",
57
+ "@etsoo/shared": "^1.1.74",
58
58
  "@mui/icons-material": "^5.10.9",
59
59
  "@mui/material": "^5.10.13",
60
60
  "@types/pica": "^9.0.1",
@@ -89,8 +89,8 @@
89
89
  "eslint-config-airbnb-base": "^15.0.0",
90
90
  "eslint-plugin-import": "^2.26.0",
91
91
  "eslint-plugin-react": "^7.31.10",
92
- "jest": "^29.3.0",
93
- "jest-environment-jsdom": "^29.3.0",
92
+ "jest": "^29.3.1",
93
+ "jest-environment-jsdom": "^29.3.1",
94
94
  "ts-jest": "^29.0.3",
95
95
  "typescript": "^4.8.4"
96
96
  }
package/src/TwoFieldInput.tsx CHANGED
@@ -2,7 +2,7 @@ import { Input, InputAdornment } from '@mui/material';
2
2
  import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
3
3
  import { useDimensions } from '@etsoo/react';
4
4
  import React from 'react';
5
- import { DomUtils } from '@etsoo/shared';
5
+ import { DateUtils, DomUtils } from '@etsoo/shared';
6
6
  import { InputField, InputFieldProps } from './InputField';
7
7
 
8
8
  type ValueType = string | number | Date | null | undefined;
@@ -80,12 +80,20 @@ export function TwoFieldInput(props: TwoFieldInputProps) {
80
80
  if (onChange) onChange(event);
81
81
  };
82
82
 
83
+ const formatValue = (v: ValueType, type?: string) => {
84
+ if (v == null) return '';
85
+ if (typeof v === 'number') return v;
86
+ if (type === 'date') return DateUtils.formatForInput(v);
87
+ if (type === 'datetime-local') return DateUtils.formatForInput(v, true);
88
+ return v;
89
+ };
90
+
83
91
  // Layout
84
92
  return (
85
93
  <InputField
86
94
  name={`${name}-start`}
87
95
  type={type}
88
- defaultValue={localValues[0] ?? ''}
96
+ value={formatValue(localValues[0], type)}
89
97
  ref={dimensions[0][0]}
90
98
  inputProps={inputProps}
91
99
  InputProps={{
@@ -102,7 +110,7 @@ export function TwoFieldInput(props: TwoFieldInputProps) {
102
110
  <Input
103
111
  type={type}
104
112
  name={`${name}-end`}
105
- defaultValue={localValues[1] ?? ''}
113
+ value={formatValue(localValues[1], type)}
106
114
  disableUnderline
107
115
  onInput={onInput}
108
116
  onChange={handleChange}