@cozeloop/components 0.0.3 → 0.0.4

package/src/semi-schema-form/components/widgets/checkbox.tsx

@@ -1,67 +0,0 @@
-import React, { type FocusEvent } from 'react';
-
-import {
-  ariaDescribedByIds,
-  // labelValue,
-  type FormContextType,
-  type RJSFSchema,
-  type StrictRJSFSchema,
-  type WidgetProps,
-  type GenericObjectType,
-} from '@rjsf/utils';
-import { Checkbox, type CheckboxProps } from '@coze-arch/coze-design';
-
-/** The `CheckBoxWidget` is a widget for rendering boolean properties.
- *  It is typically used to represent a boolean.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function CheckboxWidget<
-  T = unknown,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = object,
->(props: WidgetProps<T, S, F>) {
-  const {
-    autofocus,
-    disabled,
-    formContext,
-    id,
-    // label,
-    // hideLabel,
-    onBlur,
-    onChange,
-    onFocus,
-    readonly,
-    value,
-  } = props;
-  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-
-  const handleChange: CheckboxProps['onChange'] = ({ target }) =>
-    onChange(target.checked);
-
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, target && target.checked);
-
-  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, target && target.checked);
-
-  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
-  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
-  const extraProps = {
-    onBlur: !readonly ? handleBlur : undefined,
-    onFocus: !readonly ? handleFocus : undefined,
-  };
-  return (
-    <Checkbox
-      autoFocus={autofocus}
-      checked={typeof value === 'undefined' ? false : value}
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      onChange={!readonly ? handleChange : undefined}
-      {...extraProps}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-    >
-      {/* {labelValue(label, hideLabel, '')} */}
-    </Checkbox>
-  );
-}

package/src/semi-schema-form/components/widgets/checkboxs.tsx

@@ -1,100 +0,0 @@
-import React, { type FocusEvent } from 'react';
-
-import {
-  ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
-  optionId,
-  type FormContextType,
-  type WidgetProps,
-  type RJSFSchema,
-  type StrictRJSFSchema,
-  type GenericObjectType,
-} from '@rjsf/utils';
-import { Checkbox, type CheckboxGroupProps } from '@coze-arch/coze-design';
-
-/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
- *  It is typically used to represent an array of enums.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function CheckboxesWidget<
-  T = unknown,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = object,
->({
-  autofocus,
-  disabled,
-  formContext,
-  id,
-  onBlur,
-  onChange,
-  onFocus,
-  options,
-  readonly,
-  value,
-}: WidgetProps<T, S, F>) {
-  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-
-  const { enumOptions, enumDisabled, inline, emptyValue } = options;
-
-  const handleChange: CheckboxGroupProps['onChange'] = nextValue =>
-    onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
-
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(
-      id,
-      enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue),
-    );
-
-  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(
-      id,
-      enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue),
-    );
-
-  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
-  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
-  const extraProps = {
-    id,
-    onBlur: !readonly ? handleBlur : undefined,
-    onFocus: !readonly ? handleFocus : undefined,
-  };
-
-  const selectedIndexes = enumOptionsIndexForValue<S>(
-    value,
-    enumOptions,
-    true,
-  ) as string[];
-
-  return Array.isArray(enumOptions) && enumOptions.length > 0 ? (
-    <>
-      <Checkbox.Group
-        disabled={disabled || (readonlyAsDisabled && readonly)}
-        name={id}
-        onChange={!readonly ? handleChange : undefined}
-        value={selectedIndexes}
-        {...extraProps}
-        aria-describedby={ariaDescribedByIds<T>(id)}
-      >
-        {Array.isArray(enumOptions) &&
-          enumOptions.map((option, i) => (
-            <span key={i}>
-              <Checkbox
-                id={optionId(id, i)}
-                autoFocus={i === 0 ? autofocus : false}
-                disabled={
-                  Array.isArray(enumDisabled) &&
-                  enumDisabled.indexOf(option.value) !== -1
-                }
-                value={String(i)}
-              >
-                {option.label}
-              </Checkbox>
-              {!inline && <br />}
-            </span>
-          ))}
-      </Checkbox.Group>
-    </>
-  ) : null;
-}

package/src/semi-schema-form/components/widgets/index.ts

@@ -1,17 +0,0 @@
-import { type RegistryWidgetsType } from '@rjsf/utils';
-
-import TextAreaWidget from './textarea';
-import SelectWidget from './select';
-import RangeWidget from './range';
-import RadioWidget from './radio';
-import CheckboxesWidget from './checkboxs';
-import CheckboxWidget from './checkbox';
-
-export const widgets: RegistryWidgetsType = {
-  TextAreaWidget,
-  SelectWidget,
-  CheckboxWidget,
-  CheckboxesWidget,
-  RadioWidget,
-  RangeWidget,
-};

