@progressiveui/react 1.22.0

package/src/components/Slider/Slider.Skeleton.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const SliderSkeleton = ({ hideLabel, id }) => {
+  const label = hideLabel ? null : (
+    <label className="wfp--label wfp--skeleton" htmlFor={id} />
+  );
+
+  return (
+    <div className="wfp--form-item">
+      {label}
+      <div className="wfp--slider-container wfp--skeleton">
+        <span className="wfp--slider__range-label" />
+        <div className="wfp--slider">
+          <div className="wfp--slider__track" />
+          <div className="wfp--slider__filled-track" />
+          <div className="wfp--slider__thumb" />
+        </div>
+        <span className="wfp--slider__range-label" />
+      </div>
+    </div>
+  );
+};
+
+SliderSkeleton.propTypes = {
+  hideLabel: PropTypes.bool,
+};
+
+export default SliderSkeleton;

package/src/components/Slider/Slider.legacy.js

@@ -0,0 +1,476 @@
+import React, { Component } from "react";
+import { sliderValuePropSync } from "../../internal/FeatureFlags";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import isEqual from "lodash.isequal";
+import TextInput from "../TextInput";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+const defaultFormatLabel = (value, label) => {
+  return typeof label === "function" ? label(value) : `${value}${label}`;
+};
+
+/** Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value. */
+
+class Slider extends Component {
+  static propTypes = {
+    /**
+     * The CSS class name for the slider.
+     */
+    className: PropTypes.string,
+
+    /**
+     * `true` to hide the number input box.
+     */
+    hideTextInput: PropTypes.bool,
+
+    /**
+     * The ID of the `<input>`.
+     */
+    id: PropTypes.string,
+
+    /**
+     * The callback to get notified of change in value.
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * The value.
+     */
+    value: PropTypes.number.isRequired,
+
+    /**
+     * The minimum value.
+     */
+    min: PropTypes.number.isRequired,
+
+    /**
+     * The label associated with the minimum value.
+     */
+    minLabel: PropTypes.string,
+
+    /**
+     * The maximum value.
+     */
+    max: PropTypes.number.isRequired,
+
+    /**
+     * The label associated with the maximum value.
+     */
+    maxLabel: PropTypes.string,
+
+    /**
+     * The callback to format the label associated with the minimum/maximum value.
+     */
+    formatLabel: PropTypes.func,
+
+    /**
+     * The label for the slider.
+     */
+    labelText: PropTypes.node,
+
+    /**
+     * A value determining how much the value should increase/decrease by moving the thumb by mouse.
+     */
+    step: PropTypes.number,
+
+    /**
+     * A value determining how much the value should increase/decrease by Shift+arrow keys, which will be `(max - min) / stepMuliplier`.
+     */
+    stepMuliplier: PropTypes.number,
+
+    /**
+     * The child nodes.
+     */
+    children: PropTypes.node,
+
+    /**
+     * `true` to disable this slider.
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * The `name` attribute of the `<input>`.
+     */
+    name: PropTypes.string,
+
+    /**
+     * The `type` attribute of the `<input>`.
+     */
+    inputType: PropTypes.string,
+
+    /**
+     * The `ariaLabel` for the `<input>`.
+     */
+    ariaLabelInput: PropTypes.string,
+    /**
+     * `true` to use the light version. (experimental)
+     */
+    light: PropTypes.bool,
+    /**
+     * Use the width of the parent element
+     */
+    fullWidth: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    fullWidth: false,
+    hideTextInput: false,
+    step: 1,
+    stepMuliplier: 4,
+    disabled: false,
+    minLabel: "",
+    maxLabel: "",
+    inputType: "number",
+    ariaLabelInput: "Slider number input",
+    light: false,
+  };
+
+  state = {
+    dragging: false,
+    value: this.props.value,
+    left: 0,
+  };
+
+  componentDidMount() {
+    this.updatePosition();
+  }
+
+  static getDerivedStateFromProps({ value, min, max }, state) {
+    const { value: currentValue, prevValue, prevMin, prevMax } = state;
+    if (
+      !sliderValuePropSync ||
+      (prevValue === value && prevMin === min && prevMax === max)
+    ) {
+      return null;
+    }
+    const effectiveValue = Math.min(
+      Math.max(prevValue === value ? currentValue : value, min),
+      max
+    );
+    return {
+      value: effectiveValue,
+      left: ((effectiveValue - min) / (max - min)) * 100,
+      prevValue: value,
+      prevMin: min,
+      prevMax: max,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (!sliderValuePropSync && !isEqual(nextProps, this.props)) {
+      this.updatePosition();
+    }
+    return true;
+  }
+
+  updatePosition = (evt) => {
+    if (evt && this.props.disabled) {
+      return;
+    }
+
+    if (evt && evt.dispatchConfig) {
+      evt.persist();
+    }
+
+    if (this.state.dragging) {
+      return;
+    }
+
+    this.setState({ dragging: true });
+
+    requestAnimationFrame(() => {
+      this.setState((prevState, props) => {
+        // Note: In FF, `evt.target` of `mousemove` event can be `HTMLDocument` which doesn't have `classList`.
+        // One example is dragging out of browser viewport.
+        const fromInput =
+          evt &&
+          evt.target &&
+          evt.target.classList &&
+          evt.target.classList.contains("wfp-slider-text-input");
+        const { left, newValue: newSliderValue } = this.calcValue(
+          evt,
+          prevState,
+          props
+        );
+        const newValue = fromInput ? Number(evt.target.value) : newSliderValue;
+        if (prevState.left === left && prevState.value === newValue) {
+          return { dragging: false };
+        }
+        if (typeof props.onChange === "function") {
+          props.onChange(newValue);
+        }
+        return {
+          dragging: false,
+          left,
+          value: newValue,
+        };
+      });
+    });
+  };
+
+  calcValue = (evt, prevState, props) => {
+    const { min, max, step, stepMuliplier } = props;
+
+    const { value } = prevState;
+
+    const range = max - min;
+    const valuePercentage = ((value - min) / range) * 100;
+
+    let left;
+    let newValue;
+    left = valuePercentage;
+    newValue = value;
+
+    if (evt) {
+      const { type } = evt;
+
+      if (type === "keydown") {
+        const direction = {
+          40: -1, // decreasing
+          37: -1, // decreasing
+          38: 1, // increasing
+          39: 1, // increasing
+        }[evt.which];
+
+        if (direction !== undefined) {
+          const multiplier =
+            evt.shiftKey === true ? range / step / stepMuliplier : 1;
+          const stepMultiplied = step * multiplier;
+          const stepSize = (stepMultiplied / range) * 100;
+          left = valuePercentage + stepSize * direction;
+          newValue = Number(value) + stepMultiplied * direction;
+        }
+      }
+      if (type === "mousemove" || type === "click" || type === "touchmove") {
+        const clientX = evt.touches ? evt.touches[0].clientX : evt.clientX;
+        const track = this.track.getBoundingClientRect();
+        const ratio = (clientX - track.left) / track.width;
+        const rounded = min + Math.round((range * ratio) / step) * step;
+        left = ((rounded - min) / range) * 100;
+        newValue = rounded;
+      }
+    }
+
+    if (newValue <= Number(min)) {
+      left = 0;
+      newValue = min;
+    }
+    if (newValue >= Number(max)) {
+      left = 100;
+      newValue = max;
+    }
+
+    return { left, newValue };
+  };
+
+  handleMouseStart = () => {
+    this.element.ownerDocument.addEventListener(
+      "mousemove",
+      this.updatePosition
+    );
+    this.element.ownerDocument.addEventListener("mouseup", this.handleMouseEnd);
+  };
+
+  handleMouseEnd = () => {
+    this.element.ownerDocument.removeEventListener(
+      "mousemove",
+      this.updatePosition
+    );
+    this.element.ownerDocument.removeEventListener(
+      "mouseup",
+      this.handleMouseEnd
+    );
+  };
+
+  handleTouchStart = () => {
+    this.element.ownerDocument.addEventListener(
+      "touchmove",
+      this.updatePosition
+    );
+    this.element.ownerDocument.addEventListener("touchup", this.handleTouchEnd);
+    this.element.ownerDocument.addEventListener(
+      "touchend",
+      this.handleTouchEnd
+    );
+    this.element.ownerDocument.addEventListener(
+      "touchcancel",
+      this.handleTouchEnd
+    );
+  };
+
+  handleTouchEnd = () => {
+    this.element.ownerDocument.removeEventListener(
+      "touchmove",
+      this.updatePosition
+    );
+    this.element.ownerDocument.removeEventListener(
+      "touchup",
+      this.handleTouchEnd
+    );
+    this.element.ownerDocument.removeEventListener(
+      "touchend",
+      this.handleTouchEnd
+    );
+    this.element.ownerDocument.removeEventListener(
+      "touchcancel",
+      this.handleTouchEnd
+    );
+  };
+
+  handleChange = (evt) => {
+    this.setState({ value: evt.target.value });
+    this.updatePosition(evt);
+  };
+
+  render() {
+    const {
+      prefix,
+      ariaLabelInput,
+      className,
+      hideTextInput,
+      id = (this.inputId =
+        this.inputId || `__wfp-slider_${Math.random().toString(36).substr(2)}`),
+      min,
+      minLabel,
+      max,
+      maxLabel,
+      formatLabel = defaultFormatLabel,
+      fullWidth,
+      labelText,
+      step,
+      stepMuliplier, // eslint-disable-line no-unused-vars
+      inputType,
+      required,
+      disabled,
+      helperText,
+      invalid,
+      invalidText,
+      hideLabel,
+      name,
+      light,
+      ...other
+    } = this.props;
+
+    const { value, left } = this.state;
+
+    const sliderClasses = classNames(
+      "wfp--slider",
+      { "wfp--slider--disabled": disabled },
+      className
+    );
+
+    const sliderContainerClasses = classNames("wfp--slider-container", {
+      "wfp--slider-container--full-width": fullWidth,
+    });
+
+    const inputClasses = classNames("wfp--slider-text-input", {
+      "wfp--text-input--light": light,
+    });
+
+    const filledTrackStyle = {
+      transform: `translate(0%, -50%) scaleX(${left / 100})`,
+    };
+    const thumbStyle = {
+      left: `${left}%`,
+    };
+
+    const errorId = id + "-error-msg";
+
+    const labelClasses = classNames(`${prefix}--label`, {
+      [`${prefix}--visually-hidden`]: hideLabel,
+      [`${prefix}--label--disabled`]: other.disabled,
+    });
+
+    const label = labelText ? (
+      <label htmlFor={id} className={labelClasses}>
+        {labelText}
+      </label>
+    ) : null;
+
+    const error = invalid ? (
+      <div className="wfp--form-requirement" id={errorId}>
+        {invalidText}
+      </div>
+    ) : null;
+
+    const helper = helperText ? (
+      <div className="wfp--form__helper-text">{helperText}</div>
+    ) : null;
+
+    return (
+      <div className="wfp--form-item">
+        {label}
+        {helper}
+        <div className={sliderContainerClasses}>
+          <span className="wfp--slider__range-label">
+            {formatLabel(min, minLabel)}
+          </span>
+          <div
+            className={sliderClasses}
+            ref={(node) => {
+              this.element = node;
+            }}
+            onClick={this.updatePosition}
+            onKeyPress={this.updatePosition}
+            role="presentation"
+            tabIndex={-1}
+            {...other}
+          >
+            <div
+              className="wfp--slider__track"
+              ref={(node) => {
+                this.track = node;
+              }}
+            />
+            <div
+              className="wfp--slider__filled-track"
+              style={filledTrackStyle}
+            />
+            <div
+              className="wfp--slider__thumb"
+              role="slider"
+              id={id}
+              tabIndex={0}
+              aria-valuemax={max}
+              aria-valuemin={min}
+              aria-valuenow={value}
+              style={thumbStyle}
+              onMouseDown={this.handleMouseStart}
+              onTouchStart={this.handleTouchStart}
+              onKeyDown={this.updatePosition}
+            />
+            <input
+              type="hidden"
+              name={name}
+              value={value}
+              required={required}
+              min={min}
+              max={max}
+              step={step}
+              onChange={this.handleChange}
+            />
+          </div>
+          <span className="wfp--slider__range-label">
+            {formatLabel(max, maxLabel)}
+          </span>
+          {!hideTextInput && (
+            <TextInput
+              disabled={disabled}
+              type={inputType}
+              id="input-for-slider"
+              className={inputClasses}
+              value={value}
+              onChange={this.handleChange}
+              labelText=""
+              aria-label={ariaLabelInput}
+            />
+          )}
+        </div>
+        {error}
+      </div>
+    );
+  }
+}
+
+export default withWFPCoreSettings(Slider);

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import Slider from ".";
+
+export default {
+  title: "Components/Forms/Slider",
+  component: Slider,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+  },
+};
+
+export const SliderDefault: Story = {
+  render: (args) => <Slider id="slider2" {...args} />,
+  args: {
+    name: "Form item name (name)",
+    value: 25,
+    min: 10,
+    max: 50,
+    step: 1,
+    labelText: "Slider Label",
+    helperText: "Additional helper text",
+    fullWidth: false,
+    hideTextInput: false,
+    disabled: false,
+    minLabel: "",
+    maxLabel: "",
+    inputType: "number",
+    ariaLabelInput: "Slider number input",
+  },
+};
+
+export const hideTextInput = (args) => (
+  <div style={{ marginTop: "2rem" }}>
+    <Slider id="slider2" {...args} />
+  </div>
+);
+
+hideTextInput.args = {
+  name: "Form item name (name)",
+  inputType: "number",
+  hideTextInput: true,
+  value: 25,
+  min: 0,
+  max: 50,
+  step: 1,
+  labelText: "Slider Label",
+  helperText: "Additional helper text",
+  minLabel: "",
+  maxLabel: "",
+};
+
+hideTextInput.story = {
+  name: "Hide TextInput",
+  parameters: {
+    docs: {
+      storyDescription: `Hide the number input box by setting \`hideTextInput\` property to **true**`,
+    },
+  },
+};
+
+export const Disabled = (args) => (
+  <div style={{ marginTop: "2rem" }}>
+    <Slider id="slider2" {...args} />
+  </div>
+);
+
+Disabled.args = {
+  name: "Form item name (name)",
+  inputType: "number",
+  disabled: true,
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  labelText: "Slider Label",
+  helperText: "Additional helper text",
+  minLabel: "",
+  maxLabel: "",
+};
+
+Disabled.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Specify whether a slider should be interactive or non-interactive by setting the \`disabled\` property to **true** or **false**`,
+    },
+  },
+};
+
+export const Fullwidth = (args) => (
+  <div style={{ marginTop: "2rem" }}>
+    <Slider id="slider2" {...args} />
+  </div>
+);
+
+Fullwidth.args = {
+  name: "Form item name (name)",
+  inputType: "number",
+  fullWidth: true,
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  labelText: "Slider Label",
+  helperText: "Additional helper text",
+  minLabel: "",
+  maxLabel: "",
+};
+
+Fullwidth.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Specify \`fullWidth\` property to be full to use the width of parent element`,
+    },
+  },
+};