@zohodesk/components 1.0.0-temp-77 → 1.0.0-temp-78

package/lib/utils/shallowEqual.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = shallowEqual;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (_typeof(objA) !== 'object' || objA === null || _typeof(objB) !== 'object' || objB === null) {
+    return false;
+  }
+
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  for (var i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-77",
+  "version": "1.0.0-temp-78",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -42,10 +42,10 @@
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.48"
+    "@zohodesk/svg": "1.0.0-beta.48",
+    "@zohodesk/a11y": "1.0.0-alpha-2"
   },
   "dependencies": {
-    "framer-motion": "^4.1.16",
     "hoist-non-react-statics": "3.0.1",
     "react-transition-group": "2.5.0",
     "reselect": "4.0.0",

package/es/FramerAnimation/FramerAnimation.js

@@ -1,206 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { motion, AnimatePresence, AnimateSharedLayout } from "framer-motion";
-export default class FramerAnimation extends Component {
-  constructor(props) {
-    super(props);
-    this.getAnimationVariant = this.getAnimationVariant.bind(this); // this.onDragEnd = this.onDragEnd.bind(this);
-  }
-
-  getAnimationVariant(argm) {
-    const {
-      enterDelay,
-      exitDelay,
-      enterDuration,
-      exitDuration
-    } = this.props;
-
-    switch (argm) {
-      case "fade":
-        return {
-          hide: {
-            opacity: 0,
-            transition: {
-              delay: enterDelay,
-              duration: enterDuration
-            }
-          },
-          show: {
-            opacity: 1,
-            transition: {
-              delay: exitDelay,
-              duration: exitDuration
-            }
-          }
-        };
-
-      case "expand":
-        return {
-          hide: {
-            scale: 0,
-            transition: {
-              delay: enterDelay,
-              duration: enterDuration
-            }
-          },
-          show: {
-            scale: 1,
-            transition: {
-              delay: exitDelay,
-              duration: exitDuration
-            }
-          }
-        };
-
-      case "flyDown":
-        return {
-          hide: {
-            translateY: "-100%",
-            transition: {
-              delay: enterDelay,
-              duration: enterDuration
-            }
-          },
-          show: {
-            translateY: "0%",
-            transition: {
-              delay: exitDelay,
-              duration: exitDuration
-            }
-          }
-        };
-
-      case "flyLeft":
-        return {
-          hide: {
-            translateX: "100%",
-            transition: {
-              delay: enterDelay,
-              duration: enterDuration
-            }
-          },
-          show: {
-            translateX: "0%",
-            transition: {
-              delay: exitDelay,
-              duration: exitDuration
-            }
-          }
-        };
-
-      case "flyRight":
-        return {
-          hide: {
-            translateX: "-100%",
-            transition: {
-              delay: enterDelay,
-              duration: enterDuration
-            }
-          },
-          show: {
-            translateX: "0%",
-            transition: {
-              delay: exitDelay,
-              duration: exitDuration
-            }
-          }
-        };
-
-      case "slideDown":
-        return {
-          hide: {
-            height: 0,
-            overflow: 'hidden',
-            origin: 0,
-            transition: {
-              delay: enterDelay,
-              duration: enterDuration
-            }
-          },
-          show: {
-            height: "auto",
-            overflow: 'hidden',
-            origin: 0,
-            transition: {
-              delay: exitDelay,
-              duration: exitDuration
-            }
-          }
-        };
-    }
-  } // onDragEnd(event, info) {
-  //     const { onDragEnd } = this.props;
-  //     onDragEnd && onDragEnd(event, info)
-  // }
-
-
-  render() {
-    const {
-      runOnMount,
-      children,
-      key,
-      isActive,
-      type,
-      direction,
-      isCustomize,
-      layout,
-      layoutId,
-      animationType,
-      className
-    } = this.props;
-    const variant = this.getAnimationVariant(`${type}${direction}`);
-    return !isCustomize ? runOnMount ? /*#__PURE__*/React.createElement(AnimatePresence, {
-      exitBeforeEnter: true
-    }, isActive ? /*#__PURE__*/React.createElement(motion.div, {
-      key: key,
-      variants: variant,
-      initial: "hide",
-      animate: "show",
-      exit: "hide",
-      layout: layout,
-      layoutId: layoutId,
-      type: animationType,
-      className: className // drag
-      // onDragEnd={this.onDragEnd}
-
-    }, children) : null) : /*#__PURE__*/React.createElement(motion.div, {
-      key: key,
-      variants: variant,
-      animate: isActive ? "hide" : "show",
-      layout: layout,
-      layoutId: layoutId,
-      type: animationType,
-      className: className
-    }, children) : /*#__PURE__*/React.createElement(motion.div, props);
-  }
-
-}
-FramerAnimation.propTypes = {
-  initial: PropTypes.bool,
-  children: PropTypes.node,
-  key: PropTypes.string,
-  type: PropTypes.string,
-  enterDelay: PropTypes.string,
-  exitDelay: PropTypes.string,
-  enterDuration: PropTypes.string,
-  exitDuration: PropTypes.string,
-  layoutId: PropTypes.string,
-  layout: PropTypes.oneOf(["position", "size"]),
-  //or boolean,
-  direction: PropTypes.string,
-  runOnMount: PropTypes.bool,
-  animationType: PropTypes.oneOf(["spring", "tween"]),
-  className: PropTypes.string
-};
-FramerAnimation.defaultProps = {
-  enterDelay: 0,
-  exitDelay: 0,
-  enterDuration: 0.3,
-  exitDuration: 0.3,
-  type: 'fade',
-  direction: '',
-  layout: false,
-  runOnMount: false,
-  className: '',
-  animationType: 'tween'
-};

package/es/FramerAnimation/docs/FramerAnimation__default.docs.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import FramerAnimation from '../FramerAnimation';
-import Select from '../../Select/Select';
-import Button from '../../Button/Button';
-let animationList = [{
-  text: 'fade',
-  type: 'fade',
-  id: 'animate-1'
-}, {
-  text: 'expand',
-  type: 'expand',
-  id: 'animate-2'
-}, {
-  text: 'fly_Left',
-  type: 'fly',
-  direction: 'Left',
-  id: 'animate-3'
-}, {
-  text: 'fly_Right',
-  type: 'fly',
-  direction: 'Right',
-  id: 'animate-4'
-}, {
-  text: 'fly_Down',
-  type: 'fly',
-  direction: 'Down',
-  id: 'animate-5'
-}, {
-  text: 'slide_Down',
-  type: 'slide',
-  direction: 'Down',
-  id: 'animate-6'
-}];
-export default class FramerAnimation__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: animationList[0],
-      isActive: false,
-      x: 0,
-      y: 0
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleView = this.handleView.bind(this); // this.onDragEnd = this.onDragEnd.bind(this);
-  }
-
-  handleChange(fieldId, value) {
-    this.setState({
-      value,
-      isActive: false
-    });
-  }
-
-  handleView() {
-    this.setState({
-      isActive: !this.state.isActive
-    });
-  } // onDragEnd(event, info) {
-  //     this.setState({ x: info.point.x, y: info.point.y })
-  // }
-
-
-  render() {
-    let {
-      value,
-      isActive
-    } = this.state;
-    let animate = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_black)',
-      textAlign: 'center',
-      color: 'var(--dot_white)',
-      lineHeight: '100px' // position:' absolute',
-      // left: this.state.x,
-      // top: this.state.y
-
-    };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '30%',
-        display: 'flex',
-        marginLeft: "20px"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginTop: "30px",
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement(Select, {
-      onChange: this.handleChange,
-      options: animationList,
-      selectedValue: value.id
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginLeft: "20px",
-        marginRight: "20px"
-      }
-    }, /*#__PURE__*/React.createElement(Button, {
-      onClick: this.handleView
-    }, isActive ? 'show' : 'hide'))), /*#__PURE__*/React.createElement(FramerAnimation, {
-      runOnMount: true,
-      type: value.type,
-      direction: value.direction,
-      isActive: isActive,
-      key: value.id,
-      id: value.id,
-      enterDuration: "0.8",
-      exitrDuration: "0.8" // onDragEnd={this.onDragEnd}
-
-    }, /*#__PURE__*/React.createElement("div", {
-      style: animate
-    }, "Animation"))));
-  }
-
-}
-
-if (false) {
-  FramerAnimation__default.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Animations'
-  };
-}