@pie-element/number-line 6.6.0 → 6.6.1-beta.1

package/lib/number-line/graph/elements/line.js

@@ -1,317 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Line = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _draggable = _interopRequireDefault(require("../../../draggable"));
-
-var _point = _interopRequireDefault(require("./point"));
-
-var _base = require("./base");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
-var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
-
-var _renderUi = require("@pie-lib/render-ui");
-
-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) { (0, _defineProperty2["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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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 duration = '150ms';
-var style = {
-  line: {
-    '& .line-handle': {
-      stroke: _renderUi.color.primary(),
-      cursor: 'pointer',
-      strokeWidth: '5px',
-      transition: "opacity ".concat(duration, " linear, \n      stroke-width ").concat(duration, " linear,\n      stroke ").concat(duration, " linear")
-    },
-    '&.react-draggable-dragging': {
-      opacity: 0.6,
-      '& .line-handle': {
-        opacity: 1.0,
-        strokeWidth: '12px'
-      }
-    }
-  },
-  disabled: {
-    cursor: 'not-allowed',
-    opacity: 0.8
-  },
-  selected: {
-    '& .line-handle': {
-      stroke: _renderUi.color.primaryDark()
-    },
-    '& circle': {
-      stroke: _renderUi.color.primaryDark()
-    }
-  },
-  correct: {
-    '& .line-handle': {
-      cursor: 'inherit',
-      stroke: _renderUi.color.correct()
-    }
-  },
-  incorrect: {
-    '& .line-handle': {
-      cursor: 'inherit',
-      stroke: _renderUi.color.incorrect()
-    }
-  }
-};
-
-var Line = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Line, _React$Component);
-
-  var _super = _createSuper(Line);
-
-  function Line(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Line);
-    _this = _super.call(this, props);
-    _this.state = {
-      left: null,
-      right: null
-    };
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Line, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps) {
-        var position = nextProps.position;
-        this.setState({
-          left: position.left,
-          right: position.right
-        });
-      }
-    }
-  }, {
-    key: "onDrag",
-    value: function onDrag(side, p) {
-      var domain = this.props.domain;
-
-      if (p >= domain.min && p <= domain.max) {
-        var newState = {};
-        newState[side] = p;
-        this.setState(newState);
-      }
-    }
-  }, {
-    key: "onMove",
-    value: function onMove(side, d) {
-      var p = this.props.position;
-      var newPosition = {
-        left: p.left,
-        right: p.right
-      };
-      newPosition[side] = d;
-      this.props.onMoveLine(newPosition);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this,
-          _classNames;
-
-      var _this$props = this.props,
-          interval = _this$props.interval,
-          empty = _this$props.empty,
-          position = _this$props.position,
-          domain = _this$props.domain,
-          y = _this$props.y,
-          selected = _this$props.selected,
-          disabled = _this$props.disabled,
-          correct = _this$props.correct,
-          classes = _this$props.classes;
-      var xScale = this.context.xScale;
-      var onDrag = this.onDrag,
-          onMove = this.onMove;
-      var onMoveLeft = onMove.bind(this, 'left');
-      var onMoveRight = onMove.bind(this, 'right');
-      var onDragLeft = onDrag.bind(this, 'left');
-      var onDragRight = onDrag.bind(this, 'right');
-      var left = (0, _isNumber["default"])(this.state.left) ? this.state.left : position.left;
-      var right = (0, _isNumber["default"])(this.state.right) ? this.state.right : position.right;
-      var is = xScale(interval) - xScale(0);
-
-      var onMouseDown = function onMouseDown(e) {
-        return e.nativeEvent.preventDefault();
-      };
-
-      var onLineDragStart = function onLineDragStart(e) {
-        return _this2.setState({
-          startX: e.clientX
-        });
-      };
-
-      var onLineClick = function onLineClick() {
-        var _this2$state = _this2.state,
-            startX = _this2$state.startX,
-            endX = _this2$state.endX;
-
-        if (!startX || !endX) {
-          return;
-        }
-
-        var deltaX = Math.abs(endX - startX);
-
-        if (deltaX < is / 10) {
-          _this2.props.onToggleSelect();
-
-          _this2.setState({
-            startX: null,
-            endX: null
-          });
-        }
-      };
-
-      var onRectClick = function onRectClick() {
-        _this2.props.onToggleSelect();
-      };
-
-      var onLineDragStop = function onLineDragStop(e, dd) {
-        _this2.setState({
-          endX: e.clientX
-        });
-
-        var invertedX = xScale.invert(dd.lastX + xScale(0));
-        var newPosition = {
-          left: position.left + invertedX,
-          right: position.right + invertedX
-        };
-
-        if (!(0, _isEqual["default"])(newPosition, _this2.props.position)) {
-          _this2.props.onMoveLine(newPosition);
-        }
-      };
-
-      var scaledLineBounds = {
-        left: (domain.min - position.left) / interval * is,
-        right: (domain.max - position.right) / interval * is
-      };
-      var lineClass = (0, _classnames["default"])(classes.line, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), (0, _defineProperty2["default"])(_classNames, classes.selected, selected), (0, _defineProperty2["default"])(_classNames, classes.correct, correct === true), (0, _defineProperty2["default"])(_classNames, classes.incorrect, correct === false), _classNames));
-      var common = {
-        interval: interval,
-        selected: selected,
-        disabled: disabled,
-        correct: correct
-      };
-      return /*#__PURE__*/_react["default"].createElement(_draggable["default"], {
-        disabled: disabled,
-        axis: "x",
-        handle: ".line-handle",
-        grid: [is],
-        bounds: scaledLineBounds,
-        onStart: onLineDragStart,
-        onStop: onLineDragStop,
-        onMouseDown: onMouseDown
-      }, /*#__PURE__*/_react["default"].createElement("g", {
-        className: lineClass
-      }, /*#__PURE__*/_react["default"].createElement("g", {
-        transform: "translate(0, ".concat(y, ")")
-      }, /*#__PURE__*/_react["default"].createElement("rect", {
-        x: xScale(left),
-        width: Math.abs(xScale(right) - xScale(left)),
-        fill: "red",
-        fillOpacity: "0.0",
-        y: "-8",
-        height: 16,
-        onClick: onRectClick
-      }), /*#__PURE__*/_react["default"].createElement("line", {
-        className: (0, _classnames["default"])('line-handle', classes.handle, (0, _defineProperty2["default"])({}, classes.selected, selected)),
-        x1: xScale(left),
-        x2: xScale(right),
-        onClick: onLineClick
-      }), /*#__PURE__*/_react["default"].createElement(_point["default"], (0, _extends2["default"])({}, common, {
-        empty: empty.left,
-        bounds: {
-          left: domain.min - position.left,
-          right: domain.max - position.left
-        },
-        position: position.left,
-        onDrag: onDragLeft,
-        onMove: onMoveLeft
-      })), /*#__PURE__*/_react["default"].createElement(_point["default"], (0, _extends2["default"])({}, common, {
-        empty: empty.right,
-        bounds: {
-          left: domain.min - position.right,
-          right: domain.max - position.right
-        },
-        position: position.right,
-        onDrag: onDragRight,
-        onMove: onMoveRight
-      })))));
-    }
-  }]);
-  return Line;
-}(_react["default"].Component);
-
-exports.Line = Line;
-(0, _defineProperty2["default"])(Line, "propTypes", _objectSpread(_objectSpread({}, (0, _base.basePropTypes)()), {}, {
-  empty: _propTypes["default"].shape({
-    left: _propTypes["default"].bool.isRequired,
-    right: _propTypes["default"].bool.isRequired
-  }).isRequired,
-  position: _propTypes["default"].shape({
-    left: _propTypes["default"].number.isRequired,
-    right: _propTypes["default"].number.isRequired
-  }).isRequired,
-  y: _propTypes["default"].number,
-  selected: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  correct: _propTypes["default"].bool,
-  onMoveLine: _propTypes["default"].func.isRequired,
-  onToggleSelect: _propTypes["default"].func.isRequired,
-  onDragStart: _propTypes["default"].func,
-  onDragStop: _propTypes["default"].func
-}));
-(0, _defineProperty2["default"])(Line, "defaultProps", {
-  selected: false,
-  y: 0,
-  disabled: false,
-  correct: undefined
-});
-(0, _defineProperty2["default"])(Line, "contextTypes", {
-  xScale: _propTypes["default"].func.isRequired,
-  snapValue: _propTypes["default"].func.isRequired
-});
-
-var _default = (0, _reactJss["default"])(style)(Line);
-
-exports["default"] = _default;
-//# sourceMappingURL=line.js.map

