@king-design/react 2.0.0-beta.0

package/components/progress/index.spec.js

@@ -0,0 +1,235 @@
+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 ChildrenDemo from '~/components/progress/demos/children';
+import CustomColorDemo from '~/components/progress/demos/customColor';
+import { mount, unmount, wait } from '../../test/utils';
+import { Progress } from './';
+import { Component } from 'intact-react';
+describe('Progress', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('change percent', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(ChildrenDemo), instance = _mount[0], element = _mount[1];
+            instance.set('percent', 100);
+            _context.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.outerHTML).to.matchSnapshot();
+            instance.set('percent', 110);
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.outerHTML).to.matchSnapshot();
+            instance.set('percent', 90);
+            _context.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.outerHTML).to.matchSnapshot();
+            instance.set('percent', -10);
+            _context.next = 16;
+            return wait();
+
+          case 16:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 17:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should use the specified status when status is error', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context2;
+
+                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(_context2 = [this]).call(_context2, args)) || this;
+                _this.Progress = Progress;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const Progress = this.Progress;\n                <Progress percent={this.get('value')} status=\"error\" />\n            ";
+
+            Demo.defaults = function () {
+              return {
+                value: 100
+              };
+            };
+
+            _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
+            expect(element.classList.contains('k-error')).to.be.true;
+            instance.set('value', 90);
+            _context3.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.classList.contains('k-error')).to.be.true;
+            instance.set('value', 100);
+            _context3.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.classList.contains('k-error')).to.be.true;
+
+          case 13:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should not use the specified status when percent equal 100', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context4;
+
+                var _this2;
+
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context4 = [this]).call(_context4, args)) || this;
+                _this2.Progress = Progress;
+                return _this2;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const Progress = this.Progress;\n                <Progress percent={this.get('value')} status={this.get('status')} />\n            ";
+
+            Demo.defaults = function () {
+              return {
+                value: '100',
+                status: 'normal'
+              };
+            };
+
+            _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+            expect(element.classList.contains('k-success')).to.be.true;
+            instance.forceUpdate();
+            _context5.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.classList.contains('k-success')).to.be.true;
+            instance.set('status', 'active');
+            _context5.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.classList.contains('k-success')).to.be.true;
+            instance.set('status', 'warning');
+            _context5.next = 16;
+            return wait();
+
+          case 16:
+            expect(element.classList.contains('k-success')).to.be.true;
+            instance.set('value', 90);
+            _context5.next = 20;
+            return wait();
+
+          case 20:
+            expect(element.classList.contains('k-warning')).to.be.true;
+            instance.set('value', 100);
+            _context5.next = 24;
+            return wait();
+
+          case 24:
+            expect(element.classList.contains('k-success')).to.be.true;
+            instance.set('status', 'error');
+            _context5.next = 28;
+            return wait();
+
+          case 28:
+            expect(element.classList.contains('k-error')).to.be.true;
+
+          case 29:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should custom colors', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount4 = mount(CustomColorDemo), instance = _mount4[0], element = _mount4[1];
+            instance.set('percent', 25);
+            _context6.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.outerHTML).to.matchSnapshot();
+            instance.set('percent', 50);
+            _context6.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.outerHTML).to.matchSnapshot();
+            instance.set('percent', 75);
+            _context6.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.outerHTML).to.matchSnapshot();
+            instance.set('percent', 100);
+            _context6.next = 16;
+            return wait();
+
+          case 16:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 17:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/progress/index.vdt.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createTextVNode as _$ct, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+var _$tmp0 = {
+  'attributeName': 'opacity',
+  'begin': '0s',
+  'dur': '2s',
+  'repeatCount': 'indefinite',
+  'from': '0.2',
+  'to': '0'
+};
+var _$tmp1 = {
+  'viewBox': '0 0 120 120'
+};
+var _$tmp2 = {
+  'className': 'k-progress-icon k-icon-truth'
+};
+var _$tmp3 = {
+  'className': 'k-progress-icon k-icon-fault'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, r, circumference;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      type = _this$get.type,
+      className = _this$get.className,
+      percent = _this$get.percent,
+      size = _this$get.size,
+      showOuterText = _this$get.showOuterText,
+      showInnerText = _this$get.showInnerText,
+      strokeWidth = _this$get.strokeWidth,
+      children = _this$get.children;
+
+  var status = this.status.value;
+  var background = this.color.value || '';
+  var classNameObj = (_classNameObj = {
+    'k-progress': true
+  }, _classNameObj["k-" + type] = type, _classNameObj[className] = className, _classNameObj["k-" + status] = status !== 'normal', _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [type === 'bar' ? _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'div', showInnerText ? _$ce(2, 'div', [percent, _$ct(' %\n                ')], 0, 'k-progress-inner-text') : undefined, 0, 'k-progress-bg', {
+    'style': {
+      width: percent + '%',
+      background: background
+    }
+  }), 2, 'k-progress-content'), 2, 'k-progress-container') : undefined, type === 'circle' ? _$ce(512, 'svg', (r = (120 - strokeWidth) / 2, circumference = 2 * Math.PI * r, [_$ce(2, 'circle', null, 1, 'k-progress-meter', {
+    'cx': '60',
+    'cy': '60',
+    'r': r,
+    'stroke-width': strokeWidth
+  }), _$ce(2, 'circle', null, 1, 'k-progress-value', {
+    'cx': '60',
+    'cy': '60',
+    'r': r,
+    'stroke-dashoffset': circumference * (1 - percent / 100),
+    'stroke-dasharray': circumference,
+    'stroke-width': strokeWidth
+  }), status === 'active' ? _$ce(2, 'circle', [_$ce(2, 'animate', null, 1, null, {
+    'attributeName': 'stroke-dashoffset',
+    'begin': '0s',
+    'dur': '2s',
+    'repeatCount': 'indefinite',
+    'from': circumference,
+    'to': circumference * (1 - percent / 100)
+  }), _$ce(2, 'animate', null, 1, null, _$tmp0)], 4, 'k-progress-animate', {
+    'cx': '60',
+    'cy': '60',
+    'r': r,
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': circumference,
+    'stroke-dashoffset': circumference
+  }) : undefined]), 0, 'k-progress-canvas', _$tmp1) : undefined, children ? _$ce(2, 'div', children, 0, 'k-progress-text') : showOuterText ? _$ce(2, 'div', status !== 'success' && status !== 'error' ? _$ce(2, 'span', [percent, _$ct('%')], 0) : status === 'success' ? _$ce(2, 'span', _$cc(Icon, _$tmp2), 2) : status === 'error' ? _$ce(2, 'span', _$cc(Icon, _$tmp3), 2) : undefined, 0, 'k-progress-text') : undefined]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/progress/styles.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare const types: readonly ["active", "normal", "error", "success", "warning"];
+export declare function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/progress/styles.js

