@regenbio/regenbio-components-react 1.2.16 → 1.2.17

package/packages/form/src/components/FieldSet/demos/search-select.tsx

@@ -1,90 +0,0 @@
-import { ProForm, ProFormSelect } from '@ant-design/pro-components';
-import { Switch } from 'antd';
-import { useState } from 'react';
-
-export default () => {
-  const [readonly, setReadonly] = useState(false);
-  return (
-    <div
-      style={{
-        padding: 24,
-      }}
-    >
-      <Switch
-        style={{
-          marginBlockEnd: 16,
-        }}
-        checked={readonly}
-        checkedChildren="编辑"
-        unCheckedChildren="只读"
-        onChange={setReadonly}
-      />
-      <ProForm readonly={readonly}>
-        <ProForm.Group>
-          <ProFormSelect.SearchSelect
-            name="userQuery"
-            label="查询选择器 - request"
-            fieldProps={{
-              labelInValue: true,
-              style: {
-                minWidth: 140,
-              },
-            }}
-            debounceTime={300}
-            request={async ({ keyWords = '' }) => {
-              return [
-                { label: '全部', value: 'all' },
-                { label: '未解决', value: 'open' },
-                { label: '未解决(已分配)', value: 'assignees' },
-                { label: '已解决', value: 'closed' },
-                { label: '解决中', value: 'processing' },
-              ].filter(({ value, label }) => {
-                return value.includes(keyWords) || label.includes(keyWords);
-              });
-            }}
-          />
-          <ProFormSelect.SearchSelect
-            name="userQuery2"
-            label="查询选择器 - valueEnum"
-            fieldProps={{
-              style: {
-                minWidth: 140,
-              },
-            }}
-            valueEnum={{
-              all: { text: '全部', status: 'Default' },
-              open: {
-                text: '未解决',
-                status: 'Error',
-              },
-              closed: {
-                text: '已解决',
-                status: 'Success',
-              },
-              processing: {
-                text: '解决中',
-                status: 'Processing',
-              },
-            }}
-          />
-          <ProFormSelect.SearchSelect
-            name="userQuery3"
-            label="查询选择器 - options"
-            fieldProps={{
-              labelInValue: false,
-              style: {
-                minWidth: 140,
-              },
-            }}
-            options={[
-              { label: '全部', value: 'all' },
-              { label: '未解决', value: 'open' },
-              { label: '已解决', value: 'closed' },
-              { label: '解决中', value: 'processing' },
-            ]}
-          />
-        </ProForm.Group>
-      </ProForm>
-    </div>
-  );
-};

package/packages/form/src/components/FieldSet/demos/upload.tsx

@@ -1,35 +0,0 @@
-import {
-  ProForm,
-  ProFormUploadButton,
-  ProFormUploadDragger,
-} from '@ant-design/pro-components';
-
-export default () => {
-  return (
-    <ProForm>
-      <ProFormUploadButton
-        title="上传按钮的文本变啦"
-        name="upload"
-        label="Upload"
-        max={2}
-        fieldProps={{
-          name: 'file',
-        }}
-        action="/upload.do"
-        extra="longgggggggggggggggggggggggggggggggggg"
-      />
-      <ProFormUploadButton
-        name="upload"
-        label="Upload"
-        max={2}
-        fieldProps={{
-          name: 'file',
-          listType: 'picture-card',
-        }}
-        action="/upload.do"
-        extra="longgggggggggggggggggggggggggggggggggg"
-      />
-      <ProFormUploadDragger max={4} label="Dragger" name="dragger" />
-    </ProForm>
-  );
-};

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

