@rainte/ant 0.0.1

package/src/components/Editor/index.tsx

@@ -0,0 +1,20 @@
+import 'braft-editor/dist/index.css'
+import 'braft-extensions/dist/table.css'
+import BraftEditor, { BraftEditorProps } from 'braft-editor'
+import Table from 'braft-extensions/dist/table'
+import Props from './props'
+
+export type EditorProps = BraftEditorProps
+
+class Editor extends BraftEditor {
+  static defaultProps: any
+}
+
+Editor.use(Table({ withDropdown: true, columnResizable: true }))
+
+export default Editor
+
+Editor.defaultProps = {
+  ...(BraftEditor as any).defaultProps,
+  ...Props,
+}

package/src/components/Editor/props.ts

@@ -0,0 +1,50 @@
+export default {
+  controls: [
+    'undo',
+    'redo',
+    'separator',
+    'headings',
+    'separator',
+    'font-family',
+    'font-size',
+    'line-height',
+    'letter-spacing',
+    'separator',
+    'text-indent',
+    'text-align',
+    'separator',
+    'text-color',
+    'bold',
+    'italic',
+    'underline',
+    'strike-through',
+    'separator',
+    'superscript',
+    'subscript',
+    'remove-styles',
+    'emoji',
+    'hr',
+    'separator',
+    'list-ul',
+    'list-ol',
+    'blockquote',
+    'code',
+    'separator',
+    'link',
+    'separator',
+    'media',
+    'table',
+    'clear',
+    'fullscreen',
+    'separator',
+  ],
+  controlBarStyle: {
+    border: '1px solid #d9d9d9',
+    borderBottom: '0',
+  },
+  contentStyle: {
+    height: 300,
+    border: '1px solid #d9d9d9',
+    borderTop: '0',
+  },
+}

package/src/components/Form/index.md

@@ -0,0 +1,132 @@
+## Form
+
+```tsx
+import React, { useState } from 'react'
+import { Editor, Form } from '@rainte/ant'
+import { files } from '../ValueType/components/Upload'
+
+export default () => {
+  const [readonly, setReadonly] = useState<boolean>(false)
+
+  const cascader = [
+    {
+      value: 'zhejiang',
+      label: '浙江',
+      children: [
+        {
+          value: 'hangzhou',
+          label: '杭州',
+          children: [
+            {
+              value: 'xihu',
+              label: '西湖',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'jiangsu',
+      label: '江苏',
+      children: [
+        {
+          value: 'nanjing',
+          label: '南京',
+          children: [
+            {
+              value: 'zhonghuamen',
+              label: '中华门',
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  const treeSelect = [
+    {
+      title: 'Node1',
+      value: '0-0',
+      children: [
+        {
+          title: 'Child Node1',
+          value: '0-0-1',
+        },
+        {
+          title: 'Child Node2',
+          value: '0-0-2',
+        },
+      ],
+    },
+    {
+      title: 'Node2',
+      value: '0-1',
+    },
+  ]
+
+  const props = {
+    request: () => {
+      return {
+        readonly: false,
+        cascader: null,
+        treeSelect: null,
+        upload: null,
+        editor: null,
+      }
+    },
+    columns: [
+      {
+        title: '只读',
+        dataIndex: 'readonly',
+        valueType: 'radio',
+        valueEnum: new Map([
+          [false, { text: '编辑', status: 'Success' }],
+          [true, { text: '只读', status: 'Error' }],
+        ]),
+        fieldProps: { onChange: (e: any) => setReadonly(e.target.value) },
+      },
+      {
+        readonly,
+        title: '级联选择',
+        dataIndex: 'cascader',
+        valueType: 'cascader',
+        request: async (params: any) => cascader,
+      },
+      {
+        readonly,
+        title: '树选择',
+        dataIndex: 'treeSelect',
+        valueType: 'treeSelect',
+        request: async (params: any) => treeSelect,
+      },
+      {
+        readonly,
+        title: '上传',
+        dataIndex: 'upload',
+        valueType: 'upload',
+        formItemProps: { getValueFromEvent: files },
+        fieldProps: {
+          customRequest: ({ file, onSuccess }: any) => {
+            console.log('upload.customRequest', file)
+            file.url = URL.createObjectURL(file)
+            file.status = 'done'
+            onSuccess?.(file.url, file)
+          },
+        },
+      },
+      {
+        readonly,
+        title: '编辑器',
+        dataIndex: 'editor',
+        valueType: 'editor',
+        formItemProps: { wrapperCol: { span: 16 } },
+      },
+    ],
+    onFinish: (values: any) => {
+      console.log('onFinish', values)
+    },
+  }
+
+  return <Form {...props} />
+}
+```

