dinocollab-core 1.0.0

package/src/form/create.date-expired.tsx

@@ -0,0 +1,195 @@
+import React, { Component } from 'react'
+import { LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { Switch, Typography, TextField, styled, Box, TextFieldProps } from '@mui/material'
+import { dayjsCustom, mergeObjects, tryParseIntRequired } from '../utils'
+import { IFormInputBase } from './types'
+import { getErrorMessage } from './helper'
+
+const defaultFormatString = 'MM-DD-YYYY'
+
+const dateExpiredClasses = {
+  root: 'DateExpired-root',
+  control: 'DateExpired-control',
+  label: 'DateExpired-label',
+  labelSwitch: 'DateExpired-labelSwitch',
+  input: 'DateExpired-input',
+  switch: 'DateExpired-switch'
+}
+
+interface ISlots<T> {
+  /** @default string */
+  type?: 'number' | 'string'
+  textFieldProps?: Partial<TextFieldProps>
+  switchChecked?: boolean
+  switchCheckedGetter?: (value: any, model?: Partial<T>) => boolean
+}
+
+interface IProps<T> extends IFormInputBase<T> {
+  slots?: ISlots<T>
+}
+
+interface IState {
+  numberOfDays: number
+  switchChecked: boolean
+}
+
+function CreateDateExpired<T>(params?: ISlots<T>): React.ComponentType<IProps<T>> {
+  class DateExpired extends Component<IProps<T>, IState> {
+    defaultNumberOfDays: number = 30
+    private id
+    constructor(props: IProps<T>) {
+      super(props)
+      this.state = {
+        numberOfDays: this.getNumberOfDays(),
+        switchChecked: this.slots.switchChecked
+      }
+      this.id = new Date().getTime().toString()
+    }
+
+    get slots(): ISlots<T> & { switchChecked: boolean } {
+      const { switchChecked, switchCheckedGetter } = this.props.slots ?? {}
+      const obj = mergeObjects(params, this.props.slots)
+      let check = (this.defaulValue ? !!this.defaulValue : switchChecked) ?? true
+      if (switchCheckedGetter) check = switchCheckedGetter(this.defaulValue, this.props.data)
+      return { ...obj, switchChecked: check }
+    }
+
+    get defaulValue(): string {
+      const { data, name } = this.props
+      return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)
+    }
+
+    get defaultValueInput(): string | number {
+      if (this.slots.type === 'number') {
+        return this.state.numberOfDays
+      } else {
+        return this.getOffsetDate(this.state.numberOfDays, 'YYYY-MM-DDTHH:mm:ss.sssZ')
+      }
+    }
+
+    getNumberOfDays = (): number => {
+      if (this.slots.type === 'number') {
+        return tryParseIntRequired(this.defaulValue, this.defaultNumberOfDays)
+      } else {
+        return this.getDaysUntilDate(this.defaulValue, this.defaultNumberOfDays)
+      }
+    }
+
+    //#region Render
+    render() {
+      return (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <Wrap className={dateExpiredClasses.root}>
+            <input key={this.defaultValueInput} type='text' hidden name={this.props.name?.toString()} defaultValue={this.defaultValueInput} />
+            <TextField {...this.mapTextFieldProps()} />
+            <div className={dateExpiredClasses.control}>
+              <Typography
+                variant='caption'
+                className={dateExpiredClasses.labelSwitch}
+                {...{ component: 'label', htmlFor: this.id }}
+                sx={{ color: this.state.switchChecked ? 'success.main' : '#767676' }}
+              >
+                {this.state.switchChecked ? 'Use Expiration Date' : 'No Expiration'}
+              </Typography>
+              <Switch
+                id={this.id}
+                size='small'
+                color='success'
+                checked={this.state.switchChecked}
+                onChange={(_, checked) => this.setState({ switchChecked: checked })}
+              />
+            </div>
+          </Wrap>
+        </LocalizationProvider>
+      )
+    }
+    //#endregion
+
+    mapTextFieldProps = (): TextFieldProps => {
+      const { messageErrors, name, onBlur } = this.props
+      const disabled = this.props.disabled || !this.state.switchChecked
+      const obj: TextFieldProps = {
+        fullWidth: true,
+        className: dateExpiredClasses.input,
+        label: (
+          <span className={dateExpiredClasses.label}>
+            Expiry date
+            {this.state.switchChecked && <b>{this.getOffsetDate(this.state.numberOfDays)}</b>}
+          </span>
+        ),
+        variant: 'outlined',
+        type: 'number',
+        disabled: disabled,
+        value: this.state.switchChecked ? this.state.numberOfDays : 0,
+        onChange: this.handleChange
+      }
+      if (!!name) {
+        obj.onBlur = () => onBlur && onBlur(name)
+        const temp = getErrorMessage(messageErrors, name)
+        if (temp.error) {
+          obj.error = Boolean(temp.error)
+          obj.helperText = temp.message ?? ''
+        }
+      }
+      return mergeObjects<TextFieldProps>({}, obj, this.slots.textFieldProps)
+    }
+
+    handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const numberOfDays: number = e.target.value != '' ? parseInt(e.target.value) : 0
+      this.setState({ numberOfDays })
+    }
+
+    getOffsetDate = (num: number, formatString = defaultFormatString): string => {
+      return dayjsCustom().add(num, 'day').format(formatString)
+    }
+
+    getDaysUntilDate = (value?: string, defaultValue = 0): number => {
+      try {
+        if (!value) return defaultValue
+        const target = dayjsCustom(value)
+        const today = dayjsCustom()
+        const diff = target.diff(today, 'day', true)
+        return Math.round(diff)
+      } catch {
+        return defaultValue
+      }
+    }
+  }
+  return DateExpired
+}
+export default CreateDateExpired
+
+const Wrap = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  position: 'relative',
+  [`.${dateExpiredClasses.switch}`]: {
+    margin: 0,
+    flex: '0 0 auto'
+  },
+  [`.${dateExpiredClasses.label}`]: {
+    b: {
+      color: '#1976d2',
+      marginLeft: '8px'
+    }
+  },
+  [`.${dateExpiredClasses.labelSwitch}`]: {
+    fontWeight: 600,
+    cursor: 'pointer'
+  },
+  [`.${dateExpiredClasses.control}`]: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  [`.${dateExpiredClasses.input}`]: {
+    '.MuiInputBase-input': {
+      paddingRight: '160px'
+    }
+  }
+})

