Skip to main content

Edit Organization Block

EditOrganization is a controlled organization-edit form block built on MUI, with nested sections for company display assets, address, company details, and submit actions.

Installationโ€‹

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

What You Needโ€‹

ItemWhy it matters
dataControlled form state. The stock shape includes address, company, industry, overview, establishment date, and optional icon / logo media values.
onDataChangeReceives the next data snapshot plus metadata for the changed field path (meta.name), latest value (meta.value), cause (meta.cause), and optional event (meta.event).
errors (optional)Field-level validation keyed by bracket-notation paths.
companyName (optional)Display-only company name shown in Form.CompanyDisplay.CompanyName (not part of data).
labels / placeholders / selectOptions (optional)Root copy and select option overrides for the default fields.
onSearchAddressClick (optional)Enables the postal-code search button in CompanyAddress.PostCode.
dateFormat / dateLuxon / locale (optional)Control establishment-date display format, storage parsing, and MUI date-picker locale.
iconFns / logoFns / uploadGuidelinesText (optional)Optional image action callbacks and upload guideline copy for the company display section.
children (optional)Use compound sections or a block override function.
Controlled component

EditOrganization does not own form state. Keep data in your app and pass updates back through onDataChange. data.icon and data.logo can be File, { url, type?, id? }, or null. Establishment dates are stored as yyyy-MM-dd strings by default.

Code Examplesโ€‹

Live Editor
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();
      }}
    />
  );
}
Result
Loading...

Important Propsโ€‹

Core Propsโ€‹

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-Controlled form data. Default fields bind to the company address/information UI; icon / logo accept File, { url, type?, id? }, or null.
onDataChange(data, meta) => voidYes-Called on updates; meta includes name, value, cause (input, change, blur, clear, reset, programmatic), and optional event.
errors{ [fieldPath: string]: string | string[] }No-Field errors keyed by bracket-notation data paths.
onSearchAddressClickMouseEventHandler<HTMLButtonElement>No-Enables the postal-code search button in CompanyAddress.PostCode.
companyNamestringNo-Display-only name for CompanyDisplay.CompanyName.
iconFns / logoFns{ onAddImage?, onChangeImage?, onDeleteImage? }No-Optional callbacks for icon/logo add, change, and delete actions.
dateLuxon{ parseDateStringToDateTime; formatDateTimeToString }NoStrict yyyy-MM-dd parsersCustom storage parse/format helpers for establishmentDate.
dateFormatstringNo'yyyy/MM/dd'Luxon display format merged onto EstablishmentDate.
localestringNo'en-US'Passed to MUI LocalizationProvider as adapterLocale.

Content Propsโ€‹

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-Copy overrides for titles, field labels, image actions, and the submit button.
placeholders{ postcode?; prefecture?; city?; townAddress?; representativeContact?; homePageUrl?; companyCapital?; companySize?; representativePersonName?; industryCategory?; industry?; companyOverview?; businessDescription? }No-Placeholder text for text and select fields.
selectOptions{ prefecture?; industryCategory?; industry? }NoBuilt-in English prefecture / industry listsDropdown options for the select fields.
uploadGuidelinesTextReactNodeNo-Body content for CompanyDisplay.UploadGuidelines.

Layout and Composition Propsโ€‹

PropTypeRequiredDefaultDescription
componentStackProps<'form'>['component']No'form'Root container element.
childrenReactNode or block override functionNo-Pass JSX children for compound components, or a function to override blocks.
classNamestringNo-Additional class name on the root container.
sxStackProps<'form'>['sx']No-MUI sx styling for the root container.

Inherits StackProps<'form'> props except children. The root renders title and form by default. Form then composes CompanyDisplay, CompanyInformation, and SubmitButton.

Default UI Blocksโ€‹

BlockBuilt onNotes
EditOrganization (root)Stack + LocalizationProviderRoot provider and form shell with responsive padding. Defaults to component="form".
TitleTypographyCentered h4/h2. Defaults to Edit Organization.
FormStackGroups company display, company information, and submit.
Form.CompanyDisplayStackCompany name, icon, logo, and upload guidelines.
Form.CompanyDisplay.CompanyNameStack + TypographyShows root companyName. Defaults to label Company Name.
Form.CompanyDisplay.CompanyIconStack + Box + Button + DividerBound to icon. Defaults to label Icon, empty state No image, actions Add / Change / Delete.
Form.CompanyDisplay.CompanyLogoStack + Box + Button + DividerBound to logo. Defaults to label Logo, empty state No image, actions Add / Change / Delete.
Form.CompanyDisplay.UploadGuidelinesStack + TypographyRenders root uploadGuidelinesText.
Form.CompanyInformationStackAddress, capital, size, industry, overview, dates, and representative name.
Form.CompanyInformation.CompanyAddressStackNested address section.
Form.CompanyInformation.CompanyAddress.LocationTitleTypographyDefaults to Head Office Location.
Form.CompanyInformation.CompanyAddress.PostCodeStack + TextField + Buttonname="postcode". Defaults to label Post Code, placeholder Enter the post code, search button Search Address when onSearchAddressClick is set.
Form.CompanyInformation.CompanyAddress.PrefectureTextFieldname="prefecture". Defaults to label Prefecture, placeholder Select the prefecture, English prefecture options.
Form.CompanyInformation.CompanyAddress.CityTextFieldname="cityTownVillage". Defaults to label City, placeholder Enter the city.
Form.CompanyInformation.CompanyAddress.TownAddressTextFieldname="townStreetBuilding". Defaults to label Address, placeholder Enter the town, street, and building number.
Form.CompanyInformation.CompanyAddress.RepresentativeContactTextFieldname="representativePhoneNumber". Defaults to label Representative Phone Number, placeholder Enter the phone number of a representative.
Form.CompanyInformation.CompanyCapitalStack + TextField + Typographyname="capital". Defaults to label Capital, placeholder Enter the company's capital, suffix ๅ††.
Form.CompanyInformation.CompanySizeStack + TextField + Typographyname="numberOfEmployees". Defaults to label Number of Employees, placeholder Enter the company's number of employees, suffix ไบบ.
Form.CompanyInformation.IndustryCategoryTextFieldname="industryCategory". Defaults to label Industry Category, placeholder Select the category.
Form.CompanyInformation.IndustryTextFieldname="industry". Defaults to label Industry, placeholder Select the industry.
Form.CompanyInformation.HomePageUrlTextFieldname="companyUrl". Defaults to label Home Page URL, placeholder Enter the company's home page URL.
Form.CompanyInformation.CompanyOverviewTextFieldMultiline name="companyOverview". Defaults to label Company Overview.
Form.CompanyInformation.BusinessDescriptionTextFieldMultiline name="businessDescription". Defaults to label Business Description.
Form.CompanyInformation.EstablishmentDateDatePickername="establishmentDate". Defaults to label Establishment Date, display format yyyy/MM/dd, stored value yyyy-MM-dd.
Form.CompanyInformation.RepresentativePersonNameTextFieldname="representativePersonName". Defaults to label Representative Name.
Form.SubmitButtonButtonvariant="contained", size="large", type="submit". Defaults to Submit.

TypeScriptโ€‹

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

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