@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/Breadcrumbs-HubY1qZQ.js

@@ -0,0 +1,629 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var camelCase = require('lodash/camelCase');
+var direction = require('./constants/componentProps/direction.js');
+var fill = require('./constants/componentProps/fill.js');
+var position = require('./constants/componentProps/position.js');
+var shape = require('./constants/componentProps/shape.js');
+var width = require('./constants/componentProps/width.js');
+var Icon = require('./Icon-UBahY607.js');
+var Text = require('./Text-D7Aq1i5R.js');
+var Link = require('./Link-BoShjCEw.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.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 camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+
+function BreadcrumbsItem(props) {
+  const {
+    children,
+    className,
+    cursor,
+    set,
+    text,
+    textSize,
+    textColor,
+    textColorHover,
+    href,
+    iconAfter,
+    iconAfterSize,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterStroke,
+    onClick
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'breadcrumbs__item_shape_',
+    propsKey: 'shape'
+  });
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  const underlineClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-decoration_',
+    propsKey: 'underline'
+  });
+  const {
+    styles: itemStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement(Link.LinkWrapper, {
+    className: clsx__default.default(className, 'breadcrumbs__item', set && `breadcrumbs__item_set_${set}`, fillClass, positionClass, shapeClass, underlineClass, onClick && (cursor || 'cursor_type_pointer')),
+    DefaultComponent: "div",
+    href: href,
+    style: itemStyles,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "breadcrumbs__item-text",
+    size: textSize,
+    textColor: textColor,
+    textColorHover: textColorHover
+  }, text || children), iconAfter && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+    bgFill: iconAfterBgFill,
+    className: "breadcrumbs__item-icon",
+    fill: iconAfterFill,
+    size: iconAfterSize,
+    stroke: iconAfterStroke,
+    SvgImage: iconAfter
+  }));
+}
+BreadcrumbsItem.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  id: PropTypes__default.default.string,
+  position: PropTypes__default.default.oneOf(position.default),
+  positionDesktop: PropTypes__default.default.oneOf(position.default),
+  positionMobile: PropTypes__default.default.oneOf(position.default),
+  positionTablet: PropTypes__default.default.oneOf(position.default),
+  set: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  tag: PropTypes__default.default.string,
+  text: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.string,
+  textSize: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func
+};
+BreadcrumbsItem.defaultProps = {
+  set: 'default'
+};
+BreadcrumbsItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "BreadcrumbsItem",
+  "props": {
+    "set": {
+      "defaultValue": {
+        "value": "'default'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "position": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "positionDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "positionMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "positionTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "tag": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "text": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "textSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+function Breadcrumbs(props) {
+  const {
+    breadcrumbsList,
+    children,
+    className,
+    iconAfterSize,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterStroke,
+    itemUnderline,
+    itemTextColor,
+    itemTextColorHover,
+    set,
+    ...otherProps
+  } = props;
+  const breadcrumbsItemsList = React.useMemo(() => {
+    if (breadcrumbsList) {
+      const itemProps = Object.entries(otherProps).reduce((collectedProps, [key, value]) => {
+        if (key.startsWith('item')) {
+          const propKey = camelCase__default.default(key.replace('item', ''));
+          collectedProps[propKey] = value;
+        }
+        return collectedProps;
+      }, {});
+      return breadcrumbsList.map((item, i) => /*#__PURE__*/React__default.default.createElement(BreadcrumbsItem, Object.assign({
+        key: `breadcrumbsItem_${item.id || item.text}`,
+        set: i + 1 !== breadcrumbsList.length ? 'default' : 'current',
+        iconAfter: i + 1 !== breadcrumbsList.length ? itemProps.iconAfter : null,
+        iconAfterSize: iconAfterSize,
+        iconAfterBgFill: iconAfterBgFill,
+        iconAfterFill: iconAfterFill,
+        iconAfterStroke: iconAfterStroke,
+        text: item.text,
+        textColor: itemTextColor,
+        textColorHover: itemTextColorHover,
+        underline: itemUnderline,
+        href: item.href
+      }, itemProps)));
+    }
+    if (children) {
+      return children;
+    }
+    return [];
+  }, [children, breadcrumbsList, otherProps]);
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'breadcrumbs_shape_',
+    propsKey: 'shape'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  const {
+    styles: breadcrumbsStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'breadcrumbs', widthClass, directionClass, fillClass, positionClass, shapeClass, set && `breadcrumbs_set_${set}`),
+    style: breadcrumbsStyles
+  }, breadcrumbsItemsList);
+}
+Breadcrumbs.propTypes = {
+  breadcrumbsList: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    text: PropTypes__default.default.string,
+    href: PropTypes__default.default.string
+  })),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  position: PropTypes__default.default.oneOf(position.default),
+  positionMobile: PropTypes__default.default.oneOf(position.default),
+  positionTablet: PropTypes__default.default.oneOf(position.default),
+  positionDesktop: PropTypes__default.default.oneOf(position.default),
+  width: PropTypes__default.default.oneOf(width.default),
+  widthMobile: PropTypes__default.default.oneOf(width.default),
+  widthTablet: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default)
+};
+Breadcrumbs.defaultProps = {
+  direction: 'horizontal'
+};
+Breadcrumbs.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Breadcrumbs",
+  "props": {
+    "direction": {
+      "defaultValue": {
+        "value": "'horizontal'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "breadcrumbsList": {
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "text": {
+              "name": "string",
+              "required": false
+            },
+            "href": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "directionDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "directionTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "directionProps"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "position": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "positionMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "positionTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "positionDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "positionProps"
+      },
+      "required": false
+    },
+    "width": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "widthMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "widthTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "widthDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Breadcrumbs = Breadcrumbs;
+exports.BreadcrumbsItem = BreadcrumbsItem;