@king-design/react 2.0.0-beta.0

package/components/select/menu.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 } from 'intact-react';
+import template from './menu.vdt';
+import { SELECT } from './constants';
+import { useCard } from './useCard';
+import { useSearchable } from './useSearchable';
+export var SelectMenu = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(SelectMenu, _Component);
+
+  function SelectMenu() {
+    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);
+    _this.card = useCard(_this.select.label.activeIndices);
+    _this.searchable = useSearchable();
+    return _this;
+  }
+
+  return SelectMenu;
+}(Component);
+SelectMenu.template = template;
+
+export {normalize} from 'intact-react';

package/components/select/menu.vdt.js

@@ -0,0 +1,138 @@
+import { createUnknownComponentVNode as _$cc, map as _$ma, createElementVNode as _$ce, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn } from 'intact-react';
+import { DropdownMenu } from '../dropdown';
+import { _$ } from '../../i18n';
+import { makeMenuStyles } from './styles';
+import { isEmptyChildren, eachChildren } from '../utils';
+import { OptionGroup } from './group';
+import { noop, isFunction } from 'intact-shared';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { context } from './useSearchable';
+import { Tabs, Tab } from '../tabs';
+var _$tmp0 = {
+  'className': 'ion-ios-search'
+};
+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;
+
+  var _this$select$get = this.select.get(),
+      card = _this$select$get.card,
+      searchable = _this$select$get.searchable,
+      multiple = _this$select$get.multiple;
+
+  var classNameObj = (_classNameObj = {
+    'k-select-menu': true,
+    'k-card': card,
+    'k-searchable': searchable
+  }, _classNameObj[className] = className, _classNameObj[makeMenuStyles()] = true, _classNameObj);
+
+  if (card) {
+    var _this$card = this.card,
+        process = _this$card.process,
+        activeIndex = _this$card.activeIndex;
+
+    var _process = process(children),
+        labels = _process.labels,
+        group = _process.group;
+
+    children = [_$cc(Tabs, {
+      'vertical': true,
+      'type': 'border-card',
+      'value': activeIndex.value,
+      'ev-$change:value': activeIndex.set,
+      'children': _$ma(labels, function ($value, $key) {
+        return _$cc(Tab, {
+          'value': $key,
+          'children': isFunction($value)
+          /* is <b:label> block */
+          ? $value(noop) : $value
+        });
+      }, $this)
+    }), group];
+  }
+
+  if (isEmptyChildren(children)) {
+    children = _$ce(2, 'div', _$('无数据'), 0, 'k-select-empty');
+  }
+
+  if (searchable) {
+    var _this$searchable = this.searchable,
+        selectAll = _this$searchable.selectAll,
+        toggleSelect = _this$searchable.toggleSelect,
+        unselectAll = _this$searchable.unselectAll,
+        confirm = _this$searchable.confirm,
+        checkedKeys = _this$searchable.checkedKeys;
+    var _this$select$input = this.select.input,
+        onInput = _this$select$input.onInput,
+        keywords = _this$select$input.keywords;
+    var Provider = context.Provider;
+    children = _$cc(Provider, {
+      'value': checkedKeys,
+      'children': [_$ce(2, 'div', [_$cc(Input, {
+        'fluid': true,
+        'size': 'small',
+        'placeholder': _$('请输入关键字'),
+        'value': keywords.value,
+        'ev-$change:value': onInput,
+        'clearable': true,
+        '$blocks': function ($blocks) {
+          var _$blocks = {},
+              __$blocks = _$ex({}, $blocks);
+
+          return (_$blocks['suffix'] = function ($super) {
+            return _$cc(Icon, _$tmp0);
+          }, __$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;
+        }.call($this, _$em)
+      }), multiple ? _$ce(2, 'div', [_$cc(Button, {
+        'type': 'link',
+        'size': 'small',
+        'ev-click': selectAll,
+        'children': _$('全选')
+      }), _$cc(Button, {
+        'type': 'link',
+        'size': 'small',
+        'ev-click': toggleSelect,
+        'children': _$('反选')
+      }), _$cc(Button, {
+        'type': 'link',
+        'size': 'small',
+        'ev-click': unselectAll,
+        'children': _$('清空')
+      })], 4, 'k-select-op') : undefined], 0, 'k-select-header'), _$ce(2, 'div', children, 0, 'k-select-body'), multiple ? _$ce(2, 'div', [_$cc(Button, {
+        'type': 'primary',
+        'size': 'small',
+        'ev-click': confirm,
+        'children': _$('确定')
+      }), _$cc(Button, {
+        'size': 'small',
+        'ev-click': this.select.hide,
+        'children': _$('取消')
+      })], 4, 'k-select-footer') : undefined]
+    });
+  }
+
+  return _$cc(DropdownMenu, {
+    'className': _$cn(classNameObj),
+    'children': children
+  });
+}
+;
+
+export {normalize} from 'intact-react';