@@ -0,0 +1,88 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+
+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, keyframes } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+export var types = ['active', 'normal', 'error', 'success', 'warning'];
+var sizes = ['small', 'mini'];
+var progressBarAnimation = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
+  name: "ecxna4",
+  styles: "from{opacity:0.2;width:14px;margin-left:14px;}to{opacity:0;width:100%;}"
+} : {
+  name: "ecxna4",
+  styles: "from{opacity:0.2;width:14px;margin-left:14px;}to{opacity:0;width:100%;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var defaults = {
+  stokeColor: {
+    get normal() {
+      return theme.color.primary;
+    },
+
+    get success() {
+      return theme.color.success;
+    },
+
+    get error() {
+      return theme.color.danger;
+    },
+
+    get warning() {
+      return theme.color.warning;
+    },
+
+    color: '#eaeef2'
+  },
+  animation: {
+    transition: 'all .6s ease'
+  },
+  bar: {
+    fontColor: '#404040',
+    height: '16px',
+    textWidth: '40px',
+    textMarginLeft: '16px',
+    innerText: {
+      fontSize: '12px',
+      padding: "0 10px 0 3px"
+    },
+    small: {
+      height: '10px',
+      fontSize: '12px'
+    },
+    mini: {
+      height: '4px',
+      fontSize: '12px'
+    }
+  },
+  circle: {
+    width: '104px',
+    fontSize: '16px',
+    small: {
+      width: '80px',
+      fontSize: '14px'
+    },
+    mini: {
+      width: '40px',
+      fontSize: '12px'
+    }
+  }
+};
+var progress;
+setDefault(function () {
+  progress = deepDefaults(theme, {
+    progress: defaults
+  }).progress;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("position:relative;line-height:1;&.k-bar{display:flex;align-items:center;.k-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.k-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.k-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.k-progress-inner-text{display:inline-block;vertical-align:middle;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.k-success{.k-progress-bg{background:", progress.stokeColor.success, ";}.k-progress-icon{color:", progress.stokeColor.success, ";}}&.k-error{.k-progress-bg{background:", progress.stokeColor.error, ";}.k-progress-icon{color:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-bg{background:", progress.stokeColor.warning, ";}}&.k-active{.k-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    return /*#__PURE__*/css("&.k-", size, "{font-size:", progress.bar[size].fontSize, ";.k-progress-container{height:", progress.bar[size].height, ";}}");
+  }), " .k-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";}}&.k-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var styles = progress.circle[size];
+    return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";}");
+  }), ";.k-progress-canvas{transform:rotate(-90deg);}.k-progress-meter,.k-progress-value,.k-progress-animate{fill:none;}.k-progress-meter{stroke:", progress.stokeColor.color, ";}.k-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.k-progress-animate{stroke:#fff;stroke-linecap:round;}.k-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}&.k-success{.k-progress-value{stroke:", progress.stokeColor.success, ";}}&.k-error{.k-progress-value{stroke:", progress.stokeColor.error, ";}}}");
+}
+
+export {normalize} from 'intact-react';

