strategy-panel 1.0.0

package/es/pages/strategy-header/index.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import '@/style/position.less';
+import './style.less';
+export interface HeaderProps {
+    /**
+     * @description       id
+     * @description.zh-CN 唯一识别id
+     * @default           1
+     */
+    experimentId: string;
+    /**
+     * @description       strategy name
+     * @description.zh-CN 策略名称
+     */
+    name?: string;
+    /**
+     * @description       available
+     * @description.zh-CN 策略是否启用
+     * @default           false
+     */
+    isActive?: boolean;
+    /**
+     * @description       Switch available state
+     * @description.zh-CN 切换测试启用状态函数
+     */
+    onActiveSwitch?: (isActive: boolean) => void;
+    /**
+     * 可以这样写属性描述
+     * @description       Trigger after cancel edit
+     * @description.zh-CN 取消编辑后后回调事件
+     */
+    onNameChange?: (name?: string) => void;
+    /**
+     * 可以这样写属性描述
+     * @description       Trigger after cancel edit
+     * @description.zh-CN 取消编辑后后回调事件
+     */
+    onCancel?: () => void;
+    /**
+     * @description       Trigger after submitting
+     * @description.zh-CN 编辑完成后后回调事件
+     */
+    onSave?: (type: 'application' | 'data', expGraph?: any) => void;
+    /**
+     * 可以这样写属性描述
+     * @description       Trigger after cancel edit
+     * @description.zh-CN 取消编辑后后回调事件
+     */
+    extraHeaderData?: {
+        name: string;
+        imgUrl: string;
+        onClick?: () => void;
+    }[];
+}
+declare const Index: React.FC<HeaderProps>;
+export default Index;

package/es/pages/strategy-header/index.js

@@ -0,0 +1,141 @@
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import { useExperimentGraph } from "../rx-models/experiment-graph"; // import ThemeSwitch from './theme-switch';
+
+import "../../style/position.less";
+import "./style.less";
+
+var Index = function Index(props) {
+  var name = props.name,
+      _props$isActive = props.isActive,
+      isActive = _props$isActive === void 0 ? false : _props$isActive,
+      onActiveSwitch = props.onActiveSwitch,
+      onCancel = props.onCancel,
+      onSave = props.onSave,
+      experimentId = props.experimentId,
+      onNameChange = props.onNameChange,
+      extraHeaderData = props.extraHeaderData;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      bordered = _useState2[0],
+      setBordered = _useState2[1];
+
+  var expGraph = useExperimentGraph(experimentId);
+
+  var handleSave = function handleSave(type) {
+    var _expGraph$graph, _expGraph$graph2;
+
+    console.log('expGraphData', expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph = expGraph.graph) === null || _expGraph$graph === void 0 ? void 0 : _expGraph$graph.toJSON()); // console.log('getNodes', expGraph?.graph?.getNodes());
+
+    onSave === null || onSave === void 0 ? void 0 : onSave(type, expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph2 = expGraph.graph) === null || _expGraph$graph2 === void 0 ? void 0 : _expGraph$graph2.toJSON());
+  };
+
+  var handleFocus = function handleFocus() {
+    setBordered(true);
+  };
+
+  var handleEditName = function handleEditName(strategyName) {
+    onNameChange === null || onNameChange === void 0 ? void 0 : onNameChange(strategyName);
+  };
+
+  var handleBlur = function handleBlur(e) {
+    handleEditName(e.target.value);
+    setBordered(false);
+  };
+
+  var handlePressEnter = function handlePressEnter(e) {
+    e.target.blur();
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "strategyHeader"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pos-btw"
+  }, /*#__PURE__*/React.createElement(_Input, {
+    defaultValue: name,
+    placeholder: "\u7B56\u7565\u540D\u79F0",
+    style: {
+      width: 265
+    },
+    bordered: bordered,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPressEnter: handlePressEnter
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pos-end"
+  }, extraHeaderData === null || extraHeaderData === void 0 ? void 0 : extraHeaderData.map(function (item, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement("span", {
+        key: index,
+        onClick: item === null || item === void 0 ? void 0 : item.onClick,
+        className: "header-btn"
+      }, /*#__PURE__*/React.createElement("img", {
+        alt: "",
+        className: "header-btn-img",
+        src: item.imgUrl
+      }), item.name)
+    );
+  }), /*#__PURE__*/React.createElement("span", {
+    onClick: function onClick() {
+      handleSave('application');
+    },
+    className: "header-btn"
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: "header-btn-img",
+    src: require("../../assets/save.svg")
+  }), "\u4FDD\u5B58\u4E3A\u5E94\u7528"), /*#__PURE__*/React.createElement("span", {
+    className: "header-btn",
+    onClick: onCancel
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: "header-btn-img",
+    src: require("../../assets/cancel.svg")
+  }), "\u53D6\u6D88"), /*#__PURE__*/React.createElement("span", {
+    className: "header-btn",
+    onClick: function onClick() {
+      handleSave('data');
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: "header-btn-img",
+    src: require("../../assets/save.svg")
+  }), "\u4FDD\u5B58"), isActive ? /*#__PURE__*/React.createElement("span", {
+    className: "header-btn",
+    onClick: function onClick() {
+      onActiveSwitch === null || onActiveSwitch === void 0 ? void 0 : onActiveSwitch(false);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: "header-btn-img",
+    src: require("../../assets/cancel.svg")
+  }), "\u505C\u7528") : /*#__PURE__*/React.createElement("span", {
+    className: "header-btn",
+    onClick: function onClick() {
+      onActiveSwitch === null || onActiveSwitch === void 0 ? void 0 : onActiveSwitch(true);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: "header-btn-img",
+    src: require("../../assets/check.svg")
+  }), "\u542F\u7528"))));
+};
+
+export default Index;

