armtek-uikit-react 1.0.2 → 1.0.4

package/lib/esm/Form/Interval/Interval.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { TextFieldProps } from '../TextField/TextField';
+export type IntervalProps = {
+    min: number;
+    max: number;
+    value?: [number, number];
+    onChange?: (value: [number, number]) => void;
+    labelStart?: string;
+    labelEnd?: string;
+    defaultValue?: [number, number];
+} & Omit<TextFieldProps, 'onChange' | 'value'>;
+declare const Interval: import("react").ForwardRefExoticComponent<{
+    min: number;
+    max: number;
+    value?: [number, number] | undefined;
+    onChange?: ((value: [number, number]) => void) | undefined;
+    labelStart?: string | undefined;
+    labelEnd?: string | undefined;
+    defaultValue?: [number, number] | undefined;
+} & Omit<TextFieldProps, "value" | "onChange"> & import("react").RefAttributes<unknown>>;
+export default Interval;

package/lib/esm/Form/Interval/Interval.js

@@ -0,0 +1,94 @@
+"use client";
+
+import { forwardRef, useState } from 'react';
+import css from './Interval.module.scss';
+import { TextFieldContainer, TextFieldInput } from '../TextField/TextField';
+import HelperText from '../../Typography/HelperText/HelperText';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Interval = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    value,
+    defaultValue,
+    labelStart,
+    labelEnd,
+    onChange,
+    helperText,
+    error,
+    disabled,
+    min = 0,
+    max = 0,
+    ...inputProps
+  } = props;
+  let [focused, setFocused] = useState(false);
+  let [currentMin, setCurrentMin] = useState(min);
+  let [currentMax, setCurrentMax] = 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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextFieldContainer, {
+      focused: focused,
+      error: error,
+      disabled: disabled,
+      size: inputProps.size,
+      variant: inputProps.variant,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: css.interval,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: css.interval__item,
+          children: /*#__PURE__*/_jsx(TextFieldInput, {
+            ...inputProps,
+            value: realMin,
+            label: labelStart,
+            type: 'number',
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            focused: true,
+            onChange: handleMin
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: css.interval__item,
+          children: /*#__PURE__*/_jsx(TextFieldInput, {
+            ...inputProps,
+            value: realMax,
+            label: labelEnd,
+            type: 'number',
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            className: css.interval__end,
+            focused: true,
+            onChange: handleMax
+          })
+        })]
+      })
+    }), helperText && /*#__PURE__*/_jsx(HelperText, {
+      className: css.interval__helperText,
+      error: error,
+      children: helperText
+    })]
+  });
+});
+export default Interval;

package/lib/esm/Form/Interval/Interval.module.scss

@@ -0,0 +1,35 @@
+@import "../../assets/styles";
+
+.interval{
+  @include flex();
+  width: 100%;
+  & input{
+    -moz-appearance: textfield;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+}
+.interval__end{
+  text-align: right;
+  & + span{
+    text-align: right;
+    padding-left: 0;
+    padding-right: 12px;
+  }
+}
+.interval__item{
+  max-width: 50%;
+  flex: 0 0 50%;
+}
+
+.interval__helperText{
+  margin-top: calc($size-step / 2);
+}
+
+.intervalslide__slider{
+  padding: 0 calc($size-step * 2);
+  margin-top: -7px;
+}

package/lib/esm/Form/Interval/IntervalSlide.d.ts

@@ -0,0 +1,4 @@
+import { IntervalProps } from './Interval';
+type PropsType = IntervalProps;
+declare const IntervalSlide: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default IntervalSlide;

package/lib/esm/Form/Interval/IntervalSlide.js

@@ -0,0 +1,44 @@
+"use client";
+
+import Interval from './Interval';
+import css from './Interval.module.scss';
+import { useState } from 'react';
+import Slider from '../../Slider/Slider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const IntervalSlide = props => {
+  let {
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = 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__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Interval, {
+        value: value,
+        ...restProps,
+        onChange: setValue
+      }), /*#__PURE__*/_jsx("div", {
+        className: css.intervalslide__slider,
+        children: /*#__PURE__*/_jsx(Slider, {
+          range: true,
+          min: props.min,
+          max: props.max,
+          disabled: props.disabled,
+          value: restProps.value || value,
+          size: props.size,
+          onChange: handleSlide
+        })
+      })]
+    })
+  });
+};
+export default IntervalSlide;

