pebble-web 2.2.7 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.2.7",
+  "version": "2.3.2",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -44,12 +44,12 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.2.5"
+    "pebble-shared": "^2.2.9"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "9ea2025dd7943511c22812a3868961fcee363f28"
+  "gitHead": "f79f787b420cadf8dc8c3e77fa0dde498d7a75dd"
 }

package/src/components/Calendar.tsx

@@ -12,7 +12,7 @@ import {
   wrapperStyle
 } from "./styles/Calendar.styles";
 import Button from "./Button";
-import { isSameDay, endOfDay, startOfDay } from "date-fns";
+import { isSameDay, endOfDay, startOfDay, addDays, subDays } from "date-fns";
 
 class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
   static defaultProps: Partial<CalendarProps> = {
@@ -20,7 +20,7 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
     tileDots: []
   };
 
-  state: CalendarState = {
+  state: Readonly<CalendarState> = {
     value: this.props.selected,
     singleSelectedDate: null
   };
@@ -35,7 +35,8 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
         this.setState(
           {
             value: value as [Date, Date],
-            singleSelectedDate: null
+            singleSelectedDate: null,
+            maxRangeDates: undefined
           },
           () => props.onChange(value as [Date, Date])
         );
@@ -45,7 +46,8 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
         this.setState(
           {
             value,
-            singleSelectedDate: null
+            singleSelectedDate: null,
+            maxRangeDates: undefined
           },
           () => props.onChange(value)
         );
@@ -55,6 +57,15 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
 
   private onDayClick = (day: Date) => {
     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)] });
     if (onClickDay) onClickDay(day);
   };
@@ -123,8 +134,11 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
       className,
       onApply,
       onClear,
+      maxDate,
+      minDate,
       ...rest
     } = this.props;