package/src/form/create.date-picker.tsx

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import { styled } from '@mui/material'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { DatePicker as MUIDatePicker, LocalizationProvider, DatePickerProps } from '@mui/x-date-pickers'
+import { dayjsCustom, mergeObjects } from '../utils'
+import { IFormInputBase } from './types'
+import { getErrorMessage } from './helper'
+import { Dayjs } from 'dayjs'
+
+const formatDefault = 'MM/DD/YYYY'
+
+interface ISlots {
+  defaultValue?: string
+  minDate?: Dayjs
+  minDateOffset?: number
+  datePickerProps?: DatePickerProps<Dayjs>
+}
+
+interface IProps<T> extends IFormInputBase<T> {
+  format?: string
+  slots?: Omit<ISlots, 'defaultValue'>
+}
+
+interface IState {
+  value: Dayjs | null
+}
+
+const CreateDatePicker = function <T extends Object>(params?: ISlots): React.ComponentType<IProps<T>> {
+  class DatePicker extends Component<IProps<T>, IState> {
+    private _cachedSlots: ISlots = {}
+    constructor(props: IProps<T>) {
+      super(props)
+      this._cachedSlots = this.mergeSlots(props.slots) ?? {}
+      this.state = { value: this.getDefaultValue() }
+    }
+
+    get slots() {
+      return this._cachedSlots
+    }
+
+    componentDidUpdate(prevProps: IProps<T>) {
+      if (prevProps.slots !== this.props.slots) {
+        this._cachedSlots = this.mergeSlots(this.props.slots)
+      }
+    }
+
+    getDatePickerProps = (): DatePickerProps<Dayjs> => {
+      const delayInDays = params?.minDateOffset ?? 0
+      const minDate = delayInDays > 0 ? dayjsCustom().add(delayInDays, 'day').startOf('day') : params?.minDate
+      const label = this.props.label ?? this.props.name?.toString()
+      const format = this.props.format ?? formatDefault
+      const eMessage = getErrorMessage<T>(this.props.messageErrors, this.props.name)
+      const obj: DatePickerProps<Dayjs> = {
+        label,
+        format,
+        views: ['day', 'month', 'year'],
+        value: this.state.value,
+        onChange: this.handleChange,
+        disabled: this.props.disabled,
+        minDate,
+        slotProps: {
+          textField: { onBlur: this.handleBlur, fullWidth: true, error: eMessage.error, helperText: eMessage.message, variant: 'outlined' }
+        }
+      }
+      return mergeObjects(obj, params?.datePickerProps, this.slots?.datePickerProps)
+    }
+
+    refInput: HTMLInputElement | null = null
+    render() {
+      return (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <CustomDatePicker {...this.getDatePickerProps()} />
+          <input
+            hidden
+            name={this.props.name?.toString()}
+            defaultValue={this.getDefaultValue()?.toDate().toISOString()}
+            ref={(ref) => (this.refInput = ref)}
+          />
+        </LocalizationProvider>
+      )
+    }
+
+    private mergeSlots = (currentSlots?: ISlots): ISlots => {
+      return mergeObjects<ISlots>({}, params, currentSlots)
+    }
+
+    handleBlur = () => {
+      if (!this.props.name) return
+      this.props.onBlur && this.props.onBlur(this.props.name)
+    }
+
+    handleChange = (newValue: Dayjs | null) => {
+      this.setState({ value: newValue })
+      if (this.refInput) {
+        this.refInput.value = newValue && !isNaN(newValue.toDate().getTime()) ? newValue.toDate().toISOString() : ''
+      }
+      setTimeout(this.handleBlur, 50)
+    }
+
+    getDefaultValue = (): Dayjs => {
+      try {
+        if (!this.props.defaultValue && !this.slots.defaultValue && this.slots.minDateOffset) return dayjsCustom().add(1, 'day').startOf('day')
+        if (!this.props.defaultValue && this.slots.minDate) return this.slots.minDate
+
+        const { data, name } = this.props
+        const dValue = this.props.defaultValue ?? this.slots.defaultValue ?? (name ? data?.[name] : '')
+        return dValue ? dayjsCustom(dValue.toString()) : dayjsCustom()
+      } catch {
+        return dayjsCustom()
+      }
+    }
+  }
+  return DatePicker
+}
+
+export default CreateDatePicker
+
+const CustomDatePicker = styled(MUIDatePicker<Dayjs>)({
+  '& .MuiInputBase-root::before, & .MuiInputBase-root::after': {
+    borderBottom: 'none !important'
+  }
+})