package/lib/number-line/graph/elements/line.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/number-line/graph/elements/line.jsx"],"names":["duration","style","line","stroke","color","primary","cursor","strokeWidth","transition","opacity","disabled","selected","primaryDark","correct","incorrect","Line","props","state","left","right","nextProps","position","setState","side","p","domain","min","max","newState","d","newPosition","onMoveLine","interval","empty","y","classes","xScale","context","onDrag","onMove","onMoveLeft","bind","onMoveRight","onDragLeft","onDragRight","is","onMouseDown","e","nativeEvent","preventDefault","onLineDragStart","startX","clientX","onLineClick","endX","deltaX","Math","abs","onToggleSelect","onRectClick","onLineDragStop","dd","invertedX","invert","lastX","scaledLineBounds","lineClass","common","handle","React","Component","PropTypes","shape","bool","isRequired","number","func","onDragStart","onDragStop","undefined","snapValue"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../../../draggable';\nimport Point from './point';\nimport { basePropTypes } from './base';\nimport classNames from 'classnames';\nimport injectSheet from 'react-jss';\nimport isEqual from 'lodash/isEqual';\nimport isNumber from 'lodash/isNumber';\nimport { color } from '@pie-lib/render-ui';\n\nconst duration = '150ms';\n\nconst style = {\n  line: {\n    '& .line-handle': {\n      stroke: color.primary(),\n      cursor: 'pointer',\n      strokeWidth: '5px',\n      transition: `opacity ${duration} linear, \n      stroke-width ${duration} linear,\n      stroke ${duration} linear`,\n    },\n    '&.react-draggable-dragging': {\n      opacity: 0.6,\n      '& .line-handle': {\n        opacity: 1.0,\n        strokeWidth: '12px',\n      },\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: 0.8,\n  },\n  selected: {\n    '& .line-handle': {\n      stroke: color.primaryDark(),\n    },\n    '& circle': {\n      stroke: color.primaryDark(),\n    },\n  },\n  correct: {\n    '& .line-handle': {\n      cursor: 'inherit',\n      stroke: color.correct(),\n    },\n  },\n  incorrect: {\n    '& .line-handle': {\n      cursor: 'inherit',\n      stroke: color.incorrect(),\n    },\n  },\n};\n\nexport class Line extends React.Component {\n  static propTypes = {\n    ...basePropTypes(),\n    empty: PropTypes.shape({\n      left: PropTypes.bool.isRequired,\n      right: PropTypes.bool.isRequired,\n    }).isRequired,\n    position: PropTypes.shape({\n      left: PropTypes.number.isRequired,\n      right: PropTypes.number.isRequired,\n    }).isRequired,\n    y: PropTypes.number,\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n    onMoveLine: PropTypes.func.isRequired,\n    onToggleSelect: PropTypes.func.isRequired,\n    onDragStart: PropTypes.func,\n    onDragStop: PropTypes.func,\n  };\n\n  static defaultProps = {\n    selected: false,\n    y: 0,\n    disabled: false,\n    correct: undefined,\n  };\n\n  static contextTypes = {\n    xScale: PropTypes.func.isRequired,\n    snapValue: PropTypes.func.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      left: null,\n      right: null,\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps) {\n      const { position } = nextProps;\n      this.setState({ left: position.left, right: position.right });\n    }\n  }\n\n  onDrag(side, p) {\n    const { domain } = this.props;\n    if (p >= domain.min && p <= domain.max) {\n      const newState = {};\n      newState[side] = p;\n      this.setState(newState);\n    }\n  }\n\n  onMove(side, d) {\n    const { position: p } = this.props;\n    const newPosition = { left: p.left, right: p.right };\n    newPosition[side] = d;\n    this.props.onMoveLine(newPosition);\n  }\n\n  render() {\n    const { interval, empty, position, domain, y, selected, disabled, correct, classes } = this.props;\n\n    const { xScale } = this.context;\n\n    const { onDrag, onMove } = this;\n    const onMoveLeft = onMove.bind(this, 'left');\n    const onMoveRight = onMove.bind(this, 'right');\n    const onDragLeft = onDrag.bind(this, 'left');\n    const onDragRight = onDrag.bind(this, 'right');\n\n    const left = isNumber(this.state.left) ? this.state.left : position.left;\n    const right = isNumber(this.state.right) ? this.state.right : position.right;\n\n    const is = xScale(interval) - xScale(0);\n\n    const onMouseDown = (e) => e.nativeEvent.preventDefault();\n    const onLineDragStart = (e) => this.setState({ startX: e.clientX });\n\n    const onLineClick = () => {\n      const { startX, endX } = this.state;\n      if (!startX || !endX) {\n        return;\n      }\n\n      const deltaX = Math.abs(endX - startX);\n      if (deltaX < is / 10) {\n        this.props.onToggleSelect();\n        this.setState({ startX: null, endX: null });\n      }\n    };\n\n    const onRectClick = () => {\n      this.props.onToggleSelect();\n    };\n\n    const onLineDragStop = (e, dd) => {\n      this.setState({ endX: e.clientX });\n      const invertedX = xScale.invert(dd.lastX + xScale(0));\n      const newPosition = {\n        left: position.left + invertedX,\n        right: position.right + invertedX,\n      };\n\n      if (!isEqual(newPosition, this.props.position)) {\n        this.props.onMoveLine(newPosition);\n      }\n    };\n\n    const scaledLineBounds = {\n      left: ((domain.min - position.left) / interval) * is,\n      right: ((domain.max - position.right) / interval) * is,\n    };\n\n    var lineClass = classNames(classes.line, {\n      [classes.disabled]: disabled,\n      [classes.selected]: selected,\n      [classes.correct]: correct === true,\n      [classes.incorrect]: correct === false,\n    });\n\n    const common = {\n      interval,\n      selected,\n      disabled,\n      correct,\n    };\n\n    return (\n      <Draggable\n        disabled={disabled}\n        axis=\"x\"\n        handle=\".line-handle\"\n        grid={[is]}\n        bounds={scaledLineBounds}\n        onStart={onLineDragStart}\n        onStop={onLineDragStop}\n        onMouseDown={onMouseDown}\n      >\n        <g className={lineClass}>\n          <g transform={`translate(0, ${y})`}>\n            <rect\n              x={xScale(left)}\n              width={Math.abs(xScale(right) - xScale(left))}\n              fill=\"red\"\n              fillOpacity=\"0.0\"\n              y=\"-8\"\n              height={16}\n              onClick={onRectClick}\n            />\n            <line\n              className={classNames('line-handle', classes.handle, {\n                [classes.selected]: selected,\n              })}\n              x1={xScale(left)}\n              x2={xScale(right)}\n              onClick={onLineClick}\n            />\n            <Point\n              {...common}\n              empty={empty.left}\n              bounds={{\n                left: domain.min - position.left,\n                right: domain.max - position.left,\n              }}\n              position={position.left}\n              onDrag={onDragLeft}\n              onMove={onMoveLeft}\n            />\n            <Point\n              {...common}\n              empty={empty.right}\n              bounds={{\n                left: domain.min - position.right,\n                right: domain.max - position.right,\n              }}\n              position={position.right}\n              onDrag={onDragRight}\n              onMove={onMoveRight}\n            />\n          </g>\n        </g>\n      </Draggable>\n    );\n  }\n}\n\nexport default injectSheet(style)(Line);\n"],"file":"line.js"}

