@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/Tooltip.js

@@ -0,0 +1,451 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Text = require('../Text-CfBPhwqK.js');
+var index = require('./Title.js');
+var size = require('../constants/componentProps/size.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var titleSize = require('../constants/componentProps/titleSize.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.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);
+
+const tooltipConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    tooltipConfig.appearance = newComponent;
+  }
+};
+const Tooltip = /*#__PURE__*/React__default.default.forwardRef(function Tooltip(props, ref) {
+  const {
+    before,
+    after,
+    appearance,
+    children,
+    className,
+    text,
+    title,
+    type,
+    set,
+    arrowPosition,
+    titleTextColor,
+    titleSize,
+    textColor,
+    textSize,
+    initialIsVisible
+  } = props;
+  const tooltipTimeoutHideRef = React.useRef(null);
+  const isTooltipCloseAnimationInProgressRef = React.useRef(false);
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(initialIsVisible);
+  const openTooltip = React.useCallback(() => {
+    if (!isTooltipCloseAnimationInProgressRef.current) {
+      clearTimeout(tooltipTimeoutHideRef.current);
+      setIsTooltipVisible(true);
+    }
+  }, []);
+  const closeTooltip = React.useCallback(() => {
+    // Make a small delay to be able to move cursor on the tooltip without
+    // triggering a close, because the label and the tooltip have  space between
+    tooltipTimeoutHideRef.current = setTimeout(() => {
+      setIsTooltipVisible(prevState => {
+        const newState = false;
+        if (prevState === true) {
+          isTooltipCloseAnimationInProgressRef.current = true;
+        }
+        return newState;
+      });
+    }, 250);
+  }, []);
+  const onAnimationEnd = React.useCallback(() => {
+    isTooltipCloseAnimationInProgressRef.current = false;
+  }, []);
+  React.useImperativeHandle(ref, () => ({
+    openTooltip,
+    closeTooltip
+  }), [openTooltip, closeTooltip]);
+
+  /* STYLES */
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tooltip_shape_',
+    propsKey: 'shape'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tooltip_size_',
+    propsKey: 'size'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
+  const {
+    styles: tooltipStyles
+  } = useStyles.useStyles(props);
+  const tooltipAppearanceItem = tooltipConfig.appearance[appearance] || {};
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass || tooltipAppearanceItem.fillClass && `fill_${tooltipAppearanceItem.fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`, widthClass),
+    style: tooltipStyles,
+    onAnimationEnd: onAnimationEnd
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "tooltip__inner"
+  }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+    className: "tooltip__title",
+    size: titleSize,
+    textColor: titleTextColor || tooltipAppearanceItem.titleTextColor
+  }, title), text && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "tooltip__text",
+    size: textSize,
+    textColor: textColor || tooltipAppearanceItem.textColor
+  }, text), children), after);
+});
+Tooltip.propTypes = {
+  after: PropTypes__default.default.string,
+  appearance: PropTypes__default.default.string,
+  arrowPosition: PropTypes__default.default.string,
+  before: PropTypes__default.default.string,
+  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),
+  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),
+  /**
+   * внутренний padding и отступ gap между элементами
+   */
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
+  text: PropTypes__default.default.any,
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textSize: PropTypes__default.default.oneOf(textSize.default),
+  textSizeDesktop: PropTypes__default.default.oneOf(textSize.default),
+  textSizeMobile: PropTypes__default.default.oneOf(textSize.default),
+  textSizeTablet: PropTypes__default.default.oneOf(textSize.default),
+  title: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.oneOf(titleSize.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
+  type: PropTypes__default.default.string
+};
+Tooltip.defaultProps = {
+  initialIsVisible: null
+};
+Tooltip.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Tooltip",
+  "props": {
+    "initialIsVisible": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "arrowPosition": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "before": {
+      "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
+    },
+    "set": {
+      "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
+    },
+    "size": {
+      "description": "\u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 padding \u0438 \u043E\u0442\u0441\u0442\u0443\u043F gap \u043C\u0435\u0436\u0434\u0443 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430\u043C\u0438",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
+      },
+      "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
+    },
+    "text": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "textColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "textSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textSizeProps"
+      },
+      "required": false
+    },
+    "textSizeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textSizeProps"
+      },
+      "required": false
+    },
+    "textSizeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textSizeProps"
+      },
+      "required": false
+    },
+    "textSizeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textSizeProps"
+      },
+      "required": false
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleSize": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "titleSizeProps"
+      },
+      "required": false
+    },
+    "titleTextColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Tooltip = Tooltip;
+exports.tooltipConfig = tooltipConfig;

package/dist/cjs/components/Video.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useStyles = 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');
+
+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);
+
+function Video(props) {
+  const {
+    id,
+    children,
+    className,
+    poster,
+    webm,
+    ogv,
+    mp4,
+    type,
+    position
+  } = props;
+  const {
+    styles: videoStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('video', className, type && `video_type_${type}`, position && `video_position_${position}`),
+    id: id,
+    style: videoStyles
+  }, /*#__PURE__*/React__default.default.createElement("video", {
+    autoPlay: true,
+    className: "video__wrapper",
+    poster: poster,
+    muted: true,
+    loop: true,
+    playsInline: false
+  }, webm && /*#__PURE__*/React__default.default.createElement("source", {
+    src: webm,
+    type: "video/webm",
+    codecs: "vp8, vorbis"
+  }), ogv && /*#__PURE__*/React__default.default.createElement("source", {
+    src: ogv,
+    type: "video/ogg",
+    codecs: "theora, vorbis"
+  }), mp4 && /*#__PURE__*/React__default.default.createElement("source", {
+    src: mp4,
+    type: "video/mp4",
+    codecs: "avc1.42E01E, mp4a.40.2"
+  })), children);
+}
+Video.propTypes = {
+  id: PropTypes__default.default.string,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  size: PropTypes__default.default.string,
+  position: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  poster: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  webm: PropTypes__default.default.string,
+  ogv: PropTypes__default.default.string,
+  mp4: PropTypes__default.default.string,
+  width: PropTypes__default.default.string,
+  height: PropTypes__default.default.string
+};
+Video.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Video",
+  "props": {
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "position": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "poster": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "webm": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "ogv": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "mp4": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "width": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "height": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Video = Video;