package/lib/esm/Form/Password/Password.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const Password: import("react").ForwardRefExoticComponent<{
+    label?: string | undefined;
+    size?: "small" | "large" | undefined;
+    variant?: import("../../shared/types/theme").VariantType | undefined;
+    error?: boolean | undefined;
+    success?: boolean | undefined;
+    helperText?: string | undefined;
+    endAdornment?: import("react").ReactNode;
+    multiline?: boolean | undefined;
+} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default Password;

package/lib/esm/Form/Password/Password.js

@@ -0,0 +1,41 @@
+"use client";
+
+import TextField from '../TextField/TextField';
+import { forwardRef, useRef, useState } from 'react';
+import ButtonIcon from '../../Button/ButtonIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Password = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = useState('');
+  let [isPassword, setIsPassword] = useState(true);
+  const inputRef = useRef(ref);
+  const handleChange = e => {
+    setValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+  const handleClick = () => {
+    setIsPassword(prev => !prev);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(TextField, {
+      value: value,
+      ref: inputRef,
+      ...restProps,
+      type: isPassword ? 'password' : 'text',
+      onChange: handleChange,
+      endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
+        size: 'medium',
+        variant: 'transparent',
+        color: 'neutral',
+        onClick: handleClick,
+        className: 'material_icon',
+        children: isPassword ? 'visibility_off' : 'visibility'
+      })
+    })
+  });
+});
+export default Password;

package/lib/esm/Form/Password/Password.module.scss

@@ -0,0 +1,2 @@
+@import "../../assets/styles";
+

package/lib/esm/Form/Period/Period.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare const Period: import("react").ForwardRefExoticComponent<{
+    format?: string | undefined;
+    onChange?: ((value: [Date | null, Date | null]) => void) | undefined;
+} & {
+    label?: string | undefined;
+    size?: "small" | "large" | undefined;
+    variant?: import("../../shared/types/theme").VariantType | undefined;
+    error?: boolean | undefined;
+    success?: boolean | undefined;
+    helperText?: string | undefined;
+    endAdornment?: import("react").ReactNode;
+    multiline?: boolean | undefined;
+} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default Period;

package/lib/esm/Form/Period/Period.js

@@ -0,0 +1,65 @@
+"use client";
+
+import TextField from '../TextField/TextField';
+import { forwardRef, useState } from 'react';
+import css from './Period.module.scss';
+import ButtonIcon from '../../Button/ButtonIcon';
+import Card from '../../Card/Card';
+import DatePicker from '../DatePicker/DatePicker';
+import { DateService } from '../../services/DateService';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Period = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    onChange,
+    format = 'DD.MM.YYYY',
+    onInput,
+    ...restProps
+  } = props;
+  let [active, setActive] = useState(false);
+  let [value, setValue] = 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 = `${DateService(value[0]).format('DD.MM.YYYY')} - ${DateService(value[1]).format('DD.MM.YYYY')}`;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: css.dateField,
+      children: [/*#__PURE__*/_jsx(TextField, {
+        ref: ref,
+        placeholder: 'дд.мм.гггг - дд.мм.гггг',
+        ...restProps,
+        value: displayValue,
+        onFocus: handleClick,
+        endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
+          size: 'medium',
+          variant: 'transparent',
+          color: 'neutral',
+          onClick: handleClick,
+          className: 'material_icon',
+          children: "calendar_today"
+        })
+      }), active && /*#__PURE__*/_jsx(Card, {
+        className: css.dateField__picker,
+        children: /*#__PURE__*/_jsx(DatePicker, {
+          onChange: handleChange,
+          selectsRange: true,
+          onBlur: () => {
+            setActive(false);
+          },
+          selected: value[0],
+          startDate: value[0],
+          endDate: value[1]
+        })
+      })]
+    })
+  });
+});
+export default Period;

