@king-design/react 2.0.0-beta.0

package/components/code/crossDomain.js

@@ -0,0 +1,48 @@
+import _URL from "@babel/runtime-corejs3/core-js/url";
+export function crossDomainWorker() {
+  if (!window.MonacoEnvironment) return;
+  var oldGetWorkerUrl = window.MonacoEnvironment.getWorkerUrl;
+  if (oldGetWorkerUrl.$) return;
+  oldGetWorkerUrl.$ = true;
+
+  window.MonacoEnvironment.getWorkerUrl = function (moduleId, label) {
+    var workerUrl = oldGetWorkerUrl(moduleId, label);
+
+    var _isSameOrigin = isSameOrigin(workerUrl),
+        isSame = _isSameOrigin.isSame,
+        url = _isSameOrigin.url;
+    /* istanbul ignore else */
+
+
+    if (isSame) return workerUrl;else {
+      var blob;
+
+      try {
+        blob = new Blob(["importScripts('" + url + "');"], {
+          type: 'application/javascript'
+        });
+      } catch (e) {
+        var blobBuilder = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder)();
+        blobBuilder.append("importScripts('" + url + "');");
+        blob = blobBuilder.getBlob('application/javascript');
+      }
+
+      var URL = _URL || window.webkitURL;
+      var blobUrl = URL.createObjectURL(blob);
+      return blobUrl;
+    }
+  };
+}
+
+function isSameOrigin(url) {
+  var loc = window.location;
+  var a = document.createElement('a');
+  a.href = url;
+  return {
+    isSame: a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol,
+    // maybe the protocol is relative
+    url: a.href
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/code/index.d.ts

@@ -0,0 +1,26 @@
+import { Component, TypeDefs } from 'intact-react';
+import type { editor } from 'monaco-editor';
+import type { Events } from '../types';
+export interface CodeProps {
+    value?: string;
+    language?: string;
+    theme?: 'vs' | 'vs-dark' | 'hc-black';
+    readOnly?: boolean;
+    width?: string;
+    height?: string;
+    options?: editor.IStandaloneEditorConstructionOptions;
+}
+export interface CodeEvents {
+    ready: [editor.IStandaloneCodeEditor, typeof editor];
+}
+export declare class Code extends Component<CodeProps, CodeEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CodeProps>>;
+    static defaults: () => Partial<CodeProps>;
+    static events: Events<CodeEvents>;
+    private editor;
+    getEditor(): editor.IStandaloneCodeEditor | null;
+}
+
+
+export {normalize} from 'intact-react';

package/components/code/index.js

@@ -0,0 +1,58 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-react';
+import template from './index.vdt';
+import { useEditor } from './useEditor';
+var typeDefs = {
+  value: String,
+  language: String,
+  theme: ['vs', 'vs-dark', 'hc-black'],
+  readOnly: Boolean,
+  width: String,
+  height: String,
+  options: Object
+};
+
+var defaults = function defaults() {
+  return {
+    value: '',
+    language: 'javascript',
+    theme: 'vs',
+    options: {}
+  };
+};
+
+var events = {
+  ready: true
+};
+export var Code = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Code, _Component);
+
+  function Code() {
+    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.editor = useEditor();
+    return _this;
+  }
+
+  var _proto = Code.prototype;
+
+  _proto.getEditor = function getEditor() {
+    return this.editor.getEditor();
+  };
+
+  return Code;
+}(Component);
+Code.template = template;
+Code.typeDefs = typeDefs;
+Code.defaults = defaults;
+Code.events = events;
+
+export {normalize} from 'intact-react';

package/components/code/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/code/index.spec.js