package/components/progress/useColor.d.ts

@@ -0,0 +1,7 @@
+export declare function useColor(): import("../../hooks/useState").State<string | {
+    percent: string | number;
+    color: string;
+}[] | ((percent: number) => string) | undefined>;
+
+
+export {normalize} from 'intact-react';

package/components/progress/useColor.js

@@ -0,0 +1,36 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import { useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { isFunction, isString, isArray } from 'intact-shared';
+export function useColor() {
+  var instance = useInstance();
+  var backGroundColor = useState(undefined);
+
+  function setColor() {
+    var _instance$get = instance.get(),
+        percent = _instance$get.percent,
+        color = _instance$get.color;
+
+    if (!color) return;
+
+    if (isFunction(color)) {
+      backGroundColor.set(color(percent));
+    } else if (isArray(color)) {
+      var item = _findInstanceProperty(color).call(color, function (v) {
+        return v.percent === percent;
+      });
+
+      if (item && item.color) {
+        backGroundColor.set(item.color);
+      }
+    } else if (isString(color)) {
+      backGroundColor.set(color);
+    }
+  }
+
+  instance.on('$receive:color', setColor);
+  instance.watch('percent', setColor);
+  return backGroundColor;
+}
+
+export {normalize} from 'intact-react';

package/components/progress/useStatus.d.ts

@@ -0,0 +1,4 @@
+export declare function useStatus(): import("../../hooks/useState").State<"error" | "warning" | "success" | "normal" | "active">;
+
+
+export {normalize} from 'intact-react';

package/components/progress/useStatus.js

@@ -0,0 +1,24 @@
+import { useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
+export function useStatus() {
+  var instance = useInstance();
+  var status = useState('active');
+
+  function setStatus() {
+    var _instance$get = instance.get(),
+        _status = _instance$get.status,
+        percent = _instance$get.percent;
+
+    if (Number(percent) === 100 && _status !== 'error') {
+      status.set('success');
+    } else {
+      status.set(_status);
+    }
+  }
+
+  useReceive(['status', 'percent'], setStatus);
+  return status;
+}
+
+export {normalize} from 'intact-react';

package/components/radio/index.d.ts

@@ -0,0 +1,24 @@
+import { Component, TypeDefs } from 'intact-react';
+import type { CommonInputHTMLAttributes, Events } from '../types';
+export interface RadioProps<Value = false, True = true> extends CommonInputHTMLAttributes {
+    disabled?: boolean;
+    value?: Value | True;
+    trueValue?: True;
+}
+export interface RadioEvents<True = true> {
+    click: [MouseEvent];
+    change: [True, MouseEvent];
+}
+export declare class Radio<Value = false, True = true> extends Component<RadioProps<Value, True>, RadioEvents<True>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<Omit<RadioProps<false, true>, keyof CommonInputHTMLAttributes>>>;
+    static defaults: () => Partial<RadioProps<false, true>>;
+    static events: Events<RadioEvents<true>>;
+    private elementRef;
+    private onKeypress;
+    private onClick;
+    private fixClick;
+}
+
+
+export {normalize} from 'intact-react';

package/components/radio/index.js

@@ -0,0 +1,84 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, createRef } from 'intact-react';
+import { bind } from '../utils';
+import template from './index.vdt';
+var typeDefs = {
+  disabled: Boolean,
+  value: null,
+  trueValue: null
+};
+
+var defaults = function defaults() {
+  return {
+    value: false,
+    trueValue: true
+  };
+};
+
+var events = {
+  click: true,
+  change: true
+};
+export var Radio = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Radio, _Component);
+
+  function Radio() {
+    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.elementRef = createRef();
+    return _this;
+  }
+
+  var _proto = Radio.prototype;
+
+  _proto.onKeypress = function onKeypress(e) {
+    if (e.keyCode === 13) {
+      this.elementRef.value.click();
+    }
+  };
+
+  _proto.onClick = function onClick(e) {
+    var _this$get = this.get(),
+        value = _this$get.value,
+        trueValue = _this$get.trueValue,
+        disabled = _this$get.disabled;
+
+    if (!disabled && value !== trueValue) {
+      this.set('value', trueValue);
+      this.trigger('click', e);
+      this.trigger('change', trueValue, e);
+    } else {
+      this.trigger('click', e);
+    }
+  };
+
+  _proto.fixClick = function fixClick(e) {
+    // ignore the click event from label, otherwise it will trigger click event twice
+    if (e.target !== this.refs.input) {
+      e.stopPropagation();
+    }
+  };
+
+  return Radio;
+}(Component);
+Radio.template = template;
+Radio.typeDefs = typeDefs;
+Radio.defaults = defaults;
+Radio.events = events;
+
+__decorate([bind], Radio.prototype, "onKeypress", null);
+
+__decorate([bind], Radio.prototype, "onClick", null);
+
+__decorate([bind], Radio.prototype, "fixClick", null);
+
+export {normalize} from 'intact-react';

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

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