Merge pull request #307 from ebs-integrator/development

Development
ebs-integrator · Aug 12, 2021 · 1fb1989 · 1fb1989
2 parents de390c6 + 886d864
commit 1fb1989
Show file tree

Hide file tree

Showing 16 changed files with 76 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ebs-design",
-  "version": "0.0.1-beta.95",
+  "version": "0.0.1-beta.96",
   "description": "EBS Design System React UI elements.",
   "author": "EBS Integrator <[email protected]> (https://ebs-integrator.com/)",
   "maintainers": [

diff --git a/src/components/Palette.stories.mdx b/src/components/Palette.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import { exportStory } from '../libs';
 
 <Meta title={exportStory('Variables/palette.scss', 'introduction')} />

diff --git a/src/components/ReadMe.stories.mdx b/src/components/ReadMe.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import { exportStory } from '../libs';
 
 <Meta title={exportStory('Read Me', 'introduction')} />

diff --git a/src/components/SizeSwitcher.tsx b/src/components/SizeSwitcher.tsx
@@ -15,8 +15,8 @@ const SizeSwitcher: React.FC<Props> = ({ sizes = ['small', 'medium', 'large'], d
   return (
     <>
       <ButtonGroup className="mb-30">
-        {sizes.map((value) => (
-          <Button size="small" type={size === value ? 'primary' : 'fill'} onClick={() => setSize(value)}>
+        {sizes.map((value, i) => (
+          <Button key={i} size="small" type={size === value ? 'primary' : 'fill'} onClick={() => setSize(value)}>
             {capitalize(value)}
           </Button>
         ))}

diff --git a/src/components/Variables.stories.mdx b/src/components/Variables.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import { exportStory } from '../libs';
 
 <Meta title={exportStory('Variables/variables.scss', 'introduction')} />

diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
@@ -56,7 +56,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const hasValue = React.useMemo(() => value != undefined && value.toString().length, [value]);
 
     const onClickHandler = ({ target }: React.ChangeEvent<HTMLInputElement>): void => {
-      if (onChange !== undefined) {
+      if (onChange) {
         onChange(
           props.min !== undefined && parseFloat(props.min as string) >= parseFloat(target.value)
             ? props.min
@@ -68,13 +68,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     };
 
     const onClickPrefixHandler = (): void => {
-      if (!loading && props.onClickPrefix !== undefined) {
+      if (!loading && props.onClickPrefix) {
         props.onClickPrefix();
       }
     };
 
     const onClickSuffixHandler = (): void => {
-      if (!loading && props.onClickSuffix !== undefined) {
+      if (!loading && props.onClickSuffix) {
         props.onClickSuffix();
       }
     };

diff --git a/src/components/atoms/ReadMe.stories.mdx b/src/components/atoms/ReadMe.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import { exportStory } from '../../libs';
 
 <Meta title={exportStory('Read Me', 'atoms')} />

diff --git a/src/components/molecules/ReadMe.stories.mdx b/src/components/molecules/ReadMe.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import { exportStory } from '../../libs';
 
 <Meta title={exportStory('Read Me', 'molecules')} />

diff --git a/src/components/molecules/Select/Context.tsx b/src/components/molecules/Select/Context.tsx
@@ -10,7 +10,7 @@ interface StateProps {
   newOption?: string;
   search: string | boolean;
   style?: React.CSSProperties;
-  maxHeight: number;
+  offsetBottom?: number;
   isOpen: boolean;
   isLoaded: boolean;
 }
@@ -23,7 +23,6 @@ export interface ContextProps extends StateProps {
 const Context = React.createContext<ContextProps>({
   options: [],
   cache: [],
-  maxHeight: 350,
   search: false,
   isOpen: false,
   isLoaded: false,
@@ -35,7 +34,6 @@ const Provider: React.FC = ({ children }) => {
   const [state, setState] = useSetState<StateProps>({
     options: [],
     cache: [],
-    maxHeight: 350,
     search: false,
     isOpen: false,
     isLoaded: false,

diff --git a/src/components/molecules/Select/Hook.tsx b/src/components/molecules/Select/Hook.tsx
@@ -23,7 +23,7 @@ interface Props extends ContextProps {
   onKeyDownNewOption: (e: React.KeyboardEvent) => void;
 }
 
-export default ({ loading, refs, children, ...params }): Props => {
+export default ({ loading, ref, children, ...params }): Props => {
   const {
     mode = 'single',
     optionsMode = 'dropdown',
@@ -84,28 +84,29 @@ export default ({ loading, refs, children, ...params }): Props => {
         onClickAddNew();
       }
     },
-    refs.input,
+    ref,
   );
 
-  useClickAway(refs.input, (e) => {
+  useClickAway(ref, (e) => {
     if (isOpen && !isBox && optionsRef.current && !optionsRef.current.contains(e.target as Node)) {
       setState({ isOpen: false });
     }
   });
 
   React.useEffect(() => {
-    if (!isBox && isOpen && refs.input.current) {
-      const rect = refs.input.current.getBoundingClientRect();
+    if (!isBox && isOpen && ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      const offsetBottom = rect.bottom + rect.height;
 
       const style: React.CSSProperties = {
         width: `${rect.width}px`,
       };
 
       if (!isEqual(style, optionsStyle)) {
-        setState({ style });
+        setState({ style, offsetBottom });
       }
     }
-  }, [isOpen, refs, optionsStyle]);
+  }, [isOpen, ref, optionsStyle]);
 
   React.useEffect(() => {
     if (searchEl?.props?.value !== undefined && search !== searchEl.props.value) {

diff --git a/src/components/molecules/Select/Select.stories.tsx b/src/components/molecules/Select/Select.stories.tsx
@@ -14,7 +14,7 @@ export default {
   component: Select,
 };
 
-const limit = 10;
+const limit = 20;
 
 export const Regular = (): React.ReactNode => {
   const [form] = useForm();
@@ -57,7 +57,7 @@ export const Regular = (): React.ReactNode => {
   return (
     <SizeSwitcher>
       {(size) => (
-        <Space direction="vertical" style={{ minWidth: 300 }}>
+        <Space direction="vertical">
           <Form
             form={form}
             initialValues={{
@@ -148,7 +148,7 @@ export const OptionsBox = (): React.ReactNode => {
   return (
     <SizeSwitcher>
       {(size) => (
-        <Space direction="vertical" style={{ minWidth: 300 }}>
+        <Space direction="vertical">
           <Form
             form={form}
             initialValues={{
@@ -235,7 +235,7 @@ export const OptionsMultiple = (): React.ReactNode => {
   return (
     <SizeSwitcher>
       {(size) => (
-        <Space direction="vertical" style={{ minWidth: 300 }}>
+        <Space direction="vertical">
           <Form
             form={form}
             initialValues={{
@@ -315,7 +315,7 @@ export const InfiniteScrollPagination = (): React.ReactNode => {
   return (
     <SizeSwitcher>
       {(size) => (
-        <Space direction="vertical" style={{ minWidth: 300 }}>
+        <Space direction="vertical">
           <Form
             form={form}
             initialValues={{
@@ -382,7 +382,7 @@ export const TagsMode = (): React.ReactNode => {
   return (
     <SizeSwitcher>
       {(size) => (
-        <Space direction="vertical" style={{ minWidth: 300 }}>
+        <Space direction="vertical">
           <Form
             form={form}
             initialValues={{
@@ -455,7 +455,7 @@ export const InlineValueMode = (): React.ReactNode => {
   return (
     <SizeSwitcher>
       {(size) => (
-        <Space direction="vertical" style={{ minWidth: 300 }}>
+        <Space direction="vertical">
           <Form
             form={form}
             initialValues={{

diff --git a/src/components/molecules/Select/components/Component.tsx b/src/components/molecules/Select/components/Component.tsx
@@ -40,7 +40,7 @@ const Component: React.FC<ComponentProps> = ({
   children,
   ...props
 }) => {
-  const inputRef = React.useRef<HTMLDivElement | null>(null);
+  const ref = React.useRef<HTMLDivElement | null>(null);
   const valueRef = React.useRef<HTMLDivElement | null>(null);
 
   const {
@@ -58,10 +58,7 @@ const Component: React.FC<ComponentProps> = ({
   } = useSelect({
     mode,
     loading,
-    refs: {
-      root: props.rootRef,
-      input: inputRef,
-    },
+    ref,
     children,
     ...props,
   });
@@ -74,7 +71,7 @@ const Component: React.FC<ComponentProps> = ({
 
   return (
     <div
-      ref={inputRef}
+      ref={ref}
       className={cn(`ebs-select__wrapper`, `ebs-select--${mode}`, `ebs-select--${valueMode}`, props.className, {
         active: hasValue,
         disabled: props.disabled,

diff --git a/src/components/molecules/Select/components/Options/Options.tsx b/src/components/molecules/Select/components/Options/Options.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import cn from 'classnames';
 import { useEventListener } from 'hooks';
-import { Animated, Space, Label } from 'components/atoms';
+import { Space, Label } from 'components/atoms';
+import { Loader } from 'components/molecules';
 import { Item, ItemProps } from './Item';
 
+import { Context } from '../../Context';
 import { SelectMode, OptionValue, Option } from '../../interfaces';
 import { ScrollMode } from '../Pagination';
-import { Loader } from 'components/molecules/Loader/Loader';
 
 export interface OptionsComposition {
   Item: React.FC<ItemProps>;
@@ -42,7 +43,9 @@ const Options: React.FC<OptionsProps> & OptionsComposition = ({
   onClickAddNew,
 }) => {
   const ref = React.useRef<HTMLDivElement | null>(null);
+  const { offsetBottom } = React.useContext(Context);
   const [activeItem, setActiveItem] = React.useState(0);
+  const [maxHeight, setMaxHeight] = React.useState(0);
 
   const onScroll = (e): void => {
     const scrollTop = Math.floor(e.target.scrollTop);
@@ -53,22 +56,32 @@ const Options: React.FC<OptionsProps> & OptionsComposition = ({
   };
 
   React.useEffect(() => {
-    if (ref?.current && !scrollMode && options?.length) {
+    const rect = ref.current?.getBoundingClientRect();
+
+    if (rect?.height && offsetBottom) {
+      const height = window.innerHeight - offsetBottom;
+
+      setMaxHeight(height <= rect.height ? height : rect.height);
+    }
+  }, [ref.current, offsetBottom]);
+
+  React.useEffect(() => {
+    if (ref.current && !scrollMode && options?.length) {
       ref.current.scrollTop = 0;
     }
-  }, [ref, options, scrollMode]);
+  }, [ref.current, options, scrollMode]);
 
   React.useEffect(() => {
-    if (ref?.current && scrollMode) {
+    if (ref.current && scrollMode) {
       ref.current.addEventListener('scroll', onScroll);
     }
 
     return () => {
-      if (ref?.current && scrollMode) {
+      if (ref.current && scrollMode) {
         ref.current.removeEventListener('scroll', onScroll);
       }
     };
-  }, [ref, onScroll, scrollMode]);
+  }, [ref.current, onScroll, scrollMode]);
 
   useEventListener(
     'keydown',
@@ -117,7 +130,7 @@ const Options: React.FC<OptionsProps> & OptionsComposition = ({
       className={cn('ebs-select__options-items', {
         'ebs-select__options--multiple': ['multiple', 'tags'].includes(mode),
       })}
-      style={scrollMode === 'scroll' ? { maxHeight: 300 } : undefined}
+      style={maxHeight ? { maxHeight } : undefined}
     >
       {newOption && onClickAddNew && (
         <Item
@@ -133,32 +146,30 @@ const Options: React.FC<OptionsProps> & OptionsComposition = ({
         loading={scrollMode !== 'scroll' ? loading || false : false}
         height={!ref.current || ref.current?.offsetHeight < 300 ? 300 : ref.current.offsetHeight}
       >
-        <Animated loading={scrollMode !== 'scroll' && loading} duration={100}>
-          {options.length
-            ? options.map((option, key) => (
-                <Item
-                  key={key}
-                  active={
-                    ['multiple', 'tags'].includes(mode) && Array.isArray(value)
-                      ? value.includes(option.value)
-                      : value === option.value
-                  }
-                  mode={mode}
-                  text={option.text}
-                  selected={activeItem === key + 1}
-                  onClick={onChangeHandler}
-                  {...option}
-                />
-              ))
-            : !loading && (
-                <Space size="large" justify="center" className="ebs-select__options--empty">
-                  {emptyLabel}
-                </Space>
-              )}
-        </Animated>
+        {options.length
+          ? options.map((option, key) => (
+              <Item
+                key={key}
+                active={
+                  ['multiple', 'tags'].includes(mode) && Array.isArray(value)
+                    ? value.includes(option.value)
+                    : value === option.value
+                }
+                mode={mode}
+                text={option.text}
+                selected={activeItem === key + 1}
+                onClick={onChangeHandler}
+                {...option}
+              />
+            ))
+          : !loading && (
+              <Space size="large" justify="center" className="ebs-select__options--empty">
+                {emptyLabel}
+              </Space>
+            )}
       </Loader>
 
-      {scrollMode === 'scroll' && loading ? (
+      {loading ? (
         <Space justify="center" className="mt-10">
           <Loader.Inline />
         </Space>

diff --git a/src/components/molecules/Select/components/Options/index.ts b/src/components/molecules/Select/components/Options/index.ts
@@ -1 +1 @@
-export * from './Options';
+export { Options, OptionsComposition, OptionsProps } from './Options';
diff --git a/src/components/organisms/ReadMe.stories.mdx b/src/components/organisms/ReadMe.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import { exportStory } from '../../libs';
 
 <Meta title={exportStory('Read Me', 'organisms')} />

diff --git a/src/components/templates/ReadMe.stories.mdx b/src/components/templates/ReadMe.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import { exportStory } from '../../libs';
 
 <Meta title={exportStory('Read Me', 'templates')} />
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './Options';
		export { Options, OptionsComposition, OptionsProps } from './Options';