@lemon-fe/components 1.3.0-alpha.0 → 1.3.0

package/es/filter/index.less

@@ -1,4 +1,5 @@
 .@{prefixCls}-filter {
+  /** 兼容代码 */
   &-tab-bar {
     margin-bottom: @space-v;
 
@@ -6,10 +7,51 @@
       padding: 8px 12px;
     }
   }
+  /** 兼容代码 end */
+
+  &-tabbar {
+    display: flex;
+    margin-bottom: @padding-sm;
+
+    &-item {
+      height: 28px;
+      margin-right: @padding-xs;
+      padding: 0 @padding-md;
+      color: #666;
+      line-height: 28px;
+      background-color: #f2f3f5;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover:not(&-active) {
+        background-color: #e8eaec;
+      }
+
+      &-active {
+        color: .primary() [];
+        background-color: .primary(0.1) [];
+      }
+
+      &-dropdown:hover svg,
+      &-dropdown:active svg {
+        background-color: .primary(0.2) [];
+        border-radius: 2px;
+      }
+    }
+
+    &-add {
+      width: 28px;
+      padding: 0;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
 
   &-pending {
     height: 64px;
     overflow: hidden;
+    visibility: hidden;
   }
 
   &-form-item {
@@ -58,26 +100,63 @@
   }
 
   &-popover {
-    .popover(220px);
+    .popover(250px);
 
     .@{ant-prefix}-popover-inner {
-      padding: @space-v 0;
+      padding: 0;
+      padding-top: @padding-md;
+    }
+
+    &-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: @padding-sm @padding-md;
+      border-top: 1px solid #eaeaea;
+
+      button + button {
+        margin-left: @padding-sm;
+      }
     }
   }
 
   &-items-search {
-    width: auto;
-    margin: 0 @space-h 8px;
+    display: block;
+    width: 100%;
+    padding: 0 @padding-md;
   }
 
   &-items {
     max-height: 400px;
+    padding: @padding-sm 0;
     overflow: auto;
   }
 
   &-item {
     .popoverItem();
-
+    display: flex;
     overflow: hidden;
+
+    & > * + * {
+      margin-left: @padding-sm;
+    }
+
+    &-active-top {
+      box-shadow: 0 -1px 0 ~'var(--@{ant-prefix}-primary-color)';
+    }
+
+    &-active-bottom {
+      box-shadow: 0 1px 0 ~'var(--@{ant-prefix}-primary-color)';
+    }
+  }
+
+  &-drag-item {
+    display: inline-flex;
+    height: 36px;
+    padding: 0 @padding-md;
+    line-height: 36px;
+    white-space: nowrap;
+    background-color: #eee;
+    border-radius: 4px;
+    cursor: move;
   }
 }

package/es/filter/locale/en_US.js

