dinocollab-core 1.0.0

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

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

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

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

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

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

@@ -0,0 +1,213 @@
+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
+  }, [])
+}