lowcode-engine/packages/material-parser/test/fixtures/fusion-next-component/src/demo-helper/index.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import md5 from 'md5';

const COL = '{Col}';
const LABEL = '{Label}';
const TITLE = '{Title}';
const { showType = 'none', demoItems = {} } = window.DEMO_VARIABLE || {};
const callback = [];
const COOL = {};
const FUN = {};
let demoCount = 0;

// TODO: { functions, statements, sizes }

function convertArrayToObject(demoFunction) {
  const objDemoFunction = {};
  if (Array.isArray(demoFunction)) {
    demoFunction.forEach(demo => {
      objDemoFunction[demo.name] = {
        label: demo.label,
        value: demo.value,
        enum: demo.enum.map(e => {
          let label = e;
          if (e === 'true') {
            label = '是';
          } else if (e === 'false') {
            label = '否';
          }

          return {
            label,
            value: e,
          };
        }),
      };
    });
    return objDemoFunction;
  }
  return demoFunction;
}

function convertObjectToArray(demoFunction) {
  const arrayDemo = [];
  Object.keys(demoFunction).forEach(name => {
    const demo = demoFunction[name];
    arrayDemo.push({
      name,
      label: demo.label,
      value: demo.value,
      enum: demo.enum.map(e => {
        return e.value;
      }),
    });
  });
  return arrayDemo;
}

/**
 * XyzAbc -> xyz-abc
 * @param {String} str 驼峰字符串
 * @return {String} 输出规范化的字符串
 */
function deCamelize(str) {
  const matches = str.match(/([A-Z][a-z]{2,})/g);
  if (matches === null) {
    // return str.toLowerCase();
    return str;
  }
  return matches
    .toString()
    .replace(',', '-')
    .toLowerCase();
}

/**
 * 格式化词组 'AbcZex XyzYxx' -> 'abc-zex xyz-yxx'
 * @param {String} str 驼峰词组
 * @return {String} 输出格式化的词组
 */
function formatTitle(str) {
  if (!str || typeof str !== 'string') {
    return;
  }
  return str
    .split(' ')
    .map(deCamelize)
    .join(' ');
}

class Demo extends Component {
  static displayName = 'Demo';

  static propTypes = {
    parentDisplayName: PropTypes.string,
    defaultBackground: PropTypes.oneOf(['dark', 'light']),
    title: PropTypes.string,
    block: PropTypes.bool,
    children: PropTypes.any,
    className: PropTypes.string,
    demoIndex: PropTypes.string,
    demoItems: PropTypes.object,
    demoScope: PropTypes.object,
    demoTitle: PropTypes.string,
    showType: PropTypes.string,
    switchVisible: PropTypes.func,
    switchBackground: PropTypes.bool,
    demoFunction: PropTypes.object,
    onFunctionChange: PropTypes.func,
    style: PropTypes.object,
  };

  static defaultProps = {
    defaultBackground: 'light',
    block: false,
    onFunctionChange: () => {},
  };

  constructor(props) {
    super(props);

    this.state = {
      demoIndex: props.demoIndex || `${demoCount++}`,
      demoItems: props.demoItems || demoItems,
      showType: props.showType || showType,
      background: props.defaultBackground,
      initDate: new Date().getTime(),
    };

    if (!props.demoIndex) {
      callback.push(this.setVisible.bind(this));
    }
  }

  componentWillReceiveProps(nextProps) {
    if ('defaultBackground' in nextProps) {
      this.setState({
        background: nextProps.defaultBackground,
      });
    }
  }

  setVisible(data) {
    delete data.demoIndex;

    this.setState(data);
  }

  switchVisible(demoIndex) {
    const demoItems = this.props.demoItems || this.state.demoItems;

    // TIP: 清理无效数据
    Object.keys(demoItems).forEach(key => {
      if (demoItems[key].existed) {
        delete demoItems[key].existed;
      } else {
        delete demoItems[key];
      }
    });

    if (!demoItems[demoIndex]) {
      return;
    }

    const { hidden = false } = demoItems[demoIndex];
    const childKeys = Object.keys(demoItems).filter(key => new RegExp(`^${demoIndex.replace(/\*/, '(\\*|\\d+)')}`).test(key));

    // TIP: 更新当前控制器
    demoItems[demoIndex].hidden = !hidden;
    // TIP: 更新下级控制器
    childKeys.forEach(key => {
      if (key.indexOf('*') > -1) {
        demoItems[key].hidden = !hidden;
      }
    });
    // TIP: 更新 DEMO
    childKeys.forEach(key => {
      if (key.indexOf('*') < 0) {
        demoItems[key].hidden =
                    (demoItems[key.replace(/\d+$/, '*')] || {}).hidden ||
                    (demoItems[key.replace(/\d+-(\d+)$/, '*-$1')] || {})
                      .hidden ||
                    !hidden;
      }
    });
    // TIP: 同步上级控制器
    this.syncVisible(demoIndex, demoItems);

    sendMessage(window.compName, 'displayed', {
      demoIndex,
      demoItems,
    });
  }

