dinocollab-core 1.0.1 → 1.0.2

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

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

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

@@ -1,37 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import { Box, Button, styled } from '@mui/material'
-import { IFormBase } from './types'
-
-export const ContentWrap = styled(Box)({
-  padding: '16px 12px 3px',
-  maxHeight: `calc(100vh - ${48 * 2 + 12 * 2}px)`,
-  overflowY: 'auto',
-  overflowX: 'hidden'
-})
-
-export function CreateFormBottomBar<T>() {
-  interface Props extends IFormBase<T> {
-    before?: ReactNode
-  }
-  const FormBottomBar: FC<Props> = (props) => (
-    <FormBottomBarWrap className='bottom-bar'>
-      <Box sx={{ flex: 1 }}>{props.before}</Box>
-      <Button variant='contained' type='submit' size='small'>
-        Submit
-      </Button>
-    </FormBottomBarWrap>
-  )
-  return FormBottomBar
-}
-
-export const FormBottomBarWrap = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  padding: '0 12px',
-  boxShadow: 'rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px',
-  position: 'sticky',
-  bottom: 0,
-  backgroundColor: '#fff',
-  zIndex: 1,
-  height: '48px'
-})

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

@@ -1,222 +0,0 @@
-import React, { Component, FC } from 'react'
-import { Box, CircularProgress, Collapse, IconButton, InputAdornment, styled, TextField, TextFieldProps } from '@mui/material'
-import ContentPasteIcon from '@mui/icons-material/ContentPaste'
-import { mergeObjects } from '../utils'
-import { IFormInputBase } from './types'
-import { getErrorMessage } from './helper'
-import ImageWithFallback, { ImageWithFallbackPropsOwner } from '../components/image-with-fallback'
-
-export interface InputBaseImage<T> extends Partial<ImageWithFallbackPropsOwner> {
-  srcValue?: (value: any, model?: Partial<T>) => string
-  element?: React.ComponentType<{ value: any; model?: Partial<T> }>
-  mirror?: boolean
-}
-
-interface ISlots<T> {
-  maxLength?: number
-  textFieldProps?: TextFieldProps
-  pastenable?: boolean
-  imageLeft?: InputBaseImage<T>
-  imageRight?: InputBaseImage<T>
-}
-
-interface IProps<T> extends IFormInputBase<T> {
-  slots?: ISlots<T>
-}
-interface IState {
-  value?: string
-}
-
-interface IParams<T> extends ISlots<T> {}
-
-const CreateInputBase = function <T>(params?: IParams<T>): React.ComponentType<IProps<T>> {
-  class InputBase extends Component<IProps<T>, IState> {
-    private _cachedSlots: ISlots<T> = {}
-    constructor(props: IProps<T>) {
-      super(props)
-      this._cachedSlots = this.mergeSlots(props.slots) ?? {}
-      this.state = { value: this.defaulValue }
-    }
-
-    get slots() {
-      return this._cachedSlots
-    }
-
-    get defaulValue(): string {
-      const { data, name } = this.props
-      return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)
-    }
-
-    componentDidUpdate(prevProps: IProps<T>) {
-      if (prevProps.slots !== this.props.slots) {
-        this._cachedSlots = this.mergeSlots(this.props.slots)
-      }
-    }
-
-    shouldComponentUpdate(nextProps: Readonly<IProps<T>>): boolean {
-      const { name, slots } = this.props
-      if (!!name) {
-        const currentDataValue = this.props.data?.[name]?.toString() ?? ''
-        const nextDataValue = nextProps.data?.[name]?.toString() ?? ''
-        if (currentDataValue !== nextDataValue) {
-          this.setState({ value: nextDataValue })
-          return false
-        }
-      }
-
-      if (slots !== nextProps.slots) {
-        return true
-      }
-      return true
-    }
-
-    mapTextFieldProps = (): TextFieldProps => {
-      const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)
-      const tfp: TextFieldProps = {
-        fullWidth: true,
-        variant: 'outlined',
-        name: this.props.name?.toString(),
-        error: errorMessage.error,
-        helperText: errorMessage.message,
-        disabled: this.props.disabled,
-        onBlur: () => {
-          if (!this.props.name) return
-          this.props.onBlur && this.props.onBlur(this.props.name)
-        },
-        label: this.getLabel(),
-        placeholder: this.props.placeholder,
-        InputLabelProps: !!this.state.value ? { shrink: true } : {},
-        value: this.state.value ?? '',
-        onChange: this.handleChange
-      }
-      if (this.slots.pastenable === true) {
-        tfp.InputProps = {
-          endAdornment: (
-            <InputAdornment position='end'>
-              <IconButton onClick={this.handlePaste} edge='end'>
-                <ContentPasteIcon />
-              </IconButton>
-            </InputAdornment>
-          )
-        }
-      }
-      if (this.slots?.maxLength) tfp.inputProps = { ...tfp.inputProps, maxLength: this.slots.maxLength }
-      return mergeObjects<TextFieldProps>({}, tfp, this.slots?.textFieldProps)
-    }
-
-    //#region Render
-    render() {
-      return (
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.defaulValue} />}
-          {this.renderImageSide('left')}
-          <TextField {...this.mapTextFieldProps()} />
-          {this.renderImageSide('right')}
-        </Box>
-      )
-    }
-
-    renderImageSide = (side: 'left' | 'right') => {
-      const image = side === 'left' ? this.slots.imageLeft : this.slots.imageRight
-      if (!image) return <></>
-      const { srcValue, element, alt = 'input-image', fallbackSrc = '', debounceDelay = 700, ...imageOther } = image
-      if (element) {
-        const Element = element
-        return (
-          <WrapImage>
-            <Element value={this.state.value} model={this.props.data} />
-          </WrapImage>
-        )
-      }
-      const src = srcValue ? srcValue(this.state.value, this.props.data) : (imageOther.src ?? this.state.value)
-      const imageProps: ImageWithFallbackPropsOwner = { src, alt, fallbackSrc, debounceDelay }
-      return (
-        <Collapse sx={{ mx: '10px' }} in={!!src} unmountOnExit orientation='horizontal'>
-          <WrapImage>
-            <ImageWithFallback {...imageOther} {...imageProps} loading={<LoadingCircularProgress />} />
-          </WrapImage>
-        </Collapse>
-      )
-    }
-    //#endregion
-
-    private mergeSlots = (currentSlots?: ISlots<T>): ISlots<T> => {
-      const base = mergeObjects<ISlots<T>>({}, params, currentSlots)
-      const { imageLeft, imageRight } = base
-
-      // mirror from left to right
-      if (imageLeft?.mirror && !imageRight) {
-        base.imageRight = { ...imageLeft }
-        delete base.imageRight.mirror
-      }
-      // mirror from right to left
-      else if (imageRight?.mirror && !imageLeft) {
-        base.imageLeft = { ...imageRight }
-        delete base.imageLeft.mirror
-      }
-
-      return base
-    }
-
-    getLabel = () => {
-      if (!this.props.label) return
-      if (!this.slots?.maxLength) return this.props.label
-      return `${this.props.label} (${this.state.value?.length ?? 0}/${this.slots.maxLength})`
-    }
-
-    handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      this.setState((st) => ({ ...st, value: event.target.value }))
-    }
-
-    handlePaste = async () => {
-      try {
-        const clipboardText = await navigator.clipboard.readText()
-        this.setState({ value: clipboardText })
-      } catch (error) {
-        console.error('Error clipboard:', error)
-      }
-    }
-  }
-  return InputBase
-}
-
-export default CreateInputBase
-
-// export type InputTextType<T> = ReturnType<typeof CreateInputBase<T>>
-
-const LoadingCircularProgress: FC = () => (
-  <div>
-    <CircularProgress size={24} />
-  </div>
-)
-
-const WrapImage = styled(Box)({
-  fontSize: '1rem',
-  height: 'var(--input-base-image-size, 54px)',
-  width: 'var(--input-base-image-size, 54px)',
-  position: 'relative',
-  borderRadius: '8px',
-  boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
-  overflow: 'hidden',
-  '& > img': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    backgroundRepeat: 'no-repeat',
-    height: '100%',
-    width: '100%',
-    backgroundSize: 'contain'
-  },
-  '& > div': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: '100%',
-    width: '100%',
-    background: '#fafafa',
-    zIndex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-})

