pebble-web 2.5.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "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.4.0"
+    "pebble-shared": "^2.6.0"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "caa00f9df1eadf04e33d85e4e7e40ab0386ed5b2"
+  "gitHead": "17ffd0408f8ba57c3d4ef1342da8c696924bd5db"
 }

package/src/components/DateInput.tsx

@@ -5,7 +5,8 @@ import {
   dateClass,
   dropDownClassName,
   inputStyle,
-  wrapperStyle
+  wrapperStyle,
+  errorStyle
 } from "./styles/Date.styles";
 import Calendar from "./Calendar";
 import Input from "./Input";
@@ -83,7 +84,8 @@ export default class DateInput extends React.PureComponent<
       inputProps,
       placeholder,
       value: propsValue,
-      disabled
+      disabled,
+      errorMessage
     } = this.props;
 
     return (
@@ -100,7 +102,7 @@ export default class DateInput extends React.PureComponent<
                 onChange={noop}
                 type={"tel"}
                 value={value}
-                placeholder={`${placeholder} DD/MM/YYYY`}
+                placeholder={placeholder}
                 onClick={() => {
                   if (disabled) return;
                   toggleDropdown();
@@ -123,17 +125,20 @@ export default class DateInput extends React.PureComponent<
         modifiers={modifiers}
       >
         {({ toggle }) => (
-          <Calendar
-            hideShadow
-            className={dateClass}
-            selected={propsValue ? new Date(propsValue) : undefined}
-            {...calendarProps}
-            range={false}
-            onChange={date => {
-              this.onCalendarDateChange(date);
-              toggle();
-            }}
-          />
+          <>
+            <Calendar
+              hideShadow
+              className={dateClass}
+              selected={propsValue ? new Date(propsValue) : undefined}
+              {...calendarProps}
+              range={false}
+              onChange={date => {
+                this.onCalendarDateChange(date);
+                toggle();
+              }}
+            />
+            {errorMessage && <div className={errorStyle}>{errorMessage}</div>}
+          </>
         )}
       </DropDown>
     );

package/src/components/Sidebar.tsx

@@ -5,16 +5,16 @@ import {
   sidebarWrapperStyle
 } from "./styles/Sidebar.styles";
 import { SidebarProps } from "./typings/Sidebar";
-import { Transition, animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring/renderprops.cjs";
 import Ink from "react-ink";
 import { css, cx } from "emotion";
 import { disableScrollY } from "../theme/styles";
-import { animationConfig } from "../utils/animation";
+import MountTransition from "./shared/MountTransition";
 
 const transitionProps = {
-  from: { opacity: 0 },
-  enter: { opacity: 1 },
-  leave: { opacity: 0 }
+  from: { opacity: 0, transform: "translateX(100%)" },
+  enter: { opacity: 1, transform: "translateX(0)" },
+  leave: { opacity: 0, transform: "translateX(100%)", pointerEvents: "none" }
 };
 
 class SideBar extends React.PureComponent<SidebarProps> {
@@ -57,65 +57,36 @@ class SideBar extends React.PureComponent<SidebarProps> {
       onOutsideClick,
       closeOnOutsideClick
     } = this.props;
-    const _sidebarOverride = css({
-      width,
-      transform: isOpen ? `translateX(0)` : `translateX(${width}px)`
-    });
-    const _sidebarStyle = cx(
-      _sidebarOverride,
-      sidebarStyle,
-      css({
-        transform: isOpen ? `translateX(0)` : `translateX(100%)`
-      })
-    );
+    const _sidebarStyle = cx(sidebarStyle, css({ width }));
 
     return (
-      <React.Fragment>
-        <Transition
-          items={isOpen}
-          {...transitionProps}
-          config={animationConfig.config}
-        >
-          {show =>
-            show &&
-            (styles => (
-              <animated.div
-                style={styles}
-                className={sidebarWrapperStyle}
-                onClick={
-                  onOutsideClick || closeOnOutsideClick
-                    ? this.onOutsideClick
-                    : undefined
-                }
-                data-testid="shadowArea"
-              />
-            ))
-          }
-        </Transition>
+      <MountTransition visible={isOpen} {...transitionProps}>
+        {styles => (
+          <>
+            <animated.div
+              style={{ opacity: styles.opacity }}
+              className={sidebarWrapperStyle}
+              onClick={
+                onOutsideClick || closeOnOutsideClick
+                  ? this.onOutsideClick
+                  : undefined
+              }
+              data-testid="shadowArea"
+            />
+
+            <animated.div className={_sidebarStyle} style={styles}>
+              <div className={closeStyle} onClick={onClose}>
+                <i className="pi pi-close" />
+                <Ink />
+              </div>
 
-        <div className={_sidebarStyle}>
-          <Transition items={isOpen} {...transitionProps}>
-            {show =>
-              show &&
-              (styles => (
-                <animated.div
-                  style={styles}
-                  className={closeStyle}
-                  onClick={onClose}
-                >
-                  <i className="pi pi-close" />
-                  <Ink />
-                </animated.div>
-              ))
-            }
-          </Transition>
-          {isOpen && (
-            <div style={{ overflowY: "scroll", height: "100vh" }}>
-              {children}
-            </div>
-          )}
-        </div>
-      </React.Fragment>
+              <div style={{ overflowY: "scroll", height: "100vh" }}>
+                {children}
+              </div>
+            </animated.div>
+          </>
+        )}
+      </MountTransition>
     );
   }
 }

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

@@ -12,14 +12,15 @@ describe("DateInput", () => {
     const changeSpy = sinon.spy();
 
     const dateInput = mount(
-      <DateInput placeholder="Select Date" onChange={changeSpy} value={date} />
+      <DateInput
+        placeholder="Select Date DD/MM/YYYY"
+        onChange={changeSpy}
+        value={date}
+      />
     );
     dateInput.find(Input).simulate("click");
 
-    dateInput
-      .find(".react-calendar__tile")
-      .at(0)
-      .simulate("click");
+    dateInput.find(".react-calendar__tile").at(0).simulate("click");
 
     expect(changeSpy.calledOnce).toBeTruthy();
 

package/src/components/styles/Date.styles.ts

@@ -1,4 +1,6 @@
 import { css } from "emotion";
+import { colors } from "pebble-shared";
+import { typography } from "../../theme";
 import { inputMarginBottom } from "./Input.styles";
 
 export const dateClass = css({
@@ -17,3 +19,11 @@ export const inputStyle = css({
 export const wrapperStyle = css({
   marginBottom: 20
 });
+
+export const errorStyle = css({
+  ...typography.s.bold,
+  backgroundColor: colors.red.lightest,
+  color: colors.red.darker,
+  textAlign: "left",
+  padding: "11px 30px",
+})

package/src/components/styles/Sidebar.styles.ts

@@ -44,7 +44,6 @@ export const closeStyle = css({
 });
 
 export const sidebarStyle = css({
-  transition: `transform 200ms ${constants.animationCurve}`,
   backgroundColor: colors.white.base,
   position: "fixed",
   top: 0,

package/src/components/typings/DateInput.ts

@@ -9,6 +9,7 @@ export interface DateInputProps {
   inputProps?: Omit<SimpleInputProps, "value" | "onChange" | "placeholder">;
   calendarProps?: DateSingle;
   disabled?: boolean;
+  errorMessage?: string;
 }
 
 export interface DateInputState {

package/src/utils/animation.ts

@@ -5,5 +5,5 @@ export const animationConfig = {
   enter: { opacity: 1, transform: "scale(1)" },
   leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" },
   config: (_a: boolean, motion: State) =>
-    motion === "leave" ? { duration: 0.1 } : { duration: 200 }
+    motion === "leave" ? { duration: 80 } : { duration: 200 }
 };