@nocobase/client 0.7.0-alpha.9 → 0.7.1-alpha.6

package/src/schema-component/antd/password/PasswordStrength.tsx

@@ -1,162 +0,0 @@
-import { isFn } from '@formily/shared';
-import React, { Fragment } from 'react';
-
-type ReactRenderPropsChildren<T = any> = React.ReactNode | ((props: T) => React.ReactElement);
-
-interface IPasswordStrengthProps {
-  value?: any;
-  children?: ReactRenderPropsChildren<number>;
-}
-
-const isNum = function (c) {
-  return c >= 48 && c <= 57;
-};
-const isLower = function (c) {
-  return c >= 97 && c <= 122;
-};
-const isUpper = function (c) {
-  return c >= 65 && c <= 90;
-};
-const isSymbol = function (c) {
-  return !(isLower(c) || isUpper(c) || isNum(c));
-};
-const isLetter = function (c) {
-  return isLower(c) || isUpper(c);
-};
-
-const getStrength = (val) => {
-  if (!val) return 0;
-  let num = 0;
-  let lower = 0;
-  let upper = 0;
-  let symbol = 0;
-  let MNS = 0;
-  let rep = 0;
-  let repC = 0;
-  let consecutive = 0;
-  let sequential = 0;
-  const len = () => num + lower + upper + symbol;
-  const callMe = () => {
-    let re = num > 0 ? 1 : 0;
-    re += lower > 0 ? 1 : 0;
-    re += upper > 0 ? 1 : 0;
-    re += symbol > 0 ? 1 : 0;
-    if (re > 2 && len() >= 8) {
-      return re + 1;
-    } else {
-      return 0;
-    }
-  };
-  for (let i = 0; i < val.length; i++) {
-    const c = val.charCodeAt(i);
-    if (isNum(c)) {
-      num++;
-      if (i !== 0 && i !== val.length - 1) {
-        MNS++;
-      }
-      if (i > 0 && isNum(val.charCodeAt(i - 1))) {
-        consecutive++;
-      }
-    } else if (isLower(c)) {
-      lower++;
-      if (i > 0 && isLower(val.charCodeAt(i - 1))) {
-        consecutive++;
-      }
-    } else if (isUpper(c)) {
-      upper++;
-      if (i > 0 && isUpper(val.charCodeAt(i - 1))) {
-        consecutive++;
-      }
-    } else {
-      symbol++;
-      if (i !== 0 && i !== val.length - 1) {
-        MNS++;
-      }
-    }
-    let exists = false;
-    for (let j = 0; j < val.length; j++) {
-      if (val[i] === val[j] && i !== j) {
-        exists = true;
-        repC += Math.abs(val.length / (j - i));
-      }
-    }
-    if (exists) {
-      rep++;
-      const unique = val.length - rep;
-      repC = unique ? Math.ceil(repC / unique) : Math.ceil(repC);
-    }
-    if (i > 1) {
-      const last1 = val.charCodeAt(i - 1);
-      const last2 = val.charCodeAt(i - 2);
-      if (isLetter(c)) {
-        if (isLetter(last1) && isLetter(last2)) {
-          const v = val.toLowerCase();
-          const vi = v.charCodeAt(i);
-          const vi1 = v.charCodeAt(i - 1);
-          const vi2 = v.charCodeAt(i - 2);
-          if (vi - vi1 === vi1 - vi2 && Math.abs(vi - vi1) === 1) {
-            sequential++;
-          }
-        }
-      } else if (isNum(c)) {
-        if (isNum(last1) && isNum(last2)) {
-          if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) {
-            sequential++;
-          }
-        }
-      } else {
-        if (isSymbol(last1) && isSymbol(last2)) {
-          if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) {
-            sequential++;
-          }
-        }
-      }
-    }
-  }
-  let sum = 0;
-  const length = len();
-  sum += 4 * length;
-  if (lower > 0) {
-    sum += 2 * (length - lower);
-  }
-  if (upper > 0) {
-    sum += 2 * (length - upper);
-  }
-  if (num !== length) {
-    sum += 4 * num;
-  }
-  sum += 6 * symbol;
-  sum += 2 * MNS;
-  sum += 2 * callMe();
-  if (length === lower + upper) {
-    sum -= length;
-  }
-  if (length === num) {
-    sum -= num;
-  }
-  sum -= repC;
-  sum -= 2 * consecutive;
-  sum -= 3 * sequential;
-  sum = sum < 0 ? 0 : sum;
-  sum = sum > 100 ? 100 : sum;
-
-  if (sum >= 80) {
-    return 100;
-  } else if (sum >= 60) {
-    return 80;
-  } else if (sum >= 40) {
-    return 60;
-  } else if (sum >= 20) {
-    return 40;
-  } else {
-    return 20;
-  }
-};
-
-export const PasswordStrength: React.FC<IPasswordStrengthProps> = (props) => {
-  if (isFn(props.children)) {
-    return props.children(getStrength(String(props.value || '')));
-  } else {
-    return <Fragment>{props.children}</Fragment>;
-  }
-};