@@ -0,0 +1,73 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import BasicDemo from '~/components/code/demos/basic';
+import { mount, unmount, wait } from '../../test/utils';
+describe('Code', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should update status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, code, set, editor;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            this.timeout(0);
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            code = instance.$lastInput.children;
+            _context.next = 5;
+            return new _Promise(function (resolve) {
+              code.on('ready', resolve);
+            });
+
+          case 5:
+            set = function set(name, value) {
+              code.set(name, value);
+              code.trigger("$receive:" + name, value);
+            }; // change language
+
+
+            set('language', 'php');
+            expect(element.dataset.modeId).to.eql('php'); // change theme
+
+            set('theme', 'vs-dark');
+            expect(element.querySelector('.monaco-editor').classList.contains('vs-dark')).to.be.true; // change options
+
+            set('options', {
+              minimap: {
+                enabled: false
+              }
+            });
+            expect(element.querySelector('.minimap').style.width).to.eql('0px'); // change size
+
+            set('height', '300px');
+            _context.next = 15;
+            return wait(0);
+
+          case 15:
+            expect(element.querySelector('.monaco-editor').style.height).to.eql('300px'); // change value
+
+            editor = code.getEditor();
+            editor.setValue('test');
+            expect(instance.get('value')).to.eql('test');
+            instance.set('value', 'hello');
+            _context.next = 22;
+            return wait();
+
+          case 22:
+            expect(editor.getValue()).to.eql('hello'); // change readonly
+
+            set('readOnly', true);
+
+          case 24:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/code/index.vdt.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { addStyle, getRestProps } from '../utils';
+import { Spin } from '../spin';
+import { makeStyles } from './styles';
+var _$tmp0 = {
+  'center': true,
+  'overlay': true,
+  'size': 'small'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      width = _this$get.width,
+      height = _this$get.height,
+      className = _this$get.className,
+      style = _this$get.style;
+
+  var classNameObj = (_classNameObj = {
+    'k-code': true
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+
+  if (width || height) {
+    var _style = {};
+
+    if (width) {
+      _style.width = width;
+    }
+
+    if (height) {
+      _style.height = height;
+    }
+
+    style = addStyle(style, _style);
+  }
+
+  var _this$editor = this.editor,
+      elementRef = _this$editor.elementRef,
+      loading = _this$editor.loading;
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': style,
+    'ref': elementRef
+  }), loading.value ? _$cc(Spin, _$tmp0) : undefined);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/code/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/code/styles.js

@@ -0,0 +1,16 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from '@emotion/css';
+import '../../styles/global';
+export function makeStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "1wv4onu",
+    styles: "position:relative;height:100%"
+  } : {
+    name: "1wv4onu",
+    styles: "position:relative;height:100%",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}
+
+export {normalize} from 'intact-react';

package/components/code/useEditor.d.ts

@@ -0,0 +1,9 @@
+import type { editor } from 'monaco-editor';
+export declare function useEditor(): {
+    elementRef: import('intact-react').RefObject<HTMLElement>;
+    loading: import("../../hooks/useState").State<boolean>;
+    getEditor: () => editor.IStandaloneCodeEditor | null;
+};
+
+
+export {normalize} from 'intact-react';

