@zgfe/business-lib 1.0.25-layers.5 → 1.0.25-userGroupFix.0

package/es/cycleTime/index.d.ts

@@ -17,6 +17,5 @@ declare const BizCycleTime: React.FC<{
     placeholder?: string;
     onChange?: (val: Value) => void;
     size?: SizeType;
-    disable?: boolean;
 }>;
 export default BizCycleTime;

package/es/cycleTime/index.js

@@ -26,8 +26,7 @@ export var CycleTimeUnit;
 
 var BizCycleTime = function BizCycleTime(props) {
   var multiple = props.multiple,
-      size = props.size,
-      disable = props.disable;
+      size = props.size;
   var classPrefix = 'biz-cycle-time';
   var unitList = [{
     label: '每日',
@@ -158,7 +157,6 @@ var BizCycleTime = function BizCycleTime(props) {
     className: "".concat(classPrefix, "-unit"),
     defaultValue: unit,
     size: size,
-    disable: disable,
     onChange: function onChange(v) {
       setDay([]);
       setTime(undefined);
@@ -171,8 +169,7 @@ var BizCycleTime = function BizCycleTime(props) {
     defaultValue: time ? moment(time, 'hh:mm:ss') : undefined,
     onChange: function onChange(time) {
       setTime(time === null || time === void 0 ? void 0 : time.format('hh:mm:ss'));
-    },
-    disabled: disable
+    }
   }), unit.value === CycleTimeUnit.week && /*#__PURE__*/React.createElement(BizSelect, {
     options: days,
     labelField: "label",
@@ -184,19 +181,16 @@ var BizCycleTime = function BizCycleTime(props) {
     placeholder: props.placeholder,
     onChange: function onChange(v) {
       setDay(v);
-    },
-    disable: disable
+    }
   }), unit.value === CycleTimeUnit.month && /*#__PURE__*/React.createElement(MonthDay, {
     placeholder: props.placeholder,
     defaultValue: day,
-    onChange: setDayList,
-    disable: disable
+    onChange: setDayList
   }));
 };
 
 BizCycleTime.defaultProps = {
   multiple: false,
-  size: 'middle',
-  disable: false
+  size: 'middle'
 };
 export default BizCycleTime;

package/es/cycleTime/month.d.ts

@@ -8,6 +8,5 @@ declare const MonthDay: React.FC<{
     defaultValue?: BaseOption<number>[];
     placeholder?: string;
     onChange?: (days: BaseOption<number>[]) => void;
-    disable?: boolean;
 }>;
 export default MonthDay;

package/es/cycleTime/month.js

@@ -18,7 +18,6 @@ import _ from 'lodash';
 
 var MonthDay = function MonthDay(props) {
   var classPrefix = 'biz-month-day';
-  var disable = props.disable;
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -86,7 +85,6 @@ var MonthDay = function MonthDay(props) {
   }
 
   return /*#__PURE__*/React.createElement(Dropdown, {
-    disabled: disable,
     overlay: /*#__PURE__*/React.createElement("div", {
       className: "".concat(classPrefix, "-overlay")
     }, dayList.map(function (item) {
@@ -106,7 +104,7 @@ var MonthDay = function MonthDay(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-wrapper")
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classPrefix, "-handle ").concat(props.size, " ").concat(!chosenDayList.length ? "holder" : '', " ").concat(disable ? 'disable' : '')
+    className: "".concat(classPrefix, "-handle ").concat(props.size, " ").concat(!chosenDayList.length ? "holder" : '')
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-val")
   }, chosenDayList.map(function (item) {
@@ -114,7 +112,7 @@ var MonthDay = function MonthDay(props) {
       closable: true,
       key: item.value,
       onClose: function onClose() {
-        !disable && onDelMonthDay(item);
+        onDelMonthDay(item);
       }
     }, item.label);
   }), !chosenDayList.length && /*#__PURE__*/React.createElement("span", {
@@ -125,7 +123,6 @@ var MonthDay = function MonthDay(props) {
 };
 
 MonthDay.defaultProps = {
-  size: 'middle',
-  disable: false
+  size: 'middle'
 };
 export default MonthDay;

package/es/cycleTime/styles/month.less

@@ -47,18 +47,6 @@
     &.ant-dropdown-open > .biz-month-day-handle {
       .__default-focused();
     }
-    .biz-month-day-handle {
-      &.disable {
-        cursor: not-allowed !important;
-        .ant-tag {
-          color: @disabled-color;
-          .anticon-close {
-            color: @disabled-color;
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
   }
   &-overlay {
     .__select-panel();

package/es/select/demo/multiple.js

@@ -40,7 +40,7 @@ var stringOperate = [{
   name: '是空值',
   value: 'is null'
 }, {
-  name: '不是空值',
+  name: '不是空值aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
   value: 'is not null'
 }];
 var disabledList = [{
@@ -80,7 +80,6 @@ export default (function () {
     disableItemList: disabledList,
     multiple: true,
     enableCreate: true,
-    value: data,
-    disable: true
+    value: data
   }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "\u5F53\u524D\u9009\u62E9\u7684\u503C\u662F\uFF1A", JSON.stringify(data)));
 });

package/es/select/handle.js

@@ -22,8 +22,7 @@ var SelectHandle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       labelField = props.labelField,
       keyField = props.keyField,
       border = props.border,
-      showSelectIcon = props.showSelectIcon,
-      disable = props.disable;
+      showSelectIcon = props.showSelectIcon;
   var classPrefix = 'biz-select-handle';
 
   var _useState = useState(false),
@@ -111,9 +110,9 @@ var SelectHandle = /*#__PURE__*/React.forwardRef(function (props, ref) {
         color: "#fff"
       }, /*#__PURE__*/React.createElement(Tag, {
         closable: true,
-        className: "".concat(classPrefix, "-tag ").concat(disable ? 'disable' : ''),
+        id: "".concat(classPrefix, "-tag"),
         onClose: function onClose() {
-          !disable && onDelete(item);
+          onDelete(item);
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(classPrefix, "-tag-label")

package/es/select/styles/handle.less

@@ -56,42 +56,6 @@
       height: auto;
       min-height: @height-base;
     }
-    .biz-select-handle-tag {
-      display: flex;
-      align-items: center;
-      margin: 2px 4px 2px 0;
-      padding: 0 4px;
-      padding-top: 1px;
-      padding-bottom: 1px;
-      background: none;
-      border-color: #cacdd4;
-      border-radius: @border-radius-small;
-      &-label {
-        min-width: 0;
-        max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      &:not(.disable) {
-        &:hover {
-          .__default-hover();
-          .anticon {
-            color: @primary-color;
-          }
-        }
-      }
-      &.disable {
-        &:hover {
-          cursor: not-allowed;
-          .anticon-close {
-            cursor: not-allowed;
-          }
-        }
-        .biz-select-handle-tag-label {
-          color: @disabled-color !important;
-        }
-      }
-    }
   }
 
   &-search.ant-input {
@@ -126,6 +90,33 @@
     width: 14px;
     margin-left: 5px;
   }
+  &-input {
+    display: flex;
+    #biz-select-handle-tag {
+      display: flex;
+      align-items: center;
+      margin: 2px 4px 2px 0;
+      padding: 0 4px;
+      padding-top: 1px;
+      padding-bottom: 1px;
+      background: none;
+      border-color: #cacdd4;
+      border-radius: @border-radius-small;
+      &-label {
+        min-width: 0;
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &:hover {
+        .__default-hover();
+
+        .anticon {
+          color: @primary-color;
+        }
+      }
+    }
+  }
 
   &-tooltip {
     .ant-tooltip-inner {

package/es/userCondition/conditions/styles/eventCondition.less

@@ -42,7 +42,7 @@
     display: flex;
     align-items: center;
     min-width: 28px;
-    height: 34px;
+    height: 42px;
     margin-right: @margin-xs;
   }
   &-runtimes {

package/es/userCondition/conditions/styles/tagsCondition.less

@@ -8,7 +8,7 @@
     margin-left: @margin-xs;
   }
   &-label {
-    line-height: 32px;
+    line-height: 40px;
   }
   &-value {
     flex: 1;

package/es/userCondition/conditions/tagsCondition.js

@@ -16,14 +16,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { BizUserConditionContext, classPrefix } from '..';
 import BizSelect from '../../select';
 import { operatorMap } from './constants';
 import BizUserTagsSelect from '../../userTagsSelector';
 import './styles/tagsCondition.less';
-import { buildSelectLayer, buildTagsGroup } from '../util';
-import _ from 'lodash';
+import { findTagFactory } from '../util';
 var options = [{
   value: 'equal',
   text: '是'
@@ -46,10 +45,6 @@ var TagsCondition = function TagsCondition(props) {
       _useState2 = _slicedToArray(_useState, 1),
       defaultValues = _useState2[0];
 
-  var tagGroupList = useMemo(function () {
-    return buildTagsGroup(userTagsData || []);
-  }, [userTagsData]);
-
   function onOperatorChange(operator) {
     onChange(dataId, _objectSpread(_objectSpread({}, labels), {}, {
       operator: operator.value
@@ -58,7 +53,7 @@ var TagsCondition = function TagsCondition(props) {
 
   function onTagsChange(data) {
     var values = data.map(function (item) {
-      return "".concat(item[1].id, ":").concat(item[2].layerLabelId);
+      return item[1].labelId;
     });
     onChange(dataId, _objectSpread(_objectSpread({}, labels), {}, {
       values: values
@@ -67,20 +62,12 @@ var TagsCondition = function TagsCondition(props) {
 
   function buildDefaultValues() {
     var values = [];
-    var findTag = buildSelectLayer(userTagsData);
-    labels.values.forEach(function (value) {
-      if (_.isNumber(value)) {
-        return;
-      }
-
-      var _value$split = value.split(':'),
-          _value$split2 = _slicedToArray(_value$split, 2),
-          layerId = _value$split2[1];
-
-      var selectValue = findTag(Number(layerId));
+    var findTag = findTagFactory(userTagsData);
+    labels.values.forEach(function (id) {
+      var tag = findTag(id);
 
-      if (selectValue) {
-        values.push(selectValue);
+      if (tag) {
+        values.push([tag.labelGroup, tag]);
       }
     });
     return values;
@@ -105,11 +92,11 @@ var TagsCondition = function TagsCondition(props) {
     className: "".concat(classPrefix, "-tags-condition-value")
   }, /*#__PURE__*/React.createElement(BizUserTagsSelect, {
     defaultValue: defaultValues,
-    data: tagGroupList,
-    childFields: ['children', 'layers'],
-    keyFields: ['labelGroup', 'id', 'layerLabelId'],
-    labelFields: ['labelGroup', 'labelName', 'layerLabelName'],
-    valueFields: ['labelGroup', 'id', 'layerLabelId'],
+    data: userTagsData,
+    childFields: ['children'],
+    keyFields: ['labelGroup', 'labelId'],
+    labelFields: ['labelGroup', 'labelName'],
+    valueFields: ['labelGroup', 'labelId'],
     onChange: onTagsChange,
     destroyPopupOnHide: true
   })), /*#__PURE__*/React.createElement("div", {

package/es/userCondition/conditions/textDesc.js

@@ -4,23 +4,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-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 _ from 'lodash';
 import React, { useContext, useMemo } from 'react';
 import { BizUserConditionContext, classPrefix } from '..';
 import BizGlobalDataContext from '../../context';
-import { findEvent, findPropAndEnv, buildSelectLayer } from '../util';
+import { findEvent, findPropAndEnv, findTagFactory } from '../util';
 import { durationHandler, operatorMap } from './constants';
 import './styles/textDesc.less';
 
@@ -70,12 +57,12 @@ var Text = function Text(props) {
   function renderPeriod(label, period, isEvent) {
     var _label$after;
 
-    var valuesDom = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, period.values[0]), /*#__PURE__*/React.createElement("span", null, (_label$after = label.after) !== null && _label$after !== void 0 ? _label$after : '天'));
-
     if (period.operator === 'unlimited_time') {
       return /*#__PURE__*/React.createElement("span", null, "\u5728\u4EFB\u610F\u65F6\u95F4\u5185");
     }
 
+    var valuesDom = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, period.values[0]), /*#__PURE__*/React.createElement("span", null, (_label$after = label.after) !== null && _label$after !== void 0 ? _label$after : '天'));
+
     if (period.operator === 'absolute') {
       valuesDom = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
         className: "".concat(classPrefix, "-text-desc-value")
@@ -186,23 +173,15 @@ var Text = function Text(props) {
       className: "label"
     }, /*#__PURE__*/React.createElement("b", null, "\u7528\u6237\u6807\u7B7E")), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("b", null, operatorMap[labels.operator])), /*#__PURE__*/React.createElement("span", {
       className: "".concat(classPrefix, "-text-desc-value")
-    }, /*#__PURE__*/React.createElement("span", null, "("), labels.values.map(function (value, index) {
-      if (_.isNumber(value)) {
-        return null;
-      }
-
-      var _value$split = value.split(':'),
-          _value$split2 = _slicedToArray(_value$split, 2),
-          layerId = _value$split2[1];
-
-      var tag = findTag(Number(layerId));
+    }, /*#__PURE__*/React.createElement("span", null, "("), labels.values.map(function (id, index) {
+      var tag = findTag(id);
       return /*#__PURE__*/React.createElement("span", {
-        key: layerId
+        key: id
       }, index >= 1 ? /*#__PURE__*/React.createElement("span", {
         style: {
           margin: '0 4px'
         }
-      }, "\u6216") : null, /*#__PURE__*/React.createElement("span", null, tag && tag[1].labelName + '：' + tag[2].layerLabelName));
+      }, "\u6216") : null, /*#__PURE__*/React.createElement("span", null, tag && tag.labelName));
     }), /*#__PURE__*/React.createElement("span", null, ")")));
   }
 
@@ -252,7 +231,7 @@ var Text = function Text(props) {
   }
 
   var findTag = useMemo(function () {
-    return buildSelectLayer(userTagsData);
+    return findTagFactory(userTagsData);
   }, [userTagsData]);
   return /*#__PURE__*/React.createElement("span", {
     className: "".concat(classPrefix, "-text-desc")

package/es/userCondition/demo/index.js

@@ -15,8 +15,216 @@ import eventData from '../../mock/event';
 import envData from '../../mock/env';
 import userData from '../../mock/user';
 import { BizUserCondition, BizGlobalDataContext, convertAttributeData } from '@zgfe/business-lib';
-import { conditions, tagList } from './mockData';
-var getTagList = Promise.resolve(tagList);
+var getTagList = Promise.resolve([{
+  appId: 51,
+  createTime: '2022-07-05T13:48:51',
+  del: 0,
+  id: 286,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '行为标签',
+  labelId: 66284406603776,
+  labelName: 'test8（新增）',
+  labelStatus: 1,
+  updateTime: '2022-07-05T13:48:51'
+}, {
+  appId: 51,
+  createTime: '2022-07-05T13:47:38',
+  del: 0,
+  id: 285,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '预测标签',
+  labelId: 66283215683584,
+  labelName: 'test7（新增）',
+  labelStatus: 1,
+  updateTime: '2022-07-05T13:47:38'
+}, {
+  appId: 51,
+  createTime: '2022-07-05T13:47:10',
+  del: 0,
+  id: 284,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '其他标签',
+  labelId: 66282747314176,
+  labelName: 'test6（新增）',
+  labelStatus: 1,
+  updateTime: '2022-07-05T13:47:10'
+}, {
+  appId: 51,
+  createTime: '2022-07-05T13:44:20',
+  del: 0,
+  id: 283,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '其他标签',
+  labelId: 66279963361280,
+  labelName: 'test5（新增）',
+  labelStatus: 1,
+  updateTime: '2022-07-05T13:44:20'
+}, {
+  appId: 51,
+  createTime: '2022-07-05T13:43:08',
+  del: 0,
+  id: 282,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '活跃标签',
+  labelId: 66278784057344,
+  labelName: 'test3（新增）',
+  labelStatus: 1,
+  updateTime: '2022-07-05T13:43:08'
+}, {
+  appId: 51,
+  createTime: '2022-07-05T13:42:44',
+  del: 0,
+  id: 281,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '其他标签',
+  labelId: 66278393724928,
+  labelName: 'test2（新增）',
+  labelStatus: 1,
+  updateTime: '2022-07-05T13:42:44'
+}, {
+  appId: 51,
+  createTime: '2022-07-05T13:42:30',
+  del: 0,
+  id: 280,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '预测标签',
+  labelId: 66278158696448,
+  labelName: 'test1（新增）',
+  labelStatus: 1,
+  updateTime: '2022-07-05T13:42:30'
+}, {
+  appId: 51,
+  createTime: '2022-06-21T15:04:24',
+  del: 0,
+  id: 277,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '活跃标签',
+  labelId: 46540583010304,
+  labelName: '匿名用户',
+  labelStatus: 0,
+  updateTime: '2022-06-21T15:04:24'
+}, {
+  appId: 51,
+  createTime: '2022-06-10T11:10:52',
+  del: 0,
+  id: 197,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '活跃标签',
+  labelId: 77384417755136,
+  labelName: '手动更新1',
+  labelStatus: 0,
+  updateTime: '2022-06-10T11:32:31'
+}, {
+  appId: 51,
+  createTime: '2022-06-10T11:10:36',
+  del: 0,
+  id: 196,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '活跃标签',
+  labelId: 77383474429952,
+  labelName: '自动更新修改',
+  labelStatus: 0,
+  updateTime: '2022-06-10T11:11:13'
+}, {
+  appId: 51,
+  createTime: '2022-06-10T10:49:57',
+  del: 0,
+  id: 191,
+  isInner: 0,
+  isStartup: 0,
+  labelGroup: '基本标签',
+  labelId: 77388914425856,
+  labelName: '一般价值',
+  labelStatus: 0,
+  updateTime: '2022-06-10T10:49:57'
+}]);
+var data = {
+  json: [[{
+    eventId: -4,
+    attrs: [],
+    runPeriod: {
+      operator: 'relative',
+      values: ['30', '1']
+    },
+    runTimes: {
+      operator: '>=',
+      values: ['1']
+    }
+  }, {
+    eventId: -3,
+    attrs: [],
+    runPeriod: {
+      operator: 'absolute',
+      values: ['2022-07-13', '2022-07-19']
+    },
+    runTimes: {
+      operator: '>=',
+      values: ['1']
+    }
+  }], [{
+    attrs: [{
+      attrId: 0,
+      attrName: 'zg_id',
+      operator: '>',
+      params: ['20'],
+      attrType: 'cont-num',
+      category: 'fixed'
+    }]
+  }, {
+    attrs: [{
+      attrId: 0,
+      attrName: 'app_user_id',
+      operator: 'equal',
+      params: ['20'],
+      attrType: 'cont-string',
+      category: 'fixed'
+    }]
+  }], [{
+    attrs: [{
+      attrId: 0,
+      attrName: 'duration',
+      operator: 'not equal',
+      params: [1198800, '1'],
+      attrType: 'cont-num',
+      category: 'fixed'
+    }]
+  }, {
+    eventId: 24143017,
+    runTimes: {
+      operator: '>=',
+      values: ['1']
+    },
+    attrs: [{
+      attrId: 0,
+      attrName: 'resolution_l',
+      category: 'fixed',
+      operator: '>',
+      params: ['10'],
+      attrType: 'cont-num'
+    }, {
+      attrId: 30183430,
+      attrName: '扫码场景描述',
+      category: 'custom',
+      operator: 'equal',
+      params: ['Microsoft Edge', 'Safari', 'Apple WebKit'],
+      attrType: 'cont-string'
+    }],
+    runPeriod: {
+      operator: 'relative',
+      values: ['30', '0']
+    }
+  }]]
+};
 export default (function () {
   var _useState = useState({
     eventGroupList: [],
@@ -40,13 +248,28 @@ export default (function () {
     setStore(newStore);
   }, []);
   useEffect(function () {
+    var tagsMap = {};
     getTagList.then(function (list) {
-      setUserTagsData(list);
+      var data = [];
+      list.forEach(function (item) {
+        var labelGroup = item.labelGroup;
+
+        if (tagsMap[labelGroup]) {
+          tagsMap[labelGroup].push(item);
+        } else {
+          tagsMap[labelGroup] = [item];
+          data.push({
+            labelGroup: labelGroup,
+            children: tagsMap[labelGroup]
+          });
+        }
+      });
+      setUserTagsData(data);
     });
   }, []);
   var defaultValue = useMemo(function () {
-    return conditions;
-  }, [conditions]);
+    return data.json;
+  }, [data]);
 
   function onChange(value) {
     console.log(JSON.stringify(value));