package/lib/esm/Form/Period/Period.module.scss

@@ -0,0 +1,10 @@
+@import "../../assets/styles";
+
+.dateField{
+  position: relative;
+}
+.dateField__picker{
+  position: absolute;
+  top: 100%;
+  right: 0;
+}

package/lib/esm/Form/Rating/Rating.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { SizeType } from '../../shared/types/theme';
+type PropsType = {
+    size?: Exclude<SizeType, 'extraLarge'>;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+} & Omit<InputHTMLAttributes<any>, 'value' | 'onChange' | 'defaultValue' | 'size'>;
+declare const Rating: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default Rating;

package/lib/esm/Form/Rating/Rating.js

@@ -0,0 +1,50 @@
+"use client";
+
+import css from './Rating.module.scss';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Rating = props => {
+  let {
+    size = 'large',
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = useState(props.defaultValue || 0);
+  let [hovered, setHovered] = 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__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: css.rating,
+      onMouseLeave: handleLeaveRating,
+      children: [/*#__PURE__*/_jsx("input", {
+        value: value,
+        ...restProps,
+        type: "hidden"
+      }), [...Array(5)].map((_, index) => {
+        return /*#__PURE__*/_jsx("div", {
+          onClick: handleClick(index + 1),
+          onMouseEnter: handleMouseEnter(index + 1),
+          className: clsx('material_icon', {
+            ['material_icon_solid']: index + 1 <= hovered || index + 1 <= realValue,
+            [css.rating__item_disabled]: !!restProps.disabled
+          }, css.rating__item, css['rating_' + size]),
+          children: "star"
+        }, index);
+      })]
+    })
+  });
+};
+export default Rating;

package/lib/esm/Form/Rating/Rating.module.scss

@@ -0,0 +1,19 @@
+@import "../../assets/styles";
+
+.rating{
+  @include flex();
+}
+.rating__item{
+  cursor: pointer;
+  color: #F7B519;
+  font-size: 30px;
+}
+.rating_medium{
+  font-size: 24px;
+}
+.rating_small{
+  font-size: 18px;
+}
+.rating__item_disabled{
+  color: $color-gray-400;
+}

package/lib/esm/Form/Select/Select.d.ts

@@ -0,0 +1,23 @@
+import { OptionType } from '../../shared/types/theme';
+import { TextFieldProps } from '../TextField/TextField';
+type SelectBaseProps = {
+    options: OptionType[];
+    inline?: boolean;
+};
+type SelectSingleProps = {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (option: string) => void;
+};
+type SelectMultipleProps = {
+    multiple?: true;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (option: string[]) => void;
+};
+type SelectProps = SelectMultipleProps | SelectSingleProps;
+type SelectPropsType = SelectBaseProps & SelectProps & Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'>;
+export declare const getOptionValue: (option: OptionType) => string;
+declare function Select(props: SelectPropsType): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/lib/esm/Form/Select/Select.js

