@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/theme.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from './feature/token';
+import { THEMES } from './feature/token';
+import cloneDeep from './util/cloneDeep';
+
+export default class Theme {
+  static currentChartsInstance = {};
+  static preChartsInstance = {};
+  static globalName = undefined;
+  static THEMES = cloneDeep(THEMES)
+  constructor() { }
+
+  // 收集图表类
+  static registerCharts(instance, uuid) {
+    for (const key in this.currentChartsInstance) {
+      const item = this.currentChartsInstance[key];
+      const rect = item.dom?.getBoundingClientRect();
+      if (rect && rect.left === 0 && rect.right === 0 && rect.top === 0 && rect.bottom === 0) {
+        delete this.currentChartsInstance[key];
+      }
+    }
+    this.currentChartsInstance[uuid] = instance;
+  }
+
+  // 移除图表类
+  static deleteCharts(uuid) {
+    delete this.currentChartsInstance[uuid];
+  }
+
+  // 初始化主题
+  static init(theme) {
+    this.globalName = theme;
+  }
+
+  // 设置主题
+  static set(theme) {
+    this.globalName = theme;
+    this.preChartsInstance = this.currentChartsInstance;
+    this.currentChartsInstance = {};
+    for (const key in this.preChartsInstance) {
+      const item = this.preChartsInstance[key];
+      if (item.iChartOption) {
+        Token.setDefaultTheme(theme);
+        item.refresh?.(item.initIChartOption);
+      }
+    }
+  }
+
+  static getColors() {
+    return Token.getColors()
+  }
+}

package/src/components/charts/util/Sequence.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+/**
+ * ID累加
+ */
+export default class Sequence {
+	 static Id = 0
+
+	static nextId() {
+		return Sequence.Id++
+	}
+}

package/src/components/charts/util/centerDom.js

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { isString, isArray, isDOM } from './type';
+import { appendHTML, appendDom } from './dom';
+
+const percentToDecimal = (percent) => {
+  return parseFloat(percent) / 100;
+}
+
+const setSize = (dom, radius, width) => {
+  dom.style.width = width * radius + 'px';
+  dom.style.height = width * radius + 'px';
+}
+
+const getCenterDomRadius = (option) => {
+  let radius = option.position?.radius || '50%';
+  if (isArray(radius)) {
+    radius = percentToDecimal(radius[0])
+  } else {
+    radius = percentToDecimal(radius) * 0.5;
+  }
+  return radius;
+}
+
+const createCenterDomContainer = (containerWidth, radius) => {
+  let centerDomContainer = document.createElement('div');
+  centerDomContainer.classList.add('hui_center_dom_container')
+  centerDomContainer.style.cssText = `
+        top: 50%;
+        left: 50%;
+        display: flex;
+        color: #191919;
+        position: absolute;
+        border-radius: 50%;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        transform: translate(-50%, -50%);
+        background: rgb(255, 255, 255);
+        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1)`;
+  // 动态计算大小
+  setSize(centerDomContainer, radius, containerWidth);
+  return centerDomContainer;
+}
+
+export function insertCenterDom(container, option) {
+  if (!option.centerDom) return;
+  // 用户传入的中心dom渲染回调
+  const { centerDom } = option;
+  let containerWidth = Math.min(container.clientWidth, container.clientHeight);
+  let position = getComputedStyle(container).position;
+  if (position === 'static') {
+    container.style.position = 'relative';
+  }
+  // 计算出中心圆宽度
+  let radius = getCenterDomRadius(option);
+  // 生成中心dom的容器
+  let centerDomContainer = createCenterDomContainer(containerWidth, radius)
+  // 生成中心自定义dom
+  let customDom = centerDom(centerDomContainer);
+  isString(customDom) && appendHTML(centerDomContainer, customDom);
+  isDOM(customDom) && appendDom(centerDomContainer, customDom);
+  appendDom(container, centerDomContainer);
+}
+
+export function removeCenterDom(container) {
+  let centerDomContainer = container.getElementsByClassName('hui_center_dom_container');
+  Array.prototype.slice.call(centerDomContainer).forEach(element => {
+    element.remove();
+  });
+}
+
+export function resizeCenterDom(container, option) {
+  let centerDomContainer = container?.getElementsByClassName('hui_center_dom_container');
+  let containerWidth = Math.min(container?.clientWidth, container?.clientHeight);
+  let radius = getCenterDomRadius(option);
+  if(centerDomContainer){
+    Array.prototype.slice.call(centerDomContainer).forEach(element => {
+      setSize(element, radius, containerWidth);
+    });
+  }
+}
+

