@lemon-fe/components 1.3.8 → 1.4.0-alpha.0

package/es/component-configure/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { ActionsProps } from '../actions';
 import type { DataGridProps } from '../data-grid/typings';
+import type { DurationPickerProps } from '../duration-picker';
 import type { FilterProps } from '../filter/typings';
 import type { SelectViewProps } from '../select-view';
 declare type PropsGetter<T> = ((props: T) => T) | Partial<T>;
@@ -9,6 +10,7 @@ export interface ComponentConfigureContextProps {
     Filter?: PropsGetter<FilterProps<unknown>>;
     Actions?: PropsGetter<ActionsProps>;
     SelectView?: PropsGetter<SelectViewProps<unknown, unknown>>;
+    DurationPicker?: PropsGetter<DurationPickerProps>;
 }
 export declare const ComponentConfigureContext: import("react").Context<ComponentConfigureContextProps>;
 export declare const ComponentConfigureProvider: import("react").Provider<ComponentConfigureContextProps>;

package/es/data-grid/cell-editors/wrapper.js

@@ -4,5 +4,7 @@ import { editorPrefixClass } from "./utils";
 export default function EditorWrapper(props) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: editorPrefixClass()
-  }, props));
+  }, props, {
+    role: "input"
+  }));
 }

package/es/data-grid/index.d.ts

@@ -113,6 +113,7 @@ declare class InternalDataGrid<TData extends Record<string, any>> extends Compon
      * @returns
      */
     focusPreviousCell(): void;
+    private handleRowClicked;
     render(): JSX.Element;
 }
 export declare type DataGridRef<T extends Record<string, any>> = InternalDataGrid<T>;

package/es/data-grid/index.js

@@ -522,6 +522,42 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
         column: typeof column === 'string' ? column : column.getColId()
       };
     });
+    // 自行实现行点击选择
+    _defineProperty(_assertThisInitialized(_this), "handleRowClicked", function (evt) {
+      var _this$props4 = _this.props,
+        rowSelection = _this$props4.rowSelection,
+        onRowClicked = _this$props4.onRowClicked,
+        rowMultiSelectWithClick = _this$props4.rowMultiSelectWithClick,
+        _this$props4$suppress = _this$props4.suppressRowClickSelection,
+        suppressRowClickSelection = _this$props4$suppress === void 0 ? false : _this$props4$suppress,
+        _this$props4$suppress2 = _this$props4.suppressRowDeselection,
+        suppressRowDeselection = _this$props4$suppress2 === void 0 ? false : _this$props4$suppress2;
+      onRowClicked === null || onRowClicked === void 0 || onRowClicked(evt);
+      if (!suppressRowClickSelection && evt.node.selectable && evt.eventPath) {
+        var enableSelectionWithoutKeys = rowMultiSelectWithClick !== null && rowMultiSelectWithClick !== void 0 ? rowMultiSelectWithClick : rowSelection !== undefined && rowSelection.type !== 'radio';
+        for (var i = 0; i < evt.eventPath.length; i++) {
+          var elm = evt.eventPath[i];
+          if (elm.nodeName === 'A' || elm.nodeName === 'BUTTON' || elm.nodeName === 'INPUT' || elm.role === 'button' || elm.role === 'input') {
+            break;
+          }
+          if (elm.role === 'gridcell') {
+            if (elm.classList.contains(prefix('editor-cell'))) {
+              break;
+            }
+            var selected = evt.node.isSelected();
+            if (selected) {
+              var event = evt.event;
+              if (enableSelectionWithoutKeys || !suppressRowDeselection && (event.ctrlKey || event.metaKey)) {
+                evt.node.setSelected(false);
+              }
+            } else {
+              evt.node.setSelected(true, !enableSelectionWithoutKeys, false, 'rowClicked');
+            }
+            break;
+          }
+        }
+      }
+    });
     _this.state = _objectSpread({
       loading: false
     }, _this.getPagination());