package/src/components/Form/index.tsx

@@ -0,0 +1,48 @@
+import React, { Context, useContext } from 'react'
+import { Form as AntForm, Space } from 'antd'
+import ProForm, { BetaSchemaForm } from '@ant-design/pro-form'
+import AntContext from '@ant-design/pro-provider'
+import { FormSchema } from '@ant-design/pro-form/es/components/SchemaForm'
+import ValueTypeMap, { ValueTypeEnum } from '../ValueType'
+
+export type FormProps<
+  T = Record<string, any>,
+  ValueType = ValueTypeEnum,
+> = FormSchema<T, ValueType> & { context: Context<any> }
+
+const Form: React.FC<FormProps<any, any>> = props => {
+  const { context, ...attrs } = props
+  const values = useContext(context)
+  const valueTypeMap = ValueTypeMap
+
+  return (
+    <context.Provider value={{ ...values, valueTypeMap }}>
+      <BetaSchemaForm {...attrs} />
+    </context.Provider>
+  )
+}
+
+export default Form
+
+Form.defaultProps = {
+  context: AntContext,
+  layout: 'horizontal',
+  labelCol: { span: 4 },
+  wrapperCol: { span: 8 },
+  submitter: {
+    searchConfig: {
+      resetText: '返回',
+      submitText: '保存',
+    },
+    onReset: () => history.go(-1),
+    render: (_: any, dom: JSX.Element[]) => {
+      return (
+        <AntForm.Item wrapperCol={{ offset: 4, span: 8 }}>
+          <ProForm.Group>
+            <Space>{dom}</Space>
+          </ProForm.Group>
+        </AntForm.Item>
+      )
+    },
+  },
+}

package/src/components/Image/index.md

@@ -0,0 +1,8 @@
+## Image
+
+```tsx
+import React from 'react'
+import { Image } from '@rainte/ant'
+
+export default () => <Image />
+```

package/src/components/Image/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Image as AntImage, ImageProps } from 'antd'
+
+export type { ImageProps } from 'antd'
+
+const Image: React.FC<ImageProps> = props => {
+  return <AntImage {...props} />
+}
+
+export default Image
+
+Image.defaultProps = {
+  src: '',
+  fallback:
+    'data:image/png;base64,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',
+}

package/src/components/Table/index.md

@@ -0,0 +1,80 @@
+## Table
+
+```tsx
+import React from 'react'
+import { Table } from '@rainte/ant'
+
+const treeData = [
+  {
+    title: 'Node1',
+    value: '0-0',
+    children: [
+      {
+        title: 'Child Node1',
+        value: '0-0-1',
+      },
+      {
+        title: 'Child Node2',
+        value: '0-0-2',
+      },
+    ],
+  },
+  {
+    title: 'Node2',
+    value: '0-1',
+  },
+]
+
+const props = {
+  columns: [
+    {
+      title: '序号',
+      valueType: 'index',
+    },
+    {
+      title: '搜索',
+      dataIndex: 'search',
+      hideInTable: true,
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      hideInSearch: true,
+    },
+    {
+      title: '树选择',
+      dataIndex: 'treeSelect',
+      valueType: 'treeSelect',
+      fieldProps: { treeData },
+    },
+    {
+      title: '排序',
+      dataIndex: 'sort',
+      hideInSearch: true,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      valueEnum: new Map([
+        [1, { text: '显示', status: 'Success' }],
+        [0, { text: '隐藏', status: 'Error' }],
+      ]),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      valueType: 'dateTime',
+      sorter: true,
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      valueType: 'option',
+      render: (_: any, row: any) => <a>查看</a>,
+    },
+  ],
+}
+
+export default () => <Table {...props} />
+```

