@cgeui/business-components 0.0.2 → 0.0.3

package/dist/esm/DataVisualProgress/style.less

@@ -0,0 +1,266 @@
+@import './theme/index.less';
+
+.dataVisualProgress {
+  border-radius: var(--catd-radius-l);
+  background: var(--catd-bg-color-thirdly);
+
+  .dataVisualProgressLoading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 160px;
+  }
+}
+
+.batteryPackageView {
+  .batteryPackageHeader {
+    display: flex;
+    align-items: center;
+
+    .batteryPackageHeaderFlex {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .batteryPackageLegend {
+      display: flex;
+      flex-wrap: wrap;
+
+      > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 10px;
+
+        .legendIcon {
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          margin-right: 6px;
+          margin-left: 2px;
+          background: var(--analysis-pack-item-bg);
+          transform: rotate(45deg);
+        }
+
+        .alarmLegendIcon {
+          background: linear-gradient(
+            to left,
+            transparent 0%,
+            transparent 50%,
+            #9740ff 50%,
+            #9740ff 100%
+          );
+          background-size: 8px 2px;
+          background-repeat: repeat-x;
+          height: 2px;
+          width: 16px;
+          background-color: transparent !important;
+        }
+
+        .legendText {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .dayListStyle {
+    margin-top: 6px;
+
+    .designsc-select {
+      width: 140px;
+    }
+  }
+
+  .batteryPackageProgressBar {
+    display: flex;
+    width: 100%;
+    margin-top: 0;
+    padding-top: 12px;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    > div {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+      min-width: 40px;
+      text-align: center;
+
+      &:first-child {
+        .progressBarItem,
+        .alarmBarItem::after {
+          border-radius: 5px 0 0 5px;
+        }
+      }
+
+      &:last-child {
+        .progressBarItem,
+        .alarmBarItem::after {
+          border-radius: 0 5px 5px 0;
+        }
+      }
+
+      &:only-child {
+        .progressBarItem,
+        .alarmBarItem::after {
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+
+  .progressBarItem {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 8px;
+    margin-top: 4px;
+    background: var(--analysis-pack-item-bg);
+
+    .barHight {
+      position: absolute;
+      top: -2px;
+      right: -2px;
+      bottom: -2px;
+      left: -2px;
+      z-index: 1;
+      background: inherit;
+      border-radius: 6px;
+    }
+
+    .barHigh {
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      width: 0;
+      height: 0;
+      margin-left: -5px;
+      border: 5px solid transparent;
+      border-top: 10px solid red;
+    }
+  }
+
+  .alarmBarItem {
+    &::after {
+      position: absolute;
+      content: '';
+      left: 0;
+      right: 0;
+      top: -3px;
+      bottom: -3px;
+      border: 1.5px dashed #9740ff;
+      background: var(--analysis-pack-item-bg);
+    }
+  }
+
+  .progressBarText {
+    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 6px;
+    font-size: 12px;
+    line-height: 1;
+    transform: scale(0.8);
+
+    & + .progressBarText {
+      margin-top: 0;
+      margin-bottom: 6px;
+    }
+  }
+
+  .packageNoData {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 60px;
+    font-size: 12px;
+  }
+
+  .batteryPackageBtn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2px;
+
+    > span {
+      margin: 0 4px;
+      color: var(--c-primary-color);
+      font-size: 22px;
+      cursor: pointer;
+    }
+
+    :global {
+      .anticon-pause,
+      .anticon-caret-right {
+        font-size: 18px;
+      }
+    }
+
+    .disabled {
+      color: var(--analysis-pack-btn-disabled);
+      cursor: not-allowed !important;
+    }
+  }
+
+  .batteryPackageRule {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    font-size: 14px !important;
+    color: var(--analysis-pack-info-color) !important;
+  }
+
+  .packageLoading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 60px;
+  }
+}
+
+.visualDaySelectOption {
+  .designsc-select-item-option-content {
+    display: flex;
+    align-items: center;
+  }
+
+  .cellColor {
+    width: 6px;
+    height: 6px;
+    margin-right: 6px;
+    background-color: var(--analysis-pack-item-bg);
+    border-radius: 50%;
+  }
+}
+
+.analysisFaultLegendBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0 !important;
+
+  > div {
+    margin-right: 10px;
+  }
+
+  .analysisFaultLegendIcon {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-right: 6px;
+    margin-left: 2px;
+    background: var(--analysis-icon-bg);
+    transform: rotate(45deg);
+  }
+
+  .analysisFaultLegendText {
+    font-size: 12px;
+  }
+}

package/dist/esm/DataVisualProgress/theme/dark.less

@@ -0,0 +1,5 @@
+.batteryPackageView[data-theme='dark'] {
+  --analysis-pack-item-bg: rgba(255, 255, 255, 20%);
+  --analysis-pack-info-color: rgba(255, 255, 255, 50%);
+  --analysis-pack-btn-disabled: #505c74;
+}

package/dist/esm/DataVisualProgress/theme/default.less

@@ -0,0 +1,5 @@
+.batteryPackageView[data-theme='default'] {
+  --analysis-pack-item-bg: rgba(0, 0, 0, 20%);
+  --analysis-pack-info-color: #888;
+  --analysis-pack-btn-disabled: #a3c3ff;
+}

package/dist/esm/DataVisualProgress/theme/index.less

@@ -0,0 +1,2 @@
+@import './dark.less';
+@import './default.less';

package/dist/esm/DataVisualProgress/utils.js

@@ -0,0 +1,398 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import moment from 'moment';
+import { createContext, useContext, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import locales from "../locales";
+import { getLocale } from "../utils";
+
+// 计算默认的时间颗粒度
+export var calculateAggregation = function calculateAggregation() {
+  var dateTimeRange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var aValue = 'd'; // 时间颗粒度默认天
+  if (dateTimeRange.length > 0) {
+    // 时间段大于3个月按月
+    // 时间段小于等于1天按小时
+    var s = moment(dateTimeRange[0]).valueOf();
+    var e = moment(dateTimeRange[1]).valueOf();
+    // 时间段大于1年，按年
+    if (e - s > 365 * 24 * 60 * 60 * 1000) {
+      aValue = 'y';
+    } else if (e - s > 90 * 24 * 60 * 60 * 1000) {
+      aValue = 'M';
+    } else if (e - s <= 24 * 60 * 60 * 1000) {
+      aValue = 'h';
+    }
+  }
+  return aValue;
+};
+
+// 过滤default=true的数据
+var defaultParamsList = function defaultParamsList() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var result = [];
+  list.forEach(function (item) {
+    if (item !== null && item !== void 0 && item.default) {
+      result.push(item.value);
+    }
+  });
+  return result;
+};
+export var getDeviceParamsMap = function getDeviceParamsMap(data, status // pack\cell\sensor
+) {
+  // 不再显示异常统计
+  var defaultData = {
+    pack: defaultParamsList(data === null || data === void 0 ? void 0 : data.pack),
+    cell: defaultParamsList(data === null || data === void 0 ? void 0 : data.cell),
+    sensor: defaultParamsList(data === null || data === void 0 ? void 0 : data.sensor)
+  };
+  return {
+    real: {
+      option: data[status],
+      defaultValues: defaultData[status]
+    },
+    history: {
+      option: data[status],
+      defaultValues: defaultData[status]
+    },
+    defaultData: defaultData
+  };
+};
+
+// 根据颗粒度计算区间段
+export var calculateTimeRange = function calculateTimeRange(startTime, aggregation, updateTime) {
+  var result = {
+    startTime: 0,
+    endTime: 0
+  };
+  if (aggregation === 'y') {
+    result.startTime = moment(startTime).startOf('year').startOf('day').valueOf();
+    result.endTime = moment(startTime).endOf('year').endOf('day').valueOf();
+  } else if (aggregation === 'M') {
+    result.startTime = moment(startTime).startOf('month').startOf('day').valueOf();
+    result.endTime = moment(startTime).endOf('month').endOf('day').valueOf();
+  } else if (aggregation === 'd') {
+    result.startTime = moment(startTime).startOf('day').valueOf();
+    result.endTime = moment(startTime).endOf('day').valueOf();
+  } else if (aggregation === 'h') {
+    result.startTime = moment(startTime).startOf('hour').valueOf();
+    result.endTime = moment(startTime).endOf('hour').valueOf();
+  }
+  //开始时间小于生命周期时间
+  if (updateTime !== null && updateTime !== void 0 && updateTime.startTime && result.startTime < (updateTime === null || updateTime === void 0 ? void 0 : updateTime.startTime)) {
+    result.startTime = updateTime.startTime;
+  }
+  // 结束时间大于生命周期时间
+  if (updateTime !== null && updateTime !== void 0 && updateTime.endTime && result.endTime > (updateTime === null || updateTime === void 0 ? void 0 : updateTime.endTime)) {
+    result.endTime = updateTime.endTime;
+  }
+  return result;
+};
+
+// 小时维度只获取1天
+export var getOneDayTimeRange = function getOneDayTimeRange(aggregation, startTime, endTime) {
+  // 开始时间和结束时间超过一天
+  if (aggregation === 'h') {
+    // 只请求近1天的数据
+    var s = moment(endTime).subtract(0, 'days').startOf('day').valueOf();
+    if (s >= startTime) return s;
+  }
+  return startTime;
+};
+export var timeDiff = function timeDiff(aggregation, startTime, endTime) {
+  var diff = 0;
+  var start = moment(startTime);
+  var end = moment(endTime);
+  if (aggregation === 'y') {
+    // 年，计算时间区间有几年
+    var s1 = moment(startTime).startOf('year');
+    diff = end.diff(s1, 'year');
+  } else if (aggregation === 'M') {
+    var _s = moment(startTime).startOf('month');
+    diff = end.diff(_s, 'month');
+  } else if (aggregation === 'd') {
+    diff = end.diff(start, 'day');
+  } else if (aggregation === 'h') {
+    diff = end.diff(start, 'hour');
+  } else if (aggregation === 'm') {
+    diff = end.diff(start, 'minute');
+  }
+  return diff + 1;
+};
+export var getTimeList = function getTimeList() {
+  var length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var aggregation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'd';
+  var endTime = arguments.length > 2 ? arguments[2] : undefined;
+  var time = moment(endTime).valueOf();
+  var result = [];
+  for (var i = 0; i < length; i++) {
+    var timestamp = 0;
+    var name = '';
+    var nameDes = '';
+    if (aggregation === 'd') {
+      timestamp = moment(time).subtract(i, 'days').startOf('day').valueOf();
+      name = moment(timestamp).format('YYYY');
+      nameDes = moment(timestamp).format('MM-DD');
+    } else if (aggregation === 'y') {
+      timestamp = moment(time).subtract(i, 'years').startOf('year').valueOf();
+      name = moment(timestamp).format('YYYY');
+      nameDes = '';
+    } else if (aggregation === 'M') {
+      timestamp = moment(time).subtract(i, 'months').startOf('month').valueOf();
+      name = moment(timestamp).format('YYYY');
+      nameDes = moment(timestamp).format('M') + '月';
+    } else if (aggregation === 'h') {
+      // hour
+      timestamp = moment(time).subtract(i, 'hours').startOf('hour').valueOf();
+      name = moment(timestamp).format('MM-DD');
+      nameDes = moment(timestamp).format('HH:mm');
+    } else if (aggregation === 'm') {
+      timestamp = moment(time).subtract(i, 'minutes').startOf('minute').valueOf();
+      name = moment(timestamp).format('MM-DD');
+      nameDes = moment(timestamp).format('HH:mm');
+    }
+    result.push({
+      name: name,
+      nameDes: nameDes,
+      timestamp: timestamp,
+      sort: i
+    });
+  }
+  return result.sort(function (sort1, sort2) {
+    return sort2.sort - sort1.sort;
+  });
+};
+
+// 电池包概览数据
+export var preparePackageResult = function preparePackageResult() {
+  var aggregation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'd';
+  var dateTimeRange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var dataMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var occurTime // 如果是从其他页面带过来的时间，则需要定位到这个时间的数据
+  = arguments.length > 3 ? arguments[3] : undefined;
+  var result = {
+    hasAlarm: false,
+    // 假设没有告警
+    firstAlarm: {},
+    // 第一个告警的信息
+    list: [],
+    alarmList: [],
+    // 有多少个告警，决定是不是显示快进快退
+    firstData: {},
+    // 第一条数据，主要是没有告警时使用
+    occurAlarm: {},
+    // 从其他页面带入的时间查到的具体告警时间
+    startTime: 0
+  };
+  if (dateTimeRange.length === 0) return result;
+  // 根据颗粒度计算传入时间聚合的开始点
+  var occurStartTime = 0;
+  if (occurTime) {
+    var d1 = calculateTimeRange(Number(occurTime), aggregation, {});
+    occurStartTime = d1.startTime;
+  }
+  var startTime = getOneDayTimeRange(aggregation, dateTimeRange[0], dateTimeRange[1]);
+  var endTime = dateTimeRange[1];
+  var diff = timeDiff(aggregation, startTime, endTime);
+  var d = getTimeList(diff, aggregation, endTime);
+  // 并返回第一个故障类型的时间和是否有无故障
+  d.forEach(function (item, index) {
+    var _dataMap$Number, _dataMap$Number2;
+    // 用于自动跳转使用
+    item.sortIndex = index + 1;
+    item.level = dataMap === null || dataMap === void 0 || (_dataMap$Number = dataMap[Number(item.timestamp)]) === null || _dataMap$Number === void 0 ? void 0 : _dataMap$Number.level;
+    item.faultType = dataMap === null || dataMap === void 0 || (_dataMap$Number2 = dataMap[Number(item.timestamp)]) === null || _dataMap$Number2 === void 0 ? void 0 : _dataMap$Number2.faultType;
+    if ((item === null || item === void 0 ? void 0 : item.level) === '0') {
+      result.firstData = item;
+    }
+    if (index === d.length - 1 && Object.keys(result.firstData).length === 0) {
+      // 最后一条还没有记录到正常数据，则使用最后一条
+      result.firstData = item;
+    }
+    if (item.level && item.level !== '0') {
+      result.firstAlarm = item;
+    }
+    if (item.level && item.level !== '0') {
+      result.alarmList.push(_objectSpread(_objectSpread({}, item), {}, {
+        index: result.alarmList.length
+      }));
+    }
+    if (item.level && item.level !== '0' && occurStartTime > 0 && occurStartTime === Number(item.timestamp)) {
+      result.occurAlarm = item;
+    }
+    result.list.push(item);
+  });
+  result.hasAlarm = result.alarmList.length > 0;
+  result.startTime = startTime; // 主要是用于没有数据返回时标记开始时间
+  return result;
+};
+
+// sortIndex: 当前是第几个
+export var scollToLeft = function scollToLeft(sortIndex, id) {
+  var domWrapper = document.getElementById("batteryProgress".concat(id)); // 出现滚动条的dom
+  var targetWrapper = document.getElementById("progressBar".concat(id, "Item_0"));
+  var targeWidth = 40;
+  if (targetWrapper) {
+    targeWidth = targetWrapper.clientWidth;
+  }
+  if (domWrapper) {
+    // sortIndex - 1 去除自己
+    domWrapper.scrollLeft = targeWidth * (sortIndex - 1);
+  }
+};
+var checkButtonPermission = function checkButtonPermission() {
+  var permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var authStr = arguments.length > 1 ? arguments[1] : undefined;
+  var check;
+  permissions.some(function (permission) {
+    try {
+      var authExp = new RegExp("".concat(permission, "$"));
+      check = authExp.exec(authStr);
+      // console.log('authExp:', permission, 'authStr:', authStr)
+      return !!check;
+    } catch (error) {
+      console.log(error);
+      return false;
+    }
+  });
+  if (!check) {
+    return {
+      show: false
+    };
+  }
+  if (check[2] === 'readonly') {
+    return {
+      show: true,
+      disabled: true
+    };
+  }
+  return {
+    show: true
+  };
+};
+var checkPagePermission = function checkPagePermission(permissions, authStr) {
+  var check = permissions.includes(authStr);
+  return {
+    show: check
+  };
+};
+var authState = {
+  loading: true,
+  isLogin: false,
+  permissions: [],
+  roles: []
+};
+export var hasPermission = function hasPermission(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'page' : _ref$type,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'get' : _ref$name,
+    _ref$path = _ref.path,
+    path = _ref$path === void 0 ? '' : _ref$path;
+  var auth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : authState;
+  var isLogin = auth.isLogin,
+    permissions = auth.permissions;
+  // const location = useLocation();
+  var routePath = path || location.pathname;
+  var authStr;
+  switch (type) {
+    case 'button':
+      authStr = "".concat(routePath, ":").concat(name);
+      if (name.startsWith(':')) {
+        authStr = name;
+      }
+      return _objectSpread(_objectSpread({}, checkButtonPermission(permissions, authStr)), {}, {
+        isLogin: isLogin
+      });
+    case 'module':
+      return {
+        show: true,
+        isLogin: isLogin
+      };
+    case 'page':
+    default:
+      if (!isLogin) {
+        return {
+          isLogin: isLogin,
+          show: false
+        };
+      }
+      authStr = "".concat(routePath);
+      return _objectSpread(_objectSpread({}, checkPagePermission(permissions, authStr)), {}, {
+        isLogin: isLogin
+      });
+  }
+};
+var AuthContext = /*#__PURE__*/createContext({});
+export var useAuth = function useAuth() {
+  return useContext(AuthContext);
+};
+export var usePermission = function usePermission() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    type: 'page',
+    name: 'get'
+  };
+  var auth = useAuth();
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  return useMemo(function () {
+    return hasPermission(_objectSpread({
+      path: pathname
+    }, props), auth);
+  }, [props, auth, pathname]);
+};
+export var getPopContainer = function getPopContainer(triggerNode) {
+  return triggerNode.parentNode;
+};
+
+// 简单时间格式
+export var simpleTimeFormat = function simpleTimeFormat() {
+  return 'YYYY-MM-DD';
+};
+
+// 去掉L, faultLevel：等级 L0-L3, defaultValue:没有值时的默认值 0或者null
+export var getLevelNumber = function getLevelNumber(faultLevel, defaultValue, filterByRuleType, ruleType) {
+  var level = (faultLevel === null || faultLevel === void 0 ? void 0 : faultLevel.split('L')) || [];
+  if (filterByRuleType) {
+    return level.length > 0 && String(ruleType) !== '1' ? level[level.length - 1] : defaultValue;
+  } else {
+    return level.length > 0 ? level[level.length - 1] : defaultValue;
+  }
+};
+export var getDefaultLegend = function getDefaultLegend(lang) {
+  var curLang = lang || getLocale() || 'zh-CN';
+  var locale = locales[curLang];
+  var TimeLine = locale.TimeLine;
+  return [{
+    name: TimeLine.level0,
+    level: '0'
+  }, {
+    name: TimeLine.level1,
+    level: '1'
+  }, {
+    name: TimeLine.level2,
+    level: '2'
+  }, {
+    name: TimeLine.level3,
+    level: '3'
+  }, {
+    name: TimeLine.noData,
+    level: 'none'
+  }];
+};
+export var getAlarmFaultLegend = function getAlarmFaultLegend(lang) {
+  var curLang = lang || getLocale() || 'zh-CN';
+  var locale = locales[curLang];
+  var TimeLine = locale.TimeLine;
+  return [{
+    name: TimeLine.alarm,
+    level: 'alarm'
+  }, {
+    name: TimeLine.cleared,
+    level: 'clear'
+  }];
+};

package/dist/esm/EditableInput/demo/basic.js

@@ -0,0 +1,23 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+import EditableInput from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Basic = function Basic() {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    changeValue = _useState2[0],
+    setChangeValue = _useState2[1];
+  var saveEditableValue = function saveEditableValue(val) {
+    return setChangeValue(val);
+  };
+  return /*#__PURE__*/_jsx(EditableInput, {
+    defaultValue: "xxxx",
+    callback: saveEditableValue
+  });
+};
+export default Basic;