@fe-free/core 1.0.1

package/src/crud/demo/data.tsx

@@ -0,0 +1,148 @@
+import { range } from 'lodash-es';
+
+const citys = {
+  广州: ['白云', '黄埔', '增城'],
+  深圳: ['福田', '南山', '宝安'],
+};
+
+const levels = {
+  HIGH: { text: '高' },
+  MEDIUM: { text: '中' },
+  LOW: { text: '低' },
+};
+
+const schools = [
+  { value: '0', label: '第一小学' },
+  { value: '1', label: '第二小学' },
+  { value: '2', label: '第三小学' },
+];
+
+function random(length) {
+  return Math.floor(Math.random() * length);
+}
+
+function randomCity() {
+  return Object.keys(citys)[random(Object.keys(citys).length + 1)];
+}
+function randomArea(params: { city?: string }) {
+  if (!params.city) {
+    return undefined;
+  }
+
+  return params.city && citys[params.city][random(citys[params.city].length + 1)];
+}
+
+function randomLevel() {
+  return Object.keys(levels)[random(Object.keys(levels).length + 1)];
+}
+
+function makeData(count) {
+  return range(count).map((id) => {
+    const city = randomCity();
+    const area = randomArea({ city });
+
+    return {
+      id: `${id}`,
+      name: `这是名字这是名字这是名字 ${id}`,
+      city,
+      area,
+      level: randomLevel(),
+      status: random(2) === 1,
+      school: '' + random(schools.length),
+    };
+  });
+}
+
+let fakeData = makeData(21);
+
+async function fakeRequest(params) {
+  console.log('fakeRequest', params);
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        data: fakeData,
+        success: true,
+        total: fakeData.length,
+      });
+    }, 1000);
+  }) as Promise<any>;
+}
+
+async function fakeDeleteByRecord(record) {
+  console.log('fakeDeleteByRecord', record);
+
+  fakeData = fakeData.filter((item) => item.id !== record.id);
+
+  return Promise.resolve({});
+}
+
+async function fakeGetByRecord(record) {
+  console.log('fakeGetByRecord', record);
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        data: {
+          data: fakeData.find((item) => item.id === record.id),
+        },
+      });
+    }, 1000);
+  });
+}
+
+async function fakeCreate(params) {
+  console.log('fakeCreate', params);
+
+  fakeData.push({
+    id: fakeData.length + 1,
+    ...params,
+  });
+
+  return Promise.resolve({});
+}
+
+async function fakeUpdateById(params) {
+  console.log('fakeUpdateById', params);
+
+  fakeData = fakeData.map((item) => {
+    if (item.id === params.id) {
+      return {
+        ...item,
+        ...params,
+      };
+    }
+    return item;
+  });
+
+  return Promise.resolve({});
+}
+
+function fakeRequestCity(): Promise<string[]> {
+  return Promise.resolve(Object.keys(citys));
+}
+
+function fakeRequestArea(params?: { city?: string }): Promise<string[]> {
+  if (!params?.city) {
+    return Promise.resolve(Object.values(citys).reduce((prev, cur) => prev.concat(cur), []));
+  }
+
+  return Promise.resolve(citys[params.city]);
+}
+
+function fakeRequestSchool() {
+  return Promise.resolve(schools);
+}
+
+export {
+  fakeData,
+  levels,
+  fakeRequest,
+  fakeDeleteByRecord,
+  fakeGetByRecord,
+  fakeCreate,
+  fakeUpdateById,
+  fakeRequestCity,
+  fakeRequestArea,
+  fakeRequestSchool,
+};

package/src/crud/demo/index.tsx

