armtek-uikit-react 1.0.197 → 1.0.198
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.
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"armtek-uikit-react","version":"1.0.
|
|
1
|
+
{"name":"armtek-uikit-react","version":"1.0.198","description":"Armtek UIKit for React","main":"cjs/index.js","module":"esm/index.js","types":"esm/index.d.ts","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"clsx":"^2.0.0","rc-slider":"^10.2.1","react":"<=18.0.0","react-datepicker":"^4.16.0","react-dom":"<=18.0.0","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"<=18.0.0","react-dom":"<=18.0.0"},"engines":{"node":">=14.0.0"},"scripts":{"pub":"npm version patch && npm publish"}}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { TextFieldProps } from '../TextField/TextField';
|
|
2
|
-
type OwnProps = {
|
|
2
|
+
type OwnProps<ValueType = number | number[]> = {
|
|
3
3
|
min: number;
|
|
4
4
|
max: number;
|
|
5
|
-
value?:
|
|
6
|
-
onChange?: (value:
|
|
5
|
+
value?: ValueType;
|
|
6
|
+
onChange?: (value: ValueType) => void;
|
|
7
7
|
labelStart?: string;
|
|
8
8
|
labelEnd?: string;
|
|
9
|
-
defaultValue?:
|
|
9
|
+
defaultValue?: ValueType;
|
|
10
|
+
range?: boolean;
|
|
10
11
|
};
|
|
11
|
-
export type IntervalProps = OwnProps & Omit<TextFieldProps, keyof OwnProps>;
|
|
12
|
-
declare
|
|
12
|
+
export type IntervalProps<ValueType = number | number[]> = OwnProps<ValueType> & Omit<TextFieldProps, keyof OwnProps>;
|
|
13
|
+
declare function Interval<ValueType = number | number[]>(props: IntervalProps<ValueType>): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export default Interval;
|
|
@@ -8,8 +8,8 @@ var _react = require("react");
|
|
|
8
8
|
var _TextField = require("../TextField/TextField");
|
|
9
9
|
var _HelperText = _interopRequireDefault(require("../../HelperText/HelperText"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
function Interval(props) {
|
|
12
|
+
const {
|
|
13
13
|
value,
|
|
14
14
|
defaultValue,
|
|
15
15
|
labelStart,
|
|
@@ -20,11 +20,30 @@ const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
20
20
|
disabled,
|
|
21
21
|
min = 0,
|
|
22
22
|
max = 0,
|
|
23
|
+
range,
|
|
23
24
|
...inputProps
|
|
24
25
|
} = props;
|
|
25
26
|
const [focused, setFocused] = (0, _react.useState)(false);
|
|
26
27
|
const [currentMin, setCurrentMin] = (0, _react.useState)(min);
|
|
27
|
-
const [currentMax, setCurrentMax] = (0, _react.useState)(max);
|
|
28
|
+
const [currentMax, setCurrentMax] = (0, _react.useState)(!range ? min : max);
|
|
29
|
+
const handleChange = (v, type) => {
|
|
30
|
+
if (type === 'max') {
|
|
31
|
+
setCurrentMax(v);
|
|
32
|
+
onChange == null || onChange([Array.isArray(value) && value.length === 2 ? value[0] : min, v]);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (!range) {
|
|
36
|
+
setCurrentMax(v);
|
|
37
|
+
if (onChange) onChange(v);
|
|
38
|
+
} else {
|
|
39
|
+
v = v < min ? min : v;
|
|
40
|
+
setCurrentMin(v);
|
|
41
|
+
if (onChange) {
|
|
42
|
+
const changeValue = [v, Array.isArray(value) && value.length === 2 ? value[1] : max];
|
|
43
|
+
onChange(changeValue);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
};
|
|
28
47
|
const handleFocus = () => {
|
|
29
48
|
setFocused(true);
|
|
30
49
|
};
|
|
@@ -32,16 +51,16 @@ const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
32
51
|
setFocused(false);
|
|
33
52
|
};
|
|
34
53
|
const handleMin = e => {
|
|
35
|
-
let val =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
54
|
+
let val = 0;
|
|
55
|
+
if (e.target.value) val = parseInt(e.target.value);
|
|
56
|
+
if (val > max) return;
|
|
57
|
+
handleChange(val, 'min');
|
|
39
58
|
};
|
|
40
59
|
const handleMax = e => {
|
|
41
|
-
let val =
|
|
60
|
+
let val = max;
|
|
61
|
+
if (e.target.value) val = parseInt(e.target.value);
|
|
42
62
|
val = val > max ? max : val;
|
|
43
|
-
|
|
44
|
-
if (onChange) onChange([Array.isArray(value) && value.length === 2 ? value[0] : min, val]);
|
|
63
|
+
handleChange(val, 'max');
|
|
45
64
|
};
|
|
46
65
|
let realMin = currentMin;
|
|
47
66
|
let realMax = currentMax;
|
|
@@ -49,6 +68,7 @@ const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
49
68
|
realMin = value[0];
|
|
50
69
|
realMax = value[1];
|
|
51
70
|
}
|
|
71
|
+
if (!range) realMin = value || currentMax;
|
|
52
72
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
53
73
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
54
74
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldContainer, {
|
|
@@ -71,7 +91,7 @@ const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
71
91
|
focused: true,
|
|
72
92
|
onChange: handleMin
|
|
73
93
|
})
|
|
74
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
94
|
+
}), range && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
75
95
|
className: 'arm-interval__item',
|
|
76
96
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldInput, {
|
|
77
97
|
...inputProps,
|
|
@@ -93,6 +113,6 @@ const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
93
113
|
})]
|
|
94
114
|
})
|
|
95
115
|
});
|
|
96
|
-
}
|
|
116
|
+
}
|
|
97
117
|
var _default = exports.default = Interval;
|
|
98
118
|
module.exports = exports.default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IntervalProps } from './Interval';
|
|
2
2
|
import { SliderProps } from '../../Slider/Slider';
|
|
3
|
-
type PropsType = Omit<IntervalProps
|
|
4
|
-
declare
|
|
3
|
+
type PropsType<ValueType = number | number[]> = Omit<IntervalProps<ValueType>, 'color'> & Partial<Pick<SliderProps<ValueType>, 'color'>>;
|
|
4
|
+
declare function IntervalSlide<ValueType = number | number[]>(props: PropsType<ValueType>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export default IntervalSlide;
|
|
@@ -8,41 +8,42 @@ var _Interval = _interopRequireDefault(require("./Interval"));
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _Slider = _interopRequireDefault(require("../../Slider/Slider"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
|
|
11
|
+
function IntervalSlide(props) {
|
|
12
12
|
const {
|
|
13
13
|
onChange,
|
|
14
14
|
color,
|
|
15
15
|
...restProps
|
|
16
16
|
} = props;
|
|
17
|
-
const
|
|
17
|
+
const defaultValue = restProps.defaultValue || (restProps.range ? [restProps.min, restProps.max] : 0);
|
|
18
|
+
const [currentValue, setCurrentValue] = (0, _react.useState)(defaultValue);
|
|
18
19
|
const handleChange = value => {
|
|
19
|
-
setValue(value);
|
|
20
20
|
if (onChange) onChange(value);
|
|
21
21
|
};
|
|
22
22
|
const handleSlide = value => {
|
|
23
|
-
|
|
23
|
+
handleChange(value);
|
|
24
|
+
setCurrentValue(value);
|
|
24
25
|
};
|
|
25
26
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
26
27
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
27
28
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Interval.default, {
|
|
28
|
-
value:
|
|
29
|
+
value: currentValue,
|
|
29
30
|
...restProps,
|
|
30
|
-
onChange:
|
|
31
|
+
onChange: handleSlide
|
|
31
32
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
32
33
|
className: 'arm-intervalslide__slider',
|
|
33
34
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
|
|
34
|
-
range: true,
|
|
35
35
|
min: props.min,
|
|
36
36
|
max: props.max,
|
|
37
37
|
disabled: props.disabled,
|
|
38
38
|
color: color,
|
|
39
|
-
value: restProps.value ||
|
|
39
|
+
value: restProps.value || currentValue,
|
|
40
40
|
size: props.size,
|
|
41
|
-
onChange: handleSlide
|
|
41
|
+
onChange: handleSlide,
|
|
42
|
+
range: props.range
|
|
42
43
|
})
|
|
43
44
|
})]
|
|
44
45
|
})
|
|
45
46
|
});
|
|
46
|
-
}
|
|
47
|
+
}
|
|
47
48
|
var _default = exports.default = IntervalSlide;
|
|
48
49
|
module.exports = exports.default;
|
package/ui/Slider/Slider.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import './style.scss';
|
|
2
2
|
import { SliderProps as RcSliderProps } from 'rc-slider/lib/Slider';
|
|
3
3
|
import { ColorStatusType, ColorType, SizeType } from '../../types/theme';
|
|
4
|
-
export type SliderProps = {
|
|
4
|
+
export type SliderProps<ValueType = number | number[]> = {
|
|
5
5
|
size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
|
|
6
6
|
color?: Exclude<ColorType, 'neutral'> | Exclude<ColorStatusType, 'info'>;
|
|
7
|
-
} & Omit<RcSliderProps
|
|
8
|
-
declare
|
|
7
|
+
} & Omit<RcSliderProps<ValueType>, 'size'>;
|
|
8
|
+
declare function Slider<ValueType = number | number[]>(props: SliderProps<ValueType>): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export default Slider;
|
package/ui/Slider/Slider.js
CHANGED
|
@@ -8,7 +8,7 @@ require("./style.scss");
|
|
|
8
8
|
var _HelperText = _interopRequireDefault(require("../HelperText/HelperText"));
|
|
9
9
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
|
|
11
|
+
function Slider(props) {
|
|
12
12
|
const {
|
|
13
13
|
size = 'large',
|
|
14
14
|
color = 'primary',
|
|
@@ -35,6 +35,6 @@ const Slider = props => {
|
|
|
35
35
|
})]
|
|
36
36
|
})
|
|
37
37
|
});
|
|
38
|
-
}
|
|
38
|
+
}
|
|
39
39
|
var _default = exports.default = Slider;
|
|
40
40
|
module.exports = exports.default;
|