package/components/code/useEditor.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, createRef, onMounted, onBeforeUnmount } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { crossDomainWorker } from './crossDomain';
+export function useEditor() {
+  var instance = useInstance();
+  var elementRef = createRef();
+  var loading = useState(true);
+  var codeEditor = null;
+  onMounted(function () {
+    import('monaco-editor').then(function (monaco) {
+      if (instance.$unmounted) return;
+      crossDomainWorker();
+
+      var _instance$get = instance.get(),
+          value = _instance$get.value,
+          language = _instance$get.language,
+          theme = _instance$get.theme,
+          readOnly = _instance$get.readOnly,
+          options = _instance$get.options;
+
+      var Editor = monaco.editor;
+      codeEditor = Editor.create(elementRef.value, _extends({
+        value: value,
+        language: language,
+        theme: theme,
+        readOnly: readOnly
+      }, options));
+      watch(Editor, codeEditor);
+      loading.set(false);
+      instance.trigger('ready', codeEditor, Editor);
+    });
+  });
+  onBeforeUnmount(function () {
+    if (codeEditor) {
+      codeEditor.dispose();
+      codeEditor = null;
+    }
+  });
+  useResizeObserver(elementRef, function () {
+    if (codeEditor) {
+      codeEditor.layout();
+    }
+  });
+
+  function watch(Editor, codeEditor) {
+    instance.on('$receive:language', function (v) {
+      Editor.setModelLanguage(codeEditor.getModel(), v);
+    });
+    instance.on('$receive:theme', function (v) {
+      Editor.setTheme(v);
+    });
+    instance.on('$receive:options', function (v) {
+      codeEditor.updateOptions(v);
+    });
+    instance.on('$receive:value', function (v) {
+      codeEditor.setValue(v);
+    });
+    instance.on('$receive:readOnly', function (v) {
+      codeEditor.updateOptions({
+        readOnly: v
+      });
+    });
+    codeEditor.onDidChangeModelContent(function (e) {
+      instance.set('value', codeEditor.getValue());
+    });
+  }
+
+  function getEditor() {
+    return codeEditor;
+  }
+
+  return {
+    elementRef: elementRef,
+    loading: loading,
+    getEditor: getEditor
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/collapse/index.d.ts

@@ -0,0 +1,23 @@
+import { Component, TypeDefs } from 'intact-react';
+export * from './item';
+declare type ArrowType = 'left' | 'right';
+export interface CollapseProps {
+    value?: string[];
+    accordion?: boolean;
+    arrow?: ArrowType;
+    noBorder?: boolean;
+}
+export interface CollapseEvents {
+}
+export declare const COLLAPSE = "Collapse";
+export declare class Collapse extends Component<CollapseProps, CollapseEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CollapseProps>>;
+    static defaults: () => Partial<CollapseProps>;
+    init(): void;
+    changeValue(v: string): void;
+    private isActive;
+}
+
+
+export {normalize} from 'intact-react';

package/components/collapse/index.js

@@ -0,0 +1,57 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component, provide } from 'intact-react';
+import template from './index.vdt';
+import { toggleArray } from '../utils';
+export * from './item';
+var typeDefs = {
+  value: Array,
+  accordion: Boolean,
+  arrow: String,
+  noBorder: Boolean
+};
+export var COLLAPSE = 'Collapse';
+
+var defaults = function defaults() {
+  return {
+    arrow: 'right'
+  };
+};
+
+export var Collapse = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Collapse, _Component);
+
+  function Collapse() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Collapse.prototype;
+
+  _proto.init = function init() {
+    provide(COLLAPSE, this);
+  };
+
+  _proto.changeValue = function changeValue(v) {
+    var _this$get = this.get(),
+        value = _this$get.value,
+        accordion = _this$get.accordion;
+
+    var _value = accordion ? this.isActive(v) ? [] : [v] : toggleArray(value, v);
+
+    this.set('value', _value);
+  };
+
+  _proto.isActive = function isActive(v) {
+    var _this$get2 = this.get(),
+        value = _this$get2.value;
+
+    if (!Array.isArray(value)) return false;
+    return !!~value.indexOf(v);
+  };
+
+  return Collapse;
+}(Component);
+Collapse.template = template;
+Collapse.typeDefs = typeDefs;
+Collapse.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/collapse/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/collapse/index.spec.js

