@king-design/react 2.0.0-beta.0

package/components/collapse/item.vdt.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { Transition } from 'intact';
+import { expandAnimationCallbacks, getRestProps } from '../utils';
+import { kls, makeItemStyles } from './styles';
+import { Icon } from '../icon';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _$cn2,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      title = _this$get.title,
+      value = _this$get.value,
+      className = _this$get.className,
+      disabled = _this$get.disabled;
+
+  var isActive = this.collapse.isActive(value);
+  var classNameObj = (_classNameObj = {
+    'k-collapse-item': true
+  }, _classNameObj[makeItemStyles()] = true, _classNameObj[className] = className, _classNameObj['k-active'] = isActive, _classNameObj['k-disabled'] = disabled, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
+    return title;
+  }, __$blocks['title'] = function ($super, data) {
+    var block = $blocks['title'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['title'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['title'](_$no)), _$cc(Icon, {
+    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['ion-ios-arrow-right'] = true, _$cn2))
+  })], 0, _$cn(kls('title')), {
+    'ev-click': this.toggle
+  }), _$cc(Transition, _extends({
+    'show': isActive
+  }, expandAnimationCallbacks, {
+    'className': _$cn(kls('content')),
+    'onEnter': function onEnter(el) {
+      expandAnimationCallbacks.onEnter(el);
+
+      _this.onEnter();
+    },
+    'onAfterLeave': function onAfterLeave(el) {
+      expandAnimationCallbacks.onAfterLeave(el);
+
+      _this.onAfterLeave();
+    },
+    'children': _$ce(2, 'div', children, 0, _$cn(kls('wrapper')))
+  }))]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/collapse/styles.d.ts

@@ -0,0 +1,7 @@
+import '../../styles/global';
+export declare const kls: (className: string) => string;
+export declare function makeStyles(): string;
+export declare function makeItemStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/collapse/styles.js

@@ -0,0 +1,33 @@
+import { deepDefaults } from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import { css } from '@emotion/css';
+import '../../styles/global';
+export var kls = function kls(className) {
+  return "k-collapse-" + className;
+};
+var defaults = {
+  fontSize: '12px',
+  titleMarginRight: '8px',
+  borderPadding: '0 24px',
+  collBorder: '1px solid #eee',
+  item: {
+    borderBottom: '1px solid #e5e5e5',
+    titleHeight: '40px',
+    contentPadding: '0 16px 16px'
+  }
+};
+var collapse;
+setDefault(function () {
+  collapse = deepDefaults(theme, {
+    collapse: defaults
+  }).collapse;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", theme.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+}
+export function makeItemStyles() {
+  var collapseItem = collapse.item;
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", theme.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", theme.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";transform-origin:left center 0;}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
+}
+
+export {normalize} from 'intact-react';

package/components/colorpicker/drag.d.ts

@@ -0,0 +1,18 @@
+import { Component } from 'intact-react';
+interface ColorpickerDragProps {
+    value: number;
+    max: number;
+    onStart: () => void;
+    onEnd: () => void;
+}
+interface ColorpickerDragEvents {
+    click: [];
+}
+export declare class ColorpickerDrag extends Component<ColorpickerDragProps, ColorpickerDragEvents> {
+    static template: string | import("intact").Template<any>;
+    private drag;
+}
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/drag.js

@@ -0,0 +1,27 @@
+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 './drag.vdt';
+import { useDrag } from './useDrag';
+export var ColorpickerDrag = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ColorpickerDrag, _Component);
+
+  function ColorpickerDrag() {
+    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.drag = useDrag();
+    return _this;
+  }
+
+  return ColorpickerDrag;
+}(Component);
+ColorpickerDrag.template = template;
+
+export {normalize} from 'intact-react';

package/components/colorpicker/drag.vdt.js

@@ -0,0 +1,12 @@
+import { createElementVNode as _$ce } from 'intact-react';
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  return _$ce(2, 'div', this.get('children'), 0, 'k-colorpicker-drag k-colorpicker-text', {
+    'ev-mousedown': this.drag.start
+  });
+}
+;
+
+export {normalize} from 'intact-react';

package/components/colorpicker/index.d.ts

@@ -0,0 +1,18 @@
+import { Component, TypeDefs } from 'intact-react';
+import { Sizes } from '../../styles/utils';
+export interface ColorpickerProps {
+    value: string;
+    presets?: string[];
+    size?: Sizes;
+    disabled?: boolean;
+}
+export interface ColorpickerEvents {
+}
+export declare class Colorpicker extends Component<ColorpickerProps, ColorpickerEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<ColorpickerProps>>;
+    static defaults: () => Partial<ColorpickerProps>;
+}
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/index.js

