@hitachivantara/uikit-react-lab 3.38.0

package/dist/modern/Slider/Slider.d.ts

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface KnobProperty {
+  color?: string;
+  defaultValue?: number;
+  hidden?: boolean;
+  fixed?: boolean;
+  hoverColor?: string;
+  trackColor?: string;
+  dragColor?: string;
+}
+
+export interface MarkProperty {
+  position?: number;
+  label?: string;
+}
+
+export type HvSliderClassKey =
+  | "root"
+  | "dot"
+  | "rail"
+  | "knobInner"
+  | "knobOuter"
+  | "knobHidden"
+  | "knobHiddenLast"
+  | "track"
+  | "mark"
+  | "sliderTooltip";
+
+export interface HvSliderProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvSliderClassKey, "onChange"> {
+  /**
+   * The object created by material to apply to the component.
+   */
+  theme?: any;
+
+  /**
+   * The values array to apply to the component
+   */
+  values?: number[];
+
+  /**
+   * The default values array to apply to the component
+   */
+  defaultValues?: number[];
+
+  /**
+   * The object used to set the knob properties,
+   * for every item in the array a new knob will be created.
+   */
+  knobProperties: KnobProperty[];
+
+  /**
+   * The object used to set the mark properties individually.
+   */
+  markProperties?: MarkProperty[];
+
+  /**
+   * the function executed before a change will ocurr in the slider.
+   * it will receive an object like
+   * {
+   *   knobsPosition: [],
+   *   knobsValues: []
+   * }
+   */
+  onBeforeChange?: (args: { knobsPosition: any[]; knobsValues: any[] }) => any;
+
+  /**
+   * the function executed while a change is ocurring in the slider.
+   * it will receive an object like
+   * {
+   *   knobsPosition: [],
+   *   knobsValues: []
+   * }
+   */
+  onChange?: (args: { knobsPosition: any[]; knobsValues: any[] }) => any;
+
+  /**
+   * the function executed after a change ocurred in the slider.
+   * it will receive an object like
+   * {
+   *   knobsPosition: [],
+   *   knobsValues: []
+   * }
+   */
+  onAfterChange?: (args: { knobsPosition: any[]; knobsValues: any[] }) => any;
+
+  /**
+   * the separation in points between marks.
+   * example: if 10 divisions and a markstep of 2 there will be 5 marks.
+   */
+  markStep?: number;
+
+  /**
+   * how many subdivisions there are in the slider.
+   */
+  divisionQuantity?: number;
+
+  /**
+   * the value of the first point in the slider from left to right.
+   */
+  minPointValue?: number;
+
+  /**
+   * the value of the last point in the slider from left to right.
+   */
+  maxPointValue?: number;
+
+  /**
+   * the nax number of decimals if no format function is applied
+   */
+  markDigits?: number;
+
+  /**
+   * a formatting function used to add format to the marks in the track,
+   * the function receives the mark text
+   */
+  formatMark?: (...args: any[]) => any;
+
+  /**
+   * a formatting function used to add format to the tooltip in the track,
+   * the function receives the mark text
+   */
+  formatTooltip?: (...args: any[]) => any;
+
+  /**
+   * if `true` the knobs can't have the same value, if `false` knobs can have the same value.
+   */
+  noOverlap?: boolean;
+}
+
+export default function HvSlider(props: HvSliderProps): JSX.Element | null;

package/dist/modern/Slider/Slider.js

