sassy-grommet 1.14.0

package/components/Accordion.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _List = _interopRequireDefault(require("./List"));
+var _CSSClassnames = _interopRequireDefault(require("../utils/CSSClassnames"));
+var _Props = _interopRequireDefault(require("../utils/Props"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
+const CLASS_ROOT = _CSSClassnames.default.ACCORDION;
+class Accordion extends _react.Component {
+  constructor(props, context) {
+    super(props, context);
+    this._onPanelChange = this._onPanelChange.bind(this);
+    let active;
+    // active in state should always be an array
+    if (typeof this.props.active === 'number') {
+      active = [this.props.active];
+    } else {
+      active = this.props.active || [];
+    }
+    this.state = {
+      active: active
+    };
+  }
+  componentWillReceiveProps(newProps) {
+    if (newProps.active !== this.props.active) {
+      this.setState({
+        active: newProps.active || []
+      });
+    }
+  }
+  _onPanelChange(index) {
+    let active = [...this.state.active];
+    const {
+      onActive,
+      openMulti
+    } = this.props;
+    const activeIndex = active.indexOf(index);
+    if (activeIndex > -1) {
+      active.splice(activeIndex, 1);
+    } else {
+      if (openMulti) {
+        active.push(index);
+      } else {
+        active = [index];
+      }
+    }
+    this.setState({
+      active: active
+    }, () => {
+      if (onActive) {
+        if (!openMulti) {
+          onActive(active[0]);
+        } else {
+          onActive(active);
+        }
+      }
+    });
+  }
+  render() {
+    const {
+      animate,
+      className,
+      children
+    } = this.props;
+    const classes = (0, _classnames.default)(CLASS_ROOT, className);
+    const accordionChildren = _react.default.Children.map(children, (child, index) => {
+      if (!child) return null;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        active: this.state.active.indexOf(index) > -1,
+        onChange: () => {
+          this._onPanelChange(index);
+        },
+        animate
+      });
+    });
+    const restProps = _Props.default.omit(this.props, Object.keys(Accordion.propTypes));
+    return /*#__PURE__*/_react.default.createElement(_List.default, _extends({
+      role: "tablist",
+      className: classes
+    }, restProps), accordionChildren);
+  }
+}
+exports.default = Accordion;
+Accordion.propTypes = {
+  active: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number)]),
+  animate: _propTypes.default.bool,
+  onActive: _propTypes.default.func,
+  openMulti: _propTypes.default.bool
+};
+Accordion.defaultProps = {
+  openMulti: false,
+  animate: true
+};

package/components/AccordionPanel.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _Button = _interopRequireDefault(require("./Button"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+var _CaretNext = _interopRequireDefault(require("./icons/base/CaretNext"));
+var _Collapsible = _interopRequireDefault(require("./Collapsible"));
+var _CSSClassnames = _interopRequireDefault(require("../utils/CSSClassnames"));
+var _Intl = _interopRequireDefault(require("../utils/Intl"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
+
+const CLASS_ROOT = _CSSClassnames.default.ACCORDION_PANEL;
+class AccordionPanel extends _react.Component {
+  constructor() {
+    super();
+    this._onClickTab = this._onClickTab.bind(this);
+  }
+  _onClickTab(event) {
+    const {
+      onChange
+    } = this.props;
+    if (event) {
+      event.preventDefault();
+    }
+    onChange();
+  }
+  render() {
+    const {
+      a11yTitle,
+      active,
+      animate,
+      className,
+      children,
+      heading,
+      pad
+    } = this.props;
+    const {
+      intl
+    } = this.context;
+    const classes = (0, _classnames.default)(CLASS_ROOT, className, {
+      ["".concat(CLASS_ROOT, "--active")]: active
+    });
+    const tabContentTitle = _Intl.default.getMessage(intl, 'Tab Contents', {
+      activeTitle: a11yTitle || heading
+    });
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      className: classes,
+      direction: "column",
+      pad: "none",
+      "aria-expanded": active,
+      "aria-selected": active,
+      role: "tab",
+      "aria-label": a11yTitle || heading
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      fill: true,
+      plain: true,
+      onClick: this._onClickTab
+    }, /*#__PURE__*/_react.default.createElement(_Header.default, {
+      pad: pad,
+      direction: "row",
+      justify: "between",
+      align: "center",
+      responsive: false,
+      className: "".concat(CLASS_ROOT, "__header")
+    }, heading, /*#__PURE__*/_react.default.createElement(_CaretNext.default, {
+      className: "".concat(CLASS_ROOT, "__control")
+    })))), /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
+      "aria-label": tabContentTitle,
+      role: "tabpanel",
+      active: active,
+      animate: animate,
+      pad: pad
+    }, children));
+  }
+}
+exports.default = AccordionPanel;
+AccordionPanel.propTypes = {
+  a11yTitle: _propTypes.default.string,
+  active: _propTypes.default.bool,
+  // set by Accordion
+  animate: _propTypes.default.bool,
+  heading: _propTypes.default.node.isRequired,
+  onChange: _propTypes.default.func,
+  pad: _Header.default.propTypes.pad
+};
+AccordionPanel.contextTypes = {
+  intl: _propTypes.default.object
+};