package/src/schema-component/antd/password/demos/demo1.tsx

@@ -1,41 +0,0 @@
-/**
- * title: Password
- */
-import { FormItem } from '@formily/antd';
-import { Password, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'boolean',
-      title: `Editable`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Password',
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'boolean',
-      title: `Read pretty`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Password',
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Password, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/password/demos/demo2.tsx

@@ -1,45 +0,0 @@
-/**
- * title: Check strength
- */
- import { FormItem } from '@formily/antd';
- import { Password, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
- import React from 'react';
- 
- const schema = {
-   type: 'object',
-   properties: {
-     input: {
-       type: 'boolean',
-       title: `Editable`,
-       'x-decorator': 'FormItem',
-       'x-component': 'Password',
-       'x-component-props': {
-        checkStrength: true,
-       },
-       'x-reactions': {
-         target: 'read',
-         fulfill: {
-           state: {
-             value: '{{$self.value}}',
-           },
-         },
-       },
-     },
-     read: {
-       type: 'boolean',
-       title: `Read pretty`,
-       'x-read-pretty': true,
-       'x-decorator': 'FormItem',
-       'x-component': 'Password',
-     },
-   },
- };
- 
- export default () => {
-   return (
-     <SchemaComponentProvider components={{ Password, FormItem }}>
-       <SchemaComponent schema={schema} />
-     </SchemaComponentProvider>
-   );
- };
- 

package/src/schema-component/antd/password/index.md

@@ -1,24 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Password
-
-## Examples
-
-### Password
-
-<code src="./demos/demo1.tsx" />
-
-### Check strength
-
-<code src="./demos/demo2.tsx" />
-
-## API
-
-基于 antd 的 Password，新增的属性：
-
-- `checkStrength` 检测密码强度

package/src/schema-component/antd/password/index.ts

@@ -1 +0,0 @@
-export * from './Password';

package/src/schema-component/antd/radio/Radio.tsx

@@ -1,47 +0,0 @@
-import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
-import { isValid } from '@formily/shared';
-import { Radio as AntdRadio, Tag } from 'antd';
-import type { RadioGroupProps, RadioProps } from 'antd/lib/radio';
-import React from 'react';
-
-type ComposedRadio = React.FC<RadioProps> & {
-  Group?: React.FC<RadioGroupProps>;
-  __ANT_RADIO?: boolean;
-};
-
-export const Radio: ComposedRadio = connect(
-  AntdRadio,
-  mapProps({
-    value: 'checked',
-    onInput: 'onChange',
-  }),
-);
-Radio.__ANT_RADIO = true;
-
-Radio.Group = connect(
-  AntdRadio.Group,
-  mapProps({
-    dataSource: 'options',
-  }),
-  mapReadPretty((props) => {
-    if (!isValid(props.value)) {
-      return <div></div>;
-    }
-    const { options = [], value } = props;
-    const field = useField<any>();
-    const dataSource = field.dataSource || [];
-    return (
-      <div>
-        {dataSource
-          .filter((option) => option.value === value)
-          .map((option, key) => (
-            <Tag key={key} color={option.color}>
-              {option.label}
-            </Tag>
-          ))}
-      </div>
-    );
-  }),
-);
-
-export default Radio;

package/src/schema-component/antd/radio/demos/demo1.tsx

@@ -1,42 +0,0 @@
-/**
- * title: Basic
- * desc: The simplest use.
- */
-import { FormItem } from '@formily/antd';
-import { Radio, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'string',
-      title: `编辑模式`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio',
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'string',
-      title: `阅读模式`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio',
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Radio, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/radio/demos/demo2.tsx

@@ -1,55 +0,0 @@
-/**
- * title: Radio Group
- * desc: A group of radio components.
- */
-import { FormItem } from '@formily/antd';
-import { Radio, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const options = [
-  {
-    label: '男',
-    value: 1,
-  },
-  {
-    label: '女',
-    value: 2,
-  },
-];
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'number',
-      title: `编辑模式`,
-      enum: options,
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'number',
-      title: `阅读模式`,
-      enum: options,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Radio, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/radio/demos/demo3.tsx

@@ -1,56 +0,0 @@
-/**
- * title: Radio Group with color
- */
-import { FormItem } from '@formily/antd';
-import { Radio, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const options = [
-  {
-    label: '男',
-    value: 1,
-    color: 'blue',
-  },
-  {
-    label: '女',
-    value: 2,
-    color: 'red',
-  },
-];
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'number',
-      title: `编辑模式`,
-      enum: options,
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-reactions': {
-        target: 'read',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    read: {
-      type: 'number',
-      title: `阅读模式`,
-      enum: options,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Radio, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/schema-component/antd/radio/index.md

@@ -1,22 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Radio
-
-## Examples
-
-### Basic
-
-<code src="./demos/demo1.tsx" />
-
-### Radio Group
-
-<code src="./demos/demo2.tsx" />
-
-### Radio Group with color
-
-<code src="./demos/demo3.tsx" />

package/src/schema-component/antd/radio/index.ts

@@ -1 +0,0 @@
-export * from './Radio';

package/src/schema-component/antd/record-picker/InputRecordPicker.tsx

@@ -1,112 +0,0 @@
-import { RecursionField, useFieldSchema } from '@formily/react';
-import { Select } from 'antd';
-import React, { createContext, useContext, useState } from 'react';
-import { useTableSelectorProps as useTsp } from '../../../block-provider/TableSelectorProvider';
-import { CollectionProvider, useCollection } from '../../../collection-manager';
-import { FormProvider, SchemaComponentOptions } from '../../core';
-import { useCompile } from '../../hooks';
-import { ActionContext, useActionContext } from '../action';
-import { useFieldNames } from './useFieldNames';
-
-const RecordPickerContext = createContext(null);
-
-const useTableSelectorProps = () => {
-  const { multiple, value, setSelectedRows, selectedRows } = useContext(RecordPickerContext);
-  const { onRowSelectionChange, rowKey, ...others } = useTsp();
-  return {
-    ...others,
-    rowKey,
-    rowSelection: {
-      type: multiple ? 'checkbox' : 'radio',
-      defaultSelectedRowKeys: selectedRows?.map((item) => item[rowKey||'id']),
-      selectedRowKeys: selectedRows?.map((item) => item[rowKey||'id']),
-    },
-    onRowSelectionChange(selectedRowKeys, selectedRows) {
-      onRowSelectionChange?.(selectedRowKeys, selectedRows);
-      setSelectedRows?.(selectedRows);
-    },
-  };
-};
-
-const usePickActionProps = () => {
-  const { setVisible } = useActionContext();
-  const { multiple, selectedRows, onChange } = useContext(RecordPickerContext);
-  return {
-    onClick() {
-      if (multiple) {
-        onChange(selectedRows);
-      } else {
-        onChange(selectedRows?.[0] || null);
-      }
-      setVisible(false);
-    },
-  };
-};
-
-const useAssociation = (props) => {
-  const fieldSchema = useFieldSchema();
-  const { association } = props;
-  const { getField } = useCollection();
-  if (association) {
-    return association;
-  }
-  return getField(fieldSchema.name);
-};
-
-export const InputRecordPicker: React.FC<any> = (props) => {
-  const { value, multiple, onChange } = props;
-  const fieldNames = useFieldNames(props);
-  const [visible, setVisible] = useState(false);
-  const fieldSchema = useFieldSchema();
-  const collectionField = useAssociation(props);
-  const compile = useCompile();
-  const options = (Array.isArray(value) ? value : value ? [value] : []).map(option => {
-    const label = option[fieldNames.label];
-    return {
-      ...option,
-      [fieldNames.label]: compile(label),
-    };
-  });
-  const [selectedRows, setSelectedRows] = useState(options);
-  const values = options?.map((option) => option[fieldNames.value]);
-  return (
-    <div>
-      <Select
-        size={props.size}
-        mode={multiple ? 'multiple' : props.mode}
-        fieldNames={fieldNames}
-        onDropdownVisibleChange={(open) => {
-          setVisible(true);
-        }}
-        allowClear
-        onChange={(changed: any) => {
-          if (!changed) {
-            onChange(null);
-            setSelectedRows([]);
-          } else if (!changed?.length) {
-            onChange(null);
-            setSelectedRows([]);
-          } else if (Array.isArray(changed)) {
-            const values = options?.filter((option) => changed.includes(option[fieldNames.value]));
-            onChange(values);
-            setSelectedRows(values);
-          }
-        }}
-        options={options}
-        value={multiple ? values : values?.[0]}
-        open={false}
-      />
-      <RecordPickerContext.Provider value={{ multiple, onChange, selectedRows, setSelectedRows }}>
-        <CollectionProvider allowNull name={collectionField?.target}>
-          <ActionContext.Provider value={{ openMode: 'drawer', visible, setVisible }}>
-            <FormProvider>
-              <SchemaComponentOptions scope={{ useTableSelectorProps, usePickActionProps }}>
-                <RecursionField schema={fieldSchema} onlyRenderProperties />
-              </SchemaComponentOptions>
-            </FormProvider>
-          </ActionContext.Provider>
-        </CollectionProvider>
-      </RecordPickerContext.Provider>
-    </div>
-  );
-};

package/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx

@@ -1,54 +0,0 @@
-import { Field } from '@formily/core';
-import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
-import { toArr } from '@formily/shared';
-import { Space } from 'antd';
-import React, { useState } from 'react';
-import { BlockAssociationContext } from '../../../block-provider';
-import { CollectionProvider, useCollection } from '../../../collection-manager';
-import { RecordProvider } from '../../../record-provider';
-import { FormProvider } from '../../core';
-import { ActionContext } from '../action';
-import { useFieldNames } from './useFieldNames';
-
-export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
-  const fieldSchema = useFieldSchema();
-  const field = useField<Field>();
-  const fieldNames = useFieldNames(props);
-  const [visible, setVisible] = useState(false);
-  const { getField } = useCollection();
-  const collectionField = getField(fieldSchema.name);
-  const [record, setRecord] = useState({});
-  return collectionField ? (
-    <div>
-      <BlockAssociationContext.Provider value={`${collectionField.collectionName}.${collectionField.name}`}>
-        <CollectionProvider name={collectionField.target}>
-          <Space size={0} split={<span style={{ marginRight: 4, color: '#aaa' }}>, </span>}>
-            {toArr(field.value).map((record, index) => {
-              return (
-                <span>
-                  <a
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      setVisible(true);
-                      setRecord(record);
-                    }}
-                  >
-                    {record?.[fieldNames?.label || 'label']}
-                  </a>
-                </span>
-              );
-            })}
-          </Space>
-          <ActionContext.Provider value={{ visible, setVisible, openMode: 'drawer' }}>
-            <RecordProvider record={record}>
-              <FormProvider>
-                <RecursionField schema={fieldSchema} onlyRenderProperties />
-              </FormProvider>
-            </RecordProvider>
-          </ActionContext.Provider>
-        </CollectionProvider>
-      </BlockAssociationContext.Provider>
-    </div>
-  ) : null;
-});

package/src/schema-component/antd/record-picker/RecordPicker.tsx

@@ -1,9 +0,0 @@
-import { connect, mapReadPretty } from '@formily/react';
-import { InputRecordPicker } from './InputRecordPicker';
-import { ReadPrettyRecordPicker } from './ReadPrettyRecordPicker';
-
-export const RecordPicker: any = connect(
-  InputRecordPicker,
-  // mapProps(mapSuffixProps),
-  mapReadPretty(ReadPrettyRecordPicker),
-);