@edvisor/product-language 0.7.0-rc1 → 0.7.0

package/src/lib/components/select/components/menu-row.tsx

@@ -1,43 +0,0 @@
-import { CSSProperties, memo } from 'react'
-import { areEqual } from 'react-window'
-import { OptionComponent } from './option'
-import { IMenuComponentProps } from '../types'
-import { equal } from '../utils'
-import { is } from '@helpers'
-
-interface IMenuRowProps {
-  index: number;
-  style: CSSProperties;
-  data: IMenuComponentProps;
-}
-
-export const MenuRow = memo(({ index, style, data }: IMenuRowProps) => {
-  const {
-    options = [],
-    labelComponent,
-    selectedIndex,
-    rowHeight,
-    search,
-    multi,
-    onSelect
-  } = data
-  const option = options[index]
-  const currentValue =
-    Array.isArray(data.value) && is(multi) ? data.value : [data.value]
-
-  return (
-    <div style={style}>
-      <OptionComponent
-        option={option}
-        labelComponent={labelComponent}
-        height={rowHeight}
-        active={currentValue.some(val =>
-            equal(val, option.value)
-        )}
-        selected={selectedIndex === index}
-        search={search}
-        onSelect={onSelect}
-      />
-    </div>
-    )
-}, areEqual)

package/src/lib/components/select/components/menu.tsx

@@ -1,151 +0,0 @@
-import { useEffect, useRef } from 'react'
-import styled from 'styled-components'
-import { IMenuComponentProps, 
-  IOption, 
-  DEFAULT_EMPTY_TEXT, 
-  DEFAULT_MENU_HEIGHT, 
-  DEFAULT_ROW_HEIGHT, 
-  labelPositionType, 
-  menuPositionType 
-} from '../types'
-import { equal } from '../utils'
-import { FixedSizeList } from 'react-window'
-import { defaultTo, is, isDefined, maybeRender, safeArray } from '@helpers'
-import { Borders, Surface, Margin } from '@foundations'
-import { OptionItem } from './option'
-import { MenuContainer } from './menu-container'
-import { MenuRow } from './menu-row'
-import { useMemo } from 'react'
-import { SelectLabel } from './select-label'
-
-const EmptyOptionItem = styled(OptionItem)<{props: IMenuComponentProps}>`
-  border: 1px solid ${Borders.Default.Subdued};
-  background-color: ${Surface.Default.Default};
-  position: absolute;
-  margin: ${Margin.none};
-  width: 100%;
-  height: 54px;
-  box-shadow: ${({ props }) =>
-  props.menuPosition === menuPositionType.BOTTOM
-    ? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)'
-    : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)'};
-  &:hover {
-    background-color: ${Surface.Default.Default};
-  }
-`
-
-export const Menu = (props: IMenuComponentProps) => {
-  const {
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    selectedIndex,
-    open,
-    invalid,
-    menuHeight = DEFAULT_MENU_HEIGHT,
-    menuPosition = menuPositionType.BOTTOM,
-    labelPosition = labelPositionType.TOP,
-    label,
-  } = props
-  
-  const options = safeArray(props.options)
-  
-  type FixedSizeListType = FixedSizeList & HTMLElement
-  // eslint-disable-next-line no-null/no-null
-  const list = useRef<FixedSizeList>(null)
-  // eslint-disable-next-line no-null/no-null
-  const outerRef = useRef<FixedSizeListType>(null)
-
-  const height = Math.min(
-    Math.max(options.length * rowHeight, rowHeight) + 10, menuHeight
-  )
-
-  useEffect(() => {
-    if (
-      is(open) &&
-      isDefined(list.current) &&
-      selectedIndex !== undefined &&
-      selectedIndex !== -1
-    ) {
-      list.current.scrollToItem(selectedIndex, 'center')
-    }
-  }, [open, selectedIndex])
-
-  useEffect(() => {
-    if (
-      is(open) && isDefined(outerRef.current) && options.length > 0
-    ) {
-      outerRef.current.style.opacity = '1'
-    }
-  }, [open, options])
-
-  const itemData = useMemo(() => {
-    return {
-      ...props,
-      options,
-      onSelect: (value: unknown, option: IOption) => {
-        if (Array.isArray(props.value) && is(props.multi)) {
-          const found = props.value.some((item) =>
-            equal(item, value)
-          )
-          const values = found
-            ? props.value.filter(
-                (item) =>
-                  !equal(item, value)
-              )
-            : Array.from(new Set([...props.value, value]))
-
-          props.onSelect(values, option)
-        } else {
-          props.onSelect(value, option)
-        }
-      }
-    }
-  }, [props, options])
-
-  const renderList = () => {
-    const MenuComponent = props.menuComponent
-    const itemCount = options.length
-    
-    if (isDefined(MenuComponent)) {
-      return <MenuComponent {...props} />
-    }
-
-    if (itemCount === 0) {
-      const { emptyText } = props
-      return (
-        <EmptyOptionItem props={props}>
-          <SelectLabel>
-              <span>{defaultTo(emptyText, DEFAULT_EMPTY_TEXT)}</span>
-          </SelectLabel>
-        </EmptyOptionItem>
-      )
-    }
-
-    return (
-      <FixedSizeList
-        className="menu-list"
-        style={{position: 'absolute'}}
-        ref={list}
-        outerRef={outerRef}
-        width="100%"
-        height={height}
-        itemSize={rowHeight}
-        itemCount={itemCount}
-        itemData={itemData}
-      >
-        {MenuRow}
-      </FixedSizeList>
-    )
-  }
-
-  return maybeRender(open, 
-    <MenuContainer
-      invalid={invalid}
-      label={label}
-      menuHeight={height}
-      menuPosition={menuPosition}
-      labelPosition={labelPosition}
-    >
-      {renderList()}
-    </MenuContainer>  
-  )
-}

