types#GenericObject TypeScript Examples

combineProps = (...args): GenericObject => Object.assign({}, ...args)

Layout: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children }) => {
  const childs = React.useMemo(() => React.Children.toArray(children) as GenericObject[], [children]);
  const FoolterElement = React.useMemo(() => childs.find((child) => child.type === Footer), [childs]);
  const isFixedFooter = React.useMemo(() => FoolterElement?.props?.fixed, [FoolterElement]);

  return (
    <LayoutProvider>
      <Container className={className}>
        {childs.map((child, i) => {
          const isFooter = child.type === Footer;

          return child.type === Content ? (
            <div
              key={i}
              className={cn('ebs-layout__container', { 'ebs-layout__container--has-fixed-footer': isFixedFooter })}
            >
              {child}
              {FoolterElement}
            </div>
          ) : (
            !isFooter && child
          );
        })}
      </Container>
    </LayoutProvider>
  );
}

Regular: React.FC<TableProps<GenericObject>> & { args: TableProps<GenericObject> } = ({
  children,
  ...props
}) => (
  <div className="storybook-rows">
    <div className="storybook-row">
      <div className="storybook-header">Table</div>

      <div className="storybook-row-item">
        <div className="storybook-label">Regular</div>

        <Table data={data} columns={columns} {...props} />
      </div>
    </div>
  </div>
)

WithHeadChildrens: React.FC<TableProps<GenericObject>> & { args: TableProps<GenericObject> } = ({
  children,
  ...props
}) => (
  <div className="storybook-rows">
    <div className="storybook-row">
      <div className="storybook-header">Table</div>

      <div className="storybook-row-item">
        <div className="storybook-label">With head childrens</div>

        <Table data={data2} columns={columns2} {...props} />
      </div>
    </div>
  </div>
)

uniqueArray = (arr1, arr2): GenericObject[] => {
  const newArray: GenericObject[] = [];

  arr1.concat(arr2).map((i: GenericObject) => {
    if (!newArray.some((item: GenericObject) => item.value === i.value)) {
      newArray.push(i);
    }

    return i;
  });

  return newArray;
}

FormField: React.FC<FormFieldProps> = ({
  label,
  labelOptions,
  hideLabel,
  name,
  extra,
  className,
  style,
  controlOptions,
  fieldRow,
  children,
  validationLabel = typeof label === 'string' ? label : '',
  messageVariables,
  ...props
}) => {
  const formCtx = React.useContext(FormContext);

  // Field's components props
  const labelProps = combineProps(formCtx.labelOptions, labelOptions);
  const controlProps = combineProps(formCtx.controlOptions, controlOptions);
  const fieldRowProps = combineProps(formCtx.fieldRow, fieldRow);
  const isRequired = checkRequired(props.rules);

  // Compose classes for label and control column
  const getColClassName = (col: GenericObject) => cn(col.className, {
    [`align-items--${col.align}`]: col.align,
    [`justify-content--${col.justify}`]: col.justify,
  })

  return (
    <div className={cn(`ebs-form__item ebs-form__field`, className)} style={style}>
      <Field
        name={name}
        messageVariables={{ label: validationLabel, ...messageVariables }}
        {...{
          ...props,
          rules: props.rules
            ? props.rules.map((rule: GenericObject) => {
                if (formCtx.draft && rule.required) {
                  rule.required = false;
                }

                return rule;
              })
            : [],
        }}
      >
        {(control, meta, form) => {
          if (!children) {
            return null;
          }

          const childNode =
            typeof children === 'function'
              ? children(control, meta, form)
              : React.cloneElement(children as React.ReactElement, {
                  ...control,
                  ...(meta.errors.length && { className: 'has-error' }),
                });

          return (
            <>
              <Row className="ebs-form__field__wrapper" {...fieldRowProps}>
                {label && !hideLabel && (
                  <Col {...labelProps.col}>
                    <div
                      className={cn('ebs-form__field__label', getColClassName(labelProps))}
                    >
                      {label} {isRequired && <span className="ebs-form__field__required">*</span>}
                    </div>
                  </Col>
                )}
                <Col {...controlProps.col} className={cn('ebs-form__field__control', getColClassName(controlProps))}>
                  {childNode}
                </Col>
              </Row>

              {/* FIXME: Find a better way to display extra and errors below the input control  */}
              <Row className="ebs-form__field__footer">
                <Col {...labelProps.col} />
                <Col {...controlProps.col}>
                  {extra && <FieldExtra>{extra}</FieldExtra>}
                  {meta.errors.length > 0 && (
                    <FieldError>
                      {meta.errors.map((error) =>
                        label ? error.replace(`'${meta.name.join('.')}'`, label as string) : error,
                      )}
                    </FieldError>
                  )}
                </Col>
              </Row>
            </>
          );
        }}
      </Field>
    </div>
  );
}

Item: React.FC<ItemProps> = ({
  className,
  labelClass,
  optionsClass,
  label,
  active,
  prefix,
  invert,
  text,
  disabled,
  onClick,
  children,
}) => {
  const { toggled } = useLayoutState();
  const [collapsed, setCollapsed] = React.useState(false);

  React.useEffect(() => {
    if (toggled) {
      setCollapsed(false);
    }
  }, [toggled]);

  React.useEffect(() => {
    setCollapsed(active || false);

    React.Children?.forEach(children as GenericObject[], (child) => {
      child?.props?.children?.forEach((element) => {
        if (element?.props?.children?.props?.active) {
          setCollapsed(true);
        }
      });
    });
  }, [children]);

  const onClickHandler = (): void => {
    if (!disabled) {
      if (children) {
        setCollapsed((s) => !s);
      }

      if (!children && onClick !== undefined) {
        onClick();
      }
    }
  };

  return (
    <>
      {label && <Label className={cn(`ebs-sidebar__label`, labelClass)} text={label} />}

      <div className="relative">
        <Tooltip
          bodyClass="p-0"
          placement="right"
          trigger={toggled && children ? 'click' : undefined}
          visible={toggled && collapsed}
          tooltip={toggled ? <div className={cn(`ebs-sidebar__options`)}>{children}</div> : undefined}
        >
          <div className="relative">
            <div
              className={cn(`ebs-sidebar__item`, className, {
                'ebs-sidebar__item--invert': invert,
                'ebs-sidebar__item--active': active,
                'ebs-sidebar__item--collapsed': collapsed,
                'ebs-sidebar__item--disabled': disabled,
                'has-options': children,
              })}
              onClick={onClickHandler}
            >
              {prefix && <div className="ebs-sidebar__prefix">{prefix}</div>}
              <span className={cn('ebs-sidebar__text', { 'px-0': typeof text !== 'string' })}>{text}</span>
            </div>

            {children && (
              <div className="ebs-sidebar__suffix">
                <Icon type={`arrow-${collapsed ? 'bottom' : 'left'}`} model="bold" />
              </div>
            )}
          </div>
        </Tooltip>

        {!toggled && (
          <AnimateHeight duration={150} height={collapsed ? 'auto' : 0}>
            <div className={cn(`ebs-sidebar__options`, optionsClass)}>{children}</div>
          </AnimateHeight>
        )}
      </div>
    </>
  );
}