package/src/components/Table/index.tsx

@@ -0,0 +1,45 @@
+import React, { Context, useContext } from 'react'
+import ProTable, { ProTableProps } from '@ant-design/pro-table'
+import AntContext from '@ant-design/pro-provider'
+import { FooterToolbar } from '@ant-design/pro-layout'
+import ValueTypeMap, { ValueTypeEnum } from '../ValueType'
+
+export type TableProps<
+  T = any,
+  U = Record<string, any>,
+  ValueType = ValueTypeEnum,
+> = ProTableProps<T, U, ValueType> & {
+  context: Context<any>
+  selection?: any[]
+}
+
+const Table: React.FC<TableProps<any, any>> = props => {
+  const { context, selection, ...attrs } = props
+  const values = useContext(context)
+  const valueTypeMap = ValueTypeMap
+
+  return (
+    <context.Provider value={{ ...values, valueTypeMap }}>
+      <ProTable {...attrs} />
+      {selection && selection.length > 0 && (
+        <FooterToolbar
+          extra={
+            <div>
+              已选择 <a>{selection.length}</a> 项
+            </div>
+          }
+        >
+          {React.Children.map(props.children, item => item)}
+        </FooterToolbar>
+      )}
+    </context.Provider>
+  )
+}
+
+export default Table
+
+Table.defaultProps = {
+  context: AntContext,
+  rowKey: 'id',
+  search: { labelWidth: 120 },
+}

package/src/components/Tabs/index.md

@@ -0,0 +1,24 @@
+## Tabs
+
+```tsx
+import React from 'react'
+import { Tabs } from '@rainte/ant'
+
+const props = {
+  accessKey: 'base',
+  items: [
+    {
+      tab: '基本设置',
+      key: 'base',
+      children: <div>基本设置</div>,
+    },
+    {
+      tab: '安全设置',
+      key: 'security',
+      children: <div>安全设置</div>,
+    },
+  ],
+}
+
+export default () => <Tabs {...props} />
+```

package/src/components/Tabs/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Tabs as AntTabs, TabsProps as AntTabsProps, TabPaneProps } from 'antd'
+
+export type TabsProps = AntTabsProps & {
+  items: (TabPaneProps & { key: any })[]
+}
+
+const Tabs: React.FC<TabsProps> = props => {
+  const { items, ...attrs } = props
+
+  const panes = items.map(item => <AntTabs.TabPane {...item} />)
+
+  return <AntTabs {...attrs}>{panes}</AntTabs>
+}
+
+export default Tabs
+
+Tabs.defaultProps = {
+  type: 'card',
+  tabPosition: 'top',
+}

package/src/components/ValueType/components/Cascader.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import {
+  Space,
+  Cascader as AntCascader,
+  CascaderProps as AntCascaderProps,
+} from 'antd'
+import { RenderProps, FieldProps, RequestProps } from '../index'
+import { fetch } from '../../../utils/Swr'
+import { equal, intact } from '../../../utils/Tree'
+
+type CascaderProps<T = any> = AntCascaderProps<T> & RequestProps
+type TextProps = CascaderProps & { iValue: any; iDom: any }
+
+const entire = (value: any, options: any[]) => {
+  if (Array.isArray(value)) {
+    if (value.length === 1) {
+      return intact(options, { value: value[0] }, 'value')
+    }
+
+    return value
+  }
+
+  return []
+}
+
+const combine = (text: any[], options: any[], dom: any) => {
+  return text
+    .map((item: any) => {
+      const node = equal(options, { value: item })
+      return node ? node.label : text ? text : dom
+    })
+    .join(' / ')
+}
+
+const Cascader: React.FC<CascaderProps> = props => {
+  const { iParams, iRequest, ...attrs } = props
+
+  const data = fetch(iRequest, iParams, attrs)
+
+  const options = (iRequest ? data : attrs.options) ?? []
+  const values = entire(attrs.value, options) ?? []
+
+  return <AntCascader {...attrs} options={options} value={values} />
+}
+
+const Text: React.FC<TextProps> = props => {
+  const { iValue, iDom, iParams, iRequest, ...attrs } = props
+
+  const data = fetch(iRequest, iParams, attrs)
+
+  const options = (iRequest ? data : attrs.options) ?? []
+  const values = entire(iValue, options) ?? []
+
+  const dom = values.length ? combine(values, options, iDom) : iDom
+
+  return <Space>{dom}</Space>
+}
+
+const Render: RenderProps = {
+  name: 'cascader',
+  render: (text, props: FieldProps, dom) => {
+    const { params, request, fieldProps } = props
+    const iParams = params
+    const iRequest = request
+    const attrs = { iValue: text, iDom: dom, iParams, iRequest }
+
+    return <Text {...fieldProps} {...attrs} />
+  },
+  renderFormItem: (_, props: FieldProps) => {
+    const { params, request, fieldProps } = props
+    const iParams = params
+    const iRequest = request
+    const attrs = { iParams, iRequest }
+
+    return <Cascader {...fieldProps} {...attrs} />
+  },
+}
+
+export default Render

