@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/select/custom-select/layer/heading.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from '../custom-select.module.less';
+
+export const Heading = ({ label }) => {
+  return (
+    <div
+      onClick={(evt) => evt.stopPropagation()} //don't close menu
+      className={styles.heading}
+    >
+      {label}
+    </div>
+  );
+};

package/src/components/select/custom-select/layer/layer.jsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import cx from 'classnames';
+import { FixedSizeList as List } from 'react-window';
+import styles from '../custom-select.module.less';
+import { Section } from './section';
+
+export const Layer = ({
+  listRef,
+  isMulti,
+  sections,
+  selectedOptions,
+  onSelectOption,
+  focusedOptionIndex,
+  width,
+  firstSelectedOptionIndex,
+  closeLayer,
+}) => {
+  useEffect(() => {
+    if (firstSelectedOptionIndex !== null && listRef.current !== null) {
+      listRef.current.scrollToItem(firstSelectedOptionIndex, 'start');
+    }
+  }, []);
+  const optionHeight = 38;
+  return (
+    <div className={cx(styles.layer)}>
+      {!sections.length ? (
+        <ul>
+          <li>
+            <div className={styles.message} style={{ width }}>
+              No matches
+            </div>
+          </li>
+        </ul>
+      ) : (
+        <List
+          ref={listRef}
+          height={
+            sections.length < 10
+              ? optionHeight * sections.length
+              : optionHeight * 10
+          }
+          itemCount={sections.length}
+          itemSize={optionHeight}
+          width={width}
+        >
+          {({ index, style }) => (
+            <div style={style}>
+              <Section
+                closeLayer={closeLayer}
+                section={sections[index]}
+                selected={
+                  isMulti &&
+                  sections[index].type !== 'Heading' &&
+                  selectedOptions
+                    ? selectedOptions.some(
+                        (v) => v && v.value === sections[index].value,
+                      )
+                    : selectedOptions
+                    ? sections[index].value === selectedOptions.value
+                    : false
+                }
+                focused={focusedOptionIndex === index}
+                onSelectOption={(evt) => {
+                  onSelectOption(evt, sections[index]);
+                }}
+              />
+            </div>
+          )}
+        </List>
+      )}
+    </div>
+  );
+};

package/src/components/select/custom-select/layer/option.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import cx from 'classnames';
+import { FaCheck } from 'react-icons/fa';
+import styles from '../custom-select.module.less';
+import { Text } from '../../../text/text';
+import { Actions } from '../../../actions/actions';
+
+export const Option = ({
+  details,
+  label,
+  icon,
+  disabled,
+  selected,
+  focused,
+  onSelectOption,
+  actions,
+  closeLayer,
+  testId,
+}) => {
+  return (
+    <div
+      className={cx(
+        styles.option,
+        disabled ? styles.disabled : '',
+        selected ? styles.selected : '',
+        focused ? styles.focused : '',
+      )}
+      onClick={!disabled ? onSelectOption : () => {}}
+      data-testid={testId}
+    >
+      <div className={styles.optionContent}>
+        <span className={styles.label} title={label}>
+          {label}
+          {icon && <span className={styles.icon}>{icon}</span>}
+        </span>
+      </div>
+      {details && (
+        <div className={cx(styles.details)}>
+          <Text faint>{details}</Text>
+        </div>
+      )}
+      {!!actions?.length && (
+        <div className={cx(styles.actions)}>
+          <Actions actions={actions} closeLayer={closeLayer} right />
+        </div>
+      )}
+      {selected ? (
+        <span className={styles.check}>
+          <FaCheck />
+        </span>
+      ) : null}
+    </div>
+  );
+};

package/src/components/select/custom-select/layer/placementOptions.js

@@ -0,0 +1,7 @@
+export const placementOptions = {
+  auto: true,
+  possiblePlacements: ['bottom-start', 'top-start'],
+  placement: 'bottom-start',
+  preferX: 'right',
+  preferY: 'bottom',
+};

