@king-design/react 2.0.0-beta.0

package/components/datepicker/useStatus.js

@@ -0,0 +1,62 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+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;
+
+    var value = instance.get('value');
+
+    if (range) {
+      if (!value) {
+        return false;
+      }
+
+      return value.some(function (_ref) {
+        var start = _ref[0],
+            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;
+            start = end;
+            end = tmp;
+          }
+        }
+
+        if (start && end) {
+          return isGT(date, start, type) && isLT(date, end, type);
+        }
+
+        return false;
+      });
+    }
+
+    return false;
+  }
+
+  return {
+    isActive: isActive,
+    isInRange: isInRange,
+    isDisabled: instance.datepicker.disabled.isDisabled
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/datepicker/useValue.d.ts

@@ -0,0 +1,19 @@
+import { StateValueItem, DayjsValue } from './basepicker';
+import { Dayjs } from 'dayjs';
+import type { useFormats } from './useFormats';
+import type { useDisabled } from './useDisabled';
+import { PanelFlags, usePanel } from './usePanel';
+export declare function useValue(formats: ReturnType<typeof useFormats>, disabled: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>): {
+    format: () => string | string[];
+    onConfirm: () => void;
+    onChangeTime: (date: Dayjs, flag: PanelFlags) => void;
+    getTimeValue: (flag: PanelFlags) => Dayjs | null | undefined;
+    convertToDayjs: (v: import("./basepicker").Value | [import("./basepicker").Value, import("./basepicker").Value] | import("./basepicker").Value[] | [import("./basepicker").Value, import("./basepicker").Value][] | null | undefined) => DayjsValue;
+    getDayjsValue: () => DayjsValue;
+    value: import("../../hooks/useState").State<import("./basepicker").StateValue>;
+    setValue: (v: StateValueItem, fromInput: boolean) => void;
+    onChangeDate: (v: Dayjs, flag: PanelFlags) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/useValue.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["setValue", "value"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import { useInstance } from 'intact-react';
+import { useValue as useValueBase } from './basepicker';
+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(),
+        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(),
+        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);
+
+  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
+
+    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,
+    onChangeDate: onChangeDate
+  }, rest);
+}
+
+export {normalize} from 'intact-react';

package/components/datepicker/useYears.d.ts

