@instructure/ui-drilldown 8.21.1-snapshot.10

package/es/Drilldown/__examples__/Drilldown.examples.js

@@ -0,0 +1,299 @@
+var _Drilldown$Page, _Drilldown$Page2, _Drilldown$Page3, _Drilldown$Page4, _Drilldown$Option, _Drilldown$Option2, _Drilldown$Option3, _Drilldown$Option4, _br, _br2, _br3, _Drilldown$Option5;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+import { Drilldown } from '../index';
+const triggerButton = /*#__PURE__*/React.createElement("button", {
+  key: 1,
+  style: {
+    marginLeft: '72px',
+    position: 'absolute',
+    top: '45%'
+  }
+}, "a drilldown trigger");
+export default {
+  maxExamplesPerPage: 10,
+  propValues: {
+    // these are non-existing props, we just pass them to getComponentProps()
+    customProps: [{
+      text: 'all custom props are undefined'
+    }, {
+      text: 'disabled',
+      defaultShow: false,
+      disabled: true
+    }, {
+      text: 'no overflow setting',
+      defaultShow: true,
+      disabled: false,
+      separator: true,
+      groupDisabled: true,
+      renderGroupTitle: 'groupTitle',
+      contentVAlign: 'start'
+    }, // overflowX tests
+    {
+      text: 'overflowX auto',
+      defaultShow: true,
+      width: '12rem',
+      overflowX: 'auto',
+      disabled: false,
+      separator: true,
+      groupDisabled: true,
+      renderGroupTitle: 'groupTitle',
+      contentVAlign: 'start'
+    }, {
+      text: 'overflowX hidden',
+      defaultShow: true,
+      width: '12rem',
+      overflowX: 'hidden',
+      disabled: true,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'center'
+    }, {
+      text: 'overflowX visible',
+      defaultShow: true,
+      width: '12rem',
+      overflowX: 'visible',
+      disabled: false,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'end'
+    }, // overflowY tests
+    {
+      text: 'overflowY auto',
+      defaultShow: true,
+      height: '20rem',
+      overflowY: 'auto',
+      disabled: false,
+      separator: true,
+      groupDisabled: true,
+      renderGroupTitle: 'groupTitle',
+      contentVAlign: 'start'
+    }, {
+      text: 'overflowY hidden',
+      defaultShow: true,
+      height: '20rem',
+      overflowY: 'hidden',
+      disabled: true,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'center'
+    }, {
+      text: 'overflowY visible',
+      defaultShow: true,
+      height: '20rem',
+      overflowY: 'visible',
+      disabled: false,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'end'
+    }, // tests for Drilldown.Page
+    {
+      page: 'pageWithSubpages'
+    }, {
+      page: 'pageWithSubpages2'
+    }, // Popover version
+    {
+      text: 'with trigger',
+      trigger: triggerButton,
+      defaultShow: false,
+      disabled: false
+    }, {
+      text: 'with trigger disabled',
+      trigger: triggerButton,
+      defaultShow: false,
+      disabled: true
+    }, {
+      text: 'with trigger and defaultShow',
+      trigger: triggerButton,
+      defaultShow: true,
+      disabled: false
+    }, {
+      text: 'with trigger, defaultShow and disabled',
+      trigger: triggerButton,
+      defaultShow: true,
+      disabled: true
+    }, {
+      text: 'with trigger and withArrow',
+      trigger: triggerButton,
+      defaultShow: true,
+      withArrow: true
+    }, {
+      text: 'with trigger and withArrow="false"',
+      trigger: triggerButton,
+      defaultShow: true,
+      withArrow: false
+    }, {
+      text: 'with trigger and placement + offset',
+      trigger: triggerButton,
+      defaultShow: true,
+      placement: 'end top',
+      offsetX: 10,
+      offsetY: -20,
+      width: '20rem'
+    }, {
+      text: 'with trigger and width + height',
+      trigger: triggerButton,
+      defaultShow: true,
+      width: '20rem',
+      height: '20rem'
+    }]
+  },
+
+  getExampleProps(props) {
+    return {
+      height: props.customProps.defaultShow || !props.customProps.trigger ? '57rem' : '5rem',
+      width: '38rem',
+      padding: '0 0 0 small',
+      withVisualDebug: true,
+      position: 'relative'
+    };
+  },
+
+  getComponentProps: props => {
+    return {
+      rootPageId: 'page0',
+      children: generateDrilldownChildren(props, props.customProps.page),
+      rotateFocus: true,
+      overflowX: props.customProps.overflowX,
+      overflowY: props.customProps.overflowY,
+      shouldHideOnSelect: true,
+      shouldFocusTriggerOnClose: true,
+      shouldContainFocus: false,
+      shouldReturnFocus: true,
+      width: props.customProps.width,
+      height: props.customProps.height,
+      disabled: props.customProps.disabled,
+      trigger: props.customProps.trigger,
+      ...(props.customProps.trigger ? {
+        defaultShow: props.customProps.defaultShow,
+        withArrow: props.customProps.withArrow,
+        placement: props.customProps.placement,
+        offsetX: props.customProps.offsetX,
+        offsetY: props.customProps.offsetY
+      } : {
+        defaultShow: false,
+        withArrow: false,
+        placement: 'bottom center',
+        offsetX: 0,
+        offsetY: 0
+      })
+    };
+  }
+};
+
+function generateDrilldownChildren(props, variant) {
+  if (variant == 'pageWithSubpages') {
+    return [_Drilldown$Page || (_Drilldown$Page = /*#__PURE__*/React.createElement(Drilldown.Page, {
+      id: "page0",
+      key: "page0",
+      renderTitle: "pageWithSubpages"
+    }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+      id: "o1",
+      subPageId: "subpage"
+    }, "has subpage"), /*#__PURE__*/React.createElement(Drilldown.Separator, {
+      id: "s1"
+    }), /*#__PURE__*/React.createElement(Drilldown.Option, {
+      id: "o2"
+    }, "does not have subpage"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+      id: "o3",
+      href: "#"
+    }, "this is a link"))), _Drilldown$Page2 || (_Drilldown$Page2 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+      id: "subpage",
+      renderTitle: "aaa",
+      key: 1
+    }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+      id: "tmp"
+    }, "not shown")))];
+  } else if (variant == 'pageWithSubpages2') {
+    return [_Drilldown$Page3 || (_Drilldown$Page3 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+      id: "page0",
+      key: "page0",
+      renderTitle: "pageWithSubpages2",
+      renderActionLabel: "action label",
+      withoutHeaderSeparator: true,
+      renderBackButtonLabel: "go back"
+    }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+      id: "o1",
+      subPageId: "subpage"
+    }, "has subpage"), /*#__PURE__*/React.createElement(Drilldown.Separator, {
+      id: "s1"
+    }), /*#__PURE__*/React.createElement(Drilldown.Option, {
+      id: "o2"
+    }, "does not have subpage"))), _Drilldown$Page4 || (_Drilldown$Page4 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+      id: "subpage",
+      renderTitle: "aaa",
+      key: 1
+    }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+      id: "tmp"
+    }, "subpage option")))];
+  }
+
+  return [/*#__PURE__*/React.createElement(Drilldown.Page, {
+    id: "page0",
+    key: "page0"
+  }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "otext"
+  }, props.customProps.text), /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "o"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, "this should be an option with very very super very very long label")), /*#__PURE__*/React.createElement(Drilldown.Group, {
+    id: "g1",
+    disabled: props.customProps.groupDisabled,
+    renderGroupTitle: props.customProps.renderGroupTitle,
+    withoutSeparators: props.customProps.separator,
+    selectableType: "multiple"
+  }, _Drilldown$Option || (_Drilldown$Option = /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "o2",
+    renderLabelInfo: "li",
+    defaultSelected: true
+  }, "defaultSelected")), _Drilldown$Option2 || (_Drilldown$Option2 = /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "o3"
+  }, "minimal"))), _Drilldown$Option3 || (_Drilldown$Option3 = /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "o4",
+    disabled: true
+  }, "disabled")), _Drilldown$Option4 || (_Drilldown$Option4 = /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "o5",
+    renderBeforeLabel: "be",
+    renderAfterLabel: "af",
+    renderLabelInfo: "li"
+  }, "extra labels")), /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "o6",
+    beforeLabelContentVAlign: props.customProps.contentVAlign,
+    renderBeforeLabel: "bef",
+    afterLabelContentVAlign: props.customProps.contentVAlign,
+    renderAfterLabel: "after"
+  }, _br || (_br = /*#__PURE__*/React.createElement("br", null)), "valign settings", _br2 || (_br2 = /*#__PURE__*/React.createElement("br", null)), _br3 || (_br3 = /*#__PURE__*/React.createElement("br", null))), _Drilldown$Option5 || (_Drilldown$Option5 = /*#__PURE__*/React.createElement(Drilldown.Option, {
+    id: "o7",
+    description: "the description"
+  }, "has description")))];
+}