goblin-magic 1.0.3

package/widgets/splitter/widget.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import SplitterLayout from 'react-splitter-layout';
+import 'react-splitter-layout/lib/index.css';
+import * as styles from './styles.js';
+
+class Splitter extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {
+      primaryMinSize,
+      secondaryMinSize,
+      secondaryInitialSize,
+      percentage,
+      vertical,
+      children,
+      className = '',
+    } = this.props;
+    return (
+      <SplitterLayout
+        customClassName={this.styles.classNames.splitter + ' ' + className}
+        primaryMinSize={primaryMinSize}
+        secondaryMinSize={secondaryMinSize}
+        secondaryInitialSize={secondaryInitialSize}
+        percentage={percentage}
+        vertical={vertical}
+      >
+        {children}
+      </SplitterLayout>
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default Splitter;

package/widgets/tab-layout/styles.js

@@ -0,0 +1,31 @@
+export default function styles() {
+  const tabLayout = {
+    'display': 'flex',
+    'flexDirection': 'column',
+    'minWidth': 0, // allow to shrink
+
+    '& > *+*': {
+      flexGrow: 1,
+      minHeight: 0, // allow to shrink
+    },
+  };
+
+  const tabs = {
+    '& > *': {
+      'color': 'inherit',
+      'fontSize': 'inherit',
+      'cursor': 'pointer',
+
+      '&[data-active=true]': {},
+
+      ':hover': {},
+
+      ':active': {},
+    },
+  };
+
+  return {
+    tabLayout,
+    tabs,
+  };
+}

package/widgets/tab-layout/widget.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c.js';
+
+class TabLayout extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {children, className = '', ...props} = this.props;
+    return (
+      <div
+        {...props}
+        className={this.styles.classNames.tabLayout + ' ' + className}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+class TabLayoutTabs extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.handleTabClick = this.handleTabClick.bind(this);
+  }
+
+  handleTabClick(value, event) {
+    this.props.onTabClick?.(value, event);
+  }
+
+  render() {
+    const {currentTab, onTabClick, ...props} = this.props;
+    const className = this.props.className || '';
+    return (
+      <div {...props} className={this.styles.classNames.tabs + ' ' + className}>
+        {React.Children.map(this.props.children, (child) => {
+          if (!child) {
+            return child;
+          }
+          const value = child.props.value;
+          return React.cloneElement(child, {
+            'onClick': (event) =>
+              (child.props.onClick || this.handleTabClick)(value, event),
+            'data-active': currentTab === value,
+          });
+        })}
+      </div>
+    );
+  }
+}
+
+TabLayout.Tabs = withC(TabLayoutTabs);
+
+export default TabLayout;

package/widgets/with-computed-size/widget.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget/index.js';
+
+const hiddenStyle = {
+  position: 'fixed',
+  top: '0px',
+  left: '0px',
+  visibility: 'hidden',
+};
+
+class WithComputedSize extends Widget {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      size: null,
+      mounted: false,
+    };
+    this.contentRef = React.createRef();
+  }
+
+  componentDidMount() {
+    // If we use getBoundingClientRect in componentDidMount, the width and height are zero
+    this.setState({
+      mounted: true,
+    });
+  }
+
+  componentDidUpdate() {
+    if (!this.state.size) {
+      const element = this.contentRef.current;
+      if (!element) {
+        console.error(
+          `Ref not available in <WithComputedSize>. Unable to render its content.`
+        );
+      }
+      const {width, height} = element.getBoundingClientRect();
+      this.setState({
+        size: {width, height},
+      });
+    }
+  }
+
+  render() {
+    const style = this.state.size ? null : hiddenStyle;
+    return (
+      this.state.mounted &&
+      this.props.children(this.contentRef, style, this.state.size)
+    );
+  }
+}
+
+export default WithComputedSize;