render()

in src/Wplaceholder/index.tsx [223:302]

• 76 lines of code
• 21 McCabe index (conditional complexity)

  render() {
    const {
      className,
      width,
      height = '100%',
      style,
      loading,
      error,
      noData,
      empty,
      locale,
      language,
      ...otherProps
    } = this.props;

    const mainClasses = classNames(prefix, {
      [FullCrossName]: true,
      [prefix + '-loading']: !error && loading,
      [prefix + '-no-data']: !error && !loading && noData,
      [prefix + '-empty']: !error && !loading && empty,
      [prefix + '-error']: !!error,
      [className]: !!className,
    });

    let renderSvg = svg;
    if (error) {
      renderSvg = <></>;
    } else if (!loading && noData) {
      renderSvg = noDataSvg;
      warn(
        'Wplaceholder',
        'noData属性已废弃，如果基础图表如Wline无数据，无需额外使用该组件，如为业务自定义组件，请使用empty属性。',
      );

      chartLog('Wplaceholder', 'rulesInfo', {
        selector: `#${prefix}-no-data`,
        checkItem: 'empty',
        errorInfo: {
          value: 'noData', // 错误的值
          errorValue: 1, // 错误的数量
          errorRate: 1,
        },
      });
    } else if (empty) {
      renderSvg = <></>;
    } else if (loading) {
      renderSvg = <></>;
    }

    return (
      <div
        className={mainClasses}
        style={{
          width:
            !width || typeof width === 'number' || !/^[\d]+$/.test(width) ? width : Number(width),
          height:
            !height || typeof height === 'number' || !/^[\d]+$/.test(height)
              ? height
              : Number(height),
          ...style,
        }}
        {...otherProps}
      >
        {loading ? (
          loadingDom(
            getText(
              'loading',
              this.state?.language || language || this.context.language,
              locale || this.context.locale,
            ),
          )
        ) : (
          <div className={prefix + '-children'}>
            {renderSvg}
            {this.renderText(loading, error, noData, empty)}
          </div>
        )}
      </div>
    );
  }