@king-design/react 3.5.2 → 3.6.0

package/components/select/styles.d.ts

@@ -1,4 +1,83 @@
+import { Sizes } from '../../styles/utils';
 import '../../styles/global';
+type SizeStyles = {
+    padding: string;
+    height: string;
+    fontSize: string;
+};
+declare const defaults: {
+    readonly transition: string;
+    width: string;
+    readonly height: string;
+    bgColor: string;
+    readonly fontSize: string;
+    readonly border: string;
+    readonly focusBorder: string;
+    readonly hoverBorder: string;
+    readonly activeColor: string;
+    readonly borderRadius: string;
+    suffixGap: string;
+    clearGap: string;
+    readonly placeholderColor: string;
+    disabled: {
+        readonly color: string;
+        readonly bgColor: string;
+        readonly borderColor: string;
+    };
+    group: {
+        readonly labelColor: string;
+        labelPadding: string;
+    };
+    card: {
+        height: string;
+        readonly itemHoverColor: string;
+        itemHoverBgColor: string;
+    };
+    multiple: {
+        checkmark: {
+            fontSize: string;
+        };
+    };
+    tag: {
+        margin: string;
+        padding: string;
+        readonly borderRadius: string;
+        readonly bgColor: string;
+        disabledBgColor: string;
+        delete: {
+            gap: string;
+            fontSize: string;
+            readonly color: string;
+        };
+    };
+    menuMaxHeight: string;
+    empty: {
+        padding: string;
+        readonly color: string;
+    };
+    searchable: {
+        padding: string;
+        headerGap: string;
+        readonly border: string;
+        header: {
+            padding: string;
+            gap: string;
+            btnPadding: string;
+            btnGap: string;
+        };
+        optionPadding: string;
+        footer: {
+            padding: string;
+            gap: string;
+            btnGap: string;
+        };
+    };
+    flat: {
+        readonly color: string;
+    };
+} & Record<Sizes, SizeStyles>;
+declare let select: typeof defaults;
+export { select };
 export declare const makeStyles: {
     (k: string): string;
     clearCache(): {};

package/components/select/styles.js

@@ -146,6 +146,7 @@ setDefault(function () {
   makeMenuStyles == null || makeMenuStyles.clearCache();
   makeGroupStyles == null || makeGroupStyles.clearCache();
 });
+export { select };
 export var makeStyles = cache(function makeStyles(k) {
   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 ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.", k, "-select-main{flex:1;min-width:0;}.", k, "-select-prefix,.", k, "-select-suffix{display:flex;align-items:center;position:relative;}.", k, "-select-suffix{margin-left:", select.suffixGap, ";}.", k, "-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.", k, "-input .", k, "-input-inner{background:transparent;}&.", k, "-fluid{width:100%;}.", k, "-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&: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-flex;align-items:center;transition:opacity ", select.transition, ";}.", k, "-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.", k, "-dropdown-open{border:", select.focusBorder, ";.", k, "-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.", k, "-tags{padding:3px 0;}.", k, "-tag{word-break:break-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];

package/components/select/useFilterable.js

@@ -30,7 +30,8 @@ export function useFilterable(keywords) {
       })) {
         return h(Option, {
           value: _keywords,
-          label: _keywords
+          label: _keywords,
+          isCreated: true
         });
       }
     }

package/components/select/useInput.d.ts

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

package/components/select/useInput.js