package/components/Anchor.js

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactDesc = require("react-desc");
+var _reactRouter = require("react-router");
+var _LinkNext = _interopRequireDefault(require("./icons/base/LinkNext"));
+var _CSSClassnames = _interopRequireDefault(require("../utils/CSSClassnames"));
+const _excluded = ["a11yTitle", "align", "animateIcon", "children", "className", "disabled", "href", "icon", "label", "onClick", "path", "primary", "reverse", "tag"]; // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const CLASS_ROOT = _CSSClassnames.default.ANCHOR;
+class Anchor extends _react.Component {
+  constructor(props, context) {
+    super(props, context);
+    this._onClick = this._onClick.bind(this);
+    this._onLocationChange = this._onLocationChange.bind(this);
+    this._attachUnlisten = this._attachUnlisten.bind(this);
+    this._isRouteActive = this._isRouteActive.bind(this);
+    const {
+      path
+    } = props;
+    const {
+      router
+    } = context;
+    const active = this._isRouteActive(path, router);
+    this.state = {
+      active
+    };
+  }
+  componentDidMount() {
+    const {
+      path
+    } = this.props;
+    const {
+      router
+    } = this.context;
+    if (path) {
+      this._attachUnlisten(router.history || router);
+    }
+  }
+  componentWillReceiveProps(nextProps) {
+    const {
+      path
+    } = nextProps;
+    const {
+      router
+    } = this.context;
+    if (path && path !== this.props.path) {
+      this._attachUnlisten(router.history || router);
+    }
+  }
+  componentWillUnmount() {
+    const {
+      path
+    } = this.props;
+    if (path) {
+      this._unlisten();
+    }
+    this._unmounted = true;
+  }
+  _isRouteActive(path, router) {
+    if (!path) {
+      return false;
+    }
+    let active;
+    if (router && router.isActive) {
+      active = router && router.isActive && path && router.isActive({
+        pathname: path.path || path,
+        query: {
+          indexLink: path.index
+        }
+      });
+    } else if (router && _reactRouter.matchPath) {
+      active = !!(0, _reactRouter.matchPath)(router.history.location.pathname, {
+        path: path.path || path,
+        exact: !!path.index
+      });
+    }
+    return active;
+  }
+  _attachUnlisten(router) {
+    this._unlisten = router.listen(this._onLocationChange);
+  }
+  _onLocationChange(location) {
+    // sometimes react router is still calling the listen callback even
+    // if we called unlisten. So we added this check here to prevent
+    // calling setState in a unmounted component
+    if (!this._unmounted) {
+      const {
+        path
+      } = this.props;
+      const {
+        router
+      } = this.context;
+      const active = _reactRouter.matchPath ? !!(0, _reactRouter.matchPath)(location.pathname, {
+        path: path.path || path,
+        exact: !!path.index
+      }) : router && location.pathname === (path.path || path);
+      this.setState({
+        active
+      });
+    }
+  }
+  _onClick(event) {
+    const {
+      method,
+      onClick,
+      path,
+      disabled
+    } = this.props;
+    const {
+      router
+    } = this.context;
+    const modifierKey = event.ctrlKey || event.metaKey;
+    if (modifierKey && !disabled && !onClick) {
+      return true;
+    }
+    event.preventDefault();
+    if (!disabled) {
+      if (path) {
+        if ('push' === method) {
+          (router.history || router).push(path.path || path);
+        } else if ('replace' === method) {
+          (router.history || router).replace(path.path || path);
+        }
+      }
+      if (onClick) {
+        onClick(...arguments);
+      }
+    }
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        a11yTitle,
+        align,
+        animateIcon,
+        children,
+        className,
+        disabled,
+        href,
+        icon,
+        label,
+        onClick,
+        path,
+        primary,
+        reverse,
+        tag
+      } = _this$props,
+      props = _objectWithoutProperties(_this$props, _excluded);
+    delete props.method;
+    const {
+      active
+    } = this.state;
+    const {
+      router
+    } = this.context;
+    let anchorIcon;
+    if (icon) {
+      anchorIcon = icon;
+    } else if (primary) {
+      anchorIcon = /*#__PURE__*/_react.default.createElement(_LinkNext.default, {
+        a11yTitle: "link next"
+      });
+    }
+    if (anchorIcon && !primary && !label) {
+      anchorIcon = /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(CLASS_ROOT, "__icon")
+      }, anchorIcon);
+    }
+    let hasIcon = anchorIcon !== undefined;
+    let anchorChildren = _react.Children.map(children, child => {
+      if (child && child.type && child.type.icon) {
+        hasIcon = true;
+        child = /*#__PURE__*/_react.default.createElement("span", {
+          className: "".concat(CLASS_ROOT, "__icon")
+        }, child);
+      }
+      return child;
+    });
+    const target = path ? path.path || path : undefined;
+    let adjustedHref;
+    if (router && router.createPath) {
+      adjustedHref = path && router ? router.createPath(target) : href;
+    } else {
+      adjustedHref = path && router && router.history ? router.history.createHref(typeof target === 'string' ? {
+        pathname: target
+      } : target) : href;
+    }
+    let classes = (0, _classnames.default)(CLASS_ROOT, {
+      ["".concat(CLASS_ROOT, "--animate-icon")]: hasIcon && animateIcon !== false,
+      ["".concat(CLASS_ROOT, "--disabled")]: disabled,
+      ["".concat(CLASS_ROOT, "--icon")]: anchorIcon || hasIcon,
+      ["".concat(CLASS_ROOT, "--icon-label")]: hasIcon && label,
+      ["".concat(CLASS_ROOT, "--align-").concat(align)]: align,
+      ["".concat(CLASS_ROOT, "--primary")]: primary,
+      ["".concat(CLASS_ROOT, "--reverse")]: reverse,
+      ["".concat(CLASS_ROOT, "--active")]: active
+    }, className);
+    let adjustedOnClick = path && router ? this._onClick : onClick;
+    if (!anchorChildren) {
+      anchorChildren = label;
+    }
+    const first = reverse ? anchorChildren : anchorIcon;
+    const second = reverse ? anchorIcon : anchorChildren;
+    const Component = tag;
+    return /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
+      href: adjustedHref,
+      className: classes,
+      "aria-label": a11yTitle,
+      onClick: function onClick(event) {
+        if (disabled) {
+          event.preventDefault();
+        } else if (adjustedOnClick) {
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
+          adjustedOnClick(event, ...args);
+        }
+      }
+    }), first, second);
+  }
+}
+exports.default = Anchor;
+;
+(0, _reactDesc.schema)(Anchor, {
+  description: "A text link. We have a separate component from the browser\n  base so we can style it. You can either set the icon and/or label properties\n  or just use children.",
+  usage: "import Anchor from 'grommet/components/Anchor';\n  <Anchor href={location} label=\"Label\" />",
+  props: {
+    a11yTitle: [_reactDesc.PropTypes.string, 'Accessibility title.'],
+    align: [_reactDesc.PropTypes.oneOf(['start', 'center', 'end']), 'Text alignment.'],
+    animateIcon: [_reactDesc.PropTypes.bool, 'Whether to animate the icon on hover.', {
+      defaultProp: true
+    }],
+    disabled: [_reactDesc.PropTypes.bool, 'Whether to disable the anchor.'],
+    href: [_reactDesc.PropTypes.string, 'Hyperlink reference to place in the anchor. If' + ' `path` prop is provided, `href` prop will be ignored.'],
+    icon: [_reactDesc.PropTypes.element, 'Icon element to place in the anchor.'],
+    id: [_reactDesc.PropTypes.string, 'Anchor identifier.'],
+    label: [_reactDesc.PropTypes.node, 'Label text to place in the anchor.'],
+    method: [_reactDesc.PropTypes.oneOf(['push', 'replace']), 'Valid only when used with path. Indicates whether the browser history' + ' should be appended to or replaced.', {
+      defaultProp: 'push'
+    }],
+    onClick: [_reactDesc.PropTypes.func, 'Click handler.'],
+    path: [_reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.object, _reactDesc.PropTypes.string]), 'React-router path to navigate to when clicked.' + ' Use path={{ path: \'/\', index: true }} if you want the Anchor to be' + ' active only when the index route is current.'],
+    primary: [_reactDesc.PropTypes.bool, 'Whether this is a primary anchor.'],
+    reverse: [_reactDesc.PropTypes.bool, 'Whether an icon and label should be reversed so that the icon is at ' + 'the end of the anchor.'],
+    tag: [_reactDesc.PropTypes.string, 'The DOM tag to use for the element. The default is <a>. This should be' + ' used in conjunction with components like Link from React Router. In' + ' this case, Link controls the navigation while Anchor controls the' + ' styling.', {
+      defaultProp: 'a'
+    }],
+    target: [_reactDesc.PropTypes.string, 'Target of the link.']
+  }
+});
+Anchor.contextTypes = {
+  router: _propTypes.default.object
+};