onekijs-ui 0.9.2 → 0.15.2

package/src/components/dropdown/components/DropdownComponent.tsx

@@ -1,35 +1,213 @@
-import React, { FC, useState } from 'react';
-import { DropdownProps } from '../typings';
-import { sameWidthPopperModifier } from '../../../utils/popper';
+import { FCC, useIsomorphicLayoutEffect, useThrottle } from 'onekijs-framework';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
+import { maxWidthPopperModifier, minWidthPopperModifier, sameWidthPopperModifier } from '../../../utils/popper';
+import { addClassname } from '../../../utils/style';
+import { DropdownComponentProps } from '../typings';
 
-const DropdownComponent: FC<DropdownProps> = ({ className, refElement, open, children }) => {
+const DropdownComponent: FCC<DropdownComponentProps> = ({
+  animationTimeout = 0,
+  attachToBody = false,
+  className,
+  refElement,
+  open,
+  children,
+  skidding = 0,
+  distance = 0,
+  onUpdate,
+  onDropDone,
+  onDropStart,
+  onCollapseDone,
+  onCollapseStart,
+  onDropping,
+  onCollapsing,
+  placement = 'auto',
+  widthModifier = 'same',
+  zIndex = 1,
+}) => {
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-  const { styles, attributes } = usePopper(refElement, popperElement, {
-    modifiers: [sameWidthPopperModifier],
+  const popperWidthModifier =
+    widthModifier === 'same'
+      ? sameWidthPopperModifier
+      : widthModifier === 'min'
+      ? minWidthPopperModifier
+      : maxWidthPopperModifier;
+  const { forceUpdate, styles, attributes } = usePopper(refElement, popperElement, {
+    placement,
+    modifiers: [
+      popperWidthModifier,
+      {
+        name: 'offset',
+        options: {
+          offset: [skidding, distance],
+        },
+      },
+      {
+        name: 'flip',
+        enabled: placement === 'auto',
+      },
+      {
+        name: 'eventListeners',
+        options: {
+          scroll: true,
+          resize: true,
+        },
+      },
+    ],
   });
 
-  return (
-    <CSSTransition
-      in={open}
-      timeout={500}
-      classNames="o-dropdown"
-      mountOnEnter={true}
-      appear={true}
-      unmountOnExit={true}
+  const triggerZIndexRef = useRef<string>();
+
+  const update = useCallback(() => {
+    forceUpdate && forceUpdate();
+    onUpdate && onUpdate();
+  }, [forceUpdate, onUpdate]);
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const throttleUpdate = useThrottle(update, 20);
+
+  const resizeObserver = useMemo(() => {
+    return new ResizeObserver(() => {
+      throttleUpdate();
+    });
+  }, [throttleUpdate]);
+
+  useIsomorphicLayoutEffect(() => {
+    const el = refElement;
+    if (el) {
+      resizeObserver.observe(el);
+    }
+    return () => {
+      if (el) {
+        resizeObserver.unobserve(el);
+      }
+    };
+  }, [refElement, forceUpdate]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (open) {
+      setTimeout(update, 0);
+    }
+  }, [open, update]);
+
+  const classNames = addClassname(`o-dropdown-${open ? 'open' : 'close'}`, className);
+
+  const onEnter = useCallback(
+    (node: HTMLElement, isAppearing: boolean) => {
+      if (refElement !== null && refElement !== undefined) {
+        triggerZIndexRef.current = refElement.style.zIndex;
+        refElement.style.zIndex = `${zIndex + 1}`;
+      }
+      if (onDropStart) {
+        onDropStart(node, isAppearing);
+      }
+    },
+    [onDropStart, refElement, zIndex],
+  );
+
+  const onEntered = useCallback(
+    (node: HTMLElement, isAppearing: boolean) => {
+      node.style.transform = '';
+      if (refElement !== null && refElement !== undefined) {
+        refElement.style.zIndex = triggerZIndexRef.current || '';
+      }
+      if (onDropDone) {
+        onDropDone(node, isAppearing);
+      }
+    },
+    [onDropDone, refElement],
+  );
+
+  const onEntering = useCallback(
+    (node: HTMLElement, isAppearing: boolean) => {
+      node.style.transform = 'translateY(-40px)';
+      node.style.opacity = '0';
+      node.style.transition = `transform ${animationTimeout}ms ease-out, opacity ${animationTimeout}ms ease-out`;
+      setTimeout(() => {
+        node.style.opacity = '1';
+        node.style.transform = 'translateY(0px)';
+      }, 0);
+      if (onDropping) {
+        onDropping(node, isAppearing);
+      }
+    },
+    [onDropping, animationTimeout],
+  );
+
+  const onExit = useCallback(
+    (node: HTMLElement) => {
+      if (refElement !== null && refElement !== undefined) {
+        refElement.style.zIndex = `${zIndex + 1}`;
+      }
+      if (onCollapseStart) {
+        onCollapseStart(node);
+      }
+    },
+    [onCollapseStart, refElement, zIndex],
+  );
+
+  const onExiting = useCallback(
+    (node: HTMLElement) => {
+      node.style.opacity = '1';
+      node.style.transform = 'translateY(0px)';
+      node.style.transition = `transform ${animationTimeout}ms ease-in, opacity ${animationTimeout}ms ease-in`;
+      setTimeout(() => {
+        node.style.opacity = '0';
+        node.style.transform = 'translateY(-40px)';
+      }, 0);
+      if (onCollapsing) {
+        onCollapsing(node);
+      }
+    },
+    [onCollapsing, animationTimeout],
+  );
+
+  const onExited = useCallback(
+    (node: HTMLElement) => {
+      if (refElement !== null && refElement !== undefined) {
+        refElement.style.zIndex = triggerZIndexRef.current || '';
+      }
+      if (onCollapseDone) {
+        onCollapseDone(node);
+      }
+    },
+    [onCollapseDone, refElement],
+  );
+
+  const element = (
+    <div
+      style={styles.popper}
+      {...attributes.popper}
+      ref={setPopperElement}
+      key="dropdown-container"
+      className={addClassname('o-dropdown-container', classNames)}
     >
-      <div
-        style={styles.popper}
-        {...attributes.popper}
-        ref={setPopperElement}
-        key="dropdown-container"
-        className={className}
+      <CSSTransition
+        in={open}
+        classNames="o-dropdown"
+        timeout={animationTimeout}
+        mountOnEnter={true}
+        appear={false}
+        unmountOnExit={true}
+        onEnter={onEnter}
+        onEntering={onEntering}
+        onEntered={onEntered}
+        onExit={onExit}
+        onExited={onExited}
+        onExiting={onExiting}
       >
-        {children}
-      </div>
-    </CSSTransition>
+        <div className="o-dropdown">{children}</div>
+      </CSSTransition>
+    </div>
   );
+
+  if (attachToBody) {
+    return <> {ReactDOM.createPortal(element, document.body)}</>;
+  } else {
+    return <>{element}</>;
+  }
 };
 
 export default DropdownComponent;

package/src/components/dropdown/hooks/useDropdown.tsx

@@ -0,0 +1,21 @@
+import { FCC, useLazyRef } from 'onekijs-framework';
+import React, { useRef, useState } from 'react';
+import Dropdown from '..';
+import { DropdownProps } from '../typings';
+
+const useDropdown = (): [FCC<DropdownProps>, React.Dispatch<React.SetStateAction<HTMLElement | null>>] => {
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const elementRef = useRef<HTMLElement | null>();
+  elementRef.current = containerRef;
+  const DropdownRef = useLazyRef<FCC<DropdownProps>>(
+    (): FCC<DropdownProps> => {
+      const Component: FCC<DropdownProps> = (props) => {
+        return <Dropdown {...props} refElement={elementRef.current} />;
+      };
+      return Component;
+    },
+  );
+  return [DropdownRef.current, setContainerRef];
+};
+
+export default useDropdown;

package/src/components/dropdown/style.ts

@@ -1,40 +1,22 @@
 import { css } from 'styled-components';
+import { opacity } from '../../styles/effects';
+import { zIndex as cssZIndex } from '../../styles/position';
 import { ComponentStyle } from '../../styles/typings';
 import { preflight } from '../../utils/style';
 import { DropdownProps } from './typings';
-import { width, height } from '../../styles/size';
-import { borderRadius, borderColor, boxShadow } from '../../styles/border';
-import { overflowY } from '../../styles/overflow';
-import { backgroundColor } from '../../styles/background';
-import { transitionDuration, transitionProperty, transitionTimingFunction } from '../../styles/transition';
-import { opacity } from '../../styles/effects';
 
-const dropdownStyle: ComponentStyle<DropdownProps> = () => {
+const dropdownStyle: ComponentStyle<DropdownProps> = ({ zIndex = 1 }) => {
   return css`
     ${preflight()}
-    ${width(64)}
-    ${borderRadius('default')}
-    ${borderColor('gray-200')}
-    ${boxShadow('default')}
-    ${overflowY('auto')}
-    ${height('200px')}
-    ${backgroundColor('white')}
-    &.o-dropdown-enter {
+    ${cssZIndex(zIndex)}
+    .o-dropdown {
+      transform: translateY(-40px);
       ${opacity(0)}
+      &.o-dropdown-enter-done {
+        ${opacity(1)}
+        transform: translateY(0);
+      }
     }
-    &.o-dropdown-enter-active {
-      ${transitionDuration('.5s')}
-      ${transitionProperty('opacity')}
-      ${transitionTimingFunction('ease-in-out')}    
-      ${opacity(1)}
-    } 
-    &.o-dropdown-exit-active {
-      ${transitionDuration('.5s')}
-      ${transitionProperty('opacity')}
-      ${transitionTimingFunction('ease-in-out')}    
-      ${opacity(0)}
-    } 
-    
   `;
 };
 

package/src/components/dropdown/typings.ts

@@ -1,5 +1,27 @@
-export interface DropdownProps {
+import { Placement } from '@popperjs/core';
+import { AnyFunction } from 'onekijs-framework';
+
+export type DropdownProps = {
+  attachToBody?: boolean;
   className?: string;
-  refElement: HTMLElement | null;
-  open: boolean;
-}
+  open?: boolean;
+  skidding?: number;
+  distance?: number;
+  onUpdate?: AnyFunction<void>;
+  onDropStart?: (node: HTMLElement, isAppearing: boolean) => void;
+  onDropping?: (node: HTMLElement, isAppearing: boolean) => void;
+  onDropDone?: (node: HTMLElement, isAppearing: boolean) => void;
+  onCollapseStart?: (node: HTMLElement) => void;
+  onCollapseDone?: (node: HTMLElement) => void;
+  onCollapsing?: (node: HTMLElement) => void;
+  animationTimeout?: number;
+  placement?: Placement;
+  widthModifier?: DropdownWidthModifier;
+  zIndex?: number;
+};
+
+export type DropdownWidthModifier = 'same' | 'min' | 'max';
+
+export type DropdownComponentProps = DropdownProps & {
+  refElement?: HTMLElement | null;
+};

package/src/components/field/FieldDescription.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import FieldDescriptionComponent from './components/FieldDescriptionComponent';
+import { fieldDescriptionStyle } from './style';
+
+const FieldDescription = styled(FieldDescriptionComponent)`
+  ${fieldDescriptionStyle}
+`;
+
+export default FieldDescription;

package/src/components/field/FieldHelp.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import FieldHelpComponent from './components/FieldHelpComponent';
+import { fieldHelpStyle } from './style';
+
+const Help = styled(FieldHelpComponent)`
+  ${fieldHelpStyle}
+`;
+
+export default Help;

package/src/components/field/FieldLayout.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import FieldLayoutComponent from './components/FieldLayoutComponent';
+import { fieldStyle } from './style';
+
+const FieldLayout = styled(FieldLayoutComponent)`
+  ${fieldStyle}
+`;
+
+export default FieldLayout;

package/src/components/field/components/FieldDescriptionComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { addClassname } from '../../../utils/style';
+import { FieldDescriptionProps } from '../typings';
+
+const FieldDescriptionComponent: React.FC<FieldDescriptionProps> = React.memo(
+  ({ className, content, size = 'medium' }) => {
+    const classNames = addClassname(`o-field-description o-field-description-${size}`, className);
+    return <div className={classNames}>{content}</div>;
+  },
+);
+
+FieldDescriptionComponent.displayName = 'FieldDescriptionComponent';
+
+export default FieldDescriptionComponent;

package/src/components/field/components/FieldHelpComponent.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IoMdHelpCircleOutline } from 'react-icons/io';
+import { addClassname } from '../../../utils/style';
+import Tooltip from '../../tooltip';
+import { FieldHelpProps } from '../typings';
+
+const FieldHelpComponent: React.FC<FieldHelpProps> = React.memo(
+  ({ className, content, visible = true, size = 'medium' }) => {
+    const classNames = addClassname(`o-helper-icon o-helper-icon-${size}`, className);
+    return (
+      <div className={classNames}>
+        <Tooltip content={content} placement="top">
+          <IoMdHelpCircleOutline style={{ visibility: visible ? 'visible' : 'hidden' }} />
+        </Tooltip>
+      </div>
+    );
+  },
+);
+
+FieldHelpComponent.displayName = 'FieldHelpComponent';
+
+export default FieldHelpComponent;

package/src/components/field/components/FieldLayoutComponent.tsx

@@ -0,0 +1,174 @@
+import { FCC, FormLayout, useForm, useTrySetting } from 'onekijs-framework';
+import React from 'react';
+import { addClassname } from '../../../utils/style';
+import Col from '../../grid/Col';
+import Row from '../../grid/Row';
+import { GridSize } from '../../grid/typings';
+import Label from '../../label';
+import FieldDescription from '../FieldDescription';
+import { FieldLayoutProps } from '../typings';
+
+const FieldLayoutComponent: FCC<FieldLayoutProps> = React.memo(
+  ({
+    className,
+    description,
+    help,
+    id,
+    label,
+    LabelComponent = Label,
+    DescriptionComponent = FieldDescription,
+    labelWidth,
+    xsLabelWidth,
+    smLabelWidth,
+    mdLabelWidth,
+    lgLabelWidth,
+    xlLabelWidth,
+    layout,
+    required,
+    children,
+    size,
+    validation,
+    visible,
+  }) => {
+    const form = useForm();
+    const settingLayout = useTrySetting('form.layout');
+    const settingWidth = useTrySetting('form.labelWidth');
+    const settingXsLabelWidth = useTrySetting('form.xsLabelWidth');
+    const settingSmLabelWidth = useTrySetting('form.smLabelWidth');
+    const settingMdLabelWidth = useTrySetting('form.mdLabelWidth');
+    const settingLgLabelWidth = useTrySetting('form.lgLabelWidth');
+    const settingXlLabelWidth = useTrySetting('form.xlLabelWidth');
+    const settingFieldSize = useTrySetting('form.fieldSize');
+
+    if (visible === false) return null;
+
+    const fieldLayout: FormLayout = layout || form.config.layout || settingLayout || 'vertical';
+    const fieldLabelWidth: GridSize = labelWidth || form.config.labelWidth || settingWidth || 3;
+    const xsFieldLabelWidth: GridSize | undefined =
+      xsLabelWidth || form.config.xsLabelWidth || settingXsLabelWidth || undefined;
+    const smFieldLabelWidth: GridSize | undefined =
+      smLabelWidth || form.config.smLabelWidth || settingSmLabelWidth || undefined;
+    const mdFieldLabelWidth: GridSize | undefined =
+      mdLabelWidth || form.config.mdLabelWidth || settingMdLabelWidth || undefined;
+    const lgFieldLabelWidth: GridSize | undefined =
+      lgLabelWidth || form.config.lgLabelWidth || settingLgLabelWidth || undefined;
+    const xlFieldLabelWidth: GridSize | undefined =
+      xlLabelWidth || form.config.xlLabelWidth || settingXlLabelWidth || undefined;
+    const classNames = addClassname(`o-form-field o-form-field-${fieldLayout}`, className);
+    const fieldSize = size || form.config.fieldSize || settingFieldSize;
+    let status: string | undefined = undefined;
+    let message: string | undefined = undefined;
+    if (validation && validation.message) {
+      status = validation.status.toLowerCase();
+      message = validation.message;
+    }
+
+    if (fieldLayout === 'vertical') {
+      return (
+        <Row className={classNames} marginBottom="15px">
+          {label && (
+            <Col size={12} className="o-form-field-label">
+              <LabelComponent
+                description={description}
+                htmlFor={id}
+                text={label}
+                layout={fieldLayout}
+                required={required}
+                size={fieldSize}
+                help={help}
+              />
+            </Col>
+          )}
+          <Col size={12} className="o-form-field-content">
+            {children}
+          </Col>
+          {(description || message) && (
+            <Col size={12} className="o-form-field-description">
+              <DescriptionComponent
+                layout={fieldLayout}
+                content={message ? message : description || ''}
+                className={status !== undefined ? `o-field-description-${status}` : undefined}
+              />
+            </Col>
+          )}
+        </Row>
+      );
+    } else if (fieldLayout === 'horizontal') {
+      return (
+        <Row className={classNames} marginBottom="15px">
+          <Col
+            size={fieldLabelWidth}
+            xs={xsFieldLabelWidth}
+            sm={smFieldLabelWidth}
+            md={mdFieldLabelWidth}
+            lg={lgFieldLabelWidth}
+            xl={xlFieldLabelWidth}
+            className="o-form-field-label"
+          >
+            {label && (
+              <LabelComponent
+                description={description}
+                htmlFor={id}
+                help={help}
+                text={label}
+                layout={fieldLayout}
+                required={required}
+                size={fieldSize}
+              />
+            )}
+          </Col>
+          <Col
+            size={(12 - fieldLabelWidth) as GridSize}
+            xs={xsFieldLabelWidth !== undefined ? ((12 - xsFieldLabelWidth) as GridSize) : undefined}
+            sm={smFieldLabelWidth !== undefined ? ((12 - smFieldLabelWidth) as GridSize) : undefined}
+            md={mdFieldLabelWidth !== undefined ? ((12 - mdFieldLabelWidth) as GridSize) : undefined}
+            lg={lgFieldLabelWidth !== undefined ? ((12 - lgFieldLabelWidth) as GridSize) : undefined}
+            xl={xlFieldLabelWidth !== undefined ? ((12 - xlFieldLabelWidth) as GridSize) : undefined}
+            className="o-form-field-content"
+          >
+            {children}
+          </Col>
+          <Col
+            size={fieldLabelWidth}
+            xs={xsFieldLabelWidth}
+            sm={smFieldLabelWidth}
+            md={mdFieldLabelWidth}
+            lg={lgFieldLabelWidth}
+            xl={xlFieldLabelWidth}
+          />
+          <Col
+            size={(12 - fieldLabelWidth) as GridSize}
+            xs={xsFieldLabelWidth !== undefined ? ((12 - xsFieldLabelWidth) as GridSize) : undefined}
+            sm={smFieldLabelWidth !== undefined ? ((12 - smFieldLabelWidth) as GridSize) : undefined}
+            md={mdFieldLabelWidth !== undefined ? ((12 - mdFieldLabelWidth) as GridSize) : undefined}
+            lg={lgFieldLabelWidth !== undefined ? ((12 - lgFieldLabelWidth) as GridSize) : undefined}
+            xl={xlFieldLabelWidth !== undefined ? ((12 - xlFieldLabelWidth) as GridSize) : undefined}
+            className="o-form-field-description"
+          >
+            <DescriptionComponent
+              layout={fieldLayout}
+              content={message ? message : description || ''}
+              className={status !== undefined ? `o-field-description-${status}` : undefined}
+            />
+          </Col>
+        </Row>
+      );
+    } else if (fieldLayout === 'table') {
+      return (
+        <>
+          {children}
+          <DescriptionComponent
+            layout={fieldLayout}
+            content={message ? message : description || ''}
+            className={status !== undefined ? `o-field-description-${status}` : undefined}
+          />
+        </>
+      );
+    }
+    return null;
+  },
+);
+
+FieldLayoutComponent.displayName = 'FieldLayoutComponent';
+
+export default FieldLayoutComponent;

package/src/components/field/hooks/useFieldLayout.ts

@@ -0,0 +1,36 @@
+import { AnonymousObject, useField, useForm, useFormMetadata, useTrySetting, useValidation } from 'onekijs-framework';
+import { useId } from 'react';
+import { FieldComponentProps, FieldLayoutProps, UseFieldLayoutProps } from '../typings';
+import { extractFieldLayoutProps } from '../util';
+
+const useFieldLayout = <T extends AnonymousObject>(
+  props: UseFieldLayoutProps<T>,
+): [FieldLayoutProps, FieldComponentProps<T>] => {
+  const { validators, fieldLayoutProps, name, fieldOptions, fieldProps } = extractFieldLayoutProps(props);
+  const { FieldComponent, ...fieldComponentProps } = fieldProps;
+  const { value, onFocus, onBlur, onChange } = useField(name, validators, fieldOptions);
+  const validation = useValidation(name);
+  const metadata = useFormMetadata(name);
+  const form = useForm();
+  const settingFieldSize = useTrySetting('form.fieldSize');
+  const id = useId();
+
+  return [
+    Object.assign({ id }, fieldLayoutProps, {
+      validation: validation,
+      visible: metadata.visible,
+      disabled: metadata.disabled,
+    }),
+    Object.assign({ id }, fieldComponentProps, {
+      value,
+      onFocus,
+      onBlur,
+      onChange,
+      status: validation.status,
+      size: fieldLayoutProps.size || form.config.fieldSize || settingFieldSize,
+      disabled: metadata.disabled,
+    } as unknown as FieldComponentProps<T>),
+  ];
+};
+
+export default useFieldLayout;

package/src/components/field/style.ts

@@ -0,0 +1,59 @@
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { flexDirection } from '../../styles/flex';
+import { cursor } from '../../styles/interactivity';
+import { height, minHeight } from '../../styles/size';
+import { marginLeft, marginRight } from '../../styles/spacing';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize } from '../../styles/typography';
+import { FieldDescriptionProps, FieldHelpProps, FieldLayoutProps } from './typings';
+
+export const fieldStyle: ComponentStyle<FieldLayoutProps> = () => {
+  return css`
+    ${display('flex')}
+    &.o-form-field-vertical {
+      ${flexDirection('column')}
+    }
+    &.o-form-field-horizontal {
+      ${flexDirection('row')}
+      .o-form-field-content {
+        ${display('flex')}
+      }
+    }
+  `;
+};
+
+export const fieldHelpStyle: ComponentStyle<FieldHelpProps> = ({ visible = true, theme, layout }) => {
+  const t = theme.fieldLayout;
+  return css`
+    ${fontSize('2xl')}
+    ${color(t.helperColor)}
+      ${marginLeft(layout === 'horizontal' ? 0 : t.helperMarginLeft)}
+      ${marginRight(layout === 'horizontal' ? t.helperMarginRight : 0)}
+      ${height('100%')}
+      ${display('flex')}
+      ${alignItems('center')}
+      .o-tooltip {
+      ${cursor(visible ? 'pointer' : 'default')}
+    }
+  `;
+};
+
+export const fieldDescriptionStyle: ComponentStyle<FieldDescriptionProps> = ({ theme, layout }) => {
+  const t = theme.fieldLayout;
+  return css`
+    ${fontSize(t.descriptionFontSize)}
+    ${color(t.descriptionColor)}
+    ${minHeight(layout === 'table' ? 0 : '14px')}
+    &.o-field-description-error {
+      ${color('danger')}
+    }
+    &.o-field-description-warning {
+      ${color('warning')}
+    }
+    &.o-field-description-success {
+      ${color('success')}
+    }
+  `;
+};