@king-design/react 2.0.0-beta.0

package/components/editable/index.d.ts

@@ -0,0 +1,32 @@
+import { Component, TypeDefs } from 'intact-react';
+import type { Events } from '../types';
+declare type Value = string | number;
+export interface EditableProps<V extends Value = Value> {
+    editing?: boolean;
+    value?: V;
+    required?: boolean;
+    validate?: ((v: string) => boolean) | string | RegExp;
+    disabled?: boolean;
+    tip?: Value;
+    trim?: boolean;
+    invalid?: boolean;
+}
+export interface EditableEvents<V extends Value = Value> {
+    error: [string];
+    change: [string, V | undefined];
+}
+export declare class Editable<V extends Value = Value> extends Component<EditableProps<V>, EditableEvents<V>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<EditableProps<Value>>>;
+    static defaults: () => Partial<EditableProps<Value>>;
+    static events: Events<EditableEvents<Value>>;
+    private inputRef;
+    private edit;
+    private onBlur;
+    private onKeydown;
+    private setValue;
+}
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/editable/index.js

@@ -0,0 +1,133 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { __decorate } from "tslib";
+import { Component, createRef, nextTick } from 'intact-react';
+import template from './index.vdt';
+import { _$ } from '../../i18n';
+import { bind } from '../utils';
+var typeDefs = {
+  editing: Boolean,
+  value: [String, Number],
+  required: Boolean,
+  validate: [Function, String, RegExp],
+  disabled: Boolean,
+  tip: [String, Number],
+  trim: Boolean,
+  invalid: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    required: true,
+    tip: _$('编辑'),
+    trim: true
+  };
+};
+
+var events = {
+  error: true,
+  change: true
+};
+export var Editable = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Editable, _Component);
+
+  function Editable() {
+    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.inputRef = createRef();
+    return _this;
+  }
+
+  var _proto = Editable.prototype;
+
+  _proto.edit = function edit() {
+    var _this2 = this;
+
+    this.set('editing', true);
+    nextTick(function () {
+      _this2.inputRef.value.select();
+    });
+  };
+
+  _proto.onBlur = function onBlur(e) {
+    this.setValue(e.target.value);
+  };
+
+  _proto.onKeydown = function onKeydown(e) {
+    switch (e.keyCode) {
+      case 27:
+        // esc 
+        this.set('editing', false);
+        break;
+
+      case 13:
+        // enter
+        this.onBlur(e);
+        break;
+    }
+  };
+
+  _proto.setValue = function setValue(value) {
+    var _this$get = this.get(),
+        validate = _this$get.validate,
+        required = _this$get.required,
+        trim = _trimInstanceProperty(_this$get),
+        oldValue = _this$get.value;
+
+    if (trim) value = _trimInstanceProperty(value).call(value);
+    var valid = true;
+
+    if (required && !value) {
+      valid = false;
+    } else if (validate && value) {
+      if (typeof validate === 'function') {
+        valid = validate.call(this, value);
+      } else if (validate instanceof RegExp) {
+        valid = validate.test(value);
+      } else if (typeof validate === 'string') {
+        valid = new RegExp(validate).test(value);
+      }
+    }
+
+    if (!valid) {
+      // do not change the value if invalid, #51
+      // this.set('value', value, {silent: true});
+      this.set('invalid', true);
+      return this.trigger('error', value);
+    }
+
+    this.set({
+      invalid: false,
+      editing: false,
+      value: value
+    });
+
+    if (oldValue !== value) {
+      this.trigger('change', value, oldValue);
+    }
+  };
+
+  return Editable;
+}(Component);
+Editable.template = template;
+Editable.typeDefs = typeDefs;
+Editable.defaults = defaults;
+Editable.events = events;
+
+__decorate([bind], Editable.prototype, "edit", null);
+
+__decorate([bind], Editable.prototype, "onBlur", null);
+
+__decorate([bind], Editable.prototype, "onKeydown", null);
+
+__decorate([bind], Editable.prototype, "setValue", null);
+
+export {normalize} from 'intact-react';

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

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

package/components/editable/index.spec.js