package/src/components/select/custom-select/layer/section.jsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { DisabledContext } from '../../../../helpers/disabled-context';
+import { Heading } from './heading';
+import { Option } from './option';
+
+export const Section = ({
+  section,
+  selected,
+  focused,
+  onSelectOption,
+  closeLayer,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+
+  switch (section.type) {
+    case 'Heading':
+      return <Heading label={section.label} />;
+    case 'Option':
+    default:
+      return (
+        <Option
+          closeLayer={closeLayer}
+          actions={section.actions}
+          label={section.label}
+          details={section.details}
+          icon={section.icon}
+          disabled={section.disabled || disabledContext}
+          selected={selected}
+          focused={focused}
+          onSelectOption={onSelectOption}
+          testId={section.testId}
+        />
+      );
+  }
+};

package/src/components/select/custom-select/trigger/input.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import cx from 'classnames';
+import { FaTimes } from 'react-icons/fa';
+import styles from './trigger.module.less';
+
+export const Input = ({
+  selectedOptions,
+  searchable,
+  searchValue,
+  inputRef,
+  onChange,
+  onClickDeselect,
+  error,
+  focusedSelectedOptionIndex,
+  placeholder,
+}) => {
+  const isMulti = selectedOptions instanceof Array;
+  const hasSelectedValues = isMulti
+    ? selectedOptions.length > 0
+    : selectedOptions !== null;
+  const placeHolder = !searchValue && !hasSelectedValues ? placeholder : '';
+  const selectedSingleValue =
+    !isMulti && !searchValue && selectedOptions ? selectedOptions.label : '';
+  const size = searchValue.length || 2;
+  return (
+    <div className={styles.triggerInputContainer}>
+      {placeHolder && (
+        <span
+          className={cx(
+            styles.placeHolder,
+            searchable ? styles.searchable : '',
+          )}
+        >
+          {placeHolder}
+        </span>
+      )}
+      {selectedSingleValue !== '' && (
+        <span
+          className={cx(
+            styles.selectedSingleValue,
+            searchable ? styles.searchable : '',
+          )}
+        >
+          {selectedSingleValue}
+        </span>
+      )}
+      {isMulti ? (
+        <div className={styles.multiOptions}>
+          {selectedOptions
+            .filter((option) => option && option.label)
+            .map((option, index) => (
+              <span key={index} className={styles.multiOptionWrapper}>
+                <span
+                  className={styles.multiOption}
+                  key={index}
+                  onClick={(evt) => {
+                    evt.stopPropagation();
+                  }}
+                >
+                  <span className={styles.label}>{option.label}</span>
+                  <span
+                    className={cx(
+                      styles.closeMultiOption,
+                      focusedSelectedOptionIndex === index ? styles.focus : '',
+                    )}
+                    onClick={(evt) => {
+                      evt.stopPropagation();
+                      onClickDeselect(evt, option);
+                    }}
+                  >
+                    <FaTimes className={styles.icon} />
+                  </span>
+                </span>
+              </span>
+            ))}
+        </div>
+      ) : null}
+
+      {searchable ? (
+        <input
+          tabIndex={-1}
+          ref={inputRef}
+          size={size}
+          className={cx(styles.input, error ? styles.error : '')}
+          value={searchValue}
+          onChange={(evt) => onChange(evt.target.value)}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+Input.defaultProps = {
+  placeholder: 'Select...',
+};
+
+Input.propTypes = {
+  placeholder: PropTypes.string,
+};

package/src/components/select/custom-select/trigger/trigger.jsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import cx from 'classnames';
+import { FaTimes } from 'react-icons/fa';
+import { useFocus } from '../../../../hooks/use-focus';
+import { Input } from './input';
+import { Tooltip } from '../../../tooltip/tooltip';
+import styles from './trigger.module.less';
+import { isStringNumberOrNode } from '../../../../helpers/types';
+import { Text } from '../../../text/text';
+
+export const Trigger = ({
+  selectedOptions,
+  searchValue,
+  searchable,
+  clearable,
+  onClickTrigger,
+  width,
+  element,
+  error,
+  warning,
+  tooltip,
+  small,
+  isInTable,
+  disabled,
+  onChangeSearch,
+  onClickDeselect,
+  onClickClear,
+  tabIndex,
+  isOpen,
+  triggerRef,
+  clearAllIsFocused,
+  focusedSelectedOptionIndex,
+  onFocus,
+  onBlur,
+  groupOrder,
+  maxTooltipWidth,
+  placeholder,
+  right,
+  testId,
+}) => {
+  const [inputRef, setInputFocus] = useFocus();
+
+  const canClear =
+    clearable &&
+    selectedOptions &&
+    (selectedOptions.value || selectedOptions.length > 0);
+
+  const order = (() => {
+    if (groupOrder) {
+      switch (groupOrder) {
+        case 'first':
+          return styles.groupOrderFirst;
+        case 'last':
+          return styles.groupOrderLast;
+        default:
+          return styles.groupOrderMiddle;
+      }
+    }
+    return '';
+  })();
+
+  const selectedOptionsWithDetails = selectedOptions?.details
+    ? {
+        ...selectedOptions,
+        label: (
+          <div className={cx(styles.detailedLabel)}>
+            <Text>{selectedOptions.label}</Text>
+            <Text faint>{selectedOptions.details}</Text>
+          </div>
+        ),
+      }
+    : selectedOptions;
+
+  const triggerInput = (
+    <div
+      style={{
+        ...(width ? { width } : {}),
+      }}
+    >
+      {element}
+      <div
+        ref={triggerRef}
+        tabIndex={tabIndex}
+        className={cx(
+          styles.trigger,
+          isOpen ? styles.isOpen : '',
+          error ? styles.error : warning ? styles.warning : '',
+          disabled ? styles.disabled : '',
+          small ? styles.small : '',
+          isInTable ? styles.isInTable : '',
+          right ? styles.right : '',
+          order,
+        )}
+        onClick={(evt) => {
+          evt.stopPropagation();
+          setInputFocus();
+          onClickTrigger(evt);
+        }}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        data-testid={testId}
+      >
+        <Input
+          selectedOptions={selectedOptionsWithDetails}
+          placeholder={placeholder}
+          searchable={searchable}
+          searchValue={searchValue}
+          inputRef={inputRef}
+          onChange={onChangeSearch}
+          error={error}
+          onClickDeselect={onClickDeselect}
+          focusedSelectedOptionIndex={focusedSelectedOptionIndex}
+        />
+        <span className={styles.icons}>
+          {canClear ? (
+            <span
+              className={cx(
+                styles.clearAll,
+                clearAllIsFocused ? styles.focus : '',
+              )}
+              onClick={(evt) => {
+                evt.stopPropagation();
+                onClickClear(evt);
+              }}
+            >
+              <FaTimes className={cx(styles.iconClear)} />
+            </span>
+          ) : (
+            <span className={cx(styles.iconOpen)} />
+          )}
+        </span>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <Tooltip
+        error={!!error}
+        warning={!!warning}
+        text={tooltip || error || warning}
+        enabled={
+          (tooltip && isStringNumberOrNode(tooltip)) ||
+          (error && isStringNumberOrNode(error)) ||
+          (warning && isStringNumberOrNode(warning)) ||
+          false
+        }
+        maxWidth={maxTooltipWidth}
+        placement="bottom-center"
+      >
+        {triggerInput}
+      </Tooltip>
+    </>
+  );
+};