package/es/pages/strategy-header/style.less

@@ -0,0 +1,22 @@
+@import (reference) '../../style/theme-light';
+
+.header-btn {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+  font-size: 12px;
+  cursor: pointer;
+  .header-btn-img {
+    width: 13px;
+    height: 13px;
+    margin-right: 5px;
+  }
+}
+
+.strategyHeader {
+  height: 45px !important;
+  line-height: 45px !important;
+  padding: 0 15px;
+  background: @light-gray-bg;
+  box-shadow: 0 2px 30px 0 rgba(137, 137, 137, 0.3);
+}

package/es/pages/strategy-header/theme-switch/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './style.less';
+declare const Index: React.FC;
+export default Index;

package/es/pages/strategy-header/theme-switch/index.js

@@ -0,0 +1,19 @@
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+import React from 'react';
+import "./style.less";
+
+var Index = function Index() {
+  var handleThemeChange = function handleThemeChange(checked) {
+    console.log('checked', checked);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "theme-switch"
+  }, /*#__PURE__*/React.createElement(_Switch, {
+    defaultChecked: false,
+    onChange: handleThemeChange
+  }));
+};
+
+export default Index;

package/es/pages/strategy-header/theme-switch/style.less

@@ -0,0 +1,11 @@
+.theme-switch{
+  display: flex;
+  align-items: center;
+
+  .ant-switch-checked{
+    background-color: #979797;
+  }
+  .ant-switch-checked .ant-switch-handle::before{
+    background-color: #000000;
+  }
+}

package/es/style/basic.less

@@ -0,0 +1,12 @@
+.mr-5{
+  margin-right: 5px;
+}
+.mr-10{
+  margin-right: 10px;
+}
+.mr-15{
+  margin-right: 15px;
+}
+.mb-10{
+  margin-bottom: 10px;
+}

package/es/style/default.less

@@ -0,0 +1,2 @@
+@import "basic.less";
+@import "position.less";

package/es/style/position.less

@@ -0,0 +1,25 @@
+.pos-btw{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pos-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.pos-center{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pos-line-center{
+  display: flex;
+  align-items: center;
+}
+
+.flex-1{
+  flex: 1;
+}
+
+

package/es/style/theme-light.less

@@ -0,0 +1,7 @@
+@import "./variable.less";
+
+@light-gray-bg: #F1F2F3;
+@light-gray-text-color: #323232;
+
+
+@info-color: ~'var(--@light-gray-bg)';

package/es/style/variable.less

@@ -0,0 +1,3 @@
+html {
+
+}

package/es/typings.d.ts

@@ -0,0 +1,6 @@
+declare module '*.css';
+declare module '*.less';
+
+type Window = {
+  requestIdleCallback: (callback: () => void) => void;
+};

package/es/utils/utils.d.ts

@@ -0,0 +1 @@
+export { unescape } from 'lodash-es';

package/es/utils/utils.js

@@ -0,0 +1 @@
+export { unescape } from 'lodash-es';

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "strategy-panel",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "build": "father-build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.2.1",
+    "@antv/x6": "^1.28.1",
+    "@antv/x6-react-components": "^1.1.14",
+    "@antv/x6-react-shape": "^1.5.2",
+    "@types/lodash-es": "^4.17.5",
+    "@types/marked": "^3.0.2",
+    "@types/node": "^17.0.21",
+    "antd": "^4.4.2",
+    "classnames": "^2.2.6",
+    "dompurify": "^2.1.1",
+    "immer": "^9.0.12",
+    "marked": "^3.0.8",
+    "moment": "^2.29.1",
+    "react": "^16.13.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-dom": "^16.13.1",
+    "react-svg": "^14.1.12"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/jest": "^27.0.3",
+    "@umijs/fabric": "^2.8.1",
+    "@umijs/test": "^3.0.5",
+    "@umijs/yorkie": "^2.0.3",
+    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "dumi": "^1.1.0",
+    "eslint": "^7.1.0",
+    "eslint-plugin-react": "^7.28.0",
+    "father-build": "^1.17.2",
+    "gh-pages": "^3.0.0",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.1",
+    "yorkie": "^2.0.0",
+    "umi-lint": "^2.0.2"
+  },
+  "license" : "MIT"
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@tmp/*": ["src/pages/.umi/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}