@@ -614,9 +650,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPagination",
     value: function getPagination() {
-      var _this$props4 = this.props,
-        pagination = _this$props4.pagination,
-        fetch = _this$props4.fetch;
+      var _this$props5 = this.props,
+        pagination = _this$props5.pagination,
+        fetch = _this$props5.fetch;
       var page = 1;
       var pageSize = 50;
       var total = 0;
@@ -646,11 +682,11 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _prevProps$rowSelecti;
-      var _this$props5 = this.props,
-        columns = _this$props5.columns,
-        rowSelection = _this$props5.rowSelection,
-        dataSource = _this$props5.dataSource,
-        context = _this$props5.context;
+      var _this$props6 = this.props,
+        columns = _this$props6.columns,
+        rowSelection = _this$props6.rowSelection,
+        dataSource = _this$props6.dataSource,
+        context = _this$props6.context;
       if (!shallowEqual(context, prevProps.context)) {
         this.store.setState({
           context: context
@@ -840,9 +876,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
       if (col.type === undefined) {
         return _objectSpread({}, col);
       }
-      var _this$props6 = this.props,
-        mColumnTypes = _this$props6.columnTypes,
-        mDefaultColDef = _this$props6.defaultColDef;
+      var _this$props7 = this.props,
+        mColumnTypes = _this$props7.columnTypes,
+        mDefaultColDef = _this$props7.defaultColDef;
       var colTypes = this.getMemoizedColumnTypes(mColumnTypes);
       var result = {};
       var types;
@@ -865,12 +901,12 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
     value: function getColumnDefs() {
       var _this3 = this,
         _this$props$customCol;
-      var _this$props7 = this.props,
-        _this$props7$columns = _this$props7.columns,
-        columns = _this$props7$columns === void 0 ? [] : _this$props7$columns,
-        rowActions = _this$props7.rowActions,
-        rowSelection = _this$props7.rowSelection,
-        locale = _this$props7.locale;
+      var _this$props8 = this.props,
+        _this$props8$columns = _this$props8.columns,
+        columns = _this$props8$columns === void 0 ? [] : _this$props8$columns,
+        rowActions = _this$props8.rowActions,
+        rowSelection = _this$props8.rowSelection,
+        locale = _this$props8.locale;
       var leafColIds = [];
       var map = function map(cols) {
         return cols.map(function (item) {
@@ -1333,9 +1369,9 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
     value: function getDataFromServer() {
       var _this6 = this;
       var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var _this$props8 = this.props,
-        fetch = _this$props8.fetch,
-        onLoad = _this$props8.onLoad;
+      var _this$props9 = this.props,
+        fetch = _this$props9.fetch,
+        onLoad = _this$props9.onLoad;
       if (typeof fetch === 'function') {
         if (this.requestId < Number.MAX_SAFE_INTEGER) {
           this.requestId += 1;
@@ -1594,28 +1630,28 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this11 = this;
-      var _this$props9 = this.props,
-        rowKey = _this$props9.rowKey,
-        fetch = _this$props9.fetch,
-        dataSource = _this$props9.dataSource,
-        rowActions = _this$props9.rowActions,
-        columns = _this$props9.columns,
-        autoLoad = _this$props9.autoLoad,
-        loadingProp = _this$props9.loading,
-        summary = _this$props9.summary,
-        detailCell = _this$props9.detailCell,
-        pagination = _this$props9.pagination,
-        rowSelection = _this$props9.rowSelection,
-        columnTypesProp = _this$props9.columnTypes,
-        defaultColDefProp = _this$props9.defaultColDef,
-        componentsProp = _this$props9.components,
-        sideBarProp = _this$props9.sideBar,
-        detailCellRendererParams = _this$props9.detailCellRendererParams,
-        context = _this$props9.context,
-        showSearch = _this$props9.showSearch,
-        cellDisplayFlex = _this$props9.cellDisplayFlex,
-        locale = _this$props9.locale,
-        restProps = _objectWithoutProperties(_this$props9, _excluded4);
+      var _this$props10 = this.props,
+        rowKey = _this$props10.rowKey,
+        fetch = _this$props10.fetch,
+        dataSource = _this$props10.dataSource,
+        rowActions = _this$props10.rowActions,
+        columns = _this$props10.columns,
+        autoLoad = _this$props10.autoLoad,
+        loadingProp = _this$props10.loading,
+        summary = _this$props10.summary,
+        detailCell = _this$props10.detailCell,
+        pagination = _this$props10.pagination,
+        rowSelection = _this$props10.rowSelection,
+        columnTypesProp = _this$props10.columnTypes,
+        defaultColDefProp = _this$props10.defaultColDef,
+        componentsProp = _this$props10.components,
+        sideBarProp = _this$props10.sideBar,
+        detailCellRendererParams = _this$props10.detailCellRendererParams,
+        context = _this$props10.context,
+        showSearch = _this$props10.showSearch,
+        cellDisplayFlex = _this$props10.cellDisplayFlex,
+        locale = _this$props10.locale,
+        restProps = _objectWithoutProperties(_this$props10, _excluded4);
       var _this$state3 = this.state,
         enablePagination = _this$state3.pagination,
         page = _this$state3.page,
@@ -1699,7 +1735,6 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
         maintainColumnOrder: true,
         suppressCsvExport: true,
         suppressExcelExport: true,
-        rowMultiSelectWithClick: gridRowSelection === 'multiple',
         noRowsOverlayComponent: this.NoRowsOverlay,
         getMainMenuItems: this.getMainMenuItems,
         rowBuffer: 20,
@@ -1711,6 +1746,8 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
         getRowStyle: this.getRowStyle,
         stopEditingWhenCellsLoseFocus: false,
         onRowDataUpdated: this.rowDataUpdated,
+        suppressRowClickSelection: true,
+        onRowClicked: this.handleRowClicked,
         onCellValueChanged: this.cellValueChanged,
         onCellEditingStopped: this.cellEditingStop,
         onCellFocused: this.cellFocused,

package/es/data-grid/renderer/actions.js

@@ -24,6 +24,7 @@ function ActionItem(props) {
   var children = item.children || [];
   var node = /*#__PURE__*/React.createElement("div", {
     className: classNames(prefix('item'), _defineProperty({}, prefix("item-disabled"), item.disabled)),
+    role: "button",
     onClick: item.disabled ? undefined : item.onClick
   }, item.label, children.length > 0 && /*#__PURE__*/React.createElement(Icons.Down, null));
   if (children.length > 0) {

package/es/data-grid/renderer/cell-delete-renderer.js

@@ -14,6 +14,7 @@ export default function CellDeleteRender(props) {
   }
   return /*#__PURE__*/React.createElement(Icons.Delete, {
     key: "delete",
+    role: "button",
     onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {

package/es/duration-picker/index.d.ts

@@ -15,10 +15,10 @@ declare type Option = {
     value: () => Moment[];
     id?: string;
 };
-interface Props extends Omit<RangePickerProps, 'value' | 'onChange' | 'disabled'> {
+export interface DurationPickerProps extends Omit<RangePickerProps, 'value' | 'onChange' | 'disabled'> {
     prefixCls?: string;
     types: DateType[];
-    options?: Option[];
+    options?: Option[] | 'year';
     dateFormat?: string;
     value?: DurationPickerValue;
     hideType?: boolean;
@@ -26,5 +26,5 @@ interface Props extends Omit<RangePickerProps, 'value' | 'onChange' | 'disabled'
     disabled?: boolean;
     showTime?: boolean;
 }
-declare function DurationPicker(props: Props): JSX.Element;
+declare function DurationPicker(originalProps: DurationPickerProps): JSX.Element;
 export default DurationPicker;

package/es/duration-picker/index.js

@@ -15,6 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useMemo, useState, useEffect } from 'react';
+import { useComponentDefaultProps } from "../component-configure";
 import { PREFIX_CLS } from "../constants";
 import DatePicker from "../date-picker";
 import InputCompact from "../input-compact";
@@ -22,8 +23,9 @@ import { useLocaleReceiver } from "../locale-receiver";
 import Select from "../select";
 import moment from 'moment';
 var emptyValue = [];
-function DurationPicker(props) {
+function DurationPicker(originalProps) {
   var _result$type, _result$option;
+  var props = useComponentDefaultProps('DurationPicker', originalProps);
   var _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? PREFIX_CLS : _props$prefixCls,
     types = props.types,
@@ -47,16 +49,19 @@ function DurationPicker(props) {
     lastWeekText = DurationPickerLocale.lastWeekText,
     thisMonthText = DurationPickerLocale.thisMonthText,
     lastMonthText = DurationPickerLocale.lastMonthText,
-    lastThirtyDaysText = DurationPickerLocale.lastThirtyDaysText;
+    lastThirtyDaysText = DurationPickerLocale.lastThirtyDaysText,
+    lastQuarterText = DurationPickerLocale.lastQuarterText,
+    thisQuarterText = DurationPickerLocale.thisQuarterText,
+    thisYearText = DurationPickerLocale.thisYearText;
   var options = useMemo(function () {
-    if (optionsProp) {
+    if (optionsProp && Array.isArray(optionsProp)) {
       return optionsProp.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
           id: item.id || item.label
         });
       });
     }
-    return [{
+    var result = [{
       label: customDateText,
       id: '自定义时段',
       value: function value() {
@@ -105,6 +110,28 @@ function DurationPicker(props) {
         return [moment().add(-29, 'days').startOf('day'), moment().endOf('day')];
       }
     }];
+    if (optionsProp === 'year') {
+      result.push({
+        label: thisQuarterText,
+        id: '本季',
+        value: function value() {
+          return [moment().startOf('quarter'), moment().endOf('quarter')];
+        }
+      }, {
+        label: lastQuarterText,
+        id: '上季',
+        value: function value() {
+          return [moment().add(-1, 'quarters').startOf('quarter'), moment().add(-1, 'quarters').endOf('quarter')];
+        }
+      }, {
+        label: thisYearText,
+        id: '今年',
+        value: function value() {
+          return [moment().startOf('year'), moment().endOf('year')];
+        }
+      });
+    }
+    return result;
   }, [optionsProp]);
   var defaultDurationPickerValue = useMemo(function () {
     if (valueProp === undefined) {
@@ -220,6 +247,7 @@ function DurationPicker(props) {
         item: item
       };
     }),
+    listHeight: options.length * 32,
     onSelect: function onSelect(_, opt) {
       handleChangeOption(opt.item);
     },

package/es/duration-picker/locale/en_US.js

@@ -6,6 +6,9 @@ var locale = {
   lastWeekText: 'Last Week',
   thisMonthText: 'This Month',
   lastMonthText: 'Last Month',
-  lastThirtyDaysText: 'Last 30 Days'
+  lastThirtyDaysText: 'Last 30 Days',
+  lastQuarterText: 'Last Quarter',
+  thisQuarterText: 'This Quarter',
+  thisYearText: 'This Year'
 };
 export default locale;

package/es/duration-picker/locale/locale.d.ts

@@ -7,4 +7,7 @@ export interface DurationPickerLocale {
     thisMonthText: string;
     lastMonthText: string;
     lastThirtyDaysText: string;
+    thisQuarterText: string;
+    lastQuarterText: string;
+    thisYearText: string;
 }

package/es/duration-picker/locale/zh_CN.js

@@ -6,6 +6,9 @@ var locale = {
   lastWeekText: '上周',
   thisMonthText: '本月',
   lastMonthText: '上月',
-  lastThirtyDaysText: '最近30日'
+  lastThirtyDaysText: '最近30日',
+  lastQuarterText: '上季',
+  thisQuarterText: '本季',
+  thisYearText: '今年'
 };
 export default locale;

package/es/filter/index.js

@@ -81,6 +81,7 @@ var getStorageData = function getData(storageKey) {
   return null;
 };
 var setStorageData = function setData(storageKey, data, action) {
+  console.log(action);
   localStorage.setItem("filter-storage-".concat(storageKey), JSON.stringify(data));
 };
 var DEFAULT_TAB_ALIAS = '$$default';
@@ -290,7 +291,10 @@ function Filter(originalProps) {
             break;
           case 13:
             if (storageKey) {
-              setStorageData(storageKey, searches, action);
+              setStorageData(storageKey, searches, {
+                type: action,
+                target: target
+              });
             }
           case 14:
           case "end":

package/es/icons/add.d.ts

@@ -1,6 +1,3 @@
-import type { CSSProperties } from 'react';
-export default function Add(props: {
-    className?: string;
-    style?: CSSProperties;
-    onClick?: () => void;
-}): JSX.Element;
+import type { ComponentProps } from 'react';
+import Icon from '@ant-design/icons';
+export default function Add(props: ComponentProps<typeof Icon>): JSX.Element;

package/es/popup/index.js

@@ -256,7 +256,8 @@ function Popup(props) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: prefix('wrapper'),
-    onClick: handleOpen
+    onClick: handleOpen,
+    role: "button"
   }, trigger), modalElm);
 }
 export default Popup;

package/es/select-view/index.js

@@ -50,6 +50,8 @@ function SelectView(originalProps, _ref4) {
     readOnly = props.readOnly,
     _props$header = props.header,
     headerProp = _props$header === void 0 ? null : _props$header,
+    customSelectedGridProps = props.customSelectedGridProps,
+    customDataGridProps = props.customDataGridProps,
     defaultColDef = props.defaultColDef,
     rowHeight = props.rowHeight,
     cellDisplayFlex = props.cellDisplayFlex,
@@ -59,10 +61,7 @@ function SelectView(originalProps, _ref4) {
     customColumnPanelStorage = props.customColumnPanelStorage,
     _props$suppressRowCli = props.suppressRowClickSelection,
     suppressRowClickSelection = _props$suppressRowCli === void 0 ? false : _props$suppressRowCli,
-    _props$rowMultiSelect = props.rowMultiSelectWithClick,
-    rowMultiSelectWithClick = _props$rowMultiSelect === void 0 ? true : _props$rowMultiSelect,
-    customSelectedGridProps = props.customSelectedGridProps,
-    customDataGridProps = props.customDataGridProps;
+    rowMultiSelectWithClick = props.rowMultiSelectWithClick;
   var prefix = prefixClassName("select-view");
   var _useState = useState(value || emptyValue),
     _useState2 = _slicedToArray(_useState, 2),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.3.8",
+  "version": "1.4.0-alpha.0",
   "description": "> TODO: description",
   "homepage": "",
   "license": "MIT",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": ">=6.0.0",
-    "@lemon-fe/hooks": "^1.3.0",
+    "@lemon-fe/hooks": "^1.4.0-alpha.0",
     "@lemon-fe/utils": "^1.3.0",
     "ag-grid-community": "29.2.0",
     "ag-grid-enterprise": "29.2.0",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "4309f16775ec972984987ea6ff400e520ec98d21"
+  "gitHead": "4f4e5c8b423373121fdb38f1ab3e18dc340915d0"
 }