@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.27

package/build/CompactStarRating-9af2f427.js

@@ -0,0 +1,411 @@
+import { _ as _extends$2 } from './_rollupPluginBabelHelpers-c245b26a.js';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import * as React from 'react';
+import React__default, { useState, useRef, useEffect, useMemo } from 'react';
+import './Alert-e6847a22.js';
+import './Badge-d93586a9.js';
+import './Popover-20050b91.js';
+import './Tab-04d435c3.js';
+import './Tabs-74d1ea8a.js';
+import { T as Tooltip } from './Tooltip-c1d1199e.js';
+import './VerificationStatusIcon-49cb1c1b.js';
+import styled, { keyframes, css } from 'styled-components';
+
+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.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 38"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.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.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 40 38"
+  }, props), _path || (_path = /*#__PURE__*/React.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"
+  })));
+}
+
+const fadeIn = keyframes`
+  from {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
+  }
+  to {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
+  }
+`;
+const fadeOut = keyframes`
+  from {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
+  }
+  to {
+    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
+  }
+`;
+const fadeInCheck = keyframes`
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+`;
+const fadeOutCheck = keyframes`
+  from {
+    opacity: 1
+  }
+  to {
+    opacity: 0
+  }
+`;
+const CompactStarRating$1 = styled.div.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  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;
+  }
+
+  ${props => props.readOnly && css`
+      pointer-events: none;
+    `}
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`;
+const labelWidth = styled.div.attrs(applyDefaultTheme)`
+  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;
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+  ${props => props.disabled && css`
+      cursor: not-allowed;
+    `}
+`;
+const SuccessContainer = styled.div.attrs(applyDefaultTheme)`
+  opacity: 1;
+  pointer-events: none;
+  display: flex;
+  opacity: ${props => props.fadeIn ? 0 : 1};
+  animation: ${props => props.fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  margin-right: 5px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
+  > svg {
+    width: 13px;
+  }
+`;
+const starsWidth = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  width: 66.66%;
+  border-radius: 3px;
+  height: 24px;
+  align-items: center;
+  padding-left: 8px;
+  box-sizing: border-box;
+  border: 1px solid;
+
+  ${props => props.readOnly && css`
+      border: none;
+    `}
+
+  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
+
+  ${props => props.type === 'success' && css`
+      animation: ${props => props.success ? fadeIn : fadeOut} 0.5s ease-in-out;
+    `}
+
+  ${props => props.type === 'error' && css`
+      ${props.theme.themeProp('background', '#7F1B1B', '#FBEAE6')};
+      ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
+    `}
+
+  ${props => props.type === 'warning' && css`
+      ${props.theme.themeProp('background', '#634E01', '#FFFDE8')};
+      ${props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8')}
+    `}
+  &&:not(:hover):not(:focus) {
+    ${props => props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)')};
+    ${props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};
+  }
+  &&:hover:not(:focus) {
+    ${props => props.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
+
+    ${props => props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))};
+
+    ${props => props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF')};
+
+    ${props => props.type === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0')};
+  }
+`;
+const Star = styled.button.attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+
+  svg {
+    height: 12px;
+    padding-left: 4px;
+    transition: color 250ms;
+  }
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
+
+  ${props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
+
+  ${props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
+
+  ${props => props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))};
+
+  ${props => props.readOnly && css`
+      pointer-events: none;
+    `}
+
+  ${props => props.disabled && css`
+      button {
+        cursor: not-allowed;
+      }
+      > * {
+        cursor: not-allowed;
+      }
+    `}
+`;
+const StarFill = styled.button.attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+
+  svg {
+    height: 12px;
+    padding-left: 4px;
+    transition: color 250ms;
+  }
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
+
+  ${props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
+
+  ${props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
+
+  ${props => props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))};
+
+  ${props => props.readOnly && css`
+      pointer-events: none;
+    `}
+
+  ${props => props.disabled && css`
+      button {
+        cursor: not-allowed;
+      }
+      > * {
+        cursor: not-allowed;
+      }
+    `}
+`;
+styled.div.attrs(applyDefaultTheme)`
+  opacity: 1;
+  pointer-events: none;
+  margin-left: auto;
+  opacity: ${props => props.type === 'success' ? 0 : 1};
+  animation: ${props => props.type === 'success' ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  ${props => props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'))}
+  > svg {
+    width: 13px;
+  }
+`;
+
+const CompactStarRating = React__default.forwardRef(function CompactStarRating({
+  label,
+  icon,
+  iconFill,
+  max,
+  defaultValue,
+  value,
+  name,
+  viewEmpty,
+  onChange,
+  onBlur,
+  type,
+  descriptionToolTip,
+  disabled,
+  readOnly,
+  edit,
+  hidden,
+  loadingIcon,
+  successIcon,
+  ...props
+}, forwardedRef) {
+  const stars = Array.from(Array(max).keys());
+  const [rating, setRating] = useState('');
+  const [hover, setHover] = useState(false);
+  const [tempRating, setTempRating] = useState('');
+  const [initialRating, setInitialRating] = useState('');
+  const inputRef = useRef();
+  useEffect(() => {
+    setRating(value || defaultValue);
+    setInitialRating(value || defaultValue);
+  }, [value, defaultValue]);
+  useEffect(() => {
+    inputRef.current.value = String(rating);
+    if (rating === initialRating) {
+      return undefined;
+    } else {
+      setInitialRating(rating);
+      onChange({
+        target: inputRef.current
+      });
+    }
+  }, [rating]);
+  const memoizedDescriptionToolTip = useMemo(() => {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
+  const starIconRender = key => {
+    if (rating > 0 && rating >= key + 1) {
+      return React__default.createElement(StarFill, {
+        readOnly: readOnly,
+        disabled: disabled,
+        onClick: event => {
+          event.preventDefault();
+          if (key + 1 > 1) {
+            return setRating(key + 1);
+          } else if (key + 1 == 1) {
+            setRating(current => {
+              return current === 1 ? 0 : key + 1;
+            });
+          }
+        },
+        onMouseEnter: () => {
+          setTempRating(key + 1);
+          setHover(true);
+        },
+        onMouseLeave: () => {
+          setTempRating(0);
+          setHover(false);
+        },
+        hover: hover && key + 1 <= tempRating,
+        type: "button",
+        key: key
+      }, iconFill);
+    } else if (viewEmpty) {
+      return React__default.createElement(Star, {
+        readOnly: readOnly,
+        disabled: disabled,
+        onClick: event => {
+          event.preventDefault();
+          setRating(key + 1);
+        },
+        onMouseEnter: () => {
+          setTempRating(key + 1);
+          setHover(true);
+        },
+        onMouseLeave: () => {
+          setTempRating(0);
+          setHover(false);
+        },
+        hover: hover && key + 1 <= tempRating,
+        type: "button",
+        key: key
+      }, icon);
+    }
+  };
+  const input = () => {
+    return React__default.createElement(CompactStarRating$1, _extends$2({
+      ref: forwardedRef,
+      readOnly: readOnly,
+      disabled: disabled,
+      onChange: onChange,
+      onBlur: onBlur
+    }, props), React__default.createElement(labelWidth, {
+      disabled: disabled
+    }, label, React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(starsWidth, {
+      edit: edit,
+      type: type,
+      readOnly: readOnly
+    }, stars.map(key => {
+      return React__default.createElement("div", {
+        key: key
+      }, React__default.createElement("input", {
+        type: "number",
+        name: name,
+        ref: inputRef
+      }), starIconRender(key));
+    })));
+  };
+  if (hidden) return null;
+  return React__default.createElement(React__default.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default.createElement("div", null, React__default.createElement(Tooltip, {
+    content: memoizedDescriptionToolTip,
+    key: "tooltipTextArea1",
+    placement: "bottom-end",
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())));
+});
+CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  edit: PropTypes.bool,
+  value: PropTypes.number,
+  type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
+  defaultValue: PropTypes.number,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  icon: PropTypes.element,
+  iconFill: PropTypes.element,
+  max: PropTypes.number,
+  viewEmpty: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  hidden: PropTypes.bool,
+  loadingIcon: PropTypes.element,
+  successIcon: PropTypes.element,
+  descriptionToolTip: PropTypes.string
+} : {};
+CompactStarRating.defaultProps = {
+  label: 'Rating',
+  max: 5,
+  value: 0,
+  defaultValue: 0,
+  viewEmpty: true,
+  icon: React__default.createElement(SvgStar, null),
+  iconFill: React__default.createElement(SvgStarFilled, null),
+  hidden: false,
+  type: '',
+  descriptionToolTip: '',
+  displayDescriptionToolTip: false,
+  onChange: () => {}
+};
+
+export { CompactStarRating as C };