@edvisor/product-language 0.5.7 → 0.7.0-rc1

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

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

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

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

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

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

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