@@ -0,0 +1,35 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-react';
+import template from './index.vdt';
+import { sizes } from '../../styles/utils';
+var typeDefs = {
+  value: {
+    type: String,
+    required: true
+  },
+  presets: Array,
+  size: sizes,
+  disabled: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    presets: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'],
+    size: 'default'
+  };
+};
+
+export var Colorpicker = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Colorpicker, _Component);
+
+  function Colorpicker() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Colorpicker;
+}(Component);
+Colorpicker.template = template;
+Colorpicker.typeDefs = typeDefs;
+Colorpicker.defaults = defaults;
+
+export {normalize} from 'intact-react';

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

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

package/components/colorpicker/index.spec.js

@@ -0,0 +1,312 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/colorpicker/demos/basic';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import tinycolor from 'tinycolor2';
+describe('Colorpicker', function () {
+  var instance;
+  var element;
+  var picker;
+  beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var data, trigger;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            data = mount(BasicDemo);
+            instance = data[0];
+            element = data[1];
+            trigger = element.querySelector('.k-colorpicker-color');
+            trigger.click();
+            _context.next = 7;
+            return wait();
+
+          case 7:
+            picker = getElement('.k-colorpicker-content');
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            unmount();
+            _context2.next = 3;
+            return wait(400);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should select color by saturation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var saturation, _saturation$getBoundi, left, top;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            expect(picker.innerHTML).to.matchSnapshot();
+            saturation = picker.querySelector('.k-colorpicker-saturation');
+            _saturation$getBoundi = saturation.getBoundingClientRect(), left = _saturation$getBoundi.left, top = _saturation$getBoundi.top;
+            dispatchEvent(saturation, 'mousedown', {
+              pageX: left + window.pageXOffset,
+              pageY: top + window.pageYOffset,
+              which: 1
+            });
+            _context3.next = 6;
+            return wait();
+
+          case 6:
+            expect(picker.innerHTML).to.matchSnapshot();
+            expect(instance.get('color')).to.eql('#ffffff');
+            dispatchEvent(saturation, 'mousemove', {
+              pageX: left + window.pageXOffset + 1,
+              pageY: top + window.pageYOffset + 1
+            });
+            _context3.next = 11;
+            return wait();
+
+          case 11:
+            expect(instance.get('color')).to.eql('#fdfcfc');
+            dispatchEvent(saturation, 'mouseup');
+            _context3.next = 15;
+            return wait();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should change color by hue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var hue, _hue$getBoundingClien, width, left;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            hue = picker.querySelector('.k-colorpicker-hue .k-slider-track-wrapper');
+            _hue$getBoundingClien = hue.getBoundingClientRect(), width = _hue$getBoundingClien.width, left = _hue$getBoundingClien.left;
+            dispatchEvent(hue, 'click', {
+              clientX: 100 / 360 * width + left
+            }); // changing hue is throttled 50ms
+
+            _context4.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(instance.get('color')).to.eql('#68d923');
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should change color by alpha', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var alpha, _alpha$getBoundingCli, width, left;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            alpha = picker.querySelector('.k-colorpicker-alpha .k-slider-track-wrapper');
+            _alpha$getBoundingCli = alpha.getBoundingClientRect(), width = _alpha$getBoundingCli.width, left = _alpha$getBoundingCli.left;
+            dispatchEvent(alpha, 'click', {
+              clientX: 0.5 * width + left
+            }); // changing alpha is throttled 50ms
+
+            _context5.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(instance.get('color')).to.eql('rgba(217, 145, 35, 0.5)');
+
+          case 6:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should change color by input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _picker$querySelector, hex, r, g, b, alpha, alphaText;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _picker$querySelector = picker.querySelectorAll('input'), hex = _picker$querySelector[0], r = _picker$querySelector[1], g = _picker$querySelector[2], b = _picker$querySelector[3], alpha = _picker$querySelector[4]; // should ignore invalid value
+
+            hex.value = 'test';
+            dispatchEvent(hex, 'input');
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('color')).to.eql('#d99123');
+            hex.value = '333';
+            dispatchEvent(hex, 'input');
+            _context6.next = 10;
+            return wait();
+
+          case 10:
+            expect(instance.get('color')).to.eql('#333333'); // drag to change alpha
+
+            alphaText = picker.querySelectorAll('.k-colorpicker-drag')[3];
+            dispatchEvent(alphaText, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(alphaText, 'mousemove', {
+              clientX: -1
+            });
+            _context6.next = 16;
+            return wait();
+
+          case 16:
+            expect(instance.get('color')).to.eql('rgba(51, 51, 51, 0.99)');
+            dispatchEvent(alphaText, 'mousemove', {
+              clientX: 1
+            });
+            _context6.next = 20;
+            return wait();
+
+          case 20:
+            expect(instance.get('color')).to.eql('#333333');
+            expect(picker.innerHTML).to.matchSnapshot();
+            dispatchEvent(alphaText, 'mouseup');
+            _context6.next = 25;
+            return wait();
+
+          case 25:
+            r.value = '1000';
+            dispatchEvent(r, 'input');
+            _context6.next = 29;
+            return wait();
+
+          case 29:
+            expect(instance.get('color')).to.eql('#ff3333');
+            alpha.value = '-1';
+            dispatchEvent(alpha, 'input');
+            _context6.next = 34;
+            return wait();
+
+          case 34:
+            expect(instance.get('color')).to.eql('rgba(255, 51, 51, 0)');
+
+          case 35:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('should change to hsv mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _picker$querySelector2, first, second, color, hsl, _picker$querySelector3, hex, h, s;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _picker$querySelector2 = picker.querySelectorAll('.k-colorpicker-drag'), first = _picker$querySelector2[0], second = _picker$querySelector2[1];
+            color = tinycolor(instance.get('color'));
+            hsl = color.toHsl();
+            console.log(hsl);
+            dispatchEvent(first, 'mousedown', {
+              which: 1
+            });
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 8;
+            return wait();
+
+          case 8:
+            expect(picker.innerHTML).to.matchSnapshot();
+            dispatchEvent(first, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(first, 'mousemove', {
+              clientX: -1
+            });
+            _context7.next = 13;
+            return wait();
+
+          case 13:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(35, 72%, 49%)');
+            dispatchEvent(first, 'mousemove', {
+              clientX: 1
+            });
+            _context7.next = 17;
+            return wait();
+
+          case 17:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 72%, 49%)');
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 21;
+            return wait();
+
+          case 21:
+            dispatchEvent(second, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(second, 'mousemove', {
+              clientX: -1
+            });
+            _context7.next = 25;
+            return wait();
+
+          case 25:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 71%, 49%)');
+            dispatchEvent(second, 'mousemove', {
+              clientX: 1
+            });
+            _context7.next = 29;
+            return wait();
+
+          case 29:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 73%, 49%)');
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 33;
+            return wait();
+
+          case 33:
+            // input
+            _picker$querySelector3 = picker.querySelectorAll('input'), hex = _picker$querySelector3[0], h = _picker$querySelector3[1], s = _picker$querySelector3[2];
+            h.value = '1000';
+            dispatchEvent(h, 'input');
+            _context7.next = 38;
+            return wait();
+
+          case 38:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(359, 73%, 49%)');
+            s.value = '10';
+            dispatchEvent(s, 'input');
+            _context7.next = 43;
+            return wait();
+
+          case 43:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(358, 10%, 49%)');
+
+          case 44:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/colorpicker/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, createElementVNode as _$ce } from 'intact-react';
+import { Tooltip } from '../tooltip';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+import { ColorpickerPanel } from './panel';
+import { Dropdown, DropdownMenu } from '../dropdown';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      transition = _this$get.transition,
+      presets = _this$get.presets,
+      value = _this$get.value,
+      size = _this$get.size,
+      disabled = _this$get.disabled;
+
+  var classNameObj = (_classNameObj = {
+    'k-colorpicker': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-disabled'] = disabled, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), _$cc(Dropdown, {
+    'position': {
+      my: 'left top+8',
+      at: 'left bottom',
+      collision: 'flip'
+    },
+    'trigger': 'click',
+    'disabled': disabled,
+    'children': [_$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-inner', {
+      'style': {
+        backgroundColor: value
+      }
+    }), 2, 'k-colorpicker-color'), _$cc(DropdownMenu, {
+      'className': 'k-colorpicker-content',
+      'children': _$cc(ColorpickerPanel, {
+        'presets': presets,
+        'ev-$model:value': function ev$modelValue($v) {
+          $this.set('value', $v);
+        },
+        'value': $this.get('value')
+      })
+    })]
+  }));
+}
+;
+
+export {normalize} from 'intact-react';

package/components/colorpicker/panel.d.ts

@@ -0,0 +1,14 @@
+import { Component } from 'intact-react';
+export interface ColorpickerPanelProps {
+    value: string;
+    presets?: string[];
+}
+export declare class ColorpickerPanel extends Component<ColorpickerPanelProps> {
+    static template: string | import("intact").Template<any>;
+    private value;
+    private pointer;
+    private input;
+}
+
+
+export {normalize} from 'intact-react';

package/components/colorpicker/panel.js

@@ -0,0 +1,31 @@
+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 './panel.vdt';
+import { useValue } from './useValue';
+import { usePointer } from './usePointer';
+import { useInput } from './useInput';
+export var ColorpickerPanel = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ColorpickerPanel, _Component);
+
+  function ColorpickerPanel() {
+    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.value = useValue();
+    _this.pointer = usePointer(_this.value.hsv, _this.value.format);
+    _this.input = useInput(_this.value.hsv, _this.value.rgb, _this.value.hsl);
+    return _this;
+  }
+
+  return ColorpickerPanel;
+}(Component);
+ColorpickerPanel.template = template;
+
+export {normalize} from 'intact-react';