amis 1.9.1-beta.0 → 1.9.1-beta.4

package/src/components/calendar/TimeView.tsx

@@ -55,7 +55,7 @@ interface CustomTimeViewState {
   [propName: string]: any;
 }
 
-type TimeScale = 'hours' | 'minutes' | 'seconds' | 'milliseconds';
+export type TimeScale = 'hours' | 'minutes' | 'seconds' | 'milliseconds';
 
 export class CustomTimeView extends React.Component<
   CustomTimeViewProps & LocaleProps,
@@ -547,11 +547,15 @@ export class CustomTimeView extends React.Component<
   };
 
   scrollToTop = (type: TimeScale, value: number, i: number, label?: string) => {
-    let elf: any = document.getElementById(
+    const elf: any = document.getElementById(
       `${this.state.uniqueTag}-${i}-input`
     );
-    elf.parentNode.scrollTo({
-      top: value * 28,
+    const {min, step} = this.timeConstraints[type];
+    const offset = (value - min) / step;
+    const height = 28; /** 单个选项的高度 */
+
+    elf?.parentNode?.scrollTo({
+      top: offset * height,
       behavior: label === 'init' ? 'auto' : 'smooth'
     });
   };
@@ -664,8 +668,9 @@ export class CustomTimeView extends React.Component<
                         <div
                           key={option.value}
                           className={cx('CalendarInput-sugsItem', {
-                            'is-highlight':
-                              option.value === date.format(formatMap[type])
+                            'is-highlight': selectedDate
+                              ? option.value === date.format(formatMap[type])
+                              : option.value === options?.[0]?.value
                           })}
                           onClick={() => {
                             this.setTime(type, parseInt(option.value, 10));

package/src/components/formula/Picker.tsx

@@ -275,6 +275,7 @@ export class FormulaPicker extends React.Component<
       variables,
       functions,
       children,
+      variableMode,
       ...rest
     } = this.props;
     const {isOpened, value, editorValue, isError} = this.state;
@@ -377,7 +378,7 @@ export class FormulaPicker extends React.Component<
               {...rest}
               variables={this.state.variables ?? variables}
               functions={this.state.functions ?? functions}
-              variableMode={this.state.variableMode}
+              variableMode={this.state.variableMode ?? variableMode}
               value={editorValue}
               onChange={this.handleEditorChange}
             />

package/src/components/icons.tsx

@@ -84,6 +84,11 @@ import FunctionIcon from '../icons/function.svg';
 import InputClearIcon from '../icons/input-clear.svg';
 import SliderHandleIcon from '../icons/slider-handle-icon.svg';
 import TrashIcon from '../icons/trash.svg';
+import MenuIcon from '../icons/menu.svg';
+import UserRemove from '../icons/user-remove.svg';
+import Role from '../icons/role.svg';
+import Department from '../icons/department.svg';
+import Post from '../icons/post.svg';
 import DotIcon from '../icons/dot.svg';
 
 // 兼容原来的用法，后续不直接试用。
@@ -195,6 +200,11 @@ registerIcon('cloud-upload', CloudUploadIcon);
 registerIcon('image', ImageIcon);
 registerIcon('refresh', RefreshIcon);
 registerIcon('trash', TrashIcon);
+registerIcon('menu', MenuIcon);
+registerIcon('user-remove', UserRemove);
+registerIcon('role', Role);
+registerIcon('department', Department);
+registerIcon('post', Post);
 registerIcon('dot', DotIcon);
 
 export function Icon({
@@ -227,11 +237,17 @@ export {
   MuteIcon,
   PlayIcon,
   PauseIcon,
+  ReloadIcon,
   LeftArrowIcon,
   RightArrowIcon,
   CheckIcon,
   PlusIcon,
   MinusIcon,
   PencilIcon,
-  FunctionIcon
+  FunctionIcon,
+  MenuIcon,
+  UserRemove,
+  Role,
+  Department,
+  Post
 };

package/src/components/index.tsx

@@ -62,6 +62,7 @@ import Table from './table';
 import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
 import SchemaVariableList from './schema-editor/SchemaVariableList';
 import FormulaPicker from './formula/Picker';
+import InputJSONSchema from './json-schema';
 
 export {
   NotFound,
@@ -127,5 +128,6 @@ export {
   Table,
   SchemaVariableListPicker,
   SchemaVariableList,
-  FormulaPicker
+  FormulaPicker,
+  InputJSONSchema
 };

package/src/components/json-schema/Array.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import {guid} from '../../utils/helper';
+import Button from '../Button';
+import {Icon} from '../icons';
+import type {InputJSONSchemaItemProps} from './index';
+import {InputJSONSchemaItem} from './Item';
+
+type JSONSchemaArrayMember = {
+  key: string;
+  index: number;
+  schema?: any;
+  invalid?: boolean;
+};
+export function InputJSONSchemaArray(props: InputJSONSchemaItemProps) {
+  const {
+    classnames: cx,
+    value,
+    onChange,
+    disabled,
+    translate: __,
+    collapsable,
+    renderValue
+  } = props;
+  const buildMembers = React.useCallback((schema: any, value) => {
+    const members: Array<JSONSchemaArrayMember> = [];
+
+    let len = Array.isArray(value) ? value.length : 1;
+
+    if (typeof schema.minContains === 'number') {
+      len = Math.max(len, schema.minContains);
+    }
+
+    const maxContains =
+      typeof schema.maxContains === 'number' ? schema.maxContains : 0;
+
+    while (len--) {
+      members.push({
+        key: guid(),
+        index: members.length,
+        schema: schema.items,
+        invalid: maxContains ? maxContains < members.length : false
+      });
+    }
+
+    return members;
+  }, []);
+
+  const [members, setMembers] = React.useState<Array<JSONSchemaArrayMember>>(
+    buildMembers(props.schema, value)
+  );
+
+  const membersRef = React.useRef(members);
+  membersRef.current = members;
+
+  const [collapsed, setCollapsed] = React.useState<boolean>(
+    collapsable ? true : false
+  );
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const onMemberChange = (member: JSONSchemaArrayMember, memberValue: any) => {
+    const newValue = Array.isArray(props.value) ? props.value.concat() : [];
+    newValue[member.index] = memberValue;
+    onChange?.(newValue);
+  };
+  const onMemberDelete = (member: JSONSchemaArrayMember) => {
+    const idx = members.indexOf(member);
+    if (!~idx) {
+      throw new Error('member object not found');
+    }
+
+    const m = members.concat();
+    m.splice(idx, 1);
+    setMembers(m);
+
+    const newValue = Array.isArray(props.value) ? props.value.concat() : [];
+    newValue.splice(member.index, 1);
+    onChange?.(newValue);
+  };
+
+  React.useEffect(() => {
+    setMembers(buildMembers(props.schema, props.value));
+  }, [JSON.stringify(props.schema)]);
+
+  React.useEffect(() => {
+    const value = props.value;
+    const schema = props.schema;
+    let len = Array.isArray(value) ? value.length : 1;
+
+    if (typeof schema.minContains === 'number') {
+      len = Math.max(len, schema.minContains);
+    }
+
+    if (typeof schema.maxContains === 'number') {
+      len = Math.min(schema.maxContains, len);
+    }
+    const m = membersRef.current!.concat();
+
+    if (m.length !== len) {
+      while (m.length !== len) {
+        if (m.length > len) {
+          m.pop();
+        } else {
+          m.push({
+            key: guid(),
+            index: m.length,
+            schema: schema.items
+          });
+        }
+      }
+      setMembers(m);
+    }
+  }, [JSON.stringify(props.value)]);
+
+  const handleAdd = React.useCallback(() => {
+    const m = members.concat();
+    m.push({
+      key: guid(),
+      index: members.length,
+      schema: props.schema.items,
+      invalid: false
+    });
+    setMembers(m);
+  }, [members]);
+
+  const maxContains =
+    typeof props.schema?.maxContains === 'number'
+      ? props.schema.maxContains
+      : 0;
+
+  const minContains =
+    typeof props.schema?.minContains === 'number'
+      ? props.schema.minContains
+      : 0;
+
+  // todo additionalProperties 还有其他格式
+  const allowAdd = !maxContains || maxContains > members.length;
+  const allowDelete = !minContains || minContains < members.length;
+
+  return (
+    <>
+      {collapsable ? (
+        <a
+          className={cx('JSONSchemaObject-caret', {
+            'is-collapsed': collapsed
+          })}
+          onClick={toggleCollapsed}
+        >
+          <Icon icon="caret" className="icon" />
+        </a>
+      ) : null}
+
+      <div
+        className={cx('JSONSchemaObject', {
+          'is-expanded': collapsable && !collapsed
+        })}
+      >
+        {collapsed ? (
+          renderValue ? (
+            <InputJSONSchemaItem
+              {...props}
+              value={value}
+              onChange={onChange}
+              schema={{
+                type: 'string'
+              }}
+              placeholder={props.schema?.description}
+            />
+          ) : null
+        ) : (
+          members.map(member => {
+            return (
+              <div key={member.key} className={cx('JSONSchemaMember')}>
+                <div className={cx('JSONSchemaMember-value')}>
+                  <InputJSONSchemaItem
+                    {...props}
+                    value={value?.[member.index]}
+                    onChange={onMemberChange.bind(null, member)}
+                    schema={
+                      member.schema || {
+                        type: 'string'
+                      }
+                    }
+                    collapsable
+                  />
+                </div>
+                {allowDelete ? (
+                  <Button
+                    className={cx('SchemaEditor-btn')}
+                    onClick={onMemberDelete.bind(null, member)}
+                    iconOnly
+                    disabled={disabled || !!value?.$ref}
+                  >
+                    <Icon icon="remove" className="icon" />
+                  </Button>
+                ) : null}
+              </div>
+            );
+          })
+        )}
+
+        {!collapsed ? (
+          <Button
+            level="link"
+            onClick={handleAdd}
+            size="xs"
+            disabled={disabled || !allowAdd}
+          >
+            {__('JSONSchema.add_prop')}
+          </Button>
+        ) : null}
+      </div>
+    </>
+  );
+}

package/src/components/json-schema/Item.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import InputBox from '../InputBox';
+import NumberInput from '../NumberInput';
+import Switch from '../Switch';
+import {InputJSONSchemaArray} from './Array';
+import type {InputJSONSchemaItemProps} from './index';
+import {InputJSONSchemaObject} from './Object';
+
+export function InputJSONSchemaItem(props: InputJSONSchemaItemProps) {
+  const schema = props.schema;
+  if (schema.type === 'object') {
+    return <InputJSONSchemaObject {...props} />;
+  } else if (schema.type === 'array') {
+    return <InputJSONSchemaArray {...props} />;
+  } else if (props.renderValue) {
+    return props.renderValue(props.value, props.onChange, schema, props);
+  } else if (schema.type == 'number') {
+    return (
+      <NumberInput
+        value={props.value}
+        onChange={props.onChange}
+        placeholder={props.placeholder}
+      />
+    );
+  } else if (schema.type == 'integer') {
+    return (
+      <NumberInput
+        value={props.value}
+        onChange={props.onChange}
+        precision={0}
+        placeholder={props.placeholder}
+      />
+    );
+  } else if (schema.type == 'boolean') {
+    return (
+      <Switch value={props.value} onChange={props.onChange} className="mt-2" />
+    );
+  }
+
+  return (
+    <InputBox
+      value={props.value}
+      onChange={props.onChange}
+      placeholder={props.placeholder}
+    />
+  );
+}