  syncVisible(demoIndex, demoItems) {
    let index = demoIndex.replace(/(-(\*|\d+)){2}$/, '-\\d+-\\d+');

    if (index !== demoIndex) {
      const itemKeys = Object.keys(demoItems).filter(
        key => new RegExp(`^${index}`).test(key) && key.indexOf('*') < 0,
      );
      const { hidden } = demoItems[itemKeys[0] || demoIndex];
      let sameValue = true;

      itemKeys.forEach(key => {
        if (!!demoItems[key].hidden !== hidden) {
          sameValue = false;
        }
      });

      index = demoIndex.replace(/-(\*|\d+)-(\*|\d+)$/, '-*');

      demoItems[index].hidden = (sameValue && hidden) || false;

      this.syncVisible(index, demoItems);
    }
  }

  switchBackground() {
    const background = this.state.background === 'light' ? 'dark' : 'light';

    this.setState({
      background,
    });
  }

  onFunctionChange(name, e) {
    e.stopPropagation();

    const { value } = e.currentTarget;
    const demoFunction = convertArrayToObject(this.props.demoFunction);

    let nextDemoFunction = {};
    Object.keys(demoFunction).forEach(funcName => {
      const func = demoFunction[funcName];

      if (funcName === name) {
        func.value = value;
      }

      nextDemoFunction[funcName] = func;
    });

    if (Array.isArray(this.props.demoFunction)) {
      nextDemoFunction = convertObjectToArray(nextDemoFunction);
    }

    this.props.onFunctionChange(nextDemoFunction);
    return false;
  }

  render() {
    let isDemoShape = false;
    let hasDemoLevel = false;
    let children;

    const block = this.props.block ? 'block' : null;
    const index = this.props.demoIndex || this.state.demoIndex;
    const demoItems = this.props.demoItems || this.state.demoItems;
    const demoScope = this.props.demoScope || this;
    const demoTitle = this.props.demoTitle
      ? `${this.props.demoTitle} -> ${this.props.title || TITLE}`
      : this.props.title || TITLE;
    const showType = this.props.showType || this.state.showType;
    const switchVisible = this.props.switchVisible || this.switchVisible;
    const { background, initDate } = this.state;
    const { className, switchBackground, style } = this.props;
    const demoFunction = convertArrayToObject(this.props.demoFunction);

    if (this.props.children) {
      isDemoShape = this.props.parentDisplayName !== 'Demo';

      let first;
      if (Array.isArray(this.props.children)) {
        first = this.props.children[0];
      } else {
        first = this.props.children;
      }

      hasDemoLevel = first.type.displayName === 'Demo';
    }

    // 注入 demoFunction 到 window.COOL
    if (isDemoShape && this.props.title && demoFunction) {
      FUN[this.props.title] = {};
      Object.keys(demoFunction).forEach(funcName => {
        const func = demoFunction[funcName];
        func.name = funcName;
        FUN[this.props.title][funcName] = func;
      });
    }

    let demoShapeLevel;
    if ((isDemoShape && !hasDemoLevel) || !isDemoShape) {
      demoShapeLevel = demoTitle.split(' -> ').join('_');

      const body = React.Children.map(this.props.children, (child, i) => {
        return React.cloneElement(child, {
          block: this.props.block,
          demoIndex: `${index}-${i}`,
          demoItems,
          demoScope,
          demoTitle,
          demoShapeLevel,
          showType,
          switchVisible,
        });
      });

      children = (
        <table className={block}>
          <tbody>{body}</tbody>
        </table>
      );
    } else {
      children = React.Children.map(this.props.children, (child, i) => {
        return React.cloneElement(child, {
          parentDisplayName: 'Demo',
          defaultBackground: background,
          demoIndex: `${index}-${i}`,
          demoItems,
          demoScope,
          demoTitle,
          demoFunction,
          showType,
          switchVisible,
        });
      });
    }

    const functionSelect = [];
    if (isDemoShape && demoFunction) {
      Object.keys(demoFunction).forEach((funcName, i) => {
        const func = demoFunction[funcName];
        const tmpRadio = [];
        const name = md5(`${funcName}-${initDate}`);

        func.enum.forEach((enumObj, j) => {
          const checked = enumObj.value.toString() === func.value;

          tmpRadio.push(
            <label key={j}>
              <input
                type="radio"
                name={name}
                data-func={funcName}
                value={enumObj.value.toString()}
                onChange={this.onFunctionChange.bind(
                  this,
                  funcName,
                )}
                defaultChecked={checked}
              />
              {enumObj.label.toString()}
            </label>,
          );
        });

        functionSelect.push(
          <li key={i}>
            <span title={func.label}>{func.label}:</span>
            {tmpRadio}
          </li>,
        );
      });
    }

    const demoIndex = `${index}-*`;
    const { hidden = false } = demoItems[demoIndex] || {};

    if (showType === 'hidden' || !hidden) {
      if (!demoItems[demoIndex]) {
        demoItems[demoIndex] = {
          hidden: false,
          title: demoTitle,
        };
      } else {
        demoItems[demoIndex].title = demoTitle;
      }
      demoItems[demoIndex].existed = true;

      const wrapCls = classNames({
        'demo pc': true,
        [`demo-${background}`]: background,
        [className]: className,
      });
      const switchCls = classNames({
        'demo-switch': true,
        'demo-switch-on': background === 'dark',
        'demo-switch-off': background === 'light',
      });

      const customProps = {};
      if (this.props.title) {
        // 注入 demo 的标题，用于按需选取
        customProps.title = formatTitle(this.props.title);
      }

      return (
        <div className={wrapCls} style={style} {...customProps}>
          <div className="demo-header">
            <span>{this.props.title || TITLE}</span>
            {showType === 'hidden' && (
            <DisplaySwitch
              hidden={hidden}
              onClick={switchVisible.bind(
                demoScope,
                demoIndex,
              )}
            />
            )}
            {isDemoShape && switchBackground ? (
              <div className="demo-switch-wrapper">
                <span>背景颜色</span>
                <div
                  className={switchCls}
                  onClick={this.switchBackground.bind(this)}
                >
                  <div className="demo-switch-trigger" />
                  <div className="demo-switch-children">
                    {background === 'light' ? '深' : '浅'}
                  </div>
                </div>
              </div>
            ) : null}
          </div>
          {isDemoShape && demoFunction ? (
            <ul className="demo-select">{functionSelect}</ul>
          ) : null}
          <div className="demo-body">{children}</div>
        </div>
      );
    } else {
      return null;
    }
  }
}

