onekijs-ui 0.9.2 → 0.15.2

package/src/components/select/style.ts

@@ -1,80 +1,369 @@
 import { css } from 'styled-components';
 import { alignItems } from '../../styles/alignment';
 import { backgroundColor } from '../../styles/background';
-import { borderBottomWidth, borderColor, borderRadius, borderWidth } from '../../styles/border';
-import { display } from '../../styles/display';
-import { appearance, cursor, outline } from '../../styles/interactivity';
-import { height, width } from '../../styles/size';
-import { margin, marginY, padding, paddingX, paddingY } from '../../styles/spacing';
+import {
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderColor,
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderTopWidth,
+  borderWidth,
+  boxShadow,
+} from '../../styles/border';
+import { display, visibility } from '../../styles/display';
+import { flexDirection, flexGrow, flexWrap } from '../../styles/flex';
+import { appearance, cursor, outline, userSelect } from '../../styles/interactivity';
+import { overflowY } from '../../styles/overflow';
+import { bottom, left, position, right, top, zIndex } from '../../styles/position';
+import { height, minWidth, width } from '../../styles/size';
+import { margin, marginRight, marginY, padding, paddingLeft, paddingX, paddingY } from '../../styles/spacing';
 import { verticalAlign } from '../../styles/table';
 import { transitionDuration, transitionProperty, transitionTimingFunction } from '../../styles/transition';
 import { ComponentStyle } from '../../styles/typings';
-import { color } from '../../styles/typography';
+import { color, fontFamily, fontSize, fontWeight, whiteSpace } from '../../styles/typography';
+import { lighten } from '../../utils/color';
 import { preflight } from '../../utils/style';
 import { SelectProps } from './typings';
 
