dinocollab-core 1.0.1 → 1.0.2

package/src/api-context/alert-global.tsx

@@ -1,174 +0,0 @@
-import React, { FC, useCallback, useEffect, useState } from 'react'
-import { Box, Stack, styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material'
-import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert'
-
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
-  return <MuiAlert elevation={6} ref={ref} variant='standard' {...props} style={{ minWidth: '300px' }} />
-})
-
-interface MessageData {
-  id: string
-  text: string
-  type: AlertColor
-  duration?: number
-}
-
-interface IOptions {
-  duration?: number
-}
-
-interface IApiAlert {
-  PushMessage: (data: MessageData) => void
-  PushInfo: (data: string) => void
-  PushError: (data: string) => void
-  PushWarning: (data: string) => void
-  PushSuccess: (data: string) => void
-}
-
-export interface IApiContext {
-  ApiAlert?: IApiAlert
-}
-
-export const ApiAlertContext: IApiContext = {}
-
-const RenderArea = (messages: MessageData[], onClose: (data: MessageData) => void) => {
-  return messages.map((x, i) => {
-    return <Message key={x.id + i} data={x} IsOpen={true} handleClose={onClose} autoDurationHide={x.duration} />
-  })
-}
-
-function AlertGlobal() {
-  const [Messages, setMessages] = useState<MessageData[]>([])
-  const _PushMessage = useCallback((data: MessageData) => {
-    setMessages((st) => [...st, data])
-  }, [])
-  const _HandleClose = useCallback(
-    (data: MessageData) => {
-      const index = Messages.findIndex((x) => x.id === data.id)
-      Messages.splice(index, 1)
-      setMessages([...Messages])
-    },
-    [Messages]
-  )
-
-  useEffect(() => {
-    ApiAlertContext.ApiAlert = {
-      ...(ApiAlertContext.ApiAlert ? ApiAlertContext.ApiAlert : {}),
-      PushMessage: _PushMessage,
-      PushError: function (data: string, options?: IOptions) {
-        this.PushMessage({
-          id: new Date().getTime().toString(),
-          text: data,
-          type: 'error',
-          duration: options?.duration || 15000
-        })
-      },
-      PushInfo: function (data: string, options?: IOptions) {
-        this.PushMessage({
-          id: new Date().getTime().toString(),
-          text: data,
-          type: 'info',
-          duration: options?.duration || 6000
-        })
-      },
-      PushWarning: function (data: string, options?: IOptions) {
-        this.PushMessage({
-          id: new Date().getTime().toString(),
-          text: data,
-          type: 'warning',
-          duration: options?.duration || 6000
-        })
-      },
-      PushSuccess: function (data: string, options?: IOptions) {
-        this.PushMessage({
-          id: new Date().getTime().toString(),
-          text: data,
-          type: 'success',
-          duration: options?.duration || 3000
-        })
-      }
-    }
-  }, [_PushMessage])
-
-  return (
-    <Wrap>
-      <Stack spacing={2} sx={{ maxWidth: '300px' }}>
-        {RenderArea(Messages, _HandleClose)}
-      </Stack>
-    </Wrap>
-  )
-}
-export default AlertGlobal
-
-interface MessageProps {
-  IsOpen: boolean
-  handleClose: (data: MessageData) => void
-  data: MessageData
-  autoDurationHide?: number
-}
-const Message: FC<MessageProps> = (props) => {
-  const _handleClose = useCallback(() => props.handleClose(props.data), [props])
-
-  useEffect(() => {
-    let Timer: any = null
-    if (props.autoDurationHide) {
-      Timer = setTimeout(() => {
-        props.handleClose(props.data)
-      }, props.autoDurationHide)
-    }
-    return () => {
-      clearTimeout(Timer as any)
-    }
-  }, [props])
-  return (
-    <Alert onClose={_handleClose} severity={props.data.type}>
-      {props.data.text}
-    </Alert>
-  )
-}
-
-const Wrap = styled(Box)({
-  position: 'fixed',
-  top: 'calc(var(--height-header) + 20px)',
-  right: '50px',
-  zIndex: 2000,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'center'
-})
-
-interface AlertDialogProps {
-  IsOpen: boolean
-  onClose?: () => void
-  onAccept?: () => void
-  Title: string
-  Message: string
-}
-export const AlertDialog: React.FC<AlertDialogProps> = (props) => {
-  const [Open, setOpen] = React.useState(props.IsOpen)
-  React.useEffect(() => {
-    setOpen(props.IsOpen)
-  }, [props.IsOpen])
-  const _handleClose = React.useCallback(() => {
-    setOpen(false)
-    props.onClose && props.onClose()
-  }, [props])
-  return (
-    <div>
-      <Dialog open={Open} onClose={_handleClose} aria-labelledby='alert-dialog-title' aria-describedby='alert-dialog-description'>
-        <DialogTitle id='alert-dialog-title'>{props.Title}</DialogTitle>
-        <DialogContent>
-          <DialogContentText id='alert-dialog-description'>{props.Message}</DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={props.onAccept} autoFocus color='info'>
-            Ok
-          </Button>
-          <Button onClick={_handleClose} color='error'>
-            Cancel
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
-  )
-}

