@elliemae/ds-form 1.60.0 → 2.0.0-alpha.12

package/esm/Toggle/DSToggle.js

@@ -1,39 +1,38 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React from 'react';
+import 'react';
 import { PropTypes, describe } from 'react-desc';
 import DSToggleImpl from './DSToggleImpl.js';
-import { d as dsBasicSizes } from '../prop-types-45aa1e9c.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import './toggleHelper.js';
-import './DSToggleRender.js';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-tooltip';
-import './props.js';
-import 'prop-types';
-
-var _excluded = ["containerProps", "hasError", "readOnly", "disabled", "checked", "labelOn", "labelOff", "name", "value", "size"];
-
-var DSToggle = function DSToggle(_ref) {
-  var containerProps = _ref.containerProps,
-      hasError = _ref.hasError,
-      readOnly = _ref.readOnly,
-      disabled = _ref.disabled,
-      checked = _ref.checked,
-      labelOn = _ref.labelOn,
-      labelOff = _ref.labelOff,
-      name = _ref.name,
-      value = _ref.value,
-      size = _ref.size,
+import { dsBasicSizes } from '@elliemae/ds-shared/prop-types';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "hasError", "readOnly", "disabled", "checked", "labelOn", "labelOff", "name", "value", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DSToggle = _ref => {
+  let {
+    containerProps,
+    hasError,
+    readOnly,
+    disabled,
+    checked,
+    labelOn,
+    labelOff,
+    name,
+    value,
+    size
+  } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(DSToggleImpl, _extends({}, otherProps, {
+  return /*#__PURE__*/jsx(DSToggleImpl, _objectSpread(_objectSpread({}, otherProps), {}, {
     checked: checked,
     containerProps: containerProps,
     disabled: disabled,
@@ -56,7 +55,7 @@ DSToggle.defaultProps = {
   disabled: false,
   checked: undefined
 };
-var props = {
+const props = {
   /**
    * Set of Properties attached to the main container
    */
@@ -112,9 +111,7 @@ var props = {
    */
   name: PropTypes.string.description('Input name')
 };
-DSToggle.propTypes = props;
-var DSToggleWithSchema = describe(DSToggle);
+const DSToggleWithSchema = describe(DSToggle);
 DSToggleWithSchema.propTypes = props;
 
 export { DSToggleWithSchema, DSToggle as default };
-//# sourceMappingURL=DSToggle.js.map

package/esm/Toggle/DSToggleImpl.js

@@ -1,173 +1,154 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
 import React, { Component } from 'react';
 import { calculateDrag, isValidDrag, cleanDrag, dragStartingPoints } from './toggleHelper.js';
 import DSToggleRender from './DSToggleRender.js';
-import { togglePropTypes } from './props.js';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-tooltip';
-import 'prop-types';
-import '../prop-types-45aa1e9c.js';
+import { jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var DSToggleImpl = /*#__PURE__*/function (_Component) {
-  _inherits(DSToggleImpl, _Component);
-
-  var _super = _createSuper(DSToggleImpl);
-
-  function DSToggleImpl(props) {
-    var _this;
-
-    _classCallCheck(this, DSToggleImpl);
-
-    _this = _super.call(this, props);
-
-    _this.onDragStart = function (clientX) {
-      var _this$state = _this.state,
-          startPoint = _this$state.startPoint,
-          checked = _this$state.checked,
-          isDragging = _this$state.isDragging,
-          boxWidth = _this$state.boxWidth,
-          circleWidth = _this$state.circleWidth; // const { checked: checkedProp, } = this.props
-
-      var drag = calculateDrag(clientX, {
-        startPoint: startPoint,
-        checked: checked,
-        isDragging: isDragging,
-        boxWidth: boxWidth,
-        circleWidth: circleWidth
+class DSToggleImpl extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onDragStart = clientX => {
+      const {
+        startPoint,
+        checked,
+        isDragging,
+        boxWidth,
+        circleWidth
+      } = this.state; // const { checked: checkedProp, } = this.props
+
+      const drag = calculateDrag(clientX, {
+        startPoint,
+        checked,
+        isDragging,
+        boxWidth,
+        circleWidth
       });
-      if (drag) _this.setState({
-        drag: drag
+      if (drag) this.setState({
+        drag
       }); // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
-      else _this.setDragOnChange(checked); // set initial position
+      else this.setDragOnChange(checked); // set initial position
     };
 
-    _this.onDragStop = function (e) {
-      var checked = _this.state.checked; // const { checked: checkedProp, } = this.props
-
-      if (isValidDrag(_this.state)) {
-        _this.onChange(e);
+    this.onDragStop = e => {
+      const {
+        checked
+      } = this.state; // const { checked: checkedProp, } = this.props
 
-        _this.setState(cleanDrag); // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
-
-      } else _this.setDragOnChange(checked); // set initial position
+      if (isValidDrag(this.state)) {
+        this.onChange(e);
+        this.setState(cleanDrag); // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
+      } else this.setDragOnChange(checked); // set initial position
 
     };
 
-    _this.onBlur = function (e) {
-      var _this$props = _this.props,
-          onBlur = _this$props.onBlur,
-          id = _this$props.id;
+    this.onBlur = e => {
+      const {
+        onBlur,
+        id
+      } = this.props;
       if (onBlur) onBlur(e, id);
     };
 
-    _this.onFocus = function (e) {
-      var _this$props2 = _this.props,
-          onFocus = _this$props2.onFocus,
-          id = _this$props2.id;
+    this.onFocus = e => {
+      const {
+        onFocus,
+        id
+      } = this.props;
       if (onFocus) onFocus(e, id);
     };
 
-    _this.onChange = function (e) {
-      var checked = _this.state.checked;
-      var _this$props3 = _this.props,
-          onChange = _this$props3.onChange,
-          id = _this$props3.id,
-          value = _this$props3.value;
-      var newCheck = !checked; // this.setState({
+    this.onChange = e => {
+      const {
+        checked
+      } = this.state;
+      const {
+        onChange,
+        id,
+        value // checked: checkedProp,
+
+      } = this.props;
+      const newCheck = !checked; // this.setState({
       //   checked: checkedProp != null ? checkedProp : newCheck,
       // })
 
-      _this.setState({
+      this.setState({
         checked: newCheck
       });
-
       e.target.value = value;
       e.target.checked = newCheck;
       e.checked = newCheck;
       onChange(e, id); // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position
 
-      _this.setDragOnChange(newCheck); // set new position
-
+      this.setDragOnChange(newCheck); // set new position
     };
 
-    _this.onMouseEnter = function () {
-      _this.setState({
+    this.onMouseEnter = () => {
+      this.setState({
         inside: true
       });
     };
 
-    _this.onMouseLeave = function () {
-      _this.setState({
+    this.onMouseLeave = () => {
+      this.setState({
         inside: false
       });
     };
 
-    _this.onMouseMove = function (event) {
+    this.onMouseMove = event => {
       event.preventDefault();
-
-      _this.onDragStart(event.clientX);
+      this.onDragStart(event.clientX);
     };
 
-    _this.onMouseDown = function (event) {
-      _this.onDragStart(event.clientX);
-
-      _this.setState({
+    this.onMouseDown = event => {
+      this.onDragStart(event.clientX);
+      this.setState({
         startPoint: event.clientX,
         isDragging: true
       });
-
-      window.addEventListener('mousemove', _this.onMouseMove);
-      window.addEventListener('mouseup', _this.onMouseUp);
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('mouseup', this.onMouseUp);
     };
 
-    _this.onMouseUp = function (event) {
-      _this.onDragStop(event);
-
-      window.removeEventListener('mousemove', _this.onMouseMove);
-      window.removeEventListener('mouseup', _this.onMouseUp);
+    this.onMouseUp = event => {
+      this.onDragStop(event);
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('mouseup', this.onMouseUp);
     };
 
-    _this.onTouchCancel = function () {
-      _this.setState({
+    this.onTouchCancel = () => {
+      this.setState({
         inside: false
       });
     };
 
-    _this.onTouchEnd = function (event) {
+    this.onTouchEnd = event => {
       event.preventDefault();
-
-      _this.onDragStop(event);
+      this.onDragStop(event);
     };
 
-    _this.onTouchMove = function (event) {
-      _this.onDragStart(event.touches[0].clientX);
+    this.onTouchMove = event => {
+      this.onDragStart(event.touches[0].clientX);
     };
 
-    _this.onTouchStart = function (event) {
-      _this.onDragStart(event.touches[0].clientX);
-
-      _this.setState({
+    this.onTouchStart = event => {
+      this.onDragStart(event.touches[0].clientX);
+      this.setState({
         startPoint: event.touches[0].clientX,
         isDragging: true
       });
     };
 
-    _this.state = {
+    this.state = {
       checked: props.checked || false,
       inside: false,
       isDragging: false,
@@ -178,135 +159,131 @@ var DSToggleImpl = /*#__PURE__*/function (_Component) {
       circleWidth: null,
       boxWidth: null
     };
-    _this.circle = /*#__PURE__*/React.createRef();
-    _this.box = /*#__PURE__*/React.createRef();
-    return _this;
+    this.circle = /*#__PURE__*/React.createRef();
+    this.box = /*#__PURE__*/React.createRef();
   }
 
-  _createClass(DSToggleImpl, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.verifyElements();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState, snapshot) {
-      if (this.state.hide && this.state.circleWidth && this.state.boxWidth && prevState.hide && this.state.drag !== null) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          hide: false
-        });
-      }
-
-      if (snapshot) {
-        this.verifyElements();
-      }
-    }
-    /**
-     * ******************************************************
-     * Drag
-     * ****************************************************** *
-     *
-     * @param clientX
-     */
-
-  }, {
-    key: "getSnapshotBeforeUpdate",
-    value: function getSnapshotBeforeUpdate(prevProps) {
-      var size = this.props.size;
-
-      if (prevProps.size !== size) {
-        return true;
-      }
-
-      return false;
-    }
-    /**
-     * ******************************************************
-     * other
-     * ****************************************************** *
-     *
-     * @param currentCheckState
-     */
-
-  }, {
-    key: "setDragOnChange",
-    value: function setDragOnChange(currentCheckState) {
-      this.setState(dragStartingPoints(currentCheckState));
+  componentDidMount() {
+    this.verifyElements();
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.state.hide && this.state.circleWidth && this.state.boxWidth && prevState.hide && this.state.drag !== null) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        hide: false
+      });
     }
-  }, {
-    key: "verifyElements",
-    value: function verifyElements() {
-      var _this2 = this;
-
-      var checked = this.state.checked;
-      var checkedProp = this.props.checked;
-      var nodesInterval = setInterval(function () {
-        // !important it checks when nodes are availables
-        if (!_this2.circle || !_this2.box || !_this2.circle.current || !_this2.box.current) return;
-        var circleWidth = _this2.circle.current.clientWidth;
-        var boxWidth = _this2.box.current.clientWidth;
-        if (!circleWidth || !boxWidth || circleWidth === boxWidth) return;
-
-        _this2.setState({
-          boxWidth: boxWidth,
-          circleWidth: circleWidth
-        });
-
-        _this2.setDragOnChange(checkedProp != null ? checkedProp : checked); // this.setDragOnChange(checked)
-
-
-        clearInterval(nodesInterval);
-      }, 5);
+
+    if (snapshot) {
+      this.verifyElements();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state2 = this.state,
-          checked = _this$state2.checked,
-          drag = _this$state2.drag,
-          inside = _this$state2.inside,
-          hide = _this$state2.hide;
-      var dragStyle = drag !== null || checked || this.props.checked ? {
-        left: "".concat(drag, "px")
-      } : null;
-      return /*#__PURE__*/React.createElement(DSToggleRender, _extends({}, this.props, {
-        defaultState: this.props.checked,
-        checked: checked,
-        containerRef: this.box,
-        hide: hide,
-        dragStyle: dragStyle,
-        handRef: this.circle,
-        inside: inside,
-        onBlur: this.onBlur,
-        onChange: this.onChange,
-        onFocus: this.onFocus,
-        onMouseDown: this.onMouseDown,
-        onMouseEnter: this.onMouseEnter,
-        onMouseLeave: this.onMouseLeave,
-        onTouchCancel: this.onTouchCancel,
-        onTouchEnd: this.onTouchEnd,
-        onTouchMove: this.onTouchMove,
-        onTouchStart: this.onTouchStart
-      }));
+  }
+  /**
+   * ******************************************************
+   * Drag
+   * ****************************************************** *
+   *
+   * @param clientX
+   */
+
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.checked === true || props.checked === false) {
+      return _objectSpread({
+        checked: props.checked
+      }, dragStartingPoints(props.checked)(state));
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.checked === true || props.checked === false) {
-        return _objectSpread({
-          checked: props.checked
-        }, dragStartingPoints(props.checked)(state));
-      }
-
-      return null;
+
+    return null;
+  }
+
+  getSnapshotBeforeUpdate(prevProps) {
+    const {
+      size
+    } = this.props;
+
+    if (prevProps.size !== size) {
+      return true;
     }
-  }]);
 
-  return DSToggleImpl;
-}(Component);
+    return false;
+  }
+  /**
+   * ******************************************************
+   * other
+   * ****************************************************** *
+   *
+   * @param currentCheckState
+   */
+
+
+  setDragOnChange(currentCheckState) {
+    this.setState(dragStartingPoints(currentCheckState));
+  }
+
+  verifyElements() {
+    const {
+      checked
+    } = this.state;
+    const {
+      checked: checkedProp
+    } = this.props;
+    const nodesInterval = setInterval(() => {
+      // !important it checks when nodes are availables
+      if (!this.circle || !this.box || !this.circle.current || !this.box.current) return;
+      const {
+        current: {
+          clientWidth: circleWidth
+        }
+      } = this.circle;
+      const {
+        current: {
+          clientWidth: boxWidth
+        }
+      } = this.box;
+      if (!circleWidth || !boxWidth || circleWidth === boxWidth) return;
+      this.setState({
+        boxWidth,
+        circleWidth
+      });
+      this.setDragOnChange(checkedProp != null ? checkedProp : checked); // this.setDragOnChange(checked)
+
+      clearInterval(nodesInterval);
+    }, 5);
+  }
+
+  render() {
+    const {
+      checked,
+      drag,
+      inside,
+      hide
+    } = this.state;
+    const dragStyle = drag !== null || checked || this.props.checked ? {
+      left: "".concat(drag, "px")
+    } : null;
+    return /*#__PURE__*/jsx(DSToggleRender, _objectSpread(_objectSpread({}, this.props), {}, {
+      defaultState: this.props.checked,
+      checked: checked,
+      containerRef: this.box,
+      hide: hide,
+      dragStyle: dragStyle,
+      handRef: this.circle,
+      inside: inside,
+      onBlur: this.onBlur,
+      onChange: this.onChange,
+      onFocus: this.onFocus,
+      onMouseDown: this.onMouseDown,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      onTouchCancel: this.onTouchCancel,
+      onTouchEnd: this.onTouchEnd,
+      onTouchMove: this.onTouchMove,
+      onTouchStart: this.onTouchStart
+    }));
+  }
 
-DSToggleImpl.propTypes = togglePropTypes;
+}
 
 export { DSToggleImpl as default };
-//# sourceMappingURL=DSToggleImpl.js.map