TypedVariableInput

TypedVariableInput は、フィールドで定数と変数の両方を受け付けるためのコンポーネントです。

基本的な使い方

import React from 'react';
import { Application, Plugin, TypedVariableInput } from '@nocobase/client-v2';
import { Form } from 'antd';

function DemoPage() {
  return (
    <Form
      layout="vertical"
      style={{ maxWidth: 420 }}
      initialValues={{ port: 465, secure: true }}
    >
      <Form.Item name="port" label="Port">
        <TypedVariableInput
          types={[['number', { min: 1, max: 65535, step: 1 }]]}
          namespaces={['$env']}
        />
      </Form.Item>
      <Form.Item name="secure" label="Secure">
        <TypedVariableInput types={['boolean']} namespaces={['$env']} />
      </Form.Item>
    </Form>
  );
}

class DemoPlugin extends Plugin {
  async load() {
    this.flowEngine.context.defineProperty('$env', {
      value: { SMTP_PORT: '465', SMTP_SECURE: 'true' },
      meta: {
        title: 'Environment variables',
        type: 'object',
        properties: {
          SMTP_PORT: { title: 'SMTP_PORT', type: 'string' },
          SMTP_SECURE: { title: 'SMTP_SECURE', type: 'string' },
        },
      },
    });

    this.router.add('root', {
      path: '/',
      element: <DemoPage />,
    });
  }
}

const app = new Application({
  router: { type: 'memory', initialEntries: ['/'] },
  plugins: [DemoPlugin],
});

export default app.getRootComponent();

API

パラメータ	型	説明
`value`	`unknown`	現在の値
`onChange`	`(next: unknown) => void`	値変更時のコールバック
`types`	`TypedConstantSpec[]`	許可する定数型
`namespaces`	`string[]`	選択できるトップレベル変数 namespace
`extraNodes`	`MetaTreeNode[]`	追加のローカル変数ノード
`nullable`	`boolean`	null を許可するかどうか
`delimiters`	`[string, string]`	変数の区切り文字
`disabled`	`boolean`	無効化するかどうか
`placeholder`	`string`	プレースホルダー文字列
`style`	`React.CSSProperties`	カスタムスタイル
`className`	`string`	カスタム className

#TypedVariableInput

#基本的な使い方

#API

TypedVariableInput

基本的な使い方

API