armtek-uikit-react 1.0.30 → 1.0.32

package/assets/Badge.scss

@@ -80,4 +80,11 @@ $horizontal_offset: calc(100% - 6px);
   right: $horizontal_offset;
   left: auto;
   bottom: auto;
+}
+.badge__item_center-right{
+  top: 50%;
+  transform: translateY(-50%);
+  left: calc(100%  + 6px);
+  right: auto;
+  bottom: auto;
 }

package/assets/Chip.scss

@@ -93,4 +93,8 @@ button.chip_primary{
   &:hover{
     background-color: $color-primary-dark;
   }
+}
+.chip_disabled{
+  pointer-events: none;
+  opacity: 0.5;
 }

package/assets/Select.scss

@@ -20,7 +20,59 @@
   left:0;
   top:100%;
   width:100%;
+  background: #fff;
+  z-index: 100;
 }
 .options_inline{
   position: static;
+}
+.selectSummary__wrapper{
+  padding: calc($size-step * 2) calc($size-step * 2) 0;
+  & .selectSummary{
+    padding-bottom: $size-step;
+    border-top: 1px solid $color-gray-300;
+  }
+}
+.selectSummary{
+  background: #fff;
+}
+.selectSummary__row{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.selectSummary__check{
+  margin-right: 60px;
+  font-size: 13px;
+  color: $color-gray-600;
+  cursor: pointer;
+  &:nth-child(2){
+    margin-right: auto;
+  }
+}
+.selectSummary__check_disabled{
+  opacity: 0.5;
+  cursor: default;
+}
+.selectSummary__checkLabel{
+  border-bottom: 1px dotted $color-gray-600;
+}
+.selectSummary__options{
+  border-bottom: 1px solid $color-gray-300;
+  padding: calc($size-step / 2) 0 calc($size-step) 0;
+  margin-bottom: calc($size-step / 2);
+}
+.selectSummary__optionList{
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.selectSummary__option{
+  margin-right: $size-step;
+  margin-top: $size-step;
+}
+.selectSummary__button{
+  width: 100px;
+  padding-left: 0;
+  padding-right: 0;
 }

package/assets/TextField.scss

@@ -100,6 +100,7 @@
   transition: 0.2s all ease;
   width: calc(100% - 2px);
   padding-top:8px;
+  line-height: 1.2;
   &_small{
     top: 4px;
   }

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.30","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.32","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Adornment/Adornment.js

@@ -17,7 +17,7 @@ const Adornment = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
       ...spanProps,
-      className: clsx(className, 'Arm-adornment', {
+      className: clsx(className, 'Arm-adornment', css.adornment, {
         [css['adornment_start']]: position === 'start',
         [css['adornment_end']]: position !== 'start'
       }),

package/ui/Badge/Badge.d.ts

@@ -4,8 +4,8 @@ export type BadgeProps = {
     color?: ColorType | ColorStatusType;
     children: ReactNode | string;
     shape?: ShapeType;
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-    badgeText?: string;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center-right';
+    badgeText?: string | number;
 };
 declare function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/ui/Badge/Badge.js

@@ -3,7 +3,7 @@ import css from "./Badge.module.scss";
 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 BadgeClasses = ['badge', 'badge__item_primary', 'badge__item_secondary', 'badge__item_neutral', 'badge__item_error', 'badge__item_info', 'badge__item_warning', 'badge__item_success', 'badge__item_content', 'badge__item_content_circle', 'badge__item_content_square', 'badge__item_content_circle', 'badge__item_top-right', 'badge__item_top-left', 'badge__item_bottom-right', 'badge__item_bottom-left'];
+const BadgeClasses = ['badge', 'badge__item_primary', 'badge__item_secondary', 'badge__item_neutral', 'badge__item_error', 'badge__item_info', 'badge__item_warning', 'badge__item_success', 'badge__item_content', 'badge__item_content_circle', 'badge__item_content_square', 'badge__item_content_circle', 'badge__item_top-right', 'badge__item_top-left', 'badge__item_bottom-right', 'badge__item_bottom-left', 'badge__item_center-right'];
 
 // const css = getCssPrefix(BadgeClasses)
 
@@ -21,9 +21,9 @@ function Badge(props) {
         children: props.children
       }), /*#__PURE__*/_jsx("span", {
         className: clsx(css.badge__item, css['badge__item_' + color], css['badge__item_' + shape], css['badge__item_' + position], {
-          [css.badge__item_content]: !!props.badgeText && !shape,
-          [css.badge__item_content_circle]: !!props.badgeText && shape === 'circle',
-          [css.badge__item_content_square]: !!props.badgeText && shape === 'square'
+          [css.badge__item_content]: props.badgeText !== undefined && !shape,
+          [css.badge__item_content_circle]: !!props.badgeText !== undefined && shape === 'circle',
+          [css.badge__item_content_square]: !!props.badgeText !== undefined && shape === 'square'
         }),
         children: props.badgeText
       })]

package/ui/Chip/Chip.d.ts

@@ -8,6 +8,8 @@ export type ChipProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpa
     icon?: string;
     variant?: Exclude<VariantType, 'transparent'>;
     as?: T;
+    disabled?: boolean;
+    className?: string;
 };
 declare function Chip<T extends ElementType>(props: ChipProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Chip;

package/ui/Chip/Chip.js

@@ -16,12 +16,16 @@ function Chip(props) {
     as,
     variant,
     color,
-    children
+    className,
+    children,
+    disabled
   } = props;
   let Component = as || 'span';
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Component, {
-      className: clsx('Arm-chip', css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color]),
+      className: clsx('Arm-chip', className, {
+        [css.chip_disabled]: !!disabled
+      }, css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color]),
       children: /*#__PURE__*/_jsxs("span", {
         className: css.chip__inner,
         children: [icon && /*#__PURE__*/_jsx("span", {
@@ -30,7 +34,9 @@ function Chip(props) {
         }), /*#__PURE__*/_jsx("span", {
           children: text || children
         }), onClose && /*#__PURE__*/_jsx("span", {
-          className: clsx('material_icon_solid', css['chip__close_' + size], css['chip__close_' + color], css.chip__close),
+          className: clsx('material_icon_solid', {
+            [css.chip__close_disabled]: !!disabled
+          }, css['chip__close_' + size], css['chip__close_' + color], css.chip__close),
           onClick: onClose,
           children: "cancel"
         })]

package/ui/Form/Select/Select.d.ts

@@ -5,6 +5,10 @@ type SelectBaseProps = {
     inline?: boolean;
     search?: boolean;
     open?: boolean;
+    listStyle?: SelectOptionsType<true>['listStyle'];
+    onSelectAll: () => void;
+    onClearAll: () => void;
+    onSubmit: () => void;
 };
 type SelectSingleProps = {
     multiple?: false;
@@ -22,4 +26,16 @@ 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;
+type SelectOptionsType<T extends boolean> = {
+    options: OptionType[];
+    value?: T extends true ? string[] : string;
+    inline?: boolean;
+    multiple?: T;
+    onClick: (option: OptionType) => void;
+    listStyle?: 'checkbox' | 'default';
+    onSelectAll: () => void;
+    onClearAll: () => void;
+    onSubmit: () => void;
+    disabled?: boolean;
+};
 export default Select;

package/ui/Form/Select/Select.js

@@ -8,6 +8,7 @@ import useClickOutside from "../../../lib/hooks/useClickOutside";
 import css from "./Select.module.scss";
 import ButtonIcon from "../../ButtonIcon";
 import Adornment from "../../Adornment";
+import { SelectSummary, SelectSummaryChips } from "./SelectSummary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,6 +30,10 @@ function Select(props) {
     onChange,
     search,
     open,
+    listStyle,
+    onSubmit,
+    onClearAll,
+    onSelectAll,
     ...inputProps
   } = props;
   let [active, setActive] = useState(false);
@@ -37,12 +42,12 @@ function Select(props) {
   let [q, setQ] = useState('');
   let selectRef = useRef(null);
   let optRef = useClickOutside(() => setActive(false));
-  const handleActive = flag => {
-    setActive(prev => flag !== undefined ? flag : !prev);
+  const handleOpen = flag => {
+    if (!inputProps.disabled) setActive(prev => flag !== undefined ? flag : !prev);
   };
   const handleSelect = option => {
     let v = getOptionValue(option);
-    let mSelected = selected;
+    let mSelected = Array.isArray(selected) ? selected : [selected];
     let newValueS = v;
     let newValueM = mSelected.includes(v) ? mSelected.filter(item => item !== v) : mSelected.concat(v);
     setSelected(multiple ? newValueM : newValueS);
@@ -81,7 +86,6 @@ function Select(props) {
     children: [/*#__PURE__*/_jsx(Adornment, {
       children: endAdornment
     }), /*#__PURE__*/_jsx(ButtonIcon, {
-      onClick: () => handleActive,
       size: 'small',
       variant: 'transparent',
       className: 'material_icon',
@@ -95,17 +99,33 @@ function Select(props) {
   // 	selectProps.onChange = handleChange
   // }
 
+  const handleSelectAll = () => {
+    let value = options.map(item => getOptionValue(item));
+    setSelected(value);
+    if (onChange) onChange(value);
+  };
+  const handleResetAll = () => {
+    setSelected([]);
+    if (onChange) onChange([]);
+  };
+  const handleSubmit = () => {
+    if (open === undefined) setActive(false);else if (onSubmit) {
+      onSubmit();
+    }
+  };
   let realValue = value !== undefined ? value : selected;
   let realActive = open !== undefined ? open : active;
   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) || '';
   if (!!search) options = options.filter(item => item.text.toLowerCase().includes(q.toLowerCase()));
+  let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
+  let selectedOptions = options.filter(item => valueArr.includes(getOptionValue(item)));
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       className: css.select,
       ref: optRef,
       children: [/*#__PURE__*/_jsxs("div", {
         className: css.select__input_wrapper,
-        onClick: () => setActive(true),
+        onClick: () => handleOpen(true),
         children: [/*#__PURE__*/_jsx("select", {
           multiple: multiple,
           ref: selectRef,
@@ -130,12 +150,21 @@ function Select(props) {
           },
           editable: !!search
         })]
+      }), multiple && !realActive && /*#__PURE__*/_jsx(SelectSummaryChips, {
+        options: selectedOptions,
+        disabled: inputProps.disabled,
+        onDelete: handleSelect
       }), realActive && /*#__PURE__*/_jsx(SelectOptions, {
+        disabled: inputProps.disabled,
         options: options,
         multiple: multiple,
         value: realValue,
         inline: inline,
-        onClick: handleSelect
+        listStyle: listStyle,
+        onClick: handleSelect,
+        onClearAll: handleResetAll,
+        onSelectAll: handleSelectAll,
+        onSubmit: handleSubmit
       })]
     })
   });
@@ -146,23 +175,38 @@ const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
     value,
     multiple,
     inline,
-    onClick
+    onClick,
+    listStyle,
+    disabled,
+    ...callbacks
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       ref: ref,
       className: clsx(css.options, {
         [css.options_inline]: !!inline
       }),
-      children: options.map((item, index) => {
+      children: [options.map((item, index) => {
         let optValue = getOptionValue(item);
         let active = multiple === true && value ? value.includes(optValue) : optValue === value;
+        let checked = listStyle === 'checkbox' && !!multiple ? active : undefined;
         return /*#__PURE__*/_jsx(ListItem, {
+          disabled: disabled,
+          checked: checked,
           active: active,
           onClick: () => onClick(item),
           children: item.text
         }, index);
-      })
+      }), listStyle === 'checkbox' && !!multiple && /*#__PURE__*/_jsx("div", {
+        className: css.selectSummary__wrapper,
+        children: /*#__PURE__*/_jsx(SelectSummary, {
+          options: options,
+          value: value,
+          onClose: onClick,
+          disabled: disabled,
+          ...callbacks
+        })
+      })]
     })
   });
 });

package/ui/Form/Select/SelectSummary.d.ts

@@ -0,0 +1,21 @@
+import { OptionType } from '../../../types/theme';
+export type SelectSummaryProps = {
+    label_check_all?: string;
+    label_uncheck_all?: string;
+    label_submit?: string;
+    onClose: (option: OptionType) => void;
+    onSelectAll: () => void;
+    onClearAll: () => void;
+    onSubmit: () => void;
+    options: OptionType[];
+    value: string[];
+    disabled?: boolean;
+};
+export declare const SelectSummary: (props: SelectSummaryProps) => import("react/jsx-runtime").JSX.Element;
+type SelectSummaryChipsProps = {
+    options: OptionType[];
+    disabled?: boolean;
+    onDelete: (option: OptionType) => void;
+};
+export declare const SelectSummaryChips: (props: SelectSummaryChipsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Form/Select/SelectSummary.js

@@ -0,0 +1,104 @@
+import Badge from "../../Badge";
+import Button from "../../Button";
+import clsx from 'clsx';
+import css from "./Select.module.scss";
+import Chip from "../../Chip";
+import { getOptionValue } from "./Select";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const SelectSummary = props => {
+  let {
+    label_check_all = 'Выбрать все',
+    label_uncheck_all = 'Очистить все',
+    label_submit = 'Применить',
+    options,
+    value,
+    onClose,
+    onSubmit,
+    onClearAll,
+    onSelectAll,
+    disabled
+  } = props;
+  let valueArr = value ? Array.isArray(value) ? value : [value] : [];
+  let selectedOptions = options.filter(item => valueArr.includes(getOptionValue(item)));
+  let selectAllDisabled = disabled || selectedOptions.length === options.length;
+  let resetAllDisabled = disabled || selectedOptions.length === 0;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx('Arm-select-summary', css.selectSummary),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: css.selectSummary__options,
+        children: /*#__PURE__*/_jsx(SelectSummaryChips, {
+          options: selectedOptions,
+          onDelete: onClose,
+          disabled: disabled
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: css.selectSummary__row,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: clsx(css.selectSummary__check, {
+            [css.selectSummary__check_disabled]: selectAllDisabled
+          }),
+          children: /*#__PURE__*/_jsx(Badge, {
+            badgeText: options.length,
+            shape: 'square',
+            color: 'info',
+            position: 'center-right',
+            children: /*#__PURE__*/_jsx("span", {
+              className: css.selectSummary__checkLabel,
+              onClick: onSelectAll,
+              children: label_check_all
+            })
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: clsx(css.selectSummary__check, {
+            [css.selectSummary__check_disabled]: resetAllDisabled
+          }),
+          children: /*#__PURE__*/_jsx(Badge, {
+            badgeText: selectedOptions.length,
+            shape: 'square',
+            color: 'info',
+            position: 'center-right',
+            children: /*#__PURE__*/_jsx("span", {
+              className: css.selectSummary__checkLabel,
+              onClick: onClearAll,
+              children: label_uncheck_all
+            })
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            className: css.selectSummary__button,
+            disabled: disabled,
+            variant: 'transparent',
+            size: 'small',
+            onClick: onSubmit,
+            children: /*#__PURE__*/_jsx("span", {
+              children: label_submit
+            })
+          })
+        })]
+      })]
+    })
+  });
+};
+export const SelectSummaryChips = props => {
+  let {
+    options,
+    onDelete,
+    disabled
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: css.selectSummary__optionList,
+      children: options.map(option => {
+        return /*#__PURE__*/_jsx(Chip, {
+          disabled: disabled,
+          className: css.selectSummary__option,
+          text: option.text,
+          onClose: () => onDelete(option)
+        }, getOptionValue(option));
+      })
+    })
+  });
+};

package/ui/List/ListItem.js

@@ -34,6 +34,7 @@ const ListItem = props => {
         children: [checked !== undefined && /*#__PURE__*/_jsx(Adornment, {
           position: 'start',
           children: /*#__PURE__*/_jsx(Checkbox, {
+            disabled: restProps.disabled,
             checked: checked,
             readOnly: true,
             size: 'small'