@@ -0,0 +1,225 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/editable/demos/basic';
+import ValidateDemo from '~/components/editable/demos/validate';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { Editable } from './';
+import { Component, findDomFromVNode } from 'intact-react';
+describe('Editable', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, editable, input;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            editable = instance.refs.__test; // @ts-ignore
+
+            editable.edit();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.innerHTML).to.matchSnapshot(); // input
+
+            input = element.querySelector('input');
+            input.value = 'test';
+            dispatchEvent(input, 'blur');
+            _context.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('text')).to.eql('test'); // keydown: esc
+            // @ts-ignore
+
+            editable.edit();
+            _context.next = 16;
+            return wait();
+
+          case 16:
+            expect(element.innerHTML).to.matchSnapshot();
+            input = element.querySelector('input');
+            input.value = 'new';
+            dispatchEvent(input, 'keydown', {
+              keyCode: 27
+            });
+            _context.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('text')).to.eql('test'); // keydown: enter
+            // @ts-ignore
+
+            editable.edit();
+            _context.next = 27;
+            return wait();
+
+          case 27:
+            expect(element.innerHTML).to.matchSnapshot();
+            input = element.querySelector('input');
+            input.value = 'new';
+            dispatchEvent(input, 'keydown', {
+              keyCode: 13
+            });
+            _context.next = 33;
+            return wait();
+
+          case 33:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('text')).to.eql('new');
+
+          case 35:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('validate test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, _instance$refs, first, second, third, input;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(ValidateDemo), instance = _mount2[0], element = _mount2[1];
+            _instance$refs = instance.refs, first = _instance$refs.__test1, second = _instance$refs.__test2, third = _instance$refs.__test3; // validate
+            // @ts-ignore
+
+            first.edit();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            input = findDomFromVNode(first.$lastInput, true).querySelector('input');
+            dispatchEvent(input, 'focus');
+            input.value = 'a';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.matchSnapshot(); // @ts-ignore
+
+            second.edit();
+            _context2.next = 16;
+            return wait();
+
+          case 16:
+            input = findDomFromVNode(second.$lastInput, true).querySelector('input');
+            input.value = 'a';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.innerHTML).to.matchSnapshot(); // @ts-ignore
+
+            third.edit();
+            _context2.next = 26;
+            return wait();
+
+          case 26:
+            input = findDomFromVNode(third.$lastInput, true).querySelector('input');
+            input.value = 'a';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 32;
+            return wait();
+
+          case 32:
+            expect(element.innerHTML).to.matchSnapshot(); // required
+
+            input.value = '';
+            dispatchEvent(input, 'input');
+            dispatchEvent(input, 'blur');
+            _context2.next = 38;
+            return wait();
+
+          case 38:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 39:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('handle correctly even if the value is undefined', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance, element, input;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context3;
+
+                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(_context3 = [this]).call(_context3, args)) || this;
+                _this.Editable = Editable;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: 'test'
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "const {Editable} = this; <Editable>{this.get('value')}</Editable>";
+            _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+            expect(element.outerHTML).to.matchSnapshot();
+            element.querySelector('.k-editable-icon').click();
+            _context4.next = 7;
+            return wait();
+
+          case 7:
+            input = element.querySelector("input");
+            input.value = 'aa';
+            dispatchEvent(input, 'blur');
+            _context4.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerText).to.eql('test');
+            element.querySelector('.k-editable-icon').click();
+            _context4.next = 16;
+            return wait();
+
+          case 16:
+            input = element.querySelector("input");
+            expect(input.value).to.eql('aa');
+
+          case 18:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/editable/index.vdt.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact-react';
+import { getRestProps } from '../utils';
+import { Input } from '../input';
+import { Icon } from '../icon';
+import { makeStyles } from './styles';
+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,
+      editing = _this$get.editing,
+      value = _this$get.value,
+      validate = _this$get.validate,
+      disabled = _this$get.disabled,
+      tip = _this$get.tip,
+      invalid = _this$get.invalid;
+
+  var classNameObj = (_classNameObj = {
+    'k-editable': true,
+    'k-editing': editing,
+    'k-disabled': disabled,
+    'k-invalid': invalid
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj)
+  }), [!disabled && !editing ? _$cc(Icon, {
+    'className': 'k-icon-edit k-editable-icon',
+    'title': tip,
+    'ev-click': this.edit
+  }) : undefined, _$ce(2, 'div', !editing ? children : _$cc(Input, {
+    'size': 'small',
+    'defaultValue': value,
+    'ev-blur': this.onBlur,
+    'ev-keydown': this.onKeydown,
+    'ref': this.inputRef,
+    'frozenOnInput': true
+  }, null, this.inputRef), 0, 'c-ellipsis')]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/editable/styles.d.ts

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

package/components/editable/styles.js

@@ -0,0 +1,27 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  iconGap: '0 0 0 8px',
+  lineHeight: '30px',
+  // invalid
+  invalid: {
+    get border() {
+      return "1px solid " + theme.color.danger;
+    }
+
+  }
+};
+var editable;
+setDefault(function () {
+  editable = deepDefaults(theme, {
+    editable: defaults
+  }).editable;
+});
+export { editable };
+export function makeStyles() {
+  return /*#__PURE__*/css("display:inline-block;line-height:", editable.lineHeight, ";.k-editable-icon{float:right;cursor:pointer;margin:", editable.iconGap, ";line-height:unset;}&.k-invalid{.k-input-inner{border:", editable.invalid.border, "!important;}}");
+}
+
+export {normalize} from 'intact-react';

