メインコンテンツまでスキップ

組織編集ブロック

EditOrganization は、MUI 上に構築された制御型の組織編集フォームブロックで、会社表示アセット、住所、会社詳細、送信アクションのためのネストされたセクションを備えています。

インストール​

npm install @nodeblocks/frontend-edit-organization-block@0.1.0

必要なもの​

項目理由
data制御されたフォーム状態。標準の形には住所、会社、業種、概要、設立日、任意の icon / logo メディア値が含まれます。
onDataChange変更されたフィールドパス（meta.name）、最新の値（meta.value）、原因（meta.cause）、任意のイベント（meta.event）に関するメタデータとともに、次のデータスナップショットを受け取ります。
errors (optional)ブラケット記法のパスをキーにしたフィールドレベルのバリデーション。
companyName (optional)Form.CompanyDisplay.CompanyName に表示する表示専用の会社名（data には含まれません）。
labels / placeholders / selectOptions (optional)デフォルトフィールドのルート文言とセレクトオプションの上書き。
onSearchAddressClick (optional)CompanyAddress.PostCode の郵便番号検索ボタンを有効にします。
dateFormat / dateLuxon / locale (optional)設立日の表示フォーマット、保存時のパース、MUI 日付ピッカーのロケールを制御します。
iconFns / logoFns / uploadGuidelinesText (optional)会社表示セクション用の任意の画像アクションコールバックとアップロードガイドライン文言。
children (optional)複合セクションまたはブロックのオーバーライド関数を使用します。
制御コンポーネント

EditOrganization はフォーム状態を所有しません。data はアプリ側で保持し、更新は onDataChange 経由で渡してください。data.icon と data.logo は File、{ url, type?, id? }、または null にできます。設立日はデフォルトで yyyy-MM-dd 文字列として保存されます。

コード例​

