@king-design/react 2.0.0-beta.0

package/components/table/cell.vdt.js

@@ -0,0 +1,67 @@
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-react';
+import { getClassAndStyleForFixed } from './useFixedColumns';
+import { get, noop } from 'intact-shared';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { getTextByChildren } from '../utils';
+var _$tmp0 = {
+  'className': 'ion-ios-arrow-right',
+  'size': 'small'
+};
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      props = _this$get.props,
+      rowIndex = _this$get.rowIndex,
+      columnIndex = _this$get.columnIndex,
+      offset = _this$get.offset,
+      data = _this$get.data,
+      checkType = _this$get.checkType,
+      indent = _this$get.indent,
+      grid = _this$get.grid,
+      colspan = _this$get.colspan,
+      rowspan = _this$get.rowspan,
+      onClickArrow = _this$get.onClickArrow,
+      hasChildren = _this$get.hasChildren;
+
+  var blocks = props.$blocks;
+  var children = get(data, props.key);
+
+  if (blocks) {
+    var template = blocks.template || blocks.default;
+
+    if (template) {
+      children = template(noop, [data, rowIndex]);
+    }
+  }
+
+  var _getClassAndStyleForF = getClassAndStyleForFixed(props, offset, checkType),
+      className = _getClassAndStyleForF.className,
+      style = _getClassAndStyleForF.style;
+
+  if (columnIndex === 0 && indent) {
+    style || (style = {});
+    style.paddingLeft = indent + "px";
+  }
+
+  return _$ce(2, 'td', [columnIndex === 0 && hasChildren ? _$cc(Button, {
+    'type': 'none',
+    'icon': true,
+    'circle': true,
+    'size': 'mini',
+    'className': 'k-table-arrow',
+    'ev-click': onClickArrow,
+    'children': _$cc(Icon, _$tmp0)
+  }) : undefined, children], 0, _$cn(className), {
+    'style': style,
+    'title': getTextByChildren(children),
+    'rowspan': rowspan,
+    'colspan': colspan
+  });
+}
+;
+
+export {normalize} from 'intact-react';

package/components/table/column.d.ts

@@ -0,0 +1,38 @@
+import { Component, TypeDefs, Children, VNodeComponentClass } from 'intact-react';
+export interface TableColumnProps {
+    key: string;
+    title?: Children;
+    sortable?: boolean;
+    width?: string | number;
+    group?: TableColumnGroupItem[];
+    multiple?: boolean;
+    ignore?: boolean;
+    fixed?: 'left' | 'right';
+    align?: 'left' | 'center' | 'right';
+    exportTitle?: string;
+    exportCell?: (data: any, index: number) => string;
+    minWidth?: number;
+    cols?: number;
+    rows?: number;
+    prevVNode?: VNodeComponentClass<TableColumn> | null;
+}
+export interface TableColumnEvents {
+}
+export interface TableColumnBlocks<T> {
+    title: null;
+    template: [T, number];
+    default: [T, number];
+}
+export declare type TableColumnGroupItem = {
+    label: Children;
+    value: any;
+};
+export declare class TableColumn<T = any> extends Component<TableColumnProps, TableColumnEvents, TableColumnBlocks<T>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TableColumnProps>>;
+    elementRef: import("intact").RefObject<HTMLElement>;
+    private group;
+}
+
+
+export {normalize} from 'intact-react';

package/components/table/column.js

@@ -0,0 +1,50 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, VNode, createRef } from 'intact-react';
+import template from './column.vdt';
+import { useGroup } from './useGroup';
+var typeDefs = {
+  key: {
+    type: String,
+    required: true
+  },
+  title: [String, Number, VNode],
+  sortable: Boolean,
+  width: [String, Number],
+  group: Array,
+  multiple: Boolean,
+  ignore: Boolean,
+  fixed: ['left', 'right'],
+  align: ['left', 'center', 'right'],
+  exportTitle: String,
+  exportCell: Function,
+  minWidth: Number,
+  // offset: null,
+  cols: null,
+  rows: null,
+  prevVNode: null
+};
+export var TableColumn = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(TableColumn, _Component);
+
+  function TableColumn() {
+    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.elementRef = createRef();
+    _this.group = useGroup();
+    return _this;
+  }
+
+  return TableColumn;
+}(Component);
+TableColumn.template = template;
+TableColumn.typeDefs = typeDefs;
+
+export {normalize} from 'intact-react';