package/src/components/charts/util/cloneDeep.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// 深拷贝
+function cloneDeep(obj) {
+  // 判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
+  const objClone = Array.isArray(obj) ? [] : {};
+  // 进行深拷贝的不能为空，并且是对象或者是数组
+  if (obj && typeof obj === 'object') {
+    for (const key in obj) {
+      if (obj[key] && typeof obj[key] === 'object') {
+        objClone[key] = cloneDeep(obj[key]);
+      } else {
+        objClone[key] = obj[key];
+      }
+    }
+  }
+  return objClone;
+}
+
+export default cloneDeep;

package/src/components/charts/util/color.js

@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+/**
+ * 循环取出颜色
+ */
+function getColor(colors, index) {
+  return colors[index % colors.length];
+}
+
+/**
+ * 十六进制转rgba, 如codeToRGB("#6d8ff0",0.5) --> 'rgba(109,143,240,0.5)'
+ */
+function codeToRGB(code, opacity) {
+  if (code === undefined) {
+    return undefined;
+  }
+  const result = [];
+  result.push(parseInt(code.substring(1, 3), 16));
+  result.push(parseInt(code.substring(3, 5), 16));
+  result.push(parseInt(code.substring(5), 16));
+  return `rgba(${result.join(',')},${opacity})`;
+}
+
+/**
+ * rgba转十六进制 codeToHex('rgba(255,0,0,.5)') --> '#fffcfc'
+ * 将red、blue等转换为十六进制
+ */
+function codeToHex(color) {
+  switch (color) {
+    case 'red':
+      return '#ff0000';
+    case 'blue':
+      return '#0000ff';
+    case 'green':
+      return '#00ff00';
+    case 'pink':
+      return '#FFC0CB';
+    case 'yellow':
+      return '#FFFF00';
+    case 'orange':
+      return '#FFA500';
+    case 'black':
+      return '#000000';
+    case 'white':
+      return '#ffffff';
+    case 'gray':
+      return '#808080';
+    case 'purple':
+      return '#800080';
+  }
+  if (color.includes('#')) {
+    if (color.length === 7) {
+      return color;
+    } else if (color.length === 4) {
+      return color[0] + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    }
+  }
+  const values = color
+    .replace(/rgba?\(/, '')
+    .replace(/\)/, '')
+    .replace(/[\s+]/g, '')
+    .split(',');
+  const a = parseFloat(values[3] || 1);
+  const r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255);
+  const g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255);
+  const b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
+  return `#${(`0${r.toString(16)}`).slice(-2)}${(`0${g.toString(16)}`).slice(-2)}${(`0${b.toString(16)}`).slice(-2)}`;
+}
+
+
+/**
+ * 修改 'rgba(109,143,240,0.5)' 格式下的颜色透明度
+ */
+function changeRgbaOpacity(rgba, opacity) {
+  const [r, g, b] = rgba.match(/\d+(\.\d+)?/g);
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+
+
+/**
+ * 生成过渡色的方法(c1,c2必须为十六进制颜色 c1为初始颜色，c2为末尾颜色，n表示过渡色数量，返回值为 length === n+2 的数组
+ * 如：colorsBetween('#ff0000', '#ffffff', 10) 可转换为以下数组形式
+ * ['#ff0000','#ff1717','#ff2e2e','#ff4646','#ff5d5d','#ff7474','#ff8b8b','#ffa2a2','#ffb9b9','#ffd1d1','#ffe8e8','#ffffff']
+ */
+function colorsBetween(c1, c2, n) {
+
+  class Color {
+    constructor(r, g, b) {
+      this.r = Math.abs(r);
+      this.g = Math.abs(g);
+      this.b = Math.abs(b);
+      if (typeof r === 'string') {
+        const v = this.fromHex(r);
+        this.r = v[0];
+        this.g = v[1];
+        this.b = v[2];
+      }
+    }
+
+    fromHex(str) {
+      return str
+        .substr(1)
+        .match(/.{1,2}/g)
+        .map(function (n) {
+          return parseInt(n, 16);
+        });
+    }
+
+    diff(c) {
+      return new Color(this.r - c.r, this.g - c.g, this.b - c.b);
+    }
+
+    dividedBy(n) {
+      return new Color(this.r / n, this.g / n, this.b / n);
+    }
+
+    approach(c, c2) {
+      return new Color(
+        this.r > c.r ? this.r - c2.r : this.r + c2.r,
+        this.g > c.g ? this.g - c2.g : this.g + c2.g,
+        this.b > c.b ? this.b - c2.b : this.b + c2.b,
+      );
+    }
+
+    pad(n) {
+      const str = `${n}`;
+      const pad = '00';
+      return pad.substring(0, pad.length - str.length) + str;
+    }
+
+    toHex() {
+      const newR = Math.round(this.r).toString(16);
+      const newG = Math.round(this.g).toString(16);
+      const newB = Math.round(this.b).toString(16);
+      return `#${this.pad(newR)}${this.pad(newG)}${this.pad(newB)}`;
+    }
+  }
+  // 简写16进制变为全写
+  if (c1.length === 4) {
+    c1 = c1[0] + c1[1] + c1[1] + c1[2] + c1[2] + c1[3] + c1[3];
+  }
+  if (c2.length === 4) {
+    c2 = c2[0] + c2[1] + c2[1] + c2[2] + c2[2] + c2[3] + c2[3];
+  }
+  c1 = new Color(c1);
+  c2 = new Color(c2);
+  const diff = c1.diff(c2).dividedBy(n + 1);
+  const out = [c1];
+  for (let i = 0; i < n; i++) {
+    out.push(out[i].approach(c2, diff));
+  }
+  out.push(c2);
+  return out.map(function (c) {
+    return c.toHex();
+  });
+}
+
+/**
+ * 
+ * 将color转换6位16进制格式
+ */
+function transColor(colorStr) {
+  // 使用正则表达式提取颜色代码中的每个字符
+  const regex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const matches = colorStr.match(regex);
+
+  // 如果匹配到了 3 个字符，则将其每个字符重复一遍
+  if (matches) {
+      return `#${matches[1]}${matches[1]}${matches[2]}${matches[2]}${matches[3]}${matches[3]}`;
+  }
+
+  // 如果颜色代码格式不正确，则直接返回原来的代码
+  return colorStr;
+}
+
+
+export {
+  getColor,
+  codeToRGB,
+  codeToHex,
+  colorsBetween,
+  changeRgbaOpacity,
+  transColor
+};

package/src/components/charts/util/constants.js

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// 当前支持主题
+const THEMES = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  BPIT_LIGHT: 'bpit-light',
+  BPIT_DARK: 'bpit-dark',
+  CLOUD_DARK: 'cloud-dark',
+  CLOUD_LIGHT: 'cloud-light',
+  HDESIGN_LIGHT: 'hdesign-light',
+  HDESIGN_DARK: 'hdesign-dark',
+};
+
+// 该值表示当前主题键名，内部使用，防止外部更改
+const CURRENT_THEME = Symbol('current_theme');
+
+// 使用token的图表名称,用于对token的merge
+const TOKENCHARTNAMES = [
+  'AssembleBubbleChart',
+  'BarChart',
+  'BoxplotChart',
+  'BubbleChart',
+  'CandlestickChart',
+  'CircleProcessChart',
+  'FunnelChart',
+  'GaugeChart',
+  'HeatMapChart',
+  'HillChart',
+  'JadeJueChart',
+  'LineChart',
+  'AreaChart',
+  'LiquidfillChart',
+  'PieChart',
+  'PolarBarChart',
+  'ProcessChart',
+  'RadarChart',
+  'RegionChart',
+  'SankeyChart',
+  'SunburstChart',
+  'TreeChart',
+  'WaveChart',
+  'WordCloudChart',
+  'TimelineChart',
+  'MindmapChart',
+  'ChartCard',
+  'BulletChart',
+  'ForceDirectedChart',
+  'GridChart',
+  'CircleChart',
+  'LinearArcChart',
+  'CircleArcChart',
+  'CustomizeChart'
+];
+
+// 默认主题
+const DEFAULT_THEME_NAME = THEMES.LIGHT;
+
+const THEME_ERROR_TIP_MESSAGE = `Theme must be one of ${Object.values(THEMES).join(
+  ',',
+)} or the theme name registered for calling HuiCharts.registerTheme()`;
+
+// 所有的图表的名称 
+const CHART_TYPE = {
+  ASSEMBLE_BUBBLE: 'AssembleBubbleChart',
+  AUTONAVI_MAP: 'AutonaviMapChart',
+  BAIDU_MAP: 'BaiduMapChart',
+  BAR: 'BarChart',
+  BOXPLOT: 'BoxplotChart',
+  BUBBLE: 'BubbleChart',
+  BULLET: 'BulletChart',
+  CANDLESTICK: 'CandlestickChart',
+  CIRCLE_PROCESS: 'CircleProcessChart',
+  FLOW: 'FlowChart',
+  FUNNEL: 'FunnelChart',
+  GANTT: 'GanttChart',
+  GAUGE: 'GaugeChart',
+  GRAPH_TREE: 'GraphTreeChart',
+  HEAT_MAP: 'HeatMapChart',
+  HILL: 'HillChart',
+  HONEYCOMB: 'HoneycombChart',
+  JADGEJUE: 'JadeJueChart',
+  LINE: 'LineChart',
+  AREA: 'AreaChart',
+  LIQUID_FILL: 'LiquidfillChart',
+  MILESTONE: 'MilestoneChart',
+  ORGANIZATION: 'OrganizationChart',
+  PIE: 'PieChart',
+  POLAR_BAR: 'PolarBarChart',
+  PROCESS: 'ProcessChart',
+  RADAR: 'RadarChart',
+  REGION: 'RegionChart',
+  RIVER: 'RiverChart',
+  SANKEY: 'SankeyChart',
+  SCATTER: 'ScatterChart',
+  SNOWFLAKE: 'SnowFlakeChart',
+  SUNBURST: 'SunburstChart',
+  TERRACE: 'TerraceChart',
+  TIME_LINE: 'TimelineChart',
+  TREE: 'TreeChart',
+  TREE_MAP: 'TreeMapChart',
+  WAVE: 'WaveChart',
+  WORD_CLOUD: 'WordCloudChart',
+  CHART_CARD: 'ChartCard',
+  MINDMAP: 'MindmapChart',
+  FORCE_DIRECTED: 'ForceDirectedChart',
+  GRID: 'GridChart',
+  CIRCLE: 'CircleChart',
+  LINEARARC: 'LinearArcChart',
+  CIRCLEARC: 'CircleArcChart',
+  CUSTOMIZE: 'CustomizeChart'
+}
+
+const ADAPTIVE_THEME = ['hdesign-light', 'hdesign-dark'];
+
+export { THEMES, CURRENT_THEME, DEFAULT_THEME_NAME, THEME_ERROR_TIP_MESSAGE, TOKENCHARTNAMES, CHART_TYPE, ADAPTIVE_THEME };