@@ -0,0 +1,542 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["value", "dragging", "index", "style"];
+import "core-js/modules/web.dom-collections.iterator.js";
+
+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; }
+
+/**
+ * Note: https://github.com/react-component/slider/issues/504
+ * Version must remain in "8.6.3" until this bug is fixed
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import { Range, Handle } from "rc-slider";
+import Tooltip from "rc-tooltip";
+import { withStyles } from "@material-ui/core";
+import KnobRing from "./KnobRing";
+import "rc-slider/assets/index.css";
+import styleCreator from "./styles";
+/**
+ * Transform the scaled values into knobs positions.
+ *
+ * @param {*} scaledValue - the value of the slider to be scaled
+ * @param {*} minPointValue - The value of the first point in
+ * the slider from left to right.
+ * @param {*} inverseStepValue - The inverse of calculated separation between
+ * the value of the points that compose the slider.
+ */
+
+const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => Math.floor((scaledValue - minPointValue) * inverseStepValue);
+/**
+ * Transform the received knobs values into knob positions
+ *
+ * @param {Object} values - The values of the slider.
+ * @param {Number} inverseStepValue - The inverse of calculated separation between
+ * the value of the points that compose the slider.
+ * @param {Integer} minPointValue - The value of the first point in the slider from
+ * left to right.
+ * @returns {Array} - The position of the knobs.
+ */
+
+
+const transformKnobsPosition = (values, inverseStepValue, minPointValue) => {
+  const knobsPositions = [];
+  values.forEach((value, index) => {
+    knobsPositions[index] = scaledValueToKnobsPositionValue(value, minPointValue, inverseStepValue);
+  });
+  return knobsPositions;
+};
+/**
+ * Calculates the separation between each value in the slider.
+ *
+ * @param {*} maxPointValue - The value of the last point in the slider from left to right.
+ * @param {*} minPointValue - The value of the first point in the slider from left to right.
+ * @param {*} divisionQuantity - How many subdivisions there are in the slider.
+ */
+
+
+const calculateStepValue = (maxPointValue, minPointValue, divisionQuantity) => Math.abs(maxPointValue - minPointValue) / divisionQuantity;
+/**
+ * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. Still in development
+ */
+
+
+class HvSlider extends React.Component {
+  constructor(_props) {
+    super(_props);
+
+    _defineProperty(this, "knobsPositionToScaledValue", (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue);
+
+    _defineProperty(this, "createMark", (markProperties, markstep, divisionQuantity, minPointValue, stepValue, markDigits, formatMark, styles) => {
+      const marks = {};
+
+      if (markProperties.length > 0) {
+        markProperties.forEach(markProperty => {
+          marks[markProperty.position] = {
+            label: `${markProperty.label}`,
+            style: _objectSpread({}, styles.mark)
+          };
+        });
+      } else {
+        const roundedMarkStep = Math.floor(markstep);
+
+        for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {
+          let labelValue = this.knobsPositionToScaledValue(index, minPointValue, stepValue).toFixed(markDigits);
+          labelValue = formatMark(labelValue);
+          marks[index] = {
+            label: `${labelValue}`,
+            style: _objectSpread({}, styles.mark)
+          };
+        }
+      }
+
+      return marks;
+    });
+
+    _defineProperty(this, "createTrackStyles", (knobProperties, styles) => {
+      const trackStyles = [];
+
+      if (knobProperties.length > 1) {
+        knobProperties.forEach((knobProperty, index) => {
+          trackStyles[index] = _objectSpread({}, styles.track);
+
+          if (knobProperty.color) {
+            trackStyles[index].backgroundColor = knobProperty.trackColor;
+          }
+        });
+      }
+
+      return trackStyles;
+    });
+
+    _defineProperty(this, "createKnobStyles", (knobProperties, styles) => {
+      const knobInner = [];
+      const knobOuterStyle = [];
+      const lastItem = knobProperties.length - 1;
+
+      if (knobProperties.length > 1) {
+        knobProperties.forEach((knobProperty, index) => {
+          knobInner[index] = _objectSpread({}, styles.knobInner);
+          knobOuterStyle[index] = _objectSpread({}, styles.knobOuter);
+
+          if (knobProperty.color) {
+            knobInner[index].backgroundColor = knobProperty.color;
+            knobOuterStyle[index].backgroundColor = "transparent";
+          }
+
+          if (knobProperty.hidden) {
+            knobInner[index] = styles.knobHidden;
+
+            if (index === lastItem) {
+              knobInner[index] = _objectSpread({}, styles.knobHiddenLast);
+              knobInner[index].backgroundColor = knobProperty.color;
+              knobOuterStyle[index] = _objectSpread({}, styles.knobHidden);
+              knobOuterStyle[index].backgroundColor = knobProperty.color;
+            }
+          }
+        });
+      }
+
+      return {
+        knobInner,
+        knobOuterStyle
+      };
+    });
+
+    _defineProperty(this, "generateKnobsPositionAndValues", knobsCurrentPosition => {
+      const newKnobsPosition = knobsCurrentPosition.slice();
+      const knobsValues = [];
+      const {
+        minPointValue,
+        noOverlap
+      } = this.props;
+      const {
+        stepValue,
+        knobsPositions
+      } = this.state;
+      let duplicatedValue = null;
+      const findDuplicated = newKnobsPosition.filter((item, index) => newKnobsPosition.indexOf(item) !== index);
+
+      if (noOverlap && findDuplicated.length > 0) {
+        [duplicatedValue] = findDuplicated;
+      }
+
+      newKnobsPosition.forEach((position, index, array) => {
+        const newArray = array;
+        let newPosition = position;
+
+        if (noOverlap && newPosition === duplicatedValue) {
+          const previousValue = knobsPositions[index];
+
+          if (previousValue !== newPosition) {
+            newPosition += newPosition > previousValue ? -1 : 1;
+            newArray[index] = newPosition;
+          }
+        }
+
+        knobsValues[index] = this.knobsPositionToScaledValue(newPosition, minPointValue, stepValue);
+      }, this);
+      return {
+        knobsPosition: newKnobsPosition,
+        knobsValues
+      };
+    });
+
+    _defineProperty(this, "onChangeHandler", knobsPosition => {
+      const knobs = this.generateKnobsPositionAndValues(knobsPosition);
+      const {
+        knobProperties,
+        onChange,
+        minPointValue,
+        defaultValues
+      } = this.props;
+      const {
+        inverseStepValue
+      } = this.state;
+      knobProperties.forEach((knobProperty, index) => {
+        if (knobProperty.fixed) {
+          knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(defaultValues[index], minPointValue, inverseStepValue);
+        }
+      });
+      onChange(knobs);
+      this.setState({
+        knobsPositions: knobs.knobsPosition
+      });
+    });
+
+    _defineProperty(this, "onBeforeChangeHandler", knobsPosition => {
+      const {
+        onBeforeChange
+      } = this.props;
+      const knobs = this.generateKnobsPositionAndValues(knobsPosition);
+      onBeforeChange(knobs);
+    });
+
+    _defineProperty(this, "onAfterChangeHandler", knobsPosition => {
+      const {
+        onAfterChange
+      } = this.props;
+      const knobs = this.generateKnobsPositionAndValues(knobsPosition);
+      onAfterChange(knobs);
+    });
+
+    _defineProperty(this, "createKnob", props => {
+      const {
+        minPointValue,
+        markDigits,
+        knobProperties,
+        formatTooltip,
+        classes
+      } = this.props;
+      const {
+        stepValue
+      } = this.state;
+
+      const {
+        value,
+        dragging,
+        index,
+        style
+      } = props,
+            restProps = _objectWithoutProperties(props, _excluded);
+
+      const knobValue = this.knobsPositionToScaledValue(value, minPointValue, stepValue).toFixed(markDigits);
+
+      if (dragging) {
+        style.backgroundColor = knobProperties[index].dragColor;
+      } else {
+        style.backgroundColor = knobProperties[index].color;
+      }
+
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        prefixCls: "rc-slider-tooltip",
+        overlay: formatTooltip(knobValue),
+        visible: dragging,
+        placement: "top",
+        key: index,
+        overlayClassName: classes.sliderTooltip
+      }, /*#__PURE__*/React.createElement(Handle, _extends({
+        value: value,
+        style: style
+      }, restProps), /*#__PURE__*/React.createElement(KnobRing, {
+        hoverColor: knobProperties[index].hoverColor,
+        dragging: dragging
+      })));
+    });
+
+    const {
+      markProperties: _markProperties,
+      markStep,
+      markDigits: _markDigits,
+      knobProperties: _knobProperties,
+      values,
+      defaultValues: _defaultValues,
+      theme,
+      maxPointValue,
+      minPointValue: _minPointValue,
+      divisionQuantity: _divisionQuantity,
+      formatMark: _formatMark
+    } = _props;
+
+    const _styles = styleCreator(theme);
+
+    const _stepValue = calculateStepValue(maxPointValue, _minPointValue, _divisionQuantity);
+
+    const _inverseStepValue = 1 / _stepValue;
+
+    this.state = {
+      knobsPositions: transformKnobsPosition(values.length > 0 ? values : _defaultValues, _inverseStepValue, _minPointValue),
+      trackStyles: this.createTrackStyles(_knobProperties, _styles),
+      knobStyles: this.createKnobStyles(_knobProperties, _styles),
+      rangesCount: _knobProperties.length - 1,
+      marks: this.createMark(_markProperties, markStep, _divisionQuantity, _minPointValue, _stepValue, _markDigits, _formatMark, _styles),
+      defaultKnobsPositions: transformKnobsPosition(_defaultValues, _inverseStepValue, _minPointValue),
+      styles: _styles,
+      stepValue: _stepValue,
+      inverseStepValue: _inverseStepValue
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const stepValue = calculateStepValue(props.maxPointValue, props.minPointValue, props.divisionQuantity);
+
+    if (props.values.length > 0) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        knobsPositions: transformKnobsPosition(props.values.length > 0 ? props.values : props.defaultValues, 1 / stepValue, props.minPointValue)
+      });
+    }
+
+    return null;
+  }
+  /**
+   * Transform the scaled values into knobs positions.
+   *
+   * @param {*} sliderValue - the value of the slider to be scaled
+   * @param {*} minPointValue - The value of the first point in the slider from left to right.
+   * @param {*} stepValue - The calculated separation between the values of the slider.
+   */
+
+
+  render() {
+    const {
+      divisionQuantity,
+      classes
+    } = this.props;
+    const {
+      knobsPositions,
+      defaultKnobsPositions,
+      rangesCount,
+      knobStyles,
+      trackStyles,
+      marks,
+      styles
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Range, {
+      handle: this.createKnob,
+      className: classes.root,
+      min: 0,
+      max: divisionQuantity,
+      step: 1,
+      marks: marks,
+      dotStyle: styles.dot,
+      onChange: this.onChangeHandler,
+      onBeforeChange: this.onBeforeChangeHandler,
+      onAfterChange: this.onAfterChangeHandler,
+      value: knobsPositions.length > 0 ? knobsPositions : undefined,
+      allowCross: false,
+      defaultValue: defaultKnobsPositions,
+      count: rangesCount,
+      railStyle: styles.rail,
+      handleStyle: knobStyles.knobInner,
+      trackStyle: trackStyles
+    });
+  }
+
+}
+
+HvSlider.propTypes = {
+  /**
+   * The values array to apply to the component
+   */
+  values: PropTypes.arrayOf(PropTypes.number),
+
+  /**
+   * The default values array to apply to the component
+   */
+  defaultValues: PropTypes.arrayOf(PropTypes.number).isRequired,
+
+  /**
+   * The object used to set the knob properties,
+   * for every item in the array a new knob will be created.
+   */
+  knobProperties: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    defaultValue: PropTypes.number,
+    hidden: PropTypes.bool,
+    fixed: PropTypes.bool,
+    hoverColor: PropTypes.string,
+    trackColor: PropTypes.string,
+    dragColor: PropTypes.string
+  })).isRequired,
+
+  /**
+   * The object used to set the mark properties individually.
+   */
+  markProperties: PropTypes.arrayOf(PropTypes.shape({
+    position: PropTypes.number,
+    label: PropTypes.string
+  })),
+
+  /**
+   * the function executed before a change will ocurr in the slider.
+   * it will receive an object like
+   * {
+   *   knobsPosition: [],
+   *   knobsValues: []
+   * }
+   */
+  onBeforeChange: PropTypes.func,
+
+  /**
+   * the function executed while a change is ocurring in the slider.
+   * it will receive an object like
+   * {
+   *   knobsPosition: [],
+   *   knobsValues: []
+   * }
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * the function executed after a change ocurred in the slider.
+   * it will receive an object like
+   * {
+   *   knobsPosition: [],
+   *   knobsValues: []
+   * }
+   */
+  onAfterChange: PropTypes.func,
+
+  /**
+   * the separation in points between marks.
+   * example: if 10 divisions and a markstep of 2 there will be 5 marks.
+   */
+  markStep: PropTypes.number,
+
+  /**
+   * how many subdivisions there are in the slider.
+   */
+  divisionQuantity: PropTypes.number,
+
+  /**
+   * the value of the first point in the slider from left to right.
+   */
+  minPointValue: PropTypes.number,
+
+  /**
+   * the value of the last point in the slider from left to right.
+   */
+  maxPointValue: PropTypes.number,
+
+  /**
+   * the nax number of decimals if no format function is applied
+   */
+  markDigits: PropTypes.number,
+
+  /**
+   * a formatting function used to add format to the marks in the track,
+   * the function receives the mark text
+   */
+  formatMark: PropTypes.func,
+
+  /**
+   * a formatting function used to add format to the tooltip in the track,
+   * the function receives the mark text
+   */
+  formatTooltip: PropTypes.func,
+
+  /**
+   * if `true` the knobs can't have the same value, if `false` knobs can have the same value.
+   */
+  noOverlap: PropTypes.bool,
+
+  /**
+   * the classes object to be applied into the root object.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the root of the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the dot.
+     */
+    dot: PropTypes.string,
+
+    /**
+     * Style applied to the rail.
+     */
+    rail: PropTypes.string,
+
+    /**
+     * Style applied to the inner of the knob.
+     */
+    knobInner: PropTypes.string,
+
+    /**
+     * Style applied to the outside of the knob.
+     */
+    knobOuter: PropTypes.string,
+
+    /**
+     * Style applied when the knob is hidden.
+     */
+    knobHidden: PropTypes.string,
+
+    /**
+     * Style applied  last hidden knob.
+     */
+    knobHiddenLast: PropTypes.string,
+
+    /**
+     * Style applied to the track.
+     */
+    track: PropTypes.string,
+
+    /**
+     * Style applied to the mark.
+     */
+    mark: PropTypes.string,
+
+    /**
+     * Style applied to the tooltip.
+     */
+    sliderTooltip: PropTypes.string
+  }).isRequired,
+  theme: PropTypes.any.isRequired
+};
+HvSlider.defaultProps = {
+  markStep: 1,
+  markDigits: 0,
+  noOverlap: true,
+  values: [],
+  formatMark: mark => mark,
+  formatTooltip: mark => mark,
+  markProperties: [],
+  divisionQuantity: 100,
+  minPointValue: 0,
+  maxPointValue: 100,
+  onBeforeChange: () => {},
+  onChange: () => {},
+  onAfterChange: () => {}
+};
+export default withStyles(styleCreator, {
+  name: "HvSlider",
+  withTheme: true
+})(HvSlider);
+//# sourceMappingURL=Slider.js.map