dinocollab-core 1.0.0 → 1.0.2

package/src/form/create.autocomplete.chips.tsx

@@ -1,199 +0,0 @@
-import React, { Component } from 'react'
-import { Autocomplete, Chip, IconButton, styled, TextField, TextFieldProps, Tooltip, Typography } from '@mui/material'
-import RemoveIcon from '@mui/icons-material/Remove'
-import { IFormInputBase } from './types'
-import { getErrorMessage } from './helper'
-
-interface IOptions {
-  optionItems?: string[]
-  limitTags?: number
-  separator?: string
-  saveLocalStorageByKey?: string
-}
-
-interface IProps<T> extends IFormInputBase<T, IOptions> {}
-
-interface IState {
-  value: string[]
-  options: string[]
-}
-
-export default function CreateAutocompleteChip<T>(options?: IOptions) {
-  const separator = options?.separator || '|'
-  const limitTags = options?.limitTags || 2
-  const storeItems = options?.saveLocalStorageByKey ? AutocompleteChipStore.initial(options.saveLocalStorageByKey) : undefined
-
-  return class AutocompleteChip extends Component<IProps<T>, IState> {
-    constructor(props: IProps<T>) {
-      super(props)
-      this.state = {
-        value: this.getDefaultValue(),
-        options: this.getSelectOptions()
-      }
-    }
-
-    refInput: HTMLInputElement | null = null
-    render() {
-      const { name } = this.props
-      return (
-        <>
-          <Autocomplete
-            multiple
-            freeSolo
-            limitTags={limitTags}
-            value={this.state.value}
-            onChange={this.handleAddOption}
-            options={this.state.options}
-            renderOption={(props, option) => (
-              <ItemOption {...props} key={option}>
-                <Typography variant='subtitle1' sx={{ flex: 1 }}>
-                  {option}
-                </Typography>
-                {this.isBtnRemoveOption(option) && (
-                  <Tooltip title='Remove option' arrow placement='left'>
-                    <IconButton size='small' onClick={(e) => this.handleRemoveItem(e, option)}>
-                      <RemoveIcon fontSize='small' />
-                    </IconButton>
-                  </Tooltip>
-                )}
-              </ItemOption>
-            )}
-            renderTags={(tagValue, getTagProps) => {
-              return tagValue.map((option, index) => <Chip label={option} {...getTagProps({ index })} key={option.toString()} />)
-            }}
-            renderInput={(params) => <TextField {...params} variant='outlined' {...this.getTextFieldProps()} />}
-          />
-          <input
-            ref={(ref) => {
-              this.refInput = ref
-            }}
-            hidden
-            type='text'
-            name={name?.toString()}
-            defaultValue={this.state.value.join(separator)}
-          />
-        </>
-      )
-    }
-
-    handleRemoveItem = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {
-      e.preventDefault()
-      e.stopPropagation()
-      console.log(value)
-      const list = storeItems?.delete(value) ?? []
-      this.setState({ options: list })
-    }
-
-    handleAddOption = (_: React.SyntheticEvent, newValue: string[]) => {
-      if (options?.saveLocalStorageByKey) {
-        const options = storeItems?.setItems(this.state.options, newValue) ?? this.state.options
-        this.setState({ value: newValue, options })
-      } else {
-        this.setState({ value: newValue })
-      }
-      if (this.refInput) {
-        this.refInput.value = newValue.join(separator)
-      }
-      this.props.name && this.props.onBlur && this.props.onBlur(this.props.name)
-    }
-
-    isBtnRemoveOption = (value: string) => {
-      const isSelectedOption = this.state.value.findIndex((x) => x === value) < 0
-      const selectOptions = options?.optionItems ?? this.props.slots?.optionItems ?? []
-      const isDefault = selectOptions.findIndex((x) => x === value) < 0
-      return isDefault && isSelectedOption
-    }
-
-    getSelectOptions = () => {
-      let items = options?.optionItems ?? []
-      if (options?.saveLocalStorageByKey) {
-        items = storeItems?.getItemsAndMerge(items) ?? []
-      }
-      return items
-    }
-
-    getTextFieldProps = (): TextFieldProps => {
-      const { name, label, placeholder, onBlur, messageErrors } = this.props
-      const eMessage = getErrorMessage(messageErrors, name)
-      return {
-        label,
-        placeholder: placeholder || 'Add new',
-        onBlur: () => {
-          if (!name) return
-          onBlur && onBlur(name)
-        },
-        error: eMessage.error,
-        helperText: eMessage.message
-      }
-    }
-
-    getDefaultValue = (): string[] => {
-      const { name, data } = this.props
-      const value = name ? data?.[name]?.toString() : ''
-      return value?.split(separator).filter((x) => !!x) ?? []
-    }
-  }
-}
-
-const ItemOption = styled('li')({
-  display: 'flex',
-  alignItems: 'center'
-})
-
-type TChipStoreRoot = { [key: string]: string[] }
-
-class AutocompleteChipStore {
-  private storeKeyRoot = 'autocomplete_chip_store'
-  private storeKey: string
-  constructor(key: string, defaultValue?: string[]) {
-    this.storeKey = key
-    if (defaultValue) {
-      this.setChild(defaultValue)
-    }
-  }
-
-  static initial = (key: string, defaultValue?: string[]) => new AutocompleteChipStore(key, defaultValue)
-
-  private getRoot = (): TChipStoreRoot => {
-    try {
-      const res = window.localStorage.getItem(this.storeKeyRoot)
-      return JSON.parse(res ?? '{}')
-    } catch (error) {
-      return {}
-    }
-  }
-
-  private getChild = (): string[] => {
-    return this.getRoot()[this.storeKey]
-  }
-
-  private setRoot = (value: TChipStoreRoot) => {
-    window.localStorage.setItem(this.storeKeyRoot, JSON.stringify(value))
-  }
-
-  private setChild = (value: string[]) => {
-    const obj = this.getRoot()
-    obj[this.storeKey] = value
-    this.setRoot(obj)
-  }
-
-  getItemsAndMerge = (value: string[]): string[] => {
-    try {
-      return Array.from(new Set([...this.getChild(), ...value])).sort()
-    } catch (error) {
-      return value
-    }
-  }
-
-  setItems = (options: string[], value: string[]): string[] => {
-    const list = Array.from(new Set([...options, ...value])).sort()
-    this.setChild(list)
-    return list
-  }
-
-  delete = (value: string) => {
-    const list = this.getChild().filter((x) => x !== value)
-    this.setChild(list)
-    return list
-  }
-}

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

@@ -1,195 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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'
-  }
-})