@king-design/react 2.0.0-beta.0

package/components/select/base.d.ts

@@ -0,0 +1,63 @@
+import { Component, Children, TypeDefs, RefObject } from 'intact-react';
+import { Sizes } from '../../styles/utils';
+import type { Input } from '../input';
+import { Dropdown } from '../dropdown';
+import { State } from '../../hooks/useState';
+import { Container } from '../portal';
+import type { Events } from '../types';
+export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach = V | null> {
+    value?: Multipe extends true ? V[] : Attach;
+    multiple?: Multipe;
+    filterable?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    name?: string;
+    size?: Sizes;
+    hideIcon?: boolean;
+    clearable?: boolean;
+    fluid?: boolean;
+    inline?: boolean;
+    placeholder?: Children;
+    container?: Container;
+    width?: string | number;
+    _show?: boolean;
+}
+export interface BaseSelectEvents {
+    keydown: [KeyboardEvent];
+    focusout: [FocusEvent];
+    show: [];
+    hide: [];
+}
+export interface BaseSelectBlocks<V> {
+    value: [V, Children];
+    values: [V[], Children[]];
+    prefix: null;
+    suffix: null;
+}
+export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSelectProps<any>, E extends BaseSelectEvents = BaseSelectEvents, B extends BaseSelectBlocks<any> = BaseSelectBlocks<any>> extends Component<T, E, B> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<BaseSelectProps<any, boolean, any>>>;
+    static defaults: () => Partial<BaseSelectProps<any, boolean, any>>;
+    static events: Events<BaseSelectEvents>;
+    dropdownRef: RefObject<Dropdown>;
+    input: {
+        onInput: (value: string) => void;
+        keywords: State<string>;
+        inputRef: RefObject<Input<string | number>>;
+    };
+    private focusout;
+    init(): void;
+    protected abstract getPlaceholder(): Children;
+    protected abstract getLabel(): Children;
+    position(): void;
+    show(): void;
+    hide(): void;
+    resetKeywords(keywords: State<string>): void;
+    protected hasValue(): any;
+    private delete;
+    protected clear(e: MouseEvent): void;
+    private onKeydown;
+}
+
+
+export {normalize} from 'intact-react';

package/components/select/base.js

@@ -0,0 +1,156 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { __decorate } from "tslib";
+import { Component, provide, createRef } from 'intact-react';
+import template from './base.vdt';
+import { sizes } from '../../styles/utils';
+import { SELECT } from './constants';
+import { useShowHideEvents } from '../../hooks/useShowHideEvents';
+import { bind } from '../utils';
+import { useInput } from './useInput';
+import { useFocusout } from './useFocusout';
+import { isNullOrUndefined } from 'intact-shared';
+var typeDefs = {
+  value: null,
+  multiple: Boolean,
+  filterable: Boolean,
+  loading: Boolean,
+  disabled: Boolean,
+  name: String,
+  size: sizes,
+  hideIcon: Boolean,
+  clearable: Boolean,
+  fluid: Boolean,
+  inline: Boolean,
+  placeholder: [String, Number],
+  container: [Function, String],
+  width: [String, Number],
+  _show: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    size: 'default'
+  };
+};
+
+var events = {
+  keydown: true,
+  focusout: true,
+  show: true,
+  hide: true
+};
+export var BaseSelect = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BaseSelect, _Component);
+
+  function BaseSelect() {
+    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.dropdownRef = createRef();
+    _this.input = useInput(_this.resetKeywords);
+    _this.focusout = useFocusout();
+    return _this;
+  }
+
+  var _proto = BaseSelect.prototype;
+
+  _proto.init = function init() {
+    provide(SELECT, this);
+    useShowHideEvents('_show'); // this.input = useInput();
+
+    this.watch('value', this.position, {
+      presented: true
+    });
+  };
+
+  _proto.position = function position() {
+    var dropdown = this.dropdownRef.value;
+
+    if (dropdown.get('value')) {
+      dropdown.position();
+    }
+  };
+
+  _proto.show = function show() {
+    this.set('_show', true);
+  };
+
+  _proto.hide = function hide() {
+    this.set('_show', false);
+  };
+
+  _proto.resetKeywords = function resetKeywords(keywords) {
+    keywords.set('');
+  };
+
+  _proto.hasValue = function hasValue() {
+    var _this$get = this.get(),
+        value = _this$get.value,
+        multiple = _this$get.multiple;
+
+    return !isNullOrUndefined(value) && (multiple ? value.length : value !== '');
+  };
+
+  _proto.delete = function _delete(index, e) {
+    var _context2;
+
+    if (this.get('disabled')) return;
+    e.stopPropagation();
+
+    var value = _sliceInstanceProperty(_context2 = this.get('value')).call(_context2, 0);
+
+    _spliceInstanceProperty(value).call(value, index, 1);
+
+    this.set('value', value);
+  };
+
+  _proto.clear = function clear(e) {
+    e.stopPropagation();
+    this.set('value', this.get('multiple') ? [] : null);
+  };
+
+  _proto.onKeydown = function onKeydown(e) {
+    this.trigger('keydown', e);
+
+    switch (e.keyCode) {
+      case 13:
+        // enter
+        this.show();
+        break;
+
+      case 9: // tab
+
+      case 27:
+        // esc
+        this.hide();
+        break;
+    }
+  };
+
+  return BaseSelect;
+}(Component);
+BaseSelect.template = template;
+BaseSelect.typeDefs = typeDefs;
+BaseSelect.defaults = defaults;
+BaseSelect.events = events;
+
+__decorate([bind], BaseSelect.prototype, "position", null);
+
+__decorate([bind], BaseSelect.prototype, "show", null);
+
+__decorate([bind], BaseSelect.prototype, "hide", null);
+
+__decorate([bind], BaseSelect.prototype, "clear", null);
+
+__decorate([bind], BaseSelect.prototype, "onKeydown", null);
+
+export {normalize} from 'intact-react';