package/src/form/create.form-base.tsx

@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+import { Box, SxProps, Theme } from '@mui/material'
+import { IFormBase } from './types'
+import { convertFormDataToJson, GetErrorFromResponse, SingleValidate, ValidateMerge } from './helper'
+import FormValidator, { PartialError, SingleRuleValidate } from './validator'
+
+interface IParam<TModel> {
+  validate?: FormValidator<Partial<TModel>>
+}
+
+interface IProps<TModel> {
+  sx?: SxProps<Theme>
+  validate?: FormValidator<Partial<TModel>>
+  onSubmit: (data: Partial<TModel>, e: React.FormEvent<HTMLFormElement>) => Promise<void>
+}
+
+interface IState<TModel> extends Pick<IFormBase<TModel>, 'messageErrors'> {
+  modelState?: Partial<TModel>
+}
+
+export interface IFormContextBase<TModel> {
+  modelState?: Partial<TModel>
+  messageErrors: PartialError<TModel>
+  onBlur: (keyName: keyof TModel) => void
+  setError: (keyName: keyof TModel, message: string) => void
+  clearErrorAll: (keyName: keyof TModel) => void
+}
+
+const CreateFormBase = function <TModel>(param?: IParam<TModel>) {
+  const FormBaseContext = React.createContext<IFormContextBase<TModel>>({} as any)
+  class FormBase extends Component<React.PropsWithChildren<IProps<TModel>>, IState<TModel>> {
+    refForm: HTMLFormElement | null = null
+    constructor(props: IProps<TModel>) {
+      super(props)
+      this.validate = this.getValidate()
+      this.state = { messageErrors: {} }
+    }
+
+    setError = (keyName: keyof TModel, message: string) => {
+      const error = { [keyName]: [{ rule: SingleRuleValidate.Custom, message }] }
+      this.setState({
+        messageErrors: Object.assign({}, this.state.messageErrors, error)
+      })
+    }
+
+    clearErrorAll = () => {
+      this.setState({ messageErrors: {} })
+    }
+
+    render() {
+      const { onBlur, setError, clearErrorAll } = this
+      const { modelState, messageErrors } = this.state
+      return (
+        <Box component='form' sx={this.props.sx} ref={(ref: HTMLFormElement) => (this.refForm = ref)} onSubmit={this.onSubmit}>
+          <FormBaseContext.Provider value={{ setError, onBlur, clearErrorAll, modelState, messageErrors }}>
+            {this.props.children}
+          </FormBaseContext.Provider>
+        </Box>
+      )
+    }
+
+    private validate: FormValidator<Partial<TModel>>
+    onSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+      e.preventDefault()
+      const formData = new FormData(e.currentTarget as HTMLFormElement)
+      const model = convertFormDataToJson<TModel>(formData)
+      this.setState({ modelState: model })
+      const messageErrors = this.validate.run(model) as PartialError<TModel>
+      if (messageErrors) {
+        this.setState({ messageErrors: messageErrors })
+        if (Object.keys(messageErrors).length > 0) return
+      }
+      await this.props.onSubmit(model, e).catch((error) => {
+        const messageError = GetErrorFromResponse(error, model)
+        this.setState({ messageErrors: { ...this.state.messageErrors, ...(messageError || {}) } })
+      })
+    }
+
+    onBlur = (keyName: keyof TModel) => {
+      if (!this.refForm) return
+      const { messageErrors } = this.state
+      const formData = new FormData(this.refForm)
+      const model = convertFormDataToJson(formData)
+      this.setState({ modelState: model })
+      const error = SingleValidate<TModel, Partial<TModel>>(keyName, model, messageErrors, this.validate) || {}
+      this.setState({ messageErrors: error as PartialError<TModel> })
+    }
+
+    getValidate = (): FormValidator<Partial<TModel>> => {
+      const defaultValidate = new FormValidator<Partial<TModel>>({})
+      return ValidateMerge(defaultValidate, param?.validate, this.props.validate)
+    }
+  }
+
+  return {
+    Form: FormBase,
+    Validator: param?.validate,
+    Context: FormBaseContext,
+    contextMapping: (params: (context: IFormContextBase<TModel>) => JSX.Element) => <FormBaseContext.Consumer>{params}</FormBaseContext.Consumer>
+  }
+}
+export default CreateFormBase

