@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/ItemList/ItemListController.js

@@ -1,34 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import ItemListContext from './ItemListContext'
-
-class ItemListController extends Component {
-  highlightedItemId = null
-
-  componentDidMount() {
-    this.unsubsribeController = this.itemList.subscribeController(this)
-  }
-
-  componentWillUnmount() {
-    this.unsubsribeController()
-  }
-
-  render() {
-    return (
-      <ItemListContext.Consumer>
-        {(itemList) => {
-          if (!this.itemList) {
-            this.itemList = itemList
-          }
-          return this.props.children({
-            ...itemList,
-            highlightedItemId: this.highlightedItemId,
-          })
-        }}
-      </ItemListContext.Consumer>
-    )
-  }
-}
-
-export default ItemListController

package/src/ItemList/ItemListItem.js

@@ -1,88 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import ItemListContext from './ItemListContext'
-
-type Props = {
-  /**
-   * The position of the item in the list. Used for highlighting items with the keyboard.
-   */
-  index: number,
-  /**
-   * Data associated with this item that is provided in `ItemList` `onSelect`.
-   */
-  data?: any,
-  /**
-   * Disables the item from being selected or highlighted.
-   */
-  disabled?: boolean,
-}
-
-class ItemListItem extends Component<Props> {
-  node = null
-
-  highlighted = false
-
-  componentDidMount() {
-    this.setNode()
-    this.unsubscribeItem = this.itemList.subscribeItem(this)
-  }
-
-  componentDidUpdate(lastProps) {
-    if (lastProps.index !== this.props.index) {
-      // sort items array since index has changed and is now misplaced
-      this.itemList.items.sort((a, b) => a.props.index - b.props.index)
-      this.setNode()
-    }
-  }
-
-  componentWillUnmount() {
-    this.unsubscribeItem()
-  }
-
-  setNode() {
-    this.node = document.getElementById(
-      this.itemList.getItemId(this.props.index)
-    )
-  }
-
-  getNode() {
-    return this.node
-  }
-
-  highlight = () => {
-    if (!this.props.disabled) {
-      this.itemList.setHighlightedIndex(this.props.index, {
-        maybeScrollIntoView: false,
-      })
-    }
-  }
-
-  select = () => {
-    if (!this.props.disabled) {
-      this.itemList.selectItem(this.props.index)
-    }
-  }
-
-  render() {
-    return (
-      <ItemListContext.Consumer>
-        {(itemList) => {
-          if (!this.itemList) {
-            this.itemList = itemList
-          }
-          return this.props.children({
-            id: itemList.getItemId(this.props.index),
-            clearHighlight: itemList.clearHighlightedIndex,
-            highlight: this.highlight,
-            highlighted: this.highlighted,
-            select: this.select,
-            selected: itemList.isItemSelected(this.props.data),
-          })
-        }}
-      </ItemListContext.Consumer>
-    )
-  }
-}
-
-export default ItemListItem

package/src/ItemList/index.js

@@ -1,5 +0,0 @@
-import ItemList from './ItemList'
-import ItemListController from './ItemListController'
-import ItemListItem from './ItemListItem'
-
-export { ItemList, ItemListController, ItemListItem }

package/src/ItemList/utils.js

@@ -1,58 +0,0 @@
-import { getClosestViewport } from '../utils'
-
-export function isNumberKey(event) {
-  return event.keyCode >= 48 && event.keyCode <= 57
-}
-
-export function isLetterKey(event) {
-  return event.keyCode >= 65 && event.keyCode <= 90
-}
-
-export function isSpecialKey(event) {
-  return event.keyCode >= 188 && event.keyCode <= 190
-}
-
-export function isComboKey(event) {
-  return event.ctrlKey || event.metaKey || event.altKey
-}
-
-export function modulo(val, max) {
-  return val >= 0 ? val % max : ((val % max) + max) % max
-}
-
-export function scroller(node) {
-  if (node === document.body) {
-    return {
-      offsetTop: 0,
-      scrollY: window.pageYOffset,
-      height: window.innerHeight,
-      setPosition: (top) => window.scrollTo(0, top),
-    }
-  } else {
-    return {
-      offsetTop: node.getBoundingClientRect().top,
-      scrollY: node.scrollTop,
-      height: node.offsetHeight,
-      setPosition: (top) => (node.scrollTop = top),
-    }
-  }
-}
-
-export function scrollIntoView(node) {
-  const scrollParent = scroller(getClosestViewport(node))
-  if (scrollParent === null) {
-    return
-  }
-  const nodeRect = node.getBoundingClientRect()
-  const nodeTop = scrollParent.scrollY + (nodeRect.top - scrollParent.offsetTop)
-  if (nodeTop < scrollParent.scrollY) {
-    // the item is above the scrollable area
-    scrollParent.setPosition(nodeTop)
-  } else if (
-    nodeTop + nodeRect.height >
-    scrollParent.scrollY + scrollParent.height
-  ) {
-    // the item is below the scrollable area
-    scrollParent.setPosition(nodeTop + nodeRect.height - scrollParent.height)
-  }
-}