package/lib/number-line/graph/elements/point.js

@@ -1,233 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Point = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _renderUi = require("@pie-lib/render-ui");
-
-var _draggable = _interopRequireDefault(require("../../../draggable"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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 duration = '150ms';
-var style = {
-  point: {
-    cursor: 'pointer',
-    transition: "r ".concat(duration, " linear,  \n    opacity ").concat(duration, " linear, \n    fill ").concat(duration, " linear,\n    stroke ").concat(duration, " linear"),
-    stroke: _renderUi.color.primary(),
-    fill: _renderUi.color.primary(),
-    '&.react-draggable-dragging': {
-      opacity: 0.25,
-      r: '10px'
-    },
-    '&:hover': {
-      stroke: _renderUi.color.primaryDark()
-    }
-  },
-  selected: {
-    stroke: _renderUi.color.primaryDark()
-  },
-  disabled: {
-    cursor: 'not-allowed',
-    opacity: 0.8
-  },
-  correct: {
-    cursor: 'inherit',
-    stroke: _renderUi.color.correct(),
-    fill: _renderUi.color.correct()
-  },
-  incorrect: {
-    cursor: 'inherit',
-    stroke: _renderUi.color.incorrect(),
-    fill: _renderUi.color.incorrect()
-  },
-  empty: {
-    fill: 'white'
-  }
-};
-
-var Point = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Point, _React$Component);
-
-  var _super = _createSuper(Point);
-
-  function Point() {
-    (0, _classCallCheck2["default"])(this, Point);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(Point, [{
-    key: "render",
-    value: function render() {
-      var _this = this,
-          _classNames;
-
-      var _this$props = this.props,
-          onDragStop = _this$props.onDragStop,
-          onDragStart = _this$props.onDragStart,
-          onDragCallback = _this$props.onDrag,
-          onClick = _this$props.onClick,
-          onMove = _this$props.onMove,
-          interval = _this$props.interval,
-          y = _this$props.y,
-          bounds = _this$props.bounds,
-          selected = _this$props.selected,
-          position = _this$props.position,
-          disabled = _this$props.disabled,
-          correct = _this$props.correct,
-          empty = _this$props.empty,
-          classes = _this$props.classes;
-      var _this$context = this.context,
-          snapValue = _this$context.snapValue,
-          xScale = _this$context.xScale;
-
-      var dragPosition = function dragPosition(x) {
-        var normalized = x + xScale(0);
-        var inverted = xScale.invert(normalized);
-        return snapValue(position + inverted);
-      };
-
-      var onStart = function onStart(e) {
-        _this.setState({
-          startX: e.clientX
-        });
-
-        if (onDragStart) {
-          onDragStart();
-        }
-      };
-
-      var onStop = function onStop(e, dd) {
-        if (onDragStop) {
-          onDragStop();
-        }
-
-        var endX = e.clientX;
-        var startX = _this.state.startX;
-        var deltaX = Math.abs(endX - startX);
-
-        if (deltaX < is / 10) {
-          if (onClick) {
-            onClick();
-
-            _this.setState({
-              startX: null
-            });
-          }
-        } else {
-          var newPosition = dragPosition(dd.lastX);
-          onMove(newPosition);
-        }
-      }; //prevent the text select icon from rendering.
-
-
-      var onMouseDown = function onMouseDown(e) {
-        return e.nativeEvent.preventDefault();
-      };
-
-      var is = xScale(interval) - xScale(0);
-      var scaledBounds = {
-        left: bounds.left / interval * is,
-        right: bounds.right / interval * is
-      };
-
-      var onDrag = function onDrag(e, dd) {
-        var p = dragPosition(dd.x);
-
-        if (onDragCallback) {
-          onDragCallback(p);
-        }
-      };
-
-      var circleClass = (0, _classnames["default"])(classes.point, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), (0, _defineProperty2["default"])(_classNames, classes.selected, selected), (0, _defineProperty2["default"])(_classNames, classes.correct, correct === true), (0, _defineProperty2["default"])(_classNames, classes.incorrect, correct === false), (0, _defineProperty2["default"])(_classNames, classes.empty, empty === true), _classNames));
-      return /*#__PURE__*/_react["default"].createElement(_draggable["default"], {
-        disabled: disabled,
-        onMouseDown: onMouseDown,
-        onStart: onStart,
-        onDrag: onDrag,
-        onStop: onStop,
-        axis: "x",
-        grid: [is],
-        bounds: scaledBounds
-      }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("circle", {
-        r: "20",
-        strokeWidth: "3",
-        style: {
-          fill: 'transparent'
-        },
-        cx: xScale(position),
-        cy: y
-      }), /*#__PURE__*/_react["default"].createElement("circle", {
-        r: "5",
-        strokeWidth: "3",
-        className: circleClass,
-        cx: xScale(position),
-        cy: y
-      })));
-    }
-  }]);
-  return Point;
-}(_react["default"].Component);
-
-exports.Point = Point;
-(0, _defineProperty2["default"])(Point, "defaultProps", {
-  y: 0,
-  selected: false,
-  empty: false,
-  disabled: false,
-  correct: undefined
-});
-(0, _defineProperty2["default"])(Point, "propTypes", {
-  interval: _propTypes["default"].number.isRequired,
-  position: _propTypes["default"].number.isRequired,
-  bounds: _propTypes["default"].shape({
-    left: _propTypes["default"].number.isRequired,
-    right: _propTypes["default"].number.isRequired
-  }),
-  selected: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  correct: _propTypes["default"].bool,
-  empty: _propTypes["default"].bool,
-  y: _propTypes["default"].number,
-  onMove: _propTypes["default"].func.isRequired,
-  onClick: _propTypes["default"].func,
-  onDrag: _propTypes["default"].func,
-  onDragStop: _propTypes["default"].func,
-  onDragStart: _propTypes["default"].func,
-  classes: _propTypes["default"].object.isRequired
-});
-(0, _defineProperty2["default"])(Point, "contextTypes", {
-  xScale: _propTypes["default"].func.isRequired,
-  snapValue: _propTypes["default"].func.isRequired
-});
-
-var _default = (0, _reactJss["default"])(style)(Point);
-
-exports["default"] = _default;
-//# sourceMappingURL=point.js.map

