@fe-free/core 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.1.1
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@2.1.1
+
 ## 2.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -29,6 +29,7 @@
     "axios": "^1.6.5",
     "classnames": "^2.5.1",
     "github-markdown-css": "^5.8.1",
+    "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
     "react-ace": "^11.0.1",
     "react-markdown": "^9.1.0",
@@ -38,7 +39,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.1.0"
+    "@fe-free/tool": "2.1.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/crud.stories.tsx

@@ -183,6 +183,14 @@ export const MoreCustom: Story = {
           },
         }}
         createButton={<Button type="primary">自定义新建文本</Button>}
+        readProps={{
+          operateIsDisabled: (record) => {
+            if (record.id % 3) {
+              return false;
+            }
+            return true;
+          },
+        }}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
           nameIndex: 'name',
@@ -214,6 +222,12 @@ export const MoreCustom: Story = {
             }
             return true;
           },
+          operateIsHidden: (record) => {
+            if (record.id % 4) {
+              return false;
+            }
+            return true;
+          },
         }}
       />
     );

package/src/crud/crud.tsx

@@ -1,5 +1,6 @@
 import type { ActionType } from '@ant-design/pro-components';
 import { Button, message } from 'antd';
+import classNames from 'classnames';
 import { isString } from 'lodash-es';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
