@elliemae/ds-form 2.2.0-alpha.3 → 3.0.0-next.0

package/cjs/Toggle/DSToggleImpl.js

@@ -1,210 +1,283 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSToggleImpl_exports = {};
-__export(DSToggleImpl_exports, {
-  DSToggleImpl: () => DSToggleImpl,
-  default: () => DSToggleImpl_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_toggleHelper = __toESM(require("./toggleHelper"));
-var import_DSToggleRender = __toESM(require("./DSToggleRender"));
-var import_props = __toESM(require("./props"));
-class DSToggleImpl extends import_react.Component {
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var toggleHelper = require('./toggleHelper.js');
+var DSToggleRender = require('./DSToggleRender.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"](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 React.Component {
   constructor(props) {
     super(props);
-    this.onDragStart = (clientX) => {
+
+    this.onDragStart = clientX => {
       const {
         startPoint,
         checked,
         isDragging,
         boxWidth,
         circleWidth
-      } = this.state;
-      const drag = (0, import_toggleHelper.calculateDrag)(clientX, {
+      } = this.state; // const { checked: checkedProp, } = this.props
+
+      const drag = toggleHelper.calculateDrag(clientX, {
         startPoint,
         checked,
         isDragging,
         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;
-      if ((0, import_toggleHelper.isValidDrag)(this.state)) {
+
+    this.onDragStop = e => {
+      const {
+        checked
+      } = this.state; // const { checked: checkedProp, } = this.props
+
+      if (toggleHelper.isValidDrag(this.state)) {
         this.onChange(e);
-        this.setState(import_toggleHelper.cleanDrag);
-      } else
-        this.setDragOnChange(checked);
+        this.setState(toggleHelper.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 = import_react.default.createRef();
-    this.box = import_react.default.createRef();
+    this.circle = /*#__PURE__*/React__default["default"].createRef();
+    this.box = /*#__PURE__*/React__default["default"].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,
-        ...(0, import_toggleHelper.dragStartingPoints)(props.checked)(state)
-      };
+      return _objectSpread({
+        checked: props.checked
+      }, toggleHelper.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((0, import_toggleHelper.dragStartingPoints)(currentCheckState));
+    this.setState(toggleHelper.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__ */ import_react.default.createElement(import_DSToggleRender.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__*/jsxRuntime.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,
@@ -215,10 +288,9 @@ class DSToggleImpl extends import_react.Component {
       onTouchEnd: this.onTouchEnd,
       onTouchMove: this.onTouchMove,
       onTouchStart: this.onTouchStart
-    });
+    }));
   }
+
 }
-DSToggleImpl.propTypes = import_props.togglePropTypes;
-var DSToggleImpl_default = DSToggleImpl;
-module.exports = __toCommonJS(DSToggleImpl_exports);
-//# sourceMappingURL=DSToggleImpl.js.map
+
+module.exports = DSToggleImpl;

package/cjs/Toggle/DSToggleRender.js

@@ -1,75 +1,64 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSToggleRender_exports = {};
-__export(DSToggleRender_exports, {
-  DSToggleRender: () => DSToggleRender,
-  default: () => DSToggleRender_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_utilities = __toESM(require("@elliemae/ds-utilities"));
-var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
-var import_ds_tooltip = __toESM(require("@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
-}) => {
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSTooltip = require('@elliemae/ds-tooltip');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
+
+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__default["default"](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
-  } = (0, import_ds_classnames.convertPropToCssClassName)("form-element-toggle", className, {
+  } = dsClassnames.convertPropToCssClassName('form-element-toggle', className, {
     hasError,
     readOnly,
     disabled,
@@ -78,58 +67,58 @@ const DSToggleRender = ({
     size
   });
   const allowChange = disabled || readOnly;
-  let label = checked ? /* @__PURE__ */ import_react.default.createElement("div", {
-    className: classNameElement("icon-on")
-  }, labelOn) : /* @__PURE__ */ import_react.default.createElement("div", {
-    className: classNameElement("icon-off")
-  }, labelOff);
+  let label = checked ? /*#__PURE__*/_jsx__default["default"]("div", {
+    className: classNameElement('icon-on')
+  }, void 0, labelOn) : /*#__PURE__*/_jsx__default["default"]("div", {
+    className: classNameElement('icon-off')
+  }, void 0, labelOff);
+
   if (readOnly) {
-    label = /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltip, {
+    label = /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
       interactionType: "hover",
       title: "Read Only",
       triggerComponent: label
     });
   }
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    "data-testid": "em-ds-toggle",
-    ...containerProps,
+
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    "data-testid": "em-ds-toggle"
+  }, containerProps), {}, {
     "aria-disabled": disabled,
     defaultChecked: checked,
-    defaultValue: value,
-    ...(0, import_ds_utilities.onClickHandlerForNonInteractiveElements)(allowChange ? null : onChange),
+    defaultValue: value
+  }, dsUtilities.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__ */ import_react.default.createElement("div", {
-    className: classNameBlock("box")
-  }, label), /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("input", {
-    className: classNameElement("hidden-checkbox"),
-    defaultChecked: checked,
-    defaultValue: value,
-    name,
-    type: "checkbox"
+    tabIndex: 0,
+    children: [/*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('box')
+    }, void 0, label), /*#__PURE__*/jsxRuntime.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__default["default"]("input", {
+      className: classNameElement('hidden-checkbox'),
+      defaultChecked: checked,
+      defaultValue: value,
+      name: name,
+      type: "checkbox"
+    })]
   }));
 };
-var DSToggleRender_default = DSToggleRender;
-module.exports = __toCommonJS(DSToggleRender_exports);
-//# sourceMappingURL=DSToggleRender.js.map
+
+module.exports = DSToggleRender;