@nocobase/plugin-workflow 0.10.0-alpha.5 → 0.11.0-alpha.1

package/lib/client/nodes/index.js

@@ -12,13 +12,6 @@ exports.instructions = void 0;
 exports.useAvailableUpstreams = useAvailableUpstreams;
 exports.useNodeContext = useNodeContext;
 exports.useUpstreamScopes = useUpstreamScopes;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function _react() {
-    return data;
-  };
-  return data;
-}
 function _icons() {
   const data = require("@ant-design/icons");
   _icons = function _icons() {
@@ -26,66 +19,66 @@ function _icons() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _react() {
+  const data = require("@formily/react");
+  _react = function _react() {
     return data;
   };
   return data;
 }
-function _react2() {
-  const data = require("@formily/react");
-  _react2 = function _react2() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
+function _client2() {
+  const data = require("@nocobase/utils/client");
+  _client2 = function _client2() {
     return data;
   };
   return data;
 }
-function _reactI18next() {
-  const data = require("react-i18next");
-  _reactI18next = function _reactI18next() {
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
     return data;
   };
   return data;
 }
-function _client() {
-  const data = require("@nocobase/utils/client");
-  _client = function _client() {
+function _react2() {
+  const data = _interopRequireWildcard(require("react"));
+  _react2 = function _react2() {
     return data;
   };
   return data;
 }
-function _client2() {
-  const data = require("@nocobase/client");
-  _client2 = function _client2() {
+function _reactI18next() {
+  const data = require("react-i18next");
+  _reactI18next = function _reactI18next() {
     return data;
   };
   return data;
 }
-var _style = require("../style");
 var _AddButton = require("../AddButton");
 var _FlowContext = require("../FlowContext");
+var _NodeDescription = require("../components/NodeDescription");
+var _constants = require("../constants");
+var _locale = require("../locale");
+var _style = require("../style");
+var _aggregate = _interopRequireDefault(require("./aggregate"));
 var _calculation = _interopRequireDefault(require("./calculation"));
 var _condition = _interopRequireDefault(require("./condition"));
-var _parallel = _interopRequireDefault(require("./parallel"));
-var _loop = _interopRequireDefault(require("./loop"));
+var _create = _interopRequireDefault(require("./create"));
 var _delay = _interopRequireDefault(require("./delay"));
+var _destroy = _interopRequireDefault(require("./destroy"));
+var _loop = _interopRequireDefault(require("./loop"));
 var _manual = _interopRequireDefault(require("./manual"));
+var _parallel = _interopRequireDefault(require("./parallel"));
 var _query = _interopRequireDefault(require("./query"));
-var _create = _interopRequireDefault(require("./create"));
-var _update = _interopRequireDefault(require("./update"));
-var _destroy = _interopRequireDefault(require("./destroy"));
-var _aggregate = _interopRequireDefault(require("./aggregate"));
-var _constants = require("../constants");
-var _locale = require("../locale");
 var _request = _interopRequireDefault(require("./request"));
-var _NodeDescription = require("../components/NodeDescription");
+var _update = _interopRequireDefault(require("./update"));
 const _excluded = ["job"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -105,7 +98,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-const instructions = new (_client().Registry)();
+const instructions = new (_client2().Registry)();
 exports.instructions = instructions;
 instructions.register('calculation', _calculation.default);
 instructions.register('condition', _condition.default);
@@ -120,10 +113,10 @@ instructions.register('destroy', _destroy.default);
 instructions.register('aggregate', _aggregate.default);
 instructions.register('request', _request.default);
 function useUpdateAction() {
-  const form = (0, _react2().useForm)();
-  const api = (0, _client2().useAPIClient)();
-  const ctx = (0, _client2().useActionContext)();
-  const _useResourceActionCon = (0, _client2().useResourceActionContext)(),
+  const form = (0, _react().useForm)();
+  const api = (0, _client().useAPIClient)();
+  const ctx = (0, _client().useActionContext)();
+  const _useResourceActionCon = (0, _client().useResourceActionContext)(),
     refresh = _useResourceActionCon.refresh;
   const data = useNodeContext();
   const _useFlowContext = (0, _FlowContext.useFlowContext)(),
@@ -149,10 +142,10 @@ function useUpdateAction() {
     }
   };
 }
-const NodeContext = _react().default.createContext({});
+const NodeContext = _react2().default.createContext({});
 exports.NodeContext = NodeContext;
 function useNodeContext() {
-  return (0, _react().useContext)(NodeContext);
+  return (0, _react2().useContext)(NodeContext);
 }
 function useAvailableUpstreams(node) {
   const stack = [];
@@ -183,16 +176,16 @@ function Node({
     _instructions$get$com = _instructions$get.component,
     Component = _instructions$get$com === void 0 ? NodeDefaultView : _instructions$get$com,
     endding = _instructions$get.endding;
-  return _react().default.createElement(NodeContext.Provider, {
+  return _react2().default.createElement(NodeContext.Provider, {
     value: data
-  }, _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeBlockClass)
-  }, _react().default.createElement(Component, {
+  }, _react2().default.createElement("div", {
+    className: (0, _client().cx)(_style.nodeBlockClass)
+  }, _react2().default.createElement(Component, {
     data: data
-  }), !endding ? _react().default.createElement(_AddButton.AddButton, {
+  }), !endding ? _react2().default.createElement(_AddButton.AddButton, {
     upstream: data
-  }) : _react().default.createElement("div", {
-    className: (0, _css().css)`
+  }) : _react2().default.createElement("div", {
+    className: (0, _client().css)`
               flex-grow: 1;
               display: flex;
               flex-direction: column;
@@ -201,20 +194,20 @@ function Node({
               width: 1px;
               height: 6em;
               padding: 2em 0;
-              background-color: #f0f2f5;
+              background-color: var(--nb-box-bg);
 
               .anticon {
                 font-size: 1.5em;
                 line-height: 100%;
               }
             `
-  }, _react().default.createElement(_icons().CloseOutlined, null))));
+  }, _react2().default.createElement(_icons().CloseOutlined, null))));
 }
 function RemoveButton() {
   var _useFlowContext2;
   const _useTranslation = (0, _reactI18next().useTranslation)(),
     t = _useTranslation.t;
-  const api = (0, _client2().useAPIClient)();
+  const api = (0, _client().useAPIClient)();
   const _ref = (_useFlowContext2 = (0, _FlowContext.useFlowContext)()) !== null && _useFlowContext2 !== void 0 ? _useFlowContext2 : {},
     workflow = _ref.workflow,
     nodes = _ref.nodes,
@@ -246,7 +239,7 @@ function RemoveButton() {
         if (node === current) {
           return false;
         }
-        const template = (0, _client().parse)(node.config);
+        const template = (0, _client2().parse)(node.config);
         const refs = template.parameters.filter(({
           key
         }) => key.startsWith(`$jobsMapByNodeId.${current.id}.`) || key === `$jobsMapByNodeId.${current.id}`);
@@ -271,10 +264,10 @@ function RemoveButton() {
     });
     return _onRemove.apply(this, arguments);
   }
-  return workflow.executed ? null : _react().default.createElement(_antd().Button, {
+  return workflow.executed ? null : _react2().default.createElement(_antd().Button, {
     type: "text",
     shape: "circle",
-    icon: _react().default.createElement(_icons().DeleteOutlined, null),
+    icon: _react2().default.createElement(_icons().DeleteOutlined, null),
     onClick: onRemove,
     className: "workflow-node-remove-button"
   });
@@ -285,10 +278,10 @@ function InnerJobButton(_ref2) {
   const _JobStatusOptionsMap$ = _constants.JobStatusOptionsMap[job.status],
     icon = _JobStatusOptionsMap$.icon,
     color = _JobStatusOptionsMap$.color;
-  return _react().default.createElement(_antd().Button, _objectSpread(_objectSpread({}, props), {}, {
+  return _react2().default.createElement(_antd().Button, _objectSpread(_objectSpread({}, props), {}, {
     shape: "circle",
-    className: (0, _css().cx)(_style.nodeJobButtonClass, props.className)
-  }), _react().default.createElement(_antd().Tag, {
+    className: (0, _client().cx)(_style.nodeJobButtonClass, props.className)
+  }), _react2().default.createElement(_antd().Tag, {
     color: color
   }, icon));
 }
@@ -303,8 +296,8 @@ function JobButton() {
     return null;
   }
   if (!jobs.length) {
-    return _react().default.createElement("span", {
-      className: (0, _css().cx)(_style.nodeJobButtonClass, (0, _css().css)`
+    return _react2().default.createElement("span", {
+      className: (0, _client().cx)(_style.nodeJobButtonClass, (0, _client().css)`
             border: 2px solid #d9d9d9;
             border-radius: 50%;
             cursor: not-allowed;
@@ -317,7 +310,7 @@ function JobButton() {
     const job = jobs.find(item => item.id == key);
     setViewJob(job);
   }
-  return jobs.length > 1 ? _react().default.createElement(_antd().Dropdown, {
+  return jobs.length > 1 ? _react2().default.createElement(_antd().Dropdown, {
     menu: {
       items: jobs.map(job => {
         const _JobStatusOptionsMap$2 = _constants.JobStatusOptionsMap[job.status],
@@ -325,8 +318,8 @@ function JobButton() {
           color = _JobStatusOptionsMap$2.color;
         return {
           key: job.id,
-          label: _react().default.createElement("div", {
-            className: (0, _css().css)`
+          label: _react2().default.createElement("div", {
+            className: (0, _client().css)`
                   display: flex;
                   gap: 0.5em;
 
@@ -335,18 +328,18 @@ function JobButton() {
                     font-size: 0.8em;
                   }
                 `
-          }, _react().default.createElement("span", {
-            className: (0, _css().cx)(_style.nodeJobButtonClass, 'inner')
-          }, _react().default.createElement(_antd().Tag, {
+          }, _react2().default.createElement("span", {
+            className: (0, _client().cx)(_style.nodeJobButtonClass, 'inner')
+          }, _react2().default.createElement(_antd().Tag, {
             color: color
-          }, icon)), _react().default.createElement("time", null, (0, _client().str2moment)(job.updatedAt).format('YYYY-MM-DD HH:mm:ss')))
+          }, icon)), _react2().default.createElement("time", null, (0, _client2().str2moment)(job.updatedAt).format('YYYY-MM-DD HH:mm:ss')))
         };
       }),
       onClick: onOpenJob
     }
-  }, _react().default.createElement(InnerJobButton, {
+  }, _react2().default.createElement(InnerJobButton, {
     job: jobs[jobs.length - 1]
-  })) : _react().default.createElement(InnerJobButton, {
+  })) : _react2().default.createElement(InnerJobButton, {
     job: jobs[0],
     onClick: () => setViewJob(jobs[0])
   });
@@ -355,19 +348,19 @@ function NodeDefaultView(props) {
   var _useFlowContext4, _data$title;
   const data = props.data,
     children = props.children;
-  const compile = (0, _client2().useCompile)();
-  const api = (0, _client2().useAPIClient)();
+  const compile = (0, _client().useCompile)();
+  const api = (0, _client().useAPIClient)();
   const _ref4 = (_useFlowContext4 = (0, _FlowContext.useFlowContext)()) !== null && _useFlowContext4 !== void 0 ? _useFlowContext4 : {},
     workflow = _ref4.workflow,
     refresh = _ref4.refresh;
   const instruction = instructions.get(data.type);
   const detailText = workflow.executed ? '{{t("View")}}' : '{{t("Configure")}}';
   const typeTitle = compile(instruction.title);
-  const _useState = (0, _react().useState)((_data$title = data.title) !== null && _data$title !== void 0 ? _data$title : typeTitle),
+  const _useState = (0, _react2().useState)((_data$title = data.title) !== null && _data$title !== void 0 ? _data$title : typeTitle),
     _useState2 = _slicedToArray(_useState, 2),
     editingTitle = _useState2[0],
     setEditingTitle = _useState2[1];
-  const _useState3 = (0, _react().useState)(false),
+  const _useState3 = (0, _react2().useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     editingConfig = _useState4[0],
     setEditingConfig = _useState4[1];
@@ -406,29 +399,29 @@ function NodeDefaultView(props) {
       }
     }
   }
-  return _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeClass, `workflow-node-type-${data.type}`)
-  }, _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeCardClass, {
+  return _react2().default.createElement("div", {
+    className: (0, _client().cx)(_style.nodeClass, `workflow-node-type-${data.type}`)
+  }, _react2().default.createElement("div", {
+    className: (0, _client().cx)(_style.nodeCardClass, {
       configuring: editingConfig
     }),
     onClick: onOpenDrawer
-  }, _react().default.createElement("div", {
-    className: (0, _css().cx)(_style.nodeMetaClass, 'workflow-node-meta')
-  }, _react().default.createElement(_antd().Tag, null, typeTitle), _react().default.createElement("span", {
+  }, _react2().default.createElement("div", {
+    className: (0, _client().cx)(_style.nodeMetaClass, 'workflow-node-meta')
+  }, _react2().default.createElement(_antd().Tag, null, typeTitle), _react2().default.createElement("span", {
     className: "workflow-node-id"
-  }, data.id)), _react().default.createElement("div", null, _react().default.createElement(_antd().Input.TextArea, {
+  }, data.id)), _react2().default.createElement("div", null, _react2().default.createElement(_antd().Input.TextArea, {
     disabled: workflow.executed,
     value: editingTitle,
     onChange: ev => setEditingTitle(ev.target.value),
     onBlur: ev => onChangeTitle(ev.target.value),
     autoSize: true
-  })), _react().default.createElement(RemoveButton, null), _react().default.createElement(JobButton, null), _react().default.createElement(_client2().ActionContextProvider, {
+  })), _react2().default.createElement(RemoveButton, null), _react2().default.createElement(JobButton, null), _react2().default.createElement(_client().ActionContextProvider, {
     value: {
       visible: editingConfig,
       setVisible: setEditingConfig
     }
-  }, _react().default.createElement(_client2().SchemaComponent, {
+  }, _react2().default.createElement(_client().SchemaComponent, {
     scope: instruction.scope,
     components: instruction.components,
     schema: {
@@ -455,7 +448,7 @@ function NodeDefaultView(props) {
             useValues(options) {
               const _useNodeContext2 = useNodeContext(),
                 config = _useNodeContext2.config;
-              return (0, _client2().useRequest)(() => {
+              return (0, _client().useRequest)(() => {
                 return Promise.resolve({
                   data: config
                 });
@@ -470,7 +463,7 @@ function NodeDefaultView(props) {
                 type: 'warning',
                 showIcon: true,
                 message: `{{t("Node in executed workflow cannot be modified", { ns: "${_locale.NAMESPACE}" })}}`,
-                className: (0, _css().css)`
+                className: (0, _client().css)`
                                 width: 100%;
                                 font-size: 85%;
                                 margin-bottom: 2em;
@@ -490,7 +483,7 @@ function NodeDefaultView(props) {
               type: 'void',
               'x-component': 'fieldset',
               'x-component-props': {
-                className: (0, _css().css)`
+                className: (0, _client().css)`
                           .ant-select,
                           .ant-cascader-picker,
                           .ant-picker,

package/lib/client/nodes/loop.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useWorkflowVariableOptions, VariableOption } from '../variable';
+import { VariableOption, useWorkflowVariableOptions } from '../variable';
 declare const _default: {
     title: string;
     type: string;
@@ -14,7 +14,9 @@ declare const _default: {
             'x-component': string;
             'x-component-props': {
                 scope: string;
+                changeOnSelect: boolean;
                 useTypedConstant: string[];
+                className: string;
             };
             required: boolean;
         };

package/lib/client/nodes/loop.js

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function _react() {
-    return data;
-  };
-  return data;
-}
 function _icons() {
   const data = require("@ant-design/icons");
   _icons = function _icons() {
@@ -18,40 +11,47 @@ function _icons() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _client() {
-  const data = require("@nocobase/client");
-  _client = function _client() {
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
     return data;
   };
   return data;
 }
 var _ = require(".");
+var _Branch = require("../Branch");
 var _FlowContext = require("../FlowContext");
 var _locale = require("../locale");
-var _variable = require("../variable");
 var _style = require("../style");
-var _Branch = require("../Branch");
+var _variable = require("../variable");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function findOption(options, paths) {
-  let current = options;
+  let opts = options;
+  let option = null;
   for (let i = 0; i < paths.length; i++) {
     const path = paths[i];
-    const option = current.find(item => item.value === path);
-    if (!option) {
-      return null;
+    const current = opts.find(item => item.value === path);
+    if (!current) {
+      break;
     }
-    if (option.children) {
-      current = option.children;
+    option = current;
+    if (current.children) {
+      opts = current.children;
     }
   }
-  return current;
+  return option;
 }
 var _default = {
   title: `{{t("Loop", { ns: "${_locale.NAMESPACE}" })}}`,
@@ -66,8 +66,20 @@ var _default = {
       'x-decorator': 'FormItem',
       'x-component': 'Variable.Input',
       'x-component-props': {
-        scope: '{{useWorkflowVariableOptions}}',
-        useTypedConstant: ['string', 'number', 'null']
+        scope: '{{useWorkflowVariableOptions()}}',
+        changeOnSelect: true,
+        useTypedConstant: ['string', 'number', 'null'],
+        className: (0, _client().css)`
+          width: 100%;
+
+          .variable {
+            flex: 1;
+          }
+
+          .ant-input.null-value {
+            width: 100%;
+          }
+        `
       },
       required: true
     }
@@ -83,9 +95,9 @@ var _default = {
     return _react().default.createElement(_.NodeDefaultView, {
       data: data
     }, _react().default.createElement("div", {
-      className: (0, _css().cx)(_style.nodeSubtreeClass)
+      className: (0, _client().cx)(_style.nodeSubtreeClass)
     }, _react().default.createElement("div", {
-      className: (0, _css().cx)(_style.branchBlockClass, (0, _css().css)`
+      className: (0, _client().cx)(_style.branchBlockClass, (0, _client().css)`
                 padding-left: 20em;
               `)
     }, _react().default.createElement(_Branch.Branch, {
@@ -93,11 +105,11 @@ var _default = {
       entry: entry,
       branchIndex: (_entry$branchIndex = entry === null || entry === void 0 ? void 0 : entry.branchIndex) !== null && _entry$branchIndex !== void 0 ? _entry$branchIndex : 0
     }), _react().default.createElement("div", {
-      className: (0, _css().cx)(_style.branchClass)
+      className: (0, _client().cx)(_style.branchClass)
     }, _react().default.createElement("div", {
       className: "workflow-branch-lines"
     }), _react().default.createElement("div", {
-      className: (0, _css().cx)(_style.addButtonClass, (0, _css().css)`
+      className: (0, _client().cx)(_style.addButtonClass, (0, _client().css)`
                     display: flex;
                     justify-content: center;
                     align-items: center;
@@ -108,11 +120,11 @@ var _default = {
                     height: 6em;
                   `)
     }, _react().default.createElement(_icons().ArrowUpOutlined, {
-      className: (0, _css().css)`
-                    background-color: #f0f2f5;
+      className: (0, _client().css)`
+                    background-color: var(--nb-box-bg);
                   `
     })))), _react().default.createElement("div", {
-      className: (0, _css().css)`
+      className: (0, _client().css)`
               position: relative;
               height: 2em;
             `
@@ -134,7 +146,7 @@ var _default = {
     // find target data model by path described in `config.target`
     // 1. get options from $context/$jobsMapByNodeId
     // 2. route to sub-options and use as loop target options
-    const targetOption = {
+    let targetOption = {
       key: 'item',
       value: 'item',
       label: (0, _locale.lang)('Loop target')
@@ -142,16 +154,17 @@ var _default = {
     if (typeof target === 'string' && target.startsWith('{{') && target.endsWith('}}')) {
       const paths = target.slice(2, -2).split('.').map(path => path.trim());
       const targetOptions = [_variable.nodesOptions, _variable.triggerOptions].map(item => {
-        const opts = typeof item.useOptions === 'function' ? item.useOptions(options).filter(Boolean) : null;
+        const opts = item.useOptions(options).filter(Boolean);
         return {
           label: compile(item.title),
           value: item.value,
           key: item.value,
-          children: compile(opts),
+          children: opts,
           disabled: opts && !opts.length
         };
       });
-      targetOption.children = findOption(targetOptions, paths);
+      const found = findOption(targetOptions, paths);
+      targetOption = Object.assign(_objectSpread({}, targetOption), found, targetOption);
     }
     return [targetOption, {
       key: 'index',