dinocollab-core 1.0.1 → 1.0.2

package/src/form/create.select-with-api.tsx

@@ -1,213 +0,0 @@
-import React, { Component } from 'react'
-import { Autocomplete, FilterOptionsState, TextField, TextFieldProps } from '@mui/material'
-import { getErrorMessage } from './helper'
-import { IFormInputBase } from './types'
-import { ApiAlertContext } from '../api-context'
-
-export interface ISelectWithApiOption<TOther = any> {
-  Id: string
-  Name?: string
-  Other?: TOther
-}
-
-interface IOptions {
-  textFieldProps: TextFieldProps
-}
-
-export type SelectWithApiFetchData<TOption extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<TOption[]>
-
-export interface ISelectWithApiParams<TOption extends ISelectWithApiOption> {
-  fetchData?: SelectWithApiFetchData<TOption>
-}
-
-interface IProps<TModel, TOption extends ISelectWithApiOption> extends IFormInputBase<TModel>, ISelectWithApiParams<TOption> {
-  onChange?: (value: TOption | null) => void
-  existedIds?: string[]
-  options?: IOptions
-}
-
-const CreateSelectWithApi = function <TModel, TOption extends ISelectWithApiOption = ISelectWithApiOption>(params?: ISelectWithApiParams<TOption>) {
-  interface IState {
-    options: TOption[]
-    statusText?: string
-    optionSelected: TOption | null
-    inputValue: string
-    loading?: boolean
-  }
-  class SelectWithApi extends Component<IProps<TModel, TOption>, IState> {
-    abortController = { signalController: new AbortController() }
-    refInput: HTMLInputElement | null = null
-    existedIds: string[] = []
-    constructor(props: IProps<TModel, TOption>) {
-      super(props)
-      this.state = {
-        options: [],
-        statusText: 'no items',
-        optionSelected: null,
-        inputValue: '',
-        loading: true
-      }
-      this.existedIds = props.existedIds ?? []
-    }
-
-    render() {
-      const defaultValue = this.getDefaultValue()
-      const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)
-      return (
-        <>
-          <Autocomplete
-            disabled={this.state.loading || this.props.disabled}
-            fullWidth
-            noOptionsText={this.state.statusText}
-            options={this.state.options}
-            getOptionLabel={(x) => x.Name ?? x.Id}
-            getOptionKey={(x) => JSON.stringify(x)}
-            isOptionEqualToValue={(o, v) => o.Id.toString() === v.Id.toString() && o.Name === v.Name}
-            filterOptions={this.fillterOptions}
-            // select
-            value={this.state.optionSelected}
-            onChange={this.handleChange}
-            // input
-            inputValue={this.state.inputValue}
-            onInputChange={this.handleInputChange}
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                label={this.getLabel()}
-                error={eMessage.error}
-                helperText={eMessage.message}
-                onBlur={() => {
-                  if (!this.props.name) return
-                  this.props.onBlur && this.props.onBlur(this.props.name)
-                }}
-                {...this.props.options?.textFieldProps}
-              />
-            )}
-          />
-          <input ref={(ref) => (this.refInput = ref)} hidden name={this.props.name?.toString()} defaultValue={defaultValue} />
-          {this.state.optionSelected?.Other && (
-            <input
-              hidden
-              name={`${this.props.name?.toString()}Other`}
-              key={this.state.optionSelected.Id ?? 'key'}
-              defaultValue={JSON.stringify(this.state.optionSelected.Other)}
-            />
-          )}
-        </>
-      )
-    }
-
-    componentDidMount() {
-      this.fetchData()
-    }
-
-    componentWillUnmount(): void {
-      this.timer.clear()
-    }
-
-    componentDidUpdate(prevProps: Readonly<IProps<TModel, TOption>>, prevState: Readonly<IState>, snapshot?: any): void {
-      if (JSON.stringify(prevProps.existedIds) !== JSON.stringify(this.props.existedIds)) {
-        this.existedIds = this.props.existedIds ?? []
-      }
-    }
-
-    getFetchDataFunc = (): SelectWithApiFetchData<TOption> => {
-      return this.props.fetchData ?? params?.fetchData ?? (() => Promise.resolve([]))
-    }
-
-    timer = {
-      _timer: 0,
-      _second: 500,
-      callback: async (value: string) => {
-        try {
-          this.abortController.signalController = new AbortController()
-          const res = await this.getFetchDataFunc()(value, this.abortController.signalController.signal)
-          const options = OptionsFilter(res, this.existedIds)
-          this.setState({ options })
-        } catch (error) {
-          // console.log(error)
-          ApiAlertContext.ApiAlert?.PushError('Error from server!')
-        } finally {
-          this.setState({ statusText: 'no items' })
-        }
-      },
-      start: (text: string) => {
-        this.timer.clear()
-        this.timer._timer = window.setTimeout(() => this.timer.callback(text), this.timer._second)
-      },
-      clear: () => {
-        this.abortController.signalController.abort()
-        clearTimeout(this.timer._timer)
-      }
-    }
-
-    fetchData = async () => {
-      try {
-        const defaultValue = this.getDefaultValue()
-        const res = await this.getFetchDataFunc()(defaultValue, this.abortController.signalController.signal)
-        if (!Array.isArray(res)) return
-        const options = OptionsFilter(res, this.existedIds)
-        const optionSelected = options.find((x) => x.Id === defaultValue) ?? null
-        this.setState({ options, optionSelected, loading: false })
-        return
-      } catch (error) {
-        // console.log(error)
-        ApiAlertContext.ApiAlert?.PushError('Error from server!')
-      } finally {
-        this.setState({ statusText: 'no items', loading: false })
-      }
-    }
-
-    handleChange = (_: React.SyntheticEvent, value: TOption | null) => {
-      this.setState({ optionSelected: value })
-      if (this.refInput) this.refInput.value = value?.Id ?? ''
-      this.props.onChange && this.props.onChange(value)
-    }
-
-    handleInputChange = (_: React.SyntheticEvent, value: string) => {
-      const state: Pick<IState, 'inputValue' | 'statusText' | 'loading'> = { inputValue: value }
-      if (value === this.state.optionSelected?.Name) {
-        this.setState(state)
-        return
-      }
-      const valueFormated = value.trim().toLowerCase()
-      const selectedIndex = this.state.options.findIndex((x) => {
-        return x.Name?.trim().toLowerCase().includes(valueFormated)
-      })
-      if (selectedIndex < 0 || valueFormated === '') state.statusText = 'loading...'
-      this.setState(state, () => {
-        if (selectedIndex < 0 || valueFormated === '') this.timer.start(valueFormated)
-      })
-    }
-
-    fillterOptions = (options: TOption[], state: FilterOptionsState<TOption>) => {
-      return options.filter((x) => {
-        const value = state.inputValue.toLowerCase()
-        return x.Id.toLowerCase().includes(value) || x.Name?.toLowerCase().includes(value)
-      })
-    }
-
-    getLabel = () => {
-      return this.props.label ?? this.props.name?.toString()
-    }
-
-    getDefaultValue = () => {
-      if (!this.props.name) return
-      return (this.props.defaultValue ?? this.props.data?.[this.props.name])?.toString()
-    }
-  }
-  return SelectWithApi
-}
-export default CreateSelectWithApi
-export type SelectWithApiType<TModel extends ISelectWithApiOption = ISelectWithApiOption> = ReturnType<typeof CreateSelectWithApi<TModel>>
-
-function OptionsFilter<O extends ISelectWithApiOption = ISelectWithApiOption>(options: O[], existedId: string[] = []): O[] {
-  const ids = new Set<string | number>(existedId)
-  return options.reduce<O[]>((a, b) => {
-    if (!ids.has(b.Id)) {
-      a.push(b)
-      ids.add(b.Id)
-    }
-    return a
-  }, [])
-}