@@ -0,0 +1,135 @@
+"use client";
+
+import TextField from '../TextField/TextField';
+import { forwardRef, useRef, useState } from 'react';
+import css from './Select.module.scss';
+import ButtonIcon from '../../Button/ButtonIcon';
+import clsx from 'clsx';
+import ListItem from '../../List/ListItem';
+import useClickOutside from '../../hooks/useClickOutside';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const getOptionValue = option => option.value || option.text;
+function Select(props) {
+  var _options$find;
+  let {
+    options,
+    endAdornment,
+    className,
+    inline,
+    multiple = false,
+    value,
+    defaultValue,
+    onChange,
+    ...inputProps
+  } = props;
+  let [active, setActive] = useState(false);
+  let [selected, setSelected] = useState(defaultValue || (multiple ? [] : ''));
+  let selectRef = useRef(null);
+  let optRef = useClickOutside(() => setActive(false));
+  const handleActive = flag => {
+    setActive(prev => flag !== undefined ? flag : !prev);
+  };
+  const handleSelect = option => {
+    let v = getOptionValue(option);
+    let mSelected = selected;
+    let newValueS = v;
+    let newValueM = mSelected.includes(v) ? mSelected.filter(item => item !== v) : mSelected.concat(v);
+    setSelected(multiple ? newValueM : newValueS);
+    if (onChange) onChange(multiple ? newValueM : newValueS);
+    if (!multiple) setActive(false);
+
+    // if(selectRef.current)
+    // 	selectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
+  };
+
+  // const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+  // let option = options.find(item => getOptionValue(item) === e.target.value)
+  // if( option )
+  // {
+  // 	let v = getOptionValue(option)
+  // 	setSelected(!multiple ? v : prev => prev?.concat(v) || [v])
+  // 	if( !multiple )
+  // 		setActive(false)
+  // }
+  // }
+
+  let selectEndAdornment = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [endAdornment, /*#__PURE__*/_jsx(ButtonIcon, {
+      onClick: () => handleActive,
+      size: 'small',
+      variant: 'transparent',
+      className: 'material_icon',
+      children: "arrow_drop_down"
+    })]
+  });
+  let selectProps = {};
+  // if( value !== undefined )
+  // {
+  // 	selectProps.value = value
+  // 	selectProps.onChange = handleChange
+  // }
+
+  let realValue = value !== undefined ? value : selected;
+  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) || '';
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: css.select,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: css.select__input_wrapper,
+        children: [/*#__PURE__*/_jsx("select", {
+          multiple: multiple,
+          ref: selectRef,
+          ...selectProps,
+          style: {
+            display: 'none'
+          },
+          children: options.map(item => /*#__PURE__*/_jsx("option", {
+            children: item.text
+          }, item.text))
+        }), /*#__PURE__*/_jsx(TextField, {
+          ...inputProps,
+          value: selectedText,
+          onClick: () => setActive(true),
+          className: clsx(css.select__input, className),
+          endAdornment: selectEndAdornment
+        })]
+      }), active && /*#__PURE__*/_jsx(SelectOptions, {
+        ref: optRef,
+        options: options,
+        multiple: multiple,
+        value: realValue,
+        inline: inline,
+        onClick: handleSelect
+      })]
+    })
+  });
+}
+const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    options,
+    value,
+    multiple,
+    inline,
+    onClick
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: clsx(css.options, {
+        [css.options_inline]: !!inline
+      }),
+      children: options.map((item, index) => {
+        let optValue = getOptionValue(item);
+        let active = multiple === true && value ? value.includes(optValue) : optValue === value;
+        return /*#__PURE__*/_jsx(ListItem, {
+          active: active,
+          onClick: () => onClick(item),
+          children: item.text
+        }, index);
+      })
+    })
+  });
+});
+export default Select;

package/lib/esm/Form/Select/Select.module.scss

@@ -0,0 +1,26 @@
+@import "../../assets/styles";
+
+.select{
+  position: relative;
+}
+.select__input_wrapper{
+
+}
+.select__input{
+  cursor: pointer;
+  & * {
+    cursor: pointer;
+  }
+}
+.options{
+  padding: $size-step 0;
+  border-radius: $radius;
+  box-shadow: $box-shadow;
+  position: absolute;
+  left:0;
+  top:100%;
+  width:100%;
+}
+.options_inline{
+  position: static;
+}

package/lib/esm/Form/Switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from 'react';
+import { SizeType } from '../../shared/types/theme';
+type SwitchProps = {
+    size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
+} & Omit<InputHTMLAttributes<any>, 'size'>;
+declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default Switch;

package/lib/esm/Form/Switch/Switch.js

@@ -0,0 +1,25 @@
+import css from './Switch.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Switch = props => {
+  let {
+    onChange,
+    size,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("label", {
+      className: clsx(css.switch, css['switch_' + props.size]),
+      children: [/*#__PURE__*/_jsx("input", {
+        className: css.switch__input,
+        ...restProps,
+        type: "checkbox"
+      }), /*#__PURE__*/_jsx("span", {
+        className: css.switch__slider
+      })]
+    })
+  });
+};
+export default Switch;