package/src/api-context/drawer-global.tsx

@@ -1,116 +0,0 @@
-import React, { Component, ReactNode } from 'react'
-import { Box, Divider, Drawer, DrawerProps, IconButton, styled, Typography } from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-
-const drawerGlobalClasses = {
-  root: 'DrawerGlobal-root',
-  title: 'DrawerGlobal-title',
-  content: 'DrawerGlobal-content',
-  fullHeight: 'DrawerGlobal-fullHeight'
-}
-
-interface IProps {}
-
-interface IState {
-  title?: ReactNode
-  icon?: ReactNode
-  fullHeight?: boolean
-  anchor?: DrawerProps['anchor']
-  /** @default true */
-  backdropClickeable?: boolean
-  renderContent?: () => ReactNode
-}
-
-type TReason = 'backdropClick' | 'escapeKeyDown'
-
-interface DrawerGlobalApiType {
-  open: (state: IState) => void
-  close: (reason?: TReason) => void
-}
-
-const DrawerGlobalApi: DrawerGlobalApiType = {
-  close: () => {
-    console.warn('DrawerGlobal provider not found!')
-  },
-  open: () => {
-    console.warn('DrawerGlobal provider not found!')
-  }
-}
-
-class DrawerGlobalProvider extends Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props)
-    this.state = {}
-  }
-
-  close = (reason?: TReason) => {
-    if (this.state.backdropClickeable === false && reason === 'backdropClick') return
-    this.setState({ renderContent: undefined })
-  }
-
-  open = (state: IState) => this.setState(state)
-
-  componentDidMount() {
-    DrawerGlobalApi.open = this.open
-    DrawerGlobalApi.close = this.close
-  }
-
-  render() {
-    return (
-      <Drawer anchor={this.state.anchor} open={Boolean(this.state.renderContent)} onClose={(_, reason) => this.close(reason)}>
-        <Wrap className={this.getClasses()}>
-          <div className={drawerGlobalClasses.title}>
-            {this.state.icon}
-            {this.renderTitle()}
-            <Box sx={{ flex: 1 }} />
-            <IconButton onClick={() => this.close()}>
-              <CloseIcon />
-            </IconButton>
-          </div>
-          <Divider variant='middle' />
-          <div className={drawerGlobalClasses.content}>{this.state.renderContent && this.state.renderContent()}</div>
-        </Wrap>
-      </Drawer>
-    )
-  }
-
-  renderTitle = () => {
-    if (typeof this.state.title === 'string') {
-      return (
-        <Typography variant='h6' noWrap>
-          {this.state.title}
-        </Typography>
-      )
-    }
-    return this.state.title
-  }
-
-  getClasses = () => {
-    const classes = [drawerGlobalClasses.root]
-    if (this.state.fullHeight) classes.push(drawerGlobalClasses.fullHeight)
-    return classes.join(' ')
-  }
-}
-
-const DrawerGlobal = {
-  Provider: DrawerGlobalProvider,
-  Api: DrawerGlobalApi
-}
-
-export default DrawerGlobal
-
-const Wrap = styled(Box)({
-  '--height-title': '56px',
-  [`.${drawerGlobalClasses.title}`]: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 'var(--height-title)',
-    padding: '0 12px',
-    gap: '6px'
-  },
-  [`&.${drawerGlobalClasses.fullHeight}`]: {
-    [`.${drawerGlobalClasses.content}`]: {
-      height: 'calc(100vh - var(--height-title) - 60px)'
-    }
-  }
-})

package/src/api-context/global-modal.tsx