+    const { maxRangeDates } = this.state;
 
     return (
       <div
@@ -156,6 +170,8 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
           nextLabel={
             <i style={{ fontSize: 14 }} className="pi pi-arrow-right" />
           }
+          maxDate={maxDate || (maxRangeDates && maxRangeDates.future)}
+          minDate={minDate || (maxRangeDates && maxRangeDates.past)}
         />
 
         {(onClear || onApply) && (

package/src/components/Rating.tsx

@@ -0,0 +1,82 @@
+import { cx } from "emotion";
+import * as React from "react";
+import {
+  disabledStyle,
+  selectedStar,
+  unSelectedStar,
+  wrapStyle
+} from "./styles/Rating.styles";
+import { RatingProps, RatingState } from "./typings/Rating";
+
+function generateStars(maxRating: number, selectedValue: number) {
+  return Array.from({ length: maxRating }, (_, i) => {
+    return { active: i + 1 <= selectedValue };
+  });
+}
+
+class Rating extends React.PureComponent<RatingProps, RatingState> {
+  constructor(props: RatingProps) {
+    super(props);
+    this.state = {
+      stars: generateStars(props.maxRating, props.value)
+    };
+  }
+
+  componentDidUpdate(prevProps: RatingProps) {
+    const { maxRating, value } = this.props;
+    if (prevProps.maxRating !== maxRating) {
+      this.setState({
+        stars: generateStars(maxRating, value)
+      });
+    }
+  }
+
+  setRating = (rating: number) => {
+    const { maxRating, disabled } = this.props;
+    if (disabled) {
+      return;
+    }
+    this.setState({
+      stars: generateStars(maxRating, rating)
+    });
+  };
+
+  render() {
+    const { name, value, onChange, disabled, className } = this.props;
+    const { stars } = this.state;
+
+    const _className = cx(wrapStyle, className, disabled && disabledStyle);
+
+    return (
+      <div className={_className}>
+        {stars.map((star, starIndex) => {
+          const rating = starIndex + 1;
+          return (
+            <span
+              key={`${name}-${rating}`}
+              onMouseEnter={() => this.setRating(rating)}
+              onMouseLeave={() => this.setRating(value)}
+              onClick={() => {
+                if (disabled) {
+                  return;
+                }
+                this.setRating(rating);
+                onChange(rating);
+              }}
+            >
+              <i
+                className={cx(
+                  "pi pi-grade",
+                  unSelectedStar,
+                  star.active && selectedStar
+                )}
+              />
+            </span>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default Rating;

package/src/components/Search.tsx

@@ -6,6 +6,8 @@ import {
   searchWrapperStyle,
   clearContainer
 } from "./styles/Search.styles";
+import Loader from "./Loader";
+import { colors } from "pebble-shared";
 
 class Search extends React.PureComponent<SearchProps> {
   searchInputRef: React.RefObject<HTMLInputElement> = React.createRef();
@@ -24,7 +26,8 @@ class Search extends React.PureComponent<SearchProps> {
       showSearchIcon,
       className,
       clearable,
-      value
+      value,
+      loading
     } = this.props;
 
     const wrapperClassName = cx(searchWrapperStyle, {
@@ -48,6 +51,7 @@ class Search extends React.PureComponent<SearchProps> {
           value={value}
           {...inputProps}
         />
+        {loading && <Loader scale={0.4} color={colors.violet.base} />}
         {clearable && (
           <div
             className={cx(clearContainer, {

package/src/components/__tests__/rating.test.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Rating } from "../";
+import { mount } from "enzyme";
+import sinon from "sinon";
+
+describe("Rating", () => {
+  test("should call onChange on click with correct arguments", () => {
+    const spy = sinon.spy();
+
+    const rating = mount(
+      <Rating name="test rating" maxRating={5} value={2} onChange={spy} />
+    );
+
+    rating.find("span").at(0).simulate("click");
+
+    expect(spy.calledWith(1)).toBeTruthy();
+  });
+
+  test("should not call onChange on click when disabled", () => {
+    const spy = sinon.spy();
+
+    const rating = mount(
+      <Rating
+        name="test rating"
+        maxRating={5}
+        value={2}
+        onChange={spy}
+        disabled
+      />
+    );
+
+    rating.find("span").at(0).simulate("click");
+    expect(spy.called).toBeFalsy();
+  });
+});

package/src/components/index.ts

@@ -21,6 +21,7 @@ import PopUp from "./PopUp";
 import PresetCalendar from "./PresetCalendar";
 import Radio from "./Radio";
 import RadioGroup from "./RadioGroup";
+import Rating from "./Rating";
 import Search from "./Search";
 import SecondaryInput from "./SecondaryInput";
 import Select from "./Select";
@@ -62,6 +63,7 @@ export {
   PresetCalendar,
   Radio,
   RadioGroup,
+  Rating,
   Search,
   SecondaryInput,
   Select,

package/src/components/styles/Rating.styles.ts

@@ -0,0 +1,22 @@
+import { css } from "emotion";
+import { colors } from "pebble-shared";
+import { mixins } from "../../theme";
+
+export const wrapStyle = css({
+  ...mixins.flexRow,
+  cursor: "pointer"
+});
+
+export const disabledStyle = css({
+  cursor: "not-allowed"
+});
+
+export const unSelectedStar = css({
+  marginLeft: "2px",
+  color: colors.gray.border,
+  fontSize: "20px"
+});
+
+export const selectedStar = css({
+  color: colors.yellow.base
+});

package/src/components/typings/Calendar.ts

@@ -23,6 +23,7 @@ export interface DateSingle extends CommonCalendarProps {
 
 export interface DateRange extends CommonCalendarProps {
   range: true;
+  maxRange?: number; // number of days
   selected?: [Date, Date];
   onChange: (value: [Date, Date]) => void;
   onApply?: (value?: [Date, Date]) => void;
@@ -33,4 +34,8 @@ export type CalendarProps = DateSingle | DateRange;
 export interface CalendarState {
   value?: [Date, Date] | Date;
   singleSelectedDate?: [Date, Date] | null;
+  maxRangeDates?: {
+    future: Date;
+    past: Date;
+  };
 }

package/src/components/typings/Rating.ts

@@ -0,0 +1,12 @@
+export interface RatingProps {
+  name: string;
+  maxRating: number;
+  value: number;
+  onChange: (value: number) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface RatingState {
+  stars: Array<{ active: boolean }>;
+}

package/src/components/typings/Search.ts

@@ -9,4 +9,5 @@ export interface SearchProps {
   className?: string;
   clearable?: boolean;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  loading?: boolean;
 }