package/src/components/charts/util/convert.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+const pxToNumber = pxText => {
+  return pxText.split('px')[0] - 0;
+};
+
+// 日期格式化
+const formatDate = (date, fmt) => {
+  const padZero = (value) => (value < 10 ? `0${value}` : value);
+  const year = date.getFullYear();
+  const month = padZero(date.getMonth() + 1);
+  const day = padZero(date.getDate());
+  const hour = padZero(date.getHours());
+  const minute = padZero(date.getMinutes());
+  const second = padZero(date.getSeconds());
+  const millisecond = padZero(date.getMilliseconds());
+  return fmt.replace(/y+/, year)
+    .replace(/M+/, month)
+    .replace(/d+/, day)
+    .replace(/h+/, hour)
+    .replace(/m+/, minute)
+    .replace(/s+/, second)
+    .replace(/S/, millisecond);
+};
+
+//SVG转base64
+function svgTransform(svgData) {
+  const svgBlob = new Blob([svgData], { type: 'image/svg+xml' });
+  const svgUrl = URL.createObjectURL(svgBlob);
+  return svgUrl
+}
+// 百分比转换为小数
+const percentToDecimal = (percentStr) => {
+    // 移除百分号
+    let numberStr = percentStr.replace(/%/, '');
+    // 转换为小数
+    let decimal = Number(numberStr) / 100;
+    return decimal;
+}
+export {pxToNumber, formatDate , svgTransform, percentToDecimal };