@@ -0,0 +1,84 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/collapse/demos/basic';
+import AccordionDemo from '~/components/collapse/demos/accordion';
+import { mount, unmount, wait } from '../../test/utils';
+describe('Collapse', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should toggle expand', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, title1, title2, title3, html;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            this.timeout(0);
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-collapse-title'), title1 = _element$querySelecto[0], title2 = _element$querySelecto[1], title3 = _element$querySelecto[2];
+            title2.click();
+            _context.next = 6;
+            return wait(500);
+
+          case 6:
+            // the innerHTML is different on travis and local environment
+            expect(element.innerHTML.replace(/ style=""/g, '')).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(['$0', '$1']);
+            title1.click();
+            _context.next = 11;
+            return wait(500);
+
+          case 11:
+            html = element.innerHTML.replace(/ style=""/g, '');
+            expect(html).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(['$1']);
+            title3.click();
+            _context.next = 17;
+            return wait(500);
+
+          case 17:
+            expect(element.innerHTML.replace(/ style=""/g, '')).to.eql(html);
+            expect(instance.get('value')).to.eql(['$1']);
+
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, this);
+  })));
+  it('should expand only one panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _element$querySelecto2, title1, title2;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(AccordionDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-collapse-title'), title1 = _element$querySelecto2[0], title2 = _element$querySelecto2[1];
+            title2.click();
+            _context2.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.innerHTML.replace(/ style=""/g, '')).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(['$1']);
+            title2.click();
+            _context2.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(element.innerHTML.replace(/ style=""/g, '')).to.matchSnapshot();
+            expect(instance.get('value')).to.eql([]);
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/collapse/index.vdt.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn } from 'intact-react';
+import { CollapseItem } from './item';
+import { mapChildren, getRestProps } from '../utils';
+import { makeStyles } from './styles';
+import { isNullOrUndefined } from 'intact-shared';
+import { directClone } from 'intact';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      className = _this$get.className,
+      arrow = _this$get.arrow,
+      noBorder = _this$get.noBorder;
+
+  var classNameObj = (_classNameObj = {
+    'k-collapse': true
+  }, _classNameObj[makeStyles()] = true, _classNameObj[className] = className, _classNameObj['k-left'] = arrow === 'left', _classNameObj['k-border'] = !noBorder, _classNameObj);
+
+  var _children = mapChildren(children, function (vNode, index) {
+    if (vNode.tag === CollapseItem) {
+      var props = _extends({}, vNode.props);
+
+      if (isNullOrUndefined(props.value)) {
+        props.value = "$" + index;
+      }
+
+      var clonedVNode = directClone(vNode);
+      clonedVNode.props = props;
+      return clonedVNode;
+    }
+
+    return vNode;
+  });
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), _children);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/collapse/item.d.ts

@@ -0,0 +1,24 @@
+import { Component, TypeDefs, VNode } from 'intact-react';
+export interface CollapseItemProps {
+    value?: string;
+    title?: string | VNode;
+    disabled?: boolean;
+}
+export interface CollapseItemEvents {
+    show: [CollapseItem];
+    hide: [CollapseItem];
+}
+export interface CollapseItemBlocks {
+    title: null;
+}
+export declare class CollapseItem extends Component<CollapseItemProps, CollapseItemEvents, CollapseItemBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CollapseItemProps>>;
+    private collapse;
+    toggle(): void;
+    private onEnter;
+    private onAfterLeave;
+}
+
+
+export {normalize} from 'intact-react';

package/components/collapse/item.js

@@ -0,0 +1,52 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, inject } from 'intact-react';
+import { COLLAPSE } from './index';
+import template from './item.vdt';
+import { bind } from '../utils';
+var typeDefs = {
+  value: String,
+  title: [String, Object],
+  disabled: Boolean
+};
+export var CollapseItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(CollapseItem, _Component);
+
+  function CollapseItem() {
+    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.collapse = inject(COLLAPSE);
+    return _this;
+  }
+
+  var _proto = CollapseItem.prototype;
+
+  _proto.toggle = function toggle() {
+    if (this.get('disabled')) return;
+    this.collapse.changeValue(this.get('value'));
+  };
+
+  _proto.onEnter = function onEnter() {
+    this.trigger('show', this);
+  };
+
+  _proto.onAfterLeave = function onAfterLeave() {
+    this.trigger('hide', this);
+  };
+
+  return CollapseItem;
+}(Component);
+CollapseItem.template = template;
+CollapseItem.typeDefs = typeDefs;
+
+__decorate([bind], CollapseItem.prototype, "toggle", null);
+
+export {normalize} from 'intact-react';