@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Pagination.js

@@ -0,0 +1,372 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var ceil = require('lodash/ceil');
+var ReactPaginate = require('react-paginate');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Text = require('../Text-CfBPhwqK.js');
+var index = require('./Icon.js');
+var DropdownItem = require('../DropdownItem-DT8iQfVh.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('react-inlinesvg');
+require('./Link.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
+require('./Divider.js');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/width.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var ceil__default = /*#__PURE__*/_interopDefault(ceil);
+var ReactPaginate__default = /*#__PURE__*/_interopDefault(ReactPaginate);
+
+function Pagination(props) {
+  const {
+    pageNumber,
+    perPageCount,
+    allItemsCount,
+    className,
+    forcePage,
+    pageCount,
+    marginPagesDisplayed,
+    pageRangeDisplayed,
+    previousLabel,
+    nextLabel,
+    isPageCount,
+    pageCountArray,
+    pageCountDesc,
+    pageCountDescTextColor,
+    pageCountDescTextSize,
+    pageCountInput,
+    pageCountInputTextColor,
+    pageCountInputTextSize,
+    pageCountInputIcon,
+    pageCountInputIconFill,
+    pageCountInputIconFillSize,
+    pageCountInputIconColor,
+    pageCountDropdownAlignment,
+    pageCountDropdownElevation,
+    pageCountDropdownFill,
+    pageCountDropdownSet,
+    pageCountDropdownShape,
+    pageCountDropdownItemDividerDirection,
+    pageCountDropdownItemDividerFill,
+    pageCountDropdownItemDividerSize,
+    pageCountDropdownItemShowDivider,
+    onPerPageCountChange,
+    pageCountDropdownItemFill,
+    pageCountDropdownItemFillActive,
+    pageCountDropdownItemFillActiveHover,
+    pageCountDropdownItemFillHover,
+    pageCountDropdownItemLabel,
+    pageCountDropdownItemLabelColor,
+    pageCountDropdownItemLabelColorActive,
+    pageCountDropdownItemLabelSize,
+    pageCountDropdownItemLabelWrap,
+    pageCountDropdownItemSet,
+    isPageCountDropdownReversed,
+    onPageChange
+  } = props;
+  const [isOpenDropdown, setIsOpenDropdown] = React.useState(false);
+  const [activeDropdownItem, setActiveDropdownItem] = React.useState(10);
+  // Toggle command menu
+  const onClickCommandMenuButton = React.useCallback(event => {
+    setIsOpenDropdown(state => !state);
+  }, []);
+  const handleDropdownItemClick = React.useCallback(item => {
+    onPerPageCountChange(item);
+    setActiveDropdownItem(item);
+    setIsOpenDropdown(false);
+  }, [onPerPageCountChange]);
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'pagination_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'gap_',
+    propsKey: 'gap'
+  });
+
+  // Calculate count of pages for all items
+  const paginationPagesCount = React.useMemo(() => {
+    if (allItemsCount && allItemsCount > 0) {
+      // Round up. "perPageCount" may be is a query params "limit"
+      return ceil__default.default(allItemsCount / perPageCount);
+    }
+    return 0;
+  }, [allItemsCount, perPageCount]);
+
+  // Index for pagination state
+  const paginationPageIndex = React.useMemo(() => {
+    const intPageNumber = parseInt(pageNumber);
+    // For pagination need index of page, not number
+    if (!isNaN(intPageNumber) && intPageNumber > 1) {
+      return intPageNumber - 1;
+    }
+    return 0;
+  }, [pageNumber]);
+  if (paginationPagesCount <= 1) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: "pagination"
+  }, /*#__PURE__*/React__default.default.createElement(ReactPaginate__default.default, {
+    activeClassName: "pagination__item_state_active cursor_type_default",
+    breakClassName: "pagination__item pagination__item_break",
+    disabledClassName: "pagination__item_state_disabled cursor_type_default",
+    disabledLinkClassName: "pagination__item_state_disabled",
+    marginPagesDisplayed: marginPagesDisplayed,
+    nextClassName: "pagination__item pagination__item_next",
+    pageCount: paginationPagesCount,
+    pageLinkClassName: "pagination__item-link",
+    pageRangeDisplayed: pageRangeDisplayed,
+    previousClassName: "pagination__item pagination__item_previous",
+    onPageChange: onPageChange,
+    activeLinkClassName: "pagination__item-link_state_active"
+    // previous button
+    ,
+    previousLabel: previousLabel,
+    breakLinkClassName: "pagination__item-link"
+    // pages settings
+    ,
+    forcePage: paginationPageIndex,
+    containerClassName: clsx__default.default(className, 'pagination__container', justifyContentClass)
+    // page item
+    ,
+    pageClassName: "pagination__item",
+    nextLinkClassName: "pagination__item-link"
+    // break element
+    ,
+    breakLabel: "...",
+    previousLinkClassName: "pagination__item-link"
+    // next button
+    ,
+    nextLabel: nextLabel
+  }), isPageCount && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'pagination__count', gapClass)
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: pageCountDescTextSize,
+    textColor: pageCountDescTextColor
+  }, pageCountDesc), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "pagination__input"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    size: pageCountInputTextSize,
+    textColor: pageCountInputTextColor
+  }, activeDropdownItem), /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    fill: pageCountInputIconFill,
+    fillSize: pageCountInputIconFillSize,
+    iconFill: pageCountInputIconColor,
+    SvgImage: pageCountInputIcon,
+    onClick: onClickCommandMenuButton
+  }), /*#__PURE__*/React__default.default.createElement(DropdownItem.Dropdown, {
+    alignment: pageCountDropdownAlignment,
+    elevation: pageCountDropdownElevation,
+    fill: pageCountDropdownFill,
+    isOpen: isOpenDropdown,
+    set: pageCountDropdownSet,
+    setIsOpen: setIsOpenDropdown,
+    shape: pageCountDropdownShape
+  }, (isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray).map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.default.createElement(DropdownItem.DropdownItem, {
+    dividerDirection: pageCountDropdownItemDividerDirection,
+    dividerFill: pageCountDropdownItemDividerFill,
+    dividerSize: pageCountDropdownItemDividerSize,
+    fill: pageCountDropdownItemFill,
+    fillActive: pageCountDropdownItemFillActive,
+    fillActiveHover: pageCountDropdownItemFillActiveHover,
+    fillHover: pageCountDropdownItemFillHover,
+    isActive: true,
+    key: item,
+    label: item,
+    labelTextColor: pageCountDropdownItemLabelColor,
+    labelTextColorActive: pageCountDropdownItemLabelColorActive,
+    labelTextSize: pageCountDropdownItemLabelSize,
+    labelTextWrap: pageCountDropdownItemLabelWrap,
+    set: pageCountDropdownItemSet,
+    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
+    onClick: () => handleDropdownItemClick(item)
+  }) : /*#__PURE__*/React__default.default.createElement(DropdownItem.DropdownItem, {
+    dividerDirection: pageCountDropdownItemDividerDirection,
+    dividerFill: pageCountDropdownItemDividerFill,
+    dividerSize: pageCountDropdownItemDividerSize,
+    fill: pageCountDropdownItemFill,
+    fillHover: pageCountDropdownItemFillHover,
+    isActive: false,
+    key: item,
+    label: item,
+    labelTextColor: pageCountDropdownItemLabelColor,
+    labelTextColorActive: pageCountDropdownItemLabelColorActive,
+    labelTextSize: pageCountDropdownItemLabelSize,
+    labelTextWrap: pageCountDropdownItemLabelWrap,
+    set: pageCountDropdownItemSet,
+    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
+    onClick: () => handleDropdownItemClick(item)
+  }))))));
+}
+Pagination.propTypes = {
+  /**
+   *Количество всех элементов
+   */
+  allItemsCount: PropTypes__default.default.number,
+  isPageCountDropdownReversed: PropTypes__default.default.bool,
+  /**
+   * Количество страниц, отображаемых после троеточия
+   */
+  marginPagesDisplayed: PropTypes__default.default.number,
+  /**
+   *Кнопка навигации вперед
+   */
+  nextLabel: PropTypes__default.default.element,
+  pageCountArray: PropTypes__default.default.array,
+  pageCountDropdownItemLabelColorActive: PropTypes__default.default.string,
+  /**
+   * Количество страниц, отображаемых до троеточия
+   */
+  pageRangeDisplayed: PropTypes__default.default.number,
+  /**
+   * Количество элементов, отображаемых на станице
+   */
+  perPageCount: PropTypes__default.default.number,
+  /**
+   * Кнопка навигации назад
+   */
+  previousLabel: PropTypes__default.default.element
+};
+Pagination.defaultProps = {
+  pageNumber: 0,
+  perPageCount: 0,
+  allItemsCount: 0,
+  pageCountArray: [10, 20, 50, 100],
+  isPageCountDropdownReversed: false,
+  pageCountDropdownItemLabelColorActive: ''
+};
+Pagination.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Pagination",
+  "props": {
+    "pageNumber": {
+      "defaultValue": {
+        "value": "0",
+        "computed": false
+      },
+      "required": false
+    },
+    "perPageCount": {
+      "defaultValue": {
+        "value": "0",
+        "computed": false
+      },
+      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u043D\u0430 \u0441\u0442\u0430\u043D\u0438\u0446\u0435",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "allItemsCount": {
+      "defaultValue": {
+        "value": "0",
+        "computed": false
+      },
+      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0432\u0441\u0435\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "pageCountArray": {
+      "defaultValue": {
+        "value": "[10, 20, 50, 100]",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "isPageCountDropdownReversed": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "pageCountDropdownItemLabelColorActive": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "marginPagesDisplayed": {
+      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u043F\u043E\u0441\u043B\u0435 \u0442\u0440\u043E\u0435\u0442\u043E\u0447\u0438\u044F",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "nextLabel": {
+      "description": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043F\u0435\u0440\u0435\u0434",
+      "type": {
+        "name": "element"
+      },
+      "required": false
+    },
+    "pageRangeDisplayed": {
+      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u0434\u043E \u0442\u0440\u043E\u0435\u0442\u043E\u0447\u0438\u044F",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "previousLabel": {
+      "description": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043D\u0430\u0437\u0430\u0434",
+      "type": {
+        "name": "element"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Pagination = Pagination;

package/dist/cjs/components/Radio.js

@@ -0,0 +1,267 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Text = require('../Text-CfBPhwqK.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const radioConfig = {
+  state: {},
+  setState: newComponent => {
+    radioConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    radioConfig.appearance = newComponent;
+  }
+};
+function Radio(props) {
+  const {
+    appearance,
+    checked,
+    className,
+    desc,
+    descTextColor,
+    descTextSize,
+    descTextWidth,
+    disabled,
+    id,
+    label,
+    labelTextColor,
+    labelTextSize,
+    labelTextWidth,
+    tag: Tag,
+    onChange
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio_shape_',
+    propsKey: 'shape'
+  });
+  const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio__state_shape_',
+    propsKey: 'stateShape'
+  });
+  const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: checked ? 'stateFillChecked' : 'stateFill'
+  });
+  const stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
+  });
+  const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio_checkmark_fill_',
+    propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
+  });
+  const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'stateBorderWidth'
+  });
+  const stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
+  });
+  const stateBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover'
+  });
+  const stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
+  });
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'radio', fillClass, shapeClass),
+    htmlFor: id
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('radio__item', stateCheckmarkFillClass || radioConfig.appearance[appearance]?.stateCheckmarkFill && `radio_checkmark_fill_${radioConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    checked: checked,
+    className: "radio__input",
+    disabled: disabled,
+    id: id,
+    type: "radio",
+    onChange: onChange
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioConfig.appearance[appearance]?.stateBorderColor && `border-color_${radioConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioConfig.appearance[appearance]?.stateShape && `radio__state_shape_${radioConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioConfig.appearance[appearance]?.stateBorderWidth && `border-width_${radioConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "radio__state-checkmark"
+  }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "radio__label",
+    size: labelTextSize || radioConfig.appearance[appearance]?.labelTextSize,
+    textColor: labelTextColor || radioConfig.appearance[appearance]?.labelTextColor,
+    textWeight: labelTextWidth
+  }, label), desc && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "radio__desc",
+    size: descTextSize || radioConfig.appearance[appearance]?.descTextSize,
+    textColor: descTextColor || radioConfig.appearance[appearance]?.descTextColor,
+    textWeight: descTextWidth
+  }, desc));
+}
+Radio.propTypes = {
+  appearance: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  className: PropTypes__default.default.string,
+  desc: PropTypes__default.default.string,
+  descTextColor: PropTypes__default.default.string,
+  descTextSize: PropTypes__default.default.string,
+  descTextWidth: PropTypes__default.default.string,
+  disabled: PropTypes__default.default.bool,
+  id: PropTypes__default.default.string,
+  label: PropTypes__default.default.string,
+  labelTextColor: PropTypes__default.default.string,
+  labelTextSize: PropTypes__default.default.string,
+  labelTextWidth: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func
+};
+Radio.defaultProps = {
+  shape: 'circular',
+  tag: 'label'
+};
+Radio.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Radio",
+  "props": {
+    "shape": {
+      "defaultValue": {
+        "value": "'circular'",
+        "computed": false
+      },
+      "required": false
+    },
+    "tag": {
+      "defaultValue": {
+        "value": "'label'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "desc": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "descTextWidth": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "disabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "label": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "labelTextWidth": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Radio = Radio;
+exports.radioConfig = radioConfig;