package/src/semi-schema-form/components/widgets/radio.tsx

@@ -1,105 +0,0 @@
-import React, { type FocusEvent } from 'react';
-
-import {
-  ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
-  type FormContextType,
-  type GenericObjectType,
-  type RJSFSchema,
-  type StrictRJSFSchema,
-  type WidgetProps,
-} from '@rjsf/utils';
-import { Radio, type RadioGroupProps } from '@coze-arch/coze-design';
-
-/** The `RadioWidget` is a widget for rendering a radio group.
- *  It is typically used with a string property constrained with enum options.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function RadioWidget<
-  T = unknown,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = object,
->({
-  autofocus,
-  disabled,
-  formContext,
-  id,
-  onBlur,
-  onChange,
-  onFocus,
-  options,
-  readonly,
-  value,
-}: WidgetProps<T, S, F>) {
-  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-
-  const { enumOptions, enumDisabled, emptyValue } = options;
-
-  const handleChange: RadioGroupProps['onChange'] = ({
-    target: { value: nextValue },
-  }) =>
-    onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
-
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(
-      id,
-      enumOptionsValueForIndex<S>(
-        target && target.value,
-        enumOptions,
-        emptyValue,
-      ),
-    );
-
-  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(
-      id,
-      enumOptionsValueForIndex<S>(
-        target && target.value,
-        enumOptions,
-        emptyValue,
-      ),
-    );
-
-  const selectedIndexes = enumOptionsIndexForValue<S>(
-    value,
-    enumOptions,
-  ) as string;
-
-  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
-  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
-  const extraProps = {
-    onBlur: !readonly ? handleBlur : undefined,
-    onFocus: !readonly ? handleFocus : undefined,
-  };
-
-  return (
-    <Radio.Group
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      name={id}
-      onChange={!readonly ? handleChange : undefined}
-      {...extraProps}
-      value={selectedIndexes}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-    >
-      {Array.isArray(enumOptions) &&
-        enumOptions.map((option, i) => (
-          <Radio
-            name={id}
-            autoFocus={i === 0 ? autofocus : false}
-            disabled={
-              disabled ||
-              (Array.isArray(enumDisabled) &&
-                enumDisabled.indexOf(option.value) !== -1)
-            }
-            key={i}
-            value={String(i)}
-          >
-            {option.label}
-          </Radio>
-        ))}
-    </Radio.Group>
-  );
-}

package/src/semi-schema-form/components/widgets/range.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import {
-  ariaDescribedByIds,
-  rangeSpec,
-  type FormContextType,
-  type RJSFSchema,
-  type StrictRJSFSchema,
-  type WidgetProps,
-  type GenericObjectType,
-} from '@rjsf/utils';
-import { Slider, type SliderProps } from '@coze-arch/coze-design';
-
-/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
- * in a div, with the value along side it.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function RangeWidget<
-  T = unknown,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = object,
->(props: WidgetProps<T, S, F>) {
-  const {
-    autofocus,
-    disabled,
-    formContext,
-    id,
-    onBlur,
-    onChange,
-    onFocus,
-    options,
-    placeholder,
-    readonly,
-    schema,
-    value,
-  } = props;
-  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-
-  const { min, max, step } = rangeSpec(schema);
-
-  const emptyValue = options.emptyValue || '';
-
-  const handleChange: SliderProps['onChange'] = nextValue =>
-    onChange(typeof nextValue === 'undefined' ? emptyValue : nextValue);
-
-  const handleBlur = () => onBlur(id, value);
-
-  const handleFocus = () => onFocus(id, value);
-
-  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
-  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
-  const extraProps = {
-    placeholder,
-    onBlur: !readonly ? handleBlur : undefined,
-    onFocus: !readonly ? handleFocus : undefined,
-  };
-
-  return (
-    <Slider
-      autoFocus={autofocus}
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      max={max}
-      min={min}
-      onChange={!readonly ? handleChange : undefined}
-      range={false}
-      step={step}
-      value={value}
-      {...extraProps}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-    />
-  );
-}

package/src/semi-schema-form/components/widgets/select.tsx

@@ -1,108 +0,0 @@
-import React, { useMemo } from 'react';
-
-import {
-  ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
-  type FormContextType,
-  type GenericObjectType,
-  type RJSFSchema,
-  type StrictRJSFSchema,
-  type WidgetProps,
-} from '@rjsf/utils';
-import {
-  type SelectProps,
-  type OptionProps,
-  Select,
-} from '@coze-arch/coze-design';
-
-const SELECT_STYLE = {
-  width: '100%',
-};
-
-/** The `SelectWidget` is a widget for rendering dropdowns.
- *  It is typically used with string properties constrained with enum options.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function SelectWidget<
-  T = unknown,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = object,
->({
-  autofocus,
-  disabled,
-  formContext = {} as unknown as F,
-  id,
-  multiple,
-  onBlur,
-  onChange,
-  onFocus,
-  options,
-  placeholder,
-  readonly,
-  value,
-}: WidgetProps<T, S, F>) {
-  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-
-  const { enumOptions, enumDisabled, emptyValue } = options;
-
-  const handleChange: SelectProps['onChange'] = nextValue => {
-    if (typeof nextValue === 'object' && !Array.isArray(nextValue)) {
-      throw new Error('Object type value is not supported');
-    } else {
-      onChange(
-        typeof nextValue === 'undefined'
-          ? undefined
-          : enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue),
-      );
-    }
-  };
-
-  const handleBlur = () =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-
-  const handleFocus = () =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
-
-  const selectedIndexes = enumOptionsIndexForValue<S>(
-    value,
-    enumOptions,
-    multiple,
-  );
-
-  const selectOptions: OptionProps[] | undefined = useMemo(() => {
-    if (Array.isArray(enumOptions)) {
-      const opts: OptionProps[] = enumOptions.map(
-        ({ value: optionValue, label: optionLabel }, index) => ({
-          disabled:
-            Array.isArray(enumDisabled) &&
-            enumDisabled.indexOf(optionValue) !== -1,
-          key: String(index),
-          value: String(index),
-          label: optionLabel,
-        }),
-      );
-
-      return opts;
-    }
-    return undefined;
-  }, [enumDisabled, enumOptions]);
-
-  return (
-    <Select
-      autoFocus={autofocus}
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      multiple={multiple}
-      onBlur={!readonly ? handleBlur : undefined}
-      onChange={!readonly ? handleChange : undefined}
-      onFocus={!readonly ? handleFocus : undefined}
-      placeholder={placeholder}
-      style={SELECT_STYLE}
-      value={selectedIndexes}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-      optionList={selectOptions}
-    />
-  );
-}

package/src/semi-schema-form/components/widgets/textarea.tsx

@@ -1,63 +0,0 @@
-import React, { type FocusEvent } from 'react';
-
-import {
-  ariaDescribedByIds,
-  type FormContextType,
-  type GenericObjectType,
-  type RJSFSchema,
-  type StrictRJSFSchema,
-  type WidgetProps,
-} from '@rjsf/utils';
-import { TextArea, type TextAreaProps } from '@coze-arch/coze-design';
-
-const INPUT_STYLE = {
-  width: '100%',
-};
-
-/** The `TextareaWidget` is a widget for rendering input fields as textarea.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function TextareaWidget<
-  T = unknown,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = object,
->({
-  disabled,
-  formContext,
-  id,
-  onBlur,
-  onChange,
-  onFocus,
-  options,
-  placeholder,
-  readonly,
-  value,
-}: WidgetProps<T, S, F>) {
-  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-
-  const handleChange: TextAreaProps['onChange'] = nextValue =>
-    onChange(nextValue === '' ? options.emptyValue : nextValue);
-
-  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) =>
-    onBlur(id, target && target.value);
-
-  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) =>
-    onFocus(id, target && target.value);
-
-  return (
-    <TextArea
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      name={id}
-      onBlur={!readonly ? handleBlur : undefined}
-      onChange={!readonly ? handleChange : undefined}
-      onFocus={!readonly ? handleFocus : undefined}
-      placeholder={placeholder}
-      rows={options.rows || 4}
-      style={INPUT_STYLE}
-      value={value}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-    />
-  );
-}

package/src/semi-schema-form/index.tsx

@@ -1,14 +0,0 @@
-import type Form from '@rjsf/core';
-import { withTheme } from '@rjsf/core';
-
-export { default as schemaValidators } from '@rjsf/validator-ajv8';
-
-import { widgets } from './components/widgets';
-import { templates } from './components/tmpls';
-
-export const SemiSchemaForm = withTheme({
-  widgets,
-  templates,
-});
-
-export type SemiSchemaFormInstance = Form;

package/src/sentinel-form/enum.ts

@@ -1,16 +0,0 @@
-export enum EventNames {
-  // 进入相关
-  INIT_LOOP_FORM = 'init_loop_form',
-  // 保点击保存，表单报错
-  LOOP_FORM_FIELD_VALIDATE_ERROR = 'loop_form_field_validate_error', // 表单项报错次数
-
-  // 点击保存，接口报错
-  LOOP_FORM_SUBMIT_INTERFACE_ERROR = 'loop_form_submit_interface_error', // 提交接口报错次数
-
-  // 点击保存，成功
-  LOOP_FORM_SUBMIT_SUCCESS = 'loop_form_submit_success', // 提交成功
-
-  // 离开表单
-  LOOP_FORM_FIELD_CHANGE_TIMELINE = 'loop_form_field_change_timeline', // 表单项变更时间轴
-  LOOP_FORM_CLOSE = 'loop_form_close', // 离开表单
-}