@redsift/design-system-legacy 8.0.0-alpha.8 → 8.0.1

package/src/components/Select/SelectComponents.jsx

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

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