package/src/lib/components/select/components/option.tsx

@@ -1,91 +0,0 @@
-import { defaultTo, FC, is, isDefined } from '@helpers'
-import styled from 'styled-components'
-import { Label } from 'components/typography'
-import { Padding, Surface, Icons, Margin } from '@foundations'
-import { memo } from 'react'
-import { IOptionComponentProps, LabelComponentProps, DEFAULT_ROW_HEIGHT } from '../types'
-import { areEqual } from 'react-window'
-import { IconMinor } from 'components/icon'
-import { SpaceBetween } from 'components/layout'
-
-interface IOptionItemProps {
-  active?: IOptionComponentProps['active'];
-  selected?: IOptionComponentProps['selected'];
-  height?: IOptionComponentProps['height'];
-}
-
-export const OptionItem = styled(SpaceBetween)`
-  flex: 1;
-  height: ${(props: IOptionItemProps) => defaultTo(props.height, DEFAULT_ROW_HEIGHT)}px;
-  min-width: 0;
-  cursor: pointer;
-  box-sizing: border-box;
-  margin: ${Margin.xxs};
-  border-radius: 6px;
-  background-clip: content-box;
-  background-color: ${(props: IOptionItemProps) =>
-    is(props.active) 
-      ? Surface.Selected.Default 
-      : is(props.selected) 
-        ? Surface.Default.Hover 
-        : Surface.Default.Default};
-  
-  & div {
-    padding: ${Padding.none} ${Padding.xs};
-  }
-
-  & i:last-child {
-    right: 8px;
-  }
-
-  &:hover {
-    background-color: ${(props: IOptionItemProps) =>
-      is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover};
-  }
-
-  &:active {
-    background-color: ${(props: IOptionItemProps) =>
-      is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed};
-  }
-`
-const CheckedIcon = styled(IconMinor.Check)`
-  svg {
-    path {
-      fill : ${Icons.Highlight}
-    }
-  }
-`
-
-export const OptionComponent = memo((props: IOptionComponentProps) => {
-
-  const onClick = () => {
-    props.onSelect(props.option.value, props.option)
-  }
-  
-  const { active, selected, labelComponent, option, height } = props
-  const SelectLabel = (isDefined(labelComponent) ? labelComponent : Label) as FC<LabelComponentProps>
-
-  const className = [
-    'option',
-    props.className,
-    is(selected) ? 'selected' : '',
-    is(active) ? 'active' : ''
-  ].filter((v) => Boolean(v))
-  
-  return (
-    <OptionItem
-      className={className.join(' ')}
-      data-role="option"
-      center
-      selected={selected}
-      active={active}
-      height={height}
-      onClick={onClick}
-    >
-      <SelectLabel type="option" active={active} {...option}>
-        {option.label}
-      </SelectLabel>
-      {is(active) && <CheckedIcon/>}
-    </OptionItem>
-  )
-}, areEqual)

package/src/lib/components/select/components/select-label.tsx

@@ -1,10 +0,0 @@
-import styled from 'styled-components'
-import { Label } from 'components/typography'
-
-export const SelectLabel = styled(Label)`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  user-select: none;
-  box-sizing: border-box;
-`

package/src/lib/components/select/components/value-component-multi.tsx

@@ -1,40 +0,0 @@
-import styled from 'styled-components'
-import { IValueComponentMultiProps } from '../types'
-import { SelectLabel } from './select-label'
-import { Tag } from 'components/tag'
-import { Padding } from '@foundations'
-import { memo } from 'react'
-
-const TagContainer = styled(Tag)`
-  div:first-child {
-    min-height: auto;
-    padding: ${Padding.none} ${Padding.none} ${Padding.none} ${Padding.xxs};
-  }
-  div:last-child {
-    padding: ${Padding.none};
-  }
-`
-
-const ValueComponentMulti = <T,>(props: IValueComponentMultiProps<T>) => {
-
-  const { option, onRemove } = props
-  const className = ['value-multi', props.className]
-    .filter((c) => Boolean(c))
-    .join(' ')
-
-  return (
-    <TagContainer 
-      className={className}
-      closable
-      onClick={() => {
-        onRemove(option.value)
-      }}
-      >
-      <SelectLabel default {...option}>
-        {option.label}
-      </SelectLabel>
-    </TagContainer>
-  )
-}
-
-export default memo(ValueComponentMulti) as typeof ValueComponentMulti

package/src/lib/components/select/components/value-component-single.tsx

@@ -1,27 +0,0 @@
-import { IValueComponentSingleProps } from '../types'
-import { FC, isDefined } from '@helpers'
-import { memo } from 'react'
-import { SelectLabel } from './select-label'
-
-const ValueComponentSingle: FC<IValueComponentSingleProps> = (props) => {
-  const LabelComponent = isDefined(props.labelComponent) ? props.labelComponent : SelectLabel
-  const className = ['value-single', props.className]
-    .filter(c => Boolean(c))
-    .join(' ')
-
-  return (
-    <LabelComponent
-      active
-      type="value-single"
-      className={className}
-      {...props.option}
-      default
-      style={{pointerEvents: 'none'}}
-    >
-      {props.option.label}
-    </LabelComponent>
-  )
-}
-
-
-export default memo(ValueComponentSingle) as typeof ValueComponentSingle