@@ -112,67 +113,97 @@ function CRUDComponent<
         const btns: React.ReactNode[] = [];
 
         if (actions.includes('read')) {
-          btns.push(
-            <CRUDDetail
-              key="read"
-              id={record[idField]}
-              record={record}
-              onSuccess={handleReload}
-              trigger={<a>{readProps?.operateText || '查看'}</a>}
-              action="read"
-              {...detailProps}
-            />,
-          );
+          const hidden = readProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = readProps?.operateIsDisabled?.(record) || false;
+            if (disabled) {
+              btns.push(
+                <span key="read" className="text-desc cursor-not-allowed">
+                  {readProps?.operateText || '查看'}
+                </span>,
+              );
+            } else {
+              btns.push(
+                <CRUDDetail
+                  key="read"
+                  id={record[idField]}
+                  record={record}
+                  onSuccess={handleReload}
+                  trigger={<a>{readProps?.operateText || '查看'}</a>}
+                  action="read"
+                  {...detailProps}
+                />,
+              );
+            }
+          }
         }
 
         if (actions.includes('read_detail')) {
-          btns.push(
-            <Link
-              key="read_detail"
-              to={`./detail/${record[detailIdIndex || 'id']}`}
-              target={readProps?.target}
-            >
-              {readProps?.operateText || '查看'}
-            </Link>,
-          );
+          const hidden = readProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = readProps?.operateIsDisabled?.(record) || false;
+            if (disabled) {
+              btns.push(
+                <span key="read" className="text-desc cursor-not-allowed">
+                  {readProps?.operateText || '查看'}
+                </span>,
+              );
+            } else {
+              btns.push(
+                <Link
+                  key="read_detail"
+                  to={`./detail/${record[detailIdIndex || 'id']}`}
+                  target={readProps?.target}
+                >
+                  {readProps?.operateText || '查看'}
+                </Link>,
+              );
+            }
+          }
         }
 
         if (actions.includes('update')) {
-          const disabled = updateProps?.operateIsDisabled?.(record) || false;
+          const hidden = updateProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = updateProps?.operateIsDisabled?.(record) || false;
 
-          if (disabled) {
-            btns.push(
-              <span key="update" className="text-desc cursor-not-allowed">
-                {updateProps?.operateText || '编辑'}
-              </span>,
-            );
-          } else {
-            btns.push(
-              <CRUDDetail
-                key="update"
-                id={record[idField]}
-                record={record}
-                onSuccess={handleReload}
-                trigger={<a>{updateProps?.operateText || '编辑'}</a>}
-                action="update"
-                {...detailProps}
-              />,
-            );
+            if (disabled) {
+              btns.push(
+                <span key="update" className="text-desc cursor-not-allowed">
+                  {updateProps?.operateText || '编辑'}
+                </span>,
+              );
+            } else {
+              btns.push(
+                <CRUDDetail
+                  key="update"
+                  id={record[idField]}
+                  record={record}
+                  onSuccess={handleReload}
+                  trigger={<a>{updateProps?.operateText || '编辑'}</a>}
+                  action="update"
+                  {...detailProps}
+                />,
+              );
+            }
           }
         }
 
         if (actions.includes('delete') && deleteProps) {
-          const disabled = deleteProps?.operateIsDisabled?.(record) || false;
-          btns.push(
-            <OperateDelete
-              key="delete"
-              name={record[deleteProps.nameIndex]}
-              desc={deleteProps.desc}
-              operateText={deleteProps.operateText}
-              disabled={disabled}
-              onDelete={getHandleDelete(record)}
-            />,
-          );
+          const hidden = deleteProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = deleteProps?.operateIsDisabled?.(record) || false;
+            btns.push(
+              <OperateDelete
+                key="delete"
+                name={record[deleteProps.nameIndex]}
+                desc={deleteProps.desc}
+                operateText={deleteProps.operateText}
+                disabled={disabled}
+                onDelete={getHandleDelete(record)}
+              />,
+            );
+          }
         }
 
         return (
@@ -206,9 +237,8 @@ function CRUDComponent<
     operateColumnProps,
     actions,
     deleteProps,
+    readProps,
     handleReload,
-    readProps?.operateText,
-    readProps?.target,
     detailProps,
     detailIdIndex,
     updateProps,
@@ -259,7 +289,7 @@ function CRUDComponent<
   });
 
   return (
-    <div className="fec-crud">
+    <div className={classNames('fec-crud')}>
       <Table<DataSource>
         rowKey="id"
         {...tableProps}

package/src/crud/crud_of_simple.stories.tsx

@@ -17,10 +17,45 @@ export const Normal: Story = {
   render: () => {
     const columns = [
       {
-        title: 'id',
-        dataIndex: 'id',
+        title: '名字(省略)',
+        dataIndex: 'name',
         search: true,
+        ellipsis: true,
       },
+    ];
+
+    return (
+      <CRUDOfSimple
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};
+
+export const WithSearch: Story = {
+  render: () => {
+    const columns = [
       {
         title: '名字(省略)',
         dataIndex: 'name',
@@ -53,19 +88,59 @@ export const Normal: Story = {
           </>
         )}
         requestCreateByValues={fakeCreate}
+        simpleSearchProps={{
+          name: 'name',
+          widthFull: true,
+        }}
       />
     );
   },
 };
 
-export const WithSearch: Story = {
+export const HoverShow: Story = {
   render: () => {
     const columns = [
       {
-        title: 'id',
-        dataIndex: 'id',
+        title: '名字(省略)',
+        dataIndex: 'name',
         search: true,
+        ellipsis: true,
       },
+    ];
+
+    return (
+      <CRUDOfSimple
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+        simpleOperateHoverShow
+      />
+    );
+  },
+};
+
+export const JustSearch: Story = {
+  render: () => {
+    const columns = [
       {
         title: '名字(省略)',
         dataIndex: 'name',
@@ -76,7 +151,7 @@ export const WithSearch: Story = {
 
     return (
       <CRUDOfSimple
-        actions={['create', 'delete']}
+        actions={['delete']}
         tableProps={{
           columns,
           request: fakeRequest,
@@ -99,7 +174,8 @@ export const WithSearch: Story = {
         )}
         requestCreateByValues={fakeCreate}
         simpleSearchProps={{
-          name: 'id',
+          name: 'name',
+          widthFull: true,
         }}
       />
     );

package/src/crud/crud_of_simple.tsx

@@ -1,5 +1,6 @@
 import { useDebounce } from 'ahooks';
 import { Input } from 'antd';
+import classNames from 'classnames';
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { CRUD } from './crud';
 import type { CRUDMethods, CRUDProps } from './types';
@@ -8,12 +9,15 @@ interface CRUDOfSimpleProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
+  simpleOperateHoverShow?: boolean;
   // 传才开启搜索
   simpleSearchProps?: {
     /** 搜索项的名称，默认 keywords */
     name: string;
     /** 搜索项的 placeholder，默认 请输入 */
     placeholder?: string;
+    /** 占满宽度 */
+    widthFull?: boolean;
   };
 }
 
@@ -39,12 +43,13 @@ function SearchRender(props: {
       allowClear
       value={props.value}
       onChange={(e) => props.onChange(e.target.value)}
+      className="w-full"
     />
   );
 }
 
 function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef<CRUDMethods>) {
-  const { simpleSearchProps, tableProps, ...rest } = props;
+  const { simpleSearchProps, tableProps, simpleOperateHoverShow, ...rest } = props;
 
   useTips(props);
   const [searchValue, setSearchValue] = useState<string>('');
@@ -61,15 +66,16 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
   const toolBarRender = useCallback(
     (...args) => {
       return [
-        <div key="search">
-          {simpleSearchProps && (
-            <SearchRender
-              placeholder={simpleSearchProps.placeholder}
-              value={searchValue}
-              onChange={(value) => setSearchValue(value)}
-            />
-          )}
-        </div>,
+        simpleSearchProps && (
+          <SearchRender
+            key="search-input"
+            placeholder={simpleSearchProps.placeholder}
+            value={searchValue}
+            onChange={(value) => setSearchValue(value)}
+          />
+        ),
+        // 留更多间隔，避免直接贴右边。
+        simpleSearchProps && <div key="search-gap" />,
         // @ts-ignore
         ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
       ];
@@ -89,7 +95,12 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
   }, [debouncedSearchValue, simpleSearchProps, tableProps.params]);
 
   return (
-    <div className="fec-crud-of-simple">
+    <div
+      className={classNames('fec-crud-of-simple', {
+        'fec-crud-of-simple-hover-show': simpleOperateHoverShow,
+        'fec-crud-of-simple-search-width-full': simpleSearchProps?.widthFull,
+      })}
+    >
       <CRUD
         ref={ref}
         {...rest}
@@ -104,6 +115,11 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
           // 简单的隐藏搜索栏
           search: false,
         }}
+        operateColumnProps={{
+          // hoverShow 情况下，默认 width 1
+          width: simpleOperateHoverShow ? 1 : undefined,
+          ...props.operateColumnProps,
+        }}
       />
     </div>
   );

package/src/crud/style.scss

@@ -13,4 +13,33 @@
   .ant-pro-table-list-toolbar {
     border-bottom: 1px solid #f0f0f0;
   }
+
+  &.fec-crud-of-simple-hover-show {
+    .ant-table-cell-fix-right {
+      position: absolute !important;
+      display: none;
+    }
+
+    .ant-table-row {
+      &:hover {
+        .ant-table-cell-fix-right {
+          display: block;
+        }
+      }
+    }
+  }
+
+  &.fec-crud-of-simple-search-width-full {
+    .ant-pro-table-list-toolbar-container {
+      justify-content: unset;
+
+      .ant-pro-table-list-toolbar-right {
+        justify-content: unset;
+
+        & > div {
+          flex: 1;
+        }
+      }
+    }
+  }
 }

package/src/crud/types.tsx

@@ -62,6 +62,10 @@ interface CRUDProps<DataSource = any, Key = string> {
   readProps?: {
     /** 文本 */
     operateText?: string;
+    /** ”查看”是否禁用 */
+    operateIsDisabled?: (record: DataSource) => boolean;
+    /** ”查看”是否隐藏 */
+    operateIsHidden?: (record: DataSource) => boolean;
     /** 打开方式, action 为 read_detail 有效 */
     target?: '_blank';
     /** 保存按钮文本 */
@@ -81,6 +85,8 @@ interface CRUDProps<DataSource = any, Key = string> {
     operateText?: string;
     /** ”编辑”是否禁用 */
     operateIsDisabled?: (record: DataSource) => boolean;
+    /** ”编辑”是否隐藏 */
+    operateIsHidden?: (record: DataSource) => boolean;
     /** 保存按钮文本 */
     submitText?: string;
     /** 重置按钮文本 */
@@ -99,6 +105,8 @@ interface CRUDProps<DataSource = any, Key = string> {
     operateText?: string;
     /** “删除”是否禁用 */
     operateIsDisabled?: (record: DataSource) => boolean;
+    /** ”删除”是否隐藏 */
+    operateIsHidden?: (record: DataSource) => boolean;
     /** 显示名称索引 */
     nameIndex: keyof DataSource;
     /** 删除确认描述 */

package/src/index.ts

@@ -29,4 +29,5 @@ export {
 export { Markdown } from './markdown';
 export { Table } from './table';
 export type { TableProps } from './table';
+export { useLocalforageState } from './use_localforage_state';
 export { CustomValueTypeEnum, customValueTypeMap } from './value_type_map';

package/src/use_localforage_state.tsx

@@ -0,0 +1,30 @@
+import localforage from 'localforage';
+import { useEffect, useState } from 'react';
+
+const useLocalforageState = <T = any,>(
+  key: string,
+  options: {
+    defaultValue?: T;
+  },
+): [T | undefined, (value: T) => void, boolean] => {
+  const [ready, setReady] = useState(false);
+  const [value, setValue] = useState<T | undefined>(options.defaultValue);
+
+  useEffect(() => {
+    localforage.getItem(key).then((v) => {
+      if (v !== undefined) {
+        setValue(v as T);
+      }
+      setReady(true);
+    });
+  }, [key]);
+
+  const setValueAndSave = (v: T) => {
+    setValue(v);
+    localforage.setItem(key, v);
+  };
+
+  return [value, setValueAndSave, ready];
+};
+
+export { useLocalforageState };