package/components/select/base.vdt.js

@@ -0,0 +1,194 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, map as _$ma } from 'intact-react';
+import { TransitionGroup, Transition } from 'intact';
+import { Input } from '../input';
+import { Icon } from '../icon';
+import { isNullOrUndefined } from 'intact-shared';
+import makeStyles from './styles';
+import { Dropdown } from '../dropdown';
+import { getRestProps, addStyle } from '../utils';
+var _$tmp0 = {
+  'className': 'ion-load-c',
+  'rotate': true
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      value = _this$get.value,
+      multiple = _this$get.multiple,
+      loading = _this$get.loading,
+      disabled = _this$get.disabled,
+      name = _this$get.name,
+      size = _this$get.size,
+      hideIcon = _this$get.hideIcon,
+      fluid = _this$get.fluid,
+      clearable = _this$get.clearable,
+      filterable = _this$get.filterable,
+      className = _this$get.className,
+      container = _this$get.container,
+      inline = _this$get.inline,
+      style = _this$get.style,
+      width = _this$get.width,
+      _show = _this$get._show;
+
+  var classNameObj = (_classNameObj = {
+    'k-select': true,
+    'k-disabled': disabled
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-fluid'] = fluid, _classNameObj['k-inline'] = inline, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var placeholder = this.getPlaceholder();
+  var label = this.getLabel();
+  var hasValue = this.hasValue();
+  var _this$input = this.input,
+      onInput = _this$input.onInput,
+      inputRef = _this$input.inputRef,
+      keywords = _this$input.keywords.value;
+  var _this$focusout = this.focusout,
+      onFocusout = _this$focusout.onFocusout,
+      triggerRef = _this$focusout.triggerRef;
+  return _$cc(Dropdown, {
+    'trigger': 'click',
+    'ref': this.dropdownRef,
+    'disabled': disabled,
+    'container': container,
+    'children': [_$cv('div', _extends({}, getRestProps(this), {
+      'className': _$cn(classNameObj),
+      'tabindex': disabled ? '-1' : '0',
+      'ev-keydown': this.onKeydown,
+      'ev-focusout': onFocusout,
+      'style': !isNullOrUndefined(width) ? addStyle(style, {
+        width: width + "px"
+      }) : style,
+      'ref': triggerRef
+    }), [$blocks.prefix ? _$ce(2, 'div', (_$blocks['prefix'] = function ($super) {
+      return null;
+    }, __$blocks['prefix'] = function ($super, data) {
+      var block = $blocks['prefix'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['prefix'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['prefix'](_$no)), 0, 'k-select-prefix') : undefined, _$ce(2, 'div', [_$ce(64, 'input', null, 1, null, {
+      'type': 'hidden',
+      'value': value,
+      'name': name
+    }, 'hidden-input'), null, _$cc(TransitionGroup, {
+      'name': 'k-fade',
+      'appear': false,
+      'children': !multiple && filterable ? _$cc(Input, {
+        'value': _show ? keywords : label,
+        'ev-$change:value': onInput,
+        'disabled': disabled,
+        'placeholder': label || placeholder,
+        'ref': inputRef,
+        'size': size,
+        'fluid': true,
+        'inline': true,
+        'key': 'input',
+        'readonly': !_show
+      }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, 'k-select-placeholder c-ellipsis', null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
+        return label;
+      }, __$blocks['value'] = function ($super, data) {
+        var block = $blocks['value'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['value'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [_$cc(TransitionGroup, {
+        'name': 'k-fade',
+        'children': (_$blocks['values'] = function ($super) {
+          return _$ma(label, function ($label, $key) {
+            return _$ce(2, 'div', [_$ce(2, 'span', (_$blocks['value'] = function ($super) {
+              return $label;
+            }, __$blocks['value'] = function ($super, data) {
+              var block = $blocks['value'];
+
+              var callBlock = function callBlock() {
+                return _$blocks['value'].call($this, $super, data);
+              };
+
+              return block ? block.call($this, callBlock, data) : callBlock();
+            }, __$blocks['value'](_$no, [value[$key], $label])), 0, 'k-select-text'), _$cc(Icon, {
+              'className': 'ion-ios-close k-select-close',
+              'ev-click': this.delete.bind(this, $key),
+              'hoverable': !disabled
+            })], 4, 'k-select-tag', null, $label);
+          }, $this);
+        }, __$blocks['values'] = function ($super, data) {
+          var block = _valuesInstanceProperty($blocks);
+
+          var callBlock = function callBlock() {
+            return _valuesInstanceProperty(_$blocks).call($this, $super, data);
+          };
+
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label]))
+      }), filterable ? _$cc(Input, {
+        'className': 'k-select-input',
+        'value': keywords,
+        'ev-$change:value': onInput,
+        'disabled': disabled,
+        'placeholder': !hasValue ? placeholder : '',
+        'ref': inputRef,
+        'autoWidth': true,
+        'inline': true,
+        'size': size,
+        'key': 'filter',
+        'readonly': !_show
+      }, 'filter', inputRef) : undefined], 0, _$cn({
+        "k-select-values": true,
+        "k-with-values": _valuesInstanceProperty($blocks)
+      }), null, 'values')
+    })], 0, 'k-select-main'), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
+      'className': _$cn({
+        "k-select-clear ion-ios-close": true,
+        "k-show": hasValue
+      }),
+      'ev-click': this.clear,
+      'hoverable': true
+    }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
+      return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
+        'className': _$cn({
+          "k-select-arrow ion-ios-arrow-down": true,
+          'k-disabled': $props.isDisableArrow
+        })
+      }) : undefined;
+    }, __$blocks['suffix'] = function ($super, data) {
+      var block = $blocks['suffix'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['suffix'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['suffix'](_$no)), 0, 'k-select-suffix-icon')], 0, 'k-select-suffix') : undefined]), (_$blocks['base-menu'] = function ($super) {
+      return _$ce(2, 'div', 'should be implemeted', 16);
+    }, __$blocks['base-menu'] = function ($super, data) {
+      var block = $blocks['base-menu'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['base-menu'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['base-menu'](_$no))],
+    'ev-$model:value': function ev$modelValue($v) {
+      $this.set('_show', $v);
+    },
+    'value': $this.get('_show')
+  }, null, this.dropdownRef);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/select/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const SELECT = "Select";
+export declare const RECORD_OPTIONS = "RecordOptions";
+
+
+export {normalize} from 'intact-react';

package/components/select/constants.js

@@ -0,0 +1,4 @@
+export var SELECT = "Select";
+export var RECORD_OPTIONS = 'RecordOptions';
+
+export {normalize} from 'intact-react';

package/components/select/group.d.ts

@@ -0,0 +1,17 @@
+import { Component, TypeDefs, Children } from 'intact-react';
+export interface OptionGroupProps {
+    label?: Children;
+}
+export interface OptionGroupEvents {
+}
+export interface OptionGroupBlocks {
+    label: null;
+}
+export declare class OptionGroup extends Component<OptionGroupProps, OptionGroupEvents, OptionGroupBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<OptionGroupProps>>;
+    private select;
+}
+
+
+export {normalize} from 'intact-react';

package/components/select/group.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, inject, VNode } from 'intact-react';
+import template from './group.vdt';
+import { SELECT } from './constants';
+var typeDefs = {
+  label: [String, Number, VNode]
+};
+export var OptionGroup = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(OptionGroup, _Component);
+
+  function OptionGroup() {
+    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.select = inject(SELECT);
+    return _this;
+  }
+
+  return OptionGroup;
+}(Component);
+OptionGroup.template = template;
+OptionGroup.typeDefs = typeDefs;
+
+export {normalize} from 'intact-react';

package/components/select/group.vdt.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no } from 'intact-react';
+import { makeGroupStyles } from './styles';
+import { getRestProps } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      label = _this$get.label,
+      className = _this$get.className;
+
+  var _this$select$get = this.select.get(),
+      card = _this$select$get.card;
+
+  var classNameObj = (_classNameObj = {
+    "k-select-group": true
+  }, _classNameObj[className] = className, _classNameObj[makeGroupStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj)
+  }), [!card ? _$ce(2, 'div', (_$blocks['label'] = function ($super) {
+    return label;
+  }, __$blocks['label'] = function ($super, data) {
+    var block = $blocks['label'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['label'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['label'](_$no)), 0, 'k-select-group-label') : undefined, children]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/select/index.d.ts

@@ -0,0 +1,6 @@
+export * from './select';
+export * from './option';
+export * from './group';
+
+
+export {normalize} from 'intact-react';

package/components/select/index.js

@@ -0,0 +1,5 @@
+export * from './select';
+export * from './option';
+export * from './group';
+
+export {normalize} from 'intact-react';

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

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