armtek-uikit-react 1.0.15 → 1.0.16

package/cjs/ui/Form/Checkbox/Radio.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['radio'];
+
+// const css = getCssPrefix(CssClasses)
+
+const Radio = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      ...props,
+      className: (0, _clsx.default)(props.className, _CheckboxModule.default.radio),
+      type: 'radio'
+    })
+  });
+};
+var _default = Radio;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/DateField/DateField.js

@@ -0,0 +1,70 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _TextField = _interopRequireDefault(require("../TextField/TextField"));
+var _react = require("react");
+var _ButtonIcon = _interopRequireDefault(require("../../ButtonIcon"));
+var _Card = _interopRequireDefault(require("../../Card/Card"));
+var _DatePicker = _interopRequireDefault(require("../DatePicker/DatePicker"));
+var _jsxRuntime = require("react/jsx-runtime");
+const DateInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    showTime,
+    showTimeOnly,
+    ...restProps
+  } = props;
+  let inputIcon = showTime && showTimeOnly ? 'schedule' : 'calendar_today';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+    ref: ref,
+    ...restProps,
+    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
+      size: 'medium',
+      variant: 'transparent',
+      onClick: props.onClick,
+      color: 'neutral',
+      className: 'material_icon',
+      children: inputIcon
+    })
+  });
+});
+const DateField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    onChange,
+    format = 'dd.MM.yyyy',
+    onInput,
+    showTime,
+    showTimeOnly,
+    ...restProps
+  } = props;
+  let [date, setDate] = (0, _react.useState)(null);
+  if (showTime && !showTimeOnly) format = 'dd.MM.yyyy HH:mm';else if (showTimeOnly) format = 'HH:mm';
+  const handleChange = d => {
+    setDate(d);
+    if (onChange) onChange(d);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, {
+      onChange: handleChange,
+      selected: date,
+      showTimeSelect: !!showTime,
+      timeIntervals: 15,
+      showTimeSelectOnly: !!showTimeOnly && !!showTime,
+      customInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInput, {
+        showTime: showTime,
+        showTimeOnly: showTimeOnly,
+        ref: ref,
+        ...restProps
+      }),
+      inline: false,
+      calendarContainer: _Card.default,
+      popperPlacement: "top-end",
+      dateFormat: format
+    })
+  });
+});
+var _default = DateField;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/DateField/TimeField.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _DateField = _interopRequireDefault(require("./DateField"));
+var _jsxRuntime = require("react/jsx-runtime");
+const TimeField = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateField.default, {
+      ...props,
+      showTime: true,
+      showTimeOnly: true
+    })
+  });
+};
+var _default = TimeField;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/DatePicker/DatePicker.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
+require("!style-loader!css-loader!./styles.css");
+var _ru = _interopRequireDefault(require("date-fns/locale/ru"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// import './styles.css'
+
+(0, _reactDatepicker.registerLocale)('ru', _ru.default);
+const renderDayContents = day => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: 'customDay',
+    children: day
+  });
+};
+const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    onChange,
+    selectsRange = false,
+    ...restProps
+  } = props;
+  const handleChange = (date, event) => {
+    if (onChange) onChange(date, event);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'ui-datepicker',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+        ref: ref,
+        locale: 'ru',
+        onChange: handleChange,
+        inline: true,
+        renderDayContents: renderDayContents,
+        ...restProps,
+        selectsRange: selectsRange,
+        onBlur: () => {
+          console.log(1);
+        }
+      })
+    })
+  });
+});
+var _default = DatePicker;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/DatePicker/PeriodSelect.js

@@ -0,0 +1,29 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const PeriodSelect = () => {
+  const [startDate, setStartDate] = (0, _react.useState)(new Date());
+  const [endDate, setEndDate] = (0, _react.useState)(null);
+  const handleChange = date => {
+    setStartDate(date[0]);
+    setEndDate(date[1]);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, {
+      selected: startDate,
+      onChange: handleChange,
+      startDate: startDate,
+      endDate: endDate,
+      selectsRange: true
+    })
+  });
+};
+var _default = PeriodSelect;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/DatePicker/TimePicker.js

