How to use @ui5/webcomponents-react-base - 10 common examples

children,
    justifyContent,
    direction,
    alignItems,
    height,
    width,
    displayInline,
    wrap,
    style,
    className,
    tooltip,
    slot
  } = props;

  const classes = useStyles();
  const flexBoxClasses = StyleClassHelper.of(classes.flexBox);
  // direction
  flexBoxClasses.put(classes[`flexBoxDirection${direction}`]);
  // justify content
  flexBoxClasses.put(classes[`justifyContent${justifyContent}`]);
  // align items
  flexBoxClasses.put(classes[`alignItems${alignItems}`]);
  // wrapping
  flexBoxClasses.put(classes[`flexWrap${wrap}`]);

  if (displayInline) {
    flexBoxClasses.put(classes.flexBoxDisplayInline);
  }

  if (className) {
    flexBoxClasses.put(className);
  }

// @ts-ignore
                  if (child.props.hasOwnProperty(changeEventName)) {
                    // @ts-ignore
                    child.props[changeEventName](event);
                  }
                },
                valueParameter: valueParamName,
                style: { width: '100%' }
              });
            })}
          
        );
    }
  }, [valueParamName, changeEventName, filterItems, loading, type, children]);

  const filterItemClasses = StyleClassHelper.of(classes.filterItem);

  return (
    <div title="{tooltip}" style="{style}">
      <div>
        <label>{label}</label>
        {filterComponent}
      </div>
    </div>
  );
});

}, {});

    const eventMeta = getWebComponentMetadata().getEvents()[eventIdentifier] || {};

    payload = Object.keys(eventMeta).reduce((acc, val) => {
      if (val === 'detail' && e[val]) {
        return {
          ...acc,
          ...e[val]
        };
      }
      acc[val] = (e.detail && e.detail[val]) || e[val];
      return acc;
    }, payload);
    // TODO: Pass Web Component Ref in here?
    eventHandler(Event.of(null, e, payload));
  };

label: formatTooltipLabel(categoryAxisFormatter, valueAxisFormatter)
        }
      },
      plugins: {
        datalabels: {
          formatter: formatDataLabel(valueAxisFormatter)
        }
      }
    };
  }, [categoryAxisFormatter, valueAxisFormatter]);
  const chartOptions = useMergedConfig(lineChartDefaultConfig, options);

  const theme: any = useTheme();
  const data = useChartData(labels, datasets, colors, theme.theme);

  const chartRef = useConsolidatedRef(ref);
  const handleLegendItemPress = useLegendItemClickHandler(chartRef, legendRef);
  useLegend(chartRef, legendRef, noLegend, handleLegendItemPress);

  return (

return (
      <div title="{tooltip}" style="{style}">
        {loading &amp;&amp; datasets.length &gt; 0 &amp;&amp; }
        {/*
        // @ts-ignore */}
        {loading &amp;&amp; datasets.length === 0 &amp;&amp; }
        {datasets.length &gt; 0 &amp;&amp; }
      </div>
    );
  };

  ChartContainer.defaultProps = Component.defaultProps;
  hoistNonReactStatics(ChartContainer, Component);

  return withStyles(styles)(ChartContainer);
};

(props: ObjectPageSectionPropTypes, ref: RefObject) => {
    const { title, id, children, titleUppercase, className, style, tooltip } = props;
    const classes = useStyles();

    if (!id) {
      throw new EmptyIdPropException('ObjectPageSection requires a unique ID property!');
    }

    const sectionRef: RefObject = useConsolidatedRef(ref);
    const htmlId = `ObjectPageSection-${id}`;

    useScrollElement(htmlId, sectionRef, {
      spy: true
    });

    const titleClasses = StyleClassHelper.of(classes.title);
    if (titleUppercase) {
      titleClasses.put(classes.uppercase);
    }

    return (
      <section title="{tooltip}" style="{style}" role="region" id="{htmlId}">
        <div role="heading">
          <div>{title}</div>
        </div>
        {/* TODO Check for subsections as they should win over the children */}
        <div>
          <div>{children}</div></div></section>

const styles = ({ parameters }: JSSTheme) => ({
  card: {
    backgroundColor: parameters.sapUiTileBackground,
    // TODO There is a border mentioned in the specs, but this one looks weird.
    // border: `0.625rem solid ${parameters.sapUiTileBorderColor}`,
    boxShadow: parameters.sapUiShadowLevel0,
    borderRadius: '0.25rem',
    textAlign: 'start',
    overflow: 'hidden',
    position: 'relative',
    fontFamily: parameters.sapUiFontFamily,
    boxSizing: 'border-box'
  },
  content: spacing.sapUiContentPadding
});

it('enter key down', () => {
    const callback = sinon.spy();
    const wrapper = mountThemedComponent();
    wrapper.find(Avatar).simulate('keyDown', { keyCode: KeyCodes.ENTER });
    expect(callback.called).to.equal(true);
  });

it('other key down', () => {
    const callback = sinon.spy();
    const wrapper = mountThemedComponent();
    wrapper.find(Avatar).simulate('keyDown', { keyCode: KeyCodes.PAGE_DOWN });
    expect(callback.called).to.equal(false);
  });
});

const indicatorIcon = useMemo(() => {
      const arrowClasses = StyleClassHelper.of(classes.arrowIndicatorShape);
      switch (arrowIndicator) {
        case DeviationIndicator.Up:
          arrowClasses.put(classes.arrowUp);
          break;
        case DeviationIndicator.Down:
          arrowClasses.put(classes.arrowDown);
          break;
        default:
          arrowClasses.put(classes.arrowRight);
          break;
      }

      switch (indicatorState) {
        case ValueState.Success:
          arrowClasses.put(classes.good);
          break;