@@ -29,22 +29,25 @@ export function useInput(resetKeywords) {
   component.on('$changed:show', function (show) {
     if (show) {
       focusInput();
-      resetKeywords(keywords);
+      resetKeywords();
     } else if (component.get('multiple')) {
-      resetKeywords(keywords);
+      resetKeywords();
     }
   });
   component.on('$changed:value', function () {
     var _component$get = component.get(),
       multiple = _component$get.multiple,
-      filterable = _component$get.filterable;
+      filterable = _component$get.filterable,
+      keepKeywords = _component$get.keepKeywords;
     if (multiple && filterable) {
       focusInput();
       /**
        * don't reset keywords on multiple mode for continue selection
        * https://github.com/ksc-fe/kpc/issues/983
        */
-      // resetKeywords(keywords);
+      if (!keepKeywords) {
+        resetKeywords();
+      }
     }
   });
   return {

package/components/select/useSearchable.js

@@ -39,6 +39,7 @@ export function useSearchable() {
   }
   select.watch('value', initCheckedKeys);
   select.on('hide', initCheckedKeys);
+  initCheckedKeys();
   return {
     checkedKeys: checkedKeys,
     selectAll: selectAll,

package/components/table/index.spec.js

@@ -5,6 +5,7 @@ import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { __decorate } from "tslib";
 import BasicDemo from '~/components/table/demos/basic';
@@ -784,21 +785,20 @@ describe('Table', function () {
           return wait();
         case 6:
           expect(element.innerHTML).to.matchSnapshot();
-          debugger;
           expect(table.getCheckedData()).to.have.lengthOf(8);
           arrow = element.querySelector('.k-table-arrow');
           arrow.click();
-          _context21.next = 13;
+          _context21.next = 12;
           return wait();
-        case 13:
+        case 12:
           expect(element.innerHTML).to.matchSnapshot();
           arrow.click();
-          _context21.next = 17;
+          _context21.next = 16;
           return wait();
-        case 17:
+        case 16:
           expect(element.innerHTML).to.matchSnapshot();
           expect(table.getCheckedData()).to.have.lengthOf(8);
-        case 19:
+        case 18:
         case "end":
           return _context21.stop();
       }
@@ -1102,4 +1102,82 @@ describe('Table', function () {
       }
     }, _callee24);
   })));
+  it('fixHeader with Affix header scroll sync', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var Demo, _mount27, instance, element, scrollContainer, affixWrapper1, affixWrapper2, affixWrapper3;
+    return _regeneratorRuntime.wrap(function _callee25$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context31;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this5.Table = Table;
+              _this5.TableColumn = TableColumn;
+              return _this5;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                data: _Array$from({
+                  length: 10
+                }, function (_, i) {
+                  return {
+                    name: "Name " + i,
+                    column1: "Column1 " + i,
+                    column2: "Column2 " + i,
+                    column3: "Column3 " + i,
+                    action: "Action " + i
+                  };
+                }),
+                fixHeader: 200,
+                virtual: false,
+                stickScrollbar: false
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Table, TableColumn} = this;\n                const {data, fixHeader, virtual, stickScrollbar} = this.get();\n                <Table data={data} fixHeader={fixHeader} virtual={virtual} stickScrollbar={stickScrollbar} ref=\"table\">\n                    <TableColumn fixed=\"left\" key=\"name\" title=\"Name\" width=\"200\" />\n                    <TableColumn key=\"column1\" title=\"Column1\" width=\"300\" />\n                    <TableColumn key=\"column2\" title=\"Column2\" width=\"300\" />\n                    <TableColumn key=\"column3\" title=\"Column3\" width=\"300\" />\n                    <TableColumn fixed=\"right\" key=\"action\" title=\"Action\" width=\"200\" />\n                </Table>\n            ";
+          _mount27 = mount(Demo), instance = _mount27[0], element = _mount27[1]; // Test 1: fixHeader only - scroll left 50px
+          _context32.next = 5;
+          return wait();
+        case 5:
+          scrollContainer = element.querySelector('.k-table-wrapper');
+          scrollContainer.scrollLeft = 50;
+          _context32.next = 9;
+          return wait(100);
+        case 9:
+          affixWrapper1 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper1.scrollLeft).to.eql(50);
+          // Test 2: fixHeader + virtual - scroll left 50px more (total 100px)
+          instance.set('virtual', true);
+          _context32.next = 14;
+          return wait();
+        case 14:
+          scrollContainer.scrollLeft = 100;
+          _context32.next = 17;
+          return wait(100);
+        case 17:
+          affixWrapper2 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper2.scrollLeft).to.eql(100);
+          // Test 3: stickScrollbar + fixHeader - scroll right 50px (back to 50px)
+          instance.set('stickScrollbar', true);
+          _context32.next = 22;
+          return wait();
+        case 22:
+          scrollContainer.scrollLeft = 50;
+          _context32.next = 25;
+          return wait(100);
+        case 25:
+          affixWrapper3 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper3.scrollLeft).to.eql(50);
+        case 27:
+        case "end":
+          return _context32.stop();
+      }
+    }, _callee25);
+  })));
 });

package/components/table/useStickyHeader.js

@@ -17,7 +17,7 @@ export function useStickyHeader(callbacks) {
   });
   // when the scroll element scroll horizontally, scroll the sticky header too 
   callbacks.push(function (scrollLeft) {
-    if (isNull(stickHeader.value)) return;
+    if (isNull(stickHeader.value) && !instance.get('fixHeader')) return;
     var affixHeadWrapper = headRef.value.parentElement;
     affixHeadWrapper.scrollLeft = scrollLeft;
   });