armtek-uikit-react 1.0.2 → 1.0.3
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/lib/Adornment/package.json +7 -0
- package/lib/Alert/package.json +7 -0
- package/lib/Avatar/package.json +7 -0
- package/lib/AvatarGroup/package.json +6 -0
- package/lib/Badge/package.json +7 -0
- package/lib/Button/package.json +7 -7
- package/lib/ButtonGroup/package.json +6 -0
- package/lib/ButtonIcon/package.json +6 -0
- package/lib/Card/package.json +7 -0
- package/lib/Checkbox/package.json +6 -0
- package/lib/Chip/package.json +7 -0
- package/lib/DateField/package.json +6 -0
- package/lib/DatePicker/package.json +6 -0
- package/lib/DateService/package.json +6 -0
- package/lib/HelperText/package.json +6 -0
- package/lib/Interval/package.json +6 -0
- package/lib/IntervalSlide/package.json +6 -0
- package/lib/ListItem/package.json +6 -0
- package/lib/Loader/package.json +7 -0
- package/lib/Logo/package.json +7 -0
- package/lib/Password/package.json +6 -0
- package/lib/Period/package.json +6 -0
- package/lib/PeriodSelect/package.json +6 -0
- package/lib/Radio/package.json +6 -0
- package/lib/Rating/package.json +6 -0
- package/lib/RcSlider/package.json +6 -0
- package/lib/Select/package.json +6 -0
- package/lib/Slider/package.json +7 -0
- package/lib/Status/package.json +7 -0
- package/lib/StepItem/package.json +6 -0
- package/lib/StepItemIcon/package.json +6 -0
- package/lib/Stepper/package.json +7 -0
- package/lib/Switch/package.json +6 -0
- package/lib/TextArea/package.json +6 -0
- package/lib/TextField/package.json +6 -0
- package/lib/TimeField/package.json +6 -0
- package/lib/TimePicker/package.json +6 -0
- package/lib/Tooltip/package.json +7 -0
- package/lib/cjs/Adornment/Adornment.d.ts +7 -0
- package/lib/cjs/Adornment/Adornment.js +47 -0
- package/lib/cjs/Adornment/Adornment.module.scss +18 -0
- package/lib/cjs/Alert/Alert.d.ts +10 -0
- package/lib/cjs/Alert/Alert.js +46 -0
- package/lib/cjs/Alert/Alert.module.scss +38 -0
- package/lib/cjs/Avatar/Avatar.d.ts +13 -0
- package/lib/cjs/Avatar/Avatar.js +50 -0
- package/lib/cjs/Avatar/Avatar.module.scss +82 -0
- package/lib/cjs/Avatar/AvatarGroup.d.ts +8 -0
- package/lib/cjs/Avatar/AvatarGroup.js +34 -0
- package/lib/cjs/Avatar/AvatarGroup.module.scss +48 -0
- package/lib/cjs/Badge/Badge.d.ts +11 -0
- package/lib/cjs/Badge/Badge.js +34 -0
- package/lib/cjs/Badge/Badge.module.scss +83 -0
- package/lib/cjs/Button/Button.css +3 -0
- package/lib/cjs/{ui/Button → Button}/Button.d.ts +1 -1
- package/lib/cjs/{ui/Button → Button}/Button.js +4 -5
- package/lib/cjs/{ui/Button → Button}/Button.module.scss +1 -1
- package/lib/cjs/Card/Card.d.ts +4 -0
- package/lib/cjs/Card/Card.js +19 -0
- package/lib/cjs/Card/Card.module.scss +7 -0
- package/lib/cjs/Chip/Chip.d.ts +13 -0
- package/lib/cjs/Chip/Chip.js +41 -0
- package/lib/cjs/Chip/Chip.module.scss +96 -0
- package/lib/cjs/Form/Checkbox/Checkbox.d.ts +12 -0
- package/lib/cjs/Form/Checkbox/Checkbox.js +53 -0
- package/lib/cjs/Form/Checkbox/Checkbox.module.scss +297 -0
- package/lib/cjs/Form/Checkbox/Radio.d.ts +3 -0
- package/lib/cjs/Form/Checkbox/Radio.js +21 -0
- package/lib/cjs/Form/DateField/DateField.d.ts +26 -0
- package/lib/cjs/Form/DateField/DateField.js +71 -0
- package/lib/cjs/Form/DateField/DateField.module.scss +1 -0
- package/lib/cjs/Form/DateField/TimeField.d.ts +3 -0
- package/lib/cjs/Form/DateField/TimeField.js +19 -0
- package/lib/cjs/Form/DatePicker/DatePicker.d.ts +7 -0
- package/lib/cjs/Form/DatePicker/DatePicker.js +49 -0
- package/lib/cjs/Form/DatePicker/DatePicker.module.scss +7 -0
- package/lib/cjs/Form/DatePicker/PeriodSelect.d.ts +2 -0
- package/lib/cjs/Form/DatePicker/PeriodSelect.js +29 -0
- package/lib/cjs/Form/DatePicker/TimePicker.d.ts +2 -0
- package/lib/cjs/Form/DatePicker/TimePicker.js +28 -0
- package/lib/cjs/Form/DatePicker/styles.css +766 -0
- package/lib/cjs/Form/Interval/Interval.d.ts +21 -0
- package/lib/cjs/Form/Interval/Interval.js +98 -0
- package/lib/cjs/Form/Interval/Interval.module.scss +35 -0
- package/lib/cjs/Form/Interval/IntervalSlide.d.ts +4 -0
- package/lib/cjs/Form/Interval/IntervalSlide.js +48 -0
- package/lib/cjs/Form/Password/Password.d.ts +12 -0
- package/lib/cjs/Form/Password/Password.js +46 -0
- package/lib/cjs/Form/Password/Password.module.scss +2 -0
- package/lib/cjs/Form/Period/Period.d.ts +15 -0
- package/lib/cjs/Form/Period/Period.js +69 -0
- package/lib/cjs/Form/Period/Period.module.scss +10 -0
- package/lib/cjs/Form/Rating/Rating.d.ts +10 -0
- package/lib/cjs/Form/Rating/Rating.js +54 -0
- package/lib/cjs/Form/Rating/Rating.module.scss +19 -0
- package/lib/cjs/Form/Select/Select.d.ts +23 -0
- package/lib/cjs/Form/Select/Select.js +139 -0
- package/lib/cjs/Form/Select/Select.module.scss +26 -0
- package/lib/cjs/Form/Switch/Switch.d.ts +7 -0
- package/lib/cjs/Form/Switch/Switch.js +30 -0
- package/lib/cjs/Form/Switch/Switch.module.scss +69 -0
- package/lib/cjs/Form/TextArea/TextArea.d.ts +4 -0
- package/lib/cjs/Form/TextArea/TextArea.js +46 -0
- package/lib/cjs/Form/TextArea/TextArea.module.scss +15 -0
- package/lib/cjs/Form/TextField/TextField.d.ts +40 -0
- package/lib/cjs/Form/TextField/TextField.js +152 -0
- package/lib/cjs/Form/TextField/TextField.module.scss +160 -0
- package/lib/cjs/List/ListItem.d.ts +10 -0
- package/lib/cjs/List/ListItem.js +60 -0
- package/lib/cjs/List/ListItem.module.scss +34 -0
- package/lib/cjs/Loader/Loader.d.ts +6 -0
- package/lib/cjs/Loader/Loader.js +120 -0
- package/lib/cjs/Loader/Loader.module.scss +37 -0
- package/lib/cjs/Logo/Logo.d.ts +12 -0
- package/lib/cjs/Logo/Logo.js +102 -0
- package/lib/cjs/Logo/Logo.module.scss +29 -0
- package/lib/cjs/Slider/RcSlider.d.ts +2 -0
- package/lib/cjs/Slider/RcSlider.js +9 -0
- package/lib/cjs/Slider/Slider.d.ts +8 -0
- package/lib/cjs/Slider/Slider.js +34 -0
- package/lib/cjs/Slider/Slider.module.scss +6 -0
- package/lib/cjs/Slider/style.css +281 -0
- package/lib/cjs/Status/Status.d.ts +10 -0
- package/lib/cjs/Status/Status.js +31 -0
- package/lib/cjs/Status/Status.module.scss +45 -0
- package/lib/cjs/Stepper/StepItem.d.ts +14 -0
- package/lib/cjs/Stepper/StepItem.js +56 -0
- package/lib/cjs/Stepper/StepItem.module.scss +67 -0
- package/lib/cjs/Stepper/StepItemIcon.d.ts +11 -0
- package/lib/cjs/Stepper/StepItemIcon.js +40 -0
- package/lib/cjs/Stepper/StepItemIcon.module.scss +47 -0
- package/lib/cjs/Stepper/Stepper.d.ts +11 -0
- package/lib/cjs/Stepper/Stepper.js +45 -0
- package/lib/cjs/Stepper/Stepper.module.scss +34 -0
- package/lib/cjs/Tooltip/Tooltip.d.ts +7 -0
- package/lib/cjs/Tooltip/Tooltip.js +32 -0
- package/lib/cjs/Tooltip/Tooltip.module.scss +18 -0
- package/lib/cjs/Typography/HelperText/HelperText.d.ts +6 -0
- package/lib/cjs/Typography/HelperText/HelperText.js +28 -0
- package/lib/cjs/Typography/HelperText/HelperText.module.scss +10 -0
- package/lib/cjs/assets/fonts.scss +0 -18
- package/lib/cjs/assets/global.css +36 -0
- package/lib/cjs/assets/styles.scss +0 -10
- package/lib/cjs/index.d.ts +29 -29
- package/lib/cjs/index.js +30 -2
- package/lib/dist/armtek-uikit-react-index.js +293 -293
- package/lib/dist/armtek-uikit-react-index.min.js +1 -1
- package/lib/esm/Adornment/Adornment.d.ts +7 -0
- package/lib/esm/Adornment/Adornment.js +40 -0
- package/lib/esm/Adornment/Adornment.module.scss +18 -0
- package/lib/esm/Alert/Alert.d.ts +10 -0
- package/lib/esm/Alert/Alert.js +41 -0
- package/lib/esm/Alert/Alert.module.scss +38 -0
- package/lib/esm/Avatar/Avatar.d.ts +13 -0
- package/lib/esm/Avatar/Avatar.js +45 -0
- package/lib/esm/Avatar/Avatar.module.scss +82 -0
- package/lib/esm/Avatar/AvatarGroup.d.ts +8 -0
- package/lib/esm/Avatar/AvatarGroup.js +29 -0
- package/lib/esm/Avatar/AvatarGroup.module.scss +48 -0
- package/lib/esm/Badge/Badge.d.ts +11 -0
- package/lib/esm/Badge/Badge.js +29 -0
- package/lib/esm/Badge/Badge.module.scss +83 -0
- package/lib/esm/Button/Button.css +3 -0
- package/lib/esm/{ui/Button → Button}/Button.d.ts +1 -1
- package/lib/esm/{ui/Button → Button}/Button.js +5 -5
- package/lib/esm/{ui/Button → Button}/Button.module.scss +1 -1
- package/lib/esm/Card/Card.d.ts +4 -0
- package/lib/esm/Card/Card.js +13 -0
- package/lib/esm/Card/Card.module.scss +7 -0
- package/lib/esm/Chip/Chip.d.ts +13 -0
- package/lib/esm/Chip/Chip.js +36 -0
- package/lib/esm/Chip/Chip.module.scss +96 -0
- package/lib/esm/Form/Checkbox/Checkbox.d.ts +12 -0
- package/lib/esm/Form/Checkbox/Checkbox.js +49 -0
- package/lib/esm/Form/Checkbox/Checkbox.module.scss +297 -0
- package/lib/esm/Form/Checkbox/Radio.d.ts +3 -0
- package/lib/esm/Form/Checkbox/Radio.js +15 -0
- package/lib/esm/Form/DateField/DateField.d.ts +26 -0
- package/lib/esm/Form/DateField/DateField.js +66 -0
- package/lib/esm/Form/DateField/DateField.module.scss +1 -0
- package/lib/esm/Form/DateField/TimeField.d.ts +3 -0
- package/lib/esm/Form/DateField/TimeField.js +13 -0
- package/lib/esm/Form/DatePicker/DatePicker.d.ts +7 -0
- package/lib/esm/Form/DatePicker/DatePicker.js +41 -0
- package/lib/esm/Form/DatePicker/DatePicker.module.scss +7 -0
- package/lib/esm/Form/DatePicker/PeriodSelect.d.ts +2 -0
- package/lib/esm/Form/DatePicker/PeriodSelect.js +24 -0
- package/lib/esm/Form/DatePicker/TimePicker.d.ts +2 -0
- package/lib/esm/Form/DatePicker/TimePicker.js +23 -0
- package/lib/esm/Form/DatePicker/styles.css +766 -0
- package/lib/esm/Form/Interval/Interval.d.ts +21 -0
- package/lib/esm/Form/Interval/Interval.js +94 -0
- package/lib/esm/Form/Interval/Interval.module.scss +35 -0
- package/lib/esm/Form/Interval/IntervalSlide.d.ts +4 -0
- package/lib/esm/Form/Interval/IntervalSlide.js +44 -0
- package/lib/esm/Form/Password/Password.d.ts +12 -0
- package/lib/esm/Form/Password/Password.js +41 -0
- package/lib/esm/Form/Password/Password.module.scss +2 -0
- package/lib/esm/Form/Period/Period.d.ts +15 -0
- package/lib/esm/Form/Period/Period.js +65 -0
- package/lib/esm/Form/Period/Period.module.scss +10 -0
- package/lib/esm/Form/Rating/Rating.d.ts +10 -0
- package/lib/esm/Form/Rating/Rating.js +50 -0
- package/lib/esm/Form/Rating/Rating.module.scss +19 -0
- package/lib/esm/Form/Select/Select.d.ts +23 -0
- package/lib/esm/Form/Select/Select.js +135 -0
- package/lib/esm/Form/Select/Select.module.scss +26 -0
- package/lib/esm/Form/Switch/Switch.d.ts +7 -0
- package/lib/esm/Form/Switch/Switch.js +25 -0
- package/lib/esm/Form/Switch/Switch.module.scss +69 -0
- package/lib/esm/Form/TextArea/TextArea.d.ts +4 -0
- package/lib/esm/Form/TextArea/TextArea.js +41 -0
- package/lib/esm/Form/TextArea/TextArea.module.scss +15 -0
- package/lib/esm/Form/TextField/TextField.d.ts +40 -0
- package/lib/esm/Form/TextField/TextField.js +147 -0
- package/lib/esm/Form/TextField/TextField.module.scss +160 -0
- package/lib/esm/List/ListItem.d.ts +10 -0
- package/lib/esm/List/ListItem.js +53 -0
- package/lib/esm/List/ListItem.module.scss +34 -0
- package/lib/esm/Loader/Loader.d.ts +6 -0
- package/lib/esm/Loader/Loader.js +115 -0
- package/lib/esm/Loader/Loader.module.scss +37 -0
- package/lib/esm/Logo/Logo.d.ts +12 -0
- package/lib/esm/Logo/Logo.js +97 -0
- package/lib/esm/Logo/Logo.module.scss +29 -0
- package/lib/esm/Slider/RcSlider.d.ts +2 -0
- package/lib/esm/Slider/RcSlider.js +2 -0
- package/lib/esm/Slider/Slider.d.ts +8 -0
- package/lib/esm/Slider/Slider.js +29 -0
- package/lib/esm/Slider/Slider.module.scss +6 -0
- package/lib/esm/Slider/style.css +281 -0
- package/lib/esm/Status/Status.d.ts +10 -0
- package/lib/esm/Status/Status.js +26 -0
- package/lib/esm/Status/Status.module.scss +45 -0
- package/lib/esm/Stepper/StepItem.d.ts +14 -0
- package/lib/esm/Stepper/StepItem.js +51 -0
- package/lib/esm/Stepper/StepItem.module.scss +67 -0
- package/lib/esm/Stepper/StepItemIcon.d.ts +11 -0
- package/lib/esm/Stepper/StepItemIcon.js +34 -0
- package/lib/esm/Stepper/StepItemIcon.module.scss +47 -0
- package/lib/esm/Stepper/Stepper.d.ts +11 -0
- package/lib/esm/Stepper/Stepper.js +40 -0
- package/lib/esm/Stepper/Stepper.module.scss +34 -0
- package/lib/esm/Tooltip/Tooltip.d.ts +7 -0
- package/lib/esm/Tooltip/Tooltip.js +28 -0
- package/lib/esm/Tooltip/Tooltip.module.scss +18 -0
- package/lib/esm/Typography/HelperText/HelperText.d.ts +6 -0
- package/lib/esm/Typography/HelperText/HelperText.js +22 -0
- package/lib/esm/Typography/HelperText/HelperText.module.scss +10 -0
- package/lib/esm/assets/fonts.scss +0 -18
- package/lib/esm/assets/global.css +36 -0
- package/lib/esm/assets/styles.scss +0 -10
- package/lib/esm/index.d.ts +29 -29
- package/lib/esm/index.js +15 -1
- package/lib/helpers/package.json +6 -0
- package/lib/theme/package.json +6 -0
- package/lib/useClickOutside/package.json +6 -0
- package/package.json +6 -2
- package/lib/cjs/assets/index.d.ts +0 -16
- package/lib/cjs/ui/Button/style.css +0 -299
- package/lib/esm/assets/index.d.ts +0 -16
- package/lib/esm/ui/Button/style.css +0 -299
- /package/lib/cjs/{ui/Button → Button}/ButtonGroup.d.ts +0 -0
- /package/lib/cjs/{ui/Button → Button}/ButtonGroup.js +0 -0
- /package/lib/cjs/{ui/Button → Button}/ButtonIcon.d.ts +0 -0
- /package/lib/cjs/{ui/Button → Button}/ButtonIcon.js +0 -0
- /package/lib/cjs/{shared/hooks → hooks}/useClickOutside.d.ts +0 -0
- /package/lib/cjs/{shared/hooks → hooks}/useClickOutside.js +0 -0
- /package/lib/cjs/{shared/services → services}/DateService.d.ts +0 -0
- /package/lib/cjs/{shared/services → services}/DateService.js +0 -0
- /package/lib/esm/{ui/Button → Button}/ButtonGroup.d.ts +0 -0
- /package/lib/esm/{ui/Button → Button}/ButtonGroup.js +0 -0
- /package/lib/esm/{ui/Button → Button}/ButtonIcon.d.ts +0 -0
- /package/lib/esm/{ui/Button → Button}/ButtonIcon.js +0 -0
- /package/lib/esm/{shared/hooks → hooks}/useClickOutside.d.ts +0 -0
- /package/lib/esm/{shared/hooks → hooks}/useClickOutside.js +0 -0
- /package/lib/esm/{shared/services → services}/DateService.d.ts +0 -0
- /package/lib/esm/{shared/services → services}/DateService.js +0 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TextFieldProps } from '../TextField/TextField';
|
|
3
|
+
export type IntervalProps = {
|
|
4
|
+
min: number;
|
|
5
|
+
max: number;
|
|
6
|
+
value?: [number, number];
|
|
7
|
+
onChange?: (value: [number, number]) => void;
|
|
8
|
+
labelStart?: string;
|
|
9
|
+
labelEnd?: string;
|
|
10
|
+
defaultValue?: [number, number];
|
|
11
|
+
} & Omit<TextFieldProps, 'onChange' | 'value'>;
|
|
12
|
+
declare const Interval: import("react").ForwardRefExoticComponent<{
|
|
13
|
+
min: number;
|
|
14
|
+
max: number;
|
|
15
|
+
value?: [number, number] | undefined;
|
|
16
|
+
onChange?: ((value: [number, number]) => void) | undefined;
|
|
17
|
+
labelStart?: string | undefined;
|
|
18
|
+
labelEnd?: string | undefined;
|
|
19
|
+
defaultValue?: [number, number] | undefined;
|
|
20
|
+
} & Omit<TextFieldProps, "value" | "onChange"> & import("react").RefAttributes<unknown>>;
|
|
21
|
+
export default Interval;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
|
|
9
|
+
var _TextField = require("../TextField/TextField");
|
|
10
|
+
var _HelperText = _interopRequireDefault(require("../../Typography/HelperText/HelperText"));
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
13
|
+
let {
|
|
14
|
+
value,
|
|
15
|
+
defaultValue,
|
|
16
|
+
labelStart,
|
|
17
|
+
labelEnd,
|
|
18
|
+
onChange,
|
|
19
|
+
helperText,
|
|
20
|
+
error,
|
|
21
|
+
disabled,
|
|
22
|
+
min = 0,
|
|
23
|
+
max = 0,
|
|
24
|
+
...inputProps
|
|
25
|
+
} = props;
|
|
26
|
+
let [focused, setFocused] = (0, _react.useState)(false);
|
|
27
|
+
let [currentMin, setCurrentMin] = (0, _react.useState)(min);
|
|
28
|
+
let [currentMax, setCurrentMax] = (0, _react.useState)(max);
|
|
29
|
+
const handleFocus = () => {
|
|
30
|
+
setFocused(true);
|
|
31
|
+
};
|
|
32
|
+
const handleBlur = () => {
|
|
33
|
+
setFocused(false);
|
|
34
|
+
};
|
|
35
|
+
const handleMin = e => {
|
|
36
|
+
let val = parseInt(e.target.value);
|
|
37
|
+
val = val < min ? min : val;
|
|
38
|
+
setCurrentMin(val);
|
|
39
|
+
if (onChange) onChange([val, max]);
|
|
40
|
+
};
|
|
41
|
+
const handleMax = e => {
|
|
42
|
+
let val = parseInt(e.target.value);
|
|
43
|
+
val = val > max ? max : val;
|
|
44
|
+
setCurrentMax(val);
|
|
45
|
+
if (onChange) onChange([min, val]);
|
|
46
|
+
};
|
|
47
|
+
let realMin = currentMin;
|
|
48
|
+
let realMax = currentMax;
|
|
49
|
+
if (value !== undefined && Array.isArray(value) && value.length === 2) {
|
|
50
|
+
realMin = value[0];
|
|
51
|
+
realMax = value[1];
|
|
52
|
+
}
|
|
53
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
54
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldContainer, {
|
|
55
|
+
focused: focused,
|
|
56
|
+
error: error,
|
|
57
|
+
disabled: disabled,
|
|
58
|
+
size: inputProps.size,
|
|
59
|
+
variant: inputProps.variant,
|
|
60
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
61
|
+
className: _IntervalModule.default.interval,
|
|
62
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
63
|
+
className: _IntervalModule.default.interval__item,
|
|
64
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldInput, {
|
|
65
|
+
...inputProps,
|
|
66
|
+
value: realMin,
|
|
67
|
+
label: labelStart,
|
|
68
|
+
type: 'number',
|
|
69
|
+
onFocus: handleFocus,
|
|
70
|
+
onBlur: handleBlur,
|
|
71
|
+
focused: true,
|
|
72
|
+
onChange: handleMin
|
|
73
|
+
})
|
|
74
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
75
|
+
className: _IntervalModule.default.interval__item,
|
|
76
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldInput, {
|
|
77
|
+
...inputProps,
|
|
78
|
+
value: realMax,
|
|
79
|
+
label: labelEnd,
|
|
80
|
+
type: 'number',
|
|
81
|
+
onFocus: handleFocus,
|
|
82
|
+
onBlur: handleBlur,
|
|
83
|
+
className: _IntervalModule.default.interval__end,
|
|
84
|
+
focused: true,
|
|
85
|
+
onChange: handleMax
|
|
86
|
+
})
|
|
87
|
+
})]
|
|
88
|
+
})
|
|
89
|
+
}), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelperText.default, {
|
|
90
|
+
className: _IntervalModule.default.interval__helperText,
|
|
91
|
+
error: error,
|
|
92
|
+
children: helperText
|
|
93
|
+
})]
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
var _default = Interval;
|
|
97
|
+
exports.default = _default;
|
|
98
|
+
module.exports = exports.default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
@import "../../assets/styles";
|
|
2
|
+
|
|
3
|
+
.interval{
|
|
4
|
+
@include flex();
|
|
5
|
+
width: 100%;
|
|
6
|
+
& input{
|
|
7
|
+
-moz-appearance: textfield;
|
|
8
|
+
&::-webkit-outer-spin-button,
|
|
9
|
+
&::-webkit-inner-spin-button {
|
|
10
|
+
-webkit-appearance: none;
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
.interval__end{
|
|
16
|
+
text-align: right;
|
|
17
|
+
& + span{
|
|
18
|
+
text-align: right;
|
|
19
|
+
padding-left: 0;
|
|
20
|
+
padding-right: 12px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
.interval__item{
|
|
24
|
+
max-width: 50%;
|
|
25
|
+
flex: 0 0 50%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.interval__helperText{
|
|
29
|
+
margin-top: calc($size-step / 2);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.intervalslide__slider{
|
|
33
|
+
padding: 0 calc($size-step * 2);
|
|
34
|
+
margin-top: -7px;
|
|
35
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _Interval = _interopRequireDefault(require("./Interval"));
|
|
8
|
+
var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
var _Slider = _interopRequireDefault(require("../../Slider/Slider"));
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
const IntervalSlide = props => {
|
|
13
|
+
let {
|
|
14
|
+
onChange,
|
|
15
|
+
...restProps
|
|
16
|
+
} = props;
|
|
17
|
+
let [value, setValue] = (0, _react.useState)([props.min, props.max]);
|
|
18
|
+
const handleChange = value => {
|
|
19
|
+
setValue(value);
|
|
20
|
+
if (onChange) onChange(value);
|
|
21
|
+
};
|
|
22
|
+
const handleSlide = value => {
|
|
23
|
+
if (Array.isArray(value)) handleChange(value);
|
|
24
|
+
};
|
|
25
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
26
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
27
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Interval.default, {
|
|
28
|
+
value: value,
|
|
29
|
+
...restProps,
|
|
30
|
+
onChange: setValue
|
|
31
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
32
|
+
className: _IntervalModule.default.intervalslide__slider,
|
|
33
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
|
|
34
|
+
range: true,
|
|
35
|
+
min: props.min,
|
|
36
|
+
max: props.max,
|
|
37
|
+
disabled: props.disabled,
|
|
38
|
+
value: restProps.value || value,
|
|
39
|
+
size: props.size,
|
|
40
|
+
onChange: handleSlide
|
|
41
|
+
})
|
|
42
|
+
})]
|
|
43
|
+
})
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
var _default = IntervalSlide;
|
|
47
|
+
exports.default = _default;
|
|
48
|
+
module.exports = exports.default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const Password: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
label?: string | undefined;
|
|
4
|
+
size?: "small" | "large" | undefined;
|
|
5
|
+
variant?: import("../../shared/types/theme").VariantType | undefined;
|
|
6
|
+
error?: boolean | undefined;
|
|
7
|
+
success?: boolean | undefined;
|
|
8
|
+
helperText?: string | undefined;
|
|
9
|
+
endAdornment?: import("react").ReactNode;
|
|
10
|
+
multiline?: boolean | undefined;
|
|
11
|
+
} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
|
|
12
|
+
export default Password;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _TextField = _interopRequireDefault(require("../TextField/TextField"));
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _ButtonIcon = _interopRequireDefault(require("../../Button/ButtonIcon"));
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
const Password = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
12
|
+
let {
|
|
13
|
+
onChange,
|
|
14
|
+
...restProps
|
|
15
|
+
} = props;
|
|
16
|
+
let [value, setValue] = (0, _react.useState)('');
|
|
17
|
+
let [isPassword, setIsPassword] = (0, _react.useState)(true);
|
|
18
|
+
const inputRef = (0, _react.useRef)(ref);
|
|
19
|
+
const handleChange = e => {
|
|
20
|
+
setValue(e.target.value);
|
|
21
|
+
if (onChange) onChange(e);
|
|
22
|
+
};
|
|
23
|
+
const handleClick = () => {
|
|
24
|
+
setIsPassword(prev => !prev);
|
|
25
|
+
};
|
|
26
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
27
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
|
|
28
|
+
value: value,
|
|
29
|
+
ref: inputRef,
|
|
30
|
+
...restProps,
|
|
31
|
+
type: isPassword ? 'password' : 'text',
|
|
32
|
+
onChange: handleChange,
|
|
33
|
+
endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
|
|
34
|
+
size: 'medium',
|
|
35
|
+
variant: 'transparent',
|
|
36
|
+
color: 'neutral',
|
|
37
|
+
onClick: handleClick,
|
|
38
|
+
className: 'material_icon',
|
|
39
|
+
children: isPassword ? 'visibility_off' : 'visibility'
|
|
40
|
+
})
|
|
41
|
+
})
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
var _default = Password;
|
|
45
|
+
exports.default = _default;
|
|
46
|
+
module.exports = exports.default;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const Period: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
format?: string | undefined;
|
|
4
|
+
onChange?: ((value: [Date | null, Date | null]) => void) | undefined;
|
|
5
|
+
} & {
|
|
6
|
+
label?: string | undefined;
|
|
7
|
+
size?: "small" | "large" | undefined;
|
|
8
|
+
variant?: import("../../shared/types/theme").VariantType | undefined;
|
|
9
|
+
error?: boolean | undefined;
|
|
10
|
+
success?: boolean | undefined;
|
|
11
|
+
helperText?: string | undefined;
|
|
12
|
+
endAdornment?: import("react").ReactNode;
|
|
13
|
+
multiline?: boolean | undefined;
|
|
14
|
+
} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
|
|
15
|
+
export default Period;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _TextField = _interopRequireDefault(require("../TextField/TextField"));
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _PeriodModule = _interopRequireDefault(require("./Period.module.scss"));
|
|
10
|
+
var _ButtonIcon = _interopRequireDefault(require("../../Button/ButtonIcon"));
|
|
11
|
+
var _Card = _interopRequireDefault(require("../../Card/Card"));
|
|
12
|
+
var _DatePicker = _interopRequireDefault(require("../DatePicker/DatePicker"));
|
|
13
|
+
var _DateService = require("../../services/DateService");
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
const Period = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
16
|
+
let {
|
|
17
|
+
onChange,
|
|
18
|
+
format = 'DD.MM.YYYY',
|
|
19
|
+
onInput,
|
|
20
|
+
...restProps
|
|
21
|
+
} = props;
|
|
22
|
+
let [active, setActive] = (0, _react.useState)(false);
|
|
23
|
+
let [value, setValue] = (0, _react.useState)([new Date(), null]);
|
|
24
|
+
const handleClick = () => {
|
|
25
|
+
setActive(true);
|
|
26
|
+
};
|
|
27
|
+
const handleChange = date => {
|
|
28
|
+
setValue(date);
|
|
29
|
+
if (date[0] && date[1]) setActive(false);
|
|
30
|
+
if (onChange) onChange(date);
|
|
31
|
+
};
|
|
32
|
+
let displayValue = '';
|
|
33
|
+
if (value[0] && value[1]) displayValue = `${(0, _DateService.DateService)(value[0]).format('DD.MM.YYYY')} - ${(0, _DateService.DateService)(value[1]).format('DD.MM.YYYY')}`;
|
|
34
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
35
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
36
|
+
className: _PeriodModule.default.dateField,
|
|
37
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
|
|
38
|
+
ref: ref,
|
|
39
|
+
placeholder: 'дд.мм.гггг - дд.мм.гггг',
|
|
40
|
+
...restProps,
|
|
41
|
+
value: displayValue,
|
|
42
|
+
onFocus: handleClick,
|
|
43
|
+
endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
|
|
44
|
+
size: 'medium',
|
|
45
|
+
variant: 'transparent',
|
|
46
|
+
color: 'neutral',
|
|
47
|
+
onClick: handleClick,
|
|
48
|
+
className: 'material_icon',
|
|
49
|
+
children: "calendar_today"
|
|
50
|
+
})
|
|
51
|
+
}), active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
|
|
52
|
+
className: _PeriodModule.default.dateField__picker,
|
|
53
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, {
|
|
54
|
+
onChange: handleChange,
|
|
55
|
+
selectsRange: true,
|
|
56
|
+
onBlur: () => {
|
|
57
|
+
setActive(false);
|
|
58
|
+
},
|
|
59
|
+
selected: value[0],
|
|
60
|
+
startDate: value[0],
|
|
61
|
+
endDate: value[1]
|
|
62
|
+
})
|
|
63
|
+
})]
|
|
64
|
+
})
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
var _default = Period;
|
|
68
|
+
exports.default = _default;
|
|
69
|
+
module.exports = exports.default;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { SizeType } from '../../shared/types/theme';
|
|
3
|
+
type PropsType = {
|
|
4
|
+
size?: Exclude<SizeType, 'extraLarge'>;
|
|
5
|
+
value?: number;
|
|
6
|
+
defaultValue?: number;
|
|
7
|
+
onChange?: (value: number) => void;
|
|
8
|
+
} & Omit<InputHTMLAttributes<any>, 'value' | 'onChange' | 'defaultValue' | 'size'>;
|
|
9
|
+
declare const Rating: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default Rating;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _RatingModule = _interopRequireDefault(require("./Rating.module.scss"));
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
const Rating = props => {
|
|
12
|
+
let {
|
|
13
|
+
size = 'large',
|
|
14
|
+
onChange,
|
|
15
|
+
...restProps
|
|
16
|
+
} = props;
|
|
17
|
+
let [value, setValue] = (0, _react.useState)(props.defaultValue || 0);
|
|
18
|
+
let [hovered, setHovered] = (0, _react.useState)(0);
|
|
19
|
+
let realValue = props.value !== undefined ? props.value : value;
|
|
20
|
+
const handleClick = index => () => {
|
|
21
|
+
setValue(index);
|
|
22
|
+
if (onChange) onChange(index);
|
|
23
|
+
};
|
|
24
|
+
const handleMouseEnter = index => () => {
|
|
25
|
+
setHovered(index);
|
|
26
|
+
};
|
|
27
|
+
const handleLeaveRating = () => {
|
|
28
|
+
setHovered(realValue);
|
|
29
|
+
};
|
|
30
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
31
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
32
|
+
className: _RatingModule.default.rating,
|
|
33
|
+
onMouseLeave: handleLeaveRating,
|
|
34
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
35
|
+
value: value,
|
|
36
|
+
...restProps,
|
|
37
|
+
type: "hidden"
|
|
38
|
+
}), [...Array(5)].map((_, index) => {
|
|
39
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
40
|
+
onClick: handleClick(index + 1),
|
|
41
|
+
onMouseEnter: handleMouseEnter(index + 1),
|
|
42
|
+
className: (0, _clsx.default)('material_icon', {
|
|
43
|
+
['material_icon_solid']: index + 1 <= hovered || index + 1 <= realValue,
|
|
44
|
+
[_RatingModule.default.rating__item_disabled]: !!restProps.disabled
|
|
45
|
+
}, _RatingModule.default.rating__item, _RatingModule.default['rating_' + size]),
|
|
46
|
+
children: "star"
|
|
47
|
+
}, index);
|
|
48
|
+
})]
|
|
49
|
+
})
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
var _default = Rating;
|
|
53
|
+
exports.default = _default;
|
|
54
|
+
module.exports = exports.default;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@import "../../assets/styles";
|
|
2
|
+
|
|
3
|
+
.rating{
|
|
4
|
+
@include flex();
|
|
5
|
+
}
|
|
6
|
+
.rating__item{
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
color: #F7B519;
|
|
9
|
+
font-size: 30px;
|
|
10
|
+
}
|
|
11
|
+
.rating_medium{
|
|
12
|
+
font-size: 24px;
|
|
13
|
+
}
|
|
14
|
+
.rating_small{
|
|
15
|
+
font-size: 18px;
|
|
16
|
+
}
|
|
17
|
+
.rating__item_disabled{
|
|
18
|
+
color: $color-gray-400;
|
|
19
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { OptionType } from '../../shared/types/theme';
|
|
2
|
+
import { TextFieldProps } from '../TextField/TextField';
|
|
3
|
+
type SelectBaseProps = {
|
|
4
|
+
options: OptionType[];
|
|
5
|
+
inline?: boolean;
|
|
6
|
+
};
|
|
7
|
+
type SelectSingleProps = {
|
|
8
|
+
multiple?: false;
|
|
9
|
+
value?: string;
|
|
10
|
+
defaultValue?: string;
|
|
11
|
+
onChange?: (option: string) => void;
|
|
12
|
+
};
|
|
13
|
+
type SelectMultipleProps = {
|
|
14
|
+
multiple?: true;
|
|
15
|
+
value?: string[];
|
|
16
|
+
defaultValue?: string[];
|
|
17
|
+
onChange?: (option: string[]) => void;
|
|
18
|
+
};
|
|
19
|
+
type SelectProps = SelectMultipleProps | SelectSingleProps;
|
|
20
|
+
type SelectPropsType = SelectBaseProps & SelectProps & Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'>;
|
|
21
|
+
export declare const getOptionValue: (option: OptionType) => string;
|
|
22
|
+
declare function Select(props: SelectPropsType): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export default Select;
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.getOptionValue = exports.default = void 0;
|
|
7
|
+
var _TextField = _interopRequireDefault(require("../TextField/TextField"));
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
|
|
10
|
+
var _ButtonIcon = _interopRequireDefault(require("../../Button/ButtonIcon"));
|
|
11
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
12
|
+
var _ListItem = _interopRequireDefault(require("../../List/ListItem"));
|
|
13
|
+
var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
const getOptionValue = option => option.value || option.text;
|
|
16
|
+
exports.getOptionValue = getOptionValue;
|
|
17
|
+
function Select(props) {
|
|
18
|
+
var _options$find;
|
|
19
|
+
let {
|
|
20
|
+
options,
|
|
21
|
+
endAdornment,
|
|
22
|
+
className,
|
|
23
|
+
inline,
|
|
24
|
+
multiple = false,
|
|
25
|
+
value,
|
|
26
|
+
defaultValue,
|
|
27
|
+
onChange,
|
|
28
|
+
...inputProps
|
|
29
|
+
} = props;
|
|
30
|
+
let [active, setActive] = (0, _react.useState)(false);
|
|
31
|
+
let [selected, setSelected] = (0, _react.useState)(defaultValue || (multiple ? [] : ''));
|
|
32
|
+
let selectRef = (0, _react.useRef)(null);
|
|
33
|
+
let optRef = (0, _useClickOutside.default)(() => setActive(false));
|
|
34
|
+
const handleActive = flag => {
|
|
35
|
+
setActive(prev => flag !== undefined ? flag : !prev);
|
|
36
|
+
};
|
|
37
|
+
const handleSelect = option => {
|
|
38
|
+
let v = getOptionValue(option);
|
|
39
|
+
let mSelected = selected;
|
|
40
|
+
let newValueS = v;
|
|
41
|
+
let newValueM = mSelected.includes(v) ? mSelected.filter(item => item !== v) : mSelected.concat(v);
|
|
42
|
+
setSelected(multiple ? newValueM : newValueS);
|
|
43
|
+
if (onChange) onChange(multiple ? newValueM : newValueS);
|
|
44
|
+
if (!multiple) setActive(false);
|
|
45
|
+
|
|
46
|
+
// if(selectRef.current)
|
|
47
|
+
// selectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
// const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
|
|
51
|
+
// let option = options.find(item => getOptionValue(item) === e.target.value)
|
|
52
|
+
// if( option )
|
|
53
|
+
// {
|
|
54
|
+
// let v = getOptionValue(option)
|
|
55
|
+
// setSelected(!multiple ? v : prev => prev?.concat(v) || [v])
|
|
56
|
+
// if( !multiple )
|
|
57
|
+
// setActive(false)
|
|
58
|
+
// }
|
|
59
|
+
// }
|
|
60
|
+
|
|
61
|
+
let selectEndAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
62
|
+
children: [endAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
|
|
63
|
+
onClick: () => handleActive,
|
|
64
|
+
size: 'small',
|
|
65
|
+
variant: 'transparent',
|
|
66
|
+
className: 'material_icon',
|
|
67
|
+
children: "arrow_drop_down"
|
|
68
|
+
})]
|
|
69
|
+
});
|
|
70
|
+
let selectProps = {};
|
|
71
|
+
// if( value !== undefined )
|
|
72
|
+
// {
|
|
73
|
+
// selectProps.value = value
|
|
74
|
+
// selectProps.onChange = handleChange
|
|
75
|
+
// }
|
|
76
|
+
|
|
77
|
+
let realValue = value !== undefined ? value : selected;
|
|
78
|
+
let selectedText = multiple ? options.filter(item => realValue == null ? void 0 : realValue.includes(getOptionValue(item))).map(item => item.text).join(', ') : ((_options$find = options.find(item => getOptionValue(item) === realValue)) == null ? void 0 : _options$find.text) || '';
|
|
79
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
80
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
81
|
+
className: _SelectModule.default.select,
|
|
82
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
83
|
+
className: _SelectModule.default.select__input_wrapper,
|
|
84
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
|
|
85
|
+
multiple: multiple,
|
|
86
|
+
ref: selectRef,
|
|
87
|
+
...selectProps,
|
|
88
|
+
style: {
|
|
89
|
+
display: 'none'
|
|
90
|
+
},
|
|
91
|
+
children: options.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
|
|
92
|
+
children: item.text
|
|
93
|
+
}, item.text))
|
|
94
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
|
|
95
|
+
...inputProps,
|
|
96
|
+
value: selectedText,
|
|
97
|
+
onClick: () => setActive(true),
|
|
98
|
+
className: (0, _clsx.default)(_SelectModule.default.select__input, className),
|
|
99
|
+
endAdornment: selectEndAdornment
|
|
100
|
+
})]
|
|
101
|
+
}), active && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectOptions, {
|
|
102
|
+
ref: optRef,
|
|
103
|
+
options: options,
|
|
104
|
+
multiple: multiple,
|
|
105
|
+
value: realValue,
|
|
106
|
+
inline: inline,
|
|
107
|
+
onClick: handleSelect
|
|
108
|
+
})]
|
|
109
|
+
})
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
const SelectOptions = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
113
|
+
let {
|
|
114
|
+
options,
|
|
115
|
+
value,
|
|
116
|
+
multiple,
|
|
117
|
+
inline,
|
|
118
|
+
onClick
|
|
119
|
+
} = props;
|
|
120
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
121
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
122
|
+
ref: ref,
|
|
123
|
+
className: (0, _clsx.default)(_SelectModule.default.options, {
|
|
124
|
+
[_SelectModule.default.options_inline]: !!inline
|
|
125
|
+
}),
|
|
126
|
+
children: options.map((item, index) => {
|
|
127
|
+
let optValue = getOptionValue(item);
|
|
128
|
+
let active = multiple === true && value ? value.includes(optValue) : optValue === value;
|
|
129
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
|
|
130
|
+
active: active,
|
|
131
|
+
onClick: () => onClick(item),
|
|
132
|
+
children: item.text
|
|
133
|
+
}, index);
|
|
134
|
+
})
|
|
135
|
+
})
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
var _default = Select;
|
|
139
|
+
exports.default = _default;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@import "../../assets/styles";
|
|
2
|
+
|
|
3
|
+
.select{
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
.select__input_wrapper{
|
|
7
|
+
|
|
8
|
+
}
|
|
9
|
+
.select__input{
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
& * {
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
.options{
|
|
16
|
+
padding: $size-step 0;
|
|
17
|
+
border-radius: $radius;
|
|
18
|
+
box-shadow: $box-shadow;
|
|
19
|
+
position: absolute;
|
|
20
|
+
left:0;
|
|
21
|
+
top:100%;
|
|
22
|
+
width:100%;
|
|
23
|
+
}
|
|
24
|
+
.options_inline{
|
|
25
|
+
position: static;
|
|
26
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { SizeType } from '../../shared/types/theme';
|
|
3
|
+
type SwitchProps = {
|
|
4
|
+
size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
|
|
5
|
+
} & Omit<InputHTMLAttributes<any>, 'size'>;
|
|
6
|
+
declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default Switch;
|