package/src/form/create.form-comfirm.tsx

@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+import { Box, Button, Card, DialogActions, DialogContent, DialogTitle, styled } from '@mui/material'
+import { fetchDelay } from '../utils'
+import { IGlobalModalContext, MapGlobalModalContext } from '../api-context'
+
+interface IParam<TModel> {
+  title?: string
+  content: (value?: TModel) => JSX.Element
+  colors?: {
+    yes?: 'inherit' | 'error' | 'primary' | 'secondary' | 'success' | 'info' | 'warning'
+    no?: 'inherit' | 'error' | 'primary' | 'secondary' | 'success' | 'info' | 'warning'
+  }
+}
+const CreateFormComfirm = function <TModel = any>(param?: IParam<TModel>) {
+  interface IProps {
+    data?: TModel
+    title?: string
+    onSubmit: (value?: TModel) => Promise<void>
+    onCancel?: () => void
+  }
+
+  interface IState {
+    loading?: boolean
+  }
+
+  class FormConfirm extends Component<React.PropsWithChildren<IProps>, IState> {
+    constructor(props: IProps) {
+      super(props)
+      this.state = { loading: false }
+    }
+
+    render() {
+      const content = this.props.children || (param?.content ? param?.content(this.props.data) : undefined)
+      const title = this.props.title ?? param?.title ?? 'Are you sure?'
+      return (
+        <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {MapGlobalModalContext((context) => (
+            <Card>
+              <DialogTitle id='alert-dialog-title'>{title}</DialogTitle>
+              <DialogContent sx={{ minWidth: '300px' }}>{content}</DialogContent>
+              <DialogActions>
+                <CustomButton disabled={this.state.loading} color={param?.colors?.no || 'inherit'} onClick={() => this.handleClickNo(context)}>
+                  No
+                </CustomButton>
+                <CustomButton color={param?.colors?.yes || 'error'} disabled={this.state.loading} onClick={() => this.handleClickYes(context)}>
+                  Yes
+                </CustomButton>
+              </DialogActions>
+            </Card>
+          ))}
+        </Box>
+      )
+    }
+
+    handleClickNo = (context: IGlobalModalContext) => {
+      context.close()
+      this.props.onCancel && this.props.onCancel()
+    }
+
+    handleClickYes = async (context: IGlobalModalContext) => {
+      if (!this.props.onSubmit) return
+      try {
+        this.setState({ loading: true })
+        await fetchDelay(() => this.props.onSubmit(this.props.data), 700)
+        context.close()
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.setState({ loading: false })
+      }
+    }
+  }
+  return FormConfirm
+}
+export default CreateFormComfirm
+
+const CustomButton = styled(Button)({
+  textTransform: 'capitalize',
+  fontWeight: 600,
+  '&.MuiButton-colorInherit': {
+    color: '#606060!important'
+  }
+})