@@ -0,0 +1,28 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const TimePicker = () => {
+  const [startDate, setStartDate] = (0, _react.useState)(new Date());
+  const handleChange = date => {
+    setStartDate(date);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, {
+      selected: startDate,
+      onChange: handleChange,
+      timeIntervals: 5,
+      showTimeSelect: true,
+      showTimeSelectOnly: true,
+      timeCaption: ''
+    })
+  });
+};
+var _default = TimePicker;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/Interval/Interval.js

@@ -0,0 +1,102 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _TextField = require("../TextField/TextField");
+var _HelperText = _interopRequireDefault(require("../../HelperText/HelperText"));
+var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['interval', 'interval__end', 'interval__item', 'interval__helperText', 'intervalslide__slider'];
+
+// const css = getCssPrefix(CssClasses)
+
+const Interval = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    value,
+    defaultValue,
+    labelStart,
+    labelEnd,
+    onChange,
+    helperText,
+    error,
+    disabled,
+    min = 0,
+    max = 0,
+    ...inputProps
+  } = props;
+  let [focused, setFocused] = (0, _react.useState)(false);
+  let [currentMin, setCurrentMin] = (0, _react.useState)(min);
+  let [currentMax, setCurrentMax] = (0, _react.useState)(max);
+  const handleFocus = () => {
+    setFocused(true);
+  };
+  const handleBlur = () => {
+    setFocused(false);
+  };
+  const handleMin = e => {
+    let val = parseInt(e.target.value);
+    val = val < min ? min : val;
+    setCurrentMin(val);
+    if (onChange) onChange([val, max]);
+  };
+  const handleMax = e => {
+    let val = parseInt(e.target.value);
+    val = val > max ? max : val;
+    setCurrentMax(val);
+    if (onChange) onChange([min, val]);
+  };
+  let realMin = currentMin;
+  let realMax = currentMax;
+  if (value !== undefined && Array.isArray(value) && value.length === 2) {
+    realMin = value[0];
+    realMax = value[1];
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldContainer, {
+      focused: focused,
+      error: error,
+      disabled: disabled,
+      size: inputProps.size,
+      variant: inputProps.variant,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _IntervalModule.default.interval,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _IntervalModule.default.interval__item,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldInput, {
+            ...inputProps,
+            value: realMin,
+            label: labelStart,
+            type: 'number',
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            focused: true,
+            onChange: handleMin
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _IntervalModule.default.interval__item,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.TextFieldInput, {
+            ...inputProps,
+            value: realMax,
+            label: labelEnd,
+            type: 'number',
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            className: _IntervalModule.default.interval__end,
+            focused: true,
+            onChange: handleMax
+          })
+        })]
+      })
+    }), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelperText.default, {
+      className: _IntervalModule.default.interval__helperText,
+      error: error,
+      children: helperText
+    })]
+  });
+});
+var _default = Interval;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/Interval/IntervalSlide.js

@@ -0,0 +1,52 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Interval = _interopRequireDefault(require("./Interval"));
+var _react = require("react");
+var _Slider = _interopRequireDefault(require("../../Slider/Slider"));
+var _IntervalModule = _interopRequireDefault(require("./Interval.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['intervalslide__slider'];
+
+// const css = getCssPrefix(CssClasses)
+
+const IntervalSlide = props => {
+  let {
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = (0, _react.useState)([props.min, props.max]);
+  const handleChange = value => {
+    setValue(value);
+    if (onChange) onChange(value);
+  };
+  const handleSlide = value => {
+    if (Array.isArray(value)) handleChange(value);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Interval.default, {
+        value: value,
+        ...restProps,
+        onChange: setValue
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _IntervalModule.default.intervalslide__slider,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+          range: true,
+          min: props.min,
+          max: props.max,
+          disabled: props.disabled,
+          value: restProps.value || value,
+          size: props.size,
+          onChange: handleSlide
+        })
+      })]
+    })
+  });
+};
+var _default = IntervalSlide;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/Password/Password.js

