@edvisor/product-language 0.10.2 → 0.10.3

package/src/lib/components/tree-view/components/tree-node.tsx

@@ -1,203 +0,0 @@
-import { FC, is, maybeRender, PropsWithChildren } from '@helpers'
-
-import React, { ReactNode } from 'react'
-import { IconMinor } from 'components/icon'
-import styled, { css } from 'styled-components'
-import { CheckboxState, ITreeNode } from '../types'
-import { Button } from 'components/molecules/button'
-import { Checkbox } from 'components/checkbox'
-import { Label } from 'components/typography'
-import { Flex } from 'components/layout'
-import { Margin, Padding, Surface } from '@foundations'
-
-const ListItem = styled.li<{disabled: boolean}>`
-  & ol {
-    margin-top: ${Margin.xs};
-  }
-  ${({disabled}) => is(disabled) && css`
-    opacity: .75;
-    cursor: not-allowed;
-  `}
-`
-
-const ItemWrapper = styled(Flex)`
-  align-items: center;
-  padding: ${Padding.xxxs} ${Padding.none};
-  gap: 8px;
-  flex: none;
-  order: 0;
-  align-self: stretch;
-  flex-grow: 0;
-`
-
-const ClickableLabel = styled(Label)<{ isParent: boolean }>`
-  flex: 1;
-  cursor: ${({ isParent }) => (isParent ? 'pointer' : 'initial')};
-  &:hover {
-    background: ${Surface.Default.Default};
-  }
-
-  &:focus {
-    outline: 0;
-    background: ${Surface.Default.Default};
-  }
-`
-
-const CollapseButton = styled(Button)`
-  align-self: baseline;
-  top: 10px;
-  border: 0;
-  cursor: pointer;
-  padding: ${Padding.none};
-  gap: 0;
-  width: 8px;
-  margin-left: auto;
-  right: 8px;
-  &:active{
-    outline: none;
-  }
-`
-
-const InputWrapper = styled(Flex)`
-  gap: 8px;
-`
-
-const HelpfulMessage = styled(Label)`
-  margin-left: ${Margin.xl};
-  user-select: none;
-`
-
-export const TreeNode: FC<PropsWithChildren<ITreeNode>> = (props) => {
-
-  const {
-    value,
-    label,
-    expanded,
-   } = props
-
-  const handleCheck = (): void => {
-
-    const { onCheck } = props
-    onCheck({ label, value, checked: getCheckState({ toggle: true }) })
-  }
-
-  const handleClick = (): void => {
-    const {
-      onClick,
-      isParent,
-      expandDisabled,
-    } = props
-
-    if (isParent && !expandDisabled) {
-      handleOnExpand()
-    }
-    onClick({ label, value, checked: getCheckState({ toggle: false }) })
-  }
-
-  const handleOnExpand = (): void => {
-
-    const { onExpand } = props
-    onExpand({ value, label, expanded: !is(expanded) })
-  }
-
-  const getCheckState = ({ toggle } : {toggle: boolean}): boolean => {
-    const { checkState } = props
-
-    if (checkState === CheckboxState.UNCHECKED && toggle) {
-      return true
-    }
-
-    if (checkState === CheckboxState.CHECKED && !toggle) {
-      return true
-    }
-
-    if (checkState === CheckboxState.INDETERMINATE) {
-      return true
-    }
-
-    return false
-  }
-
-  const renderCollapseButton = (): ReactNode => {
-    const { expandDisabled, isParent} = props
-
-    return (
-      maybeRender(isParent, <CollapseButton
-        subtle
-        disabled={expandDisabled}
-        onClick={handleOnExpand}
-
-        IconSuffix={expanded ? IconMinor.ChevronUpSolid : IconMinor.ChevronDownSolid}
-      />)
-    )
-  }
-
-  const renderCheckboxLabel = () => {
-    const {
-      checkState,
-      disabled,
-      treeId,
-      childCount,
-      isParent,
-      invalid,
-      showChildCount,
-      helpfulMessage,
-    } = props
-
-    const inputId = `${treeId}-${String(value).split(' ').join('_')}`
-
-    const displayText = (showChildCount && isParent)
-      ? `${label} (${childCount})`
-      : label
-
-    return(
-      <React.Fragment>
-        <div>
-          <InputWrapper center>
-            <Checkbox
-              checked={checkState === CheckboxState.CHECKED}
-              indeterminate={checkState === CheckboxState.INDETERMINATE}
-              disabled={disabled}
-              error={invalid}
-              id={`input-${inputId}`}
-              onClick={handleCheck}
-              onChange={() => void(0)}
-            />
-            <ClickableLabel isParent={props.isParent}
-              key={1}
-              onClick={handleClick}
-              role="link"
-              tabIndex={0}
-            >
-              { displayText }
-            </ClickableLabel>
-          </InputWrapper>
-          {
-            maybeRender(helpfulMessage,
-              <HelpfulMessage subdued id={`error-${inputId}`}>
-                {helpfulMessage}
-              </HelpfulMessage>
-            )
-          }
-        </div>
-        {renderCollapseButton()}
-      </React.Fragment>
-    )
-
-  }
-
-  const {
-      disabled,
-  } = props
-
-  return (
-    <ListItem role="treeitem" disabled={disabled}>
-      <ItemWrapper center>
-        {renderCheckboxLabel()}
-      </ItemWrapper>
-      {
-        expanded && props.children
-      }
-    </ListItem>
-  )
-}

package/src/lib/components/tree-view/helper.tsx

