@ntbjs/react-components 1.3.0-rc.4 → 1.3.0-rc.41

package/CompactStarRating-86673c4f.js

@@ -0,0 +1,343 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-573a9150.js');
+var React = require('react');
+require('./Alert-b79a8fcc.js');
+require('./Badge-a35c7018.js');
+require('./Popover-0d9a689b.js');
+require('./Tab-7c817d4d.js');
+require('./Tabs-318feff9.js');
+var Tooltip = require('./Tooltip-478ec993.js');
+require('./VerificationStatusIcon-ecec5f07.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+function SvgStarFilled(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 38"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M7.65 38l3.25-14.05L0 14.5l14.4-1.25L20 0l5.6 13.25L40 14.5l-10.9 9.45L32.35 38 20 30.55 7.65 38z"
+  })));
+}
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgStar(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 38"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12.2 31.8l7.8-4.7 7.9 4.8-2.1-8.9 6.9-6-9.1-.8L20 7.7l-3.5 8.4-9.1.8 6.9 6-2.1 8.9zM7.7 38L11 24 0 14.5l14.4-1.2L20 0l5.6 13.2L40 14.5 29.1 24l3.3 14L20 30.6 7.7 38z"
+  })));
+}
+
+var fadeIn = styled.keyframes(["from{background-color:", ";}to{background-color:", ";}"], function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
+}, function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
+});
+var fadeOut = styled.keyframes(["from{background-color:", ";}to{background-color:", ";}"], function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
+}, function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
+});
+var fadeInCheck = styled.keyframes(["from{opacity:0}to{opacity:1}"]);
+var fadeOutCheck = styled.keyframes(["from{opacity:1}to{opacity:0}"]);
+var CompactStarRating$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "CompactStarRatingstyled__CompactStarRating",
+  componentId: "sc-12dmf4-0"
+})(["font-family:", ";font-size:1rem;font-weight:500;height:24px;width:100%;display:flex;align-items:center;input[type='number']{position:absolute;opacity:0;pointer-events:none;margin:0;}", " ", ""], function (props) {
+  return props.theme.primaryFontFamily;
+}, function (props) {
+  return props.readOnly && styled.css(["pointer-events:none;"]);
+}, function (props) {
+  return props.disabled && styled.css(["opacity:0.5;cursor:not-allowed;"]);
+});
+var labelWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "CompactStarRatingstyled__labelWidth",
+  componentId: "sc-12dmf4-1"
+})(["width:33.33%;display:flex;align-items:center;text-align:left;font:normal normal normal 14px/16px Roboto;letter-spacing:0px;padding:0;height:19px;cursor:default;justify-content:space-between;", ";", ""], function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
+}, function (props) {
+  return props.disabled && styled.css(["cursor:not-allowed;"]);
+});
+var SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "CompactStarRatingstyled__SuccessContainer",
+  componentId: "sc-12dmf4-2"
+})(["opacity:1;pointer-events:none;display:flex;opacity:", ";animation:", " 0.5s ease-in-out;transition:opacity 0.5s ease-in-out;margin-right:5px;", " > svg{width:13px;}"], function (props) {
+  return props.fadeIn ? 0 : 1;
+}, function (props) {
+  return props.fadeIn ? fadeOutCheck : fadeInCheck;
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
+});
+var starsWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "CompactStarRatingstyled__starsWidth",
+  componentId: "sc-12dmf4-3"
+})(["display:flex;width:66.66%;border-radius:3px;height:24px;align-items:center;padding-left:8px;box-sizing:border-box;border:1px solid;", " ", " ", " ", " &&:not(:hover):not(:focus){", ";", ";}&&:hover:not(:focus){", " ", ";", ";", ";}"], function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
+  return props.type === 'success' && styled.css(["animation:", " 0.5s ease-in-out;"], function (props) {
+    return props.success ? fadeIn : fadeOut;
+  });
+}, function (props) {
+  return props.type === 'error' && styled.css(["", ";", ""], props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
+}, function (props) {
+  return props.type === 'warning' && styled.css(["", ";", ""], props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8'));
+}, function (props) {
+  return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
+}, function (props) {
+  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
+}, function (props) {
+  return props.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
+}, function (props) {
+  return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
+}, function (props) {
+  return props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF');
+}, function (props) {
+  return props.type === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
+});
+var Star = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "CompactStarRatingstyled__Star",
+  componentId: "sc-12dmf4-4"
+})(["display:flex;align-items:center;background:none;border:none;cursor:pointer;padding:0;svg{height:12px;padding-left:4px;transition:color 250ms;}", ";", ";", ";", ";", " ", ""], function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
+}, function (props) {
+  return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
+}, function (props) {
+  return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
+}, function (props) {
+  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.readOnly && styled.css(["pointer-events:none;"]);
+}, function (props) {
+  return props.disabled && styled.css(["button{cursor:not-allowed;}> *{cursor:not-allowed;}"]);
+});
+var StarFill = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "CompactStarRatingstyled__StarFill",
+  componentId: "sc-12dmf4-5"
+})(["display:flex;align-items:center;background:none;border:none;cursor:pointer;padding:0;svg{height:12px;padding-left:4px;transition:color 250ms;}", ";", ";", ";", ";", " ", ""], function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
+}, function (props) {
+  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
+}, function (props) {
+  return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
+}, function (props) {
+  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.readOnly && styled.css(["pointer-events:none;"]);
+}, function (props) {
+  return props.disabled && styled.css(["button{cursor:not-allowed;}> *{cursor:not-allowed;}"]);
+});
+styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "CompactStarRatingstyled__CheckIconContainer",
+  componentId: "sc-12dmf4-6"
+})(["opacity:1;pointer-events:none;margin-left:auto;opacity:", ";animation:", " 0.5s ease-in-out;transition:opacity 0.5s ease-in-out;", " > svg{width:13px;}"], function (props) {
+  return props.type === 'success' ? 0 : 1;
+}, function (props) {
+  return props.type === 'success' ? fadeOutCheck : fadeInCheck;
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
+});
+
+var _excluded = ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "type", "descriptionToolTip", "disabled", "readOnly", "edit", "hidden", "loadingIcon", "successIcon"];
+var CompactStarRating = React__default["default"].forwardRef(function CompactStarRating(_ref, forwardedRef) {
+  var label = _ref.label,
+    icon = _ref.icon,
+    iconFill = _ref.iconFill,
+    max = _ref.max,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    name = _ref.name,
+    viewEmpty = _ref.viewEmpty,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    type = _ref.type,
+    descriptionToolTip = _ref.descriptionToolTip,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    edit = _ref.edit,
+    hidden = _ref.hidden,
+    loadingIcon = _ref.loadingIcon,
+    successIcon = _ref.successIcon,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+  var stars = Array.from(Array(max).keys());
+  var _useState = React.useState(''),
+    _useState2 = defaultTheme._slicedToArray(_useState, 2),
+    rating = _useState2[0],
+    setRating = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+    hover = _useState4[0],
+    setHover = _useState4[1];
+  var _useState5 = React.useState(''),
+    _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+    tempRating = _useState6[0],
+    setTempRating = _useState6[1];
+  var _useState7 = React.useState(''),
+    _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+    initialRating = _useState8[0],
+    setInitialRating = _useState8[1];
+  var inputRef = React.useRef();
+  React.useEffect(function () {
+    setRating(value || defaultValue);
+    setInitialRating(value || defaultValue);
+  }, [value, defaultValue]);
+  React.useEffect(function () {
+    inputRef.current.value = String(rating);
+    if (rating === initialRating) {
+      return undefined;
+    } else {
+      setInitialRating(rating);
+      onChange({
+        target: inputRef.current
+      });
+    }
+  }, [rating]);
+  var memoizedDescriptionToolTip = React.useMemo(function () {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
+  var starIconRender = function starIconRender(key) {
+    if (rating > 0 && rating >= key + 1) {
+      return React__default["default"].createElement(StarFill, {
+        readOnly: readOnly,
+        disabled: disabled,
+        onClick: function onClick(event) {
+          event.preventDefault();
+          if (key + 1 > 1) {
+            return setRating(key + 1);
+          } else if (key + 1 == 1) {
+            setRating(function (current) {
+              return current === 1 ? 0 : key + 1;
+            });
+          }
+        },
+        onMouseEnter: function onMouseEnter() {
+          setTempRating(key + 1);
+          setHover(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          setTempRating(0);
+          setHover(false);
+        },
+        hover: hover && key + 1 <= tempRating,
+        type: "button",
+        key: key
+      }, iconFill);
+    } else if (viewEmpty) {
+      return React__default["default"].createElement(Star, {
+        readOnly: readOnly,
+        disabled: disabled,
+        onClick: function onClick(event) {
+          event.preventDefault();
+          setRating(key + 1);
+        },
+        onMouseEnter: function onMouseEnter() {
+          setTempRating(key + 1);
+          setHover(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          setTempRating(0);
+          setHover(false);
+        },
+        hover: hover && key + 1 <= tempRating,
+        type: "button",
+        key: key
+      }, icon);
+    }
+  };
+  var input = function input() {
+    return React__default["default"].createElement(CompactStarRating$1, defaultTheme._extends({
+      ref: forwardedRef,
+      readOnly: readOnly,
+      disabled: disabled,
+      onChange: onChange,
+      onBlur: onBlur
+    }, props), React__default["default"].createElement(labelWidth, {
+      disabled: disabled
+    }, label, React__default["default"].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default["default"].createElement(starsWidth, {
+      edit: edit,
+      type: type
+    }, stars.map(function (key) {
+      return React__default["default"].createElement("div", {
+        key: key
+      }, React__default["default"].createElement("input", {
+        type: "number",
+        name: name,
+        ref: inputRef
+      }), starIconRender(key));
+    })));
+  };
+  if (hidden) return null;
+  return React__default["default"].createElement(React__default["default"].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default["default"].createElement("div", null, React__default["default"].createElement(Tooltip.Tooltip, {
+    content: memoizedDescriptionToolTip,
+    key: "tooltipTextArea1",
+    placement: "bottom-end",
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())));
+});
+CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
+  readOnly: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  edit: defaultTheme.PropTypes.bool,
+  value: defaultTheme.PropTypes.number,
+  type: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
+  defaultValue: defaultTheme.PropTypes.number,
+  label: defaultTheme.PropTypes.string,
+  name: defaultTheme.PropTypes.string,
+  icon: defaultTheme.PropTypes.element,
+  iconFill: defaultTheme.PropTypes.element,
+  max: defaultTheme.PropTypes.number,
+  viewEmpty: defaultTheme.PropTypes.bool,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func,
+  hidden: defaultTheme.PropTypes.bool,
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element,
+  descriptionToolTip: defaultTheme.PropTypes.string
+} : {};
+CompactStarRating.defaultProps = {
+  label: 'Rating',
+  max: 5,
+  value: 0,
+  defaultValue: 0,
+  viewEmpty: true,
+  icon: React__default["default"].createElement(SvgStar, null),
+  iconFill: React__default["default"].createElement(SvgStarFilled, null),
+  hidden: false,
+  type: '',
+  descriptionToolTip: '',
+  displayDescriptionToolTip: false,
+  onChange: function onChange() {}
+};
+
+exports.CompactStarRating = CompactStarRating;