@ucloud-fe/react-components 1.15.0 → 1.16.0

package/index.d.ts

@@ -50,6 +50,8 @@ export { default as Breadcrumb } from './lib/components/Breadcrumb';
 
 export { default as Nav } from './lib/components/Nav';
 
+export { default as Skeleton } from './lib/components/Skeleton';
+
 // Button
 import { ButtonProps } from './lib/components/Button/Button';
 export { default as Button } from './lib/components/Button';
@@ -82,7 +84,7 @@ export interface RowProps extends HTMLAttributes<HTMLDivElement> {
     type?: RowType;
     align?: RowAlign;
     justify?: RowJustify;
-    gutter?: number;
+    gutter?: number | [number, number];
 }
 export declare class Row extends Component<RowProps> {}
 
@@ -430,12 +432,12 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     borderType?: 'default' | 'circle';
     suffix?: ReactNode;
 }
-export  interface TagGroupProps  extends HTMLAttributes<HTMLDivElement>{
+export interface TagGroupProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     compact?: boolean;
     exposeCount?: number;
-    popoverProps?: PopoverProps
-} 
+    popoverProps?: PopoverProps;
+}
 export declare class TagIcon extends PureComponent<TagProps> {}
 export declare class TagGroup extends PureComponent<TagGroupProps> {}
 export declare class Tag extends PureComponent<TagProps> {
@@ -518,7 +520,7 @@ interface ModalConfirmHandle {
     destroy(): void;
 }
 interface ModalConfirm {
-    (options: ModalProps): ModalConfirmHandle;
+    (options: ModalProps, contentNode?: ReactNode): ModalConfirmHandle;
 }
 export declare class ModalContent extends Component<HTMLAttributes<HTMLDivElement>> {}
 export declare class Modal extends Component<ModalProps> {
@@ -551,7 +553,7 @@ export interface TableScroll {
     y?: number;
     onScroll?: (e: WheelEvent) => void;
 }
-type RowKey = () => string;
+type RowKey = (row: any) => string;
 export interface RowSelection {
     fixed?: boolean;
     onChange?: Function;
@@ -562,8 +564,9 @@ export interface RowSelection {
     selectedTip?: boolean | 'button';
     disabled?: boolean;
 }
-interface GetRowClassName {
-    (): string;
+interface DragSorting {
+    fixed: boolean;
+    onChange: (record: any, fromIndex: number, toIndex: number) => void;
 }
 interface ColumnRender {
     (col: any, row?: any): ReactNode;
@@ -585,18 +588,17 @@ export interface Column {
 interface DefaultColumnConfig {
     [key: string]: string;
 }
-interface TableRowBack extends HTMLTableDataCellElement {}
 interface TableCustomStyle {
     outerPadding?: string;
     [key: string]: any;
 }
-interface TableDefaultOrder {
+interface TableOrder {
     key: string;
     state: 'desc' | 'asc';
 }
 export interface TableConditionChangeEventOrder {
-    order: string;
-    filter: string[];
+    order: TableOrder;
+    filters: { key: string; value: string }[];
     searchValue: string;
 }
 interface ConditionChangeEvent {
@@ -621,11 +623,13 @@ export interface TableProps {
     defaultExpandAllRows?: boolean;
     onExpandedRowsChange?: (row: any) => void;
     onExpand?: Function;
-    onRow?: (row: any, index: number) => TableRowBack;
-    onHeaderRow?: (row: any, index: number) => TableRowBack;
+    onRow?: (row: any, index: number) => any;
+    onHeaderRow?: (row: any, index: number) => any;
     rowSelection?: RowSelection | true;
+    dragSorting?: boolean | DragSorting;
     onRowSelect?: (keys: string[]) => void;
     showHeader?: boolean;
+    columnResizable?: boolean;
     title?: () => ReactNode;
     footer?: () => ReactNode;
     emptyContent?: ReactNode;
@@ -637,12 +641,12 @@ export interface TableProps {
     rowKey?: string | RowKey;
     zebraCrossing?: boolean;
     components?: any;
-    defaultOrder?: TableDefaultOrder;
+    defaultOrder?: TableOrder;
+    order?: TableOrder;
     onConditionChange?: ConditionChangeEvent;
     doNotHandleCondition?: boolean;
     contextMenu?: TableContextMenu;
     className?: string;
-    rowClassName?: string | GetRowClassName;
 }
 interface ColumnConfigButtonProps extends ButtonProps {
     modalProps?: ModalProps;
@@ -729,12 +733,12 @@ interface Step {
     remark?: ReactNode;
     status?: 'disabled' | 'error' | 'success' | 'normal';
 }
-export interface StepsProps extends HTMLAttributes<HTMLDivElement> {
+export interface StepsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     steps: Step[];
     current?: string | number;
     status?: 'current' | 'loading' | 'error';
     direction?: 'horizontal' | 'vertical';
-    nowrap?:boolean;
+    nowrap?: boolean;
     onChange?: (current: string | number) => void;
 }
 export declare class Steps extends Component<StepsProps> {}

package/lib/components/Cascader/Cascade.d.ts

@@ -14,11 +14,16 @@ declare const CascadeSearchResult: React.NamedExoticComponent<{
     empty?: boolean | undefined;
     error?: Error | undefined;
 } & SharedProps>;
-declare const _default: React.MemoExoticComponent<({ dataSource, value, onChange, expandedValue, onExpand, loadData }: {
+declare const _default: React.MemoExoticComponent<({ dataSource, value, onChange, expandedValue, onExpand, loadData, topExtraRender }: {
     dataSource?: CascadeData[] | undefined;
     value?: string[] | undefined;
     expandedValue: string[];
     loadData?: LoadData | undefined;
+    topExtraRender?: ((props: {
+        index: number;
+        parents?: CascadeData[] | undefined;
+        items?: CascadeData[] | undefined;
+    }) => React.ReactNode) | undefined;
 } & SharedProps) => JSX.Element>;
 export default _default;
 export { CascadeSearchResult };

package/lib/components/Cascader/Cascade.js

@@ -163,7 +163,8 @@ var Cascade = function Cascade(_ref2) {
       onChange = _ref2.onChange,
       expandedValue = _ref2.expandedValue,
       onExpand = _ref2.onExpand,
-      loadData = _ref2.loadData;
+      loadData = _ref2.loadData,
+      topExtraRender = _ref2.topExtraRender;
   var locale = (0, _useLocale.default)(_zh_CN.default, 'Cascader');
   var expandedItems = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this6);
@@ -194,6 +195,8 @@ var Cascade = function Cascade(_ref2) {
       selectedKey: value === null || value === void 0 ? void 0 : value[index],
       expandedKey: expandedValue === null || expandedValue === void 0 ? void 0 : expandedValue[index],
       parents: parents,
+      index: index,
+      topExtraRender: topExtraRender,
       disabled: parents.some(function (parent) {
         (0, _newArrowCheck2.default)(this, _this7);
         return parent.disabled;

package/lib/components/Cascader/Cascader.d.ts

@@ -37,7 +37,14 @@ export interface DefinedCascaderProps {
     };
     /** 分隔符 */
     separator?: string;
+    /** 渲染级联顶部的插槽 */
+    topExtraRender?: (props: {
+        /** 当前级联索引 */
+        index: number;
+        parents?: CascadeData[];
+        items?: CascadeData[];
+    }) => React.ReactNode;
 }
 export declare type CascaderProps = DefinedCascaderProps;
-declare const _default: React.MemoExoticComponent<({ dataSource, value: _value, defaultValue, onChange: _onChange, disabled, size, search, clearable, placeholder, loadData, status, popoverProps, separator, }: DefinedCascaderProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ dataSource, value: _value, defaultValue, onChange: _onChange, disabled, size, search, clearable, placeholder, loadData, status, popoverProps, separator, topExtraRender }: DefinedCascaderProps) => JSX.Element>;
 export default _default;

package/lib/components/Cascader/Cascader.js

@@ -184,7 +184,8 @@ var Cascader = function Cascader(_ref3) {
       loadData = _ref3.loadData,
       status = _ref3.status,
       popoverProps = _ref3.popoverProps,
-      separator = _ref3.separator;
+      separator = _ref3.separator,
+      topExtraRender = _ref3.topExtraRender;
 
   var _useUncontrolled = (0, _useUncontrolled3.default)(_value, defaultValue, _onChange),
       _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
@@ -323,6 +324,7 @@ var Cascader = function Cascader(_ref3) {
       onChange: handleSelect,
       expandedValue: expandedValue,
       onExpand: handleExpand,
+      topExtraRender: topExtraRender,
       loadData: loadData
     })),
     trigger: [],
@@ -360,7 +362,8 @@ Cascader.propTypes = {
   clearable: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   popoverProps: _propTypes.default.objectOf(_propTypes.default.any),
-  separator: _propTypes.default.string
+  separator: _propTypes.default.string,
+  topExtraRender: _propTypes.default.func
 };
 
 var _default = /*#__PURE__*/_react.default.memo(Cascader);

package/lib/components/Cascader/Items.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 import { CascadeData, LoadData } from './interface';
-declare const _default: React.MemoExoticComponent<({ items, selectedKey, expandedKey, disabled, parents, loadData }: {
+declare const _default: React.MemoExoticComponent<({ items, selectedKey, expandedKey, disabled, parents, loadData, topExtraRender, index }: {
     items?: CascadeData[] | undefined;
     selectedKey?: string | undefined;
     expandedKey?: string | undefined;
     disabled?: boolean | undefined;
     parents?: CascadeData[] | undefined;
     loadData?: LoadData | undefined;
+    topExtraRender?: ((props: {
+        index: number;
+        parents?: CascadeData[] | undefined;
+        items?: CascadeData[] | undefined;
+    }) => React.ReactNode) | undefined;
+    index: number;
 }) => JSX.Element>;
 export default _default;

package/lib/components/Cascader/Items.js

@@ -46,7 +46,9 @@ var Items = function Items(_ref) {
       expandedKey = _ref.expandedKey,
       disabled = _ref.disabled,
       parents = _ref.parents,
-      loadData = _ref.loadData;
+      loadData = _ref.loadData,
+      topExtraRender = _ref.topExtraRender,
+      index = _ref.index;
 
   var _useState = (0, _react.useState)(true),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -134,6 +136,17 @@ var Items = function Items(_ref) {
       exited = true;
     }.bind(this);
   }.bind(this), [items, loadData, parents]);
+
+  var topExtraRenderDom = _react.default.useMemo(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    if (typeof topExtraRender !== 'function') return null;
+    return topExtraRender({
+      index: index,
+      items: items,
+      parents: parents
+    });
+  }.bind(this), [index, items, parents, topExtraRender]);
+
   return /*#__PURE__*/_react.default.createElement(_Loading.default, {
     loading: loading
   }, error ? /*#__PURE__*/_react.default.createElement("div", {
@@ -143,11 +156,11 @@ var Items = function Items(_ref) {
     closable: false
   }, error.message)) : initial || loading ? /*#__PURE__*/_react.default.createElement("div", {
     className: _cascade.itemsCls
-  }) : !items || !items.length ? /*#__PURE__*/_react.default.createElement("div", {
+  }, topExtraRenderDom) : !items || !items.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: _cascade.emptyCls
   }, locale.emptyTip) : /*#__PURE__*/_react.default.createElement("div", {
     className: _cascade.itemsCls
-  }, items.map(function (item) {
+  }, topExtraRenderDom, items.map(function (item) {
     (0, _newArrowCheck2.default)(this, _this2);
     var value = item.key,
         itemDisabled = item.disabled,

package/lib/components/DatePicker/DatePicker.js

@@ -93,7 +93,7 @@ var DatePickerForDate = function DatePickerForDate(props) {
   return /*#__PURE__*/_react.default.createElement(_style.PickerContainer, (0, _extends2.default)({}, containerProps, {
     hasTime: hasTime
   }), /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({}, popoverProps, {
-    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_style.Arrow, null), /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({}, calendarProps, {
+    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({}, calendarProps, {
       sidebar: hasTime ? /*#__PURE__*/_react.default.createElement(_Time.default, timeProps) : null
     })), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerProps, {
       tip: error,

package/lib/components/DatePicker/Month.js

@@ -71,7 +71,7 @@ var Month = function Month(props) {
   return /*#__PURE__*/_react.default.createElement(_style.PickerContainer, (0, _extends2.default)({
     isMonth: true
   }, containerProps), /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
-    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_style.Arrow, null), /*#__PURE__*/_react.default.createElement(_Calendar.default.Month, calendarProps), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerProps, {
+    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_Calendar.default.Month, calendarProps), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerProps, {
       tip: error,
       isError: !!error
     })))

package/lib/components/DatePicker/Range.js

@@ -455,10 +455,6 @@ var Range = function Range(_ref2) {
     visible: activeS || activeE,
     popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, (0, _extends2.default)({}, popupProps, {
       endInputHighlight: activeE
-    }), /*#__PURE__*/_react.default.createElement(_style.Arrow, {
-      style: {
-        left: activeE ? startRangeInputWidth + 'px' : '20px'
-      }
     }), /*#__PURE__*/_react.default.createElement(_style.RangeCalendarWrap, {
       visible: activeS
     }, /*#__PURE__*/_react.default.createElement(CalendarComp, (0, _extends2.default)({}, calendarPropsS, {

package/lib/components/DatePicker/usePicker.js

@@ -99,7 +99,7 @@ var trigger = [];
 var align = {
   points: ['tl', 'bl'],
   overflow: {
-    adjustX: 0,
+    adjustX: 1,
     adjustY: 1
   },
   offset: [0, 10],

package/lib/components/Menu/locale/en_US.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  selectAll: 'select all'
+  selectAll: 'Select all'
 };
 exports.default = _default;

package/lib/components/Modal/locale/en_US.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  confirm: 'confirm',
-  cancel: 'cancel'
+  confirm: 'Confirm',
+  cancel: 'Cancel'
 };
 exports.default = _default;

package/lib/components/Pagination/locale/en_US.js

@@ -7,17 +7,17 @@ exports.default = void 0;
 var _default = {
   // Options.jsx
   itemsPerPage: 'items/page',
-  jumpTo: 'jump to',
-  jumpToConfirm: 'confirm',
-  page: 'page',
+  jumpTo: 'Jump to',
+  jumpToConfirm: 'Confirm',
+  page: 'Page',
   // Pagination.jsx
-  prevPage: 'prev page',
-  nextPage: 'next page',
-  prev5: 'prev 5 page',
-  next5: 'next 5 page',
-  prev3: 'prev 3 page',
-  next3: 'next 3 page',
-  total: 'total',
-  items: 'items'
+  prevPage: 'Prev page',
+  nextPage: 'Next page',
+  prev5: 'Prev 5 page',
+  next5: 'Next 5 page',
+  prev3: 'Prev 3 page',
+  next3: 'Next 3 page',
+  total: 'Total',
+  items: 'Items'
 };
 exports.default = _default;

package/lib/components/PopConfirm/locale/en_US.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  confirm: 'confirm',
-  cancel: 'cancel'
+  confirm: 'Confirm',
+  cancel: 'Cancel'
 };
 exports.default = _default;

package/lib/components/Select/locale/en_US.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  placeholder: 'please select',
-  selected: 'selected ',
+  placeholder: 'Please select',
+  selected: 'Selected ',
   items: ' items',
-  emptyTip: 'data is empty',
+  emptyTip: 'Data is empty',
   selectAll: 'Select All'
 };
 exports.default = _default;

package/lib/components/Slider/locale/en_US.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  currentValueIs: 'current value is ',
-  inputValueIs: 'input value is ',
+  currentValueIs: 'Current value is ',
+  inputValueIs: 'Input value is ',
   period: '.',
   semicolon: ';',
   colon: ':',
   comma: ', ',
-  input: 'input',
+  input: 'Input',
   isValid: ' is valid',
   isInvalid: ' is invalid',
-  tip: 'please press enter or click other place to accept valid value'
+  tip: 'Please press enter or click other place to accept valid value'
 };
 exports.default = _default;

package/lib/components/Table/locale/en_US.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  emptyTip: 'data is empty',
-  search: 'search',
-  filter: 'filter',
-  searchResult: 'search result',
-  items: 'items',
-  reset: 'reset search and filter',
+  emptyTip: 'Data is empty',
+  search: 'Search',
+  filter: 'Filter',
+  searchResult: 'Search result',
+  items: 'Items',
+  reset: 'Reset search and filter',
   period: '.',
   semicolon: ';',
   colon: ': ',
-  selected: 'selected',
-  cancelSelect: 'cancel select',
-  columnConfigHeader: 'custom columns',
-  columnConfigTip: 'when you clean cache or change browser, the saving record will lost.',
-  columnConfigSelected: 'selected'
+  selected: 'Selected',
+  cancelSelect: 'Cancel select',
+  columnConfigHeader: 'Custom columns',
+  columnConfigTip: 'When you clean cache or change browser, the saving record will lost.',
+  columnConfigSelected: 'Selected'
 };
 exports.default = _default;

package/lib/components/ZForm/controllerDecorator.js

@@ -71,10 +71,40 @@ var controllerDecorator = function controllerDecorator(options) {
               zName = _this$props.zName,
               zOptions = _this$props.zOptions,
               controllerProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+          var rules = (zOptions && zOptions.rules ? zOptions.rules : []).map(function (rule) {
+            (0, _newArrowCheck2.default)(this, _this2);
+
+            if (rule.validator) {
+              var propValidator = rule.validator;
+              return _objectSpread(_objectSpread({}, rule), {}, {
+                validator: function validator(rule, value, callback) {
+                  var _this3 = this;
+
+                  for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+                    args[_key - 3] = arguments[_key];
+                  }
+
+                  propValidator.apply(void 0, [rule, value, function (res) {
+                    (0, _newArrowCheck2.default)(this, _this3);
+
+                    if (res !== null) {
+                      callback(res);
+                    } else {
+                      callback();
+                    }
+                  }.bind(this)].concat(args));
+                }
+              });
+            } else {
+              return rule;
+            }
+          }.bind(this));
           return /*#__PURE__*/_react.default.createElement(_ZForm.ZFormContext.Consumer, null, function (_ref) {
             (0, _newArrowCheck2.default)(this, _this2);
             var form = _ref.form;
-            return form.getFieldDecorator(zName, _objectSpread(_objectSpread({}, options), zOptions))( /*#__PURE__*/_react.default.createElement(Controller, controllerProps));
+            return form.getFieldDecorator(zName, _objectSpread(_objectSpread({}, options), _objectSpread(_objectSpread({}, zOptions), {}, {
+              rules: rules
+            })))( /*#__PURE__*/_react.default.createElement(Controller, controllerProps));
           }.bind(this));
         }
       }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucloud-fe/react-components",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "title": "UCloud react components",
   "description": "UCloud react components",
   "keywords": [