@fixefy/fixefy-ui-components 0.0.42 → 0.0.44

package/src/FxAsyncDropdown/FxAsyncDropdown.tsx

@@ -1,362 +0,0 @@
-// @ts-ignore
-import _ from 'lodash'
-
-import {
-  Close as CloseIcon,
-  CheckBox as CheckBoxIcon,
-  CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
-  KeyboardArrowDown as ArrowIcon,
-} from '@mui/icons-material'
-
-import { gql } from 'graphql-tag'
-// import { getJPart } from './helpers/helpers'
-import { useLazyQuery } from '@apollo/client'
-import { titleCase } from '@fixefy/fixefy-ui-utils'
-import React, { useEffect, useState, useRef, useImperativeHandle } from 'react'
-import { Button, Checkbox, CircularProgress, useAutocomplete, useTheme, Typography } from '@mui/material'
-
-import { Root, InputWrapper, Listbox, StyledClose, StyledListBox, Loading } from './styles/dropdown.styles'
-
-import { AsyncDropdownPropsType, Option } from './async_dropdown_types'
-
-const icon = <CheckBoxOutlineBlankIcon fontSize='small' />
-const checkedIcon = <CheckBoxIcon fontSize='small' />
-
-export const FxAsyncDropdown = React.forwardRef((props: AsyncDropdownPropsType, parentRef) => {
-  const ref = useRef(null)
-  const theme = useTheme()
-
-  const [options, setOptions] = useState<Option[]>([])
-  const [loadingData, setLoadingData] = useState(false)
-  const [isLastPage, setIsLastPage] = useState(false)
-  const [searchValue, setSearchValue] = useState<string | null>(null)
-  const [hasClearBtn, setHasClearBtn] = useState(false)
-  const [page, setPage] = useState(1)
-  const [prevPage, setPrevPage] = useState(0)
-  const [pageSize] = useState(20)
-
-  const {
-    debug,
-    structure,
-    onChange,
-    onClear,
-    renderOptions,
-    fetcher,
-    initialValue = {},
-    multiple,
-    disabled,
-    type = 'text',
-    showSelectedValue,
-    ...rest
-  } = props
-
-  const { name, extended, children } = structure
-
-  const { search_path, variables } = extended
-  const { method_name } = variables
-
-  const [fetch, { data, loading }] = useLazyQuery(gql(fetcher.query), {
-    ...fetcher.queryOptions,
-    variables: {
-      ...fetcher.queryOptions.variables,
-      where: searchValue
-        ? {
-            ...fetcher.queryOptions.variables.where,
-            [search_path]: searchValue,
-          }
-        : {
-            ...fetcher.queryOptions.variables.where,
-          },
-      skip: page * pageSize - pageSize,
-      limit: pageSize,
-    },
-  })
-
-  const labelOption = structure?.extended?.title_path ?? ('title' as keyof Option)
-
-  const {
-    getRootProps,
-    getInputProps,
-    getClearProps,
-    getListboxProps,
-    getOptionProps,
-    groupedOptions,
-    value,
-    popupOpen,
-    focused,
-    setAnchorEl,
-  } = useAutocomplete({
-    ...rest,
-    defaultValue: initialValue,
-    options: options,
-    disableCloseOnSelect: !!multiple,
-    multiple,
-    disabled: disabled,
-    isOptionEqualToValue: (option: any, value: any) => {
-      return option._id === value._id
-    },
-    getOptionLabel: (option: Option) => titleCase(option[labelOption] ?? (option.title as any)),
-  })
-
-  const onPopupScroll = _.debounce(() => {
-    if (ref && ref.current) {
-      //@ts-ignore
-      const threshHold = ref.current.scrollHeight / 2
-
-      //@ts-ignore
-      if (ref.current.scrollTop > threshHold && !loadingData && !isLastPage) {
-        setLoadingData(true)
-        setPage((prevPage) => prevPage + 1)
-        setPrevPage((prevPage) => prevPage + 1)
-      }
-    }
-  }, 800)
-
-  const createTitle = () => {
-    if (Array.isArray(value)) {
-      if (value && value.length) {
-        return `${titleCase(name)} (${value.length})`
-      }
-    }
-    return titleCase(name)
-  }
-
-  const handleSearch = _.debounce((e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
-    setSearchValue(e.target.value)
-    setPage(1)
-  }, 300)
-
-  const handleChildrens = ({ structure, ...rest }: { structure: any; onClick: (e: any) => void; startIcon: any }) => {
-    let rv = null
-    const { type, children } = structure
-    debug === true && console.log('handleChildrens', structure)
-    switch (type) {
-      case 'dropdownOptions':
-      case 'dropdown_options': {
-        rv = children.map((child: any) =>
-          handleChildrens({
-            structure: child,
-            ...rest,
-          }),
-        )
-        break
-      }
-      case 'clear': {
-        if (!hasClearBtn) {
-          setHasClearBtn(true)
-        }
-        rv = <Button {...rest}>{structure.title}</Button>
-        break
-      }
-      default: {
-        break
-      }
-    }
-
-    return rv
-  }
-
-  const handleRenderOptions = () => {
-    debug === true && console.log('renderOptions: ', renderOptions)
-
-    if (renderOptions) {
-      return (groupedOptions as typeof options).map((option: Option, index: number) => {
-        const CustomeComponent = renderOptions(option, index)
-        //@ts-ignore
-        return React.cloneElement(CustomeComponent, {
-          ...getOptionProps({ option, index }),
-        })
-      })
-    } else {
-      switch (type) {
-        case 'checkbox': {
-          return (groupedOptions as typeof options).map((option: Option, index: number) => {
-            const isSelected = getOptionProps({
-              option,
-              index,
-            })['aria-selected']
-
-            return (
-              <li {...getOptionProps({ option, index })}>
-                <Checkbox
-                  icon={icon}
-                  checked={Boolean(isSelected)}
-                  checkedIcon={checkedIcon}
-                  sx={{
-                    mr: 1,
-                    minWidth: 24,
-                    minHeight: 24,
-                    p: 0,
-                    ['& svg']: { fill: theme.palette.primary.light },
-                  }}
-                />
-                <Typography variant='table' color={theme.palette.typography.title}>
-                  {titleCase(option?.title)}
-                </Typography>
-              </li>
-            )
-          })
-        }
-
-        case 'text': {
-          return (groupedOptions as typeof options).map((option: Option, index: number) => {
-            debug === true &&
-              console.log(
-                'renderOptions: ',
-                structure?.extended?.title_path,
-                option[structure?.extended?.title_path],
-                options,
-              )
-
-            return (
-              <li {...getOptionProps({ option, index })}>
-                <Typography variant='table' color={theme.palette.typography.title}>
-                  {titleCase(option[structure?.extended?.title_path] ?? option.title)}
-                </Typography>
-              </li>
-            )
-          })
-        }
-
-        default: {
-          return (groupedOptions as typeof options).map((option: Option, index: number) => {
-            debug === true &&
-              console.log(
-                'renderOptions: ',
-                structure?.extended?.title_path,
-                option[structure?.extended?.title_path],
-                options,
-              )
-            return (
-              <li {...getOptionProps({ option, index })}>
-                <Typography variant='table' color={theme.palette.typography.title}>
-                  {titleCase(option[structure?.extended?.title_path] ?? option.title)}
-                </Typography>
-              </li>
-            )
-          })
-        }
-      }
-    }
-  }
-
-  useImperativeHandle(parentRef, () => ({
-    clearDDL: () => {
-      //@ts-ignore
-      getClearProps()?.onClick(null)
-    },
-  }))
-
-  useEffect(() => {
-    if (ref && ref.current) {
-      //@ts-ignore
-      ref.current.addEventListener('scroll', () => onPopupScroll())
-    }
-    return () => {
-      if (ref && ref.current) {
-        //@ts-ignore
-        ref.current.removeEventListener('scroll', () => onPopupScroll())
-      }
-    }
-  }, [groupedOptions])
-
-  useEffect(() => {
-    onChange && onChange(value, name)
-  }, [value])
-
-  useEffect(() => {
-    if (popupOpen && !isLastPage && prevPage < page && !disabled) {
-      fetch()
-    }
-  }, [popupOpen])
-
-  useEffect(() => {
-    if (!disabled) {
-      fetch()
-    }
-  }, [])
-
-  useEffect(() => {
-    if (data && !isLastPage && prevPage < page) {
-      const newOptions: Option[] = data[method_name]
-
-      if (newOptions.length === 0 || newOptions.length < pageSize) {
-        setIsLastPage(true)
-      }
-
-      setOptions([...newOptions, ...options])
-      setLoadingData(false)
-    }
-  }, [data])
-
-  return (
-    <Root>
-      <InputWrapper
-        hasValue={!!(value && Object.keys(value).length)}
-        disabled={disabled}
-        sx={{
-          width: props.styles?.width ?? 180,
-          maxWidth: props.styles?.maxWidth ?? 300,
-        }}
-        {...getRootProps()}
-        ref={setAnchorEl}
-        className={focused ? 'focused' : ''}
-      >
-        <input
-          {...getInputProps()}
-          readOnly
-          onChange={(e) => {
-            //@ts-ignore
-            getInputProps()?.onChange(e)
-            handleSearch(e)
-          }}
-          placeholder={createTitle()}
-          value={showSelectedValue ? titleCase(value.title) : undefined}
-        />
-        {loading ? (
-          <Loading>
-            <CircularProgress />
-          </Loading>
-        ) : (
-          <ArrowIcon />
-        )}
-      </InputWrapper>
-
-      {groupedOptions.length > 0 && !disabled ? (
-        <Listbox
-          // sx={{
-          //   width: props.styles?.width ?? 300,
-          //   maxWidth: props.styles?.maxWidth ?? 300,
-          //   minWidth: props.styles?.width ?? 300,
-          // }}
-          {...getListboxProps()}
-        >
-          <StyledListBox
-            sx={{
-              ...props.styles?.menuSx,
-              // width: props.styles?.width ?? 300,
-            }}
-            hasClearBtn={children?.length}
-            ref={ref}
-          >
-            {handleRenderOptions()}
-          </StyledListBox>
-
-          {children && children.length ? (
-            <StyledClose>
-              {handleChildrens({
-                structure: children[0],
-                onClick: (e: any) => {
-                  onClear && onClear()
-                  //@ts-ignore
-                  getClearProps()?.onClick(e)
-                },
-                startIcon: <CloseIcon />,
-              })}
-            </StyledClose>
-          ) : null}
-        </Listbox>
-      ) : null}
-    </Root>
-  )
-})

