@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Section/Section.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Heading from '../Heading';
+import Toolbar from '../Toolbar';
+import StackView from '../StackView';
+
+function Section(_ref) {
+  var _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      children = _ref.children,
+      count = _ref.count,
+      countColor = _ref.countColor,
+      helpContent = _ref.helpContent,
+      onStatusClearRequest = _ref.onStatusClearRequest,
+      status = _ref.status,
+      title = _ref.title,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["actions", "children", "count", "countColor", "helpContent", "onStatusClearRequest", "status", "title"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    as: "section"
+  }, restProps), /*#__PURE__*/React.createElement(Toolbar, {
+    title: /*#__PURE__*/React.createElement(Heading, {
+      level: 3
+    }, title),
+    helpContent: helpContent,
+    actions: actions,
+    count: count,
+    countColor: countColor,
+    status: status,
+    onStatusClearRequest: onStatusClearRequest,
+    marginBottom: 2
+  }), children);
+}
+
+export default Section;

package/dist/esm/Section/index.js

@@ -0,0 +1,2 @@
+import Section from './Section';
+export default Section;

package/dist/esm/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import Button from '../Button';
+import InputBox from '../Input/InputBox';
+import { navigateSize } from '../system';
+
+var SegmentedControl = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(SegmentedControl, _Component);
+
+  function SegmentedControl(_props) {
+    var _this;
+
+    _this = _Component.call(this, _props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "getActiveIndex", function (props) {
+      return props.activeSegment === undefined ? 0 : props.segments.indexOf(props.activeSegment);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setInputBox", function (component) {
+      _this.inputBox = component;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      if (_this.props.onChange && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        var amountToMove = event.key === 'ArrowLeft' ? -1 : 1;
+        var nextIndex = _this.state.activeIndex + amountToMove;
+        event.preventDefault();
+
+        _this.changeSegment(nextIndex);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "changeSegment", function (index) {
+      var nextSegment = _this.props.segments[index];
+
+      if (nextSegment) {
+        if (_this.props.activeSegment === undefined) {
+          _this.setState({
+            activeIndex: index
+          });
+        }
+
+        if (_this.props.onChange) {
+          _this.props.onChange(nextSegment.title || nextSegment);
+        }
+
+        _this.focus(index);
+      }
+    });
+
+    _this.state = {
+      activeIndex: _this.getActiveIndex(_props)
+    };
+    return _this;
+  }
+
+  var _proto = SegmentedControl.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.activeSegment !== this.props.activeSegment) {
+      this.setState({
+        activeIndex: this.getActiveIndex(this.props)
+      });
+    }
+  };
+
+  _proto.focus = function focus(index) {
+    this.inputBox.focus(index);
+  };
+
+  _proto.blur = function blur() {
+    this.inputBox.blur();
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        activeSegment = _this$props.activeSegment,
+        _this$props$color = _this$props.color,
+        color = _this$props$color === void 0 ? 'primary' : _this$props$color,
+        disabled = _this$props.disabled,
+        onChange = _this$props.onChange,
+        segments = _this$props.segments,
+        _this$props$segmentBa = _this$props.segmentBasis,
+        segmentBasis = _this$props$segmentBa === void 0 ? 'auto' : _this$props$segmentBa,
+        _this$props$size = _this$props.size,
+        size = _this$props$size === void 0 ? 'md' : _this$props$size,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeSegment", "color", "disabled", "onChange", "segments", "segmentBasis", "size"]);
+
+    var activeIndex = this.state.activeIndex;
+    return /*#__PURE__*/React.createElement(InputBox, _extends({
+      ref: this.setInputBox,
+      size: size,
+      includeSpacing: true,
+      evenPadding: true,
+      role: "group",
+      cursor: "initial",
+      disabled: disabled
+    }, restProps), segments.map(function (segment, segmentIndex) {
+      var title = segment.title,
+          restSegmentProps = _objectWithoutPropertiesLoose(segment, ["title"]);
+
+      var buttonProps = title ? restSegmentProps : {};
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        key: segmentIndex,
+        grow: 1,
+        size: navigateSize(size, -1),
+        basis: segmentBasis,
+        theme: segmentIndex === activeIndex ? color : undefined,
+        variant: segmentIndex === activeIndex ? 'fill' : 'naked',
+        title: title || segment,
+        disabled: disabled,
+        onKeyDown: _this2.handleKeyDown,
+        onClick: function onClick() {
+          return segmentIndex !== activeIndex && _this2.changeSegment(segmentIndex);
+        }
+      }, buttonProps));
+    }));
+  };
+
+  return SegmentedControl;
+}(Component);
+
+export default SegmentedControl;

