types#GenericObject TypeScript Examples

The following examples show how to use types#GenericObject. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.ts    From ebs-design with MIT License 6 votes vote down vote up 
combineProps = (...args): GenericObject => Object.assign({}, ...args)
Example #2
Source File: Layout.tsx    From ebs-design with MIT License 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: Table.stories.tsx    From ebs-design with MIT License 6 votes vote down vote up 
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>
)
Example #4
Source File: Table.stories.tsx    From ebs-design with MIT License 6 votes vote down vote up 
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>
)
Example #5
Source File: array.ts    From ebs-design with MIT License 6 votes vote down vote up 
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;
}
Example #6
Source File: FormField.tsx    From ebs-design with MIT License 4 votes vote down vote up 
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>
  );
}
Example #7
Source File: Item.tsx    From ebs-design with MIT License 4 votes vote down vote up 
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>
    </>
  );
}