@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/form/src/components/QueryFilter/demos/query-filter-collapsed.tsx

@@ -0,0 +1,18 @@
+import {
+  ProFormDatePicker,
+  ProFormText,
+  QueryFilter,
+} from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <QueryFilter defaultCollapsed split>
+      <ProFormText name="name" label="应用名称" />
+      <ProFormDatePicker name="createDate" label="创建时间" />
+      <ProFormText name="status" label="应用状态" />
+      <ProFormDatePicker name="replyDate" label="响应日期" />
+      <ProFormDatePicker name="startDate" label="创建时间" />
+      <ProFormDatePicker name="endDate" label="结束时间" />
+    </QueryFilter>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/query-filter-defaultColsNumber.tsx

@@ -0,0 +1,18 @@
+import {
+  ProFormDatePicker,
+  ProFormText,
+  QueryFilter,
+} from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <QueryFilter defaultCollapsed split defaultColsNumber={6}>
+      <ProFormText name="name" label="应用名称" />
+      <ProFormDatePicker name="createDate" label="创建时间" />
+      <ProFormText name="status" label="应用状态" />
+      <ProFormDatePicker name="replyDate" label="响应日期" />
+      <ProFormDatePicker name="startDate" label="创建时间" />
+      <ProFormDatePicker name="endDate" label="结束时间" />
+    </QueryFilter>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/query-filter-test.tsx

