dinocollab-core 1.0.0 → 1.0.2

package/src/lab/create.select-mul-with-api/index.tsx

@@ -1,271 +0,0 @@
-import React, { Component } from 'react'
-import { alpha, colors, Container, styled } from '@mui/material'
-import { GridPaginationModel, GridRowSelectionModel } from '@mui/x-data-grid'
-import { TableCustom } from './table-custom'
-import { Buttons, InputSearchLocal, SwitchUnselected } from './ui.units'
-import { CreateFilterBar, FilterBarParams, FilterState } from '../filter-bar'
-import { FilterStateCustom, SeclectMulFetchData, SeclectMulFetchTotal, SelectModel } from './types'
-
-const selectMulClasses = {
-  root: 'FormSelectMul-root',
-  submiting: 'FormSelectMul-submiting',
-  section: 'FormSelectMul-section',
-  sectionRight: 'FormSelectMul-sectionRight',
-  sectionLeft: 'FormSelectMul-sectionLeft'
-}
-
-interface IProps<T> {
-  fetchData?: SeclectMulFetchData<T>
-  fetchTotal?: SeclectMulFetchTotal
-  onSubmit?: (value: SelectModel[]) => Promise<void>
-}
-
-interface IState<T> {
-  loading?: boolean
-  submiting?: boolean
-  filterState: FilterState<T>
-  pagination: GridPaginationModel
-  rows: SelectModel[]
-  totalRows: number
-  rowSelecteds: SelectModel[]
-  searchKeyLocal?: string
-  isUnselected?: boolean
-}
-
-interface SelectMulWithApiParams<T> {
-  filterConfig: FilterBarParams<T>
-}
-
-function CreateSelectMulWithApi<T>(params: SelectMulWithApiParams<T>) {
-  const FilterBarInstance = CreateFilterBar<T>(params.filterConfig)
-
-  class SelectMulWithApi extends Component<IProps<T>, IState<T>> {
-    abortController: AbortController | null = null
-    maxSelected: number = 100
-    defaultPagination: GridPaginationModel = { page: 0, pageSize: 100 }
-    constructor(props: IProps<T>) {
-      super(props)
-      this.state = {
-        rows: [],
-        totalRows: 0,
-        rowSelecteds: [],
-        filterState: { filter: {} },
-        pagination: this.defaultPagination
-      }
-    }
-
-    get mergeConfig() {
-      return {
-        fetchData: this.props.fetchData ?? (() => Promise.resolve({ items: [], totalItems: 0 })),
-        fetchTotal: this.props.fetchTotal ?? (() => Promise.resolve(0))
-      }
-    }
-
-    componentDidMount() {
-      this.fetchData({ fetchTotal: true })
-    }
-
-    componentWillUnmount() {
-      this.abortController?.abort()
-    }
-
-    render() {
-      const dataLeft = this.getDataLeft()
-      return (
-        <Wrap className={this.getRootClasses()} maxWidth={false}>
-          <div className={selectMulClasses.section}>
-            <div className={selectMulClasses.sectionLeft}>
-              <TableCustom
-                title='📂 Media Library'
-                featureMode='server'
-                loading={this.state.loading}
-                maxSelected={this.maxSelected}
-                rows={dataLeft.rows}
-                totalRows={this.state.totalRows}
-                pagination={this.state.pagination}
-                onPaginationChange={this.handelPaginationChange}
-                slots={{
-                  header: 'Videos',
-                  dataGridProps: { slotProps: { pagination: { size: 'small' } } },
-                  topBar: <FilterBarInstance value={this.state.filterState} onChange={this.handleFilterChange} />,
-                  renderAction: (x) => <Buttons.Add value={x} onClick={(e) => this.handleMoveSingle(e, x)} />,
-                  renderHeaderAction: (x) => (
-                    <>
-                      <SwitchUnselected checked={this.state.isUnselected} onChange={this.handleUnselectedChange} totalHidden={dataLeft.totalHidden} />
-                      <Buttons.AddToRight disabled={x.rowSelecteds.length < 1} onClick={() => this.handleAddToRight(x.rowSelecteds)} />
-                    </>
-                  )
-                }}
-              />
-            </div>
-            <div className={selectMulClasses.sectionRight}>
-              <TableCustom
-                title='📥 Selected Media'
-                maxSelected={this.maxSelected}
-                rows={this.getRowSelecteds()}
-                defaultPagination={this.defaultPagination}
-                slots={{
-                  header: 'Videos',
-                  title: {
-                    after: <Buttons.Submit loading={this.state.submiting} disabled={this.state.rowSelecteds.length < 1} onClick={this.handleSubmit} />
-                  },
-                  dataGridProps: { slotProps: { pagination: { size: 'small' } } },
-                  topBar: <InputSearchLocal onChange={(x) => this.setState({ searchKeyLocal: x })} />,
-                  renderAction: (x) => <Buttons.Remove onClick={(e) => this.handleRemoveSingle(e, x)} />,
-                  renderHeaderAction: (x) => (
-                    <Buttons.RemoveSelected disabled={x.rowSelecteds.length < 1} onClick={() => this.handleRemoveSelected(x.rowSelecteds)} />
-                  )
-                }}
-              />
-            </div>
-          </div>
-        </Wrap>
-      )
-    }
-
-    fetchData = async (options?: { fetchTotal?: boolean }) => {
-      try {
-        this.setState({ loading: true })
-        this.abortController?.abort()
-        this.abortController = new AbortController()
-
-        const filterCustom: FilterStateCustom<T> = { ...this.state.filterState, pagination: this.state.pagination }
-        const res = await this.mergeConfig.fetchData(filterCustom, this.abortController.signal)
-        if (!Array.isArray(res.items)) return
-        let totalRows = await this.getTotal(res.totalItems, options?.fetchTotal)
-        this.setState({ rows: res.items, totalRows, loading: false })
-      } catch {}
-    }
-
-    getRootClasses = () => {
-      const classes = [selectMulClasses.root]
-      if (this.state.submiting) classes.push(selectMulClasses.submiting)
-      return classes.filter((x) => !!x).join(' ')
-    }
-
-    getDataLeft = () => {
-      const setSelected = new Set(this.state.rowSelecteds.map((x) => x.value))
-      let { rows, isUnselected } = this.state
-      let totalHidden = 0
-      let list = [...rows]
-      if (isUnselected) {
-        list = list.filter((x) => !setSelected.has(x.value))
-        for (const row of rows) {
-          if (setSelected.has(row.value)) totalHidden++
-        }
-      }
-      return { rows: list.map<SelectModel>((x) => ({ ...x, disabled: setSelected.has(x.value) })), totalHidden }
-    }
-
-    getRowSelecteds = (): SelectModel[] => {
-      const { searchKeyLocal, rowSelecteds } = this.state
-      if (!searchKeyLocal) return rowSelecteds
-      return rowSelecteds.filter((x) => x.value.includes(searchKeyLocal) || x.label?.includes(searchKeyLocal))
-    }
-
-    getTotal = async (totalItems: number, fetchTotal?: boolean): Promise<number> => {
-      if (fetchTotal) return this.mergeConfig.fetchTotal(this.abortController?.signal)
-      return this.state.totalRows ?? totalItems
-    }
-
-    handleSubmit = async () => {
-      try {
-        this.setState({ submiting: true })
-        if (!this.props.onSubmit) return
-        await this.props.onSubmit(this.state.rowSelecteds)
-      } catch (error) {
-        throw error
-      } finally {
-        this.setState({ submiting: false })
-      }
-    }
-
-    handleFilterChange = (value?: FilterState<T>) => {
-      if (!value) return
-      this.setState({ filterState: value }, this.fetchData)
-    }
-
-    handelPaginationChange = (value: GridPaginationModel) => {
-      this.setState({ pagination: value }, this.fetchData)
-    }
-
-    handleUnselectedChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      this.setState({ isUnselected: e.target.checked })
-    }
-
-    handleMoveSingle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, item: SelectModel) => {
-      event.preventDefault()
-      event.stopPropagation()
-      if (!this.state.rowSelecteds.some((x) => x.value === item.value)) {
-        this.setState({ rowSelecteds: [...this.state.rowSelecteds, item] })
-      }
-    }
-
-    handleRemoveSingle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, item: SelectModel) => {
-      event.preventDefault()
-      event.stopPropagation()
-      this.setState({ rowSelecteds: this.state.rowSelecteds.filter((x) => x.value !== item.value) })
-    }
-
-    handleAddToRight = (value: GridRowSelectionModel) => {
-      const rowSelecteds = [...this.state.rowSelecteds]
-      const setSelected = new Set(rowSelecteds.map((x) => x.value))
-
-      const setNew = new Set(value)
-      const newList = this.state.rows.filter((x) => setNew.has(x.value))
-
-      for (const item of newList) {
-        if (!setSelected.has(item.value)) rowSelecteds.push(item)
-      }
-      this.setState({ rowSelecteds })
-    }
-
-    handleRemoveSelected = (value: GridRowSelectionModel) => {
-      const setValue = new Set(value)
-      this.setState({ rowSelecteds: this.state.rowSelecteds.filter((x) => !setValue.has(x.value)) })
-    }
-  }
-  return SelectMulWithApi
-}
-
-export * from './types'
-
-export default CreateSelectMulWithApi
-
-const Wrap = styled(Container)({
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  background: colors.common.white,
-  position: 'relative',
-  '.h-100': {
-    height: '100%'
-  },
-  [`.${selectMulClasses.section}`]: {
-    display: 'flex',
-    flex: 1,
-    gap: '20px'
-  },
-  [`.${selectMulClasses.sectionLeft}, .${selectMulClasses.sectionRight}`]: {
-    width: '50%',
-    flex: 1
-  },
-  [`&::after`]: {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    background: alpha(colors.common.white, 0.5),
-    zIndex: 1,
-    transition: 'linear 0.3s',
-    opacity: 0,
-    visibility: 'hidden'
-  },
-  [`&.${selectMulClasses.submiting}::after`]: {
-    opacity: 1,
-    visibility: 'visible'
-  }
-})