package/src/form/create.form-grid-layout.tsx

@@ -0,0 +1,170 @@
+import React, { Component, Fragment } from 'react'
+import { BoxProps, Grid, RegularBreakpoints, SxProps, Theme } from '@mui/material'
+import { IFormBase, IFormInputBase } from './types'
+import { MapGlobalModalContext } from '../api-context'
+import { ContentWrap, CreateFormBottomBar } from './create.form-grid-layout.units'
+import FormValidator from './validator'
+import CreateFormBase from './create.form-base'
+import CreateInputBase from './create.input-base'
+
+export interface IFormGridLayoutConfig<T> {
+  key: keyof T
+  label?: string
+  placeholder?: string
+  reponsives?: RegularBreakpoints
+  defaultValue?: any
+  inputElement?: React.ComponentType<IFormInputBase<T>>
+}
+
+type TSubmitMapping<T> = (value: Partial<T>, oldValue?: T) => Partial<T>
+
+interface ISlots<T> {
+  action?: React.ComponentType<IFormBase<T>>
+  actionBefore?: JSX.Element
+  contentBefore?: JSX.Element
+  contentAfter?: JSX.Element
+  inputVisibility?: Partial<Record<keyof T, boolean>>
+  inputDisabled?: Partial<Record<keyof T, boolean>>
+  closeState?: { Success?: boolean; Fail?: boolean }
+  contentProps?: BoxProps
+}
+
+interface IParams<T> extends ISlots<T> {
+  configs: IFormGridLayoutConfig<T>[]
+  validate: FormValidator<Partial<T>>
+  submitMapping?: TSubmitMapping<T>
+}
+
+const CreateFormGridLayout = function <T>(params: IParams<T>) {
+  const FormBaseInstance = CreateFormBase<T>()
+  const BottomBarInstance = CreateFormBottomBar<T>()
+  const InputBaseInstance = CreateInputBase<T>({ maxLength: 250 })
+
+  interface IFormGridLayoutProps {
+    data?: T
+    onSubmit: (value: Partial<T>, signal?: AbortSignal) => Promise<void>
+    onError?: (error: any) => void
+    onClose?: () => void
+    sx?: SxProps<Theme>
+    slots?: ISlots<T>
+  }
+
+  interface IState {
+    loadding?: boolean
+  }
+
+  class FormGridLayout extends Component<IFormGridLayoutProps, IState> {
+    private abortController?: AbortController
+    constructor(props: IFormGridLayoutProps) {
+      super(props)
+      this.state = { loadding: false }
+    }
+
+    get configMerged() {
+      return {
+        inputVisibility: this.props.slots?.inputVisibility ?? params.inputVisibility,
+        inputDisabled: this.props.slots?.inputDisabled ?? params.inputDisabled
+      }
+    }
+
+    render() {
+      const BottomBar = params?.action ?? this.props.slots?.action ?? BottomBarInstance
+      return MapGlobalModalContext(({ close }) => (
+        <FormBaseInstance.Form validate={params.validate} onSubmit={(v) => this.onSubmit(v, close)} sx={this.getSxProps()}>
+          {this.renderContent()}
+          {FormBaseInstance.contextMapping((context) => (
+            <BottomBar data={this.props.data} onBlur={context.onBlur} messageErrors={context.messageErrors} before={this.props.slots?.actionBefore} />
+          ))}
+        </FormBaseInstance.Form>
+      ))
+    }
+
+    renderContent = () => {
+      const { slots } = this.props
+      return (
+        <ContentWrap {...this.props?.slots?.contentProps}>
+          {slots?.contentBefore && slots?.contentBefore}
+          {params?.contentBefore}
+          <Grid container spacing={2}>
+            {params.configs.map((config, index) => {
+              const visibility: boolean | undefined = this.configMerged.inputVisibility?.[config.key] ? true : undefined
+              if (visibility) return <Fragment key={config.key.toString() + index} />
+              return (
+                <Fragment key={config.key.toString() + index}>
+                  <Grid item xs={12} {...config.reponsives}>
+                    {this.renderFormFieldElement(config)}
+                  </Grid>
+                </Fragment>
+              )
+            })}
+          </Grid>
+          {params?.contentAfter}
+          {slots?.contentAfter && slots?.contentAfter}
+        </ContentWrap>
+      )
+    }
+
+    renderFormFieldElement = (config: IFormGridLayoutConfig<T>) => {
+      const { slots, ...otherProps } = this.props
+      const ElementComponent = config.inputElement ?? InputBaseInstance
+      const dValue = otherProps.data?.[config.key] ?? config?.defaultValue
+      const disabled: boolean | undefined = this.configMerged.inputDisabled?.[config.key] ? true : undefined
+      return FormBaseInstance.contextMapping((context) => (
+        <ElementComponent
+          data={this.props.data}
+          onBlur={context.onBlur}
+          messageErrors={context.messageErrors}
+          name={config.key}
+          label={config.label}
+          placeholder={config.placeholder}
+          disabled={disabled}
+          defaultValue={dValue}
+        />
+      ))
+    }
+
+    loading = () => this.setState({ loadding: true })
+
+    unloading = () => this.setState({ loadding: false })
+
+    componentWillUnmount(): void {
+      this.abortController?.abort()
+    }
+
+    onSubmit = async (value: Partial<T>, close?: () => void) => {
+      const { slots } = this.props
+      const mapping = params.submitMapping ?? this.submitMapping
+      const data = mapping(value, this.props.data)
+      try {
+        this.loading()
+        this.abortController?.abort()
+        this.abortController = new AbortController()
+        await this.props.onSubmit(data, this.abortController.signal)
+        if (!slots?.closeState || slots.closeState.Success !== false) {
+          close && close()
+          this.props.onClose && this.props.onClose()
+        }
+      } catch (error) {
+        if (slots?.closeState && slots.closeState.Fail === true) {
+          close && close()
+          this.props.onClose && this.props.onClose()
+        }
+        if (this.props.onError) this.props.onError(error)
+      } finally {
+        this.unloading()
+      }
+    }
+
+    submitMapping: TSubmitMapping<T> = (value, oldValue) => {
+      return Object.assign({}, oldValue, value)
+    }
+
+    getSxProps = (): SxProps<Theme> => {
+      const isLoading = this.state.loadding
+      return { ...this.props.sx, opacity: isLoading ? 0.7 : 1, pointerEvents: isLoading ? 'none' : 'auto' }
+    }
+  }
+  return FormGridLayout
+}
+
+export default CreateFormGridLayout