Anjing Webshells

Website : rimsha.abasa.com
: / var / canvas / node_modules / @instructure / ui-progress / es / ProgressCircle /
Filename : index.js
back
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
var _dec, _dec2, _class, _class2;
/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 - present Instructure, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/** @jsx jsx */
import { Component } from 'react';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { View } from '@instructure/ui-view';
import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
import { testable } from '@instructure/ui-testable';
import { withStyle, jsx } from '@instructure/emotion';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import { allowedProps, propTypes } from './props';

/**
---
category: components
---
**/
let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ProgressCircle extends Component {
  constructor(props) {
    super(props);
    this._timeouts = [];
    this.ref = null;
    this.handleRef = el => {
      const elementRef = this.props.elementRef;
      this.ref = el;
      if (typeof elementRef === 'function') {
        elementRef(el);
      }
    };
    this.state = {
      shouldAnimateOnMount: props.shouldAnimateOnMount
    };
  }
  get makeStylesVariables() {
    return {
      shouldAnimateOnMount: this.state.shouldAnimateOnMount
    };
  }
  componentDidMount() {
    var _this$props$makeStyle, _this$props;
    if (this.state.shouldAnimateOnMount) {
      this._timeouts.push(setTimeout(() => {
        this.setState({
          shouldAnimateOnMount: false
        });
      }, this.props.animationDelay || 500));
    }
    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
  }
  componentDidUpdate() {
    var _this$props$makeStyle2, _this$props2;
    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
  }
  componentWillUnmount() {
    this._timeouts.forEach(timeout => clearTimeout(timeout));
  }
  render() {
    var _styles$radii, _styles$radii2, _styles$radii3;
    const _this$props3 = this.props,
      color = _this$props3.color,
      renderValue = _this$props3.renderValue,
      formatScreenReaderValue = _this$props3.formatScreenReaderValue,
      meterColor = _this$props3.meterColor,
      valueNow = _this$props3.valueNow,
      valueMax = _this$props3.valueMax,
      screenReaderLabel = _this$props3.screenReaderLabel,
      size = _this$props3.size,
      styles = _this$props3.styles,
      props = _objectWithoutProperties(_this$props3, _excluded);
    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
      valueNow: valueNow,
      valueMax: valueMax
    }) : void 0;
    // consolidating the label and aria-valuetext to put in aria-label because
    // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
    // But leaving aria-valuetext because JAWS ignores aria-label
    const labelAndValueText = `${screenReaderLabel} ${valueText}`;
    const value = callRenderProp(renderValue, {
      valueNow: valueNow,
      valueMax: valueMax
    });
    const style = {
      strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
    };
    return jsx(View, Object.assign({}, passthroughProps(props), {
      as: this.props.as,
      elementRef: this.handleRef,
      css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
      margin: this.props.margin
    }), jsx(ScreenReaderContent, null, jsx("progress", {
      max: valueMax,
      value: valueNow,
      "aria-valuetext": valueText,
      "aria-valuenow": valueNow,
      "aria-valuemax": valueMax,
      "aria-label": labelAndValueText
    })), value && jsx("span", {
      css: styles === null || styles === void 0 ? void 0 : styles.center,
      "aria-hidden": "true"
    }, jsx("span", {
      css: styles === null || styles === void 0 ? void 0 : styles.value
    }, value)), jsx("svg", {
      css: styles === null || styles === void 0 ? void 0 : styles.circle,
      role: "presentation",
      focusable: "false"
    }, jsx("circle", {
      css: styles === null || styles === void 0 ? void 0 : styles.track,
      role: "presentation",
      cx: "50%",
      cy: "50%",
      r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
    }), jsx("circle", {
      css: styles === null || styles === void 0 ? void 0 : styles.border,
      role: "presentation",
      cx: "50%",
      cy: "50%",
      r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
    }), jsx("circle", {
      css: styles === null || styles === void 0 ? void 0 : styles.meter,
      role: "presentation",
      style: style,
      cx: "50%",
      cy: "50%",
      r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
    })));
  }
}, _class2.displayName = "ProgressCircle", _class2.componentId = 'ProgressCircle', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
  formatScreenReaderValue: ({
    valueNow,
    valueMax
  }) => `${valueNow} / ${valueMax}`,
  size: 'medium',
  valueMax: 100,
  valueNow: 0,
  as: 'div',
  color: 'primary',
  shouldAnimateOnMount: false,
  // default to showing `success` color on completion
  meterColor: ({
    valueNow,
    valueMax
  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
}, _class2)) || _class) || _class);
export default ProgressCircle;
export { ProgressCircle };