@king-design/react 2.1.4 → 2.1.6

package/components/datepicker/usePanel.js

@@ -1,37 +1,47 @@
 import { useInstance, createRef } from 'intact-react';
 import { useState } from '../../hooks/useState';
 export var PanelTypes;
+
 (function (PanelTypes) {
   PanelTypes[PanelTypes["Date"] = 0] = "Date";
   PanelTypes[PanelTypes["Time"] = 1] = "Time";
 })(PanelTypes || (PanelTypes = {}));
+
 export var PanelFlags;
+
 (function (PanelFlags) {
   PanelFlags[PanelFlags["Start"] = 0] = "Start";
   PanelFlags[PanelFlags["End"] = 1] = "End";
 })(PanelFlags || (PanelFlags = {}));
+
 export function usePanel(type) {
   if (type === void 0) {
     type = PanelTypes.Date;
   }
+
   var instance = useInstance();
   var startPanel = useState(type);
   var endPanel = useState(type);
   var startRef = createRef();
   var endRef = createRef();
+
   function changePanel(type, flag) {
     if (flag === void 0) {
       flag = PanelFlags.Start;
     }
+
     getPanel(flag).set(type);
   }
+
   function getPanel(flag) {
     return flag === PanelFlags.Start ? startPanel : endPanel;
   }
+
   function reset() {
     startPanel.set(type);
     endPanel.set(type);
   }
+
   instance.on('show', reset);
   return {
     startPanel: startPanel,

package/components/datepicker/useShowDate.js

@@ -6,39 +6,48 @@ import { _$ } from '../../i18n';
 import { PanelFlags } from './usePanel';
 export function useShowDate(panel) {
   var instance = useInstance();
+
   var _instance$get = instance.get(),
-    flag = _instance$get.flag,
-    type = _instance$get.type;
+      flag = _instance$get.flag,
+      type = _instance$get.type;
+
   var date = getNowDate();
+
   if (flag === PanelFlags.End) {
     date = getPanelShowDate(date, true);
   }
+
   var showDate = useState(date);
   var anotherPanel = flag === PanelFlags.Start ? panel.endRef : panel.startRef;
   instance.on('$receive:value', function (v) {
     var lastValue = last(v);
     var value;
+
     if (Array.isArray(lastValue)) {
-      if (lastValue.length !== 2) return;
-      // range
+      if (lastValue.length !== 2) return; // range
+
       var _flag = instance.get('flag');
+
       value = lastValue[_flag];
     } else {
       value = lastValue;
     }
+
     var another;
-    if (value && !value.isSame(showDate.value, 'month') && (
-    // ignore if it is in another panel
+
+    if (value && !value.isSame(showDate.value, 'month') && ( // ignore if it is in another panel
     !(another = anotherPanel.value) || !value.isSame(another.showDate.date.value, 'month'))) {
       showDate.set(value);
     }
-  });
-  // ensure the start panel's date is before the end panel's
+  }); // ensure the start panel's date is before the end panel's
+
   watchState(showDate, function (v) {
     if (flag === PanelFlags.Start) {
       var endPanel = anotherPanel.value;
+
       if (endPanel) {
         var endShowDate = endPanel.showDate.date.value.date(1);
+
         if (v.isAfter(endShowDate, 'date') || v.isSame(endShowDate, 'date')) {
           // maybe we are changing the year, so we must set it as the next month from show date
           // of start panel
@@ -48,11 +57,13 @@ export function useShowDate(panel) {
       }
     } else {
       var startPanel = anotherPanel.value;
+
       if (startPanel) {
         // maybe changed to time picker
-        var startShowDate = startPanel.showDate.date.value;
-        // set to the last date
+        var startShowDate = startPanel.showDate.date.value; // set to the last date
+
         startShowDate = startShowDate.add(1, 'month').add(-1, 'day');
+
         if (v.isBefore(startShowDate, 'date') || v.isSame(startShowDate, 'date')) {
           // startPanel.showDate.prevMonth();
           startPanel.showDate.date.set(getPanelShowDate(v, false));
@@ -60,18 +71,22 @@ export function useShowDate(panel) {
       }
     }
   });
+
   function getPanelShowDate(date, isEnd) {
     switch (type) {
       case 'year':
         return date.add(isEnd ? 10 : -10, 'year');
+
       case 'month':
         return date.add(isEnd ? 1 : -1, 'year');
         break;
+
       default:
         return date.add(isEnd ? 1 : -1, 'month');
         break;
     }
   }
+
   function getDateLabel() {
     var map = {
       MM: _$(showDate.value.get('month') + 1 + "\u6708"),
@@ -79,10 +94,13 @@ export function useShowDate(panel) {
         n: showDate.value.get('year')
       })
     };
+
     var yearMonthFormat = _$('yearMonthFormat');
+
     if (yearMonthFormat === 'yearMonthFormat') {
       yearMonthFormat = 'YYYY MM';
     }
+
     var format = yearMonthFormat.split(' ');
     return _mapInstanceProperty(format).call(format, function (item) {
       return {
@@ -94,30 +112,39 @@ export function useShowDate(panel) {
       };
     });
   }
+
   function setRelativeMonth(month) {
     showDate.set(showDate.value.add(month, 'month'));
   }
+
   function setRelativeYear(year) {
     showDate.set(showDate.value.add(year, 'year'));
   }
+
   function prevMonth() {
     setRelativeMonth(-1);
   }
+
   function nextMonth() {
     setRelativeMonth(1);
   }
+
   function prevYear() {
     setRelativeYear(-1);
   }
+
   function nextYear() {
     setRelativeYear(1);
   }
+
   function nextTenYears() {
     setRelativeYear(10);
   }
+
   function prevTenYears() {
     setRelativeYear(-10);
   }
+
   return {
     date: showDate,
     getDateLabel: getDateLabel,

package/components/datepicker/useStatus.js

@@ -3,28 +3,36 @@ import { useInstance } from 'intact-react';
 import { isGT, isLT, isEqual } from './helpers';
 export function useStatus(focusDate) {
   var instance = useInstance();
+
   function isActive(date, type) {
     var isActive = function isActive(values) {
       return Array.isArray(values) ? !!_findInstanceProperty(values).call(values, function (v) {
         return isActive(v);
       }) : isEqual(values, date, type);
     };
+
     return isActive(instance.get('value'));
   }
+
   function isInRange(date, type) {
     var _instance$datepicker$ = instance.datepicker.get(),
-      range = _instance$datepicker$.range,
-      multiple = _instance$datepicker$.multiple;
+        range = _instance$datepicker$.range,
+        multiple = _instance$datepicker$.multiple;
+
     var value = instance.get('value');
+
     if (range) {
       if (!value) {
         return false;
       }
+
       return value.some(function (_ref) {
         var start = _ref[0],
-          end = _ref[1];
+            end = _ref[1];
+
         if (!end) {
           end = focusDate.value;
+
           if (end && isLT(end, start, type)) {
             // maybe the focusDate is less than start date
             var tmp = start;
@@ -32,14 +40,18 @@ export function useStatus(focusDate) {
             end = tmp;
           }
         }
+
         if (start && end) {
           return isGT(date, start, type) && isLT(date, end, type);
         }
+
         return false;
       });
     }
+
     return false;
   }
+
   return {
     isActive: isActive,
     isInRange: isInRange,

package/components/datepicker/useValue.js

@@ -10,57 +10,70 @@ import { last } from '../utils';
 import { PanelTypes, PanelFlags } from './usePanel';
 export function useValue(formats, disabled, panel) {
   var instance = useInstance();
+
   var _useValueBase = useValueBase(formats, disabled, panel, function (v) {
-      var _instance$get = instance.get(),
+    var _instance$get = instance.get(),
         type = _instance$get.type,
         range = _instance$get.range;
-      return type !== 'datetime' && (!range || v.length === 2);
-    }, function (v) {
-      setValue(v, true);
-    }, function () {
-      var _instance$get2 = instance.get(),
+
+    return type !== 'datetime' && (!range || v.length === 2);
+  }, function (v) {
+    setValue(v, true);
+  }, function () {
+    var _instance$get2 = instance.get(),
         type = _instance$get2.type;
-      return type === 'datetime' ? 'second' : type;
-    }, function (dayjsValue, value) {
-      if (instance.get('multiple') && panel.getPanel(PanelFlags.Start).value === PanelTypes.Time) {
-        value.set(_concatInstanceProperty(dayjsValue).call(dayjsValue, [last(value.value)]));
-      } else {
-        value.set(_sliceInstanceProperty(dayjsValue).call(dayjsValue, 0));
-      }
-    }),
-    setValue = _useValueBase.setValue,
-    value = _useValueBase.value,
-    rest = _objectWithoutPropertiesLoose(_useValueBase, _excluded);
+
+    return type === 'datetime' ? 'second' : type;
+  }, function (dayjsValue, value) {
+    if (instance.get('multiple') && panel.getPanel(PanelFlags.Start).value === PanelTypes.Time) {
+      value.set(_concatInstanceProperty(dayjsValue).call(dayjsValue, [last(value.value)]));
+    } else {
+      value.set(_sliceInstanceProperty(dayjsValue).call(dayjsValue, 0));
+    }
+  }),
+      setValue = _useValueBase.setValue,
+      value = _useValueBase.value,
+      rest = _objectWithoutPropertiesLoose(_useValueBase, _excluded);
+
   function onChangeDate(v, flag) {
     var _instance$get3 = instance.get(),
-      multiple = _instance$get3.multiple,
-      type = _instance$get3.type,
-      range = _instance$get3.range;
-    var _value = v;
-    // the datetime must be greater than minDate, #406
+        multiple = _instance$get3.multiple,
+        type = _instance$get3.type,
+        range = _instance$get3.range;
+
+    var _value = v; // the datetime must be greater than minDate, #406
+
     var minDate = disabled.minDate.value;
+
     if (minDate && _value.isBefore(minDate)) {
       _value = minDate;
     }
+
     if (range) {
       var oldValue = last(value.value);
+
       if (!oldValue || oldValue.length === 2) {
         _value = [v];
       } else {
         _value = [oldValue[0], v];
+
         _sortInstanceProperty(_value).call(_value, function (a, b) {
           return a.isAfter(b) ? 1 : -1;
         });
       }
+
       instance.trigger('selecting', _value);
     }
+
     setValue(_value, false);
+
     if (type === 'datetime') {
       panel.changePanel(PanelTypes.Time, flag);
     } else if (!multiple && (!range || _value.length === 2)) {
       instance.hide();
     }
   }
+
   return _extends({
     value: value,
     setValue: setValue,

package/components/datepicker/useYears.js

@@ -4,26 +4,33 @@ import { isEqual } from './helpers';
 import { _$ } from '../../i18n';
 export function useYears(showDate, status, focusDate) {
   var instance = useInstance();
+
   function getYearRange() {
     var startYear = Math.floor(showDate.value.get('year') / 10) * 10;
     return [startYear, startYear + 9];
   }
+
   function getYearLabel() {
     var _getYearRange = getYearRange(),
-      start = _getYearRange[0],
-      end = _getYearRange[1];
+        start = _getYearRange[0],
+        end = _getYearRange[1];
+
     return _$('{start}年 - {end}年', {
       start: start,
       end: end
     });
   }
+
   function getYears(now) {
     var years = [];
     var start = showDate.value.toDate();
+
     var _getYearRange2 = getYearRange(),
-      startYear = _getYearRange2[0],
-      endYear = _getYearRange2[1];
+        startYear = _getYearRange2[0],
+        endYear = _getYearRange2[1];
+
     start.setFullYear(startYear - 1);
+
     for (var i = 0; i < 12; i++) {
       var dayjsDate = dayjs(start);
       var year = start.getFullYear();
@@ -40,16 +47,20 @@ export function useYears(showDate, status, focusDate) {
       });
       start.setFullYear(year + 1);
     }
+
     return years;
   }
+
   function onClick(date) {
     showDate.set(date);
+
     if (instance.datepicker.get('type') !== 'year') {
       instance.type.set('month');
     } else {
       instance.triggerChange(date);
     }
   }
+
   return {
     getYearRange: getYearRange,
     getYearLabel: getYearLabel,

package/components/diagram/diagram.js

@@ -11,19 +11,23 @@ import { bind } from '../utils';
 import { DIAGRAM } from './constants';
 import { error, isNullOrUndefined } from 'intact-shared';
 var mxRubberband = mx.mxRubberband,
-  mxEvent = mx.mxEvent;
+    mxEvent = mx.mxEvent;
 var events = {
   labelChanged: true,
   selectionChanged: true
 };
 export var Diagram = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Diagram, _Component);
+
   function Diagram() {
     var _context;
+
     var _this;
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.graph = void 0;
     _this.cell = void 0;
@@ -31,7 +35,6 @@ export var Diagram = /*#__PURE__*/function (_Component) {
     _this.lines = new _Set();
     _this.layouts = new _Set();
     _this.canvasRef = createRef();
-    // save the orignal function, because we will change them
     _this.isCellSelectable = void 0;
     _this.isCellRotatable = void 0;
     _this.isCellMovable = void 0;
@@ -40,25 +43,30 @@ export var Diagram = /*#__PURE__*/function (_Component) {
     _this.isCellConnectable = void 0;
     return _this;
   }
+
   var _proto = Diagram.prototype;
+
   _proto.init = function init() {
     provide(DIAGRAM, this);
   };
+
   _proto.mounted = function mounted() {
     var _this2 = this;
+
     var graph = this.graph = createGraph(this.canvasRef.value);
     this.isCellSelectable = graph.isCellSelectable;
     this.isCellRotatable = graph.isCellRotatable;
     this.isCellMovable = graph.isCellMovable;
     this.isCellResizable = graph.isCellResizable;
     this.isCellEditable = graph.isCellEditable;
-    this.isCellConnectable = graph.isCellConnectable;
-    // add label changed event
+    this.isCellConnectable = graph.isCellConnectable; // add label changed event
+
     graph.addListener(mxEvent.LABEL_CHANGED, function (graph, evt) {
       var _evt$properties = evt.properties,
-        cell = _evt$properties.cell,
-        old = _evt$properties.old,
-        value = _evt$properties.value;
+          cell = _evt$properties.cell,
+          old = _evt$properties.old,
+          value = _evt$properties.value;
+
       _this2.trigger('labelChanged', cell, value, old);
     });
     graph.getSelectionModel().addListener(mxEvent.CHANGE, this.onSelectionChange);
@@ -66,17 +74,22 @@ export var Diagram = /*#__PURE__*/function (_Component) {
     this.cell = graph.getDefaultParent();
     this.draw();
   };
+
   _proto.updated = function updated() {
     this.draw();
   };
+
   _proto.beforeUnmount = function beforeUnmount() {
     this.canvasRef.value.removeAttribute('style');
     this.graph.destroy();
   };
+
   _proto.addShape = function addShape(shape) {
     var _shape$get = shape.get(),
-      key = _shape$get.key;
+        key = _shape$get.key;
+
     var shapes = this.shapes;
+
     if (!isNullOrUndefined(key)) {
       if (shapes.get(key)) {
         error("The key: [" + key + "] of [" + shape.constructor.displayName + "] is duplicate.");
@@ -87,53 +100,64 @@ export var Diagram = /*#__PURE__*/function (_Component) {
       shapes.set(shape.uniqueId, shape);
     }
   };
+
   _proto.deleteShape = function deleteShape(shape) {
     var _shape$get2 = shape.get(),
-      key = _shape$get2.key;
+        key = _shape$get2.key;
+
     this.shapes.delete(isNullOrUndefined(key) ? shape.uniqueId : key);
   };
+
   _proto.addLine = function addLine(line) {
     this.lines.add(line);
   };
+
   _proto.deleteLine = function deleteLine(line) {
     this.lines.delete(line);
   };
+
   _proto.addLayout = function addLayout(layout) {
     this.layouts.add(layout);
   };
+
   _proto.deleteLayout = function deleteLayout(layout) {
     this.layouts.delete(layout);
   };
+
   _proto.onSelectionChange = function onSelectionChange() {
     this.trigger('selectionChanged', this.graph.getSelectionCells());
   };
+
   _proto.initGraph = function initGraph() {
     var _this3 = this;
+
     var graph = this.graph;
     graph.setEnabled(true);
     ['selectable', 'movable', 'resizable', 'rotatable', 'editable', 'connectable'].forEach(function (item) {
       var name = "isCell" + item[0].toUpperCase() + item.substring(1);
+
       graph[name] = function (cell) {
         return cell.instance && cell.instance.get(item) && _this3[name].call(graph, cell);
       };
-    });
-    // this.rubberband.setEnabled(selectable);
-    graph.resizeContainer = true;
-    // graph.gridSize = 0;
+    }); // this.rubberband.setEnabled(selectable);
+
+    graph.resizeContainer = true; // graph.gridSize = 0;
   };
+
   _proto.draw = function draw() {
     var graph = this.graph;
     var model = graph.model;
     model.beginUpdate();
+
     try {
       this.shapes.forEach(function (shape) {
         shape.draw();
-      });
-      // we render lines after all vertexes has rendered
+      }); // we render lines after all vertexes has rendered
+
       this.lines.forEach(function (line) {
         line.draw();
-      });
-      // render layout
+      }); // render layout
+
       this.layouts.forEach(function (layout) {
         layout.draw();
       });
@@ -141,8 +165,10 @@ export var Diagram = /*#__PURE__*/function (_Component) {
       model.endUpdate();
     }
   };
+
   return Diagram;
 }(Component);
 Diagram.template = template;
 Diagram.events = events;
+
 __decorate([bind], Diagram.prototype, "onSelectionChange", null);

package/components/diagram/diagram.vdt.js

@@ -4,12 +4,15 @@ import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    className = _this$get.className,
-    children = _this$get.children;
+      className = _this$get.className,
+      children = _this$get.children;
+
   var classNameObj = (_classNameObj = {
     'k-diagram': true
   }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);

package/components/diagram/graph.js

@@ -1,7 +1,7 @@
 import mx from './mxgraph';
 import defaultStyle from './defaultStyle';
-var mxGraph = mx.mxGraph;
-// set style
+var mxGraph = mx.mxGraph; // set style
+
 export function initStylesheet(graph) {
   for (var key in defaultStyle) {
     graph.getStylesheet().putCellStyle(key, defaultStyle[key]);
@@ -15,12 +15,12 @@ export function createGraph(container) {
   graph.setDropEnabled(false);
   graph.setPanning(false);
   graph.setTooltips(false);
-  graph.setAllowLoops(true);
-  // graph.allowAutoPanning = true;
+  graph.setAllowLoops(true); // graph.allowAutoPanning = true;
+
   graph.resetEdgesOnConnect = false;
   graph.constrainChildren = false;
-  graph.constrainRelativeChildren = true;
-  // Do not scroll after moving cells
+  graph.constrainRelativeChildren = true; // Do not scroll after moving cells
+
   graph.graphHandler.scrollOnMove = false;
   graph.graphHandler.scaleGrid = true;
   graph.foldingEnabled = false;

package/components/diagram/index.d.ts

@@ -10,7 +10,7 @@ export * from './shapes/rectangle';
 export * from './shapes/square';
 export * from './shapes/text';
 export * from './shapes/line';
-declare const DDiamond: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
+declare const DDiamond: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
 export { DDiamond, DTriangle, DCylinder, DCloud };
 export * from './layouts/layout';
 export * from './layouts/circle';

package/components/diagram/index.js

@@ -1,5 +1,5 @@
-export * from './diagram';
-// Shapes
+export * from './diagram'; // Shapes
+
 export * from './shapes/callout';
 export * from './shapes/circle';
 export * from './shapes/document';
@@ -13,11 +13,11 @@ export * from './shapes/text';
 export * from './shapes/line';
 import shapes from './shapes/generateShapes';
 var DDiamond = shapes.Diamond,
-  DTriangle = shapes.Triangle,
-  DCylinder = shapes.Cylinder,
-  DCloud = shapes.Cloud;
-export { DDiamond, DTriangle, DCylinder, DCloud };
-// Layouts
+    DTriangle = shapes.Triangle,
+    DCylinder = shapes.Cylinder,
+    DCloud = shapes.Cloud;
+export { DDiamond, DTriangle, DCylinder, DCloud }; // Layouts
+
 export * from './layouts/layout';
 export * from './layouts/circle';
 export * from './layouts/flow';