pebble-web 2.2.7 → 2.3.2

package/dist/pebble-web.es.js

@@ -4,6 +4,8 @@ export { colors } from 'pebble-shared';
 import React__default, { createElement, Fragment, PureComponent, Children, cloneElement, createRef, createContext, Component } from 'react';
 import Ink from 'react-ink';
 import RCalendar from 'react-calendar/dist/Calendar';
+import subDays from 'date-fns/subDays';
+import addDays from 'date-fns/addDays';
 import startOfDay from 'date-fns/startOfDay';
 import endOfDay from 'date-fns/endOfDay';
 import isSameDay from 'date-fns/isSameDay';
@@ -633,14 +635,16 @@ class Calendar extends PureComponent {
         if (Array.isArray(value) && value.length === 2) {
           this.setState({
             value: value,
-            singleSelectedDate: null
+            singleSelectedDate: null,
+            maxRangeDates: undefined
           }, () => props.onChange(value));
         }
       } else {
         if (!Array.isArray(value)) {
           this.setState({
             value,
-            singleSelectedDate: null
+            singleSelectedDate: null,
+            maxRangeDates: undefined
           }, () => props.onChange(value));
         }
       }
@@ -649,6 +653,17 @@ class Calendar extends PureComponent {
       const {
         onClickDay
       } = this.props;
+      if (this.props.range && this.props.maxRange) {
+        const {
+          maxRange
+        } = this.props;
+        this.setState({
+          maxRangeDates: {
+            future: addDays(day, maxRange),
+            past: subDays(day, maxRange)
+          }
+        });
+      }
       this.setState({
         singleSelectedDate: [startOfDay(day), endOfDay(day)]
       });
@@ -716,8 +731,13 @@ class Calendar extends PureComponent {
       className,
       onApply,
       onClear,
+      maxDate,
+      minDate,
       ...rest
     } = this.props;
+    const {
+      maxRangeDates
+    } = this.state;
     return /*#__PURE__*/createElement("div", {
       className: cx(wrapperStyle, {
         [/*#__PURE__*/css( {
@@ -749,7 +769,9 @@ class Calendar extends PureComponent {
           fontSize: 14
         },
         className: "pi pi-arrow-right"
-      })
+      }),
+      maxDate: maxDate || maxRangeDates && maxRangeDates.future,
+      minDate: minDate || maxRangeDates && maxRangeDates.past
     })), (onClear || onApply) && /*#__PURE__*/createElement("div", {
       className: buttonsWrapper
     }, onClear && /*#__PURE__*/createElement(Button, {
@@ -1945,7 +1967,8 @@ class Search extends PureComponent {
       showSearchIcon,
       className,
       clearable,
-      value
+      value,
+      loading
     } = this.props;
     const wrapperClassName = cx(searchWrapperStyle, {
       __pebble__search__small: type === "small",
@@ -1966,7 +1989,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
       }),
@@ -2887,6 +2913,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;" + ( "" ));
@@ -3504,7 +3619,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;"
 } );
@@ -3562,14 +3677,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",
@@ -4030,5 +4145,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