@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/progress/index.js

@@ -6,7 +6,6 @@ import '@douyinfe/semi-foundation/lib/es/progress/progress.css';
 import { Animation } from '@douyinfe/semi-animation';
 import { generateColor } from '@douyinfe/semi-foundation/lib/es/progress/generates';
 const prefixCls = cssClasses.PREFIX;
-
 class Progress extends Component {
   constructor(props) {
     super(props);
@@ -14,7 +13,6 @@ class Progress extends Component {
     this._mounted = true;
     this.state = {
       percentNumber: this.props.percent // Specially used for animation of numbers
-
     };
   }
 
@@ -23,7 +21,6 @@ class Progress extends Component {
       throw new Error('[Semi Progress]:percent can not be NaN');
       return;
     }
-
     if (prevProps.percent !== this.props.percent) {
       if (!this.props.motion) {
         // eslint-disable-next-line
@@ -32,11 +29,9 @@ class Progress extends Component {
         });
         return;
       }
-
       if (this.animation && this.animation.destroy) {
         this.animation.destroy();
       }
-
       this.animation = new Animation({
         from: {
           value: prevProps.percent
@@ -53,9 +48,8 @@ class Progress extends Component {
         // prevent setState while component is unmounted but this timer is called
         if (this._mounted === false) {
           return;
-        } // let percentNumber = Number.isInteger(props.value) ? props.value : Math.floor(props.value * 100) / 100;
-
-
+        }
+        // let percentNumber = Number.isInteger(props.value) ? props.value : Math.floor(props.value * 100) / 100;
         const percentNumber = parseInt(props.value);
         this.setState({
           percentNumber
@@ -66,7 +60,6 @@ class Progress extends Component {
         if (this._mounted === false) {
           return;
         }
-
         this.setState({
           percentNumber: this.props.percent
         });
@@ -74,12 +67,10 @@ class Progress extends Component {
       this.animation.start();
     }
   }
-
   componentWillUnmount() {
     this.animation && this.animation.destroy();
     this._mounted = false;
   }
-
   renderCircleProgress() {
     const {
       strokeLinecap,
@@ -109,24 +100,19 @@ class Progress extends Component {
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber);
     let width;
-
     if (this.props.width) {
       width = this.props.width;
     } else {
       size === strings.DEFAULT_SIZE ? width = 72 : width = 24;
-    } // parse stroke & generate gradients
-
-
-    const _stroke = this.selectStroke(stroke, percent, strokeGradient); // cx, cy is circle center
-
-
+    }
+    // parse stroke & generate gradients
+    const _stroke = this.selectStroke(stroke, percent, strokeGradient);
+    // cx, cy is circle center
     const cy = width / 2;
     const cx = width / 2;
     const radius = (width - strokeWidth) / 2; // radius
-
     const circumference = radius * 2 * Math.PI;
     const strokeDashoffset = (1 - perc / 100) * circumference; // Offset
-
     const strokeDasharray = `${circumference} ${circumference}`;
     const text = format(percNumber);
     return /*#__PURE__*/React.createElement("div", {
@@ -173,10 +159,8 @@ class Progress extends Component {
       className: `${prefixCls}-circle-text`
     }, text) : null);
   }
-
   calcPercent(percent) {
     let perc;
-
     if (percent > 100) {
       perc = 100;
     } else if (percent < 0) {
@@ -184,24 +168,18 @@ class Progress extends Component {
     } else {
       perc = percent;
     }
-
     return perc;
   }
-
   selectStroke(stroke, percent, strokeGradient) {
     if (typeof stroke === 'string') {
       return stroke;
     }
-
     const color = generateColor(stroke, percent, strokeGradient);
-
     if (typeof color !== 'undefined') {
       return color;
     }
-
     return strings.STROKE_DEFAULT;
   }
-
   renderLineProgress() {
     const {
       className,
@@ -232,20 +210,17 @@ class Progress extends Component {
     });
     const innerCls = cls(`${prefixCls}-track-inner`);
     const perc = this.calcPercent(percent);
-    const percNumber = this.calcPercent(percentNumber); // parse stroke & generate gradients
-
+    const percNumber = this.calcPercent(percentNumber);
+    // parse stroke & generate gradients
     const _stroke = this.selectStroke(stroke, percent, strokeGradient);
-
     const innerStyle = {
       background: _stroke
     };
-
     if (direction === strings.DEFAULT_DIRECTION) {
       innerStyle.width = `${perc}%`;
     } else {
       innerStyle.height = `${perc}%`;
     }
-
     const text = format(percNumber);
     return /*#__PURE__*/React.createElement("div", {
       id: id,
@@ -272,21 +247,17 @@ class Progress extends Component {
       className: `${prefixCls}-line-text`
     }, text) : null);
   }
-
   render() {
     const {
       type
     } = this.props;
-
     if (type === 'line') {
       return this.renderLineProgress();
     } else {
       return this.renderCircleProgress();
     }
   }
-
 }
-
 Progress.propTypes = {
   'aria-label': PropTypes.string,
   'aria-labelledby': PropTypes.string,

package/lib/es/radio/context.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/lib/es/radio/radioInnerFoundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/radio/constants';
 import { ArrayElement } from '../_base/base';
-export declare type RadioGroupButtonSize = ArrayElement<typeof strings.BUTTON_SIZE>;
-export declare type RadioMode = ArrayElement<typeof strings.MODE>;
+export type RadioGroupButtonSize = ArrayElement<typeof strings.BUTTON_SIZE>;
+export type RadioMode = ArrayElement<typeof strings.MODE>;
 export interface RadioContextValue {
     mode?: RadioMode;
     radioGroup?: {

package/lib/es/radio/index.js

@@ -1,8 +1,6 @@
 import Group from './radioGroup';
 import Radio from './radio';
-
 class RadioWithGroup extends Radio {}
-
 RadioWithGroup.Group = Group;
 export default RadioWithGroup;
 export { RadioWithGroup, Radio };

package/lib/es/radio/radio.d.ts

@@ -7,9 +7,9 @@ import '@douyinfe/semi-foundation/lib/es/radio/radio.css';
 import BaseComponent from '../_base/baseComponent';
 import RadioInner from './radioInner';
 import { RadioContextValue, RadioMode } from './context';
-export declare type RadioDisplayMode = 'vertical' | '';
-export declare type RadioType = typeof strings.TYPE_DEFAULT | typeof strings.TYPE_BUTTON | typeof strings.TYPE_CARD | typeof strings.TYPE_PURECARD;
-export declare type RadioProps = {
+export type RadioDisplayMode = 'vertical' | '';
+export type RadioType = typeof strings.TYPE_DEFAULT | typeof strings.TYPE_BUTTON | typeof strings.TYPE_CARD | typeof strings.TYPE_PURECARD;
+export type RadioProps = {
     autoFocus?: boolean;
     checked?: boolean;
     children?: React.ReactNode;

package/lib/es/radio/radio.js

@@ -1,7 +1,6 @@
 import _isBoolean from "lodash/isBoolean";
 import _isUndefined from "lodash/isUndefined";
 import _noop from "lodash/noop";
-
 /* eslint-disable prefer-destructuring */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -13,45 +12,36 @@ import '@douyinfe/semi-foundation/lib/es/radio/radio.css';
 import BaseComponent from '../_base/baseComponent';
 import RadioInner from './radioInner';
 import Context from './context';
-
 class Radio extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.onChange = e => {
       const {
         onChange
       } = this.props;
-
       if (this.isInGroup()) {
         const {
           radioGroup
         } = this.context;
         radioGroup.onChange && radioGroup.onChange(e);
       }
-
       !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
       onChange && onChange(e);
     };
-
     this.handleMouseEnter = e => {
       this.props.onMouseEnter(e);
       this.foundation.setHover(true);
     };
-
     this.handleMouseLeave = e => {
       this.props.onMouseLeave(e);
       this.foundation.setHover(false);
     };
-
     this.handleFocusVisible = event => {
       this.foundation.handleFocusVisible(event);
     };
-
     this.handleBlur = event => {
       this.foundation.handleBlur();
     };
-
     this.state = {
       hover: false,
       addonId: props.addonId,
@@ -61,7 +51,6 @@ class Radio extends BaseComponent {
     this.foundation = new RadioFoundation(this.adapter);
     this.radioEntity = null;
   }
-
   componentDidUpdate(prevProps) {
     if (this.props.checked !== prevProps.checked) {
       if (_isUndefined(this.props.checked)) {
@@ -71,7 +60,6 @@ class Radio extends BaseComponent {
       }
     }
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       setHover: hover => {
@@ -105,20 +93,16 @@ class Radio extends BaseComponent {
       }
     });
   }
-
   isInGroup() {
     // eslint-disable-next-line react/destructuring-assignment
     return this.context && this.context.radioGroup;
   }
-
   focus() {
     this.radioEntity.focus();
   }
-
   blur() {
     this.radioEntity.blur();
   }
-
   render() {
     const {
       addonClassName,
@@ -147,7 +131,6 @@ class Radio extends BaseComponent {
       checked,
       disabled
     };
-
     if (this.isInGroup()) {
       realChecked = this.context.radioGroup.value === propValue;
       isDisabled = disabled || this.context.radioGroup.disabled;
@@ -169,7 +152,6 @@ class Radio extends BaseComponent {
       isPureCardRadioGroup = type === strings.TYPE_PURECARD;
       isCardRadioGroup = type === strings.TYPE_CARD || isPureCardRadioGroup;
     }
-
     const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
     const prefix = realPrefixCls || css.PREFIX;
     const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
@@ -198,12 +180,10 @@ class Radio extends BaseComponent {
       [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
       [`${prefix}-focus`]: focusVisible && isButtonRadio
     }, addonClassName);
-
     const renderContent = () => {
       if (!children && !extra) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement("div", {
         className: cls([`${prefix}-content`, {
           [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup
@@ -219,7 +199,6 @@ class Radio extends BaseComponent {
         "x-semi-prop": "extra"
       }, extra) : null);
     };
-
     return /*#__PURE__*/React.createElement("label", {
       style: style,
       className: wrapper,
@@ -241,9 +220,7 @@ class Radio extends BaseComponent {
       onInputBlur: this.handleBlur
     })), renderContent());
   }
-
 }
-
 Radio.contextType = Context;
 Radio.propTypes = {
   autoFocus: PropTypes.bool,

package/lib/es/radio/radioGroup.d.ts

@@ -15,8 +15,8 @@ export interface OptionItem {
     style?: React.CSSProperties;
     className?: string;
 }
-export declare type Options = string[] | Array<OptionItem>;
-export declare type RadioGroupProps = {
+export type Options = string[] | Array<OptionItem>;
+export type RadioGroupProps = {
     defaultValue?: string | number;
     disabled?: boolean;
     name?: string;

package/lib/es/radio/radioGroup.js

@@ -7,43 +7,34 @@ import RadioGroupFoundation from '@douyinfe/semi-foundation/lib/es/radio/radioGr
 import BaseComponent from '../_base/baseComponent';
 import Radio from './radio';
 import Context from './context';
-
 class RadioGroup extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.onChange = evt => {
       this.foundation.handleChange(evt);
     };
-
     this.getFormatName = () => this.props.name || 'default';
-
     this.state = {
       value: props.value || props.defaultValue
     };
     this.foundation = new RadioGroupFoundation(this.adapter);
   }
-
   componentDidMount() {
     this.foundation.init();
   }
-
   componentDidUpdate(prevProps) {
     if (typeof prevProps.value === 'number' && isNaN(prevProps.value) && typeof this.props.value === 'number' && isNaN(this.props.value)) {
       // `NaN === NaN` returns false, and this will fail the next if check
       // therefore triggering an infinite loop
       return;
     }
-
     if (prevProps.value !== this.props.value) {
       this.foundation.handlePropValueChange(this.props.value);
     }
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       setValue: value => {
@@ -58,7 +49,6 @@ class RadioGroup extends BaseComponent {
       }
     });
   }
-
   render() {
     const {
       children,
@@ -87,7 +77,6 @@ class RadioGroup extends BaseComponent {
     });
     const realValue = this.state.value;
     let inner;
-
     if (options) {
       inner = (options || []).map((option, index) => {
         if (typeof option === 'string') {
@@ -112,7 +101,6 @@ class RadioGroup extends BaseComponent {
         key: index
       }) : null);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: prefixClsDisplay,
       style: style,
@@ -140,9 +128,7 @@ class RadioGroup extends BaseComponent {
       }
     }, inner));
   }
-
 }
-
 RadioGroup.propTypes = {
   defaultValue: PropTypes.any,
   disabled: PropTypes.bool,

package/lib/es/radio/radioInner.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import RadioInnerFoundation, { RadioChangeEvent, RadioInnerAdapter } from '@douyinfe/semi-foundation/lib/es/radio/radioInnerFoundation';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
-export declare type RadioInnerMode = 'advanced' | '';
+export type RadioInnerMode = 'advanced' | '';
 export interface RadioInnerProps extends BaseProps {
     checked?: boolean;
     disabled?: boolean;

package/lib/es/radio/radioInner.js

@@ -7,7 +7,6 @@ import { radioClasses as css } from '@douyinfe/semi-foundation/lib/es/radio/cons
 import Context from './context';
 import classnames from 'classnames';
 import { IconRadio } from '@douyinfe/semi-icons';
-
 class RadioInner extends BaseComponent {
   constructor(props) {
     super(props);
@@ -17,7 +16,6 @@ class RadioInner extends BaseComponent {
     this.foundation = new RadioInnerFoundation(this.adapter);
     this.onChange = this.onChange.bind(this);
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       setNativeControlChecked: checked => {
@@ -30,25 +28,20 @@ class RadioInner extends BaseComponent {
       }
     });
   }
-
   componentDidMount() {
     this.foundation.init();
   }
-
   componentDidUpdate(prevProps) {
     if (prevProps.checked !== this.props.checked) {
       this.foundation.setChecked(this.props.checked);
     }
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   blur() {
     this.inputEntity.blur();
   }
-
   focus() {
     const {
       preventScroll
@@ -57,11 +50,9 @@ class RadioInner extends BaseComponent {
       preventScroll
     });
   }
-
   onChange(e) {
     this.foundation.handleChange(e);
   }
-
   render() {
     const {
       disabled,
@@ -113,9 +104,7 @@ class RadioInner extends BaseComponent {
       className: inner
     }, checked ? /*#__PURE__*/React.createElement(IconRadio, null) : null));
   }
-
 }
-
 RadioInner.contextType = Context;
 RadioInner.propTypes = {
   checked: PropTypes.bool,

package/lib/es/rating/index.js

@@ -14,90 +14,71 @@ export default class Rating extends BaseComponent {
   constructor(props) {
     super(props);
     this.rate = null;
-
     this.onHover = (event, index) => {
       this.foundation.handleHover(event, index);
     };
-
     this.onMouseLeave = () => {
       this.foundation.handleMouseLeave();
     };
-
     this.onClick = (event, index) => {
       this.foundation.handleClick(event, index);
     };
-
     this.onFocus = e => {
       this.foundation.handleFocus(e);
     };
-
     this.onBlur = e => {
       this.foundation.handleBlur(e);
     };
-
     this.onKeyDown = event => {
       const {
         value
       } = this.state;
       this.foundation.handleKeyDown(event, value);
     };
-
     this.focus = () => {
       const {
         disabled,
         preventScroll
       } = this.props;
-
       if (!disabled) {
         this.rate.focus({
           preventScroll
         });
       }
     };
-
     this.blur = () => {
       const {
         disabled
       } = this.props;
-
       if (!disabled) {
         this.rate.blur();
       }
     };
-
     this.saveRef = index => node => {
       this.stars[index] = node;
     };
-
     this.saveRate = node => {
       this.rate = node;
     };
-
     this.handleStarFocusVisible = event => {
       this.foundation.handleStarFocusVisible(event);
     };
-
     this.handleStarBlur = event => {
       this.foundation.handleStarBlur(event);
     };
-
     this.getAriaLabelPrefix = () => {
       if (this.props['aria-label']) {
         return this.props['aria-label'];
       }
-
       let prefix = 'star';
       const {
         character
       } = this.props;
-
       if (typeof character === 'string') {
         prefix = character;
       }
-
       return prefix;
     };
-
     this.getItemList = ariaLabelPrefix => {
       const {
         count,
@@ -112,8 +93,8 @@ export default class Rating extends BaseComponent {
         value,
         hoverValue,
         focused
-      } = this.state; // index == count is for Empty rating
-
+      } = this.state;
+      // index == count is for Empty rating
       const itemList = [...Array(count + 1).keys()].map(ind => {
         const content = /*#__PURE__*/React.createElement(Item, {
           ref: this.saveRef(ind),
@@ -133,7 +114,6 @@ export default class Rating extends BaseComponent {
           onFocus: disabled || count !== ind ? noop : this.handleStarFocusVisible,
           onBlur: disabled || count !== ind ? noop : this.handleStarBlur
         });
-
         if (tooltips) {
           const text = tooltips[ind] ? tooltips[ind] : '';
           const showTips = hoverValue - 1 === ind;
@@ -144,12 +124,10 @@ export default class Rating extends BaseComponent {
             key: `${ind}-${showTips}`
           }, content);
         }
-
         return content;
       });
       return itemList;
     };
-
     const value = props.value === undefined ? props.defaultValue : props.value;
     this.stars = {};
     this.state = {
@@ -161,17 +139,14 @@ export default class Rating extends BaseComponent {
     };
     this.foundation = new RatingFoundation(this.adapter);
   }
-
   static getDerivedStateFromProps(nextProps, state) {
     if ('value' in nextProps && nextProps.value !== undefined) {
       return Object.assign(Object.assign({}, state), {
         value: nextProps.value
       });
     }
-
     return state;
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       focus: () => {
@@ -182,15 +157,14 @@ export default class Rating extends BaseComponent {
         const {
           value
         } = this.state;
-
         if (!disabled) {
           const index = Math.ceil(value) - 1;
           this.stars[index < 0 ? count : index].starFocus();
         }
       },
       getStarDOM: index => {
-        const instance = this.stars && this.stars[index]; // eslint-disable-next-line react/no-find-dom-node
-
+        const instance = this.stars && this.stars[index];
+        // eslint-disable-next-line react/no-find-dom-node
         return ReactDOM.findDOMNode(instance);
       },
       notifyHoverChange: (hoverValue, clearedValue) => {
@@ -207,13 +181,11 @@ export default class Rating extends BaseComponent {
         const {
           onChange
         } = this.props;
-
         if (!('value' in this.props)) {
           this.setState({
             value
           });
         }
-
         onChange(value);
       },
       clearValue: clearedValue => {
@@ -255,15 +227,12 @@ export default class Rating extends BaseComponent {
       }
     });
   }
-
   componentDidMount() {
     this.foundation.init();
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   render() {
     const {
       style,
@@ -304,7 +273,6 @@ export default class Rating extends BaseComponent {
       }, itemList)
     );
   }
-
 }
 Rating.contextType = ConfigContext;
 Rating.propTypes = {