@fe-free/core 2.6.1 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fe-free/core
 
+## 2.7.0
+
+### Minor Changes
+
+- feat: record
+
+### Patch Changes
+
+- @fe-free/tool@2.7.0
+
+## 2.6.2
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@2.6.2
+
 ## 2.6.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.6.1"
+    "@fe-free/tool": "2.7.0"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -51,7 +51,7 @@ export const Basic: Story = {
 
     return (
       <CRUDOfPure
-        actions={['delete']}
+        actions={['create', 'delete']}
         tableProps={{
           columns,
           request: fakeRequest,
@@ -201,3 +201,57 @@ export const NoSearch: Story = {
     );
   },
 };
+
+export const SpecialToolbar: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+      {
+        title: 'city',
+        dataIndex: 'city',
+      },
+      {
+        title: 'area',
+        dataIndex: 'area',
+      },
+    ];
+
+    return (
+      <CRUDOfPure
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'id',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+        specialToolbar
+      />
+    );
+  },
+};

package/src/crud_of_pure/index.tsx

@@ -9,7 +9,8 @@ interface CRUDOfPureProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
-  // nothing
+  /** 特殊位置的 toolbar */
+  specialToolbar?: boolean;
 }
 
 function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRUDMethods>) {
@@ -43,6 +44,7 @@ function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRU
         'fec-crud-of-pure-no-search': noSearch,
         // 先这样实现
         'fec-crud-of-pure-no-toolbar': !props.actions.includes('create'),
+        'fec-crud-of-pure-special-toolbar': props.specialToolbar,
       })}
     >
       <CRUD

package/src/crud_of_pure/style.scss

@@ -54,4 +54,15 @@
       padding-block: 0;
     }
   }
+
+  &.fec-crud-of-pure-special-toolbar {
+    .ant-pro-table-list-toolbar {
+      margin-top: -48px;
+      pointer-events: none;
+
+      .ant-pro-table-list-toolbar-right > div {
+        pointer-events: auto;
+      }
+    }
+  }
 }

package/src/form/form.stories.tsx

@@ -7,6 +7,8 @@ import {
   ProFormJavascript,
   ProFormListNumber,
   ProFormListText,
+  ProFormRecord,
+  ProFormRecordArray,
   ProFormSwitchNumber,
   ProFormUpload,
   ProFormUploadDragger,
@@ -234,3 +236,39 @@ export const ProFormImageUploadComponent: Story = {
     </ProFormBase>
   ),
 };
+
+export const ProFormRecordComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormRecord
+        name="record1"
+        label="record1"
+        fieldProps={{
+          defaultItems: [
+            { key: 'username', label: '用户名' },
+            { key: 'password', label: '密码' },
+          ],
+        }}
+      />
+      <ProFormRecord name="record2" label="record2" />
+    </ProFormBase>
+  ),
+};
+
+export const ProFormRecordArrayComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormRecordArray
+        name="recordArray1"
+        label="recordArray1"
+        fieldProps={{
+          defaultItems: [
+            { key: 'username', label: '用户名' },
+            { key: 'password', label: '密码' },
+          ],
+        }}
+      />
+      <ProFormRecordArray name="recordArray2" label="recordArray2" />
+    </ProFormBase>
+  ),
+};

package/src/form/index.tsx

@@ -4,6 +4,7 @@ export { ProFormListModalHelper } from './form_list/form_list_modal_helper';
 export { ProFormEditor } from './pro_form_editor';
 export { ProFormJavascript } from './pro_form_javascript';
 export { ProFormJSON } from './pro_form_json';
+export { ProFormRecord, ProFormRecordArray } from './pro_form_record';
 export {
   ProFormSwitchNumber,
   SwitchNumber,

package/src/form/pro_form_record.tsx

@@ -0,0 +1,26 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
+import type { RecordArrayProps, RecordProps } from '../record';
+import { Record, RecordArray } from '../record';
+
+function ProFormRecord(props: ProFormItemProps<RecordProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <Record {...(fieldProps as RecordProps)} />
+    </ProForm.Item>
+  );
+}
+
+function ProFormRecordArray(props: ProFormItemProps<RecordArrayProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <RecordArray {...(fieldProps as RecordArrayProps)} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormRecord, ProFormRecordArray };

package/src/index.ts