package/src/components/charts/util/debounce.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+function debounce(func, delay = 300) {
+    let timer = null;
+    return function (...args) {
+        let context = this;
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+            timer = null;
+            func.apply(context, args);
+        }, delay);
+    };
+}
+
+export default debounce;

package/src/components/charts/util/defendXSS.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+/**
+ *  转义字符 防止xss攻击
+ */
+const matchHtmlRegExp = /["'&<>/]/;
+function escapeHtml(string) {
+  const str = `${string}`;
+  const match = matchHtmlRegExp.exec(str);
+  if (!match) {
+    return str;
+  }
+  let escape;
+  let html = '';
+  let index;
+  let lastIndex = 0;
+
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = '&quot;';
+        break;
+      case 38: // &
+        escape = '&amp;';
+        break;
+      case 39: // '
+        escape = '&#x27;'; // modified from escape-html; used to be '&#39'
+        break;
+      case 60: // <
+        escape = '&lt;';
+        break;
+      case 62: // >
+        escape = '&gt;';
+        break;
+      case 47:// /
+        escape = '&#x2F;';
+        break;
+      default:
+        continue;
+    }
+
+    if (lastIndex !== index) {
+      html += str.substring(lastIndex, index);
+    }
+
+    lastIndex = index + 1;
+    html += escape;
+  }
+
+  return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
+}
+
+
+const defendXSS = obj => {
+  if (typeof obj === 'string') {
+    return escapeHtml(obj);
+  } else if (typeof obj === 'number') {
+    return obj;
+  } else if (typeof obj === 'object') {
+    for (const key in obj) {
+      if (Object.hasOwnProperty.call(obj, key)) {
+        obj[key] = defendXSS(obj[key]);
+      }
+    }
+    return obj;
+  } else {
+    return obj;
+  }
+};
+
+export default defendXSS;
+export { escapeHtml };