package/components/select/option.d.ts

@@ -0,0 +1,16 @@
+import { Component, TypeDefs } from 'intact-react';
+export interface OptionProps {
+    value: any;
+    label?: string;
+    disabled?: boolean;
+}
+export declare class Option extends Component<OptionProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<OptionProps>>;
+    private select;
+    private onSelect;
+    private isActive;
+}
+
+
+export {normalize} from 'intact-react';

package/components/select/option.js

@@ -0,0 +1,74 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { __decorate } from "tslib";
+import { Component, inject } from 'intact-react';
+import template from './option.vdt';
+import { bind, toggleArray } from '../utils';
+import { SELECT } from './constants';
+var typeDefs = {
+  value: {
+    required: true
+  },
+  label: String,
+  disabled: Boolean
+};
+export var Option = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Option, _Component);
+
+  function Option() {
+    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;
+  }
+
+  var _proto = Option.prototype;
+
+  _proto.onSelect = function onSelect() {
+    var select = this.select;
+    var multiple = select.get('multiple');
+    var value = this.get('value');
+
+    if (!multiple) {
+      select.set('value', this.get('value'));
+    } else {
+      var values = select.get('value');
+      values = toggleArray(values, value);
+      select.set('value', values);
+    }
+  };
+
+  _proto.isActive = function isActive() {
+    var _this$select$get = this.select.get(),
+        currentValue = _this$select$get.value,
+        multiple = _this$select$get.multiple;
+
+    var value = this.get('value');
+
+    if (multiple) {
+      if (Array.isArray(currentValue)) {
+        return _includesInstanceProperty(currentValue).call(currentValue, value);
+      }
+
+      return false;
+    }
+
+    return currentValue === value;
+  };
+
+  return Option;
+}(Component);
+Option.template = template;
+Option.typeDefs = typeDefs;
+
+__decorate([bind], Option.prototype, "onSelect", null);
+
+export {normalize} from 'intact-react';

package/components/select/option.vdt.js

@@ -0,0 +1,65 @@
+import { createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-react';
+import { Transition } from 'intact';
+import { DropdownItem } from '../dropdown';
+import { isNullOrUndefined } from 'intact-shared';
+import { isEmptyChildren } from '../utils';
+import { Icon } from '../icon';
+import { Checkbox } from '../checkbox';
+import { context } from './useSearchable';
+var _$tmp0 = {
+  'className': 'k-select-checkmark ion-ios-checkmark-empty'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      className = _this$get.className,
+      disabled = _this$get.disabled,
+      label = _this$get.label;
+
+  var _this$select$get = this.select.get(),
+      multiple = _this$select$get.multiple,
+      searchable = _this$select$get.searchable;
+
+  var isActive = this.isActive();
+  var classNameObj = (_classNameObj = {
+    'k-select-option': true
+  }, _classNameObj[className] = className, _classNameObj['k-active'] = isActive, _classNameObj);
+
+  var _children = isEmptyChildren(children) ? label : children;
+
+  if (searchable && multiple) {
+    var Consumer = context.Consumer;
+    var _children2 = _children;
+    _children = _$cc(Consumer, {
+      'children': function children(value) {
+        return _$cc(Checkbox, {
+          'value': value.value,
+          'ev-$change:value': value.set,
+          'trueValue': _this.get('value'),
+          'children': _children2
+        });
+      }
+    });
+  }
+
+  return _$cc(DropdownItem, {
+    'className': _$cn(classNameObj),
+    'ev-select': searchable && multiple ? null : this.onSelect,
+    'disabled': disabled,
+    'hideOnSelect': !multiple,
+    'children': [_children, !searchable ? _$cc(Transition, {
+      'name': 'k-scale',
+      'children': multiple && isActive ? _$cc(Icon, _$tmp0) : undefined
+    }) : undefined]
+  });
+}
+;
+
+export {normalize} from 'intact-react';

package/components/select/select.d.ts

@@ -0,0 +1,36 @@
+import { Children, TypeDefs } from 'intact-react';
+import { Option } from './option';
+import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from './base';
+export interface SelectProps<T = string, Multipe extends boolean = boolean> extends BaseSelectProps<T, Multipe> {
+    filter?: (keywords: string, props: any) => boolean;
+    searchable?: boolean;
+    creatable?: boolean;
+    labelMap?: Map<any, Children>;
+    card?: boolean;
+    autoDisableArrow?: boolean;
+}
+export interface SelectEvents extends BaseSelectEvents {
+}
+export interface SelectBlocks<T> extends BaseSelectBlocks<T> {
+    menu: null;
+}
+export declare class Select<T = string, Multipe extends boolean = false> extends BaseSelect<SelectProps<T, Multipe>, SelectEvents, SelectBlocks<T>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SelectProps<string, boolean>>>;
+    static defaults: () => Partial<SelectProps<string, boolean>>;
+    filterable: {
+        getCreatedVNode: (children: (string | number | import("intact").VNode<import("intact").VNodeTag>)[]) => import("intact").VNode<typeof Option> | undefined;
+        filter: (children: Children) => Children;
+    };
+    label: {
+        getLabel: () => Children;
+        activeIndices: import("intact").NonNullableRefObject<number[]>;
+    };
+    init(): void;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | Children[];
+    protected getLabel(): Children;
+    private getAllShowedValues;
+}
+
+
+export {normalize} from 'intact-react';