package/src/form/create.input.file.tsx

@@ -1,76 +0,0 @@
-import React, { Component } from 'react'
-import { TextField, TextFieldProps } from '@mui/material'
-import { IFormInputBase } from './types'
-import { getErrorMessage } from './helper'
-
-interface IParam {
-  accept?: string
-  multiple?: boolean
-}
-
-export default function CreateInputFile<T extends Object>(params?: IParam) {
-  interface IProps extends IFormInputBase<T> {
-    accept?: string
-    multiple?: boolean
-    textFieldProps?: TextFieldProps
-  }
-
-  interface IState {}
-
-  class FormInputFile extends Component<IProps, IState> {
-    refInput: HTMLInputElement | null = null
-
-    render() {
-      const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)
-      const configs = this.getMergeConfig()
-      return (
-        <TextField
-          inputRef={(ref) => (this.refInput = ref)}
-          name={this.props.name?.toString()}
-          error={eMessage.error}
-          helperText={eMessage.message}
-          variant='outlined'
-          type='file'
-          fullWidth
-          onChange={this.handleChange}
-          onClick={this.handleClick}
-          onFocus={this.handleFocus}
-          {...this.props.textFieldProps}
-          inputProps={{
-            accept: configs.accept,
-            multiple: configs.multiple,
-            ...this.props.textFieldProps?.inputProps
-          }}
-        />
-      )
-    }
-
-    getMergeConfig = () => ({
-      accept: params?.accept ?? this.props.accept,
-      multiple: params?.multiple ?? this.props.multiple ?? false
-    })
-
-    handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-      if (!this.props.name) return
-      this.props.onBlur && this.props.onBlur(this.props.name)
-    }
-
-    isExploreOpen = false
-
-    handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
-      this.isExploreOpen = true
-    }
-
-    handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-      if (this.isExploreOpen === true) {
-        this.isExploreOpen = false
-        if (!this.props.name) return
-        this.props.onBlur && this.props.onBlur(this.props.name)
-        setTimeout(() => {
-          this.refInput && this.refInput.blur()
-        }, 50)
-      }
-    }
-  }
-  return FormInputFile
-}