package/src/Link/Inline.js

@@ -1,32 +0,0 @@
-import React from 'react'
-
-import Link from './Link'
-
-function Inline({ light, hover, focus, readOnly, ...restProps }) {
-  const pseudoStyles =
-    restProps.readOnly || restProps.disabled
-      ? {}
-      : { backgroundColor: light ? 'light-0' : 'dark-0' }
-  if (!restProps.disabled && (hover || focus)) {
-    restProps = {
-      ...restProps,
-      ...pseudoStyles,
-    }
-  }
-  return (
-    <Link
-      underline={false}
-      paddingLeft={0.5}
-      marginHorizontal={-0.5}
-      stroke={false}
-      backgroundColor="transparent"
-      color={light ? 'light-9' : 'dark-9'}
-      hover={pseudoStyles}
-      focus={pseudoStyles}
-      readOnly={readOnly}
-      {...restProps}
-    />
-  )
-}
-
-export default Inline

package/src/Link/Link.js

@@ -1,83 +0,0 @@
-// @flow
-import React from 'react'
-
-import Text from '../Text'
-
-type Props = {
-  /**
-   * Where the browser should navigate to when pressed.
-   */
-  to: boolean,
-
-  /**
-   * Opens the linked destination in a new window or tab.
-   */
-  external: boolean,
-
-  /**
-   * The color of the link.
-   */
-  color: string,
-
-  /**
-   * Show an underline when hovering link. Defaults to `true`.
-   */
-  underline: boolean,
-
-  /**
-   * Accepts hover styles.
-   */
-  hover?: object,
-
-  /**
-   * Accepts hover styles.
-   */
-  focus?: object,
-}
-
-function Link({
-  to,
-  color = 'linkForeground',
-  external,
-  underline = true,
-  hover,
-  focus,
-  ...restProps
-}: Props) {
-  const props = {
-    display: 'inline-block',
-    position: 'relative',
-    hover: { color, ...hover },
-    focus: { color, ...focus },
-    color,
-  }
-  if (restProps.disabled) {
-    props.cursor = 'not-allowed'
-    props.opacity = 0.64
-  } else {
-    props.cursor = 'pointer'
-    if (to) {
-      props.as = 'a'
-      props.href = to
-    }
-    if (external) {
-      props.rel = 'noopener noreferrer'
-      props.target = '_blank'
-    }
-    if (underline) {
-      props.hover = {
-        color,
-        textDecoration: 'underline',
-        ...hover,
-      }
-      props.focus = {
-        color,
-        textDecoration: 'underline',
-        ...focus,
-      }
-    }
-  }
-  return <Text {...props} {...restProps} />
-}
-
-export default Link

package/src/Link/Link.mdx

@@ -1,32 +0,0 @@
----
-title: Link
-category: General
-propsSummary: Accepts [Text](/text) props.
----
-
-```jsx live
-render(
-  <Link to="https://www.google.com" external>
-    Google
-  </Link>
-)
-```
-
-```jsx live
-render(
-  <StackView
-    axis="horizontal"
-    alignment="center"
-    padding={1}
-    backgroundColor="primary"
-    spacing={<Icon name="general.rightChevron" size="xs" color="white" marginHorizontal={0.5} />}
-  >
-    <Link to="#" color="white">
-      First Church Of Carlsbad
-    </Link>
-    <Link to="#" color="white">
-      Sunday
-    </Link>
-  </StackView>
-)
-```

package/src/Link/index.js

@@ -1,4 +0,0 @@
-import Link from './Link'
-import Inline from './Inline'
-Link.Inline = Inline
-export default Link

package/src/LinkList/LinkList.js

@@ -1,31 +0,0 @@
-// @flow
-import React from 'react'
-
-import Divider from '../Divider'
-import Link from '../Link'
-import StackView from '../StackView'
-
-type Props = {
-  /** Accepts an array of objects that specify the `name` and `url` for each link.  */
-  links?: array,
-}
-
-function LinkList({ links, ...restProps }: Props) {
-  return (
-    <StackView
-      axis="horizontal"
-      alignment="center"
-      spacing={<Divider axis="vertical" margin={1} color="grey-6" />}
-      wrap
-      {...restProps}
-    >
-      {links.map((link) => (
-        <Link key={link.url} to={link.url}>
-          {link.name}
-        </Link>
-      ))}
-    </StackView>
-  )
-}
-
-export default LinkList

package/src/LinkList/LinkList.mdx