package/src/FxAsyncDropdown/async_dropdown_types.d.ts

@@ -1,40 +0,0 @@
-interface Option {
-  title: string
-  value: string | number | boolean
-  [key: string]: any
-}
-
-interface StylesOptions {
-  width?: string | number
-  maxWidth?: string | number
-  inputSx?: object
-  menuSx?: object
-}
-
-export type AsyncDropdownPropsType = {
-  debug?: boolean
-  initialValue?: Option | any
-  styles?: StylesOptions
-  structure: {
-    name: string
-    extended: {
-      title: string
-      title_path: string
-      search_path: string
-      variables: {
-        method_name: string
-      }
-    }
-    children: any
-  }
-  fetcher: {
-    query: any
-    queryOptions: any
-  }
-  multiple?: boolean
-  onChange?: (value: any, name: string) => void
-  type?: 'checkbox' | 'text'
-  renderOptions?: (option: Option, index: number) => void
-  [x: string]: any
-  showSelectedValue?: boolean
-}

package/src/FxAsyncDropdown/helpers/helpers.ts

@@ -1,105 +0,0 @@
-export const getJPart = (j: any, jsonPath: string, defaultValue?: any): any => {
-  // input check - if key is invalid - return error
-  if (isObjectValid(j) === false) return defaultValue
-
-  // convert indexes to properties
-  jsonPath = jsonPath.replace(/\[(\w+)\]/g, '.$1')
-
-  // strip a leading dot
-  jsonPath = jsonPath.replace(/^\./, '')
-
-  // split path by '.'
-  let _isArrayValid = false
-  let _isStringValid = false
-  let currentPathPart: any
-  let isLoop = true
-  
-  const pathParts = jsonPath.split('.')
-
-  for (let i = 0, n = pathParts.length; isLoop && i < n; ++i) {
-    currentPathPart = pathParts[i]
-    _isStringValid = isStringValid(j)
-    _isArrayValid = isArrayValid(j)
-
-    if (_isStringValid === true || _isArrayValid === true) {
-      if (_isStringValid === true) {
-        j = JSON.parse(j)
-      } else {
-        j = j.reduce((acc: Array<any>, cur: any) => {
-          const innerJ = getJPart(
-            cur,
-            pathParts.slice(i).join("."),
-            defaultValue,
-          );
-
-          if (isArrayValid(innerJ)) {
-            acc.push(...innerJ)
-          } else {
-            acc.push({
-              ...innerJ,
-              value: innerJ._id,
-            })
-          }
-
-          return acc
-        }, [])
-
-        isLoop = false
-      }
-    } else {
-      if (currentPathPart in j) {
-        j = j[currentPathPart]
-      } else {
-        // if something in the process failed:
-        //  1. set the rv as the default value
-        //  2. stop the loop`
-        j = defaultValue
-        isLoop = false
-      }
-    }
-  }
-
-  return j
-}
-
-export const isArrayValid = (arr: any[], minLength: number = 1, maxLength: number = 0): boolean => {
-  let rv: boolean =
-    isObjectValid(arr) &&
-    arr.length >= minLength &&
-    //arr instanceof Array
-    Object.prototype.toString.call(arr) == '[object Array]'
-
-  if (maxLength > 0) {
-    rv = rv && arr.length <= maxLength
-  }
-
-  return rv
-}
-
-export const isObjectValid = (obj: any, isCheckKeys: boolean = false): boolean => {
-  let rv: boolean = typeof obj !== 'undefined' && obj !== null
-
-  if (isCheckKeys) {
-    rv = rv && Object.keys(obj).length > 0
-  }
-
-  return rv
-}
-
-export const isStringValid = (str: string, minLength: number | null = null, maxLength: number | null = null, isValidateType: boolean = true): boolean => {
-  let rv = isObjectValid(str) && str.toString().length > 0 && (isValidateType ? typeof str === 'string' : true)
-
-  if (rv === false) return false
-
-  if (minLength && isNaN(minLength) === false && minLength > 0) {
-    rv = rv && str.toString().length >= minLength
-  }
-
-  if (rv === false) return false
-
-  if (maxLength && isNaN(maxLength) === false && maxLength > 0) {
-    rv = rv && str.toString().length <= maxLength
-  }
-
-  return rv
-}