ライブエディター
function Example() {
  const defaultData = {
    postcode: '',
    cityTownVillage: '',
    townStreetBuilding: '',
    representativePhoneNumber: '',
    companyUrl: '',
    prefecture: '',
    capital: '',
    numberOfEmployees: '',
    representativePersonName: '',
    industryCategory: '',
    industry: '',
    companyOverview: '',
    businessDescription: '',
    establishmentDate: '',
    icon: null,
    logo: null,
  };

  const [data, setData] = React.useState(defaultData);

  return (
    <EditOrganization
      data={data}
      companyName="Sample Company Ltd."
      uploadGuidelinesText="Use a square PNG or JPEG icon and a wide horizontal logo. Max 5 MB per file."
      onDataChange={nextData => {
        setData(nextData);
      }}
      onSearchAddressClick={() => {
        setData(current => ({...current}));
      }}
      onSubmit={event => {
        event.preventDefault();
      }}
    />
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

PropTypeRequiredDefaultDescription
dataEditOrganizationFormData ({ applicationUserName?, applicationUserEmail?, applicationUserPhoneNumber?, postcode?, cityTownVillage?, townStreetBuilding?, representativePhoneNumber?, companyUrl?, prefecture?, capital?, numberOfEmployees?, industryCategory?, industry?, companyOverview?, businessDescription?, establishmentDate?, representativePersonName?, logo?, icon? } or extended Record<string, unknown>)Yes-制御されたフォームデータ。デフォルトフィールドは会社住所 / 情報 UI にバインドされ、icon / logo は File、{ url, type?, id? }、または null を受け付けます。
onDataChange(data, meta) => voidYes-更新時に呼び出されます。meta には name、value、cause（input、change、blur、clear、reset、programmatic）、任意の event が含まれます。
errors{ [fieldPath: string]: string | string[] }No-ブラケット記法のデータパスをキーにしたフィールドエラー。
onSearchAddressClickMouseEventHandler<HTMLButtonElement>No-CompanyAddress.PostCode の郵便番号検索ボタンを有効にします。
companyNamestringNo-CompanyDisplay.CompanyName 用の表示専用名。
iconFns / logoFns{ onAddImage?, onChangeImage?, onDeleteImage? }No-アイコン / ロゴの追加、変更、削除アクション用の任意コールバック。
dateLuxon{ parseDateStringToDateTime; formatDateTimeToString }NoStrict yyyy-MM-dd parsersestablishmentDate 用のカスタム保存パース / フォーマットヘルパー。
dateFormatstringNo'yyyy/MM/dd'EstablishmentDate にマージされる Luxon 表示フォーマット。
localestringNo'en-US'MUI LocalizationProvider の adapterLocale として渡されます。

コンテンツプロパティ​

PropTypeRequiredDefaultDescription
labels{ title?; companyName?; companyIcon?; companyIconNoImageLabel?; companyIconAddImageLabel?; companyIconChangeImageLabel?; companyIconDeleteImageLabel?; companyLogo?; companyLogoNoImageLabel?; companyLogoAddImageLabel?; companyLogoChangeImageLabel?; companyLogoDeleteImageLabel?; locationTitle?; postcode?; postcodeButton?; prefecture?; city?; townAddress?; representativeContact?; homePageUrl?; companyCapital?; companySize?; representativePersonName?; industryCategory?; industry?; companyOverview?; businessDescription?; establishmentDate?; submitButton? }No-タイトル、フィールドラベル、画像アクション、送信ボタンの文言上書き。
placeholders{ postcode?; prefecture?; city?; townAddress?; representativeContact?; homePageUrl?; companyCapital?; companySize?; representativePersonName?; industryCategory?; industry?; companyOverview?; businessDescription? }No-テキストフィールドとセレクトフィールドのプレースホルダーテキスト。
selectOptions{ prefecture?; industryCategory?; industry? }NoBuilt-in English prefecture / industry listsセレクトフィールド用のドロップダウンオプション。
uploadGuidelinesTextReactNodeNo-CompanyDisplay.UploadGuidelines の本文コンテンツ。

レイアウトと構成プロパティ​

PropTypeRequiredDefaultDescription
componentStackProps<'form'>['component']No'form'ルートコンテナ要素。
childrenReactNode or block override functionNo-複合コンポーネント用の JSX 子要素、またはブロックをオーバーライドする関数を渡します。
classNamestringNo-ルートコンテナの追加クラス名。
sxStackProps<'form'>['sx']No-ルートコンテナの MUI sx スタイリング。

children を除く StackProps<'form'> を継承します。ルートはデフォルトで title と form を描画します。Form は続けて CompanyDisplay、CompanyInformation、SubmitButton を構成します。

デフォルト UI ブロック​

BlockBuilt onNotes
EditOrganization (root)Stack + LocalizationProviderレスポンシブなパディング付きのルートプロバイダーとフォームシェル。デフォルトは component="form"。
TitleTypography中央揃えの h4/h2。デフォルト文言は Edit Organization。
FormStack会社表示、会社情報、送信をグループ化します。
Form.CompanyDisplayStack会社名、アイコン、ロゴ、アップロードガイドライン。
Form.CompanyDisplay.CompanyNameStack + Typographyルートの companyName を表示。デフォルトラベルは Company Name。
Form.CompanyDisplay.CompanyIconStack + Box + Button + Dividericon にバインド。デフォルトラベルは Icon、空状態は No image、アクションは Add / Change / Delete。
Form.CompanyDisplay.CompanyLogoStack + Box + Button + Dividerlogo にバインド。デフォルトラベルは Logo、空状態は No image、アクションは Add / Change / Delete。
Form.CompanyDisplay.UploadGuidelinesStack + Typographyルートの uploadGuidelinesText を描画。
Form.CompanyInformationStack住所、資本金、規模、業種、概要、日付、代表者名。
Form.CompanyInformation.CompanyAddressStackネストされた住所セクション。
Form.CompanyInformation.CompanyAddress.LocationTitleTypographyデフォルト文言は Head Office Location。
Form.CompanyInformation.CompanyAddress.PostCodeStack + TextField + Buttonname="postcode"。デフォルトラベルは Post Code、プレースホルダーは Enter the post code。onSearchAddressClick があるとき検索ボタンは Search Address。
Form.CompanyInformation.CompanyAddress.PrefectureTextFieldname="prefecture"。デフォルトラベルは Prefecture、プレースホルダーは Select the prefecture、英語の都道府県オプション。
Form.CompanyInformation.CompanyAddress.CityTextFieldname="cityTownVillage"。デフォルトラベルは City、プレースホルダーは Enter the city。
Form.CompanyInformation.CompanyAddress.TownAddressTextFieldname="townStreetBuilding"。デフォルトラベルは Address、プレースホルダーは Enter the town, street, and building number。
Form.CompanyInformation.CompanyAddress.RepresentativeContactTextFieldname="representativePhoneNumber"。デフォルトラベルは Representative Phone Number、プレースホルダーは Enter the phone number of a representative。
Form.CompanyInformation.CompanyCapitalStack + TextField + Typographyname="capital"。デフォルトラベルは Capital、プレースホルダーは Enter the company's capital、接尾辞は 円。
Form.CompanyInformation.CompanySizeStack + TextField + Typographyname="numberOfEmployees"。デフォルトラベルは Number of Employees、プレースホルダーは Enter the company's number of employees、接尾辞は 人。
Form.CompanyInformation.IndustryCategoryTextFieldname="industryCategory"。デフォルトラベルは Industry Category、プレースホルダーは Select the category。
Form.CompanyInformation.IndustryTextFieldname="industry"。デフォルトラベルは Industry、プレースホルダーは Select the industry。
Form.CompanyInformation.HomePageUrlTextFieldname="companyUrl"。デフォルトラベルは Home Page URL、プレースホルダーは Enter the company's home page URL。
Form.CompanyInformation.CompanyOverviewTextField複数行の name="companyOverview"。デフォルトラベルは Company Overview。
Form.CompanyInformation.BusinessDescriptionTextField複数行の name="businessDescription"。デフォルトラベルは Business Description。
Form.CompanyInformation.EstablishmentDateDatePickername="establishmentDate"。デフォルトラベルは Establishment Date、表示フォーマットは yyyy/MM/dd、保存値は yyyy-MM-dd。
Form.CompanyInformation.RepresentativePersonNameTextFieldname="representativePersonName"。デフォルトラベルは Representative Name。
Form.SubmitButtonButtonvariant="contained"、size="large"、type="submit"。デフォルト文言は Submit。

TypeScript​

import {EditOrganization, type EditOrganizationFormData} from '@nodeblocks/frontend-edit-organization-block';

type OrganizationEditData = EditOrganizationFormData & {
  internalNotes?: string;
};