@onesy/ui-react/esm/MainProgress/MainProgress.js

UI for React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["min", "max", "firstIncrement", "incrementMin", "incrementMax", "stepMin", "stepMax", "stepInterval", "onStart", "onIncrement", "onUpdate", "onDone", "fixed", "position", "TransitionComponent", "TransitionComponentProps", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { is, wait, random, clamp } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import FadeElement from '../Fade';
import LinearProgressElement from '../LinearProgress';
import MainProgressContext from './Context';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
  root: {
    zIndex: theme.z_index.tooltip - 14,
    '&.onesy-LinearProgress-root': {
      height: '2px'
    },
    '& .onesy-LinearProgress-buffer': {
      background: 'transparent'
    }
  },
  fixed: {
    insetInline: '0',
    '&.onesy-LinearProgress-root': {
      position: 'fixed'
    }
  },
  position_top: {
    top: '0'
  },
  position_bottom: {
    bottom: '0'
  }
}), {
  name: 'onesy-MainProgress'
});
const MainProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useOnesyTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgress?.props?.default), props_), [props_]);
  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
  const LinearProgress = React.useMemo(() => theme?.elements?.LinearProgress || LinearProgressElement, [theme]);
  const {
      min = 0,
      max = 99,
      firstIncrement = true,
      incrementMin = 4,
      incrementMax = 14,
      stepMin = 1,
      stepMax = 4,
      stepInterval = 700,
      onStart,
      onIncrement,
      onUpdate,
      onDone,
      fixed = true,
      position = 'top',
      TransitionComponent = Fade,
      TransitionComponentProps = {},
      className,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const [inProp, setInProp] = React.useState(false);
  const [value, setValue] = React.useState(min);
  const refs = {
    value_: React.useRef({}),
    value: React.useRef(null),
    min: React.useRef(null),
    max: React.useRef(null),
    firstIncrement: React.useRef(null),
    incrementMin: React.useRef(null),
    incrementMax: React.useRef(null),
    stepInterval: React.useRef(null),
    stepMin: React.useRef(null),
    stepMax: React.useRef(null),
    TransitionComponentProps: React.useRef(null),
    linearProgress: React.useRef(null),
    interval: React.useRef(null),
    props: React.useRef(null)
  };
  refs.value.current = value;
  refs.props.current = props;
  refs.min.current = min;
  refs.max.current = max;
  refs.firstIncrement.current = firstIncrement;
  refs.incrementMin.current = incrementMin;
  refs.incrementMax.current = incrementMax;
  refs.stepInterval.current = stepInterval;
  refs.stepMin.current = stepMin;
  refs.stepMax.current = stepMax;
  refs.TransitionComponentProps.current = TransitionComponentProps;
  const clear = () => {
    if (refs.interval.current) {
      clearInterval(refs.interval.current);
      refs.interval.current = undefined;
    }
  };
  const start = React.useCallback(value_ => {
    // Reset
    clear();

    // Update
    refs.linearProgress.current = value_;

    // Open
    setInProp(true);

    // Set initial value to min
    const min_ = refs.min.current !== undefined ? refs.min.current : 0;
    const max_ = refs.max.current !== undefined ? refs.max.current : 0;
    setValue(min_);

    // start inc interval for steps
    // in refs.interval

    // in interval, remove interval if value is >= max
    if (min_ < max_) {
      const stepInterval_ = refs.stepInterval.current !== undefined ? refs.stepInterval.current : 700;
      refs.interval.current = setInterval(() => {
        if (refs.value.current >= max_) clearInterval(refs.interval.current);
        setValue(previousValue => clamp(previousValue + random(refs.stepMin.current, refs.stepMax.current), refs.min.current, refs.max.current));
      }, stepInterval_);
    }
    if (is('function', onStart)) onStart();
  }, []);
  const increment = React.useCallback(() => {
    // Inc value random between incrementMin, incrementMax, with clam to min, max
    let valueNew = refs.value.current;
    valueNew += clamp(random(refs.incrementMin.current, refs.incrementMax.current), refs.min.current, refs.max.current);
    setValue(valueNew);
    if (is('function', onIncrement)) onIncrement(valueNew);
  }, []);
  const update = React.useCallback(value_ => {
    const valueNew = value_;
    setValue(valueNew);
    if (is('function', onUpdate)) onUpdate(valueNew);
  }, []);
  const done = React.useCallback(async () => {
    clear();

    // Update value to 100
    setValue(100);

    // Update inProp to false with the timeout value
    const timeout = theme.transitions.duration.rg + 44;
    await wait(timeout);
    setInProp(false);
    if (is('function', onDone)) onDone();
  }, []);
  const onExited = () => {
    // Reset
    setValue(0);
  };
  React.useEffect(() => {
    if (inProp) {
      if (refs.firstIncrement.current) increment();
    }
  }, [inProp]);
  TransitionComponentProps.in = inProp;
  refs.value_.current.start = start;
  refs.value_.current.increment = increment;
  refs.value_.current.update = update;
  refs.value_.current.done = done;
  return /*#__PURE__*/React.createElement(MainProgressContext.Provider, {
    value: refs.value_.current
  }, /*#__PURE__*/React.createElement(TransitionComponent, _extends({
    in: inProp,
    onExited: onExited
  }, TransitionComponentProps), /*#__PURE__*/React.createElement(LinearProgress, _extends({
    ref: ref,
    value: value,
    version: "determinate",
    className: classNames([staticClassName('MainProgress', theme) && [`onesy-MainProgress-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
  }, other, refs.linearProgress.current))), children);
});
MainProgress.displayName = 'onesy-MainProgress';
export default MainProgress;