@@ -1,30 +0,0 @@
----
-title: LinkList
-category: General
-propsSummary: Accepts [StackView](/stackview) props.
----
-
-```jsx live
-render(
-  <LinkList
-    links={[
-      {
-        name: 'Twitter',
-        url: 'http://twitter.com',
-      },
-      {
-        name: 'Facebook',
-        url: 'http://facebook.com',
-      },
-      {
-        name: 'Google',
-        url: 'http://google.com',
-      },
-      {
-        name: 'Snapchat',
-        url: 'http://snapchat.com',
-      },
-    ]}
-  />
-)
-```

package/src/LinkList/index.js

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

package/src/List/List.js

@@ -1,75 +0,0 @@
-// @flow
-import React from 'react'
-
-import StackView from '../StackView'
-import { cloneChildren } from '../utils'
-
-import ListItem from './ListItem'
-
-type Props = {
-  /** Can accept any HTML element or custom component, but most often takes the `List.Item` component. */
-  children?: React.ReactNode,
-
-  /** When set this will add a 1px border top and bottom, along with the `borderColor`.  */
-  border?: Boolean,
-
-  /** Defaults to "separatorTertiary".  */
-  borderColor?: string,
-
-  /** Adds a dividing line between the List's children. (Defaults to true).  */
-  divider?: Boolean,
-
-  /** Defaults to "separatorTertiary".  */
-  dividerColor?: string,
-
-  /**
-   * `(index) => {}`
-   *
-   * Passes a callback function to the list's children. If the child is `List.Item` it will display a remove button and execute the callback.  */
-  onItemRemoveRequest?: Function,
-}
-
-function List({
-  border,
-  borderColor = 'separatorTertiary',
-  children,
-  divider = true,
-  dividerColor = 'separatorTertiary',
-  onItemRemoveRequest,
-  ...restProps
-}: Props) {
-  if (border) {
-    restProps.borderTopWidth = 1
-    restProps.borderTopColor = borderColor
-    restProps.borderBottomWidth = 1
-    restProps.borderBottomColor = borderColor
-  }
-  return (
-    <StackView {...restProps}>
-      {cloneChildren(children, (child, { index, lastChild }) => {
-        const childProps =
-          divider && !lastChild
-            ? {
-                borderBottomWidth: 1,
-                borderBottomColor: dividerColor,
-              }
-            : {}
-        if (onItemRemoveRequest || child.props.onRemoveRequest) {
-          childProps.onRemoveRequest = () => {
-            if (onItemRemoveRequest) {
-              onItemRemoveRequest(index)
-            }
-            if (child.props.onRemoveRequest) {
-              child.props.onRemoveRequest(index)
-            }
-          }
-        }
-        return childProps
-      })}
-    </StackView>
-  )
-}
-
-List.Item = ListItem
-
-export default List

package/src/List/List.mdx

@@ -1,42 +0,0 @@
----
-title: List
-category: General
-propsSummary: Accepts [StackView](/stackview) props.
----
-
-```jsx live
-render(() => {
-  const [open, setOpen] = React.useState(false)
-  return (
-    <Card padding={2}>
-      <Toolbar
-        title={<Heading level={3}>Title</Heading>}
-        helpContent="Toolbars need help too"
-        actions={
-          <Button
-            title={open ? 'Done' : 'Add'}
-            onClick={() => setOpen(!open)}
-          />
-        }
-        marginBottom={1}
-      />
-      <Collapse open={open} lazy>
-        <Combobox.Popover autoFocus>
-          <Combobox.Item>Item 1</Combobox.Item>
-          <Combobox.Item>Item 2</Combobox.Item>
-          <Combobox.Item>Item 3</Combobox.Item>
-        </Combobox.Popover>
-      </Collapse>
-      <Card
-        as={List}
-        marginTop={1}
-        onItemRemoveRequest={(index) => alert('Delete item at index ' + index)}
-      >
-        <List.Item>One</List.Item>
-        <List.Item>Two</List.Item>
-        <List.Item>Three</List.Item>
-      </Card>
-    </Card>
-  )
-})
-```

package/src/List/ListItem.js

@@ -1,41 +0,0 @@
-import React from 'react'
-
-import Button from '../Button'
-import StackView from '../StackView'
-import { useHover } from '../hooks'
-
-function ListItem({
-  children,
-  onRemoveRequest,
-  removeTitle = 'Remove item',
-  ...restProps
-}) {
-  const { hover, hoverProps } = useHover()
-  return (
-    <StackView
-      axis="horizontal"
-      alignment="center"
-      distribution="space-between"
-      padding={1}
-      backgroundColor="surface"
-      {...hoverProps}
-      {...restProps}
-    >
-      {children}
-      {onRemoveRequest && (
-        <Button
-          icon={{ name: 'general.minusCircle' }}
-          title={removeTitle}
-          size="sm"
-          theme="error"
-          variant="naked"
-          marginLeft={1}
-          opacity={hover ? 1 : 0}
-          onClick={onRemoveRequest}
-        />
-      )}
-    </StackView>
-  )
-}
-
-export default ListItem

package/src/List/index.js

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