@@ -1,529 +0,0 @@
----
-title: ProFormFields
-order: 1
-atomId: ProFormText
-nav:
-  title: Components
----
-
-# ProFormFields
-
-ProForm comes with a significant number of form items, which are essentially a combination of Form.Item and components. Each form item supports the `fieldProps` property to support setting the `props` of the input component. We support pass-through of `placeholder`, so you can set `placeholder` directly on the component.
-
-Each form item also supports `readonly`, which has different read-only styles for different components, making `readonly` display more friendly compared to `disable`. The generated dom is also smaller, e.g. ProFormDigit automatically formats decimal digits.
-
-ProFormText is the product of FormItem + Input and can be analogous to the following code.
-
-```tsx | pure
-const ProFormText = (props) => {
-  return (
-    <ProForm.Item {. .props}>
-      <Input placeholder={props.placeholder} {. .props.fieldProps} />
-    </ProForm.Item
-  );
-};
-```
-
-So the props we set for ProFormText are actually for Form.Item, and the fieldProps are for the included Input, remember.
-
-## Demo
-
-### Full amount of form field
-
-<code src="./demos/components-other.tsx"></code>
-
-### Query form
-
-<code src="./demos/search-select.tsx" oldtitle=" Query form"></code>
-
-### Date form
-
-<code src="./demos/datatime.tsx" oldtitle="Date form"></code>
-
-### Upload form
-
-<code src="./demos/upload.tsx" oldtitle="Upload form"></code>
-
-### Structured data
-
-<code src="./demos/form-fieldset.tsx" oldtitle="Structured data"></code>
-
-### Read-only for form field
-
-<code src="./demos/components-other-readonly.tsx" debug></code>
-
-## ProForm.Item
-
-ProForm comes with Filed , which basically corresponds to the valueType one by one.
-
-### Generic properties
-
-| parameter | description | type | default |
-| --- | --- | --- | --- |
-| width | The length of the Field, we summarize the common Field lengths and suitable scenarios, support some enumeration "xs" , "s" , "m" , "l" , "x" | `number \| "xs" \| "s" \| "m" \| "l" \| "x"` | - |
-| rowProps | Passed to `Row` when `grid` mode is enabled, Applies only to `ProFormGroup`, `ProFormList`, `ProFormFieldSet` | [RowProps](https://ant.design/components/grid/#Row) | { gutter: 8 } |
-| colProps | Passed to `Col` when `grid` mode is enabled | [ColProps](https://ant.design/components/grid/#Col) | { xs: 24 } |
-| tooltip | will add an icon next to the label to show the configured information when hovered | `string \| tooltipProps` | - |
-| secondary | Whether secondary control, only valid for LightFilter | `boolean` | `false` |
-| allowClear | Support for clearing, valid for LightFilter, will also be passed to `fieldProps` if actively set. | `boolean` | `true` |
-
-### Width
-
-In some cases, we need to adapt the input box according to the page display, except that a form area should use the fixed width rule by default.
-
-! [width info](https://gw.alipayobjects.com/zos/antfincdn/CyJPTSL07y/1574664269794-254db9de-2574-4361-bcf1-b82c6db0c80a.png)
-
-- `XS=104px` for short numbers, short text or options.
-- `S=216px` for shorter field entries, such as name, phone, ID, etc.
-- `M=328px` Standard width, suitable for most field lengths.
-- `L=440px` Suitable for longer field entries, such as long URLs, tag groups, file paths, etc.
-- `XL=552px` Suitable for long text entry, such as long links, descriptions, notes, etc., usually used with adaptive multi-line input boxes or fixed height text fields.
-
-### ProFormText
-
-Same as [Input](https://ant.design/components/input/).
-
-```tsx | pure
-<ProFormText
-  name="text"
-  label="Name"
-  placeholder="Please enter a name"
-  fieldProps={inputProps}
-/>
-```
-
-### ProFormCaptcha
-
-ProFormCaptcha is a component developed to support common CAPTCHA functionality in the middle and backend.
-
-```tsx | pure
-<ProFormCaptcha
-  fieldProps={{
-    size: 'large',
-    prefix: <MailTwoTone />,
-  }}
-  captchaProps={{
-    size: 'large',
-  }}
-  // The name of the phone number, which is injected by onGetCaptcha
-  phoneName="phone"
-  name="captcha"
-  rules={[
-    {
-      required: true,
-      message: 'Please enter the verification code',
-    },
-  ]}
-  placeholder="Please enter a captcha"
-  // If you need to fail, you can throw an error and onGetCaptcha will stop automatically
-  // throw new Error("Error getting captcha")
-  onGetCaptcha={async (phone) => {
-    await waitTime(1000);
-    message.success(
-      `phone number ${phone} Verification code sent successfully! `,
-    );
-  }}
-/>
-```
-
-| parameters | description | type | default |
-| --- | --- | --- | --- |
-| onGetCaptcha | The event to click to get the captcha, if phoneName is configured it will be injected automatically | `(phone)=>Promise<any>` | - |
-| captchaProps | The props of the Get Captcha button, same as antd's props | `ButtonProps` | - |
-| countDown | The number of seconds to count down | number | 60 |
-| captchaTextRender | Render the text of the timer | `(timing: boolean, count: number) => React.ReactNode` | - |
-
-### ProFormText.Password
-
-Same as [Input.Password](https://ant.design/components/input/#Input.Password).
-
-```tsx | pure
-<ProFormText.Password label="InputPassword" name="input-password" />
-```
-
-### ProFormDatePicker
-
-Same as [DatePicker](https://ant.design/components/date-picker/).
-
-```tsx | pure
-<ProFormDatePicker name="date" label="date" />
-```
-
-### ProFormDateTimePicker
-
-Same as [DatePicker](https://ant.design/components/date-picker/).
-
-```tsx | pure
-<ProFormDateTimePicker name="datetime" label="datetime" />
-```
-
-### ProFormDateRangePicker
-
-Same as [DatePicker.RangePicker](https://ant.design/components/date-picker/#RangePicker).
-
-```tsx | pure
-<ProFormDateRangePicker name="dateRange" label="date" />
-```
-
-### ProFormDateTimeRangePicker
-
-Same as [DatePicker.RangePicker](https://ant.design/components/date-picker/#RangePicker).
-
-```tsx | pure
-<ProFormDateTimeRangePicker name="datetimeRange" label="datetime" />
-```
-
-### ProFormTimePicker
-
-Same as [DatePicker](https://ant.design/components/date-picker/)
-
-```tsx | pure
-<ProFormDateRangePicker name="time" label="time" />
-```
-
-### ProFormTextArea
-
-Same as [Input.TextArea](https://ant.design/components/input/#Input.TextArea).
-
-```tsx | pure
-<ProFormTextArea
-  name="text"
-  label="name"
-  placeholder="Please enter a name"
-  fieldProps={inputTextAreaProps}
-/>
-```
-
-### ProFormCheckbox
-
-> Requesting remote data is more complicated, see \[here]\(/components/field#remote data) for details.
-
-Same as [checkbox](https://ant.design/components/checkbox/), but supports `options` and `layout`.
-
-| parameters | description | type | default |
-| --- | --- | --- | --- |
-| options | Same as select, generates child nodes based on options, recommended. | `string[]` \| `{label:ReactNode,value:string}[]` | - |
-| layout | Configure the look of the checkbox to support vertical `vertical` and `horizontal` | `horizontal` \| `vertical` | - |
-
-```tsx | pure
-<ProFormCheckbox.Group
-  name="checkbox"
-  layout="vertical"
-  label="Industry Distribution"
-  options={['Agriculture', 'Manufacturing', 'Internet']}
-/>
-```
-
-### ProFormRadio.Group
-
-> Requesting remote data is more complicated, see \[here]\(/components/field#remote data) for details.
-
-Same as [radio](https://ant.design/components/radio/) but with support for `options`.
-
-| parameters | description | type | default |
-| --- | --- | --- | --- |
-| options | Same as select, generates child nodes based on options, recommended. | `string[]` \| `{label:ReactNode,value:string}[]` | - |
-| radioType | Set whether button mode or radio mode | `default` \| `button` | `default` |
-
-```tsx | pure
-<ProFormRadio.Group
-  name="radio-group"
-  label="Radio.Group"
-  options={[
-    {
-      label: 'item 1',
-      value: 'a',
-    },
-    {
-      label: 'item 2',
-      value: 'b',
-    },
-    {
-      label: 'item 3',
-      value: 'c',
-    },
-  ]}
-/>
-```
-
-### ProFormSwitch
-
-Same as [switch](https://ant.design/components/switch/).
-
-```tsx | pure
-<ProFormSwitch name="switch" label="Switch" />
-```
-
-### ProFormRate
-
-Same as [rate](https://ant.design/components/rate/).
-
-```tsx | pure
-<ProFormRate name="rate" label="Rate" />
-```
-
-### ProFormSlider
-
-Same as [slider](https://ant.design/components/slider/).
-
-```tsx | pure
-<ProFormSlider
-  name="slider"
-  label="Slider"
-  marks={{
-    0: 'A',
-    20: 'B',
-    40: 'C',
-    60: 'D',
-    80: 'E',
-    100: 'F',
-  }}
-/>
-```
-
-### ProFormUploadDragger
-
-Same as [upload](https://ant.design/components/upload/). Dragger style is preset, otherwise it is the same as Upload.
-
-| Parameters | Description | Type | Default |
-| --- | --- | --- | --- |
-| icon | The chart of the Dragger. | `ReactNode` | InboxOutlined |
-| title | Dragger's title | `ReactNode` | 'Click or drag files to this area to upload' |
-| description | Dragger's description | `ReactNode` | 'Support single or bulk uploads' |
-
-```tsx | pure
-<ProFormUploadDragger label="Dragger" name="dragger" action="upload.do" />
-```
-
-### ProFormUploadButton
-
-Same as [upload](https://ant.design/components/upload/). The Button style is preset, otherwise it is the same as Upload.
-
-| Parameters | Description           | Type        | Default         |
-| ---------- | --------------------- | ----------- | --------------- |
-| icon       | The chart of Dragger. | `ReactNode` | UploadOutlined  |
-| title      | Dragger's title       | `ReactNode` | Click to upload |
-
-```tsx | pure
-<ProFormUploadButton label="upload" name="upload" action="upload.do" />
-```
-
-### ProFormSelect
-
-Same as [select](https://ant.design/components/select/). Both request and valueEnum are supported to generate options.
-
-> Requesting remote data is more complicated, see \[here]\(/components/field#remote data) for details.
-
-> Why support valueEnum when you have options? valueEnum can be used with tables, descriptions, and has engineering advantages.
-
-| parameters | description | type | default |
-| --- | --- | --- | --- |
-| valueEnum | Enumeration of current values [valueEnum](/components/table#valueenum) | `Record` | - |
-| request | Enumerate data from network requests | `()=>Promise<{[key:string`\|`number]:any}>` | - |
-
-```tsx | pure
-<>
-  <ProFormSelect
-    name="select"
-    label="Select"
-    valueEnum={{
-      open: 'Unresolved',
-      closed: 'Resolved',
-    }}
-    placeholder="Please select a country"
-    rules={[{ required: true, message: 'Please select your country!' }]}
-  />
-
-  <ProFormSelect
-    name="select2"
-    label="Select"
-    request={async () => [
-      { label: 'all', value: 'all' }
-      { label: 'Unresolved', value: 'open' }
-      { label: 'Resolved', value: 'closed' }
-      { label: 'Resolving', value: 'processing' },
-    ]}
-    placeholder="Please select a country"
-    rules={[{ required: true, message: 'Please select your country!' }]}
-  />
-</>
-```
-
-Customize options：
-
-```tsx | pure
-<ProFormSelect
-  name="select"
-  label="Select"
-  options={[
-    { label: '全部', value: 'all' },
-    { label: '未解决', value: 'open' },
-    { label: '已解决', value: 'closed' },
-    { label: '解决中', value: 'processing' },
-  ]}
-  fieldProps={{
-    optionItemRender(item) {
-      return item.label + ' - ' + item.value;
-    },
-  }}
-  placeholder="Please select a country"
-  rules={[{ required: true, message: 'Please select your country!' }]}
-/>
-```
-
-### ProFormTreeSelect
-
-Same as [tree-select](https://ant.design/components/tree-select/). Both request and valueEnum are supported to generate options.
-
-> Requesting remote data is more complicated, see \[here]\(/components/field#remote data) for details.
-
-> Why support valueEnum when you have options? valueEnum can be used with tables, descriptions, and has engineering advantages.
-
-| parameters | description | type | default |
-| --- | --- | --- | --- |
-| valueEnum | Enumeration of current values [valueEnum](/components/table#valueenum) | `Record` | - |
-| request | Enumerate data from network requests | `()=>Promise<{[key:string`\|`number]:any}>` | - |
-
-```tsx | pure
-<ProFormTreeSelect
-  name="name"
-  placeholder="Please select"
-  allowClear
-  width={330}
-  secondary
-  request={async () => {
-    return [
-      {
-        title: 'Node1',
-        value: '0-0',
-        children: [
-          {
-            title: 'Child Node1',
-            value: '0-0-0',
-          },
-        ],
-      },
-      {
-        title: 'Node2',
-        value: '0-1',
-        children: [
-          {
-            title: 'Child Node3',
-            value: '0-1-0',
-          },
-          {
-            title: 'Child Node4',
-            value: '0-1-1',
-          },
-          {
-            title: 'Child Node5',
-            value: '0-1-2',
-          },
-        ],
-      },
-    ];
-  }}
-  // tree-select args
-  fieldProps={{
-    suffixIcon: null,
-    filterTreeNode: true,
-    showSearch: true,
-    popupMatchSelectWidth: false,
-    labelInValue: true,
-    autoClearSearchValue: true,
-    multiple: true,
-    treeNodeFilterProp: 'title',
-    fieldNames: {
-      label: 'title',
-    },
-  }}
-/>
-```
-
-### ProFormDigit
-
-Same as [inputNumber](https://ant.design/components/input-number/). It comes with a formatting (retains 2 decimal places, minimum value is 0), you can turn it off if needed.
-
-```tsx | pure
-<ProFormDigit label="InputNumber" name="input-number" min={1} max={10} />
-```
-
-If you want to change the number of decimal places.
-
-```tsx | pure
-<ProFormDigit
-  label="InputNumber"
-  name="input-number"
-  min={1}
-  max={10}
-  fieldProps={{ precision: 0 }}
-/>
-```
-
-### ProFormMoney
-
-ProFormMoney's input box for entering amounts supports the display of currency symbols based on global internationalization, negative input, custom currency symbols, and more.
-
-```tsx | pure
-<ProFormMoney
-  label="The minimum limit is 0"
-  name="amount1"
-  locale="en-US"
-  initialValue={22.22}
-  min={0}
-/>
-<ProFormMoney
-  label="There is no limit to the amount size"
-  name="amount2"
-  locale="en-GB"
-  initialValue={22.22}
-/>
-<ProFormMoney
-  label="Currency symbols follow global internationalization"
-  name="amount3"
-  initialValue={22.22}
-/>
-<ProFormMoney
-  label="Custom currency symbols"
-  name="amount4"
-  initialValue={22.22}
-  customSymbol="💰"
-/>
-```
-
-| parameters | description | type | default |
-| --- | --- | --- | --- |
-| locale | The internationalized region values set separately show different currency symbols depending on the region, as detailed in the region directory below | `string` | `zh-Hans-CN` |
-| customSymbol | Custom amount symbol | `string` | - |
-| numberPopoverRender | Custom Popover's value, false, can close his | `((props: InputNumberProps, defaultText: string) => React.ReactNode)` \| `boolean` | false |
-| numberFormatOptions | The configuration of NumberFormat, where the documentation can view the of the [mdn](https://developer.mozilla.org/zh-CN/docs/web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)) | NumberFormatOptions | - |
-| min | The minimum value is | `number` | - |
-| max | The maximum value is | `number` | - |
-
-#### Below is a table of regional codes and currency symbols
-
-```json
-{
-"ar-EG": "$",
-"zh-CN": "¥",
-"en-US": "$",
-"en-GB": "£",
-"vi-VN": "₫",
-"it-IT": "€",
-"ja-JP": "¥",
-"es-ES": "€",
-"ru-RU": "₽",
-"sr-RS": "RSD",
-"ms-MY": "RM",
-"zh-TW": "NT$"
-"fr-FR": "€",
-"pt-BR": "R$",
-"ko-KR": "₩",
-"id-ID": "RP",
-"de-DE": "€",
-"fa-IR": "تومان",
-"tr-TR": "₺",
-"pl-PL": "zł",
-"hr-HR": "kn",
-}
-```