package/src/form/create.select-simple.tsx

@@ -1,101 +0,0 @@
-import React, { Component } from 'react'
-import { Collapse, FormControl, FormHelperText, InputLabel, MenuItem, Select, SelectProps } from '@mui/material'
-import { IFormInputBase } from './types'
-import { getErrorMessage } from './helper'
-import { mergeObjects } from '../utils'
-
-export interface ISelectSimpleOption<TModel extends string = string> {
-  name: string
-  value: TModel
-}
-
-interface ISlots {
-  selectProps?: Omit<SelectProps, 'variant'>
-}
-
-interface IArgs extends ISlots {
-  options?: ISelectSimpleOption[]
-}
-
-const CreateSelectSimple = function <TModel = any>(args?: IArgs) {
-  interface IProps extends Partial<IFormInputBase<TModel>> {
-    options?: ISelectSimpleOption[]
-    onChange?: (value: ISelectSimpleOption) => void
-    slots?: ISlots
-    fullWidth?: boolean
-  }
-  interface IState {
-    value?: string
-  }
-  class SelectSimple extends Component<IProps, IState> {
-    constructor(props: IProps) {
-      super(props)
-      this.state = { value: this.getDefaultValue()?.toString() }
-    }
-    mapProps = (): SelectProps => {
-      const label = this.getLabel()
-      const tfp: SelectProps = {
-        id: this.props.name?.toString(),
-        labelId: this.props.name?.toString() + label,
-        name: this.props.name?.toString(),
-        label: label,
-        defaultValue: this.getDefaultValue(),
-        value: this.state.value,
-        onChange: (event) => {
-          const value: string = event.target.value + ''
-          this.setState({ value }, () => {
-            if (!!this.props.name) {
-              this.props.onBlur && this.props.onBlur(this.props.name)
-            }
-            const options = this.getOptions()
-            const temp = options.find((x) => x.value?.toString() === value)
-            if (!temp) return
-            this.props.onChange && this.props.onChange(temp)
-          })
-        },
-        disabled: this.props.disabled,
-        fullWidth: this.props.fullWidth !== undefined ? this.props.fullWidth : true
-      }
-      const selectProps = this.props.slots?.selectProps ?? args?.selectProps
-      return mergeObjects({}, tfp, selectProps)
-    }
-    render() {
-      const data = this.getOptions()
-      const label = this.getLabel()
-      const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)
-      return (
-        <React.Fragment>
-          {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.getDefaultValue()} />}
-          <FormControl fullWidth disabled={this.props.disabled} error={errorMessage.error}>
-            <InputLabel id={this.props.name?.toString() + label}>{label}</InputLabel>
-            <Select {...this.mapProps()}>
-              {data.map((item) => (
-                <MenuItem key={item.value} value={item.value}>
-                  {item.name}
-                </MenuItem>
-              ))}
-            </Select>
-            <Collapse in={errorMessage.error}>
-              <FormHelperText>{errorMessage.message}</FormHelperText>
-            </Collapse>
-          </FormControl>
-        </React.Fragment>
-      )
-    }
-    getLabel = () => {
-      if (!!this.props.label && typeof this.props.label === 'string') return this.props.label
-      return this.props.name?.toString() ?? ''
-    }
-    getDefaultValue = () => {
-      const { data, name } = this.props
-      const options = this.getOptions()
-      return this.props.defaultValue?.toString() ?? (!!data && !!name ? data[name] : undefined) ?? options[0]?.value
-    }
-    getOptions = (): ISelectSimpleOption[] => {
-      return args?.options ?? this.props.options ?? []
-    }
-  }
-  return SelectSimple
-}
-export default CreateSelectSimple
-export type SelectSimpleType<TModel> = ReturnType<typeof CreateSelectSimple<TModel>>