package/dist/esm/SegmentedControl/index.js

@@ -0,0 +1,2 @@
+import SegmentedControl from './SegmentedControl';
+export default SegmentedControl;

package/dist/esm/SegmentedTabs/SegmentedTabs.js

@@ -0,0 +1,137 @@
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Component } from 'react';
+import Text from '../Text';
+import StackView from '../StackView';
+
+function Tab(_ref) {
+  var isSelected = _ref.isSelected,
+      selectedColor = _ref.selectedColor,
+      onSelect = _ref.onSelect,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["isSelected", "selectedColor", "onSelect"]);
+
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "button",
+    tabIndex: isSelected ? -1 : undefined,
+    position: "relative",
+    fontSize: 4,
+    fontWeight: isSelected ? 600 : undefined,
+    padding: 1,
+    borderBottomWidth: 2,
+    borderBottomColor: isSelected ? selectedColor : 'separatorTertiary',
+    textAlign: "center",
+    userSelect: "none",
+    cursor: isSelected ? undefined : 'pointer',
+    hover: {
+      borderBottomColor: isSelected ? undefined : 'separatorSecondary'
+    },
+    onClick: isSelected ? undefined : onSelect
+  }, restProps));
+}
+
+var SegmentedTabs = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(SegmentedTabs, _Component);
+
+  function SegmentedTabs(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "setIndex", function (index) {
+      if (_this.props.activeTab === undefined) {
+        _this.setState({
+          activeIndex: index
+        });
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange(_this.props.tabs[index]);
+      }
+    });
+
+    _this.state = {
+      activeIndex: _this.getActiveIndex(props)
+    };
+    return _this;
+  }
+
+  var _proto = SegmentedTabs.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (this.props.activeTab) {
+      var lastActiveIndex = this.getActiveIndex(lastProps);
+      var nextActiveIndex = this.getActiveIndex(this.props);
+
+      if (lastActiveIndex !== nextActiveIndex || this.state.activeIndex !== nextActiveIndex) {
+        this.setState({
+          activeIndex: nextActiveIndex
+        });
+      }
+    }
+  };
+
+  _proto.getActiveIndex = function getActiveIndex(_ref2) {
+    var activeTab = _ref2.activeTab,
+        tabs = _ref2.tabs;
+    var index;
+
+    if (typeof activeTab === 'function') {
+      index = tabs.reduce(function (searchIndex, tab, index) {
+        if (activeTab(tab, index)) {
+          searchIndex = index;
+        }
+
+        return searchIndex;
+      }, null);
+    } else {
+      index = activeTab === undefined ? 0 : tabs.indexOf(activeTab);
+    }
+
+    return index;
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        activeTab = _this$props.activeTab,
+        color = _this$props.color,
+        getTabLabel = _this$props.getTabLabel,
+        onChange = _this$props.onChange,
+        tabs = _this$props.tabs,
+        tabProps = _this$props.tabProps,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeTab", "color", "getTabLabel", "onChange", "tabs", "tabProps"]);
+
+    var activeIndex = this.state.activeIndex;
+    return /*#__PURE__*/React.createElement(StackView, _extends({
+      role: "group",
+      axis: "horizontal",
+      distribution: "fill",
+      position: "relative"
+    }, restProps), tabs.map(function (tab, index) {
+      return /*#__PURE__*/React.createElement(Tab, _extends({
+        key: index,
+        index: index,
+        isSelected: index === activeIndex,
+        selectedColor: color,
+        onSelect: function onSelect() {
+          return _this2.setIndex(index);
+        }
+      }, tabProps), getTabLabel(tab));
+    }));
+  };
+
+  return SegmentedTabs;
+}(Component);
+
+_defineProperty(SegmentedTabs, "defaultProps", {
+  color: 'primary',
+  getTabLabel: function getTabLabel(tab) {
+    return tab;
+  }
+});
+
+export default SegmentedTabs;

