@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/Toggle/DSToggleImpl.js

@@ -1,24 +1,31 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import {
-  isValidDrag,
-  cleanDrag,
-  calculateDrag,
-  dragStartingPoints
-} from "./toggleHelper";
-import { DSToggleRender } from "./DSToggleRender";
-import { togglePropTypes } from "./props";
+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 React, { Component } from 'react';
+import { calculateDrag, isValidDrag, cleanDrag, dragStartingPoints } from './toggleHelper.js';
+import DSToggleRender from './DSToggleRender.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 class DSToggleImpl extends Component {
   constructor(props) {
     super(props);
-    this.onDragStart = (clientX) => {
+
+    this.onDragStart = clientX => {
       const {
         startPoint,
         checked,
         isDragging,
         boxWidth,
         circleWidth
-      } = this.state;
+      } = this.state; // const { checked: checkedProp, } = this.props
+
       const drag = calculateDrag(clientX, {
         startPoint,
         checked,
@@ -26,158 +33,244 @@ class DSToggleImpl extends Component {
         boxWidth,
         circleWidth
       });
-      if (drag)
-        this.setState({ drag });
-      else
-        this.setDragOnChange(checked);
+      if (drag) this.setState({
+        drag
+      }); // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
+      else this.setDragOnChange(checked); // set initial position
     };
-    this.onDragStop = (e) => {
-      const { checked } = this.state;
+
+    this.onDragStop = e => {
+      const {
+        checked
+      } = this.state; // const { checked: checkedProp, } = this.props
+
       if (isValidDrag(this.state)) {
         this.onChange(e);
-        this.setState(cleanDrag);
-      } else
-        this.setDragOnChange(checked);
+        this.setState(cleanDrag); // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
+      } else this.setDragOnChange(checked); // set initial position
+
     };
-    this.onBlur = (e) => {
-      const { onBlur, id } = this.props;
-      if (onBlur)
-        onBlur(e, id);
+
+    this.onBlur = e => {
+      const {
+        onBlur,
+        id
+      } = this.props;
+      if (onBlur) onBlur(e, id);
     };
-    this.onFocus = (e) => {
-      const { onFocus, id } = this.props;
-      if (onFocus)
-        onFocus(e, id);
+
+    this.onFocus = e => {
+      const {
+        onFocus,
+        id
+      } = this.props;
+      if (onFocus) onFocus(e, id);
     };
-    this.onChange = (e) => {
-      const { checked } = this.state;
+
+    this.onChange = e => {
+      const {
+        checked
+      } = this.state;
       const {
         onChange,
         id,
-        value
+        value // checked: checkedProp,
+
       } = this.props;
-      const newCheck = !checked;
+      const newCheck = !checked; // this.setState({
+      //   checked: checkedProp != null ? checkedProp : newCheck,
+      // })
+
       this.setState({
         checked: newCheck
       });
       e.target.value = value;
       e.target.checked = newCheck;
       e.checked = newCheck;
-      onChange(e, id);
-      this.setDragOnChange(newCheck);
+      onChange(e, id); // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position
+
+      this.setDragOnChange(newCheck); // set new position
     };
+
     this.onMouseEnter = () => {
-      this.setState({ inside: true });
+      this.setState({
+        inside: true
+      });
     };
+
     this.onMouseLeave = () => {
-      this.setState({ inside: false });
+      this.setState({
+        inside: false
+      });
     };
-    this.onMouseMove = (event) => {
+
+    this.onMouseMove = event => {
       event.preventDefault();
       this.onDragStart(event.clientX);
     };
-    this.onMouseDown = (event) => {
+
+    this.onMouseDown = event => {
       this.onDragStart(event.clientX);
-      this.setState({ startPoint: event.clientX, isDragging: true });
-      window.addEventListener("mousemove", this.onMouseMove);
-      window.addEventListener("mouseup", this.onMouseUp);
+      this.setState({
+        startPoint: event.clientX,
+        isDragging: true
+      });
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('mouseup', this.onMouseUp);
     };
-    this.onMouseUp = (event) => {
+
+    this.onMouseUp = event => {
       this.onDragStop(event);
-      window.removeEventListener("mousemove", this.onMouseMove);
-      window.removeEventListener("mouseup", this.onMouseUp);
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('mouseup', this.onMouseUp);
     };
+
     this.onTouchCancel = () => {
-      this.setState({ inside: false });
+      this.setState({
+        inside: false
+      });
     };
-    this.onTouchEnd = (event) => {
+
+    this.onTouchEnd = event => {
       event.preventDefault();
       this.onDragStop(event);
     };
-    this.onTouchMove = (event) => {
+
+    this.onTouchMove = event => {
       this.onDragStart(event.touches[0].clientX);
     };
-    this.onTouchStart = (event) => {
+
+    this.onTouchStart = event => {
       this.onDragStart(event.touches[0].clientX);
-      this.setState({ startPoint: event.touches[0].clientX, isDragging: true });
+      this.setState({
+        startPoint: event.touches[0].clientX,
+        isDragging: true
+      });
     };
+
     this.state = {
       checked: props.checked || false,
       inside: false,
       isDragging: false,
+      // prevent draw of toggle before drag handle positioning calculations
       hide: true,
       drag: null,
       startPoint: null,
       circleWidth: null,
       boxWidth: null
     };
-    this.circle = React2.createRef();
-    this.box = React2.createRef();
+    this.circle = /*#__PURE__*/React.createRef();
+    this.box = /*#__PURE__*/React.createRef();
   }
+
   componentDidMount() {
     this.verifyElements();
   }
+
   componentDidUpdate(prevProps, prevState, snapshot) {
     if (this.state.hide && this.state.circleWidth && this.state.boxWidth && prevState.hide && this.state.drag !== null) {
-      this.setState({ hide: false });
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        hide: false
+      });
     }
+
     if (snapshot) {
       this.verifyElements();
     }
   }
+  /**
+   * ******************************************************
+   * Drag
+   * ****************************************************** *
+   *
+   * @param clientX
+   */
+
+
   static getDerivedStateFromProps(props, state) {
     if (props.checked === true || props.checked === false) {
-      return {
-        checked: props.checked,
-        ...dragStartingPoints(props.checked)(state)
-      };
+      return _objectSpread({
+        checked: props.checked
+      }, dragStartingPoints(props.checked)(state));
     }
+
     return null;
   }
+
   getSnapshotBeforeUpdate(prevProps) {
-    const { size } = this.props;
+    const {
+      size
+    } = this.props;
+
     if (prevProps.size !== size) {
       return true;
     }
+
     return false;
   }
+  /**
+   * ******************************************************
+   * other
+   * ****************************************************** *
+   *
+   * @param currentCheckState
+   */
+
+
   setDragOnChange(currentCheckState) {
     this.setState(dragStartingPoints(currentCheckState));
   }
+
   verifyElements() {
-    const { checked } = this.state;
-    const { checked: checkedProp } = this.props;
+    const {
+      checked
+    } = this.state;
+    const {
+      checked: checkedProp
+    } = this.props;
     const nodesInterval = setInterval(() => {
-      if (!this.circle || !this.box || !this.circle.current || !this.box.current)
-        return;
+      // !important it checks when nodes are availables
+      if (!this.circle || !this.box || !this.circle.current || !this.box.current) return;
       const {
-        current: { clientWidth: circleWidth }
+        current: {
+          clientWidth: circleWidth
+        }
       } = this.circle;
       const {
-        current: { clientWidth: boxWidth }
+        current: {
+          clientWidth: boxWidth
+        }
       } = this.box;
-      if (!circleWidth || !boxWidth || circleWidth === boxWidth)
-        return;
+      if (!circleWidth || !boxWidth || circleWidth === boxWidth) return;
       this.setState({
         boxWidth,
         circleWidth
       });
-      this.setDragOnChange(checkedProp != null ? checkedProp : checked);
+      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: `${drag}px` } : null;
-    return /* @__PURE__ */ React2.createElement(DSToggleRender, {
-      ...this.props,
-      defaultState: this.props.checked,
+    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,
-      dragStyle,
+      hide: hide,
+      dragStyle: dragStyle,
       handRef: this.circle,
-      inside,
+      inside: inside,
       onBlur: this.onBlur,
       onChange: this.onChange,
       onFocus: this.onFocus,
@@ -188,13 +281,9 @@ class DSToggleImpl extends Component {
       onTouchEnd: this.onTouchEnd,
       onTouchMove: this.onTouchMove,
       onTouchStart: this.onTouchStart
-    });
+    }));
   }
+
 }
-DSToggleImpl.propTypes = togglePropTypes;
-var DSToggleImpl_default = DSToggleImpl;
-export {
-  DSToggleImpl,
-  DSToggleImpl_default as default
-};
-//# sourceMappingURL=DSToggleImpl.js.map
+
+export { DSToggleImpl as default };

package/esm/Toggle/DSToggleRender.js

@@ -1,43 +1,56 @@
-import * as React from "react";
-import React2 from "react";
-import { onClickHandlerForNonInteractiveElements } from "@elliemae/ds-utilities";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { DSTooltip } from "@elliemae/ds-tooltip";
-const DSToggleRender = ({
-  containerProps,
-  id,
-  className = "",
-  style = {},
-  hasError = false,
-  hide,
-  readOnly = false,
-  disabled = false,
-  checked = false,
-  onBlur = () => null,
-  onFocus = () => null,
-  onChange = () => null,
-  onMouseDown = () => null,
-  onMouseEnter = () => null,
-  onMouseLeave = () => null,
-  onTouchCancel = () => null,
-  onTouchEnd = () => null,
-  onTouchMove = () => null,
-  onTouchStart = () => null,
-  labelOn = "ON",
-  labelOff = "OFF",
-  dragStyle = {},
-  containerRef = null,
-  handRef = null,
-  name = "",
-  value = "",
-  size = "s",
-  defaultState
-}) => {
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { onClickHandlerForNonInteractiveElements } from '@elliemae/ds-utilities';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import DSTooltip from '@elliemae/ds-tooltip';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSToggleRender = _ref => {
+  let {
+    containerProps,
+    id,
+    className = '',
+    style = {},
+    hasError = false,
+    hide,
+    readOnly = false,
+    disabled = false,
+    checked = false,
+    onBlur = () => null,
+    onFocus = () => null,
+    onChange = () => null,
+    onMouseDown = () => null,
+    onMouseEnter = () => null,
+    onMouseLeave = () => null,
+    onTouchCancel = () => null,
+    onTouchEnd = () => null,
+    onTouchMove = () => null,
+    onTouchStart = () => null,
+    labelOn = 'ON',
+    labelOff = 'OFF',
+    dragStyle = {},
+    containerRef = null,
+    handRef = null,
+    name = '',
+    value = '',
+    size = 's',
+    defaultState
+  } = _ref;
   const {
     cssClassName,
     classNameBlock,
     classNameElement
-  } = convertPropToCssClassName("form-element-toggle", className, {
+  } = convertPropToCssClassName('form-element-toggle', className, {
     hasError,
     readOnly,
     disabled,
@@ -46,61 +59,58 @@ const DSToggleRender = ({
     size
   });
   const allowChange = disabled || readOnly;
-  let label = checked ? /* @__PURE__ */ React2.createElement("div", {
-    className: classNameElement("icon-on")
-  }, labelOn) : /* @__PURE__ */ React2.createElement("div", {
-    className: classNameElement("icon-off")
-  }, labelOff);
+  let label = checked ? /*#__PURE__*/_jsx("div", {
+    className: classNameElement('icon-on')
+  }, void 0, labelOn) : /*#__PURE__*/_jsx("div", {
+    className: classNameElement('icon-off')
+  }, void 0, labelOff);
+
   if (readOnly) {
-    label = /* @__PURE__ */ React2.createElement(DSTooltip, {
+    label = /*#__PURE__*/_jsx(DSTooltip, {
       interactionType: "hover",
       title: "Read Only",
       triggerComponent: label
     });
   }
-  return /* @__PURE__ */ React2.createElement("div", {
-    "data-testid": "em-ds-toggle",
-    ...containerProps,
+
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    "data-testid": "em-ds-toggle"
+  }, containerProps), {}, {
     "aria-disabled": disabled,
     defaultChecked: checked,
-    defaultValue: value,
-    ...onClickHandlerForNonInteractiveElements(allowChange ? null : onChange),
+    defaultValue: value
+  }, onClickHandlerForNonInteractiveElements(allowChange ? null : onChange)), {}, {
     ref: containerRef,
-    className: `${cssClassName} ${defaultState ? "default-state-checked" : ""}${hide ? " ds-form-element-toggle-hide" : ""}`,
-    onBlur,
-    onFocus,
+    className: "".concat(cssClassName, " ").concat(defaultState ? 'default-state-checked' : '').concat(hide ? ' ds-form-element-toggle-hide' : ''),
+    onBlur: onBlur,
+    onFocus: onFocus // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    ,
     "aria-checked": checked,
     role: "checkbox",
-    tabIndex: 0
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: classNameBlock("box")
-  }, label), /* @__PURE__ */ React2.createElement("div", {
-    ref: handRef,
-    "aria-checked": checked,
-    "aria-disabled": disabled,
-    className: `${classNameElement("input")} ${defaultState ? "default-state-checked" : ""}`,
-    onMouseDown: allowChange ? null : onMouseDown,
-    onMouseEnter: allowChange ? null : onMouseEnter,
-    onMouseLeave: allowChange ? null : onMouseLeave,
-    onTouchCancel: allowChange ? null : onTouchCancel,
-    onTouchEnd: allowChange ? null : onTouchEnd,
-    onTouchMove: allowChange ? null : onTouchMove,
-    onTouchStart: allowChange ? null : onTouchStart,
-    style: {
-      ...style,
-      ...dragStyle
-    }
-  }), /* @__PURE__ */ React2.createElement("input", {
-    className: classNameElement("hidden-checkbox"),
-    defaultChecked: checked,
-    defaultValue: value,
-    name,
-    type: "checkbox"
+    tabIndex: 0,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classNameBlock('box')
+    }, void 0, label), /*#__PURE__*/jsx("div", {
+      ref: handRef,
+      "aria-checked": checked,
+      "aria-disabled": disabled,
+      className: "".concat(classNameElement('input'), " ").concat(defaultState ? 'default-state-checked' : ''),
+      onMouseDown: allowChange ? null : onMouseDown,
+      onMouseEnter: allowChange ? null : onMouseEnter,
+      onMouseLeave: allowChange ? null : onMouseLeave,
+      onTouchCancel: allowChange ? null : onTouchCancel,
+      onTouchEnd: allowChange ? null : onTouchEnd,
+      onTouchMove: allowChange ? null : onTouchMove,
+      onTouchStart: allowChange ? null : onTouchStart,
+      style: _objectSpread(_objectSpread({}, style), dragStyle)
+    }), /*#__PURE__*/_jsx("input", {
+      className: classNameElement('hidden-checkbox'),
+      defaultChecked: checked,
+      defaultValue: value,
+      name: name,
+      type: "checkbox"
+    })]
   }));
 };
-var DSToggleRender_default = DSToggleRender;
-export {
-  DSToggleRender,
-  DSToggleRender_default as default
-};
-//# sourceMappingURL=DSToggleRender.js.map
+
+export { DSToggleRender as default };

package/esm/Toggle/index.js

@@ -1,8 +1 @@
-import * as React from "react";
-import { default as default2, DSToggleWithSchema, DSToggle } from "./DSToggle";
-export {
-  DSToggle,
-  DSToggleWithSchema,
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSToggleWithSchema, default } from './DSToggle.js';

package/esm/Toggle/props.js

@@ -1,20 +1,61 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-import { dsBasicSizes } from "@elliemae/ds-shared/prop-types";
+import PropTypes from 'prop-types';
+import { dsBasicSizes } from '@elliemae/ds-shared/prop-types';
+
 const togglePropTypes = {
+  /**
+   * Set of Properties attached to the main container
+   */
   containerProps: PropTypes.shape({}),
+
+  /**
+   * Whether the toggle has error or not
+   */
   hasError: PropTypes.bool,
+
+  /**
+   * Whether the toggle is read only or not
+   */
   readOnly: PropTypes.bool,
+
+  /**
+   * Whether the toggle is disabled or not
+   */
   disabled: PropTypes.bool,
+
+  /**
+   * Whether the toggle is checked or not
+   */
   checked: PropTypes.bool,
+
+  /**
+   * Allows a function that is triggered once the toggle changes
+   */
   onChange: PropTypes.func,
+
+  /**
+   * Label to show when the toggle is ON
+   */
   labelOn: PropTypes.string,
+
+  /**
+   * Label to show when the toggle is OFF
+   */
   labelOff: PropTypes.string,
+
+  /**
+   * Default value once the component is initialized
+   */
   value: PropTypes.string,
+
+  /**
+   * ['s', 'm', 'l']
+   */
   size: PropTypes.oneOf(dsBasicSizes),
+
+  /**
+   * Input name
+   */
   name: PropTypes.string
 };
-export {
-  togglePropTypes
-};
-//# sourceMappingURL=props.js.map
+
+export { togglePropTypes };