@@ -0,0 +1,342 @@
+import React, { useRef } from 'react';
+import type { CRUDProps } from '@fe-free/core';
+import { CRUD, proFormSelectSearchProps } from '@fe-free/core';
+import { Button } from 'antd';
+import { ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
+import {
+  fakeRequest,
+  fakeDeleteByRecord,
+  fakeCreate,
+  fakeGetByRecord,
+  fakeUpdateById,
+  fakeRequestCity,
+  fakeRequestArea,
+  levels,
+  fakeRequestSchool,
+} from './data';
+
+const Normal = () => {
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字(省略)',
+      dataIndex: 'name',
+      search: true,
+      ellipsis: true,
+    },
+    {
+      title: 'city',
+      dataIndex: 'city',
+    },
+    {
+      title: 'area',
+      dataIndex: 'area',
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={['create', 'read', 'delete', 'update']}
+      tableProps={{
+        columns,
+        request: fakeRequest,
+      }}
+      deleteByRecord={fakeDeleteByRecord}
+      deleteProps={{
+        nameIndex: 'name',
+      }}
+      detailForm={(formProps) => (
+        <>
+          <ProFormText
+            {...formProps}
+            name="name"
+            label="名字"
+            required
+            rules={[{ required: true }]}
+            extra="extra extra extra extra"
+          />
+        </>
+      )}
+      requestGetByRecord={fakeGetByRecord}
+      requestCreate={fakeCreate}
+      requestUpdateById={fakeUpdateById}
+    />
+  );
+};
+
+function ReadDetail() {
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={['read_detail']}
+      tableProps={{
+        columns,
+        request: fakeRequest,
+      }}
+    />
+  );
+}
+
+function Ref() {
+  const formRef = useRef<any>();
+  const [detailFormInstance] = ProForm.useForm();
+
+  // @ts-ignore
+  window._detailFormInstance = detailFormInstance;
+
+  const name = ProForm.useWatch('name', formRef.current);
+  const detailName = ProForm.useWatch('name', detailFormInstance);
+
+  // 不知道为啥这里 name 不生效，但是项目里是生效的。先忽略
+  console.log('useWatch', name, detailName);
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={['create', 'read', 'update']}
+      tableProps={{
+        formRef,
+        columns,
+        request: fakeRequest,
+      }}
+      detailFormInstance={detailFormInstance}
+      detailForm={(formProps) => (
+        <>
+          <ProFormText
+            {...formProps}
+            name="name"
+            label="名字"
+            required
+            rules={[{ required: true }]}
+            initialValue={'default'}
+          />
+          <ProFormSwitch {...formProps} name="status" label="开启" initialValue={false} />
+        </>
+      )}
+      requestGetByRecord={fakeGetByRecord}
+      requestCreate={fakeCreate}
+      requestUpdateById={fakeUpdateById}
+    />
+  );
+}
+
+function ActionRef() {
+  const ref = useRef<any>();
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => ref.current.getActionRef().current?.reload()}>reload</Button>
+      <CRUD
+        ref={ref}
+        actions={[]}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+      />
+    </>
+  );
+}
+
+function RemoteData() {
+  const columns: CRUDProps['tableProps']['columns'] = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+    {
+      title: '等级(本地数据)',
+      dataIndex: 'level',
+      search: true,
+      valueEnum: levels,
+      ...proFormSelectSearchProps,
+    },
+    {
+      title: 'city(远端数据)',
+      dataIndex: 'city',
+      search: true,
+      request: async () => {
+        console.log('request');
+        const res = await fakeRequestCity();
+
+        return (
+          res.map((item) => ({
+            label: item,
+            value: item,
+          })) || []
+        );
+      },
+      ...proFormSelectSearchProps,
+    },
+    {
+      title: 'area(联动 city)',
+      dataIndex: 'area',
+      search: true,
+      request: async (params) => {
+        console.log('params', params);
+        const res = await fakeRequestArea(params);
+
+        return (
+          res.map((item) => ({
+            label: item,
+            value: item,
+          })) || []
+        );
+      },
+      dependencies: ['city'],
+      ...proFormSelectSearchProps,
+    },
+    {
+      title: '学校(远端数据 label value)',
+      dataIndex: 'school',
+      search: true,
+      valueType: 'select',
+      request: () => fakeRequestSchool(),
+      ...proFormSelectSearchProps,
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={[]}
+      tableProps={{
+        columns,
+        request: fakeRequest,
+      }}
+    />
+  );
+}
+
+function NoSearch() {
+  const ref = useRef<any>();
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+    },
+  ];
+
+  return (
+    <CRUD
+      ref={ref}
+      actions={[]}
+      tableProps={{
+        columns,
+        request: fakeRequest,
+      }}
+    />
+  );
+}
+
+const CustomText = () => {
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+      ellipsis: true,
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={['create', 'read', 'delete', 'update']}
+      tableProps={{
+        columns,
+        request: fakeRequest,
+      }}
+      operateColumnProps={{
+        width: 230,
+        moreOperator: () => <div>custom</div>,
+      }}
+      readProps={{
+        operateText: '查看啦',
+      }}
+      deleteByRecord={fakeDeleteByRecord}
+      deleteProps={{
+        nameIndex: 'name',
+        operateText: '删除啦',
+      }}
+      detailForm={(formProps) => (
+        <>
+          <ProFormText
+            {...formProps}
+            name="name"
+            label="名字"
+            required
+            rules={[{ required: true }]}
+          />
+        </>
+      )}
+      requestGetByRecord={fakeGetByRecord}
+      requestCreate={fakeCreate}
+      createProps={{
+        successText: '新建成功啦',
+      }}
+      updateProps={{
+        operateText: '更新啦',
+        successText: '更新成功啦',
+      }}
+      requestUpdateById={fakeUpdateById}
+    />
+  );
+};
+
+export { Normal, ReadDetail, Ref, ActionRef, RemoteData, NoSearch, CustomText };

package/src/crud/index.md