package/components/form/form.d.ts

@@ -0,0 +1,41 @@
+import { Component, TypeDefs } from 'intact-react';
+import type { FormItem } from './item';
+interface FormHTMLAttributes {
+    acceptcharset?: string;
+    autocomplete?: string;
+    name?: string;
+    rel?: string;
+    action?: string;
+    enctype?: string;
+    method?: 'post' | 'get' | 'dialog';
+    novalidate?: boolean;
+    target?: string;
+}
+export interface FormProps extends FormHTMLAttributes {
+    labelWidth?: string | number;
+    layout?: 'horizontal' | 'vertical' | 'inline';
+    starOnRequired?: boolean;
+    size?: 'default' | 'small' | 'mini';
+}
+export interface FormEvents {
+    submit: [Event];
+}
+export declare const FORM = "Form";
+export declare const RECORD_KEY = "FormRecord";
+export declare class Form extends Component<FormProps, FormEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<Omit<FormProps, keyof FormHTMLAttributes>>>;
+    static defaults: () => Partial<FormProps>;
+    static addMethod: (name: string, method: import("./methods").Method, message?: import("./methods").Message | undefined, className?: import("./methods").ClassName | undefined) => void;
+    private items;
+    init(): void;
+    validate(): Promise<boolean>;
+    getFirstInvalidFormItem(): FormItem | undefined;
+    submit(e: Event): void;
+    reset(): void;
+    private onSubmit;
+}
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/form/form.js

@@ -0,0 +1,103 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import { __decorate } from "tslib";
+import { Component, provide } from 'intact-react';
+import template from './form.vdt';
+import { useRecordParent } from '../../hooks/useRecordComponent';
+import { addMethod } from './methods';
+import { bind } from '../utils';
+var typeDefs = {
+  labelWidth: [String, Number],
+  layout: ['horizontal', 'vertical', 'inline'],
+  starOnRequired: Boolean,
+  size: ['default', 'small', 'mini']
+};
+
+var defaults = function defaults() {
+  return {
+    layout: 'horizontal',
+    size: 'default'
+  };
+};
+
+export var FORM = 'Form';
+export var RECORD_KEY = 'FormRecord';
+export var Form = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Form, _Component);
+
+  function Form() {
+    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.items = useRecordParent(RECORD_KEY);
+    return _this;
+  }
+
+  var _proto = Form.prototype;
+
+  _proto.init = function init() {
+    provide(FORM, this);
+  };
+
+  _proto.validate = function validate() {
+    var _context2;
+
+    return _Promise.all(_mapInstanceProperty(_context2 = this.items).call(_context2, function (item) {
+      return item.validate();
+    })).then(function (values) {
+      return values.every(function (value) {
+        return value;
+      });
+    });
+  };
+
+  _proto.getFirstInvalidFormItem = function getFirstInvalidFormItem() {
+    var _context3;
+
+    return _findInstanceProperty(_context3 = this.items).call(_context3, function (item) {
+      if (!item.isValid()) {
+        return item;
+      }
+    });
+  };
+
+  _proto.submit = function submit(e) {
+    var _this2 = this;
+
+    this.validate().then(function (valid) {
+      if (valid) {
+        _this2.trigger('submit', e);
+      }
+    });
+  };
+
+  _proto.reset = function reset() {
+    this.items.forEach(function (item) {
+      return item.reset();
+    });
+  };
+
+  _proto.onSubmit = function onSubmit(e) {
+    e.preventDefault();
+    this.submit(e);
+  };
+
+  return Form;
+}(Component);
+Form.template = template;
+Form.typeDefs = typeDefs;
+Form.defaults = defaults;
+Form.addMethod = addMethod;
+
+__decorate([bind], Form.prototype, "onSubmit", null);
+
+export {normalize} from 'intact-react';

package/components/form/form.vdt.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn } from 'intact-react';
+import { getRestProps } from '../utils';
+import { makeFormStyles } from './styles';
+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,
+      layout = _this$get.layout,
+      size = _this$get.size;
+
+  var classNameObj = (_classNameObj = {
+    'k-form': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + layout] = layout, _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeFormStyles()] = true, _classNameObj);
+  return _$cv('form', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-submit': this.onSubmit,
+    'noValidate': true
+  }), children);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/form/index.d.ts

@@ -0,0 +1,5 @@
+export * from './form';
+export * from './item';
+
+
+export {normalize} from 'intact-react';

package/components/form/index.js

@@ -0,0 +1,4 @@
+export * from './form';
+export * from './item';
+
+export {normalize} from 'intact-react';

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

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