pebble-web 2.2.9 → 2.4.0

package/dist/pebble-web.es.js

@@ -1821,7 +1821,6 @@ const rowWrapper = /*#__PURE__*/css({ ...typography.normal.regular,
   lineHeight: "28px",
   zIndex: 999,
   ...textEllipsis,
-  ...flexSpaceBetween,
   alignItems: "center",
   display: "flex",
   "&:last-of-type": {
@@ -1832,8 +1831,8 @@ const rowWrapper = /*#__PURE__*/css({ ...typography.normal.regular,
   }
 }, ";label:rowWrapper;" + ( "" ));
 const labelWrap = /*#__PURE__*/css( {
-  name: "12vt42m-labelWrap",
-  styles: "user-select:none;overflow:hidden;text-overflow:ellipsis;;label:labelWrap;"
+  name: "1glxdhg-labelWrap",
+  styles: "user-select:none;flex-grow:1;overflow:hidden;text-overflow:ellipsis;;label:labelWrap;"
 } );
 const activeRow = /*#__PURE__*/css({
   backgroundColor: colors.gray.lightest
@@ -1853,7 +1852,8 @@ const defaultProps = {
   rightElement: ({
     isSelected,
     multiSelect,
-    indeterminate
+    indeterminate,
+    iconClassName
   }) => {
     const iconClass = cx("pi", {
       "pi-checkbox-selected": !indeterminate && isSelected,
@@ -1865,7 +1865,7 @@ const defaultProps = {
       fontSize: "20px"
     }, ";label:iconClass;" + ( "" )));
     return multiSelect ? /*#__PURE__*/createElement("i", {
-      className: iconClass
+      className: cx(iconClass, iconClassName)
     }) : null;
   }
 };
@@ -1875,6 +1875,7 @@ class Option extends Component {
       label,
       isActive,
       isSelected,
+      leftElement,
       rightElement,
       labelClassName,
       className
@@ -1888,7 +1889,7 @@ class Option extends Component {
       type: this.props.multiSelect ? "checkbox" : "radio",
       className: _class
     }), () => {
-      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
+      return /*#__PURE__*/createElement(Fragment, null, leftElement && leftElement(this.props), /*#__PURE__*/createElement("div", {
         className: cx(labelWrap, labelClassName)
       }, label), rightElement(this.props), /*#__PURE__*/createElement(Ink, null));
     });
@@ -1967,7 +1968,8 @@ class Search extends PureComponent {
       showSearchIcon,
       className,
       clearable,
-      value
+      value,
+      loading
     } = this.props;
     const wrapperClassName = cx(searchWrapperStyle, {
       __pebble__search__small: type === "small",
@@ -1988,7 +1990,10 @@ class Search extends PureComponent {
       },
       ref: this.searchInputRef,
       value: value
-    }, inputProps)), clearable && /*#__PURE__*/createElement("div", {
+    }, inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+      scale: 0.4,
+      color: colors.violet.base
+    }), clearable && /*#__PURE__*/createElement("div", {
       className: cx(clearContainer, {
         __display: !!value && !!value.length
       }),
@@ -2235,6 +2240,7 @@ class OptionGroupCheckBox extends PureComponent {
   }
   render() {
     const {
+      wrapClassName,
       onApply,
       onClear,
       isSelected,
@@ -2247,7 +2253,7 @@ class OptionGroupCheckBox extends PureComponent {
       ...this.props.advancedOptionsProps
     };
     return /*#__PURE__*/createElement("div", {
-      className: optionGroupCheckBoxWrap
+      className: cx(optionGroupCheckBoxWrap, wrapClassName)
     }, /*#__PURE__*/createElement(OptionGroup, Object.assign({}, rest, {
       advancedOptionsProps: advancedOptionsProps,
       isSelected: isSelected || this.isSelected,
@@ -2909,6 +2915,95 @@ class RadioGroup extends PureComponent {
   }
 }
 
+const wrapStyle = /*#__PURE__*/css({ ...flexRow,
+  cursor: "pointer"
+}, ";label:wrapStyle;" + ( "" ));
+const disabledStyle = /*#__PURE__*/css( {
+  name: "pl7a4e-disabledStyle",
+  styles: "cursor:not-allowed;;label:disabledStyle;"
+} );
+const unSelectedStar = /*#__PURE__*/css({
+  marginLeft: "2px",
+  color: colors.gray.border,
+  fontSize: "20px"
+}, ";label:unSelectedStar;" + ( "" ));
+const selectedStar = /*#__PURE__*/css({
+  color: colors.yellow.base
+}, ";label:selectedStar;" + ( "" ));
+
+function generateStars(maxRating, selectedValue) {
+  return Array.from({
+    length: maxRating
+  }, (_, i) => {
+    return {
+      active: i + 1 <= selectedValue
+    };
+  });
+}
+class Rating extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.setRating = rating => {
+      const {
+        maxRating,
+        disabled
+      } = this.props;
+      if (disabled) {
+        return;
+      }
+      this.setState({
+        stars: generateStars(maxRating, rating)
+      });
+    };
+    this.state = {
+      stars: generateStars(props.maxRating, props.value)
+    };
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      maxRating,
+      value
+    } = this.props;
+    if (prevProps.maxRating !== maxRating) {
+      this.setState({
+        stars: generateStars(maxRating, value)
+      });
+    }
+  }
+  render() {
+    const {
+      name,
+      value,
+      onChange,
+      disabled,
+      className
+    } = this.props;
+    const {
+      stars
+    } = this.state;
+    const _className = cx(wrapStyle, className, disabled && disabledStyle);
+    return /*#__PURE__*/createElement("div", {
+      className: _className
+    }, stars.map((star, starIndex) => {
+      const rating = starIndex + 1;
+      return /*#__PURE__*/createElement("span", {
+        key: `${name}-${rating}`,
+        onMouseEnter: () => this.setRating(rating),
+        onMouseLeave: () => this.setRating(value),
+        onClick: () => {
+          if (disabled) {
+            return;
+          }
+          this.setRating(rating);
+          onChange(rating);
+        }
+      }, /*#__PURE__*/createElement("i", {
+        className: cx("pi pi-grade", unSelectedStar, star.active && selectedStar)
+      }));
+    }));
+  }
+}
+
 const inputReadOnlyStyle$1 = /*#__PURE__*/css({
   color: colors.gray.dark
 }, ";label:inputReadOnlyStyle;" + ( "" ));
@@ -3526,7 +3621,7 @@ const labelTextStyle = /*#__PURE__*/css({ ...typography.s.bold,
   color: colors.gray.dark,
   marginRight: "10px"
 }, ";label:labelTextStyle;" + ( "" ));
-const disabledStyle = /*#__PURE__*/css( {
+const disabledStyle$1 = /*#__PURE__*/css( {
   name: "pl7a4e-disabledStyle",
   styles: "cursor:not-allowed;;label:disabledStyle;"
 } );
@@ -3584,14 +3679,14 @@ class Switch extends PureComponent {
     } = this.state;
     return /*#__PURE__*/createElement("label", {
       className: cx(className, fixedLabelStyle, {
-        [disabledStyle]: !!disabled
+        [disabledStyle$1]: !!disabled
       })
     }, /*#__PURE__*/createElement("span", {
       className: labelTextStyle
     }, label), /*#__PURE__*/createElement("div", {
       className: cx(labelStyle$1, {
         [selectedLabel]: value,
-        [disabledStyle]: !!disabled
+        [disabledStyle$1]: !!disabled
       })
     }, /*#__PURE__*/createElement("input", {
       type: "checkbox",
@@ -4052,5 +4147,5 @@ var index = /*#__PURE__*/Object.freeze({
     isDesktop: isDesktop
 });
 
-export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, mixins, styles, typography, index as utils };
+export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, mixins, styles, typography, index as utils };
 //# sourceMappingURL=pebble-web.es.js.map