@redsift/design-system-legacy 8.0.1 → 8.0.2

package/src/components/Select/SelectComponents.jsx

@@ -1,342 +0,0 @@
-import React, { useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import { FixedSizeList as OptionsContainerWindowed } from "react-window";
-
-import { Typography, fontSizes } from '../Typography';
-
-/*--------------------------*/
-// Styled components
-/*--------------------------*/
-
-const colors = {
-  lightViolet: "#ebedf4",
-  lightGrey: "#f9f8f8",
-  lightMidGrey: "#d8d8d8",
-  midGrey: "#d5d5d5",
-  darkMidGrey: "#bfbfbf",
-  darkGrey: "#76767a",
-};
-
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-const IconAndTextContainer = styled(Row)`
-  padding: 0 1.15rem 0 0;
-  ::selection,
-  *::selection {
-    background-color: transparent;
-  }
-`;
-const IconAndSelectedValueRenderContainer = styled(Row)`
-  flex: 1;
-`;
-const SelectOuterContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  flex: 1;
-  margin: 0 0.5rem;
-  &:first-child {
-    margin-left: 0;
-  }
-  &:last-child {
-    margin-right: 0;
-  }
-`;
-
-const SelectLegendText = styled(Typography)`
-  margin: 0;
-  width: auto;
-  font-size: 0.8125rem;
-  color: ${(props) => props.color};
-  transition: color 0.1s;
-  font-weight: 600;
-  margin: 0 0.25rem;
-`;
-
-const handleSelectContainer = ({ variant, color }) => {
-  switch (variant) {
-    case "minimal":
-      return `
-        padding: 0 .5rem; 
-        border: 1px solid transparent;
-        transition: border-color 125ms;
-        &:hover {
-          border: 1px solid ${color};
-        }
-        ${IconAndTextContainer} {
-          padding: 0;
-        }
-    `;
-    case "basic":
-      return `
-        padding: 0.22rem;
-        transition: border-color 250ms;
-        border-radius: 0;
-        border-top: 0;
-        border-left: 0;
-        border-right: 0;
-        border-bottom: 2px solid ${color};
-        legend {
-          height: 0.6rem;
-        }
-        ${SelectLegendText} {
-          font-size: 0.75rem;
-          font-weight: 300;
-          margin-left: 0;
-          color: ${color};
-        }
-        ${SelectedValueText} {
-          margin-left: 0.2rem;
-        }
-    `;
-    case "outlined":
-      return `
-        padding: 0.5rem;
-        transition: border-color 250ms;
-        border: 2px solid ${color};
-    `;
-    default:
-      return "";
-  }
-};
-const SelectContainer = styled.fieldset`
-  border-radius: 5px;
-  ${(props) => handleSelectContainer(props)}
-  cursor: ${(props) => (props.disabled ? "default" : "pointer")};
-  box-sizing: border-box;
-  g {
-    transition: transform 0.25s ease;
-  }
-  path {
-    transition: fill 0.25s;
-  }
-  ${(props) => props.disabled && `background-color: ${colors.lightGrey}`};
-`;
-
-const SelectValueContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  height: 1.75rem;
-  padding: 0 0.5rem 0 0;
-  pointer-events: none;
-`;
-const SelectedValueText = styled(Typography)`
-  text-align: left;
-  flex: 1;
-  font-weight: 500;
-  margin-left: ${(props) => (props.withIcon ? "0.65rem" : "1rem")};
-  ${(props) => props.disabled && `color: ${colors.darkMidGrey}`};
-`;
-const OptionsContainer = styled.ul`
-  display: ${(props) => (props["aria-expanded"] === "true" ? "block" : "none")};
-  background-color: white;
-  border-radius: 5px;
-  border: 1px solid ${colors.lightMidGrey};
-  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
-  list-style: none;
-  margin-top: 0.83rem;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: 1;
-`;
-
-const OptionBase = css`
-  background-color: ${(p) =>
-    p.selected && !p.disabled ? colors.lightViolet : "transparent"};
-  border: none;
-  font-family: Raleway, sans-serif;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: ${(props) => (props.disabled ? "#aaa" : "#222")};
-  cursor: ${(props) => (props.disabled ? "default" : "pointer")};
-  :hover,
-  :focus {
-    outline: none;
-    &:not([disabled]) {
-      background-color: ${colors.lightGrey};
-    }
-  }
-  ::selection {
-    background-color: transparent;
-  }
-`;
-
-const Option = styled.li`
-  ${OptionBase};
-  display: ${(p) => (p.display === "true" ? "auto" : "none")};
-  line-height: 1.3rem;
-  padding: 10px 23px;
-`;
-
-const OptionWindowed = styled.li`
-  ${OptionBase};
-  display: flex;
-  align-items: center;
-  padding: 0 23px;
-`;
-
-const SelectSearchTextInput = styled.input`
-  flex: 1;
-  font-weight: 500;
-  margin-left: ${(props) => (props.withIcon ? "0.65rem" : "1rem")};
-  height: 100%;
-  font-family: Raleway;
-  font-size: ${fontSizes.body};
-  border: 0;
-  &:focus {
-    outline: none;
-  }
-`;
-
-/*--------------------------*/
-// Auxiliar components
-/*--------------------------*/
-
-const optValue = (label, value) => {
-  if (label && typeof label === "string") {
-    return label;
-  } else if (label) {
-    return label(value);
-  }
-  return value;
-};
-
-const OptionComponent = (props) => {
-  const { value, windowed, label, optionRef } = props;
-  const OptionComp = windowed ? OptionWindowed : Option;
-  return (
-    <OptionComp
-      {...props}
-      ref={optionRef}
-      aria-labelledby={`dropdown_${value} dropdown_${value}_option`}
-      tabIndex="0"
-      role="button"
-    >
-      {optValue(label, value)}
-    </OptionComp>
-  );
-};
-
-const OptionsContainerWindowedComponent = ({
-  selectWindowedRef,
-  selectWindowedHeight,
-  visibleItems,
-  displayOptions,
-  disabled,
-  itemSize,
-  selectedIndex,
-  selectOptionIndex,
-  optionRefs,
-  options,
-}) => {
-  const InnerElementType = React.useMemo(
-    () => React.forwardRef((props, ref) => <div {...props} ref={ref} />),
-    []
-  );
-
-  const OuterElementType = React.useMemo(
-    () =>
-      React.forwardRef((props, ref) => {
-        return (
-          <OptionsContainer
-            aria-expanded={displayOptions ? "true" : "false"}
-            {...props}
-            ref={ref}
-            style={{ ...props.style, position: "absolute" }}
-          />
-        );
-      }),
-    [displayOptions]
-  );
-
-  useEffect(() => {
-    if (!displayOptions) {
-      selectWindowedRef.current && selectWindowedRef.current.scrollToItem(0);
-    }
-  }, [displayOptions]);
-
-  return (
-    <OptionsContainerWindowed
-      ref={selectWindowedRef}
-      height={selectWindowedHeight}
-      itemCount={visibleItems.length}
-      itemSize={itemSize}
-      itemData={visibleItems}
-      outerElementType={OuterElementType}
-      innerElementType={InnerElementType}
-    >
-      {({ data, index, style }) => {
-        const { value, label, disabled: optDisabled } = data[index];
-        return (
-          <OptionComponent
-            style={style}
-            value={value}
-            label={label}
-            disabled={disabled || optDisabled}
-            selected={selectedIndex === index}
-            onClick={() => {
-              const index = options.findIndex((opt) => opt.value === value);
-              return selectOptionIndex(index);
-            }}
-            optionRef={optionRefs.current[index]}
-            windowed
-          />
-        );
-      }}
-    </OptionsContainerWindowed>
-  );
-};
-
-const OptionsContainerComponent = ({
-  displayOptions,
-  disabled,
-  selectedIndex,
-  selectOptionIndex,
-  optionRefs,
-  options,
-  isOptionVisibleForIndex,
-}) => {
-  return (
-    <OptionsContainer aria-expanded={displayOptions ? "true" : "false"}>
-      {options.map((props, index) => {
-        const { value, disabled: optDisabled } = props;
-        return (
-          <OptionComponent
-            {...props}
-            disabled={disabled || optDisabled}
-            selected={selectedIndex === index}
-            key={value}
-            onClick={() => selectOptionIndex(index)}
-            optionRef={optionRefs.current[index]}
-            display={isOptionVisibleForIndex[index] ? "true" : "false"}
-          />
-        );
-      })}
-    </OptionsContainer>
-  );
-};
-
-export {
-  colors,
-  IconAndTextContainer,
-  IconAndSelectedValueRenderContainer,
-  SelectOuterContainer,
-  SelectContainer,
-  SelectLegendText,
-  SelectValueContainer,
-  SelectedValueText,
-  OptionsContainer,
-  OptionsContainerWindowedComponent,
-  OptionsContainerComponent,
-  Option,
-  OptionWindowed,
-  SelectSearchTextInput,
-};

package/src/components/Select/index.ts

@@ -1 +0,0 @@
-export * from './Select';