package/src/lab/create.select-mul-with-api/table-custom.tsx

@@ -1,194 +0,0 @@
-import React, { Component, ReactNode } from 'react'
-import { Box, styled, Typography } from '@mui/material'
-import { DataGrid, DataGridProps, GridColDef, GridFeatureMode, GridPaginationModel, GridRowSelectionModel } from '@mui/x-data-grid'
-import { SelectModel } from './types'
-
-const tableCustomClasses = {
-  root: 'TableCustom-root',
-  content: 'TableCustom-content',
-  header: 'TableCustom-header',
-  contentInner: 'TableCustom-contentInner'
-}
-
-interface IProps {
-  title: string
-  rows: SelectModel[]
-  featureMode?: GridFeatureMode
-  totalRows?: number
-  maxSelected?: number
-  pagination?: GridPaginationModel
-  defaultPagination?: GridPaginationModel
-  loading?: boolean
-  onPaginationChange?: DataGridProps['onPaginationModelChange']
-  isRowSelectable?: DataGridProps['isRowSelectable']
-  slots?: {
-    title?: { before?: ReactNode; after?: ReactNode }
-    renderAction?: (value: SelectModel) => ReactNode
-    renderHeaderAction?: (parmas: { rowSelecteds: GridRowSelectionModel }) => ReactNode
-    header?: ReactNode
-    topBar?: ReactNode
-    dataGridProps?: Partial<DataGridProps>
-  }
-}
-
-export class TableCustom extends Component<IProps> {
-  rowSelecteds: GridRowSelectionModel
-  constructor(props: IProps) {
-    super(props)
-    this.rowSelecteds = []
-  }
-
-  shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<{}>, nextContext: any): boolean {
-    if (this.props.rows.length !== nextProps.rows.length) this.rowSelecteds = []
-    return true
-  }
-
-  render() {
-    return (
-      <Wrap className={tableCustomClasses.root}>
-        <Box className={tableCustomClasses.header}>
-          {this.props.slots?.title?.before}
-          <Typography variant='subtitle1' gutterBottom sx={{ fontWeight: 700, flex: 1 }}>
-            {this.props.title}
-          </Typography>
-          {this.props.slots?.title?.after}
-        </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px', height: '48px', mb: '4px' }}>{this.props.slots?.topBar}</Box>
-        <div className={tableCustomClasses.content}>
-          <div className={tableCustomClasses.contentInner}>
-            <DataGridCustom {...this.getDataGridProps()} {...this.props.slots?.dataGridProps} />
-          </div>
-        </div>
-      </Wrap>
-    )
-  }
-
-  getDataGridProps = (): DataGridProps => {
-    const columns: GridColDef[] = this.getColumns()
-    const data = this.getData()
-    let obj: DataGridProps = {
-      rows: data.rows,
-      columns: columns,
-      getRowId: (x) => x.value,
-      initialState: { pagination: { paginationModel: this.props.defaultPagination } },
-      rowSelectionModel: data.rowSelecteds,
-      onRowSelectionModelChange: this.handleRowSelectionChange,
-      isRowSelectable: (x) => !x.row.disabled,
-      getRowClassName: (x) => (x.row.disabled ? 'Mui-disabled-row' : ''),
-      checkboxSelection: true
-    }
-    if (this.props.featureMode === 'server') {
-      obj = {
-        ...obj,
-        paginationMode: this.props.featureMode,
-        loading: this.props.loading,
-        rowCount: this.props.totalRows,
-        paginationModel: this.props.pagination,
-        onPaginationModelChange: this.props.onPaginationChange
-      }
-    }
-    return obj
-  }
-
-  getData = () => {
-    let list = [...this.props.rows]
-    const rowSelecteds = this.rowSelecteds.filter((x) => list.some((i) => i.value === x.toString() && !i.disabled))
-
-    if (this.props.maxSelected && rowSelecteds.length >= this.props.maxSelected) {
-      const selectedSet = new Set(rowSelecteds)
-      list = this.props.rows.map((x) => (selectedSet.has(x.value) ? x : { ...x, disabled: true }))
-    }
-
-    return { rows: list, rowSelecteds }
-  }
-
-  getColumns = (): GridColDef[] => {
-    const { slots } = this.props
-    const data = this.getData()
-    return [
-      {
-        field: 'value',
-        headerName: 'Medias',
-        sortable: false,
-        disableColumnMenu: true,
-        filterable: false,
-        flex: 1,
-        renderHeader: () => (
-          <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', pr: '2px' }}>
-            {this.renderHeader()}
-            {slots?.renderHeaderAction && slots.renderHeaderAction({ rowSelecteds: data.rowSelecteds })}
-          </Box>
-        ),
-        renderCell: (params: { row: SelectModel }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-            <Typography variant='body2' noWrap sx={{ flex: 1 }}>
-              {params.row.label ?? params.row.value}
-            </Typography>
-            {this.props.slots?.renderAction && this.props.slots.renderAction(params.row)}
-          </Box>
-        )
-      }
-    ]
-  }
-
-  renderHeader = () => {
-    const { slots } = this.props
-    if (!slots?.header || typeof slots?.header === 'string') {
-      return (
-        <Typography variant='body2' noWrap sx={{ flex: 1, fontWeight: 700 }}>
-          {slots?.header ?? 'Media'}
-        </Typography>
-      )
-    }
-    return slots?.header
-  }
-
-  handleRowSelectionChange = (value: GridRowSelectionModel) => {
-    if (this.props.maxSelected && value.length > this.props.maxSelected) {
-      this.rowSelecteds = value.slice(0, this.props.maxSelected)
-    } else {
-      this.rowSelecteds = value
-    }
-    this.forceUpdate()
-  }
-}
-
-const DataGridCustom = styled(DataGrid)({
-  border: 'none',
-  '.MuiDataGrid-columnHeaderTitleContainerContent': {
-    width: '100%'
-  },
-  '.Mui-disabled-row': {
-    pointerEvents: 'none',
-    opacity: 0.4
-  },
-  '& .MuiDataGrid-cell': {
-    borderBottom: 'none'
-  }
-})
-
-const Wrap = styled(Box)({
-  flex: 1,
-  paddingTop: '10px',
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: '300px',
-  [`.${tableCustomClasses.header}`]: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  [`.${tableCustomClasses.content}`]: {
-    flex: 1,
-    position: 'relative'
-  },
-  [`.${tableCustomClasses.contentInner}`]: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%'
-  }
-})
-
-const Custom = styled(Box)(({ theme }) => ({}))