package/src/components/ValueType/components/Editor.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Editor from '../../Editor'
+import { RenderProps, FieldProps } from '../index'
+
+const Render: RenderProps = {
+  name: 'editor',
+  render: (text, props, dom) => {
+    if (text instanceof Object) {
+      return <>{text.toHTML()}</>
+    }
+    return dom
+  },
+  renderFormItem: (_, props: FieldProps) => {
+    return <Editor {...props.fieldProps} />
+  },
+}
+
+export default Render

package/src/components/ValueType/components/TreeSelect.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import {
+  Tag,
+  TreeSelect as AntTreeSelect,
+  TreeSelectProps as AntTreeSelectProps,
+  Space,
+} from 'antd'
+import { RenderProps, FieldProps, RequestProps } from '../index'
+import { fetch } from '../../../utils/Swr'
+import { equal } from '../../../utils/Tree'
+
+type TreeSelectProps<T = any> = AntTreeSelectProps<T> & RequestProps
+type TextProps<T = any> = TreeSelectProps<T> & { iValue: any; iDom: any }
+
+const combine = (text: any[], options: any[], dom: any) => {
+  return text.map((item: any) => {
+    const node = equal(options, { value: item })
+
+    return <Tag>{node ? node.title : text ? text : dom}</Tag>
+  })
+}
+
+const TreeSelect: React.FC<TreeSelectProps> = props => {
+  const { iParams, iRequest, ...attrs } = props
+
+  const data = fetch(iRequest, iParams, attrs)
+
+  const options = (iRequest ? data : attrs.treeData) ?? []
+
+  return <AntTreeSelect {...attrs} treeData={options} />
+}
+
+const Text: React.FC<TextProps> = props => {
+  const { iValue, iDom, iParams, iRequest, ...attrs } = props
+
+  const data = fetch(iRequest, iParams, attrs)
+
+  const options = (iRequest ? data : attrs.treeData) ?? []
+
+  if (Array.isArray(iValue)) {
+    return <Space>{combine(iValue, options, iDom)}</Space>
+  }
+
+  const node = equal(options, { value: iValue })
+  return <>{node ? node.title : iValue ? iValue : iDom}</>
+}
+
+const Render: RenderProps = {
+  name: 'treeSelect',
+  render: (text, props: FieldProps, dom) => {
+    const { params, request, fieldProps } = props
+    const iParams = params
+    const iRequest = request
+    const attrs = { iValue: text, iDom: dom, iParams, iRequest }
+
+    return <Text {...fieldProps} {...attrs} />
+  },
+  renderFormItem: (_, props: FieldProps) => {
+    const { params, request, fieldProps } = props
+    const iParams = params
+    const iRequest = request
+    const attrs = { iParams, iRequest }
+
+    return <TreeSelect {...fieldProps} {...attrs} />
+  },
+}
+
+export default Render
+
+TreeSelect.defaultProps = {
+  allowClear: true,
+  showSearch: true,
+  treeNodeFilterProp: 'title',
+}