package/src/form/create.text-editor.tsx

@@ -1,161 +0,0 @@
-import React, { Component, createRef } from 'react'
-import { Box, BoxProps, IconButton, styled, Tooltip, Typography } from '@mui/material'
-import FullscreenIcon from '@mui/icons-material/Fullscreen'
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'
-import { IFormInputBase } from './types'
-import { getErrorMessage } from './helper'
-import TextEditor, { textEditorClasses } from '../components/text-editor'
-
-interface IParams {
-  id: string
-  title: string
-}
-
-function CreateTextEditor<T>(params: IParams) {
-  interface IProps extends IFormInputBase<T> {}
-
-  interface IState {
-    isFullscreen: boolean
-  }
-
-  class Editor extends Component<IProps, IState> {
-    contentRef
-    constructor(props: IProps) {
-      super(props)
-      this.state = {
-        isFullscreen: false
-      }
-      this.contentRef = createRef<HTMLDivElement | null>()
-    }
-
-    componentDidMount() {
-      document.addEventListener('fullscreenchange', this.handleFullscreenChange)
-    }
-
-    componentWillUnmount() {
-      document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
-    }
-
-    handleFullscreenChange = () => {
-      this.setState({ isFullscreen: !!document.fullscreenElement })
-    }
-
-    handleFullscreenToggle = () => {
-      if (this.contentRef.current) {
-        if (!document.fullscreenElement) {
-          this.contentRef.current.requestFullscreen().catch((err) => {
-            console.error(`Error attempting to enable full-screen mode: ${err.message}`)
-          })
-        } else {
-          document.exitFullscreen()
-        }
-      }
-    }
-
-    getWrapClasses = () => {
-      const classes = []
-      if (this.state.isFullscreen) classes.push(textEditorClasses.fullscreen)
-      return classes.join(' ')
-    }
-
-    render() {
-      const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)
-      const dValue = (this.props.name ? this.props.data?.[this.props.name] : '')?.toString() ?? ''
-
-      return (
-        <Box id={params.id} ref={this.contentRef} sx={{ backgroundColor: '#fff' }}>
-          {this.state.isFullscreen && (
-            <WrapTitle>
-              <Typography variant='h4' sx={{ fontWeight: 600, flex: 1, textAlign: 'center' }}>
-                {params.title}
-              </Typography>
-            </WrapTitle>
-          )}
-          <Wrap className={this.getWrapClasses()}>
-            <WrapActions>
-              <Tooltip title={this.state.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'} arrow>
-                <CustomButton sx={{ color: '#06c' }} onClick={this.handleFullscreenToggle}>
-                  {this.state.isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
-                </CustomButton>
-              </Tooltip>
-            </WrapActions>
-            <WrapTextEditor>
-              <TextEditor
-                defautValue={dValue}
-                name={this.props.name?.toString() ?? ''}
-                readOnly={this.props.disabled}
-                error={errorMessage.error}
-                onBlur={() => {
-                  if (!this.props.name) return
-                  this.props.onBlur?.(this.props.name)
-                }}
-              />
-            </WrapTextEditor>
-          </Wrap>
-        </Box>
-      )
-    }
-  }
-  return Editor
-}
-
-export default CreateTextEditor
-
-const editorHeight = 64
-
-const Wrap = styled(Box)(({ theme }) => ({
-  maxWidth: theme.breakpoints.values.xl,
-  margin: '0 auto',
-  position: 'relative',
-  [`&.${textEditorClasses.fullscreen} .${textEditorClasses.root}`]: {
-    height: `calc(100vh - ${editorHeight + 10}px)`
-  },
-  [`&.${textEditorClasses.fullscreen}`]: {
-    width: '871px'
-  }
-}))
-
-const WrapTitle = styled(Box)({
-  height: `${editorHeight}px`,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-})
-
-const WrapActions = styled(({ children, ...props }: BoxProps) => (
-  <Box {...props}>
-    <Box>{children}</Box>
-  </Box>
-))({
-  position: 'sticky',
-  top: '-1px',
-  zIndex: 2,
-  '& > div': {
-    height: 0,
-    display: 'flex',
-    justifyContent: 'right',
-    padding: '0 6px'
-  }
-})
-
-const CustomButton = styled(IconButton)({
-  flex: '0 0 auto',
-  marginTop: '1px',
-  width: '40px',
-  height: '40px'
-})
-
-const WrapTextEditor = styled(Box)({
-  backgroundColor: '#fff',
-  width: '100%',
-  '& .ql-container': {
-    fontFamily: '"Roboto", serif',
-    fontSize: '14px'
-  },
-  '& .ql-toolbar': {
-    position: 'sticky',
-    top: '-1px',
-    backgroundColor: '#fff',
-    zIndex: 1
-  }
-})

package/src/form/dino-form.tsx

@@ -1,40 +0,0 @@
-import FormValidator from './validator'
-import FormModalWrapper from './modal-wrapper'
-import CreateFormBase from './create.form-base'
-import CreateInputFile from './create.input.file'
-import CreateInputBase from './create.input-base'
-import CreateDatePicker from './create.date-picker'
-import CreateTextEditor from './create.text-editor'
-import CreateDateExpired from './create.date-expired'
-import CreateFormComfirm from './create.form-comfirm'
-import CreateSelectSimple from './create.select-simple'
-import CreateSelectWithApi from './create.select-with-api'
-import CreateFormGridLayout from './create.form-grid-layout'
-import CreateAutocompleteChip from './create.autocomplete.chips'
-import { FormBottomBarWrap } from './create.form-grid-layout.units'
-
-class DinoFormBase {
-  //#region Base
-  ModalWrap = FormModalWrapper
-  BottomBarWrap = FormBottomBarWrap
-  FormValidator = FormValidator
-  validator = FormValidator.initial
-  createFormBase = CreateFormBase
-  createFormComfirm = CreateFormComfirm
-  createFormGridLayout = CreateFormGridLayout
-  //#endregion
-
-  //#region Inputs
-  createDateExpired= CreateDateExpired
-  createDatePicker = CreateDatePicker
-  createAutocompleteChip = CreateAutocompleteChip
-  createInput = CreateInputBase
-  createInputFile = CreateInputFile
-  createSelectSimple = CreateSelectSimple
-  createSelectWithApi = CreateSelectWithApi
-  createTextEditor = CreateTextEditor
-  //#endregion
-}
-
-const DinoForm = new DinoFormBase()
-export default DinoForm

package/src/form/helper.ts

@@ -1,132 +0,0 @@
-import { AxiosError } from 'axios'
-import FormValidator, { IModelError, IRuleOption, PartialError } from './validator'
-
-type AnyObject = { [key: string]: any }
-const ObjectAssign = <T extends AnyObject>(model: T, ...sources: (Partial<T> | undefined)[]) => {
-  if (sources.length < 1) {
-    return model
-  }
-  const temps = sources.filter((x) => x) as T[]
-  return temps.reduce((a, b) => {
-    a = Object.assign(a, b)
-    return a
-  }, model)
-}
-
-const DeepMerge = <T extends AnyObject>(model: T, ...sources: (Partial<T> | undefined)[]) => {
-  sources = sources.filter((x) => !!x)
-  if (sources.length < 1) {
-    return model
-  }
-  const temps = [model, ...sources].filter((x) => x)
-  const fieldObjects = temps.reduce<string[]>((a, b) => {
-    if (!b) return a
-    const fields = Object.keys(b).filter((x) => typeof b[x] === 'object' && !Array.isArray(b[x]))
-    a.push(...fields)
-    return a
-  }, [])
-
-  const target = ObjectAssign<T>(model, ...temps.slice(1))
-  const temp = target as any
-  const temp2 = temps.slice(1).filter((x) => !!x) as Partial<T>[]
-  for (let index = 0; index < fieldObjects.length; index++) {
-    const element = fieldObjects[index]
-    temp[element] = DeepMerge({}, temp[element], ...temp2.map((x) => x[element]))
-  }
-  return target
-}
-
-export const getErrorMessage = function <TModel>(MessageErrors: PartialError<TModel> | undefined, key?: keyof TModel): IModelError {
-  return MessageErrors && (MessageErrors as any)[key] ? { ...(MessageErrors as any)[key][0], error: true } : { error: false, message: '' }
-}
-
-type ModelBase = {
-  [key: string]: any
-}
-
-export const convertFormDataToJson = function <TModel>(form: FormData): Partial<TModel> {
-  const data = Array.from(form).reduce<Partial<TModel>>((a: any, b: any[]) => {
-    if (!a[b[0]]) {
-      a[b[0]] = b[1]
-    } else if (Array.isArray(a[b[0]])) {
-      a[b[0]].push(b[1])
-    } else {
-      a[b[0]] = [a[b[0]], b[1]]
-    }
-    return a
-  }, {} as any) as any
-
-  Object.keys(data).forEach((key) => {
-    const value = data[key]
-    if (typeof value === 'string' && (value.toString().toLocaleLowerCase() === 'true' || value.toString().toLocaleLowerCase() === 'false')) {
-      data[key] = value.toString().toLocaleLowerCase() === 'true'
-    }
-  })
-  return data
-}
-
-export const SingleValidate = function <TModel, TPartial = TModel>(
-  key: keyof TModel,
-  modelState: TPartial,
-  MessageErrors: PartialError<TModel>,
-  Validator: FormValidator<TPartial>
-) {
-  const messageErrors = Validator.run(modelState) as { [key: string]: any }
-  if (messageErrors) {
-    let errors = (MessageErrors || {}) as { [key: string]: any }
-    const keys = Object.keys(modelState as any)
-      .filter((key) => !!(modelState as any)[key])
-      .filter((key) => ((modelState as any)[key] instanceof File ? !!((modelState as any)[key] as File).size : false))
-    keys.push(key as string)
-    keys.forEach((key) => {
-      if (messageErrors[key]) {
-        errors[key] = messageErrors[key]
-      } else {
-        delete errors[key]
-      }
-    })
-    return errors
-  }
-  return null
-}
-
-export const GetErrorFromResponse = function <TModel>(error: AxiosError, ModelRender: TModel) {
-  const data = error.response?.data as any
-  if (data) {
-    const keys = Object.keys(ModelRender as any)
-    const MessageErrors: PartialError<TModel> | undefined = {}
-    keys.forEach((key) => {
-      const messages = data[key]
-      if (Array.isArray(messages) && messages.length > 0) {
-        ;(MessageErrors as any)[key] = [{ message: messages[0] }]
-      }
-    })
-    return MessageErrors
-  }
-}
-
-export const ClearFieldEmpty = <TModel>(model: Extract<TModel, ModelBase>) => {
-  Object.keys(model).forEach((key: keyof Extract<TModel, ModelBase>) => {
-    if (!model[key]) delete model[key]
-  })
-}
-
-export const ValidateMerge = <TModel>(...validateor: (FormValidator<TModel> | undefined)[]): FormValidator<TModel> => {
-  const configs = validateor.map((x) => x?.configs).filter((x) => !!x)
-
-  let temp: any = Object.assign({}, ...configs)
-
-  for (let index = 0; index < Object.keys(temp).length; index++) {
-    const key = Object.keys(temp)[index]
-    //merge configs
-    temp[key] = DeepMerge({}, ...configs.map((x) => (x ? x[key] : { Rules: [] })))
-    //merge rules
-    temp[key].Rules = configs
-      .map((x) => (x ? x[key] : { Rules: [] }))
-      .reduce<IRuleOption<TModel>[]>((a, b) => {
-        a.push(...(b?.Rules ?? []))
-        return a
-      }, [])
-  }
-  return new FormValidator(temp)
-}

package/src/form/index.ts

@@ -1,12 +0,0 @@
-export * from './types'
-
-export { default as FormValidator } from './validator'
-export * from './validator'
-
-export { default as DinoForm } from './dino-form'
-
-export { getErrorMessage, convertFormDataToJson } from './helper'
-
-export type { ISelectWithApiOption } from './create.select-with-api'
-
-export type { InputBaseImage } from './create.input-base'

package/src/form/modal-wrapper.tsx

@@ -1,75 +0,0 @@
-import React, { FC, PropsWithChildren } from 'react'
-import { Box, Breakpoint, IconButton, Paper, styled, SxProps, Theme, Typography } from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-import { MapGlobalModalContext } from '../api-context'
-
-interface IProps extends PropsWithChildren {
-  title: string
-  size?: Breakpoint
-  fullHeight?: boolean
-  onCloseClick?: () => void
-  slots?: {
-    sxTopbarProps?: SxProps<Theme>
-    beforeTitle?: JSX.Element
-  }
-}
-const FormModalWrapper: FC<IProps> = (props) => {
-  return MapGlobalModalContext((context) => (
-    <Wrap size={props.size} className={props.fullHeight ? 'full-height' : undefined}>
-      <TopBar sx={props.slots?.sxTopbarProps}>
-        {props.slots?.beforeTitle && (
-          <>
-            {props.slots.beforeTitle}
-            <Box flex={1} />
-          </>
-        )}
-        <Typography component='h3' variant='subtitle1' sx={{ mt: '2px', ml: '8px', fontWeight: 700 }}>
-          {props.title}
-        </Typography>
-        <Box flex={1} />
-        <BtnClose
-          onClick={() => {
-            props.onCloseClick && props.onCloseClick()
-            context.close()
-          }}
-        >
-          <CloseIcon />
-        </BtnClose>
-      </TopBar>
-      {props.children}
-    </Wrap>
-  ))
-}
-
-export default FormModalWrapper
-
-const Wrap = styled(Paper)<{ size?: Breakpoint }>(({ theme, size }) => ({
-  maxHeight: 'calc(100vh - 24px)',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-  maxWidth: 'calc(100vw - 24px)',
-  width: theme.breakpoints.values[size ?? 'lg'],
-  [theme.breakpoints.down('sm')]: { width: 'calc(100vw - 24px)' },
-  '&.full-height': {
-    height: 'calc(100vh - 24px)'
-  }
-}))
-
-const BtnClose = styled(IconButton)({
-  flex: '0 0 auto',
-  color: '#3c3c3c',
-  '& svg': { transition: 'all 0.2s' },
-  '&:hover svg': { color: '#ff200c' }
-})
-
-const TopBar = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  padding: '0 8px 0 8px',
-  gap: '6px',
-  flex: '0 0 auto',
-  boxShadow: 'rgba(145, 158, 171, 0.1) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 0px 24px -4px',
-  height: '48px'
-})

package/src/form/types.ts

@@ -1,16 +0,0 @@
-import { PartialError } from './validator'
-
-export interface IFormBase<TModel> {
-  data?: Partial<TModel>
-  messageErrors: PartialError<TModel>
-  onBlur: (keyName: keyof TModel) => void
-  disabled?: boolean
-}
-
-export interface IFormInputBase<TModel, TSlots = any> extends Partial<IFormBase<TModel>> {
-  name?: keyof TModel
-  label?: React.ReactNode
-  placeholder?: string
-  defaultValue?: any
-  slots?: TSlots
-}