@@ -1,109 +0,0 @@
-import React, { Component } from 'react'
-import { Backdrop, Box, Modal, SxProps, styled } from '@mui/material'
-
-export interface GlobalModalState {
-  sx?: SxProps
-  sxWrap?: SxProps
-  /** @default true */
-  backdropActivated?: boolean
-  onClose?: (reason?: TModalReason) => void
-  renderContent?: () => React.ReactNode
-}
-
-export type TModalReason = 'backdropClick' | 'escapeKeyDown'
-
-interface GlobalModalProps {}
-
-export type TShowModal = (value: GlobalModalState) => void
-
-export type TCloseModal = (event?: {}, reason?: TModalReason) => void
-
-export interface IGlobalModalContext {
-  show: TShowModal
-  close: TCloseModal
-}
-
-export const GlobalModalContext = React.createContext<IGlobalModalContext>({
-  close: () => {
-    console.warn('GlobalModal provider not found!')
-  },
-  show: () => {
-    console.warn('GlobalModal provider not found!')
-  }
-})
-
-export interface IMapGlobalModal {
-  context: IGlobalModalContext
-}
-
-export const MapGlobalModalContext = (context: (state: IGlobalModalContext) => React.ReactNode) => (
-  <GlobalModalContext.Consumer>{context}</GlobalModalContext.Consumer>
-)
-
-class GlobalModal extends Component<React.PropsWithChildren<GlobalModalProps>, GlobalModalState> implements IGlobalModalContext {
-  constructor(props: any) {
-    super(props)
-    this.state = {}
-  }
-
-  show: TShowModal = (value) => {
-    this.setState(value)
-  }
-
-  close: TCloseModal = (_, reason) => {
-    if (reason === 'backdropClick' && this.state.backdropActivated === false) return
-    this.setState({ renderContent: undefined })
-  }
-
-  render() {
-    return (
-      <GlobalModalContext.Provider value={this}>
-        {this.props.children}
-        <Modal
-          open={!!this.state.renderContent}
-          onClose={this.close}
-          slots={{ backdrop: Backdrop }}
-          slotProps={{ backdrop: { timeout: 300 } }}
-          sx={this.state.sx}
-        >
-          <Wrapper sx={this.state.sxWrap}>{this.renderContent()}</Wrapper>
-        </Modal>
-      </GlobalModalContext.Provider>
-    )
-  }
-
-  renderContent = (): React.ReactNode => {
-    return this.state.renderContent ? this.state.renderContent() : <></>
-  }
-}
-export default GlobalModal
-
-const Wrapper = styled(Box)({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  outline: 'none'
-})
-
-export interface IApiGlobalModalContextProps {
-  contextGlobalModal: IGlobalModalContext
-}
-
-export const withApiGlobalModalContext = <P extends IApiGlobalModalContextProps>(Component: React.ComponentType<P>) => {
-  return (props: Omit<P, keyof IApiGlobalModalContextProps>) => {
-    return (
-      <GlobalModal>
-        {MapGlobalModalContext((context) => (
-          <Component {...(props as P)} contextGlobalModal={context} />
-        ))}
-      </GlobalModal>
-    )
-  }
-}
-
-export const withApiGlobalModalConsumerContext = <P extends IApiGlobalModalContextProps>(Component: React.ComponentType<P>) => {
-  return (props: Omit<P, keyof IApiGlobalModalContextProps>) => {
-    return MapGlobalModalContext((context) => <Component {...(props as P)} contextGlobalModal={context} />)
-  }
-}

package/src/api-context/index.ts

@@ -1,13 +0,0 @@
-export { default as ApiPopover } from './popover'
-export * from './popover'
-
-export { default as AlertGlobal } from './alert-global'
-export * from './alert-global'
-
-export { default as DrawerGlobal } from './drawer-global'
-
-export { default as GlobalModal } from './global-modal'
-export * from './global-modal'
-
-export { default as PopoverGlobal } from './popover-global'
-export * from './popover-global'

package/src/api-context/popover-global.tsx