package/src/FxAsyncDropdown/index.ts

@@ -1,2 +0,0 @@
-export { FxAsyncDropdown } from './FxAsyncDropdown'
-export type { AsyncDropdownPropsType } from './async_dropdown_types'

package/src/FxAsyncDropdown/styles/dropdown.styles.tsx

@@ -1,162 +0,0 @@
-import { styled } from '@mui/material/styles'
-
-export const Root: any = styled('div')(() => ({
-  color: 'rgba(0,0,0,.85)',
-  fontSize: 14,
-}))
-
-export const Label: any = styled('label')(() => ({
-  padding: '0 0 4px',
-  lineHeight: '1.5',
-  display: 'block',
-}))
-
-export const Loading: any = styled('div')(() => ({
-  width: 30,
-  height: 30,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  ['& span']: {
-    width: '20px !important',
-    height: '20px !important',
-  },
-}))
-
-export const InputWrapper: any = styled('div')<any>(({ theme, hasValue, disabled }) => {
-  const defaultBorder = `1px solid ${theme.palette.greyscale[200]}`
-  const hasValueBorder = `1px solid ${theme.palette.primary[500]}`
-  const disabledBorder = `1px solid ${theme.palette.greyscale[200]}`
-  const activeBorder = `1px solid ${theme.palette.primary[500]}`
-
-  return {
-    border: disabled ? disabledBorder : hasValue ? hasValueBorder : defaultBorder,
-    backgroundColor: theme.palette.common.white,
-    borderRadius: 4,
-    padding: 1,
-    display: 'flex',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    cursor: disabled ? 'not-allowed' : 'pointer',
-
-    ['&:hover']: {
-      border: disabled ? disabledBorder : activeBorder,
-      borderRadius: 4,
-    },
-    ['&:focus']: {
-      border: disabled ? disabledBorder : activeBorder,
-      borderRadius: 4,
-    },
-    ['& > svg']: {
-      color: disabled ? theme.palette.greyscale[300] : theme.palette.primary['500'],
-      marginRight: 8,
-    },
-    ['& input']: {
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      backgroundColor: theme.palette.common.white,
-      color: theme.palette.typography.title,
-      height: 36,
-      boxSizing: 'border-box',
-      padding: '4px 6px 4px 16px',
-      width: 0,
-      minWidth: 30,
-      flexGrow: 1,
-      border: 0,
-      margin: 0,
-      outline: 0,
-
-      ...theme.typography.body1,
-      lineHeight: '20px',
-
-      ['& ::placeholder']: {
-        color: hasValue ? theme.palette.typography.title : theme.palette.greyscale[400],
-      },
-    },
-  }
-})
-
-export const Listbox: any = styled('ul')(({ theme }) => ({
-  margin: 0,
-  padding: 0,
-  position: 'absolute',
-  listStyle: 'none',
-  backgroundColor: theme.palette.common.white,
-  overflow: 'auto',
-  maxHeight: 250,
-  minHeight: 250,
-  borderRadius: 4,
-  boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
-  zIndex: 1,
-  maxWidth: 270,
-  minWidth: 270,
-  top: 48,
-  left: -42,
-
-  ['& div']: {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-}))
-
-export const StyledClose: any = styled('div')(() => ({
-  position: 'absolute',
-  bottom: 0,
-}))
-
-export const StyledListBox: any = styled('ul')(({ theme, hasClearBtn }: any) => ({
-  // width: 300,
-  margin: 0,
-  padding: 0,
-  // position: 'absolute',
-  listStyle: 'none',
-  backgroundColor: theme.palette.common.white,
-  overflow: 'auto',
-  maxHeight: hasClearBtn ? 190 : 230,
-  zIndex: 1,
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflowX: 'hidden',
-  paddingTop: 8,
-  paddingBottom: 8,
-  maxWidth: 270,
-  minWidth: 270,
-
-  ['& div']: {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-  ['& li']: {
-    paddingRight: 16,
-    paddingLeft: 16,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    height: 40,
-    cursor: 'pointer',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    maxWidth: 270,
-    minWidth: 270,
-  },
-
-  ['& li:hover']: {
-    backgroundColor: '#F6F9FA',
-  },
-
-  ["& li[aria-selected='true']"]: {
-    fontWeight: 900,
-    backgroundColor: '#F6F9FA',
-  },
-
-  ["& li[data-focus='true']"]: {
-    backgroundColor: '#F6F9FA',
-    cursor: 'pointer',
-
-    ['& svg ']: {
-      color: 'currentColor',
-    },
-  },
-}))