@nickeylin/antd-mobile-pro 2.0.0

package/dist/es/components/segment-control/style.less

@@ -0,0 +1,154 @@
+@class-prefix-segment: ~'suid-segment-control';
+
+@size-default: 40px;
+@size-lg: 48px;
+@size-sm: 32px;
+@size-mini: 24px;
+
+.@{class-prefix-segment} {
+  --track-padding: 2px;
+  --track-bg: var(--suid-segment-control-track-bg, var(--adm-color-box));
+  --item-color: var(
+    --suid-segment-control-item-color,
+    var(--adm-color-text-secondary)
+  );
+  --item-selected-bg: var(--suid-segment-control-item-selected-bg, #ffffff);
+  --item-selected-color: var(
+    --suid-segment-control-item-selected-color,
+    var(--adm-color-text)
+  );
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--track-padding);
+  color: var(--item-color);
+  font-size: var(--adm-font-size-main);
+  // line-height: var(--ant-line-height);
+  list-style: none;
+  // font-family: var(--ant-font-family);
+  display: inline-block;
+  background: var(--track-bg);
+  border-radius: var(--adm-radius-s);
+  transition: all 0.2s ease-in-out;
+
+  & &-group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    justify-items: flex-start;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  & &-item {
+    position: relative;
+    text-align: center;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+    border-radius: var(--adm-radius-s);
+    transform: translateZ(0);
+    &-selected {
+      background-color: var(--item-selected-bg);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+        0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+      color: var(--item-selected-color);
+    }
+    &-disabled {
+      color: var(--adm-color-light);
+    }
+  }
+  & &__item-icon + * {
+    margin-inline-start: 6px;
+  }
+  & &-item-input {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  & &-item-label {
+    min-height: calc(@size-default - var(--track-padding) * 2);
+    line-height: calc(@size-default - var(--track-padding) * 2);
+    padding: 0 11px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  & &-thumb {
+    background-color: var(--item-selected-bg);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 0;
+    height: 100%;
+    padding: 4 0;
+    border-radius: var(--adm-radius-s);
+    box-sizing: border-box;
+    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
+    &-motion-appear-active {
+      transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
+      will-change: transform, width;
+    }
+  }
+  &&-vertical {
+    .@{class-prefix-segment}-group {
+      flex-direction: column;
+    }
+    .@{class-prefix-segment}-thumb {
+      width: 100%;
+      height: 0;
+      padding: 0 6px;
+    }
+  }
+
+  &&--lg {
+    .@{class-prefix-segment}-item-label {
+      min-height: calc(@size-lg - var(--track-padding) * 2);
+      line-height: calc(@size-lg - var(--track-padding) * 2);
+    }
+    .@{class-prefix-segment}-thumb {
+      border-radius: var(--adm-radius-l);
+    }
+  }
+  &&--sm {
+    .@{class-prefix-segment}-item-label {
+      min-height: calc(@size-sm - var(--track-padding) * 2);
+      line-height: calc(@size-sm - var(--track-padding) * 2);
+    }
+    .@{class-prefix-segment}-thumb {
+      border-radius: var(--adm-radius-s);
+    }
+  }
+  &&--mini {
+    .@{class-prefix-segment}-item-label {
+      min-height: calc(@size-mini - var(--track-padding) * 2);
+      line-height: calc(@size-mini - var(--track-padding) * 2);
+    }
+    .@{class-prefix-segment}-thumb {
+      border-radius: var(--adm-radius-s);
+    }
+  }
+
+  &&--block {
+    display: flex;
+    .@{class-prefix-segment}-item {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+  &&--round {
+    border-radius: 9999px;
+
+    .@{class-prefix-segment}-item,
+    .@{class-prefix-segment}-thumb {
+      border-radius: 9999px;
+    }
+  }
+}

package/dist/es/components/stepper-range/index.d.ts

@@ -0,0 +1 @@
+export { default, type StepperRangeProps, type StepperRangeValue, } from './stepper-range';

package/dist/es/components/stepper-range/index.js

@@ -0,0 +1 @@
+export { default } from "./stepper-range";

package/dist/es/components/stepper-range/stepper-range.d.ts

@@ -0,0 +1,19 @@
+import { SpaceProps, StepperProps } from 'antd-mobile';
+import { BaseStepperProps } from 'antd-mobile/es/components/stepper/stepper';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import { FC } from 'react';
+export type StepperRangeValue = number[];
+type RangeScope = 'start' | 'end';
+type BaseStepperRangeProps<ValueType extends string | number> = Omit<BaseStepperProps<ValueType>, 'value' | 'onChange' | 'defaultValue' | 'allowEmpty' | 'parser' | 'formatter'> & {
+    defaultValue?: StepperRangeValue;
+    value?: StepperRangeValue;
+    onChange?(value: StepperRangeValue): void;
+    parser?: (text: string, scope: RangeScope) => ValueType;
+    formatter?: (value: ValueType | null | undefined, scope: RangeScope) => string;
+} & Pick<SpaceProps, 'block'> & NativeProps<'--gap-horizontal' | '--input-width'> & {
+    seperator?: string;
+    stepperStyle?: StepperProps['style'];
+};
+export type StepperRangeProps = BaseStepperRangeProps<number>;
+declare const StepperRange: FC<StepperRangeProps>;
+export default StepperRange;

package/dist/es/components/stepper-range/stepper-range.js

@@ -0,0 +1,97 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["block", "className", "style", "seperator", "value", "onChange", "defaultValue", "parser", "formatter", "min", "max", "stepperStyle"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Space, Stepper } from 'antd-mobile';
+import classNames from 'classnames';
+import { useMergedState } from 'rc-util';
+import { cn } from "../../utils/bem";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var bem = cn('stepper-range');
+var StepperRange = function StepperRange(_ref) {
+  var block = _ref.block,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$seperator = _ref.seperator,
+    seperator = _ref$seperator === void 0 ? '~' : _ref$seperator,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    defaultValue = _ref.defaultValue,
+    parser = _ref.parser,
+    formatter = _ref.formatter,
+    min = _ref.min,
+    max = _ref.max,
+    stepperStyle = _ref.stepperStyle,
+    stepperProps = _objectWithoutProperties(_ref, _excluded);
+  var _useMergedState = useMergedState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [min !== null && min !== void 0 ? min : 0, max !== null && max !== void 0 ? max : 0], {
+      value: value,
+      onChange: function (_onChange) {
+        function onChange(_x) {
+          return _onChange.apply(this, arguments);
+        }
+        onChange.toString = function () {
+          return _onChange.toString();
+        };
+        return onChange;
+      }(function (val) {
+        if (val) {
+          onChange === null || onChange === void 0 || onChange(val);
+        }
+      }),
+      postState: function postState(value) {
+        return value.sort(function (a, b) {
+          return a - b;
+        });
+      }
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    localValue = _useMergedState2[0],
+    setLocalValue = _useMergedState2[1];
+  var createStepperProps = function createStepperProps(scope) {
+    var _localValue$, _localValue$2;
+    var p = scope === 'start' ? {
+      min: min,
+      max: (_localValue$ = localValue[1]) !== null && _localValue$ !== void 0 ? _localValue$ : max,
+      value: localValue[0]
+    } : {
+      min: (_localValue$2 = localValue[0]) !== null && _localValue$2 !== void 0 ? _localValue$2 : min,
+      max: max,
+      value: localValue[1]
+    };
+    return _objectSpread(_objectSpread(_objectSpread({}, stepperProps), {}, {
+      style: stepperStyle
+    }, p), {}, {
+      parser: parser ? function (text) {
+        return parser(text, scope);
+      } : undefined,
+      formatter: formatter ? function (val) {
+        return formatter(val, scope);
+      } : undefined,
+      onChange: function onChange(val) {
+        setLocalValue(function (prev) {
+          var nextValue = _toConsumableArray(prev);
+          nextValue[scope === 'start' ? 0 : 1] = val;
+          return nextValue;
+        });
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Space, {
+    block: block,
+    justify: "between",
+    align: "center",
+    style: _objectSpread({
+      '--gap-horizontal': '14px'
+    }, style),
+    className: classNames(bem(), className),
+    children: [/*#__PURE__*/_jsx(Stepper, _objectSpread({}, createStepperProps('start'))), /*#__PURE__*/_jsx("span", {
+      className: bem('seperator'),
+      children: seperator
+    }), /*#__PURE__*/_jsx(Stepper, _objectSpread({}, createStepperProps('end')))]
+  });
+};
+export default StepperRange;

package/dist/es/components/styles/global.less

@@ -0,0 +1,3 @@
+html[data-prefers-color-scheme='dark'] {
+  --suid-tabbar-background-color: var(--adm-color-background);
+}

package/dist/es/components/styles/variable.less

@@ -0,0 +1,2 @@
+@suid-prefix: ~'suid';
+@dark-selector: ~'[data-prefers-color-scheme="dark"]';

package/dist/es/components/tabbar-layout/context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TabBarItemProps } from 'antd-mobile';
+export interface TabBarLayoutItemProps<K extends string = string> extends TabBarItemProps {
+    key: K;
+}
+export interface TabBarLayoutContextType {
+    tabs: TabBarLayoutItemProps[];
+    update(tabItem: Omit<TabBarItemProps, 'key'>, index: number): void;
+}
+export declare const TabBarLayoutContext: import("react").Context<TabBarLayoutContextType>;

package/dist/es/components/tabbar-layout/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+export var TabBarLayoutContext = /*#__PURE__*/createContext({
+  tabs: [],
+  update: function update() {
+    throw new Error('Function not implemented.');
+  }
+});

package/dist/es/components/tabbar-layout/index.d.ts

@@ -0,0 +1,5 @@
+import './style.less';
+import TabBarLayout from './tabbar-layout';
+export { type TabBarLayoutProps } from './tabbar-layout';
+export { type TabBarLayoutContextType, type TabBarLayoutItemProps, } from './context';
+export default TabBarLayout;

package/dist/es/components/tabbar-layout/index.js

@@ -0,0 +1,3 @@
+import "./style.less";
+import TabBarLayout from "./tabbar-layout";
+export default TabBarLayout;

package/dist/es/components/tabbar-layout/style.less

@@ -0,0 +1,21 @@
+@class-prefix-tabbar-layout: ~'suid-tabbar-layout';
+
+.@{class-prefix-tabbar-layout} {
+  padding-bottom: 50px;
+
+  &__tabbar {
+    position: fixed;
+    bottom: 0;
+    z-index: 99;
+    left: 0;
+    width: 100vw;
+    border-top: 1px solid var(--adm-color-border);
+    background-color: var(--tabbar-background-color);
+    .adm-tab-bar-item-active {
+      color: var(--active-color);
+    }
+  }
+
+  --tabbar-background-color: var(--suid-tabbar-background-color, #ffffff);
+  --active-color: var(--suid-tabbar-active-color, var(--adm-color-primary));
+}

package/dist/es/components/tabbar-layout/tabbar-layout.d.ts

@@ -0,0 +1,17 @@
+import { TabBarProps } from 'antd-mobile';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import { ReactNode } from 'react';
+import { TabBarLayoutItemProps } from './context';
+export interface TabBarLayoutProps<K extends string = string> extends NativeProps<'--tabbar-background-color' | '--active-color'> {
+    tabs: TabBarLayoutItemProps<K>[];
+    activeKey?: K;
+    defaultActiveKey?: K;
+    onChange?: (key: K) => void;
+    children?: ReactNode | ((activeKey: K, activeItem: TabBarLayoutItemProps<K>) => ReactNode);
+    tabbar?: TabBarProps;
+}
+declare function TabBarLayout<K extends string = string>({ tabs, children, activeKey: activeKeyProp, onChange, defaultActiveKey, tabbar, className, ...props }: TabBarLayoutProps<K>): JSX.Element;
+declare namespace TabBarLayout {
+    var useTabBar: () => import("./context").TabBarLayoutContextType;
+}
+export default TabBarLayout;

package/dist/es/components/tabbar-layout/tabbar-layout.js

@@ -0,0 +1,81 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["tabs", "children", "activeKey", "onChange", "defaultActiveKey", "tabbar", "className"],
+  _excluded2 = ["key"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { SafeArea, TabBar } from 'antd-mobile';
+import classNames from 'classnames';
+import { useMergedState } from 'rc-util';
+import { useCallback, useContext, useMemo } from 'react';
+import { cn } from "../../utils/bem";
+import { TabBarLayoutContext } from "./context";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var bem = cn('tabbar-layout');
+function TabBarLayout(_ref) {
+  var tabs = _ref.tabs,
+    children = _ref.children,
+    activeKeyProp = _ref.activeKey,
+    onChange = _ref.onChange,
+    defaultActiveKey = _ref.defaultActiveKey,
+    tabbar = _ref.tabbar,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMergedState = useMergedState(defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : tabs[0].key, {
+      value: activeKeyProp,
+      onChange: onChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    activeKey = _useMergedState2[0],
+    setActiveKey = _useMergedState2[1];
+  var _useMergedState3 = useMergedState(tabs),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    localTabs = _useMergedState4[0],
+    setLocalTabs = _useMergedState4[1];
+  var activeItem = useMemo(function () {
+    return tabs.find(function (tab) {
+      return tab.key == activeKey;
+    });
+  }, [activeKey, tabs]);
+  return /*#__PURE__*/_jsx(TabBarLayoutContext.Provider, {
+    value: {
+      tabs: localTabs,
+      update: useCallback(function (tabItem, index) {
+        setLocalTabs(function (prevVal) {
+          if (index < 0 || index >= prevVal.length) return prevVal;
+          var nextVal = _toConsumableArray(prevVal);
+          var nextItem = _objectSpread(_objectSpread({}, prevVal[index]), tabItem);
+          nextVal.splice(index, 1, nextItem);
+          return nextVal;
+        });
+      }, [setLocalTabs])
+    },
+    children: /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: classNames(bem(), className)
+    }, props), {}, {
+      children: [typeof children === 'function' ? children(activeKey, activeItem) : children, (tabbar === null || tabbar === void 0 ? void 0 : tabbar.safeArea) === false ? null : /*#__PURE__*/_jsx(SafeArea, {
+        position: "bottom"
+      }), /*#__PURE__*/_jsx(TabBar, _objectSpread(_objectSpread({
+        className: bem('tabbar'),
+        activeKey: activeKey,
+        onChange: function onChange(val) {
+          return setActiveKey(val);
+        },
+        safeArea: true
+      }, tabbar), {}, {
+        children: localTabs.map(function (_ref2) {
+          var key = _ref2.key,
+            tabProps = _objectWithoutProperties(_ref2, _excluded2);
+          return /*#__PURE__*/_jsx(TabBar.Item, _objectSpread({}, tabProps), key);
+        })
+      }))]
+    }))
+  });
+}
+TabBarLayout.useTabBar = function useTabBar() {
+  return useContext(TabBarLayoutContext);
+};
+export default TabBarLayout;

package/dist/es/components/table/index.d.ts

@@ -0,0 +1,4 @@
+import { Table } from './table';
+import './table.less';
+export type { TableProps } from './table';
+export default Table;

package/dist/es/components/table/index.js

@@ -0,0 +1,3 @@
+import { Table } from "./table";
+import "./table.less";
+export default Table;

package/dist/es/components/table/table.d.ts

@@ -0,0 +1,4 @@
+import React, { FunctionComponent } from 'react';
+import { BasicTableProps } from './types';
+export type TableProps = BasicTableProps;
+export declare const Table: FunctionComponent<Partial<TableProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/es/components/table/table.js

@@ -0,0 +1,131 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "style", "columns", "data", "bordered", "summary", "striped", "noData", "sorterIcon", "showHeader", "onSort"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { withNativeProps } from 'antd-mobile/es/utils/native-props';
+import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
+import { DownFill } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var defaultProps = {
+  columns: [],
+  data: [],
+  bordered: true,
+  striped: false,
+  noData: '',
+  sorterIcon: null,
+  showHeader: true
+};
+export var Table = function Table(p) {
+  var props = mergeProps(defaultProps, p);
+  var _props = _objectSpread({}, props),
+    children = _props.children,
+    className = _props.className,
+    style = _props.style,
+    columns = _props.columns,
+    data = _props.data,
+    bordered = _props.bordered,
+    summary = _props.summary,
+    striped = _props.striped,
+    noData = _props.noData,
+    sorterIcon = _props.sorterIcon,
+    showHeader = _props.showHeader,
+    onSort = _props.onSort,
+    rest = _objectWithoutProperties(_props, _excluded);
+  var _useState = useState(data),
+    _useState2 = _slicedToArray(_useState, 2),
+    curData = _useState2[0],
+    setCurData = _useState2[1];
+  useEffect(function () {
+    if (data && String(data) !== String(curData)) {
+      setCurData(data);
+    }
+  }, [data]);
+  var classPrefix = 'amd-table';
+  var headerClassPrefix = "".concat(classPrefix, "__main__head__tr");
+  var bodyClassPrefix = "".concat(classPrefix, "__main__body__tr");
+  var cls = classNames(classPrefix, className);
+  var handleSorterClick = function handleSorterClick(item) {
+    if (item.sorter) {
+      onSort && onSort(item, curData);
+      if (typeof item.sorter === 'function') {
+        setCurData(curData.sort(item.sorter));
+      } else {
+        setCurData(item.sorter === 'default' ? curData.sort() : curData);
+      }
+    }
+  };
+  var cellClasses = function cellClasses(item) {
+    return _defineProperty(_defineProperty({}, "".concat(headerClassPrefix, "--border"), props.bordered), "".concat(headerClassPrefix, "--align").concat(item.align ? item.align : ''), true);
+  };
+  var getColumnItem = function getColumnItem(value) {
+    return columns.filter(function (item) {
+      return item.key === value;
+    })[0];
+  };
+  var renderHeadCells = function renderHeadCells() {
+    return columns.map(function (item, index) {
+      var _item$key;
+      return /*#__PURE__*/_jsxs("span", {
+        className: classNames("".concat(headerClassPrefix, "__th"), cellClasses(item)),
+        onClick: function onClick() {
+          return handleSorterClick(item);
+        },
+        children: [item.title, "\xA0", item.sorter && (sorterIcon || /*#__PURE__*/_jsx(DownFill, {
+          fontSize: 12
+        }))]
+      }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : index);
+    });
+  };
+  var sortDataItem = function sortDataItem() {
+    return columns.map(function (columns) {
+      return [columns.key, columns.render];
+    });
+  };
+  var renderBodyTds = function renderBodyTds(item) {
+    return sortDataItem().map(function (_ref2, index) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        value = _ref3[0],
+        render = _ref3[1];
+      return /*#__PURE__*/_jsx("span", {
+        className: classNames("".concat(bodyClassPrefix, "__td"), cellClasses(getColumnItem(value))),
+        children: typeof item[value] === 'function' || typeof render === 'function' ? /*#__PURE__*/_jsx("div", {
+          children: render ? render(item) : item[value](item)
+        }) : item[value]
+      }, value !== null && value !== void 0 ? value : index);
+    });
+  };
+  var renderBoyTrs = function renderBoyTrs() {
+    return curData.map(function (item, index) {
+      return /*#__PURE__*/_jsx("div", {
+        className: bodyClassPrefix,
+        children: renderBodyTds(item)
+      }, index);
+    });
+  };
+  return withNativeProps(props, /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cls,
+    style: style
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classNames("".concat(classPrefix, "__main"), _defineProperty({}, "".concat(classPrefix, "__main--striped"), striped)),
+      children: [showHeader && /*#__PURE__*/_jsx("div", {
+        className: "".concat(classPrefix, "__main__head"),
+        children: /*#__PURE__*/_jsx("div", {
+          className: headerClassPrefix,
+          children: renderHeadCells()
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "".concat(classPrefix, "__main__body"),
+        children: renderBoyTrs()
+      })]
+    }), (summary || curData.length === 0) && /*#__PURE__*/_jsx("div", {
+      className: "".concat(classPrefix, "__summary"),
+      children: summary || noData
+    })]
+  })));
+};