/* eslint-disable react/no-multi-comp */
class DemoGroup extends Component {
  static displayName = 'DemoGroup';

  static propTypes = {
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
    block: PropTypes.bool,
    height: PropTypes.string,
    children: PropTypes.any,
    className: PropTypes.string,
    demoIndex: PropTypes.string,
    demoItems: PropTypes.object,
    demoScope: PropTypes.object,
    demoTitle: PropTypes.string,
    demoShapeLevel: PropTypes.string,
    showType: PropTypes.string,
    switchVisible: PropTypes.func,
  };

  static defaultProps = {
    block: false,
    height: '',
  };

  render() {
    const {
      demoIndex: index,
      demoItems = {},
      demoScope = this,
      showType,
      switchVisible = () => {},
    } = this.props;
    const demoIndex = `${index}-*`;
    const demoTitle = `${this.props.demoTitle} -> ${this.props.label ||
            LABEL}`;
    const { demoShapeLevel } = this.props;
    const { hidden = false } = demoItems[demoIndex] || {};

    // 解析
    if (demoShapeLevel) {
      if (!COOL[demoShapeLevel]) {
        COOL[demoShapeLevel] = [];
      }

      if (this.props.label) {
        let ret = false;
        COOL[demoShapeLevel].forEach((item, index) => {
          if (item.name === 'statement') {
            ret = true;
            COOL[demoShapeLevel][index].enum.push(this.props.label);
          }
        });
        if (!ret) {
          COOL[demoShapeLevel].push({
            name: 'statement',
            enum: [this.props.label],
          });
        }
      }
    }

    // 获得默认值
    const defaultCool = {};
    defaultCool.title = this.props.demoTitle;
    defaultCool.shape = demoShapeLevel;
    defaultCool.statement = this.props.label;
    COOL[demoShapeLevel].forEach(item => {
      if (item.value) {
        defaultCool[item.name] = item.value;
      }
    });

    const children = React.Children.map(this.props.children, (child, i) => {
      const {
        demoIndex: index,
        demoItems = {},
        showType,
        block,
      } = this.props;
      const demoIndex = `${index}-${i}`;
      const { hidden = false } = demoItems[demoIndex] || {};
      const classes = classNames({
        'demo-item': !hidden,
        'demo-item-hidden': hidden,
        block,
      });

      COOL[demoShapeLevel].forEach(item => {
        if (item.name === 'size') {
          defaultCool.size = item.enum[i];
        }
      });

      if (showType === 'hidden' || !hidden) {
        if (!demoItems[demoIndex]) {
          demoItems[demoIndex] = {
            hidden: false,
          };
        }
        demoItems[demoIndex].existed = true;

        const cloneChild = React.cloneElement(child, {
          'data-cool': JSON.stringify(defaultCool),
        });

        return (
          <td
            className="wrap"
            style={{ height: this.props.height || null }}
          >
            <div className={classes} key={i}>
              {cloneChild}
            </div>
          </td>
        );
      } else {
        return null;
      }
    });

    if (showType === 'hidden' || !hidden) {
      if (!demoItems[demoIndex]) {
        demoItems[demoIndex] = {
          hidden: false,
          title: demoTitle,
        };
      } else {
        demoItems[demoIndex].title = demoTitle;
      }
      demoItems[demoIndex].existed = true;

      return (
        <tr className="demo-group">
          {this.props.label === false ? null : (
            <td
              className="label"
              style={{ height: this.props.height || null }}
            >
              <span>{this.props.label || LABEL}</span>
              {showType === 'hidden' && (
              <DisplaySwitch
                hidden={hidden}
                onClick={switchVisible.bind(
                  demoScope,
                  demoIndex,
                )}
              />
              )}
            </td>
          )}
          {children}
        </tr>
      );
    } else {
      return null;
    }
  }
}

