@king-design/react 3.1.4-beta.2 → 3.1.4

package/components/datepicker/usePanel.js

@@ -1,47 +1,37 @@
 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,48 +6,39 @@ 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
@@ -57,13 +48,11 @@ 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));
@@ -71,22 +60,18 @@ 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"),
@@ -94,13 +79,10 @@ 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 {
@@ -112,39 +94,30 @@ 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,36 +3,28 @@ 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;
@@ -40,18 +32,14 @@ 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

@@ -12,42 +12,35 @@ import { endTime } from './helpers';
 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;
-
+      multiple = _instance$get3.multiple,
+      type = _instance$get3.type,
+      range = _instance$get3.range;
     var _value;
-
     if (range) {
       var oldValue = last(value.value);
-
       if (!oldValue || oldValue.length === 2) {
         /**
          * if we select the first value or re-select the value
@@ -58,51 +51,40 @@ export function useValue(formats, disabled, panel) {
         _value = [fixDatetimeWithMinDate(v)];
       } else {
         _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
-
         _sortInstanceProperty(_value).call(_value, function (a, b) {
           return a.isAfter(b) ? 1 : -1;
         });
       }
-
       instance.trigger('selecting', _value);
     } else {
       _value = fixDatetimeWithMinDate(v);
     }
-
     setValue(_value, false);
-
     if (type === 'datetime') {
       panel.changePanel(PanelTypes.Time, flag);
     } else if (!multiple && (!range || _value.length === 2)) {
       instance.hide();
     }
   }
-
   function fixDatetimeWithMinDate(v) {
     // the datetime must be greater than minDate, #406
     var minDate = disabled.minDate.value;
-
     if (minDate && v.isBefore(minDate)) {
       return minDate;
     }
-
     return v;
   }
-
   function fixDatetimeWithMaxDate(v) {
     // the tiem of end datetime should be set to 23:59:59, #878
     var maxDate = disabled.maxDate.value;
     var date = v.toDate();
     endTime(date);
     v = dayjs(date);
-
     if (maxDate && v.isAfter(maxDate)) {
       return maxDate;
     }
-
     return v;
   }
-
   return _extends({
     value: value,
     setValue: setValue,

package/components/datepicker/useYears.js

@@ -4,33 +4,26 @@ 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();
@@ -47,20 +40,16 @@ 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

@@ -12,23 +12,19 @@ import { DIAGRAM } from './constants';
 import { error, isNullOrUndefined } from 'intact-shared';
 import { useConfigContext } from '../config';
 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;
@@ -37,6 +33,7 @@ export var Diagram = /*#__PURE__*/function (_Component) {
     _this.layouts = new _Set();
     _this.canvasRef = createRef();
     _this.config = useConfigContext();
+    // save the orignal function, because we will change them
     _this.isCellSelectable = void 0;
     _this.isCellRotatable = void 0;
     _this.isCellMovable = void 0;
@@ -45,30 +42,25 @@ 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);
@@ -76,22 +68,17 @@ 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.");
@@ -102,64 +89,53 @@ 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();
       });
@@ -167,10 +143,8 @@ 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,15 +4,12 @@ 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 k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-diagram"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({

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.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';