@symply.io/basic-components 1.5.5-alpha.2 → 1.5.5-alpha.4

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 (5) hide show
  1. package/NumberInput/index.js +2 -2
  2. package/NumberInput/types.d.ts +2 -1
  3. package/NumberInput/useInteractions.d.ts +1 -0
  4. package/NumberInput/useInteractions.js +17 -5
  5. package/package.json +1 -1
package/NumberInput/index.js CHANGED
@@ -40,8 +40,8 @@ function NumberInput(props) {
40
40
  decimals: decimals,
41
41
  integerOnly: integerOnly,
42
42
  onChange: onChange
43
- }), typing = _f.typing, exceedError = _f.exceedError, tooltipOpen = _f.tooltipOpen, roundedValue = _f.roundedValue, handleBlur = _f.handleBlur, handleFocus = _f.handleFocus, handleChange = _f.handleChange, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip, handleKeyboardEvent = _f.handleKeyboardEvent;
43
+ }), typing = _f.typing, exceedError = _f.exceedError, tooltipOpen = _f.tooltipOpen, roundedValue = _f.roundedValue, handleBlur = _f.handleBlur, handleFocus = _f.handleFocus, handleClick = _f.handleClick, handleChange = _f.handleChange, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip, handleKeyboardEvent = _f.handleKeyboardEvent;
44
44
  var valueDisplay = useMemo(function () { return (typing ? value : roundedValue); }, [typing, value, roundedValue]);
45
- return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : valueDisplay, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
45
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : valueDisplay, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent, onClick: handleClick } }, rest)) })) })));
46
46
  }
47
47
  export default NumberInput;
package/NumberInput/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties, ChangeEvent, FocusEventHandler, KeyboardEventHandler } from "react";
1
+ import { CSSProperties, ChangeEvent, MouseEventHandler, FocusEventHandler, KeyboardEventHandler } from "react";
2
2
  import { TextFieldProps } from "@mui/material/TextField";
3
3
  export interface InteractionStates {
4
4
  typing: boolean;
@@ -7,6 +7,7 @@ export interface InteractionStates {
7
7
  roundedValue: string;
8
8
  exceedError: boolean;
9
9
  handleKeyboardEvent: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
10
+ handleClick: MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
10
11
  handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
11
12
  handleFocus: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
12
13
  handleBlur: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
package/NumberInput/useInteractions.d.ts CHANGED
@@ -7,6 +7,7 @@ declare function useInteractions(props: InteractionProps): {
7
7
  roundedValue: string;
8
8
  handleBlur: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
9
9
  handleFocus: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
10
+ handleClick: import("react").MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
10
11
  handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
11
12
  onOpenTooltip: () => void;
12
13
  onCloseTooltip: () => void;
package/NumberInput/useInteractions.js CHANGED
@@ -26,7 +26,7 @@ function useInteractions(props) {
26
26
  }, [value, decimals]);
27
27
  var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
28
28
  var handleKeyboardEvent = useCallback(function (event) {
29
- var key = event.key;
29
+ var key = event.key, target = event.target;
30
30
  if (key === "e") {
31
31
  event.preventDefault();
32
32
  }
@@ -45,7 +45,12 @@ function useInteractions(props) {
45
45
  else if (String(value).includes(".") && decimals > 0) {
46
46
  var decimalPointIndex = String(value).lastIndexOf(".");
47
47
  var decimalStrLen = String(value).split(".")[1].length;
48
- console.log({ cursorIndex: cursorIndex, decimalPointIndex: decimalPointIndex, decimalStrLen: decimalStrLen });
48
+ console.log({
49
+ cursorIndex: cursorIndex,
50
+ decimalPointIndex: decimalPointIndex,
51
+ decimalStrLen: decimalStrLen,
52
+ v: target.value
53
+ });
49
54
  if (cursorIndex && decimalPointIndex <= cursorIndex) {
50
55
  if (![
51
56
  "Backspace",
@@ -74,10 +79,16 @@ function useInteractions(props) {
74
79
  return;
75
80
  onChange(val);
76
81
  }, [onChange, minValue, integerOnly]);
77
- var handleFocus = useCallback(function (event) {
82
+ var handleClick = useCallback(function (event) {
83
+ console.log({
84
+ cts: event.currentTarget.selectionStart,
85
+ cte: event.currentTarget.selectionEnd
86
+ });
87
+ setCursorIndex(event.currentTarget.selectionStart || 0);
88
+ }, []);
89
+ var handleFocus = useCallback(function () {
78
90
  setTyping(true);
79
- setCursorIndex(event.target.selectionStart || 0);
80
- }, [value]);
91
+ }, []);
81
92
  var handleBlur = useCallback(function () {
82
93
  var excludedValue = [
83
94
  null,
@@ -112,6 +123,7 @@ function useInteractions(props) {
112
123
  roundedValue: roundedValue,
113
124
  handleBlur: handleBlur,
114
125
  handleFocus: handleFocus,
126
+ handleClick: handleClick,
115
127
  handleChange: handleChange,
116
128
  onOpenTooltip: onOpenTooltip,
117
129
  onCloseTooltip: onCloseTooltip,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.5.5-alpha.2",
3
+ "version": "1.5.5-alpha.4",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",