@king-design/react 2.0.0-beta.0

package/components/select/styles.js

@@ -0,0 +1,201 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, sizes, getRight, getLeft } from '../../styles/utils';
+import '../../styles/global';
+var defaults = deepDefaults({
+  width: "300px",
+
+  get height() {
+    return theme.default.height;
+  },
+
+  bgColor: '#fff',
+
+  get fontSize() {
+    return theme.default.fontSize;
+  },
+
+  get border() {
+    return "1px solid " + theme.color.border;
+  },
+
+  get focusBorder() {
+    return "1px solid " + theme.color.primary;
+  },
+
+  get hoverBorder() {
+    return "1px solid " + theme.color.darkBorder;
+  },
+
+  get iconColor() {
+    return theme.color.placeholder;
+  },
+
+  get activeColor() {
+    return theme.color.primary;
+  },
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  suffixGap: '10px',
+  disabledArrowColor: '#e5e5e5',
+  clearGap: "8px",
+
+  get placeholderColor() {
+    return theme.color.placeholder;
+  },
+
+  // disabled
+  disabled: {
+    get color() {
+      return theme.color.disabled;
+    },
+
+    get bgColor() {
+      return theme.color.disabledBg;
+    },
+
+    get borderColor() {
+      return theme.color.disabledBorder;
+    }
+
+  },
+  // group
+  group: {
+    get labelColor() {
+      return theme.color.disabled;
+    },
+
+    labelPadding: "8px"
+  },
+  // card
+  card: {
+    height: "160px",
+
+    get itemHoverColor() {
+      return theme.color.primary;
+    },
+
+    itemHoverBgColor: "transparent"
+  },
+  // multiple
+  multiple: {
+    checkmark: {
+      fontSize: '32px'
+    }
+  },
+  tag: {
+    margin: "3px 8px 3px 0",
+    padding: "4px 8px",
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    get bgColor() {
+      return theme.color.bg;
+    },
+
+    disabledBgColor: '#eee',
+    delete: {
+      gap: "8px",
+      fontSize: '14px',
+
+      get color() {
+        return theme.color.placeholder;
+      }
+
+    }
+  },
+  menuMaxHeight: "200px",
+  // empty
+  empty: {
+    padding: "16px",
+
+    get color() {
+      return theme.color.placeholder;
+    }
+
+  },
+  // searchable
+  searchable: {
+    padding: "16px 16px 8px 16px",
+    headerGap: "8px",
+
+    get border() {
+      return "1px solid " + theme.color.border;
+    },
+
+    header: {
+      padding: "0 0 16px 0",
+      gap: "8px",
+      btnPadding: "0",
+      btnGap: "16px"
+    },
+    optionPadding: "0 8px",
+    footer: {
+      padding: "8px 0 0",
+      gap: "8px",
+      btnGap: "8px"
+    }
+  }
+}, sizes.reduce(function (memo, size) {
+  memo[size] = {
+    get padding() {
+      return "0 " + theme[size].padding;
+    },
+
+    get height() {
+      return theme[size].height;
+    },
+
+    get fontSize() {
+      return theme[size].fontSize;
+    },
+
+    multipleGap: "1px",
+    multipleMargin: "0 2px 1px 0"
+  };
+
+  if (size === 'large') {
+    // use default padding for large size
+    Object.defineProperty(memo.large, 'padding', {
+      get: function get() {
+        return "0 " + theme.default.padding;
+      }
+    });
+    Object.defineProperty(memo.large, 'fontSize', {
+      get: function get() {
+        return theme.default.fontSize;
+      }
+    });
+  }
+
+  return memo;
+}, {}));
+var select;
+setDefault(function () {
+  select = deepDefaults(theme, {
+    select: defaults
+  }).select;
+});
+export default function makeStyles() {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", theme.transition, ",background ", theme.transition, ",box-shadow ", theme.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", theme.transition, ",color ", theme.transition, "!important;pointer-events:none;position:absolute;z-index:1;}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", theme.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", theme.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotate(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}.k-select-input{margin-right:", getRight(select.tag.margin), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var styles = select[size];
+    var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
+    if (size === 'default') return className;
+    return /*#__PURE__*/css("&.k-", size, "{", className, ";}");
+  }), "&.k-inline{width:auto;border:none;min-height:0;background:transparent;.k-select-placeholder,.k-select-value{line-height:inherit;}}");
+}
+export function makeMenuStyles() {
+  var searchable = select.searchable;
+  return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", theme.transition, ",top ", theme.transition, ";}.k-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.k-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.k-active{color:", select.activeColor, ";}}&.k-card{display:flex;height:", select.card.height, ";.k-tabs{border:none;overflow:auto;}.k-select-group{flex:1;overflow:auto;}.k-select-option.k-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.k-searchable{max-height:none;padding:", searchable.padding, ";.k-select-option{padding:", searchable.optionPadding, ";}}.k-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.k-select-op{white-space:nowrap;.k-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.k-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.k-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.k-btn{margin-left:", searchable.footer.btnGap, ";}}.k-select-option{.k-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.k-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
+}
+export function makeGroupStyles() {
+  return /*#__PURE__*/css(".k-select-group-label{color:", select.group.labelColor, ";padding:", select.group.labelPadding, ";}");
+}
+
+export {normalize} from 'intact-react';

package/components/select/useBaseLabel.d.ts

@@ -0,0 +1,12 @@
+import { Children, Component } from 'intact-react';
+declare type BaseLabelProps = {
+    value: any;
+    multiple: boolean;
+};
+export declare function useBaseLabel<T, C extends Component<P>, P extends BaseLabelProps>(getChildren: () => T, findLabelFromChildren: (children: T, value: any) => Children): {
+    getLabel: () => Children;
+};
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/select/useBaseLabel.js

@@ -0,0 +1,80 @@
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact-react';
+import { isNullOrUndefined, isStringOrNumber } from 'intact-shared';
+import { isEmptyString } from '../utils';
+export function useBaseLabel(getChildren, findLabelFromChildren) {
+  var instance = useInstance();
+  var labelMap = new _Map();
+
+  function getLabel() {
+    var _instance$get = instance.get(),
+        value = _instance$get.value,
+        multiple = _instance$get.multiple;
+
+    var children = getChildren();
+    if (isNullOrUndefined(value)) return;
+
+    if (!multiple) {
+      return findLabel(children, value);
+    } else {
+      var labels = [];
+      value.forEach(function (value) {
+        var label = findLabel(children, value);
+
+        if (!isNullOrUndefined(label)) {
+          labels.push(label);
+        }
+      });
+      return labels;
+    }
+  }
+
+  function findLabel(children, value) {
+    var label = findLabelFromChildren(children, value);
+
+    if (isNullOrUndefined(label)) {
+      label = labelMap.get(value);
+    } else {
+      labelMap.set(value, label);
+    }
+
+    label = isEmptyString(label) ? isStringOrNumber(value) ? value : null : label;
+    return label;
+  }
+
+  function cleanMap() {
+    var _instance$get2 = instance.get(),
+        value = _instance$get2.value,
+        multiple = _instance$get2.multiple;
+
+    if (isNullOrUndefined(value)) {
+      labelMap.clear();
+      return;
+    }
+
+    if (multiple) {
+      labelMap.forEach(function (item, key) {
+        if (!_includesInstanceProperty(value).call(value, key)) {
+          labelMap.delete(key);
+        }
+      });
+      return;
+    }
+
+    labelMap.forEach(function (item, key) {
+      if (key !== value) {
+        labelMap.delete(key);
+      }
+    });
+  }
+
+  instance.watch('value', cleanMap, {
+    inited: true
+  });
+  return {
+    getLabel: getLabel
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/select/useCard.d.ts

@@ -0,0 +1,11 @@
+import { Children, NonNullableRefObject } from 'intact-react';
+export declare function useCard(defaultActiveIndex: NonNullableRefObject<number[]>): {
+    process: (children: Children) => {
+        labels: Children[] | import("intact").Block<any>[];
+        group: Children[];
+    };
+    activeIndex: import("../../hooks/useState").State<number>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/select/useCard.js

@@ -0,0 +1,41 @@
+import { useInstance } from 'intact-react';
+import { eachChildren, isComponentVNode, last } from '../utils';
+import { EMPTY_OBJ } from 'intact-shared';
+import { OptionGroup } from './group';
+import { useState } from '../../hooks/useState';
+export function useCard(defaultActiveIndex) {
+  var children = useInstance().get('children');
+  var activeIndex = useState(last(defaultActiveIndex.value) || 0);
+
+  function process(children) {
+    var groupLabels = [];
+    var _children = [];
+    var index = 0;
+    eachChildren(children, function (vNode) {
+      if (isComponentVNode(vNode, OptionGroup)) {
+        var props = vNode.props || EMPTY_OBJ;
+        var label = (props.$blocks || EMPTY_OBJ).label || props.label;
+        groupLabels.push(label);
+
+        if (index === activeIndex.value) {
+          _children.push(vNode);
+        }
+
+        index++;
+      } else {
+        _children.push(vNode);
+      }
+    });
+    return {
+      labels: groupLabels,
+      group: _children
+    };
+  }
+
+  return {
+    process: process,
+    activeIndex: activeIndex
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/select/useEqualWidth.d.ts

@@ -0,0 +1,4 @@
+export declare function useEqualWidth(): void;
+
+
+export {normalize} from 'intact-react';

package/components/select/useEqualWidth.js

@@ -0,0 +1,16 @@
+import { useInstance, findDomFromVNode } from 'intact-react';
+export function useEqualWidth() {
+  var instance = useInstance();
+  instance.watch('_show', setWidth, {
+    presented: true
+  });
+
+  function setWidth(v) {
+    if (!v) return;
+    var menuElement = findDomFromVNode(instance.dropdownRef.value.menuVNode, true);
+    var entity = findDomFromVNode(instance.$lastInput, true);
+    menuElement.style.minWidth = entity.offsetWidth + "px";
+  }
+}
+
+export {normalize} from 'intact-react';

package/components/select/useFilterable.d.ts

@@ -0,0 +1,10 @@
+import { Children, VNode } from 'intact-react';
+import { State } from '../../hooks/useState';
+import { Option } from './option';
+export declare function useFilterable(keywords: State<string>): {
+    getCreatedVNode: (children: (VNode | string | number)[]) => VNode<typeof Option> | undefined;
+    filter: (children: Children) => Children;
+};
+
+
+export {normalize} from 'intact-react';

package/components/select/useFilterable.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { useInstance, createVNode as h, directClone } from 'intact-react';
+import { Option } from './option';
+import { OptionGroup } from './group';
+import { isNullOrUndefined, isStringOrNumber } from 'intact-shared';
+import { getTextByChildren, mapChildren, isComponentVNode } from '../utils';
+export function useFilterable(keywords) {
+  var component = useInstance();
+
+  function getCreatedVNode(children) {
+    var _component$get = component.get(),
+        creatable = _component$get.creatable,
+        filterable = _component$get.filterable;
+
+    var _keywords = keywords.value;
+
+    if (creatable && filterable && _keywords) {
+      if (!_findInstanceProperty(children).call(children, function (vNode) {
+        // TODO: create Option for OptionGroup
+        if (vNode.tag === Option) {
+          var _context;
+
+          var props = vNode.props;
+          if (isNullOrUndefined(props)) return false;
+
+          if (props.value === _keywords || _trimInstanceProperty(_context = props.label).call(_context) === _keywords) {
+            return true;
+          }
+        }
+
+        return false;
+      })) {
+        return h(Option, {
+          value: _keywords,
+          label: _keywords
+        });
+      }
+    }
+  }
+
+  function filter(children) {
+    var _component$get2 = component.get(),
+        filterable = _component$get2.filterable,
+        filter = _filterInstanceProperty(_component$get2),
+        searchable = _component$get2.searchable;
+
+    if (!filterable && !searchable) return children;
+
+    if (isNullOrUndefined(filter)) {
+      filter = defaultFilter;
+    }
+
+    var loop = function loop(children) {
+      var _children = [];
+      mapChildren(children, function (vNode) {
+        if (isComponentVNode(vNode, Option)) {
+          var props = vNode.props;
+          if (isNullOrUndefined(props)) return;
+          vNode = directClone(vNode);
+
+          if (isNullOrUndefined(props.label)) {
+            vNode.props = _extends({}, props, {
+              label: getTextByChildren(props.children)
+            });
+          }
+
+          if (filter(keywords.value, vNode.props)) {
+            _children.push(vNode);
+          }
+        } else if (isComponentVNode(vNode, OptionGroup)) {
+          var _props = vNode.props;
+          if (isNullOrUndefined(_props)) return;
+
+          var _children2 = loop(_props.children);
+
+          if (!_children2.length) return;
+          vNode = directClone(vNode);
+          vNode.props = _extends({}, _props, {
+            children: _children2
+          });
+
+          _children.push(vNode);
+        } else {
+          _children.push(vNode);
+        }
+      });
+      return _children;
+    };
+
+    return loop(children);
+  }
+
+  return {
+    getCreatedVNode: getCreatedVNode,
+    filter: filter
+  };
+}
+
+function defaultFilter(keywords, props) {
+  if (keywords === '') return true;
+  keywords = keywords.toLowerCase();
+  var label = props.label;
+
+  if (!isNullOrUndefined(label) && ~label.toLowerCase().indexOf(keywords)) {
+    return true;
+  }
+
+  var value = props.value;
+
+  if (isStringOrNumber(value) && ~String(value).toLowerCase().indexOf(keywords)) {
+    return true;
+  }
+
+  return false;
+}
+
+export {normalize} from 'intact-react';

package/components/select/useFocusout.d.ts

@@ -0,0 +1,12 @@
+/**
+ * don't trigger focusout event when layer is showing,
+ * only trigger focusout when it hidden to make FormItem to validate it
+ * #449
+ */
+export declare function useFocusout(): {
+    onFocusout: (e: FocusEvent) => void;
+    triggerRef: import('intact-react').RefObject<HTMLElement>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/select/useFocusout.js

@@ -0,0 +1,49 @@
+import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
+import { useInstance, createRef } from 'intact-react';
+/**
+ * don't trigger focusout event when layer is showing,
+ * only trigger focusout when it hidden to make FormItem to validate it
+ * #449
+ */
+
+export function useFocusout() {
+  var instance = useInstance();
+  var triggerRef = createRef();
+  instance.on('hide', function () {
+    // add _dispatch true to let Input knowns ignore this event
+    // and don't endInput, #523
+    dispatchEvent(triggerRef.value, 'focusout', {
+      _dispatch: true
+    });
+  });
+
+  function onFocusout(e) {
+    instance.trigger('focusout', e);
+
+    if (instance.get('_show')) {
+      e.stopPropagation();
+    }
+  }
+
+  return {
+    onFocusout: onFocusout,
+    triggerRef: triggerRef
+  };
+}
+
+function dispatchEvent(target, eventName, options) {
+  var event;
+
+  if (document.createEvent) {
+    event = document.createEvent('Event');
+    event.initEvent(eventName, true, true);
+  } else if (typeof CustomEvent !== 'undefined') {
+    event = new CustomEvent(eventName);
+  }
+
+  _Object$assign(event, options);
+
+  target.dispatchEvent(event);
+}
+
+export {normalize} from 'intact-react';

package/components/select/useInput.d.ts

@@ -0,0 +1,10 @@
+import { State } from '../../hooks/useState';
+import type { Input } from '../input';
+export declare function useInput(resetKeywords: (keywords: State<string>) => void): {
+    onInput: (value: string) => void;
+    keywords: State<string>;
+    inputRef: import('intact-react').RefObject<Input<string | number>>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/select/useInput.js

@@ -0,0 +1,53 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { useInstance, nextTick, createRef } from 'intact-react';
+import { useState } from '../../hooks/useState';
+export function useInput(resetKeywords) {
+  var component = useInstance();
+  var keywords = useState('');
+  var inputRef = createRef();
+
+  function onInput(value) {
+    keywords.set(_trimInstanceProperty(value).call(value));
+    var dropdown = component.dropdownRef.value; // the position may be flip, and the select input height may change height too,
+    // so we should reset the position
+
+    nextTick(function () {
+      dropdown.focusFirst();
+      dropdown.position();
+    });
+  } // if menu showed and value changed on multiple mode
+  // focus the input
+
+
+  function focusInput() {
+    if (component.get('filterable')) {
+      inputRef.value.focus();
+    }
+  }
+
+  component.on('$changed:_show', function (show) {
+    if (show) {
+      focusInput();
+      resetKeywords(keywords);
+    } else if (component.get('multiple')) {
+      resetKeywords(keywords);
+    }
+  });
+  component.on('$changed:value', function () {
+    var _component$get = component.get(),
+        multiple = _component$get.multiple,
+        filterable = _component$get.filterable;
+
+    if (multiple && filterable) {
+      focusInput();
+      resetKeywords(keywords);
+    }
+  });
+  return {
+    onInput: onInput,
+    keywords: keywords,
+    inputRef: inputRef
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/select/useLabel.d.ts

@@ -0,0 +1,8 @@
+import { Children } from 'intact-react';
+export declare function useLabel(): {
+    getLabel: () => Children;
+    activeIndices: import("intact").NonNullableRefObject<number[]>;
+};
+
+
+export {normalize} from 'intact-react';