How to use the @ui5/webcomponents-react/lib/ObjectPageMode.ObjectPageMode.IconTabBar function in @ui5/webcomponents-react

To help you get started, we’ve selected a few @ui5/webcomponents-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github SAP / ui5-webcomponents-react / packages / main / src / components / ObjectPage / index.tsx View on Github external
});
  };

  useEffect(() => {
    let selectedIndex = findSectionIndexById(children, selectedSectionId);
    if (selectedIndex === -1) {
      selectedIndex = 0;
    }

    if (selectedSectionIndex !== selectedIndex) {
      setSelectedSectionIndex(selectedIndex);
    }
  }, [selectedSectionId]);

  let content = children;
  if (mode === ObjectPageMode.IconTabBar) {
    content = Children.toArray(children)[selectedSectionIndex];
  }

  const adjustDummyDivHeight = () => {
    return new Promise((resolve) => {
      requestAnimationFrame(() => {
        if (!objectPage.current) {
          // in case componentWillUnmount didn´t fire
          observer.current.disconnect();
          return;
        }

        const sections = objectPage.current.querySelectorAll('[id^="ObjectPageSection"]');
        if (!sections || sections.length < 1) {
          return;
        }
github SAP / ui5-webcomponents-react / packages / main / src / components / ObjectPage / ObjectPageAnchorButton.tsx View on Github external
const renderSubSectionListItem = (item) => {
    if (mode === ObjectPageMode.IconTabBar) {
      return (
        
          {item.props.title}
        
      );
    }

    return (
      
        {item.props.title}
      
    );
github SAP / ui5-webcomponents-react / packages / main / src / components / ObjectPage / demo.stories.tsx View on Github external
return (
    <div style="{{">
      
            Primary Action
          ,
          <button>
            Action
          </button>
        ]}
        image={SampleImage}
        renderHeaderContent={renderHeaderContent}
        mode={select('mode', ObjectPageMode, ObjectPageMode.IconTabBar)}
        imageShapeCircle={boolean('imageShapeCircle', false)}
        showHideHeaderButton={boolean('showHideHeaderButton', true)}
        selectedSectionId={text('selectedSectionId', '1')}
        onSelectedSectionChanged={action('onSelectedSectionChanged')}
        noHeader={boolean('noHeader', false)}
        style={{ height: '700px' }}
      &gt;
        
          <div>My Content 1</div>
        
      
    </div>
  );
};
renderShortContent.story = {
github SAP / ui5-webcomponents-react / packages / main / src / components / ObjectPage / index.tsx View on Github external
(e) => {
      if (mode === ObjectPageMode.IconTabBar) {
        const sectionIndex = e.getParameter('sectionIndex');
        const subSection = e.getParameter('subSection');
        setSelectedSectionIndex(sectionIndex);
        setSelectedSubSectionId(subSection.props.id);
      }
    },
    [mode]

@ui5/webcomponents-react

React Wrapper for UI5 Web Components and additional components

Apache-2.0
Latest version published 4 days ago

Package Health Score

90 / 100
Full package analysis

Similar packages