@@ -31,6 +31,8 @@ export {
   ProFormListModalHelper,
   ProFormListNumber,
   ProFormListText,
+  ProFormRecord,
+  ProFormRecordArray,
   ProFormSwitchNumber,
   ProFormUpload,
   ProFormUploadDragger,
@@ -43,6 +45,7 @@ export type { InfiniteListProps } from './infinite_list';
 export { Markdown } from './markdown';
 export { PageLayout, PageLayoutTabs } from './page_layout';
 export type { PageLayoutProps, PageLayoutTabsProps } from './page_layout';
+export type { RecordArrayProps, RecordProps } from './record';
 export { routeTool } from './route';
 export { NumberSlider, PercentageSlider } from './slider';
 export type { NumberSliderProps, PercentageSliderProps } from './slider';

package/src/record/index.tsx

@@ -0,0 +1,158 @@
+import { Button, Divider, Input } from 'antd';
+import classNames from 'classnames';
+import { Fragment, useCallback, useMemo, useState } from 'react';
+
+function Item({
+  value,
+  label,
+  onChange,
+}: {
+  value?: string;
+  label: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-1">
+        <span className="text-red-500">*</span>
+        {label}
+      </div>
+      <Input
+        value={value}
+        placeholder={'请输入'}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+      />
+    </div>
+  );
+}
+
+interface RecordItem {
+  value?: { key?: string; value?: string };
+  onChange: (value: { key?: string; value?: string }) => void;
+  item: { key?: string; label?: string; placeholder?: string };
+}
+
+function RecordItem(props: RecordItem) {
+  const { value, onChange, item } = props;
+
+  // 如果提供了 key
+  if (item.key) {
+    return (
+      <Item
+        value={value?.value}
+        label={item.label || item.key}
+        onChange={(v) => {
+          onChange({ key: item.key, value: v });
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Item
+        value={value?.key}
+        onChange={(v) => {
+          onChange({ key: v, value: value?.value });
+        }}
+        label="Key"
+      />
+      <Item
+        value={value?.value}
+        onChange={(v) => {
+          onChange({ key: value?.key, value: v });
+        }}
+        label="Value"
+      />
+    </div>
+  );
+}
+
+interface RecordArrayProps {
+  value?: { key?: string; value?: string }[];
+  onChange: (value: { key?: string; value?: string }[]) => void;
+  defaultItems?: { key: string; label: string }[];
+  className?: string;
+}
+
+function RecordArray(props: RecordArrayProps) {
+  const { value, onChange, defaultItems, className } = props;
+  const [items, setItems] = useState<{ name?: string; label?: string }[]>(defaultItems || [{}]);
+
+  return (
+    <div className={classNames('c-bg flex flex-col gap-2 rounded p-2', className)}>
+      {(items || [{}])?.map((item, index) => {
+        const v = value?.[index] || {};
+        return (
+          <Fragment key={index}>
+            <RecordItem
+              item={item}
+              value={v}
+              onChange={(v) => {
+                const newValues = [...(value || [])];
+                newValues[index] = v || {};
+                onChange(newValues);
+              }}
+            />
+            {!defaultItems && <Divider className="my-2" />}
+          </Fragment>
+        );
+      })}
+      {!defaultItems && (
+        <div className="flex flex-col items-center">
+          <Button
+            onClick={() => {
+              setItems((v) => [...v, {}]);
+            }}
+          >
+            添加
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface RecordProps extends Omit<RecordArrayProps, 'value' | 'onChange'> {
+  value?: Record<string, any>;
+  onChange: (value?: Record<string, any>) => void;
+}
+
+function Record(props: RecordProps) {
+  const { value, onChange, defaultItems, className } = props;
+
+  const newValue = useMemo(() => {
+    return Object.keys(value || {}).map((key) => ({
+      key,
+      value: value?.[key],
+    }));
+  }, [value]);
+
+  const newOnChange = useCallback(
+    (newV: { key?: string; value?: string }[]) => {
+      const newValues = {};
+      newV.forEach((item) => {
+        if (item.key) {
+          newValues[item.key] = item.value;
+        }
+      });
+
+      onChange(newValues);
+    },
+    [onChange],
+  );
+
+  return (
+    <RecordArray
+      value={newValue}
+      onChange={newOnChange}
+      defaultItems={defaultItems}
+      className={className}
+    />
+  );
+}
+
+export { Record, RecordArray };
+export type { RecordArrayProps, RecordProps };