package/components/select/select.js

@@ -0,0 +1,93 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import template from './select.vdt';
+import { eachChildren, isComponentVNode } from '../utils';
+import { isNullOrUndefined } from 'intact-shared';
+import { Option } from './option';
+import { OptionGroup } from './group';
+import { useFilterable } from './useFilterable';
+import { useLabel } from './useLabel';
+import { BaseSelect } from './base';
+import { _$ } from '../../i18n';
+import { useEqualWidth } from './useEqualWidth';
+
+var typeDefs = _extends({}, BaseSelect.typeDefs, {
+  filter: Function,
+  searchable: Boolean,
+  creatable: Boolean,
+  labelMap: _Map,
+  card: Boolean,
+  autoDisableArrow: Boolean
+});
+
+var defaults = function defaults() {
+  return _extends({}, BaseSelect.defaults(), {
+    labelMap: new _Map()
+  });
+};
+
+export var Select = /*#__PURE__*/function (_BaseSelect) {
+  _inheritsLoose(Select, _BaseSelect);
+
+  function Select() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _BaseSelect.call.apply(_BaseSelect, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.filterable = useFilterable(_this.input.keywords);
+    _this.label = useLabel();
+    return _this;
+  }
+
+  var _proto = Select.prototype;
+
+  _proto.init = function init() {
+    _BaseSelect.prototype.init.call(this);
+
+    useEqualWidth();
+  };
+
+  _proto.getPlaceholder = function getPlaceholder() {
+    var _this$get = this.get(),
+        placeholder = _this$get.placeholder,
+        creatable = _this$get.creatable,
+        filterable = _this$get.filterable;
+
+    return isNullOrUndefined(placeholder) ? creatable && filterable ? _$('请输入或选择') : _$('请选择') : placeholder;
+  };
+
+  _proto.getLabel = function getLabel() {
+    return this.label.getLabel();
+  };
+
+  _proto.getAllShowedValues = function getAllShowedValues(children) {
+    var values = [];
+
+    var loop = function loop(children) {
+      eachChildren(children, function (vNode) {
+        if (isComponentVNode(vNode, Option)) {
+          values.push(vNode.props.value);
+        } else if (isComponentVNode(vNode, OptionGroup)) {
+          loop(vNode.props.children);
+        }
+      });
+    };
+
+    loop(children);
+    return values;
+  };
+
+  return Select;
+}(BaseSelect);
+Select.template = template;
+Select.typeDefs = typeDefs;
+Select.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/select/select.vdt.js

@@ -0,0 +1,62 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, createUnknownComponentVNode as _$cc, className as _$cn, noop as _$no } from 'intact-react';
+import { SelectMenu } from './menu';
+import { isEmptyChildren } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      children = _this$get.children,
+      autoDisableArrow = _this$get.autoDisableArrow,
+      disabled = _this$get.disabled,
+      multiple = _this$get.multiple,
+      value = _this$get.value;
+
+  var _this$filterable = this.filterable,
+      getCreatedVNode = _this$filterable.getCreatedVNode,
+      filter = _filterInstanceProperty(_this$filterable);
+
+  var options = filter(children);
+  var allShowedValues = this.getAllShowedValues(options);
+  var isDisableArrow = disabled || autoDisableArrow && (isEmptyChildren(options) || allShowedValues.length === 1 && !multiple && allShowedValues[0] === value);
+  return _$su.call($this, {
+    'isDisableArrow': isDisableArrow
+  }, function ($blocks) {
+    var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+
+    return (_$blocks['base-menu'] = function ($super) {
+      return _$cc(SelectMenu, {
+        'className': _$cn(className),
+        'values': allShowedValues,
+        'children': (_$blocks['menu'] = function ($super) {
+          return [getCreatedVNode(options), options];
+        }, __$blocks['menu'] = function ($super, data) {
+          var block = $blocks['menu'];
+
+          var callBlock = function callBlock() {
+            return _$blocks['menu'].call($this, $super, data);
+          };
+
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['menu'](_$no))
+      });
+    }, __$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;
+  }.call($this, $blocks), $__proto__);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/select/styles.d.ts

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