onekijs-ui 0.9.2 → 0.15.2

package/src/components/select/components/SelectInputComponent.tsx

@@ -1,93 +1,237 @@
-import { useIsomorphicLayoutEffect } from 'onekijs-core';
-import React, { FC, useCallback, useRef, useMemo } from 'react';
+import { useIsomorphicLayoutEffect } from 'onekijs-framework';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { SelectInputProps } from '../typings';
 import SelectIconComponent from './SelectIconComponent';
+import SelectTokensComponent from './SelectTokensComponent';
 
-const SelectInputComponent: FC<SelectInputProps> = ({
-  onIconClick,
-  open,
-  placeholder,
-  loading,
-  IconComponent = SelectIconComponent,
-  onFocus,
-  onBlur,
-  onChange,
-  value,
-  focus,
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const partialValueRef = useRef('');
-  const proxifyRef = useRef(true);
-  const proxyValue =
-    value === undefined || !proxifyRef.current ? (focus ? partialValueRef.current : '') : String(value);
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
+const SelectInputComponent = React.forwardRef<HTMLDivElement, SelectInputProps>(
+  (
+    {
+      setOpen,
+      open,
+      placeholder,
+      loading,
+      fetching,
+      IconComponent = SelectIconComponent,
+      onFocus: forwardFocus,
+      onBlur: forwardBlur,
+      onChange,
+      onRemove,
+      value,
+      focus,
+      multiple,
+      tokens,
+      autoFocus,
+      style,
+      nullable,
+      clickable,
+      minChars,
+      disabled,
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const autoSizeRef = useRef<HTMLSpanElement>(null);
+    // partialValue is the part of the selected item entered by the user
+    const partialValueRef = useRef<string | undefined>(undefined);
+    // replace the input value by the selected item
+    const showSelectedRef = useRef(true);
+
+    const partialValue = partialValueRef.current ?? value ?? '';
+
+    const [_, refresh] = useReducer((x) => x + 1, 0);
+
+    // value that is actually shown in the input.
+    // This value is set to the partial value (that is the unselected part of the value) if the value is pending loading or we don't
+    const showPartialValue =
+      value === undefined ||
+      fetching ||
+      loading ||
+      !showSelectedRef.current ||
+      !value.toString().toLowerCase().startsWith(partialValue.toLowerCase());
+    const proxyValue = showPartialValue
+      ? focus || loading || fetching
+        ? value !== undefined &&
+          showSelectedRef.current &&
+          value.toString().toLowerCase().startsWith(partialValue.toLowerCase())
+          ? value
+          : partialValue
+        : ''
+      : value;
+
+    const handleChange = useCallback(() => {
       const input = inputRef.current;
       if (input) {
         const currentSelectionStart = input.selectionStart;
         const currentSelectionEnd = input.selectionEnd;
-        if (currentSelectionStart && currentSelectionStart !== currentSelectionEnd) {
+        if (
+          currentSelectionStart &&
+          currentSelectionStart !== currentSelectionEnd &&
+          currentSelectionStart >= minChars
+        ) {
           partialValueRef.current = input.value.substring(0, currentSelectionStart);
         } else {
           partialValueRef.current = input.value;
         }
       }
-      if (onChange) {
-        e.target.value = partialValueRef.current;
-        onChange(e);
+      if ((partialValueRef.current?.length || 0) >= minChars) {
+        onChange(partialValueRef.current || '');
+      } else {
+        setOpen(false);
+        refresh();
       }
-    },
-    [onChange],
-  );
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    const input = inputRef.current;
-    if (!input) return;
-    if (e.keyCode === 8 || e.keyCode === 46) {
-      proxifyRef.current = false;
-    } else {
-      const currentSelectionStart = input.selectionStart;
-      const currentSelectionEnd = input.selectionEnd;
-      if (currentSelectionStart === currentSelectionEnd && currentSelectionStart === input.value.length) {
-        proxifyRef.current = true;
+    }, [onChange, minChars, setOpen]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        const input = inputRef.current;
+        if (!input) return;
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+          showSelectedRef.current = false;
+          if (e.key === 'Backspace' && proxyValue === '' && multiple && tokens && tokens.length > 0) {
+            onRemove(tokens[tokens.length - 1], tokens.length - 1);
+          }
+        } else if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) {
+          if (multiple) {
+            partialValueRef.current = undefined;
+            showSelectedRef.current = true;
+          } else {
+            inputRef.current && inputRef.current.blur();
+          }
+        } else if (['Escape'].includes(e.key)) {
+          partialValueRef.current = undefined;
+          showSelectedRef.current = true;
+        } else {
+          const currentSelectionStart = input.selectionStart;
+          const currentSelectionEnd = input.selectionEnd;
+          if (currentSelectionStart === currentSelectionEnd && currentSelectionStart === input.value.length) {
+            showSelectedRef.current = true;
+          }
+        }
+      },
+      [multiple, proxyValue, tokens, onRemove],
+    );
+
+    const handleKeyUp = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        const input = inputRef.current;
+        if (!input) return;
+        if (proxyValue === partialValueRef.current + e.key) {
+          partialValueRef.current = proxyValue;
+          onChange(proxyValue);
+        }
+      },
+      [proxyValue, onChange],
+    );
+
+    useIsomorphicLayoutEffect(() => {
+      const input = inputRef.current;
+      const autoSizer = autoSizeRef.current;
+      if (input && focus) {
+        if (
+          value !== undefined &&
+          value !== partialValueRef.current &&
+          value.toLowerCase().startsWith((partialValueRef.current || '').toLowerCase()) &&
+          showSelectedRef.current
+        ) {
+          input.setSelectionRange((partialValueRef.current || '').length, value.length);
+        }
       }
-    }
-  }, []);
-
-  useIsomorphicLayoutEffect(() => {
-    const input = inputRef.current;
-    if (input && focus) {
-      if (value !== undefined && String(value).startsWith(partialValueRef.current) && proxifyRef.current) {
-        input.setSelectionRange(partialValueRef.current.length, String(value).length);
+      if (input && autoSizer) {
+        autoSizer.innerText = input.value;
       }
-    }
-  });
-
-  const className = useMemo(() => {
-    const result = ['o-select-input-container'];
-    if (focus) {
-      result.push('o-select-input-focus');
-    }
-    return result.join(' ');
-  }, [focus]);
-
-  return (
-    <div className={className}>
-      <div className="o-select-input-marker" />
-      <input
-        ref={inputRef}
-        placeholder={placeholder}
-        className="o-select-input"
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        value={proxyValue}
-      />
-      <IconComponent onIconClick={onIconClick} open={open} loading={loading} />
-    </div>
-  );
-};
+    });
+
+    const className = useMemo(() => {
+      const result = ['o-select-input-container'];
+      if (focus) {
+        result.push('o-select-input-focus');
+      }
+      return result.join(' ');
+    }, [focus]);
+
+    const onClick = useCallback(() => {
+      if (!open && clickable) {
+        setOpen(true);
+      }
+    }, [open, setOpen, clickable]);
+
+    const onFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        inputRef.current && inputRef.current.select();
+        forwardFocus && forwardFocus(e);
+      },
+      [forwardFocus],
+    );
+
+    const onBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        partialValueRef.current = undefined;
+        showSelectedRef.current = true;
+        forwardBlur && forwardBlur(e);
+      },
+      [forwardBlur],
+    );
+
+    const onIconClick = useCallback(
+      (e: any) => {
+        if (!disabled) {
+          if (!open) {
+            inputRef.current && inputRef.current.select();
+          }
+          forwardFocus && forwardFocus(e);
+          setOpen(!open);
+        }
+      },
+      [open, forwardFocus, setOpen, disabled],
+    );
+
+    const onNullify = useCallback(() => {
+      onChange(null);
+    }, [onChange]);
+
+    useEffect(() => {
+      if (autoFocus && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [autoFocus]);
+
+    return (
+      <div className={className} style={style} ref={ref}>
+        <div className="o-select-input-data">
+          {multiple && <SelectTokensComponent tokens={tokens} onRemove={onRemove} />}
+          <div className="o-select-input-wrapper">
+            <span ref={autoSizeRef} className="o-select-input-auto-sizer" />
+            <input
+              ref={inputRef}
+              placeholder={placeholder}
+              className="o-select-input"
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              onKeyUp={handleKeyUp}
+              value={proxyValue}
+              onClick={onClick}
+              autoCapitalize="none"
+              autoComplete="off"
+              autoCorrect="off"
+              spellCheck="false"
+              disabled={disabled}
+            />
+          </div>
+        </div>
+        {!multiple && nullable && value && !disabled && (
+          <div className="o-select-remover" onClick={onNullify}>
+            &#10006;
+          </div>
+        )}
+        <IconComponent onClick={onIconClick} open={open} loading={loading} fetching={fetching} />
+      </div>
+    );
+  },
+);
+
+SelectInputComponent.displayName = 'SelectInput';
 
 export default SelectInputComponent;

