@itcase/ui 1.1.5 → 1.1.7

package/dist/DropdownItem-C0gYXEq6.js

@@ -0,0 +1,644 @@
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { Divider } from './components/Divider.js';
+import { Link } from './components/Link.js';
+import { T as Text } from './Text-DffpwlYq.js';
+import fillProps from './constants/componentProps/fill.js';
+import shapeProps from './constants/componentProps/shape.js';
+import typeProps from './constants/componentProps/type.js';
+import underlineProps from './constants/componentProps/underline.js';
+import sizeProps from './constants/componentProps/size.js';
+
+function Dropdown(props) {
+  const {
+    animationClose,
+    animationOpen,
+    children,
+    className,
+    id,
+    set,
+    isOpen,
+    setIsOpen
+  } = props;
+  const dropdownRef = useRef(null);
+
+  // const [isOpen, setIsOpen] = useState(false)
+  const [animationState, setAnimationState] = useState({
+    className: ''
+  });
+  const onAnimationEnd = useCallback(event => {
+    // When component is change his visibility(display) in DOM,
+    // animation of close can run unnecessary on showing element.
+    // const dropdownElement = dropdownRef.current
+    setAnimationState(prevState => ({
+      className: isOpen ? prevState.className : ''
+    }));
+  }, [isOpen]);
+  useEffect(() => {
+    setAnimationState(prevState => ({
+      className: isOpen ? animationOpen : animationClose
+    }));
+  }, [isOpen]);
+
+  // Close dropdown by click outside
+  useEffect(() => {
+    // Add a handler to keep track of the click target.
+    function onClickWindow(event) {
+      const dropdownElement = dropdownRef.current;
+      if (dropdownElement) {
+        // Is event target inside of dropdown element
+        const isContainsTarget = dropdownElement.contains(event.target);
+        // Is dropdown element has "open" class
+        const hasOpenClass = dropdownElement.classList.contains(animationOpen);
+        if (!isContainsTarget && hasOpenClass) {
+          // Trigger close event with animation
+          // dropdownElement.click() - trigger "onClickWindow" again
+          setIsOpen(false);
+        }
+      }
+    }
+    // Add event listener for current dropdown on first render
+    window.addEventListener('click', onClickWindow);
+    return () => {
+      // Remove event listener for current dropdown on unmount
+      window.removeEventListener('click', onClickWindow);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'dropdown_shape_',
+    propsKey: 'shape'
+  });
+  const elevationClass = useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const alignmentClass = useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
+  const {
+    styles
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(className, 'dropdown', alignmentClass, set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
+    ref: dropdownRef,
+    style: styles
+  }, children && /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('dropdown__wrapper', fillClass, fillHoverClass)
+    // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+    ,
+    onAnimationEnd: onAnimationEnd
+  }, children));
+}
+Dropdown.propTypes = {
+  className: PropTypes.string,
+  isCloseByClickOutside: PropTypes.bool
+};
+Dropdown.defaultProps = {
+  animationOpen: 'dropdown_animation_open',
+  animationClose: 'dropdown_animation_close',
+  set: 'normal'
+};
+Dropdown.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Dropdown",
+  "props": {
+    "animationOpen": {
+      "defaultValue": {
+        "value": "'dropdown_animation_open'",
+        "computed": false
+      },
+      "required": false
+    },
+    "animationClose": {
+      "defaultValue": {
+        "value": "'dropdown_animation_close'",
+        "computed": false
+      },
+      "required": false
+    },
+    "set": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isCloseByClickOutside": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    }
+  }
+};
+
+function DropdownItem(props) {
+  const {
+    isActive,
+    isHover,
+    appearance,
+    after,
+    before,
+    children,
+    className,
+    href,
+    link,
+    set,
+    rel,
+    desc,
+    descTextGradient,
+    descTextSize,
+    descTextWeight,
+    descTextColor,
+    descTextWrap,
+    descTextColorHover,
+    descTextStyle,
+    label,
+    target,
+    labelTextColorActive,
+    labelTextGradient,
+    labelTextSize,
+    labelTextWeight,
+    labelTextColor,
+    labelTextWrap,
+    labelTextColorHover,
+    labelTextStyle,
+    showDivider,
+    dividerDirection,
+    dividerFill,
+    dividerSize,
+    underline,
+    onClick,
+    onMouseEnter
+  } = props;
+  const alignDirectionClass = useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  const alignClass = useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  const directionClass = useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_direction_',
+    propsKey: 'direction'
+  });
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const fillActiveClass = useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  const fillActiveHoverClass = useDeviceTargetClass(props, {
+    prefix: 'fill_active_hover_',
+    propsKey: 'fillActiveHover'
+  });
+  const fillDisabledClass = useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const linkFillClass = useDeviceTargetClass(props, {
+    propsKey: 'linkFill'
+  });
+  const sizeClass = useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_shape_',
+    propsKey: 'shape'
+  });
+  const justifyContentClass = useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  const typeClass = useDeviceTargetClass(props, {
+    prefix: 'dropdown__item_type_',
+    propsKey: 'type'
+  });
+  const widthClass = useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const {
+    styles: dropdownItem
+  } = useStyles(props);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, onClick && 'cursor_type_pointer', set && `dropdown__item_set_${set}`, justifyContentClass),
+    style: dropdownItem,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, /*#__PURE__*/React__default.createElement(Link, {
+    href: link || href,
+    className: clsx('dropdown__item-link', alignDirectionClass, alignClass),
+    underline: underline,
+    fill: linkFillClass,
+    target: target,
+    rel: rel
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, before, children || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement(Text, {
+    className: "dropdown__item-label",
+    textColorActive: isActive && labelTextColorActive,
+    textGradient: labelTextGradient,
+    size: labelTextSize,
+    textWeight: labelTextWeight,
+    textColor: labelTextColor,
+    textWrap: labelTextWrap,
+    textColorHover: labelTextColorHover,
+    textStyle: labelTextStyle
+  }, label), desc && /*#__PURE__*/React__default.createElement(Text, {
+    className: "dropdown__item-desc",
+    textGradient: descTextGradient,
+    size: descTextSize,
+    textWeight: descTextWeight,
+    textColor: descTextColor,
+    textWrap: descTextWrap,
+    textColorHover: descTextColorHover,
+    textStyle: descTextStyle
+  }, desc)), after)), showDivider && /*#__PURE__*/React__default.createElement(Divider, {
+    direction: dividerDirection,
+    fill: dividerFill,
+    size: dividerSize,
+    width: "fill"
+  }));
+}
+DropdownItem.propTypes = {
+  after: PropTypes.any,
+  before: PropTypes.any,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  desc: PropTypes.string,
+  fill: PropTypes.oneOf(fillProps),
+  fillDesktop: PropTypes.oneOf(fillProps),
+  fillMobile: PropTypes.oneOf(fillProps),
+  fillTablet: PropTypes.oneOf(fillProps),
+  linkFill: PropTypes.oneOf(fillProps),
+  linkFillDesktop: PropTypes.oneOf(fillProps),
+  linkFillMobile: PropTypes.oneOf(fillProps),
+  linkFillTablet: PropTypes.oneOf(fillProps),
+  isActive: PropTypes.bool,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  size: PropTypes.oneOf(sizeProps),
+  sizeDesktop: PropTypes.oneOf(sizeProps),
+  sizeMobile: PropTypes.oneOf(sizeProps),
+  sizeTablet: PropTypes.oneOf(sizeProps),
+  LinkComponent: PropTypes.any,
+  href: PropTypes.string,
+  link: PropTypes.string,
+  target: PropTypes.string,
+  rel: PropTypes.string,
+  shape: PropTypes.oneOf(shapeProps),
+  shapeDesktop: PropTypes.oneOf(shapeProps),
+  shapeMobile: PropTypes.oneOf(shapeProps),
+  shapeTablet: PropTypes.oneOf(shapeProps),
+  type: PropTypes.oneOf(typeProps),
+  typeDesktop: PropTypes.oneOf(typeProps),
+  typeMobile: PropTypes.oneOf(typeProps),
+  typeTablet: PropTypes.oneOf(typeProps),
+  underline: PropTypes.oneOf(underlineProps)
+};
+DropdownItem.defaultProps = {
+  size: 'm',
+  LinkComponent: 'a',
+  direction: 'horizontal'
+};
+DropdownItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "DropdownItem",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "LinkComponent": {
+      "defaultValue": {
+        "value": "'a'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "direction": {
+      "defaultValue": {
+        "value": "'horizontal'",
+        "computed": false
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "desc": {
+      "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
+    },
+    "linkFill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "linkFillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "linkFillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "linkFillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "isActive": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "label": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onMouseEnter": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "sizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "sizeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "required": false
+    },
+    "href": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "link": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "target": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "rel": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "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
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "typeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "typeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "typeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "typeProps"
+      },
+      "required": false
+    },
+    "underline": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "underlineProps"
+      },
+      "required": false
+    }
+  }
+};
+
+export { Dropdown as D, DropdownItem as a };