@@ -1,107 +0,0 @@
-import React, { Component, PropsWithChildren } from 'react'
-import { Popover, PopoverProps, PopoverVirtualElement } from '@mui/material'
-import { ContentDefault } from './ui.units'
-
-export interface PopoverGlobalState {
-  anchorEl?: Element | (() => Element) | PopoverVirtualElement | (() => PopoverVirtualElement) | null
-  popoverProps?: Omit<PopoverProps, 'open'>
-  content: React.ReactNode
-}
-
-export type OpenPopover = (value: PopoverGlobalState) => void
-
-export type ClosePopover = (reason?: 'backdropClick' | 'escapeKeyDown') => void
-
-export interface PopoverGlobalContext {
-  open: OpenPopover
-  close: ClosePopover
-}
-
-export const PopoverGlobalApi: PopoverGlobalContext = {
-  open: () => {
-    console.warn('PopoverGlobal provider not found!')
-  },
-  close: () => {
-    console.warn('PopoverGlobal provider not found!')
-  }
-}
-
-export const PopoverGlobalContext = React.createContext<PopoverGlobalContext>(PopoverGlobalApi)
-
-export const MapPopoverGlobalContext = (context: (state: PopoverGlobalContext) => React.ReactNode) => (
-  <PopoverGlobalContext.Consumer>{context}</PopoverGlobalContext.Consumer>
-)
-
-interface IProps extends PropsWithChildren {}
-
-export class PopoverGlobalProvider extends Component<IProps, PopoverGlobalState> {
-  constructor(props: any) {
-    super(props)
-    this.state = { anchorEl: null, content: <ContentDefault /> }
-  }
-
-  componentDidMount() {
-    PopoverGlobalApi.open = this.openPopover
-    PopoverGlobalApi.close = this.closePopover
-  }
-
-  render() {
-    return (
-      <PopoverGlobalContext.Provider value={{ open: this.openPopover, close: this.closePopover }}>
-        {this.props.children}
-        <Popover
-          sx={{ '& .MuiPaper-root.MuiPaper-elevation': { overflow: 'hidden' } }}
-          anchorEl={this.state.anchorEl}
-          open={Boolean(this.state.anchorEl)}
-          onClose={(_, reason) => this.closePopover(reason)}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-          disableScrollLock
-          {...this.state.popoverProps}
-        >
-          {this.state.content}
-        </Popover>
-      </PopoverGlobalContext.Provider>
-    )
-  }
-
-  openPopover: OpenPopover = (option) => {
-    clearTimeout(this.timer)
-    this.setState({ ...option })
-  }
-
-  timer: any
-  closePopover: ClosePopover = () => {
-    clearTimeout(this.timer)
-    this.setState({ anchorEl: null }, () => {
-      this.timer = setTimeout(() => {
-        this.setState({ content: <ContentDefault /> })
-      }, 500)
-    })
-  }
-}
-
-export interface IPopoverGlobalContextProps {
-  contextPopover: PopoverGlobalContext
-}
-
-export const withPopoverGlobalContext = <P extends IPopoverGlobalContextProps>(Component: React.ComponentType<P>) => {
-  return (props: Omit<P, keyof IPopoverGlobalContextProps>) => {
-    return (
-      <PopoverGlobalProvider>
-        {MapPopoverGlobalContext((context) => (
-          <Component {...(props as P)} contextPopover={context} />
-        ))}
-      </PopoverGlobalProvider>
-    )
-  }
-}
-
-const PopoverGlobal = {
-  Provider: PopoverGlobalProvider,
-  Api: PopoverGlobalApi,
-  Context: PopoverGlobalContext,
-  mapContext: MapPopoverGlobalContext
-}
-
-export default PopoverGlobal

package/src/api-context/popover.tsx

@@ -1,89 +0,0 @@
-import React, { Component } from 'react'
-import { Popover, PopoverProps, PopoverVirtualElement } from '@mui/material'
-import { ContentDefault } from './ui.units'
-
-export interface IPopoverOptions {
-  anchorEl?: Element | (() => Element) | PopoverVirtualElement | (() => PopoverVirtualElement) | null
-  popoverProps?: Omit<PopoverProps, 'open'>
-  content: React.ReactNode
-}
-
-export type TShowPopover = (option: IPopoverOptions) => void
-
-export type TClosePopover = (reason?: 'backdropClick' | 'escapeKeyDown') => void
-
-export interface IApiPopoverContext {
-  showPopover: TShowPopover
-  closePopover: TClosePopover
-}
-
-export const ApiPopoverContext = React.createContext<IApiPopoverContext>({
-  showPopover: () => {
-    console.warn('ApiPopover provider not found!')
-  },
-  closePopover: () => {
-    console.warn('ApiPopover provider not found!')
-  }
-})
-
-export const MapApiPopoverContext = (context: (state: IApiPopoverContext) => React.ReactNode) => (
-  <ApiPopoverContext.Consumer>{context}</ApiPopoverContext.Consumer>
-)
-
-interface IProps {}
-interface IState extends IPopoverOptions {}
-type TProps = React.PropsWithChildren<IProps>
-class ApiPopover extends Component<TProps, IState> implements IApiPopoverContext {
-  constructor(props: any) {
-    super(props)
-    this.state = { anchorEl: null, content: <ContentDefault /> }
-  }
-  render() {
-    return (
-      <ApiPopoverContext.Provider value={this}>
-        {this.props.children}
-        <Popover
-          sx={{ '& .MuiPaper-root.MuiPaper-elevation': { overflow: 'hidden' } }}
-          anchorEl={this.state.anchorEl}
-          open={Boolean(this.state.anchorEl)}
-          onClose={(_, reason) => this.closePopover(reason)}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-          disableScrollLock
-          {...this.state.popoverProps}
-        >
-          {this.state.content}
-        </Popover>
-      </ApiPopoverContext.Provider>
-    )
-  }
-  showPopover = (option: IPopoverOptions) => {
-    clearTimeout(this.timer)
-    this.setState({ ...option })
-  }
-  timer: any
-  closePopover: TClosePopover = () => {
-    clearTimeout(this.timer)
-    this.setState({ anchorEl: null }, () => {
-      this.timer = setTimeout(() => {
-        this.setState({ content: <ContentDefault /> })
-      }, 500)
-    })
-  }
-}
-export default ApiPopover
-
-export interface IApiPopoverContextProps {
-  contextPopover: IApiPopoverContext
-}
-export const withApiPopoverContext = <P extends IApiPopoverContextProps>(Component: React.ComponentType<P>) => {
-  return (props: Omit<P, keyof IApiPopoverContextProps>) => {
-    return (
-      <ApiPopover>
-        {MapApiPopoverContext((context) => (
-          <Component {...(props as P)} contextPopover={context} />
-        ))}
-      </ApiPopover>
-    )
-  }
-}