package/lib/number-line/graph/elements/point.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/number-line/graph/elements/point.jsx"],"names":["duration","style","point","cursor","transition","stroke","color","primary","fill","opacity","r","primaryDark","selected","disabled","correct","incorrect","empty","Point","props","onDragStop","onDragStart","onDragCallback","onDrag","onClick","onMove","interval","y","bounds","position","classes","context","snapValue","xScale","dragPosition","x","normalized","inverted","invert","onStart","e","setState","startX","clientX","onStop","dd","endX","state","deltaX","Math","abs","is","newPosition","lastX","onMouseDown","nativeEvent","preventDefault","scaledBounds","left","right","p","circleClass","React","Component","undefined","PropTypes","number","isRequired","shape","bool","func","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport Draggable from '../../../draggable';\nimport classNames from 'classnames';\nimport injectSheet from 'react-jss';\n\nconst duration = '150ms';\n\nconst style = {\n  point: {\n    cursor: 'pointer',\n    transition: `r ${duration} linear,  \n    opacity ${duration} linear, \n    fill ${duration} linear,\n    stroke ${duration} linear`,\n\n    stroke: color.primary(),\n    fill: color.primary(),\n    '&.react-draggable-dragging': {\n      opacity: 0.25,\n      r: '10px',\n    },\n    '&:hover': {\n      stroke: color.primaryDark(),\n    },\n  },\n  selected: {\n    stroke: color.primaryDark(),\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    opacity: 0.8,\n  },\n  correct: {\n    cursor: 'inherit',\n    stroke: color.correct(),\n    fill: color.correct(),\n  },\n  incorrect: {\n    cursor: 'inherit',\n    stroke: color.incorrect(),\n    fill: color.incorrect(),\n  },\n  empty: {\n    fill: 'white',\n  },\n};\n\nexport class Point extends React.Component {\n  static defaultProps = {\n    y: 0,\n    selected: false,\n    empty: false,\n    disabled: false,\n    correct: undefined,\n  };\n\n  static propTypes = {\n    interval: PropTypes.number.isRequired,\n    position: PropTypes.number.isRequired,\n    bounds: PropTypes.shape({\n      left: PropTypes.number.isRequired,\n      right: PropTypes.number.isRequired,\n    }),\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    correct: PropTypes.bool,\n    empty: PropTypes.bool,\n    y: PropTypes.number,\n    onMove: PropTypes.func.isRequired,\n    onClick: PropTypes.func,\n    onDrag: PropTypes.func,\n    onDragStop: PropTypes.func,\n    onDragStart: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n  };\n\n  static contextTypes = {\n    xScale: PropTypes.func.isRequired,\n    snapValue: PropTypes.func.isRequired,\n  };\n\n  render() {\n    const {\n      onDragStop,\n      onDragStart,\n      onDrag: onDragCallback,\n      onClick,\n      onMove,\n      interval,\n      y,\n      bounds,\n      selected,\n      position,\n      disabled,\n      correct,\n      empty,\n      classes,\n    } = this.props;\n\n    const { snapValue, xScale } = this.context;\n\n    const dragPosition = (x) => {\n      const normalized = x + xScale(0);\n      const inverted = xScale.invert(normalized);\n      return snapValue(position + inverted);\n    };\n\n    const onStart = (e) => {\n      this.setState({ startX: e.clientX });\n      if (onDragStart) {\n        onDragStart();\n      }\n    };\n\n    const onStop = (e, dd) => {\n      if (onDragStop) {\n        onDragStop();\n      }\n\n      const endX = e.clientX;\n      const startX = this.state.startX;\n      const deltaX = Math.abs(endX - startX);\n\n      if (deltaX < is / 10) {\n        if (onClick) {\n          onClick();\n          this.setState({ startX: null });\n        }\n      } else {\n        const newPosition = dragPosition(dd.lastX);\n        onMove(newPosition);\n      }\n    };\n\n    //prevent the text select icon from rendering.\n    const onMouseDown = (e) => e.nativeEvent.preventDefault();\n\n    const is = xScale(interval) - xScale(0);\n    const scaledBounds = {\n      left: (bounds.left / interval) * is,\n      right: (bounds.right / interval) * is,\n    };\n\n    const onDrag = (e, dd) => {\n      const p = dragPosition(dd.x);\n      if (onDragCallback) {\n        onDragCallback(p);\n      }\n    };\n\n    const circleClass = classNames(classes.point, {\n      [classes.disabled]: disabled,\n      [classes.selected]: selected,\n      [classes.correct]: correct === true,\n      [classes.incorrect]: correct === false,\n      [classes.empty]: empty === true,\n    });\n\n    return (\n      <Draggable\n        disabled={disabled}\n        onMouseDown={onMouseDown}\n        onStart={onStart}\n        onDrag={onDrag}\n        onStop={onStop}\n        axis=\"x\"\n        grid={[is]}\n        bounds={scaledBounds}\n      >\n        <g>\n          <circle r=\"20\" strokeWidth=\"3\" style={{ fill: 'transparent' }} cx={xScale(position)} cy={y} />\n          <circle r=\"5\" strokeWidth=\"3\" className={circleClass} cx={xScale(position)} cy={y} />\n        </g>\n      </Draggable>\n    );\n  }\n}\n\nexport default injectSheet(style)(Point);\n"],"file":"point.js"}