package/components/table/column.vdt.js

@@ -0,0 +1,149 @@
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn, map as _$ma } from 'intact-react';
+import { getClassAndStyleForFixed } from './useFixedColumns';
+import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { Checkbox } from '../checkbox';
+import { makeGroupMenuStyles } from './styles';
+import { isStringOrNumber, get } from 'intact-shared';
+import { context as GroupContext } from './useGroup';
+import { context as SortableContext } from './useSortable';
+import { linkEvent } from 'intact';
+import { context as TableContext } from './useColumns';
+import { context as ResizableContext } from './useResizable';
+import { context as FixedColumnsContext } from './useFixedColumns';
+import { stopPropagation } from '../utils';
+var _$tmp0 = {
+  'className': 'ion-android-arrow-dropdown'
+};
+var _$tmp1 = {
+  'className': 'ion-android-arrow-dropup k-asc'
+};
+var _$tmp2 = {
+  'className': 'ion-android-arrow-dropdown k-desc'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      title = _this$get.title,
+      fixed = _this$get.fixed,
+      group = _this$get.group,
+      multiple = _this$get.multiple,
+      key = _this$get.key,
+      sortable = _this$get.sortable,
+      cols = _this$get.cols,
+      rows = _this$get.rows;
+
+  var _this$group = this.group,
+      onSelect = _this$group.onSelect,
+      isChecked = _this$group.isChecked,
+      getGroupText = _this$group.getGroupText;
+  return _$cc(TableContext.Consumer, {
+    'children': function children(checkType) {
+      return _$cc(GroupContext.Consumer, {
+        'children': function children(_ref) {
+          var currentGroup = _ref.group,
+              onChange = _ref.onChange;
+          return _$cc(SortableContext.Consumer, {
+            'children': function children(_ref2) {
+              var sort = _sortInstanceProperty(_ref2),
+                  onChangeSort = _ref2.onChange;
+
+              return _$cc(ResizableContext.Consumer, {
+                'children': function children(_ref3) {
+                  var resizable = _ref3.resizable,
+                      onStart = _ref3.onStart;
+                  return _$cc(FixedColumnsContext.Consumer, {
+                    'children': function children(offsetMap) {
+                      var _classNameObj, _$cn2, _$cn3;
+
+                      var _getClassAndStyleForF = getClassAndStyleForFixed(_this.get(), offsetMap[key], checkType),
+                          className = _getClassAndStyleForF.className,
+                          style = _getClassAndStyleForF.style;
+
+                      var classNameObj = (_classNameObj = {
+                        'k-column-sortable': sortable
+                      }, _classNameObj[className] = className, _classNameObj);
+                      var groupValue = currentGroup && currentGroup[key];
+                      var groupText = getGroupText(groupValue);
+                      var type = sort && sort.key === key && sort.type;
+                      var checked;
+                      return _$ce(2, 'th', [resizable && _this.$vNode.props.prevVNode ? _$ce(2, 'div', null, 1, 'k-table-resize', {
+                        'ev-mousedown': function evMousedown(e) {
+                          e._vNode = _this.$vNode;
+                          onStart(e);
+                        }
+                      }) : undefined, _$ce(2, 'div', [_$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)), groupText], 0, 'k-table-title-text c-ellipsis'), group ? _$cc(Dropdown, {
+                        'position': {
+                          my: 'center top',
+                          at: 'center bottom+5',
+                          collision: 'flipfit'
+                        },
+                        'key': 'dropdown',
+                        'children': [_$cc(Button, {
+                          'icon': true,
+                          'size': 'mini',
+                          'className': 'k-table-group',
+                          'ev-click': stopPropagation,
+                          'children': _$cc(Icon, _$tmp0)
+                        }), _$cc(DropdownMenu, {
+                          'className': _$cn((_$cn2 = {
+                            "k-table-group-dropdown": true
+                          }, _$cn2[makeGroupMenuStyles()] = true, _$cn2)),
+                          'children': _$ma(group, function ($value, $key) {
+                            return _$cc(DropdownItem, {
+                              'ev-select': function evSelect() {
+                                return onSelect($value.value, groupValue, onChange);
+                              },
+                              'hideOnSelect': !multiple,
+                              'className': _$cn({
+                                'k-active': checked = isChecked($value.value, groupValue)
+                              }),
+                              'children': multiple ? _$cc(Checkbox, {
+                                'value': checked,
+                                'children': $value.label
+                              }) : _$ce(2, 'span', $value.label, 0)
+                            });
+                          }, $this)
+                        })]
+                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp1), _$cc(Icon, _$tmp2)], 4, _$cn((_$cn3 = {
+                        'k-column-sort': true
+                      }, _$cn3["k-" + type] = type, _$cn3))) : undefined], 0, 'k-table-title')], 0, _$cn(classNameObj), {
+                        'style': style,
+                        'title': isStringOrNumber(title) ? title + (groupText || '') : null,
+                        'ev-click': sortable ? linkEvent(key, onChangeSort) : null,
+                        'colspan': cols,
+                        'rowspan': rows
+                      }, null, _this.elementRef);
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+}
+;
+
+export {normalize} from 'intact-react';

package/components/table/exportTable.d.ts

@@ -0,0 +1,6 @@
+import { ComponentClass } from 'intact-react';
+import type { useColumns } from './useColumns';
+export declare function exportTable(getData: ReturnType<typeof useColumns>['getData'], data: any[] | undefined, childrenKey: string | undefined, parentComponet: ComponentClass, filename: string): Promise<string>;
+
+
+export {normalize} from 'intact-react';

package/components/table/exportTable.js

@@ -0,0 +1,82 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { findDomFromVNode, createVNode as h, mount } from 'intact-react';
+import { loopDataWithChildrenKey } from './useTree';
+import { get, noop, isNullOrUndefined } from 'intact-shared';
+export function exportTable(_x, _x2, _x3, _x4, _x5) {
+  return _exportTable.apply(this, arguments);
+}
+
+function _exportTable() {
+  _exportTable = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(getData, data, childrenKey, parentComponet, filename) {
+    var download, collection, _getData, columns, cols, content;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return import('downloadjs');
+
+          case 2:
+            download = _context.sent.default;
+            collection = [];
+            _getData = getData(), columns = _getData.columns, cols = _getData.cols; // head
+
+            columns.forEach(function (column) {
+              var rows = []; // TODO: support grouped header
+
+              column.forEach(function (vNode) {
+                var props = vNode.props;
+                if (props.ignore) return;
+                var dom = findDomFromVNode(vNode, true);
+                pushTextContext(rows, dom, props.exportTitle);
+              });
+              collection.push(rows.join(','));
+            }); // body
+
+            loopDataWithChildrenKey(data, childrenKey, function (data, index) {
+              var rows = [];
+              cols.forEach(function (col) {
+                if (col.ignore) return;
+                var blocks = col.$blocks;
+                var children = get(data, col.key);
+
+                if (blocks) {
+                  var template = blocks.template || blocks.default;
+
+                  if (template) {
+                    children = template(noop, [data, index]);
+                  }
+                }
+
+                var td = h('td', null, children);
+                mount(td, null, parentComponet, false, null, []);
+                var exportCell = col.exportCell;
+                var content = exportCell && exportCell(data, index);
+                pushTextContext(rows, td.dom, content);
+              });
+              collection.push(rows.join(','));
+            }, false);
+            content = collection.join('\r\n');
+            download("\uFEFF" + content, filename + '.csv', 'text/comma-separated-values;charset=utf-8');
+            return _context.abrupt("return", content);
+
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _exportTable.apply(this, arguments);
+}
+
+function pushTextContext(rows, dom, content) {
+  var text = isNullOrUndefined(content) ? dom.textContent : content;
+  text = '"' + String(_trimInstanceProperty(text).call(text)).replace(/"/g, '""') + '"';
+  rows.push(text);
+}
+
+export {normalize} from 'intact-react';

package/components/table/index.d.ts

@@ -0,0 +1,5 @@
+export * from './table';
+export * from './column';
+
+
+export {normalize} from 'intact-react';

package/components/table/index.js

@@ -0,0 +1,4 @@
+export * from './table';
+export * from './column';
+
+export {normalize} from 'intact-react';

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

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