package/src/api-context/ui.units.tsx

@@ -1,10 +0,0 @@
-import React, { FC } from 'react'
-import { Box, Typography } from '@mui/material'
-
-export const ContentDefault: FC = () => (
-  <Box sx={{ p: '9px 12px', m: '12px', backgroundColor: 'rgba(0,0,0,0.1)' }}>
-    <Typography variant='caption' sx={{ fontWeight: 600, fontStyle: 'italic' }}>
-      Content
-    </Typography>
-  </Box>
-)

package/src/components/copy-to-clipboard.tsx

@@ -1,86 +0,0 @@
-import React, { Component, ComponentType } from 'react'
-import { Box, ButtonProps, IconButton, Tooltip, TooltipProps } from '@mui/material'
-import copy from 'clipboard-copy'
-import DoneIcon from '@mui/icons-material/Done'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-
-interface IProps {
-  value: string
-  slots?: {
-    tooltipProps?: Partial<TooltipProps>
-    button?: ComponentType<{ onClick: () => void; copied?: boolean }>
-    buttonProps?: ButtonProps
-  }
-}
-
-interface IState {
-  showTooltip: boolean
-  copied: boolean
-}
-
-class CopyToClipboard extends Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props)
-    this.state = { showTooltip: false, copied: false }
-  }
-
-  render() {
-    const leaveDelay = this.state.copied ? this.debounceTime.time - 200 : 0
-    const { title, ...tooltipProps } = this.props.slots?.tooltipProps ?? {}
-    const titleValue = this.state.copied ? 'Copied to clipboard!' : (title ?? 'Copy to clipboard')
-    return (
-      <Tooltip
-        arrow
-        title={titleValue}
-        leaveDelay={leaveDelay}
-        open={this.state.showTooltip}
-        onOpen={() => this.setState({ showTooltip: true })}
-        onClose={() => this.setState({ showTooltip: false })}
-        {...tooltipProps}
-      >
-        <Box sx={{ display: 'inline-block', flex: '0 0 auto' }}>{this.renderIcon()}</Box>
-      </Tooltip>
-    )
-  }
-
-  renderIcon = () => {
-    if (this.props.slots?.button) {
-      const ButtonComp = this.props.slots.button
-      return <ButtonComp onClick={this.handleClickCopy} copied={this.state.copied} />
-    }
-    const Icon = this.state.copied ? DoneIcon : ContentCopyIcon
-    return (
-      <IconButton onClick={this.handleClickCopy} {...this.props.slots?.buttonProps}>
-        <Icon fontSize='small' sx={{ color: '#606060' }} />
-      </IconButton>
-    )
-  }
-
-  handleClickCopy = () => {
-    this.debounceTime.start()
-    this.onCopy()
-  }
-
-  private debounceTime = {
-    cache: 0 as any,
-    time: 1500,
-    start: () => {
-      this.debounceTime.clear()
-      this.setState({ copied: true }, () => {
-        this.debounceTime.cache = setTimeout(() => {
-          this.setState({ copied: false })
-        }, this.debounceTime.time)
-      })
-    },
-    clear: () => {
-      clearTimeout(this.debounceTime.cache)
-    }
-  }
-
-  private onCopy = () => {
-    copy(this.props.value)
-    this.setState({ showTooltip: true })
-  }
-}
-
-export default CopyToClipboard