-const selectStyle: ComponentStyle<SelectProps> = () => {
+const selectStyle: ComponentStyle<SelectProps> = ({ theme, clickable }) => {
   return css`
     ${preflight()}
     ${width('100%')}
+
+    &.o-select-status-error {
+      .o-select-input-container,
+      .o-select-input-container.o-select-input-focus {
+        ${borderColor('danger')}
+      }
+      .o-select-icon-container {
+        .o-select-icon {
+          ${color('danger')}
+        }
+      }
+    }
+    &.o-select-status-warning {
+      .o-select-input-container,
+      .o-select-input-container.o-select-input-focus {
+        ${borderColor('warning')}
+      }
+      .o-select-icon-container {
+        .o-select-icon {
+          ${color('warning')}
+        }
+      }
+    }
+    &.o-select-status-success {
+      .o-select-input-container,
+      .o-select-input-container.o-select-input-focus {
+        ${borderColor('success')}
+      }
+      .o-select-icon-container {
+        .o-select-icon {
+          ${color('success')}
+        }
+      }
+    }
+    &.o-select-size-xsmall {
+      .o-select-input-wrapper {
+        ${paddingY(0)}
+      }
+      .o-select-input {
+        ${paddingY(0)}
+        ${fontSize('xs')}
+      }
+      .o-select-token {
+        ${paddingY(0)}
+        ${marginY('px')}
+      }
+    }
+    &.o-select-size-small {
+      .o-select-input-wrapper {
+        ${paddingY(0)}
+      }
+      .o-select-input {
+        ${paddingY(0)}
+        ${fontSize('sm')}
+      }
+      .o-select-token {
+        ${paddingY(0)}
+        ${marginY('px')}
+      }
+    }
+    &.o-select-size-medium {
+      .o-select-input-wrapper {
+        ${paddingY('xs')}
+      }
+      .o-select-input {
+        ${paddingY('xs')}
+        ${fontSize('default')}
+      }
+      .o-select-token {
+        ${paddingY('0')}
+        ${marginY('xs')}
+      }
+    }
+    &.o-select-size-large {
+      .o-select-input-wrapper {
+        ${paddingY('md')}
+      }
+      .o-select-input {
+        ${paddingY('md')}
+        ${fontSize('md')}
+      }
+      .o-select-token {
+        ${paddingY('sm')}
+        ${marginY('xs')}
+      }
+    }
+    &.o-select-size-xlarge {
+      .o-select-input-wrapper {
+        ${paddingY('lg')}
+      }
+      .o-select-input {
+        ${paddingY('lg')}
+        ${fontSize('lg')}
+      }
+      .o-select-token {
+        ${paddingY('md')}
+        ${marginY('xs')}
+      }
+    }
+
     .o-select-input-container {
-      ${marginY(2)}
-      ${padding(1)}
       ${backgroundColor('white')}
       ${display('flex')}
-      ${borderWidth(1)}
-      ${borderColor('gray-200')}
-      ${borderRadius('default')}
+      ${alignItems('center')}
+      ${borderWidth('1px')}
+      ${borderColor('light')}
+      ${borderRadius('md')}
+      ${clickable ? cursor('pointer') : cursor('auto')}
+      ${padding('1px')}
+      ${position('relative')}
+      input {
+        ${backgroundColor('inherit')}
+      }
       &.o-select-input-focus {
         ${borderColor('primary')}
-        ${borderWidth(2)}
+        ${borderWidth('2px')}
+        ${padding(0)}
+      }
+      .o-select-remover {
+        ${cursor('pointer')}
+        ${color('light')}
+        ${fontFamily('Arial')}
+        ${paddingX('sm')}
+      }
+    }
+
+    &.o-select-disabled {
+      .o-select-input-container {
+        ${backgroundColor('lighter')}
+        ${cursor('not-allowed')}
+        input {
+          ${cursor('not-allowed')}
+        }
+      }
+
+      .o-select-icon-container {
+        ${cursor('not-allowed')}
+        .o-select-icon {
+          ${cursor('not-allowed')}
+        }
+      }
+
+      .o-select-input-data {
+        .o-select-token {
+          ${cursor('not-allowed')}
+          .o-select-token-remove {
+            ${cursor('not-allowed')}
+          }
+        }
+      }
+    }
+
+    &.o-select-close {
+      .o-select-input {
+        ${cursor('pointer')}
+      }
+    }
+    &.o-select-open {
+      .o-select-input-container {
+        ${borderBottomRightRadius(0)}
+        ${borderBottomLeftRadius(0)}
       }
     }
-    .o-select-input {
-      ${paddingY(1)}
-      ${paddingX(2)}
-      ${appearance('none')}
-      ${outline('none')}
-      ${width('full')}
-      ${color('gray-800', { placeholder: 'gray-400' })}
+
+    .o-select-input-data {
+      ${display('flex')}
+      ${flexGrow(1)}
+      ${flexWrap('wrap')}
+      ${alignItems('center')}
+      ${paddingX('sm')}
+      .o-select-input-wrapper {
+        ${flexGrow(1)}
+        ${color('gray-800')}
+        ${position('relative')}
+        ${display('inline-block')}
+        ${minWidth('50px')}
+        .o-select-input-auto-sizer {
+          ${visibility(false)}
+          ${display('inline-block')}
+          ${whiteSpace('pre')}
+        }
+        .o-select-input {
+          ${position('absolute')}
+          ${top(0)}
+          ${left(0)}
+          ${right(0)}
+          ${bottom(0)}
+          ${appearance('none')}
+          ${outline('none')}
+          ${width('full')}
+          ${color('gray-800', { placeholder: 'gray-400' })}
+        }
+      }
+
+      .o-select-token {
+        ${cursor('default')}
+        ${whiteSpace('pre')}
+        ${backgroundColor('primary')}
+        ${color('white')}
+        ${marginRight('sm')}
+        ${borderRadius('md')}
+        ${fontSize('sm')}
+        ${display('flex')}
+        .o-select-token-text {
+          ${flexGrow(1)}
+          ${paddingLeft('sm')}
+        }
+        .o-select-token-remove {
+          ${cursor('pointer')}
+          ${color('white', { hover: 'danger' })}
+          ${fontFamily('Arial')}
+          ${paddingX('sm')}
+        }
+      }
     }
+
     .o-select-icon-container {
       ${color('primary')}
       ${cursor('pointer')}
       ${width(8)}
-      ${paddingY(1)}
-      ${paddingX(1)}
+      ${paddingY('xs')}
+      ${paddingX('xs')}
       ${display('flex')}
       ${alignItems('center')}
       ${borderColor('gray-200')}
+      .o-select-icon {
+        ${color('primary')}
+        ${cursor('pointer')}
+        ${width(4)}
+        ${height(4)}
+        ${outline('none', { focus: 'none' })}
+        ${backgroundColor('transparent')}
+        ${padding(0)}
+      }
+      .o-select-arrow-svg {
+        ${display('block')}
+        ${verticalAlign('middle')}
+        ${margin('px')}
+        ${transitionDuration('.5s')}
+        ${transitionProperty('all')}
+        ${transitionTimingFunction('ease-in-out')}
+      }
     }
-    .o-select-icon {
+
+    &.o-select-multiple {
+      .o-select-options {
+        .o-select-option {
+          &.o-select-option-active {
+            ${backgroundColor(lighten(theme.colors.primary, 300))}
+            ${color('inherit')}
+          }
+          &.o-select-option-selected {
+            ${backgroundColor('primary')}
+            ${color('white')}
+            .o-select-option-multiple-checkbox {
+              ${color(lighten(theme.colors.primary, 400))}
+            }
+          }
+        }
+      }
+    }
+
+    .o-select-not-found {
+      ${display('flex')}
+      ${flexDirection('column')}
+      ${alignItems('center')}
+      ${padding('4xl')}
       ${color('primary')}
-      ${cursor('pointer')}
-      ${width(4)}
-      ${height(4)}
-      ${outline('none', { focus: 'none' })}
-      ${backgroundColor('transparent')}
-      ${padding(0)}
-    }
-    .o-select-arrow-svg {
-      ${display('block')}
-      ${verticalAlign('middle')}
-      ${margin('px')}
-      ${transitionDuration('.5s')}
-      ${transitionProperty('all')}
-      ${transitionTimingFunction('ease-in-out')}
-    }
-    .o-select-option {
-      ${width('full')}
-      ${borderColor('gray-100')}
-      ${borderBottomWidth(1)}
-      &.o-select-option-clickable {
-        ${cursor('pointer')}
+    }
+    .o-select-options,
+    .o-select-not-found {
+      ${borderRadius('md')}
+      ${borderTopLeftRadius(0)}
+      ${borderTopRightRadius(0)}
+      ${boxShadow('lg')}
+      ${zIndex(2000)}
+      ${backgroundColor('white')}
+      ${borderWidth(1)}
+      ${borderColor('light')}
+      ${borderTopWidth(0)}
+    }
+
+    .o-select-options {
+      scrollbar-width: thin;
+      scrollbar-color: ${(props) => props.theme.palette.colors[props.theme.colors.primary]}
+        ${(props) => props.theme.colors['gray-200']};
+      &::-webkit-scrollbar {
+        width: 12px;
+      }
+      &::-webkit-scrollbar-track {
+        background: ${(props) => props.theme.palette.colors['gray-200']};
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${(props) => props.theme.palette.colors[props.theme.colors.primary]};
+        border: 3px solid ${(props) => props.theme.palette.colors['gray-200']};
+      }
+      ${overflowY('hidden')}
+
+      .o-select-option {
+        ${width('full')}
+        ${paddingX('lg')}
+        ${paddingY('sm')}
+        ${display('flex')}
+        ${alignItems('center')}
+        ${backgroundColor('transparent', { hover: 'gray-200' })}
+        ${userSelect('none')}
+        &.o-select-option-clickable {
+          ${cursor('pointer')}
+        }
+        &.o-select-option-highlighted {
+          ${backgroundColor('gray-200')}
+          ${color('inherit')}
+        }
+        &.o-select-option-active {
+          ${backgroundColor('primary')}
+          ${color('white')}
+        }
+
+        .o-select-option-icon {
+          ${width(6)}
+          ${fontSize('sm')}
+          ${fontWeight('bold')}
+        }
+
+        .o-select-option-data {
+          ${flexGrow(1)}
+        }
+
+        .o-select-option-multiple-checkbox {
+          ${marginRight('sm')}
+          ${color('primary')}
+        }
       }
-      &.o-select-option-hoverable {
-        ${backgroundColor('transparent', { hover: 'teal-100' })}
-      }      
     }
   `;
 };

package/src/components/select/typings.ts

@@ -1,47 +1,153 @@
-import { AnyFunction, ChangeHandler, Collection, ItemAdapter, ItemMeta } from 'onekijs-core';
-import { FC } from 'react';
-import { ListItemHandler, ListItemProps, ListProps } from '../list/typings';
+import {
+  AnyFunction,
+  ChangeHandler,
+  Collection,
+  CollectionProxy,
+  FormFieldProps,
+  ValidationStatus,
+} from 'onekijs-framework';
+import React, { FC } from 'react';
+import { TshirtSize } from '../../styles/typings';
+import { DropdownWidthModifier } from '../dropdown/typings';
+import { FieldLayoutProps } from '../field/typings';
+import {
+  ListConfig,
+  ListItem,
+  ListItemAdaptee,
+  ListItemAdapter,
+  ListItemHandler,
+  ListItemProps,
+  ListNotFoundProps,
+  ListState,
+} from '../list/typings';
 
-export type SelectAdapter<T, M extends SelectOptionMeta = SelectOptionMeta> = ItemAdapter<T, M>;
+export type ArraySelectProps<T = any, I extends SelectItem<T> = SelectItem<T>> = SelectConfig<T, I> & {
+  adapter?: SelectItemAdapter<T>;
+  dataSource: T[] | string;
+  fetchOnce?: boolean;
+};
+
+export type ControllerSelectProps<
+  T = any,
+  I extends SelectItem<T> = SelectItem<T>,
+  S extends SelectState<T, I> = SelectState<T, I>,
+  C extends SelectController<T, I, S> = SelectController<T, I, S>,
+> = SelectConfig<T, I> & {
+  controller: CollectionProxy<T, I, S, C>;
+};
+
+export type FormSelectProps<T = any, I extends SelectItem<T> = SelectItem<T>> = SelectProps<T, I> &
+  FormFieldProps &
+  FieldLayoutProps & {
+    defaultValue?: T | T[] | null;
+    FieldComponent?: React.FC<SelectProps>;
+  };
+
+export type SelectController<
+  T,
+  I extends SelectItem<T> = SelectItem<T>,
+  S extends SelectState<T, I> = SelectState<T, I>,
+> = Collection<T, I, S>;
 
 export interface SelectIconProps {
   open: boolean;
   loading: boolean;
-  onIconClick: AnyFunction<void>;
+  fetching: boolean;
+  onClick: AnyFunction<void>;
 }
 
-export interface SelectInputProps extends React.InputHTMLAttributes<HTMLInputElement>, SelectIconProps {
+export interface SelectInputProps<T = any, I extends SelectItem<T> = SelectItem<T>>
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
   IconComponent?: FC<SelectIconProps>;
-  focus?: boolean;
+  focus: boolean;
+  value?: string;
+  tokens?: SelectItem<T>[];
+  open: boolean;
+  loading: boolean;
+  fetching: boolean;
+  setOpen: (open: boolean) => void;
+  onChange: (nextValue: string | null) => void;
+  multiple: boolean;
+  onRemove: SelectOptionHandler<T, I>;
+  style?: React.CSSProperties;
+  nullable?: boolean;
+  clickable: boolean;
+  minChars: number;
 }
 
-export type SelectInternalProps<T = any, M extends ItemMeta = SelectOptionMeta> = Omit<SelectProps, 'items'> & {
-  collection: Collection<T, M>;
-};
+export type SelectItem<T = any> = ListItem<T>;
 
-export type SelectOptionHandler<T = any, M extends ItemMeta = SelectOptionMeta> = ListItemHandler<T, M>;
+export type SelectItemAdaptee = ListItemAdaptee;
 
-export interface SelectOptionMeta extends ItemMeta {
-  selected?: boolean;
-  highlighted?: boolean;
-}
+export type SelectItemAdapter<T = any> = ListItemAdapter<T>;
 
-export type SelectOptionProps<T = any, M extends SelectOptionMeta = SelectOptionMeta> = ListItemProps<T, M>;
+// export type SelectInternalProps<T = any, M extends ItemMeta = SelectOptionMeta> = Omit<SelectProps, 'items'> & {
+//   collection: Collection<T, M>;
+// };
 
-export interface SelectOptionsProps<T = any, M extends SelectOptionMeta = SelectOptionMeta> extends ListProps<T, M> {
-  search?: string;
-}
+export type SelectNotFoundProps = ListNotFoundProps;
+
+export type SelectOptionHandler<T = any, I extends SelectItem<T> = SelectItem<T>> = ListItemHandler<T, I>;
+export type SelectOptionSelectionHandler<T = any, I extends SelectItem<T> = SelectItem<T>> = (
+  item: I,
+  index: number,
+  close?: boolean,
+) => void;
 
-export interface SelectProps<T = any, M extends SelectOptionMeta = SelectOptionMeta> extends ListProps<T, M> {
-  InputComponent?: FC<SelectInputProps>;
+export type SelectOptionProps<T = any, I extends SelectItem<T> = SelectItem<T>> = ListItemProps<T, I> & {
+  multiple?: boolean;
+};
+
+export type SelectProps<
+  T = any,
+  I extends SelectItem<T> = SelectItem<T>,
+  S extends SelectState<T, I> = SelectState<T, I>,
+  C extends SelectController<T, I, S> = SelectController<T, I, S>,
+> = SelectConfig<T, I> & {
+  adapter?: SelectItemAdapter<T>;
+  controller?: CollectionProxy<T, I, S, C>;
+  dataSource?: T[] | string;
+  fetchOnce?: boolean;
+};
+
+export type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T>> = Omit<ListConfig<T, I>, 'ItemComponent'> & {
+  attachDropdownToBody?: boolean;
+  InputComponent?: FC<SelectInputProps<T, I>>;
   IconComponent?: FC<SelectIconProps>;
+  NotFoundComponent?: FC<SelectNotFoundProps>;
   placeholder?: string;
-  value?: T | null;
+  value?: T | T[] | null;
   onChange?: ChangeHandler<T>;
+  onFocus?: () => void;
+  onBlur?: () => void;
   autoFocus?: boolean;
   className?: string;
+  multiple?: boolean;
+  status?: ValidationStatus;
+  name?: string;
+  size?: TshirtSize;
+  nullable?: boolean;
+  minChars?: number;
+  openOnFocus?: boolean;
+  clickable?: boolean;
+  dropdownWidthModifier?: DropdownWidthModifier;
+  OptionComponent?: FC<SelectOptionProps>;
+  OptionContentComponent?: FC<SelectOptionProps>;
+  OptionLoadingComponent?: FC;
+  MultiOptionsComponent?: FC<SelectOptionProps>;
+  animationMs?: number;
+  disabled?: boolean;
+};
+
+export type SelectState<T = any, I extends SelectItem<T> = SelectItem<T>> = ListState<T, I>;
+
+export interface SelectTokensProps<T = any, I extends SelectItem<T> = SelectItem<T>> {
+  tokens?: I[];
+  onRemove: SelectOptionHandler<T, I>;
 }
 
-export interface ClickOutsideHandler {
-  handleClickOutside?: AnyFunction<void>;
+export interface SelectTokenProps<T = any, I extends SelectItem<T> = SelectItem<T>> {
+  token: I;
+  onRemove: SelectOptionHandler<T, I>;
+  index: number;
 }