@@ -0,0 +1,21 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { State } from '../../hooks/useState';
+import type { useStatus } from './useStatus';
+export declare function useYears(showDate: State<Dayjs>, status: ReturnType<typeof useStatus>, focusDate: State<Dayjs | null>): {
+    getYearRange: () => number[];
+    getYearLabel: () => string;
+    getYears: (now: Dayjs) => {
+        isExceed: boolean;
+        isActive: boolean;
+        isToday: boolean;
+        isDisabled: boolean;
+        isHover: boolean;
+        isInRange: boolean;
+        label: number;
+        value: dayjs.Dayjs;
+    }[];
+    onClick: (date: Dayjs) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/datepicker/useYears.js

@@ -0,0 +1,72 @@
+import { useInstance } from 'intact-react';
+import dayjs from 'dayjs';
+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];
+
+    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];
+
+    start.setFullYear(startYear - 1);
+
+    for (var i = 0; i < 12; i++) {
+      var dayjsDate = dayjs(start);
+      var year = start.getFullYear();
+      var isExceed = year < startYear || year > endYear;
+      years.push({
+        isExceed: isExceed,
+        isActive: !isExceed && status.isActive(dayjsDate, 'year'),
+        isToday: dayjsDate.isSame(now, 'year'),
+        isDisabled: status.isDisabled(dayjsDate),
+        isHover: isEqual(dayjsDate, focusDate.value, 'year'),
+        isInRange: !isExceed && status.isInRange(dayjsDate, 'year'),
+        label: year,
+        value: dayjsDate
+      });
+      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,
+    getYears: getYears,
+    onClick: onClick
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/diagram/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DIAGRAM = "DDiagram";
+export declare const SHAPE = "DShape";
+export declare const LAYOUT = "DLayout";
+
+
+export {normalize} from 'intact-react';

package/components/diagram/constants.js

@@ -0,0 +1,5 @@
+export var DIAGRAM = 'DDiagram';
+export var SHAPE = 'DShape';
+export var LAYOUT = 'DLayout';
+
+export {normalize} from 'intact-react';

package/components/diagram/defaultStyle.d.ts

@@ -0,0 +1,117 @@
+declare const style: {
+    defaultVertex: {
+        shape: string;
+        perimeter: string;
+        fontSize: number;
+        fontFamily: string;
+        align: string;
+        verticalAlign: string;
+        fillColor: string;
+        strokeColor: string;
+        fontColor: string;
+    };
+    defaultEdge: {
+        shape: string;
+        labelBackgroundColor: string;
+        endArrow: string;
+        fontSize: number;
+        fontFamily: string;
+        align: string;
+        verticalAlign: string;
+        rounded: number;
+        strokeColor: string;
+        fontColor: string;
+    };
+    text: {
+        fillColor: string;
+        gradientColor: string;
+        strokeColor: string;
+        align: string;
+        verticalAlign: string;
+    };
+    label: {
+        fontStyle: number;
+        align: string;
+        verticalAlign: string;
+        spacing: number;
+        spacingLeft: number;
+        imageWidth: number;
+        imageHeight: number;
+        rounded: number;
+    };
+    icon: {
+        fontStyle: number;
+        align: string;
+        verticalAlign: string;
+        spacing: number;
+        spacingLeft: number;
+        imageWidth: number;
+        imageHeight: number;
+        rounded: number;
+        imageAlign: string;
+        verticalLabelPosition: string;
+        spacingTop: number;
+        labelBackgroundColor: string;
+    };
+    swimline: {
+        shape: string;
+        fontSize: number;
+        fontStyle: number;
+        startSize: number;
+    };
+    group: {
+        verticalAlign: string;
+        fillColor: string;
+        strokeColor: string;
+        gradientColor: string;
+        pointerEvents: number;
+    };
+    ellipse: {
+        shape: string;
+        perimeter: string;
+    };
+    rhombus: {
+        shape: string;
+        perimeter: string;
+    };
+    triangle: {
+        shape: string;
+        perimeter: string;
+    };
+    line: {
+        shape: string;
+        strokeWidth: number;
+        labelBackgroundColor: string;
+        verticalAlign: string;
+        spacingTop: number;
+    };
+    image: {
+        shape: string;
+        labelBackgroundColor: string;
+        verticalAlign: string;
+        verticalLabelPosition: string;
+    };
+    roundImage: {
+        shape: string;
+        labelBackgroundColor: string;
+        verticalAlign: string;
+        verticalLabelPosition: string;
+        perimeter: string;
+    };
+    rhombusImage: {
+        shape: string;
+        labelBackgroundColor: string;
+        verticalAlign: string;
+        verticalLabelPosition: string;
+        perimeter: string;
+    };
+    arrow: {
+        shape: string;
+        edgeStyle: string;
+        fillColor: string;
+    };
+};
+export default style;
+
+
+export {normalize} from 'intact-react';

package/components/diagram/defaultStyle.js

@@ -0,0 +1,116 @@
+var style = {
+  defaultVertex: {
+    "shape": "label",
+    "perimeter": "rectanglePerimeter",
+    "fontSize": 12,
+    "fontFamily": "Helvetica",
+    "align": "center",
+    "verticalAlign": "middle",
+    "fillColor": "#ffffff",
+    "strokeColor": "#000000",
+    "fontColor": "#000000"
+  },
+  defaultEdge: {
+    "shape": "connector",
+    "labelBackgroundColor": "#ffffff",
+    "endArrow": "classic",
+    "fontSize": 11,
+    "fontFamily": "Helvetica",
+    "align": "center",
+    "verticalAlign": "middle",
+    "rounded": 1,
+    "strokeColor": "#000000",
+    "fontColor": "#000000"
+  },
+  text: {
+    "fillColor": "none",
+    "gradientColor": "none",
+    "strokeColor": "none",
+    "align": "left",
+    "verticalAlign": "top"
+  },
+  label: {
+    "fontStyle": 1,
+    "align": "left",
+    "verticalAlign": "middle",
+    "spacing": 2,
+    "spacingLeft": 52,
+    "imageWidth": 42,
+    "imageHeight": 42,
+    "rounded": 1
+  },
+  icon: {
+    "fontStyle": 0,
+    "align": "center",
+    "verticalAlign": "top",
+    "spacing": 0,
+    "spacingLeft": 0,
+    "imageWidth": 48,
+    "imageHeight": 48,
+    "rounded": 1,
+    "imageAlign": "center",
+    "verticalLabelPosition": "bottom",
+    "spacingTop": 6,
+    "labelBackgroundColor": "#ffffff"
+  },
+  swimline: {
+    "shape": "swimlane",
+    "fontSize": 12,
+    "fontStyle": 1,
+    "startSize": 23
+  },
+  group: {
+    "verticalAlign": "top",
+    "fillColor": "none",
+    "strokeColor": "none",
+    "gradientColor": "none",
+    "pointerEvents": 0
+  },
+  ellipse: {
+    "shape": "ellipse",
+    "perimeter": "ellipsePerimeter"
+  },
+  rhombus: {
+    "shape": "rhombus",
+    "perimeter": "rhombusPerimeter"
+  },
+  triangle: {
+    "shape": "triangle",
+    "perimeter": "trianglePerimeter"
+  },
+  line: {
+    "shape": "line",
+    "strokeWidth": 4,
+    "labelBackgroundColor": "#ffffff",
+    "verticalAlign": "top",
+    "spacingTop": 8
+  },
+  image: {
+    "shape": "image",
+    "labelBackgroundColor": "white",
+    "verticalAlign": "top",
+    "verticalLabelPosition": "bottom"
+  },
+  roundImage: {
+    "shape": "image",
+    "labelBackgroundColor": "white",
+    "verticalAlign": "top",
+    "verticalLabelPosition": "bottom",
+    "perimeter": "ellipsePerimeter"
+  },
+  rhombusImage: {
+    "shape": "image",
+    "labelBackgroundColor": "white",
+    "verticalAlign": "top",
+    "verticalLabelPosition": "bottom",
+    "perimeter": "rhombusPerimeter"
+  },
+  arrow: {
+    "shape": "arrow",
+    "edgeStyle": "none",
+    "fillColor": "#ffffff"
+  }
+};
+export default style;
+
+export {normalize} from 'intact-react';

package/components/diagram/diagram.d.ts

@@ -0,0 +1,43 @@
+import { Component, Key } from 'intact-react';
+import type { DShape } from './shapes/shape';
+import type { DLine } from './shapes/line';
+import type { DLayout } from './layouts/layout';
+import type { Events } from '../types';
+export interface DiagramProps {
+}
+export interface DiagramEvents {
+    labelChanged: [any, string, string];
+    selectionChanged: [any[]];
+}
+export declare class Diagram extends Component<DiagramProps, DiagramEvents> {
+    static template: string | import("intact").Template<any>;
+    static events: Events<DiagramEvents>;
+    graph: any;
+    cell: any;
+    shapes: Map<Key, DShape>;
+    private lines;
+    private layouts;
+    private canvasRef;
+    private isCellSelectable;
+    private isCellRotatable;
+    private isCellMovable;
+    private isCellResizable;
+    private isCellEditable;
+    private isCellConnectable;
+    init(): void;
+    mounted(): void;
+    updated(): void;
+    beforeUnmount(): void;
+    addShape(shape: DShape): void;
+    deleteShape(shape: DShape): void;
+    addLine(line: DLine): void;
+    deleteLine(line: DLine): void;
+    addLayout(layout: DLayout): void;
+    deleteLayout(layout: DLayout): void;
+    private onSelectionChange;
+    private initGraph;
+    private draw;
+}
+
+
+export {normalize} from 'intact-react';