@@ -1,171 +0,0 @@
-import { defaultTo, is, isDefined, isEmpty, isNil, safeArray } from '@helpers'
-import { INode, IFlattenNode, CheckboxState } from './types'
-
-export const flattenNodes = (flattenList:IFlattenNode[] ,nodes: INode[], parent?:INode, depth = 0) : void => {
-  
-  safeArray(nodes).forEach((node, index) => {
-
-    const isParent = nodeHasChildren(node)
-    
-    flattenList.push({
-      label: node.label,
-      value: node.value,
-      children: node.children,
-      parent,
-      isChild: isDefined(parent) && isDefined(parent.value),
-      isParent,
-      isLeaf: !isParent,
-      disabled: getDisabledState(node, parent),
-      treeDepth: depth,
-      index,
-      checked: false,
-      checkState: 0,
-      expanded: false,
-    })
-    flattenNodes(flattenList, safeArray(node.children), node, depth + 1)
-  })
-}
-
-export  const getNode = (nodes: IFlattenNode[], value: string): IFlattenNode | undefined => {
-  return nodes.find((node) => node.value === value)
-}
-
-const nodeHasChildren = (node: INode): boolean => {
-  return isDefined(node.children) 
-    && Array.isArray(node.children) 
-    && !isEmpty(node.children)
-}
-
-const getDisabledState = (node: INode, parent?: INode): boolean => {
-  if (isDefined(parent) && is(parent.disabled)) {
-      return true
-  }
-
-  return is(node.disabled)
-}
-
-export const deserializeList = (flatNodes: IFlattenNode[], lists: {
-  checked: string[]
-  expanded: string[]
-}): void => {
-
-  flatNodes.forEach((flatNode) => {
-
-    if (lists.checked.includes(flatNode.value)) {
-      flatNode.checked = true
-
-      if (flatNode.isParent) {
-        checkAllChildren(flatNodes, flatNode)
-      }
-    }
-    if (lists.expanded.includes(flatNode.value)) {
-      flatNode.expanded = true
-    }
-  })
-}
-
-const checkAllChildren = (flatNodes: IFlattenNode[], flatNode: IFlattenNode): void => {
-  defaultTo(flatNode.children, []).forEach((node: INode) => {
-    const _flatoNode = getNode(flatNodes, node.value)
-    if (isDefined(_flatoNode)) {
-      _flatoNode.checked = true
-    }
-  })
-}
-
-export const serializeList = (flatNodes: IFlattenNode[], key: string): string[] => {
-  const list: string[] = []
-
-  flatNodes.forEach((node: IFlattenNode) => {
-    if (key === 'expanded') {
-      if (node.expanded) {
-        list.push(node.value)  
-      }
-    }
-
-    if (key === 'checked') {
-      if (node.checked) {
-        list.push(node.value)  
-      }
-    }
-  })
-
-  return list
-}
-
-export const expandAllNodes = (flatNodes: IFlattenNode[], expand: boolean): void => {
-  flatNodes.forEach((node: IFlattenNode) => {
-    if (node.isParent) {
-      node.expanded = expand
-    }
-  })
-}
-
-export const toggleChecked = (flatNodes: IFlattenNode[], node: INode, isChecked: boolean): void => {
-  const flatNode = getNode(flatNodes, node.value)
-
-  if (isNil(flatNode)) {
-    return
-  }
-
-  if (flatNode.isLeaf) {
-    if (is(node.disabled)) {
-      return
-    }
-
-    toggleNode(flatNodes, node.value, 'checked', isChecked)
-  } else {
-    if (isDefined(flatNode.children) && flatNode.children.length === 0) {
-      toggleNode(flatNodes, node.value, 'checked', isChecked)
-    }
-
-    safeArray(flatNode.children).forEach((child: INode) => {
-      toggleChecked(flatNodes, child, isChecked)
-    })
-  }
-}
-
-export const toggleNode = (flatNodes: IFlattenNode[], nodeValue: string, key: string, toggleValue: boolean): void => {
-  const node = flatNodes.find((_node: IFlattenNode) => _node.value === nodeValue)
-  
-  if (isDefined(node)) {
-    key === 'checked' 
-      ? node.checked = toggleValue
-      : node.expanded = toggleValue
-  }
-}
-
-export const getNodeCheckState = (flattenNodeList: IFlattenNode[], node: INode): CheckboxState => {
-  const flatNode = getNode(flattenNodeList, node.value)
-
-  if (is(flatNode?.isLeaf) || (isDefined(node.children) && node.children.length === 0)) {
-    return is(flatNode?.checked) ? CheckboxState.CHECKED : CheckboxState.UNCHECKED
-  }
-
-  if (is(isEveryChildChecked(flattenNodeList, node))) {
-    return CheckboxState.CHECKED
-  }
-
-  if (is(isSomeChildChecked(flattenNodeList, node))) {
-    return CheckboxState.INDETERMINATE
-  }
-
-  return CheckboxState.UNCHECKED
-} 
-
-const isEveryChildChecked = (flattenNodeList: IFlattenNode[], node: INode): boolean => {
-
-  return safeArray(node.children).every(
-    (child: INode) => {
-      const _node = getNode(flattenNodeList, child.value)
-      return isDefined(_node) && _node.checkState === 1
-    })
-}
-
-const isSomeChildChecked = (flattenNodeList: IFlattenNode[], node: INode): boolean => {
-  return safeArray(node.children).some(
-    (child: INode) => {
-      const _node = getNode(flattenNodeList, child.value)
-      return isDefined(_node) && _node.checkState > 0
-    })
-}

package/src/lib/components/tree-view/index.ts

@@ -1,2 +0,0 @@
-export * from './tree-view'
-export { INode, ICheckNode, IExpandNode } from './types'