package/src/components/select/components/SelectNotFoundComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import CloseAllIcon from '../../icon/CloseAllIcon';
+import { SelectNotFoundProps } from '../typings';
+
+const SelectNotFoundComponent: React.FC<SelectNotFoundProps> = ({ text = 'No data' }) => {
+  return (
+    <div className="o-select-not-found">
+      <CloseAllIcon width="32px" height="32px" />
+      <span>{text}</span>
+    </div>
+  );
+};
+
+export default SelectNotFoundComponent;

package/src/components/select/components/SelectOptionComponent.tsx

@@ -1,40 +1,74 @@
+import { isItemLoading } from 'onekijs-framework';
 import React, { FC, useMemo } from 'react';
+import Checkbox from '../../checkbox';
+import LoadingItem from '../../list/components/LoadingItem';
+import { useSelectConfig } from '../hooks/useSelectConfig';
 import { SelectOptionProps } from '../typings';
-import { LoadingStatus } from 'onekijs-core';
-
-const SelectOptionComponent: FC<SelectOptionProps> = React.memo(({ item, index, onClick, onMouseOver }) => {
-  const { data, text, meta } = item;
-  let content = '';
-  let clickable = !!onClick;
-  let hoverable = !!onMouseOver;
-  if (data === undefined && meta?.loadingStatus === LoadingStatus.Loading) {
-    content = 'loading';
+
+export const MultiSelectOptionComponent: FC<SelectOptionProps> = React.memo((props) => {
+  return <SelectOptionComponent {...props} multiple={true} />;
+});
+
+MultiSelectOptionComponent.displayName = 'MultiSelectOptionComponent';
+
+export const SelectOptionContent: FC<SelectOptionProps> = ({ item }) => {
+  return <div className="o-select-option-data">{item.text}</div>;
+};
+
+const SelectOptionComponent: FC<SelectOptionProps> = React.memo((props) => {
+  const { item, index, onClick, onMouseEnter, onMouseLeave, multiple = false } = props;
+  const { OptionContentComponent = SelectOptionContent, OptionLoadingComponent = LoadingItem } = useSelectConfig();
+  let clickable = !!onClick && !item?.disabled;
+  let hoverable = true;
+  if (item?.data === undefined && isItemLoading(item)) {
     clickable = false;
     hoverable = false;
-  } else {
-    content = text || '';
-    if (meta?.selected) {
-      content += ' *';
-    }
   }
+
   const classNames = useMemo(() => {
     const classNames = ['o-select-option'];
+    if (item?.disabled) {
+      classNames.push('o-select-option-disabled');
+    }
     if (clickable) {
       classNames.push('o-select-option-clickable');
     }
-    if (hoverable) {
-      classNames.push('o-select-option-hoverable');
+    if (hoverable && item?.highlighted) {
+      classNames.push('o-select-option-highlighted');
+    }
+    if (item?.selected) {
+      classNames.push('o-select-option-selected');
     }
+    if (item?.active) {
+      classNames.push('o-select-option-active');
+    }
+
     return classNames.join(' ');
-  }, [clickable, hoverable]);
+  }, [item, clickable, hoverable]);
+
+  if (isItemLoading(item)) {
+    return <OptionLoadingComponent />;
+  }
+
+  if (!item || !item.data) return null;
 
   return (
     <div
       className={classNames}
-      onClick={() => clickable && onClick && onClick(item, index)}
-      onMouseOver={() => hoverable && onMouseOver && onMouseOver(item, index)}
+      onMouseEnter={() => hoverable && onMouseEnter && item && onMouseEnter(item, index)}
+      onMouseLeave={() => hoverable && onMouseLeave && item && onMouseLeave(item, index)}
+      onClick={() => clickable && onClick && item && onClick(item, index)}
     >
-      {data === undefined && meta?.loadingStatus === LoadingStatus.Loading ? 'loading' : content}
+      {/* {multiple && <div className="o-select-option-icon">{meta?.selected? <>&#10003;</>:<></>}</div> } */}
+      {multiple && (
+        <Checkbox
+          value={item?.selected ? true : false}
+          onChange={() => undefined}
+          color="currentColor"
+          className="o-select-option-multiple-checkbox"
+        ></Checkbox>
+      )}
+      <OptionContentComponent {...props} />
     </div>
   );
 });

package/src/components/select/components/SelectTokenComponent.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { SelectTokenProps } from '../typings';
+
+const SelectTokenComponent: FC<SelectTokenProps> = React.memo(({ token, onRemove, index }) => {
+  return (
+    <div className="o-select-token">
+      <div className="o-select-token-text" key="o-select-token-text">
+        {token.text}
+      </div>
+      <div
+        className="o-select-token-remove"
+        key="o-select-token-remove"
+        onClick={() => {
+          onRemove(token, index);
+        }}
+      >
+        &#10006;
+      </div>
+    </div>
+  );
+});
+
+SelectTokenComponent.displayName = 'SelectTokenComponent';
+
+export default SelectTokenComponent;

package/src/components/select/components/SelectTokensComponent.tsx

@@ -0,0 +1,50 @@
+import React, { FC, useRef } from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { SelectTokensProps } from '../typings';
+import SelectTokenComponent from './SelectTokenComponent';
+
+const SelectTokensComponent: FC<SelectTokensProps> = React.memo(({ tokens, onRemove }) => {
+  const widthRef = useRef<number>();
+
+  const onExiting = (node: HTMLElement) => {
+    node.style.width = '0';
+    node.style.opacity = '0';
+  };
+
+  const onEntering = (node: HTMLElement) => {
+    widthRef.current = node.getBoundingClientRect().width;
+    node.style.width = '0px';
+    node.style.opacity = '0';
+    node.style.transition = 'all 150ms';
+    setTimeout(() => {
+      node.style.width = `${widthRef.current}px`;
+      node.style.opacity = '1';
+    }, 0);
+  };
+
+  if (tokens !== undefined) {
+    return (
+      <TransitionGroup component={null}>
+        {tokens.map((token, index) => (
+          <CSSTransition
+            timeout={150}
+            classNames="o-select-token-animation"
+            mountOnEnter={true}
+            appear={true}
+            unmountOnExit={true}
+            key={`o-select-token-${token.id}`}
+            onEntering={onEntering}
+            onExiting={onExiting}
+          >
+            <SelectTokenComponent token={token} onRemove={onRemove} index={index} />
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
+    );
+  }
+  return null;
+});
+
+SelectTokensComponent.displayName = 'SelectTokensComponent';
+
+export default SelectTokensComponent;

package/src/components/select/hooks/useSelectConfig.ts

@@ -0,0 +1,7 @@
+import React, { useContext } from 'react';
+import { SelectConfig, SelectItem } from '../typings';
+
+export const SelectConfigContext = React.createContext<SelectConfig<any, any>>(null!);
+export const useSelectConfig = <T = any, I extends SelectItem<T> = SelectItem<T>>(): SelectConfig<T, I> => {
+  return useContext(SelectConfigContext);
+};

package/src/components/select/hooks/useSelectController.ts

@@ -0,0 +1,21 @@
+import { CollectionProxy, useCollectionInitialState, useCollectionProxy } from 'onekijs-framework';
+import { UseListOptions } from '../../list/typings';
+import SelectService from '../SelectService';
+import { SelectItem, SelectState } from '../typings';
+
+const useSelectController = <T = any>(
+  dataSource: T[] | string,
+  options: UseListOptions<T, SelectItem<T>> = {},
+): CollectionProxy<
+  T,
+  SelectItem<T>,
+  SelectState<T, SelectItem<T>>,
+  SelectService<T, SelectItem<T>, SelectState<T, SelectItem<T>>>
+> => {
+  const initialState = useCollectionInitialState(dataSource, Object.assign({ initialLimit: 20 }, options));
+  const collection = useCollectionProxy(dataSource, SelectService, initialState);
+
+  return collection;
+};
+
+export default useSelectController;

package/src/components/select/index.tsx

@@ -7,92 +7,3 @@ const Select = styled(SelectComponent)`
 `;
 
 export default Select;
-
-/*
-<!-- component -->
-<style>
-    .top-100 {top: 100%}
-    .bottom-100 {bottom: 100%}
-    .max-h-select {
-        max-height: 300px;
-    }
-</style>
-<div class="flex flex-col items-center">
-    <div class="w-full md:w-1/2 flex flex-col items-center h-64">
-        <div class="w-full px-4">
-            <div class="flex flex-col items-center relative">
-                <div class="w-full">
-                    <div class="my-2 p-1 bg-white flex border border-gray-200 rounded">
-                        <div class="flex flex-auto flex-wrap"></div>
-                        <input placeholder="Search by position" class="p-1 px-2 appearance-none outline-none w-full text-gray-800">
-                        <div class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200">
-                            <button class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up w-4 h-4">
-                                    <polyline points="18 15 12 9 6 15"></polyline>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj">
-                    <div class="flex flex-col w-full">
-                        <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/men/62.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1  ">Jack jhon
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">CEO &amp; managin director</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/women/62.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1  ">Liza Blue
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">COO &amp; co-founder</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/men/65.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1 w-1/2 ">Brian White
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">CTO &amp; technical manager</div>
-                                    </div>
-                                    <div class="w-1/2 flex">
-                                        <div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
-                                            <div class="text-xs font-normal leading-none max-w-full flex-initial">Hiring!</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer w-full border-gray-100 rounded-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/men/85.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1  ">Eric Dripper
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">CMO &amp; marketing manager</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-*/