class DemoHead extends Component {
  static displayName = 'DemoHead';

  static propTypes = {
    cols: PropTypes.array,
    theme: PropTypes.object,
    demoIndex: PropTypes.string,
    demoItems: PropTypes.object,
    demoScope: PropTypes.object,
    demoTitle: PropTypes.string,
    demoShapeLevel: PropTypes.string,
    showType: PropTypes.string,
    switchVisible: PropTypes.func,
  };

  static defaultProps = {
    cols: [],
  };

  render() {
    const cols = this.props.cols.map((col, i) => {
      const {
        demoIndex: index,
        demoItems = {},
        demoScope = this,
        showType,
        switchVisible = () => {},
      } = this.props;
      const demoIndex = `${index.replace(/-\d+$/, '-*')}-${i}`;
      const demoTitle = `${this.props.demoTitle} -> ${col || COL}`;
      const { demoShapeLevel } = this.props;
      const { hidden = false } = demoItems[demoIndex] || {};

      // 解析
      if (demoShapeLevel) {
        if (!COOL[demoShapeLevel]) {
          COOL[demoShapeLevel] = [];
        }

        if (col) {
          let ret = false;
          COOL[demoShapeLevel].forEach((item, index) => {
            if (item.name === 'size') {
              ret = true;
              COOL[demoShapeLevel][index].enum.push(col);
            }
          });
          if (!ret) {
            COOL[demoShapeLevel].push({
              name: 'size',
              enum: [col],
            });
          }
        }
      }

      if (showType === 'hidden' || !hidden) {
        if (!demoItems[demoIndex]) {
          demoItems[demoIndex] = {
            hidden: false,
            title: demoTitle,
          };
        } else {
          demoItems[demoIndex].title = demoTitle;
        }
        demoItems[demoIndex].existed = true;

        return (
          <td key={i}>
            {col || COL}
            {showType === 'hidden' && (
            <DisplaySwitch
              hidden={hidden}
              onClick={switchVisible.bind(
                demoScope,
                demoIndex,
              )}
            />
            )}
          </td>
        );
      } else {
        return null;
      }
    });

    return (
      <tr className="demo-head">
        <td />
        {cols}
      </tr>
    );
  }
}

class DisplaySwitch extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    hidden: PropTypes.bool,
  };

  static defaultProps = {
    onClick: () => {},
  };

  render() {
    const status = this.props.hidden ? 'hide' : 'browse';

    return (
      <i
        className={`demo-icon demo-icon-${status}`}
        onClick={this.props.onClick}
      />
    );
  }
}

if (window.addEventListener) {
  window.addEventListener('message', event => {
    const { data } = event;
    if (
      event.origin !== location.origin ||
            !data ||
            data.from !== 'config'
    ) {
      return;
    }

    if (data.type === 'displayed') {
      callback.forEach(callback => {
        callback(data.body);
      });
    }
  });
}

function sendMessage(compName, type, body) {
  const { parent } = window;

  if (parent !== window) {
    parent.postMessage(
      {
        from: 'demo',
        type,
        body,
        compName,
      },
      '*',
    );
  }
}

function initDemo(compName) {
  window.compName = compName;

  // 追加信息到页面
  const info = document.createElement('script', {
    id: 'fusion-cool',
  });
  info.innerHTML = `window.COOL = {'${compName}': ${JSON.stringify(
    COOL,
  )}, 'functions': ${JSON.stringify(FUN)}}`;
  document.body.appendChild(info);

  sendMessage(compName, 'loaded');
}

export { Demo, DemoHead, DemoGroup, initDemo };