@@ -0,0 +1,46 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _TextField = _interopRequireDefault(require("../TextField/TextField"));
+var _react = require("react");
+var _ButtonIcon = _interopRequireDefault(require("../../ButtonIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+const Password = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = (0, _react.useState)('');
+  let [isPassword, setIsPassword] = (0, _react.useState)(true);
+  const inputRef = (0, _react.useRef)(ref);
+  const handleChange = e => {
+    setValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+  const handleClick = () => {
+    setIsPassword(prev => !prev);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      value: value,
+      ref: inputRef,
+      ...restProps,
+      type: isPassword ? 'password' : 'text',
+      onChange: handleChange,
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
+        size: 'medium',
+        variant: 'transparent',
+        color: 'neutral',
+        onClick: handleClick,
+        className: 'material_icon',
+        children: isPassword ? 'visibility_off' : 'visibility'
+      })
+    })
+  });
+});
+var _default = Password;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/Period/Period.js

@@ -0,0 +1,73 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _TextField = _interopRequireDefault(require("../TextField/TextField"));
+var _react = require("react");
+var _ButtonIcon = _interopRequireDefault(require("../../ButtonIcon"));
+var _Card = _interopRequireDefault(require("../../Card/Card"));
+var _DatePicker = _interopRequireDefault(require("../DatePicker/DatePicker"));
+var _DateService = require("../../../lib/services/DateService");
+var _PeriodModule = _interopRequireDefault(require("./Period.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['dateField', 'dateField__picker'];
+
+// const css = getCssPrefix(CssClasses)
+
+const Period = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  let {
+    onChange,
+    format = 'DD.MM.YYYY',
+    onInput,
+    ...restProps
+  } = props;
+  let [active, setActive] = (0, _react.useState)(false);
+  let [value, setValue] = (0, _react.useState)([new Date(), null]);
+  const handleClick = () => {
+    setActive(true);
+  };
+  const handleChange = date => {
+    setValue(date);
+    if (date[0] && date[1]) setActive(false);
+    if (onChange) onChange(date);
+  };
+  let displayValue = '';
+  if (value[0] && value[1]) displayValue = `${(0, _DateService.DateService)(value[0]).format('DD.MM.YYYY')} - ${(0, _DateService.DateService)(value[1]).format('DD.MM.YYYY')}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _PeriodModule.default.dateField,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        ref: ref,
+        placeholder: 'дд.мм.гггг - дд.мм.гггг',
+        ...restProps,
+        value: displayValue,
+        onFocus: handleClick,
+        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
+          size: 'medium',
+          variant: 'transparent',
+          color: 'neutral',
+          onClick: handleClick,
+          className: 'material_icon',
+          children: "calendar_today"
+        })
+      }), active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+        className: _PeriodModule.default.dateField__picker,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, {
+          onChange: handleChange,
+          selectsRange: true,
+          onBlur: () => {
+            setActive(false);
+          },
+          selected: value[0],
+          startDate: value[0],
+          endDate: value[1]
+        })
+      })]
+    })
+  });
+});
+var _default = Period;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/ui/Form/Rating/Rating.js

@@ -0,0 +1,58 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _RatingModule = _interopRequireDefault(require("./Rating.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const CssClasses = ['rating', 'rating__item', 'rating_medium', 'rating_small', 'rating__item_disabled'];
+
+// const css = getCssPrefix(CssClasses)
+
+const Rating = props => {
+  let {
+    size = 'large',
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = (0, _react.useState)(props.defaultValue || 0);
+  let [hovered, setHovered] = (0, _react.useState)(0);
+  let realValue = props.value !== undefined ? props.value : value;
+  const handleClick = index => () => {
+    setValue(index);
+    if (onChange) onChange(index);
+  };
+  const handleMouseEnter = index => () => {
+    setHovered(index);
+  };
+  const handleLeaveRating = () => {
+    setHovered(realValue);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _RatingModule.default.rating,
+      onMouseLeave: handleLeaveRating,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        value: value,
+        ...restProps,
+        type: "hidden"
+      }), [...Array(5)].map((_, index) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: handleClick(index + 1),
+          onMouseEnter: handleMouseEnter(index + 1),
+          className: (0, _clsx.default)('material_icon', {
+            ['material_icon_solid']: index + 1 <= hovered || index + 1 <= realValue,
+            [_RatingModule.default.rating__item_disabled]: !!restProps.disabled
+          }, _RatingModule.default.rating__item, _RatingModule.default['rating_' + size]),
+          children: "star"
+        }, index);
+      })]
+    })
+  });
+};
+var _default = Rating;
+exports.default = _default;
+module.exports = exports.default;