package/src/lab/create.select-mul-with-api/types.ts

@@ -1,26 +0,0 @@
-import { FilterState } from '../filter-bar'
-
-export interface SelectModel<F = any> {
-  value: string
-  label?: string
-  disabled?: boolean
-  other?: F
-}
-
-export interface PaginationModel {
-  /** @default 0 */
-  page: number
-  /** @default 100 */
-  pageSize: number
-}
-
-export interface FilterStateCustom<T> extends FilterState<T> {
-  pagination: PaginationModel
-}
-
-export type SeclectMulFetchData<T> = (
-  filterState: FilterStateCustom<T>,
-  signal?: AbortSignal
-) => Promise<{ items: SelectModel<T>[]; totalItems: number }>
-
-export type SeclectMulFetchTotal = (signal?: AbortSignal) => Promise<number>

package/src/lab/create.select-mul-with-api/ui.units.tsx

@@ -1,163 +0,0 @@
-import React, { ChangeEvent, FC, useState } from 'react'
-import { IconButton, InputAdornment, InputBase, InputBaseProps } from '@mui/material'
-import { Box, Button, ButtonProps, FormControlLabel, styled, Switch, SwitchProps, Typography } from '@mui/material'
-import EastIcon from '@mui/icons-material/East'
-import ClearIcon from '@mui/icons-material/Clear'
-import CheckIcon from '@mui/icons-material/Check'
-import RemoveIcon from '@mui/icons-material/Remove'
-import SearchIcon from '@mui/icons-material/Search'
-import PlaylistRemoveIcon from '@mui/icons-material/PlaylistRemove'
-import { SelectModel } from './types'
-import { LoadingButton, LoadingButtonProps } from '../../components/loading-buttons'
-import HelpTooltip from '../../components/help-tooltip'
-
-export const ButtonAddToRight: FC<ButtonProps> = (props) => (
-  <Button size='small' endIcon={<EastIcon fontSize='small' />} sx={{ whiteSpace: 'nowrap', flex: '0 0 auto', textTransform: 'none' }} {...props}>
-    Add to Right
-  </Button>
-)
-
-export const ButtonRemoveSelected: FC<ButtonProps> = (props) => (
-  <Button
-    size='small'
-    endIcon={<PlaylistRemoveIcon fontSize='small' />}
-    sx={{ whiteSpace: 'nowrap', flex: '0 0 auto', textTransform: 'none' }}
-    {...props}
-  >
-    Remove Selected
-  </Button>
-)
-
-export const ButtonAdd: FC<Omit<ButtonProps, 'value'> & { value: SelectModel }> = ({ value, ...props }) => {
-  if (value.disabled) {
-    return (
-      <Box sx={{ padding: '5px' }}>
-        <CheckIcon fontSize='small' />
-      </Box>
-    )
-  }
-  return (
-    <IconButton size='small' {...props}>
-      <EastIcon fontSize='small' />
-    </IconButton>
-  )
-}
-
-export const ButtonRemove: FC<ButtonProps> = (props) => (
-  <IconButton size='small' {...props}>
-    <RemoveIcon fontSize='small' />
-  </IconButton>
-)
-
-export const ButtonSubmit: FC<LoadingButtonProps> = (props) => (
-  <LoadingButton size='small' variant='contained' sx={{ minWidth: '120px' }} {...props}>
-    Submit
-  </LoadingButton>
-)
-
-export const Buttons = {
-  AddToRight: ButtonAddToRight,
-  RemoveSelected: ButtonRemoveSelected,
-  Add: ButtonAdd,
-  Remove: ButtonRemove,
-  Submit: ButtonSubmit
-}
-
-// export const FooterBar: FC<ButtonProps> = (props) => (
-//   <Box sx={{ display: 'flex', justifyContent: 'flex-end', padding: '5px 10px 5px' }}>
-//     <Button size='small' variant='contained' disabled={props.disabled} onClick={props.onClick}>
-//       Confirm Selection
-//     </Button>
-//   </Box>
-// )
-
-export const SwitchUnselected: FC<SwitchProps & { totalHidden?: number }> = ({ totalHidden: hiddenCount, ...props }) => (
-  <FormControlLabel
-    control={<Switch size='small' {...props} />}
-    label={
-      <Typography variant='body2'>
-        only unselected <Typography variant='caption'> (hidden: {hiddenCount ?? 0})</Typography>
-      </Typography>
-    }
-  />
-)
-
-interface InputSearchLocalProps extends Omit<InputBaseProps, 'onChange'> {
-  onChange?: (value: string) => void
-}
-
-export const InputSearchLocal: FC<InputSearchLocalProps> = ({ onChange, ...props }) => {
-  const [value, setValue] = useState('')
-
-  const searchIncludes = ['Media name']
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-    onChange && onChange(event.target.value)
-  }
-
-  const handleClear = () => {
-    setValue('')
-    onChange && onChange('')
-  }
-
-  return (
-    <InputBaseCustom
-      placeholder='Find in selected list'
-      fullWidth
-      value={value}
-      onChange={handleChange}
-      startAdornment={
-        <InputAdornment position='start'>
-          <SearchIcon />
-        </InputAdornment>
-      }
-      endAdornment={
-        <InputAdornment position='end'>
-          {value && (
-            <IconButton size='small' onClick={handleClear}>
-              <ClearIcon fontSize='small' />
-            </IconButton>
-          )}
-          <HelpTooltip small title='The search includes'>
-            <WrapList>
-              {searchIncludes.map((item, index) => (
-                <Typography key={index} component='li' variant='body2'>
-                  {item}
-                </Typography>
-              ))}
-            </WrapList>
-          </HelpTooltip>
-        </InputAdornment>
-      }
-      {...props}
-    />
-  )
-}
-
-const InputBaseCustom = styled(InputBase)({
-  height: '44px',
-  borderRadius: '6px',
-  padding: '0 10px',
-  transition: 'all linear 0.2s',
-  backgroundColor: '#fafafa',
-  '&:hover': { backgroundColor: '#ededed' }
-})
-
-const WrapList = styled('ul')({
-  paddingLeft: '1.7rem',
-  marginBottom: 0,
-  li: {
-    position: 'relative',
-    textAlign: 'justify',
-    '&::before': {
-      content: '"►"',
-      display: 'block',
-      position: 'absolute',
-      top: '50%',
-      right: 'calc(100% + 6px)',
-      transform: 'translateY(-50%)',
-      fontSize: '0.9em'
-    }
-  }
-})