@@ -0,0 +1,163 @@
+---
+nav:
+  title: '组件'
+  order: 10
+group: 'core'
+toc: content
+---
+
+# CRUD
+
+> 需要了解 ant pro-components ProForm ProTable
+
+基于 ant pro-components 通用的 CRUD 组件，同时保留扩展性。
+
+## 代码演示
+
+### 常规
+
+```tsx
+import { Normal } from './demo';
+
+export default Normal;
+```
+
+### 详情页查看
+
+调整 actions 为 `['read_detail']`，点击<查看>跳转到 `xxx/detail/[id]`，
+
+```tsx
+import { ReadDetail } from './demo';
+
+export default ReadDetail;
+```
+
+### 数据 本地&远程&依赖
+
+```tsx
+import { RemoteData } from './demo';
+
+export default RemoteData;
+```
+
+### 表格表单和详情表单 ref
+
+获取 ProTable 的 actionRef
+
+```tsx
+import { Ref } from './demo';
+
+export default Ref;
+```
+
+### ref.current.getActionRef
+
+通过 ref 你可以做更多操作
+
+```tsx
+import { ActionRef } from './demo';
+
+export default ActionRef;
+```
+
+### 没有搜索
+
+```tsx
+import { NoSearch } from './demo';
+
+export default NoSearch;
+```
+
+### 自定义文案
+
+```tsx
+import { CustomText } from './demo';
+
+export default CustomText;
+```
+
+## API
+
+```tsx | pure
+import type { ReactNode } from 'react';
+import type { TableProps } from '../table';
+import type { ProFormInstance, ActionType } from '@ant-design/pro-components';
+
+/**
+ * create 创建
+ * read 查看
+ * read_detail 详情页查看
+ * update 编辑
+ * delete 删除
+ */
+type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+
+interface CRUDProps {
+  actions: CrudAction[];
+
+  /** 表格相关 */
+  tableProps: TableProps;
+
+  /** 新建按钮，默认新建 */
+  createButton?: ReactNode;
+
+  operateColumnProps?: {
+    width?: number;
+    /** 扩展操作区域 */
+    moreOperator?: (record) => ReactNode;
+  };
+
+  readProps?: {
+    /** 文本 */
+    operateText?: string;
+  };
+
+  /** 删除接口 */
+  deleteById?: ({ id, ids }) => Promise<any>;
+  deleteByRecord?: (record) => Promise<any>;
+  /** 删除相关 */
+  deleteProps?: {
+    /** 显示名称索引 */
+    nameIndex: string;
+    /** 删除确认描述 */
+    desc?: string;
+    /** 文本 */
+    operateText?: string;
+  };
+
+  /** 弹窗表单 */
+  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
+  /** detailForm 的 formRef */
+  detailFormInstance?: ProFormInstance;
+
+  /** 新增接口 */
+  requestAdd?: (values) => Promise<any>;
+
+  addProps?: {
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 更新接口 */
+  requestUpdateById?: (values) => Promise<any>;
+  updateProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 获取详情接口 */
+  requestGetById?: ({ id }) => Promise<any>;
+
+  /** 获取详情接口，非 id 的时候 */
+  requestGetByRecord?: (record) => Promise<any>;
+
+  /** 跳转到详情的 id 所以，默认 id */
+  detailIdIndex?: string;
+}
+
+interface CRUDMethods {
+  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
+}
+```

package/src/crud/index.tsx

@@ -0,0 +1,2 @@
+export { CRUD } from './crud';
+export type { CRUDProps, CRUDMethods } from './crud';

package/src/crud/style.scss

@@ -0,0 +1,10 @@
+.crud-detail {
+  // 查看情况下隐藏 FormItem 的 extra
+  &.crud-detail-hide-extra {
+    .ant-form-item {
+      .ant-form-item-extra {
+        display: none;
+      }
+    }
+  }
+}

package/src/editor_javascript/index.md

@@ -0,0 +1,64 @@
+---
+group: 'core'
+toc: content
+---
+
+# EditorJavascript
+
+## 代码演示
+
+### 常规
+
+```tsx
+import { useState } from 'react';
+import { EditorJavascript } from '@fe-free/core';
+
+function Demo() {
+  const [value, setValue] = useState(
+    `const name = 'world';
+console.log('hello', name);
+`
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorJavascript value={value} onChange={setValue} />
+    </div>
+  );
+}
+
+export default Demo;
+```
+
+### readonly
+
+```tsx
+import { useState } from 'react';
+import { EditorJavascript } from '@fe-free/core';
+
+function Demo() {
+  const [value, setValue] = useState(
+    `const name = 'world';
+console.log('hello', name);
+`
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorJavascript value={value} onChange={setValue} readonly />
+    </div>
+  );
+}
+
+export default Demo;
+```
+
+## API
+
+```tsx | pure
+interface EditorJavascriptProps {
+  value: string;
+  onChange: (value: string, event?: any) => void;
+  readonly?: boolean;
+}
+```