package/dist/esm/SegmentedTabs/index.js

@@ -0,0 +1,2 @@
+import SegmentedTabs from './SegmentedTabs';
+export default SegmentedTabs;

package/dist/esm/Select/Context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var SelectContext = /*#__PURE__*/createContext();
+export default SelectContext;

package/dist/esm/Select/Inline.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import Select from './Select';
+
+function Inline(_ref) {
+  var light = _ref.light,
+      hover = _ref.hover,
+      focus = _ref.focus,
+      readOnly = _ref.readOnly,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["light", "hover", "focus", "readOnly"]);
+
+  var pseudoStyles = readOnly ? {} : {
+    backgroundColor: light ? 'light-0' : 'highlight'
+  };
+
+  if (hover || focus) {
+    restProps = _objectSpread(_objectSpread({}, restProps), pseudoStyles);
+  }
+
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    inline: true,
+    naked: true,
+    paddingLeft: 0.5,
+    marginHorizontal: -0.5,
+    stroke: undefined,
+    backgroundColor: "transparent",
+    color: light ? 'light-9' : 'foreground',
+    hover: pseudoStyles,
+    focus: pseudoStyles,
+    readOnly: readOnly
+  }, restProps));
+}
+
+export default Inline;

package/dist/esm/Select/Option.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import Box from '../Box';
+import Checkbox from '../Checkbox';
+import Icon from '../Icon';
+import { ItemListItem } from '../ItemList';
+import Menu from '../Menu';
+import { OPTION_DISPLAY_NAME } from './constants';
+import SelectContext from './Context';
+
+var noop = function noop() {
+  return null;
+};
+
+var _ref2 = /*#__PURE__*/React.createElement(Icon, {
+  name: "checkmark",
+  size: "sm"
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(Box, {
+  width: 2.5,
+  height: 2.5
+});
+
+var Option = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Option, _Component);
+
+  function Option() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Option.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        disabled = _this$props.disabled,
+        index = _this$props.index,
+        text = _this$props.text,
+        value = _this$props.value,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "disabled", "index", "text", "value"]);
+
+    return /*#__PURE__*/React.createElement(SelectContext.Consumer, null, function (selectContext) {
+      return /*#__PURE__*/React.createElement(ItemListItem, {
+        data: value,
+        text: text,
+        disabled: disabled,
+        index: index
+      }, function (_ref) {
+        var clearHighlight = _ref.clearHighlight,
+            highlight = _ref.highlight,
+            highlighted = _ref.highlighted,
+            select = _ref.select,
+            selected = _ref.selected,
+            id = _ref.id;
+        return /*#__PURE__*/React.createElement(Menu.Item, _extends({
+          id: id,
+          role: "option",
+          as: "li",
+          "aria-disabled": disabled,
+          "aria-selected": selected,
+          disabled: disabled,
+          isHighlighted: highlighted,
+          onMouseOver: highlight,
+          onMouseOut: clearHighlight,
+          onMouseUp: function onMouseUp() {
+            return selectContext.canSelectOption.current && select();
+          },
+          renderLeft: typeof children === 'function' ? null : selectContext.multiple ? /*#__PURE__*/React.createElement(Checkbox, {
+            size: "sm",
+            label: null,
+            checked: selected,
+            onChange: noop
+          }) : selected ? _ref2 : _ref3
+        }, restProps), typeof children === 'function' ? children(selected) : children);
+      });
+    });
+  };
+
+  return Option;
+}(Component);
+
+_defineProperty(Option, "displayName", OPTION_DISPLAY_NAME);
+
+export default Option;

package/dist/esm/Select/OptionGroup.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Component } from 'react';
+import { OPTIONGROUP_DISPLAY_NAME } from './constants';
+
+var OptionGroup = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(OptionGroup, _Component);
+
+  function OptionGroup() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = OptionGroup.prototype;
+
+  _proto.render = function render() {
+    return null;
+  };
+
+  return OptionGroup;
+}(Component);
+
+_defineProperty(OptionGroup, "displayName", OPTIONGROUP_DISPLAY_NAME);
+
+export default OptionGroup;