@@ -0,0 +1,158 @@
+import {
+  ProForm,
+  ProFormDatePicker,
+  ProFormText,
+  QueryFilter,
+} from '@ant-design/pro-components';
+import { Input } from 'antd';
+
+export default () => {
+  const formProps = {
+    defaultColsNumber: 6,
+  };
+  return (
+    <>
+      <>
+        <QueryFilter {...formProps}>
+          <ProFormDatePicker
+            // key={i}
+            colSize={4}
+            name="test"
+            label="test"
+          />
+          {[...Array(10).keys()].map((i) => (
+            <ProFormDatePicker
+              key={i}
+              name={`startdate${i + 1}`}
+              label={`Date${i + 1}`}
+            />
+          ))}
+        </QueryFilter>
+        <pre>{JSON.stringify(formProps, null, 2)}</pre>
+      </>
+      <QueryFilter<{
+        name: string;
+        company: string;
+      }>
+        onFinish={async (values) => {
+          console.log(values.name);
+        }}
+        span={6}
+        defaultCollapsed={false}
+      >
+        <ProForm.Item name="name" label="test">
+          <Input />
+        </ProForm.Item>
+        <ProFormText
+          name="name"
+          label="应用名称"
+          rules={[{ required: true }]}
+        />
+        <ProFormText name="sex" label="性别" />
+      </QueryFilter>
+      <QueryFilter<{
+        name: string;
+        company: string;
+      }>
+        onFinish={async (values) => {
+          console.log(values.name);
+        }}
+        span={6}
+        defaultCollapsed={false}
+      >
+        <ProFormText
+          name="name"
+          label="应用名称"
+          rules={[{ required: true }]}
+        />
+        <ProFormText name="creater" label="创建人" />
+        <ProFormText name="sex" label="性别" />
+      </QueryFilter>
+      <QueryFilter<{
+        name: string;
+        company: string;
+      }>
+        onFinish={async (values) => {
+          console.log(values.name);
+        }}
+        defaultCollapsed={false}
+      >
+        <ProFormText
+          name="name"
+          label="应用名称"
+          rules={[{ required: true }]}
+        />
+        <ProFormText name="creater" label="创建人" />
+        <ProFormText name="sex" label="性别" />
+        <ProFormText name="status" label="应用状态" />
+        <ProFormText name="startdate" label="响应日期" />
+        <ProFormText name="create" label="创建时间" />
+      </QueryFilter>
+      <QueryFilter<{
+        name: string;
+        company: string;
+      }>
+        onFinish={async (values) => {
+          console.log(values.name);
+        }}
+        span={12}
+        defaultCollapsed={false}
+      >
+        <ProFormText
+          name="name"
+          label="应用名称"
+          rules={[{ required: true }]}
+        />
+        <ProFormText name="creater" label="创建人" />
+        <ProFormText name="sex" label="性别" />
+        <ProFormText name="status" label="应用状态" />
+        <ProFormText name="startdate" label="响应日期" />
+        <ProFormText name="create" label="创建时间" colSize={3} />
+      </QueryFilter>
+      <QueryFilter<{
+        name: string;
+        company: string;
+      }>
+        onFinish={async (values) => {
+          console.log(values.name);
+        }}
+        span={8}
+        defaultCollapsed={false}
+      >
+        <ProFormText
+          name="name"
+          label="应用名称"
+          rules={[{ required: true }]}
+        />
+        <ProFormText name="creater" label="创建人" />
+        <ProFormText name="sex" label="性别" />
+        <ProFormText name="status" label="应用状态" />
+        <ProFormText name="startdate" label="响应日期" />
+        <ProFormText name="create" label="创建时间" colSize={3} />
+      </QueryFilter>
+      <QueryFilter<{
+        name: string;
+        company: string;
+      }>
+        onFinish={async (values) => {
+          console.log(values.name);
+        }}
+        span={4}
+        submitterColSpanProps={{ span: 12 }}
+        defaultColsNumber={1}
+        defaultCollapsed={false}
+      >
+        <ProFormText
+          name="name"
+          label="应用名称"
+          rules={[{ required: true }]}
+        />
+        <ProFormText name="creater" label="创建人" />
+        <ProFormText name="sex" label="性别" />
+        <ProFormText name="status" label="应用状态" />
+        <ProFormText name="startdate" label="响应日期" />
+        <ProFormText name="create" label="创建时间" colSize={3} />
+      </QueryFilter>
+    </>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/query-filter-vertical.tsx

@@ -0,0 +1,44 @@
+import {
+  ProFormCheckbox,
+  ProFormDatePicker,
+  ProFormRadio,
+  ProFormText,
+  QueryFilter,
+} from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <QueryFilter layout="vertical">
+      <ProFormText name="name" label="这是一个超级超级长的名称" />
+      <ProFormDatePicker name="birth" label="创建时间" />
+      <ProFormText name="sex" label="应用状态" />
+      <ProFormRadio.Group
+        name="freq"
+        label="查询频度"
+        options={[
+          {
+            value: 'weekly',
+            label: '每周',
+          },
+          {
+            value: 'quarterly',
+            label: '每季度',
+          },
+          {
+            value: 'monthly',
+            label: '每月',
+          },
+          {
+            value: 'yearly',
+            label: '每年',
+          },
+        ]}
+      />
+      <ProFormCheckbox.Group
+        name="checkbox"
+        label="行业分布"
+        options={['农业', '制造业', '互联网']}
+      />
+    </QueryFilter>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/query-filter.tsx

@@ -0,0 +1,31 @@
+import {
+  ProForm,
+  ProFormDateTimePicker,
+  ProFormText,
+} from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <ProForm grid={true}>
+      <ProForm.Group>
+        <ProFormDateTimePicker
+          label="下单时间"
+          colProps={{ xl: 12 }}
+          name="orderTime"
+          required
+          fieldProps={{
+            style: {
+              width: '100%',
+            },
+          }}
+        />
+        <ProFormText
+          disabled
+          colProps={{ xl: 12 }}
+          name="pay"
+          label="支付方式"
+        />
+      </ProForm.Group>
+    </ProForm>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/search-filter.tsx

@@ -0,0 +1,126 @@
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import {
+  ProForm,
+  ProFormDatePicker,
+  ProFormText,
+  QueryFilter,
+} from '@ant-design/pro-components';
+import { Input, Tabs } from 'antd';
+import React, { useState } from 'react';
+
+type AdvancedSearchProps = {
+  onFilterChange?: (allValues: any) => void;
+  onSearch?: (text: string) => void;
+  onTypeChange?: (type: string) => void;
+  defaultType?: string;
+};
+
+const AdvancedSearch: React.FC<AdvancedSearchProps> = (props) => {
+  const {
+    onSearch,
+    onTypeChange,
+    defaultType = 'articles',
+    onFilterChange,
+  } = props;
+  const [searchText, setSearchText] = useState<string>();
+  const [showFilter, setShowFilter] = useState<boolean>(true);
+  const quickSearch = ['小程序开发', '入驻', 'ISV 权限'];
+  return (
+    <div
+      style={{
+        padding: 24,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+        }}
+      >
+        <Input.Search
+          placeholder="请输入"
+          enterButton="搜索"
+          value={searchText}
+          onChange={(e) => {
+            setSearchText(e.target.value);
+          }}
+          onSearch={onSearch}
+          style={{ maxWidth: 522, width: '100%' }}
+        />
+        <div
+          style={{
+            display: 'flex',
+            gap: 12,
+          }}
+        >
+          {quickSearch.map((text) => (
+            <a
+              key={text}
+              onClick={() => {
+                setSearchText(text);
+                if (onSearch) {
+                  onSearch(text);
+                }
+              }}
+            >
+              {text}
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <Tabs
+        defaultActiveKey={defaultType}
+        onChange={onTypeChange}
+        tabBarExtraContent={
+          <a
+            style={{
+              display: 'flex',
+              gap: 4,
+            }}
+            onClick={() => {
+              setShowFilter(!showFilter);
+            }}
+          >
+            高级筛选 {showFilter ? <UpOutlined /> : <DownOutlined />}
+          </a>
+        }
+        items={[
+          {
+            key: 'articles',
+            label: '文章',
+          },
+          {
+            key: 'projects',
+            label: '项目',
+          },
+          {
+            key: 'applications',
+            label: '应用',
+          },
+        ]}
+      />
+
+      {showFilter ? (
+        <QueryFilter
+          submitter={false}
+          span={24}
+          labelWidth="auto"
+          split
+          onChange={onFilterChange}
+        >
+          <ProForm.Group title="姓名">
+            <ProFormText name="name" />
+          </ProForm.Group>
+          <ProForm.Group title="详情">
+            <ProFormText name="age" label="年龄" />
+            <ProFormDatePicker name="birth" label="生日" />
+          </ProForm.Group>
+        </QueryFilter>
+      ) : null}
+    </div>
+  );
+};
+
+export default AdvancedSearch;

package/packages/form/src/components/QueryFilter/index.en-US.md

@@ -0,0 +1,93 @@
+---
+title: Query/LightFilter
+atomId: QueryFilter,LightFilter
+nav:
+  title: Components
+---
+
+# QueryFilter / LightFilter
+
+QueryFilter and LightFilter solve the problem of using the form with other components, such as Table, List, etc., and avoid complicated style settings. QueryFilter and LightFilter are supported by default in ProTable as their own filter forms.
+
+### Query Filter
+
+<code src="./demos/query-filter.tsx" ></code>
+
+### Query filter - put away by default
+
+<code src="./demos/query-filter-collapsed.tsx" ></code>
+
+### query-filter-vertical-layout
+
+<code src="./demos/query-filter-vertical.tsx" ></code>
+
+### query-filter-search
+
+<code src="./demos/search-filter.tsx" background="var(--main-bg-color)" ></code>
+
+### Lightweight filtering
+
+<code src="./demos/light-filter.tsx" ></code>
+
+### Light filtering - border mode
+
+<code src="./demos/light-filter-bordered.tsx" ></code>
+
+### Light filtering - collapsed mode
+
+All options in collapsed mode are collapsed by default, with or without values, and the control's `secondary` will no longer be valid.
+
+<code src="./demos/light-filter-collapse.tsx" ></code>
+
+## API
+
+### QueryFilter
+
+QueryFilter supports the following properties in addition to the API inherited from ProForm.
+
+| Parameters | Description | Type | Default |
+| --- | --- | --- | --- |
+| collapsed | Whether or not to collapse out-of-bounds form items for controlled mode | `boolean` | - |
+| defaultCollapsed | Whether or not to collapse out-of-order form items in default state | `boolean` | true |
+| onCollapse | Callback when toggling the collapsed state of the form | `(collapsed)=>void` | - |
+| hideRequiredMark | Hide the required markers for all form items, **hide by default** | `boolean` | true |
+| submitterColSpanProps | Props of the col where the submit button is located. | ColProps | - |
+| defaultColsNumber | The default number of controls to be displayed in the collapsed state, if not set or less than 0, one line of controls will be displayed; if the number is greater than or equal to the number of controls, the expand button will be hidden | `number` | - |
+| labelWidth | label width | `number` \| `'auto'` | `98` |
+| span | width of form items | `number[0 - 24]` | - |
+| split | whether each line has a split line | `boolean` | - |
+| preserve | If set to false, the form data will be lost after being put away | `boolean` | true |
+
+#### Responsive Breakpoint Rules
+
+Note that the values of the breakpoints are the size of the form container and not the viewport size.
+
+##### Rules for default layout
+
+| container-width breakpoint | single-row display form single-column count (including action area) | default layout |
+| --- | --- | --- |
+| `≧ 1352px` | 4 columns | `horizontal` |
+| `≧ 1062px` | 3 columns | `horizontal` |
+| `≧ 701px && < 1063px` | 3 columns | `horizontal` |
+| `≧ 701px && < 1063px` | 3 columns | `horizontal` |
+| `≧ 513px && < 701px` | 2 columns | `vertical` |
+| `< 513px` | 1 column | `vertical` |
+
+##### Rules when forcing top and bottom layout
+
+| container width breakpoint | single row display table single column count (including operation area) |
+| --- | --- |
+| `≧ 1057px` | 4 columns |
+| `≧ 785px && < 1057px` | 3 columns |
+| `≧ 513px && < 785px` | 2 columns |
+| < 513px\` | 1 column |
+
+### LightFilter
+
+LightFilter supports the following properties in addition to the API inherited from ProForm.
+
+| Parameters | Description | Type | Default |
+| --- | --- | --- | --- |
+| collapse | whether to collapse all fields by default | `boolean` | `false` |
+| collapseLabel | label of collapsed area | `ReactNode` | `MoreFilter <DownOutlined/>` |
+| placement | The position where the selection box pops up: `bottomLeft` `bottomRight` `topLeft` `topRight` | string | bottomLeft |

package/packages/form/src/components/QueryFilter/index.md

@@ -0,0 +1,90 @@
+---
+title: Query/LightFilter - 筛选表单
+order: 1
+atomId: QueryFilter,LightFilter
+---
+
+# QueryFilter / LightFilter 筛选表单
+
+有些是时候表单要与别的组件组合使用，常见的有 Table ，List 等，这时候就需要一些特殊形态的表单。QueryFilter 和 LightFilter 解决了配合组件使用的问题，避免了复杂的样式设置。ProTable 中默认 支持了 QueryFilter 和 LightFilter 作为自己的筛选表单。
+
+## 查询筛选
+
+<code src="./demos/query-filter.tsx" title="基本使用"></code>
+
+<code src="./demos/query-filter-test.tsx" title="基本使用" debug></code>
+
+<code src="./demos/query-filter-collapsed.tsx" title="查询筛选-默认收起"></code>
+
+<code src="./demos/query-filter-vertical.tsx" title="查询筛选-垂直布局"></code>
+
+<code src="./demos/search-filter.tsx" background="var(--main-bg-color)" title="查询筛选-搜索"></code>
+
+## 轻量筛选
+
+<code src="./demos/light-filter.tsx" title="基本使用"></code>
+
+<code src="./demos/light-filter-footer.tsx" title="轻量筛选-自定义footer"></code>
+
+<code src="./demos/light-filter-bordered.tsx" title="轻量筛选-边框模式"></code>
+
+折叠模式下所有的选项都会默认折叠，不管是否有值，控件的 `secondary` 将不再有效。
+
+<code src="./demos/light-filter-collapse.tsx" title="轻量筛选-折叠模式"></code>
+
+手动设置轻量筛选的弹出框，默认为 `bottomLeft`
+
+<code src="./demos/light-filter-placement.tsx" title="轻量筛选-弹出框对齐方式"></code>
+
+## API
+
+### QueryFilter
+
+QueryFilter 除了继承 ProForm 的 API 以外还支持下面的属性。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| collapsed | 是否折叠超出的表单项，用于受控模式 | `boolean` | - |
+| defaultCollapsed | 默认状态下是否折叠超出的表单项 | `boolean` | true |
+| onCollapse | 切换表单折叠状态时的回调 | `(collapsed)=>void` | - |
+| hideRequiredMark | 隐藏所有表单项的必选标记，**默认隐藏** | `boolean` | true |
+| submitterColSpanProps | 提交按钮所在 col 的 props | ColProps | - |
+| defaultColsNumber | 自定义折叠状态下默认显示的表单控件数量，没有设置或小于 0，则显示一行控件；数量大于等于控件数量则隐藏展开按钮 | `number` | - |
+| labelWidth | label 宽度 | `number` \| `'auto'` | `80` |
+| span | 表单项宽度 | `number[0 - 24]` | - |
+| split | 每一行是否有分割线 | `boolean` | - |
+| preserve | 是否能够查询收起的数据，如果设置为 false，收起后的表单数据将会丢失 | `boolean` | true |
+
+#### 响应式断点规则
+
+注意，断点的值均为表单容器的大小而非视口大小。
+
+##### 默认布局时的规则
+
+| 容器宽度断点          | 单行展示表单列数（包含操作区域） | 默认布局     |
+| --------------------- | -------------------------------- | ------------ |
+| `≧ 1352px`            | 4 列                             | `horizontal` |
+| `≧ 1062px`            | 3 列                             | `horizontal` |
+| `≧ 701px && < 1063px` | 3 列                             | `horizontal` |
+| `≧ 513px && < 701px`  | 2 列                             | `vertical`   |
+| `< 513px`             | 1 列                             | `vertical`   |
+
+##### 强制上下布局时的规则
+
+| 容器宽度断点          | 单行展示表单列数（包含操作区域） |
+| --------------------- | -------------------------------- |
+| `≧ 1057px`            | 4 列                             |
+| `≧ 785px && < 1057px` | 3 列                             |
+| `≧ 513px && < 785px`  | 2 列                             |
+| `< 513px`             | 1 列                             |
+
+### LightFilter
+
+LightFilter 除了继承 ProForm 的 API 以外还支持下面的属性。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| collapse | 是否默认折叠全部字段 | `boolean` | `false` |
+| collapseLabel | 折叠区域的标签 | `ReactNode` | `更多筛选 <DownOutlined/>` |
+| footerRender | 底部内容，当不需要默认底部按钮时，可以设为 footer={false} | `(onClear?: () => void, onConfirm: () => void) => JSX.Element \| false)`\|`false` | - |
+| placement | 选择框弹出的位置 ：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | bottomLeft |

package/packages/form/src/components/Radio/index.tsx

@@ -0,0 +1,89 @@
+import { runFunction } from '@ant-design/pro-utils';
+import type { RadioGroupProps, RadioProps } from 'antd';
+import { Radio } from 'antd';
+import React from 'react';
+import { createField } from '../../BaseForm/createField';
+import type {
+  ProFormFieldItemProps,
+  ProFormFieldRemoteProps,
+} from '../../typing';
+import ProField from '../Field';
+
+export type ProFormRadioGroupProps = ProFormFieldItemProps<
+  RadioGroupProps,
+  HTMLDivElement
+> & {
+  layout?: 'horizontal' | 'vertical';
+  radioType?: 'button' | 'radio';
+  options?: RadioGroupProps['options'];
+} & ProFormFieldRemoteProps;
+
+const RadioGroup: React.FC<ProFormRadioGroupProps> = React.forwardRef(
+  (
+    {
+      fieldProps,
+      options,
+      radioType,
+      layout,
+      proFieldProps,
+      valueEnum,
+      ...rest
+    },
+    ref: any,
+  ) => {
+    return (
+      <ProField
+        valueType={radioType === 'button' ? 'radioButton' : 'radio'}
+        ref={ref}
+        valueEnum={runFunction<[any]>(valueEnum, undefined)}
+        {...rest}
+        fieldProps={{
+          options,
+          layout,
+          ...fieldProps,
+        }}
+        proFieldProps={proFieldProps}
+        filedConfig={{
+          customLightMode: true,
+        }}
+      />
+    );
+  },
+);
+
+/**
+ * Radio
+ *
+ * @param
+ */
+const ProFormRadioComponents: React.FC<ProFormFieldItemProps<RadioProps>> =
+  React.forwardRef(({ fieldProps, children }, ref: any) => {
+    return (
+      <Radio {...fieldProps} ref={ref}>
+        {children}
+      </Radio>
+    );
+  });
+
+const ProFormRadio = createField<ProFormFieldItemProps<RadioProps>>(
+  ProFormRadioComponents,
+  {
+    valuePropName: 'checked',
+    ignoreWidth: true,
+  },
+);
+
+const WrappedProFormRadio: typeof ProFormRadio & {
+  Group: typeof RadioGroup;
+  Button: typeof Radio.Button;
+} = ProFormRadio as any;
+
+WrappedProFormRadio.Group = RadioGroup;
+
+WrappedProFormRadio.Button = Radio.Button;
+
+// @ts-ignore
+// eslint-disable-next-line no-param-reassign
+WrappedProFormRadio.displayName = 'ProFormComponent';
+
+export default WrappedProFormRadio;