@@ -1,6 +1,7 @@
 var locale = {
-  savePlanText: 'Save plan',
-  planNameText: 'Plan name',
+  savePlanModalTitle: 'Filter plan',
+  planModalPatternWarning: 'Please do not enter special characters: $',
+  planNameText: 'Name',
   removePlanText: 'Remove plan',
   planLimitText: 'The total number of query schemes cannot exceed 6',
   lableDateText: 'Date',
@@ -14,6 +15,12 @@ var locale = {
   advanceSearchText: 'Advance search',
   collapseSearchText: 'Collapse search',
   resetText: 'Reset',
+  hideOptionKeepOne: 'Please keep at least one filter option',
+  save: 'Save',
+  delete: 'Delete',
+  rename: 'Rename',
+  cancel: 'Cancel',
+  sameTitleWarning: 'The name already exists. Please re-enter it',
   deleteModal: {
     titleText: 'Info',
     confirmDeleteText: 'Are you sure delete ${title} ?'

package/es/filter/locale/locale.d.ts

@@ -1,5 +1,6 @@
 export interface FilterLocale extends Record<string, any> {
-    savePlanText: string;
+    savePlanModalTitle: string;
+    planModalPatternWarning: string;
     removePlanText: string;
     planNameText: string;
     planLimitText: string;
@@ -14,6 +15,12 @@ export interface FilterLocale extends Record<string, any> {
     advanceSearchText: string;
     collapseSearchText: string;
     resetText: string;
+    hideOptionKeepOne: string;
+    save: string;
+    delete: string;
+    rename: string;
+    cancel: string;
+    sameTitleWarning: string;
     deleteModal: {
         titleText: string;
         confirmDeleteText: string;

package/es/filter/locale/zh_CN.js

@@ -1,6 +1,7 @@
 var locale = {
-  savePlanText: '保存方案',
-  planNameText: '方案名称',
+  savePlanModalTitle: '筛选方案',
+  planModalPatternWarning: '请不要输入特殊字符: $',
+  planNameText: '名称',
   removePlanText: '删除方案',
   planLimitText: '查询方案总数不可超过6个',
   lableDateText: '日期',
@@ -14,6 +15,12 @@ var locale = {
   advanceSearchText: '高级搜索',
   collapseSearchText: '收起搜索',
   resetText: '重置',
+  hideOptionKeepOne: '请至少保留一个筛选项',
+  save: '保存',
+  delete: '删除',
+  rename: '重命名',
+  cancel: '取消',
+  sameTitleWarning: '名称已存在，请重新填写',
   deleteModal: {
     titleText: '提示',
     confirmDeleteText: '确定删除${title}？'

package/es/filter/typings.d.ts

@@ -17,6 +17,10 @@ export interface FilterItemType<T = any> {
    * 控制是否隐藏筛选项
    */
   hidden?: boolean;
+  /**
+   * @description 禁止用户设置隐藏
+   */
+  lockVisible?: boolean;
   extraProps?: Record<string, any>;
   renderFormItem?: (form: FormInstance<T>) => ReactElement;
   initialValue?: any;
@@ -24,6 +28,16 @@ export interface FilterItemType<T = any> {
 
 export type ActionType = 'submit' | 'reset';
 
+export interface FilterView<T = any> {
+  title: string;
+  key?: string;
+  value?: T;
+  fields: {
+    key: string;
+    hidden: boolean;
+  }[];
+}
+
 export interface FilterProps<T> {
   data?: FilterItemType<T>[];
   defaultValue?: T;
@@ -51,7 +65,7 @@ export interface FilterProps<T> {
    */
   autoPlaceholder?: boolean;
   /**
-   * @description 当字段隐藏时，保留字段值并在查询返回
+   * @description 当字段隐藏时，保留字段值并在查询返回，如果不希望选项被隐藏后返回数据还有这个选项值，请设置false
    * @default true
    */
   preserveFields?: boolean;
@@ -69,6 +83,23 @@ export interface FilterProps<T> {
    * @description Form表单的实例，默认会由内部生成，一般情况不需要处理
    */
   form?: FormInstance<T>;
+  /**
+   * @description 启用列配置，当simple为false的时候，默认启用，优先级比simple高
+   */
+  enableFieldsConfig?: boolean;
+  /**
+   * @description 存储
+   */
+  storage?: {
+    data?: FilterView<T>[];
+    /** 不要和data同时传入 */
+    get?: () => null | Promise<FilterView<T>[]> | FilterView<T>[];
+    set?: (payload: {
+      data: FilterView<T>[];
+      target: FilterView<T>;
+      action: 'delete' | 'set';
+    }) => Promise<void> | void | FilterView<T>[] | Promise<FilterView<T>[]>;
+  };
 }
 
 export interface ComponentOption {

package/es/index.d.ts

@@ -13,7 +13,7 @@ export type { EditableTableProps, EditableTableColumnType, EditableCellFocusedTy
 export { default as PageLoading } from './page-loading';
 export { default as Actions } from './actions';
 export { default as Filter } from './filter';
-export type { FilterItemType, FilterProps, ComponentOption } from './filter/typings';
+export type { FilterItemType, FilterProps, ComponentOption, FilterView } from './filter/typings';
 export { default as Section } from './section';
 export { default as Layout } from './layout';
 export { default as DurationPicker } from './duration-picker';

package/es/select-view/index.d.ts

@@ -1,4 +1,6 @@
+import React from 'react';
 import type { CSSProperties, ReactElement } from 'react';
+import { type DataGridRef } from '../data-grid';
 import type { ColType, CustomColumnData, DataGridProps, PaginationType, SortType } from '../data-grid/typings';
 import type { FilterProps } from '../filter/typings';
 import type { SideBarDef } from 'ag-grid-community';
@@ -77,5 +79,14 @@ export interface SelectViewProps<RecordType, ParamsType> extends Pick<DataGridPr
      * @default null
      */
     header?: ReactElement | null;
+    /**
+     * @description 自定义已选择datagrid
+     */
+    customSelectedGridProps?: DataGridProps<RecordType>;
+    /**
+     * @description 自定义主datagrid
+     */
+    customDataGridProps?: DataGridProps<RecordType>;
 }
-export default function SelectView<RecordType extends Record<string | number, any>, ParamsType extends Record<string, any>>(originalProps: SelectViewProps<RecordType, ParamsType>): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<SelectViewProps<Record<string | number, any>, Record<string, any>> & React.RefAttributes<DataGridRef<Record<string | number, any>>>>;
+export default _default;

package/es/select-view/index.js

@@ -16,17 +16,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Form, Spin, Tabs } from 'antd';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { Resizable } from 'react-resizable';
 import { useComponentDefaultProps } from "../component-configure";
 import DataGrid from "../data-grid";
+import { useDataGrid } from "../data-grid/hooks";
 import Filter from "../filter";
 import { useLocaleReceiver } from "../locale-receiver";
 import { parseLocalTemplate } from "../locale/locale";
 import { mergeProp, prefixClassName } from "../utils";
 import classNames from 'classnames';
 import { get } from 'lodash';
-export default function SelectView(originalProps) {
+export default /*#__PURE__*/forwardRef(function SelectView(originalProps, _ref4) {
   var emptyValue = useMemo(function () {
     return [];
   }, []);
@@ -59,7 +60,9 @@ export default function SelectView(originalProps) {
     _props$suppressRowCli = props.suppressRowClickSelection,
     suppressRowClickSelection = _props$suppressRowCli === void 0 ? false : _props$suppressRowCli,
     _props$rowMultiSelect = props.rowMultiSelectWithClick,
-    rowMultiSelectWithClick = _props$rowMultiSelect === void 0 ? true : _props$rowMultiSelect;
+    rowMultiSelectWithClick = _props$rowMultiSelect === void 0 ? true : _props$rowMultiSelect,
+    customSelectedGridProps = props.customSelectedGridProps,
+    customDataGridProps = props.customDataGridProps;
   var prefix = prefixClassName("select-view");
   var _useState = useState(value || emptyValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -69,7 +72,7 @@ export default function SelectView(originalProps) {
     _useState4 = _slicedToArray(_useState3, 2),
     params = _useState4[0],
     setParams = _useState4[1];
-  var list = useRef(null);
+  var list = useDataGrid();
   var _useState5 = useState('list'),
     _useState6 = _slicedToArray(_useState5, 2),
     tabFlag = _useState6[0],
@@ -114,14 +117,14 @@ export default function SelectView(originalProps) {
       });
     }
     setRows(mDataSource);
-    if (list.current !== null) {
+    if (list.ref.current !== null) {
       if (mDataSource !== undefined) {
-        var grid = list.current;
+        var grid = list.ref.current;
         grid.afterReady(function () {
           grid.api.paginationGoToFirstPage();
         });
       } else {
-        list.current.fetch();
+        list.ref.current.fetch();
       }
     }
   }, [cParams, dataSource]);
@@ -229,8 +232,15 @@ export default function SelectView(originalProps) {
       className: prefix('head')
     }, headerNode), /*#__PURE__*/React.createElement("div", {
       className: prefix('body')
-    }, /*#__PURE__*/React.createElement(DataGrid, {
-      ref: list,
+    }, /*#__PURE__*/React.createElement(DataGrid, _extends({
+      ref: function ref(val) {
+        list.ref.current = val;
+        if (typeof _ref4 === 'function') {
+          _ref4(val);
+        } else if (_ref4) {
+          _ref4.current = val;
+        }
+      },
       rowKey: rowKey,
       rowSelection: {
         type: multiple ? 'checkbox' : 'radio',
@@ -257,7 +267,7 @@ export default function SelectView(originalProps) {
       fetch: request,
       pagination: pagination,
       customColumnPanelStorage: customColumnPanelStorage
-    }))));
+    }, customDataGridProps)))));
   };
   var renderSelected = function renderSelected() {
     return /*#__PURE__*/React.createElement("div", {
@@ -266,7 +276,7 @@ export default function SelectView(originalProps) {
       className: prefix('main')
     }, /*#__PURE__*/React.createElement("div", {
       className: prefix('body')
-    }, /*#__PURE__*/React.createElement(DataGrid, {
+    }, /*#__PURE__*/React.createElement(DataGrid, _extends({
       dataSource: data,
       defaultColDef: defaultColDef,
       rowHeight: rowHeight,
@@ -282,13 +292,14 @@ export default function SelectView(originalProps) {
         data: data,
         dataKeys: dataKeys
       }
-    }))));
+    }, customSelectedGridProps)))));
   };
   if (readOnly) {
     content = renderSelected();
   } else if (!multiple) {
     content = renderList();
   } else {
+    var _customSelectedGridPr, _customSelectedGridPr2;
     content = /*#__PURE__*/React.createElement(Tabs, {
       items: [{
         key: 'list',
@@ -297,7 +308,7 @@ export default function SelectView(originalProps) {
       }, {
         key: 'selected',
         label: parseLocalTemplate(SelectViewLocale.selectedDataText, {
-          length: data.length
+          length: (_customSelectedGridPr = customSelectedGridProps === null || customSelectedGridProps === void 0 || (_customSelectedGridPr2 = customSelectedGridProps.dataSource) === null || _customSelectedGridPr2 === void 0 ? void 0 : _customSelectedGridPr2.length) !== null && _customSelectedGridPr !== void 0 ? _customSelectedGridPr : data.length
         }),
         children: renderSelected()
       }],
@@ -316,4 +327,4 @@ export default function SelectView(originalProps) {
     spinning: true,
     className: prefix('spin')
   }) : null);
-}
+});

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lemon-fe/components",
-  "version": "1.3.0-alpha.0",
+  "version": "1.3.0",
   "description": "> TODO: description",
   "homepage": "",
-  "license": "ISC",
-  "author": "鲁盛杰 <lusj@cnlemon.net>",
+  "license": "MIT",
+  "author": "lusj",
   "sideEffects": [
     "es/index.less",
     "es/others.js",
@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@dnd-kit/core": ">=6.0.0",
-    "@lemon-fe/hooks": "^1.2.11",
-    "@lemon-fe/utils": "^1.1.0",
+    "@lemon-fe/hooks": "^1.3.0",
+    "@lemon-fe/utils": "^1.3.0",
     "ag-grid-community": "29.2.0",
     "ag-grid-enterprise": "29.2.0",
     "ag-grid-react": "29.2.0",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "0b1b326f401852b1329b54b531524e60072ddb8b"
+  "gitHead": "793ddaa1c937e067e29b649e5c04b377d3693b4e"
 }