dash-core-components/lib/components/Slider.react.js

Core component suite for Dash

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.propTypes = exports.defaultProps = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _slider = _interopRequireDefault(require("../utils/LazyLoader/slider"));
require("./css/sliders.css");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var RealSlider = /*#__PURE__*/(0, _react.lazy)(_slider.default);

/**
 * A slider component with a single handle.
 */
class Slider extends _react.Component {
  render() {
    return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
      fallback: null
    }, /*#__PURE__*/_react.default.createElement(RealSlider, this.props));
  }
}
exports.default = Slider;
Slider.propTypes = {
  /**
   * Minimum allowed value of the slider
   */
  min: _propTypes.default.number,
  /**
   * Maximum allowed value of the slider
   */
  max: _propTypes.default.number,
  /**
   * Value by which increments or decrements are made
   */
  step: _propTypes.default.number,
  /**
   * Marks on the slider.
   * The key determines the position (a number),
   * and the value determines what will show.
   * If you want to set the style of a specific mark point,
   * the value should be an object which
   * contains style and label properties.
   */
  marks: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.exact({
    label: _propTypes.default.string,
    style: _propTypes.default.object
  })])),
  /**
   * The value of the input
   */
  value: _propTypes.default.number,
  /**
   * The value of the input during a drag
   */
  drag_value: _propTypes.default.number,
  /**
   * If true, the handles can't be moved.
   */
  disabled: _propTypes.default.bool,
  /**
   * When the step value is greater than 1,
   * you can set the dots to true if you want to
   * render the slider with dots.
   */
  dots: _propTypes.default.bool,
  /**
   * If the value is true, it means a continuous
   * value is included. Otherwise, it is an independent value.
   */
  included: _propTypes.default.bool,
  /**
   * Configuration for tooltips describing the current slider value
   */
  tooltip: _propTypes.default.exact({
    /**
     * Determines whether tooltips should always be visible
     * (as opposed to the default, visible on hover)
     */
    always_visible: _propTypes.default.bool,
    /**
     * Determines the placement of tooltips
     * See https://github.com/react-component/tooltip#api
     * top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft`
     * will in reality appear to be on the top right of the handle
     */
    placement: _propTypes.default.oneOf(['left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
    /**
     * Template string to display the tooltip in.
     * Must contain `{value}`, which will be replaced with either
     * the default string representation of the value or the result of the
     * transform function if there is one.
     */
    template: _propTypes.default.string,
    /**
     * Custom style for the tooltip.
     */
    style: _propTypes.default.object,
    /**
     * Reference to a function in the `window.dccFunctions` namespace.
     * This can be added in a script in the asset folder.
     *
     * For example, in `assets/tooltip.js`:
     * ```
     * window.dccFunctions = window.dccFunctions || {};
     * window.dccFunctions.multByTen = function(value) {
     *     return value * 10;
     * }
     * ```
     * Then in the component `tooltip={'transform': 'multByTen'}`
     */
    transform: _propTypes.default.string
  }),
  /**
   * Determines when the component should update its `value`
   * property. If `mouseup` (the default) then the slider
   * will only trigger its value when the user has finished
   * dragging the slider. If `drag`, then the slider will
   * update its value continuously as it is being dragged.
   * If you want different actions during and after drag,
   * leave `updatemode` as `mouseup` and use `drag_value`
   * for the continuously updating value.
   */
  updatemode: _propTypes.default.oneOf(['mouseup', 'drag']),
  /**
   * If true, the slider will be vertical
   */
  vertical: _propTypes.default.bool,
  /**
   * The height, in px, of the slider if it is vertical.
   */
  verticalHeight: _propTypes.default.number,
  /**
   * If the value is true, it means the component is rendered reverse.
   */
  reverse: _propTypes.default.bool,
  /**
   * Additional CSS class for the root DOM node
   */
  className: _propTypes.default.string,
  /**
   * The ID of this component, used to identify dash components
   * in callbacks. The ID needs to be unique across all of the
   * components in an app.
   */
  id: _propTypes.default.string,
  /**
   * Dash-assigned callback that gets fired when the value or drag_value changes.
   */
  setProps: _propTypes.default.func,
  /**
   * Used to allow user interactions in this component to be persisted when
   * the component - or the page - is refreshed. If `persisted` is truthy and
   * hasn't changed from its previous value, a `value` that the user has
   * changed while using the app will keep that change, as long as
   * the new `value` also matches what was given originally.
   * Used in conjunction with `persistence_type`.
   */
  persistence: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.number]),
  /**
   * Properties whose user interactions will persist after refreshing the
   * component or the page. Since only `value` is allowed this prop can
   * normally be ignored.
   */
  persisted_props: _propTypes.default.arrayOf(_propTypes.default.oneOf(['value'])),
  /**
   * Where persisted user changes will be stored:
   * memory: only kept in memory, reset on page refresh.
   * local: window.localStorage, data is kept after the browser quit.
   * session: window.sessionStorage, data is cleared once the browser quit.
   */
  persistence_type: _propTypes.default.oneOf(['local', 'session', 'memory'])
};
Slider.defaultProps = {
  updatemode: 'mouseup',
  persisted_props: ['value'],
  persistence_type: 'local',
  verticalHeight: 400,
  reverse: false
};
var propTypes = exports.propTypes = Slider.propTypes;
var defaultProps = exports.defaultProps = Slider.defaultProps;