@edvisor/product-language 0.10.0 → 0.10.2

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

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

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

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