@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/Field/Field.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+
+import Box from '../Box'
+import HelperDrawer from '../HelperDrawer'
+import Input from '../Input'
+import Text from '../Text'
+import StackView from '../StackView'
+import { cloneChildren, generateId } from '../utils'
+import { useThemeProps } from '../system'
+
+type FieldProps = {
+  /** Usually accepts form fields, such as `input` or `select`. */
+  children?: React.ReactNode
+
+  /** Gain access to the internal ref. */
+  innerRef?: React.Ref<any>
+
+  /** Label that describes field[s]. */
+  label?: string | React.ReactNode
+
+  /** Label color. */
+  labelColor?: string
+
+  /** Label flex basis. */
+  labelBasis?: string | number
+
+  /** Label flex grow. */
+  labelGrow?: string | number
+
+  /** Renders label and field[s] inline. */
+  inline?: boolean
+
+  /** Renders label and field[s] smaller. */
+  compact?: boolean
+
+  /** Renders content into a [HelperDrawer](/helperdrawer) next to label. */
+  helpContent?: string | React.ReactNode
+
+  /** Helpful text to accompany fields. */
+  feedbackText?: string
+
+  /** Controls spacing between fields. */
+  spacing?: number
+
+  /** Controls distribution between fields, by [passing this prop to StackView](/stackview#distribution). (Defaults to "fill".) */
+  distribution?: number
+
+  /** State of field[s]. */
+  state?: 'success' | 'error'
+
+  /** Places an icon to the left of the label. */
+  icon?: any
+}
+
+const Field = ({ ...props }: FieldProps) => {
+  const {
+    children,
+    compact,
+    distribution = 'fill',
+    feedbackText,
+    helpContent,
+    icon,
+    inline,
+    innerRef,
+    label,
+    labelBasis,
+    labelColor,
+    labelGrow,
+    spacing = 1,
+    state,
+    ...restProps
+  } = useThemeProps('field', props)
+  const helperDrawerId = generateId('field-helper-drawer')
+  const fieldId = generateId('field')
+  return (
+    <Box innerRef={innerRef} width="100%" {...restProps}>
+      <StackView axis={inline ? 'horizontal' : 'vertical'} wrap>
+        {label && (
+          <StackView
+            axis="horizontal"
+            alignment="center"
+            grow={labelGrow}
+            basis={labelBasis}
+            marginRight={inline ? 2 : undefined}
+          >
+            {icon}
+
+            <Input.InputLabel
+              controls={fieldId}
+              fontSize={compact ? 4 : 3}
+              color={labelColor}
+            >
+              {label}
+            </Input.InputLabel>
+
+            {helpContent && (
+              <HelperDrawer.Toggle
+                drawerId={helperDrawerId}
+                marginLeft={0.25}
+                marginRight={inline ? 1 : undefined}
+              />
+            )}
+          </StackView>
+        )}
+
+        {helpContent && (
+          <StackView axis="horizontal" order={inline ? 1 : 0} width="100%">
+            <HelperDrawer
+              id={helperDrawerId}
+              marginTop={1}
+              children={helpContent}
+            />
+          </StackView>
+        )}
+
+        <StackView
+          axis="horizontal"
+          alignment="center"
+          distribution={distribution}
+          order={inline ? 0 : 1}
+          grow={1}
+          marginTop={inline || !label ? undefined : 1}
+          maxWidth="100%"
+          spacing={spacing}
+        >
+          {cloneChildren(children, (child, { firstChild }) =>
+            firstChild
+              ? {
+                  id: fieldId,
+                  size: child.props.size || (compact ? 'sm' : 'md'),
+                }
+              : {
+                  size: child.props.size || (compact ? 'sm' : 'md'),
+                }
+          )}
+        </StackView>
+      </StackView>
+
+      {feedbackText && (
+        <Text marginTop={1} color={state} align={inline ? 'right' : 'left'}>
+          {feedbackText}
+        </Text>
+      )}
+    </Box>
+  )
+}
+
+export default Field

package/src/Field/index.js

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

package/src/FieldSet/FieldSet.mdx

@@ -0,0 +1,26 @@
+---
+title: FieldSet
+category: Forms
+summary: Used to group several controls as well as labels within a web form.
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: fieldSet
+---
+
+```jsx live
+render(
+  <Card width={40}>
+    <FieldSet legend="General">
+      <Checkbox label="Titles" />
+      <Checkbox label="Service Times" />
+      <Checkbox label="Item Lengths" />
+    </FieldSet>
+
+    <FieldSet legend="Item Types">
+      <Checkbox label="Regular Items" />
+      <Checkbox label="Media" />
+      <Checkbox label="Songs" />
+      <Checkbox label="Headers" />
+    </FieldSet>
+  </Card>
+)
+```

package/src/FieldSet/FieldSet.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+
+import Heading, { HeadingProps } from '../Heading'
+import StackView from '../StackView'
+import TileView, { TileViewProps } from '../TileView'
+import Toolbar, { ToolbarProps } from '../Toolbar'
+import { useThemeProps } from '../system'
+
+type FieldSetProps = {
+  children?: React.ReactNode
+
+  /**
+   * Accepts any valid [Heading](/heading) props.
+   */
+  headingProps?: HeadingProps
+
+  /**
+   * Maps to internal `Toolbar` prop.
+   */
+  helpContent: ToolbarProps['helpContent']
+
+  /**
+   * Title of fieldset group.
+   */
+  legend: string
+
+  /**
+   * Maps to internal `TileView` prop.
+   */
+  minCellWidth: TileViewProps['minCellWidth']
+
+  /**
+   * Maps to internal `TileView` prop.
+   */
+  spacing: TileViewProps['spacing']
+
+  /**
+   * Accepts any valid [TileView](/tileview) props.
+   */
+  tileViewProps?: TileViewProps
+}
+
+const FieldSet = ({
+  children,
+  helpContent,
+  legend,
+  ...restProps
+}: FieldSetProps) => {
+  const {
+    headingProps,
+    minCellWidth = 16,
+    spacing = 1,
+    tileViewProps,
+    ...themeProps
+  } = useThemeProps('fieldset', { ...restProps })
+
+  return (
+    <StackView
+      as="fieldset"
+      margin={2}
+      padding={0}
+      {...themeProps}
+      {...restProps}
+    >
+      <Toolbar
+        helpContent={helpContent}
+        marginBottom={1}
+        title={
+          <Heading as="legend" level={4} {...headingProps}>
+            {legend}
+          </Heading>
+        }
+      />
+      <TileView
+        minCellWidth={minCellWidth}
+        spacing={spacing}
+        {...tileViewProps}
+      >
+        {children}
+      </TileView>
+    </StackView>
+  )
+}
+
+export default FieldSet

package/src/FieldSet/index.js

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

package/src/FilterLayout/FilterLayout.mdx

@@ -0,0 +1,34 @@
+---
+title: FilterLayout
+category: General
+summary: Used to display a filterable content area. Use with [DataTable](/datatable).
+propsSummary: Accepts [Card](/card) props.
+---
+
+```jsx live
+render(
+  <FilterLayout
+    sidebarWidth={224}
+    header={<Box padding={2}>HEADER</Box>}
+    sidebar={<Box padding={2}>SIDEBAR</Box>}
+    toolbar={<Box padding={2}>TOOLBAR</Box>}
+    table={<Box padding={2}>TABLE</Box>}
+  />
+)
+```
+
+## Condensed
+
+```jsx live
+render(
+  <StackView width={40}>
+    <FilterLayout
+      sidebarWidth="fill"
+      header={<Box padding={2}>HEADER</Box>}
+      sidebar={<Box padding={2}>SIDEBAR</Box>}
+      toolbar={<Box padding={2}>TOOLBAR</Box>}
+      table={<Box padding={2}>TABLE</Box>}
+    />
+  </StackView>
+)
+```

package/src/FilterLayout/FilterLayout.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import Mousetrap from 'mousetrap'
+
+import Box from '../Box'
+import Button from '../Button'
+import Card from '../Card'
+import Divider from '../Divider'
+import StackView from '../StackView'
+
+export type Props = {
+  /** Render slot for header. */
+  header?: any
+
+  /** Render slot for sidebar. */
+  sidebar?: any
+
+  /** Size of sidebar in pixels or `fill` for full width when open. */
+  sidebarWidth?: number | 'fill'
+
+  /** Render slot for table. */
+  table?: any
+
+  /** Render slot for toolbar. */
+  toolbar?: any
+}
+
+export function FilterLayout(props: Props) {
+  const {
+    header,
+    sidebarWidth = 400,
+    sidebar,
+    table,
+    toolbar,
+    ...restProps
+  } = props
+  const fill = sidebarWidth === 'fill'
+  const [sidebarOpen, setSidebarOpen] = React.useState(false)
+  const toggleSidebar = React.useCallback(() => {
+    setSidebarOpen((sidebarOpen) => !sidebarOpen)
+  }, [])
+  React.useEffect(() => {
+    Mousetrap.bind('f', toggleSidebar)
+    return () => {
+      Mousetrap.unbind('f')
+    }
+  }, [])
+  return (
+    <Card minHeight={50} overflow={undefined} {...restProps}>
+      <StackView axis="horizontal" minHeight={6}>
+        <Button
+          grow={0}
+          shrink={0}
+          basis={sidebarOpen ? (fill ? '100%' : sidebarWidth + 'px') : '100px'}
+          distribution={sidebarOpen ? 'space-between' : undefined}
+          width="100%"
+          paddingHorizontal={2}
+          borderRightWidth={1}
+          borderRightColor="separatorTertiary"
+          radius={0}
+          title="Filter"
+          aria-label={sidebarOpen ? 'close filter' : 'open filter'}
+          iconRight={{
+            name: sidebarOpen
+              ? 'general.leftChevron'
+              : 'general.threeReducingHorizontalBars',
+            size: sidebarOpen ? 'xs' : 'md',
+          }}
+          onClick={toggleSidebar}
+        />
+        <Box visible={!(sidebarOpen && fill)} grow={1} shrink={1}>
+          {header}
+        </Box>
+      </StackView>
+      <Divider />
+      <StackView axis="horizontal" grow={1}>
+        <StackView
+          visible={sidebarOpen}
+          basis={fill ? '100%' : sidebarWidth + 'px'}
+          borderRightWidth={1}
+          borderRightColor="separatorTertiary"
+          backgroundColor="surfaceSecondary"
+        >
+          {sidebar}
+        </StackView>
+        <StackView
+          visibility={sidebarOpen && fill ? 'hidden' : 'visible'}
+          maxHeight={sidebarOpen && fill ? 0 : 'initial'}
+          grow={1}
+          shrink={1}
+          basis="100%"
+        >
+          <Box overflow="hidden">{toolbar}</Box>
+          <Divider />
+          {table}
+        </StackView>
+      </StackView>
+    </Card>
+  )
+}

package/src/FilterLayout/index.ts

@@ -0,0 +1,2 @@
+export * from './FilterLayout'
+export { FilterLayout as default } from './FilterLayout'

package/src/FocusGroup/FocusGroup.js

@@ -0,0 +1,93 @@
+import React, { Component, createContext } from 'react'
+
+import { getClosestFocusableElement } from '../utils'
+
+const SetRefContext = createContext()
+
+class FocusGroup extends Component {
+  static defaultProps = {
+    onBlur: () => null,
+  }
+
+  static contextType = SetRefContext
+
+  nodes = {}
+
+  setRef = (id) => (node) => {
+    if (this.context) {
+      this.context(id)(node)
+    }
+    if (node) {
+      this.nodes[id] = node
+    } else {
+      delete this.nodes[id]
+    }
+  }
+
+  isElementOutside = (target) => {
+    return Object.values(this.nodes).every(
+      (node) => node !== target && !node.contains(target)
+    )
+  }
+
+  maybeRestoreFocus = (nextFocusedElement, event) => {
+    const focusableElement = nextFocusedElement
+      ? getClosestFocusableElement(nextFocusedElement.parentNode)
+      : null
+
+    if (focusableElement) {
+      const observer = new MutationObserver((mutationsList) => {
+        for (let mutation of mutationsList) {
+          if (
+            mutation.type === 'childList' &&
+            mutation.removedNodes.length > 0
+          ) {
+            const removedElement = mutation.removedNodes[0]
+            if (
+              removedElement === nextFocusedElement &&
+              focusableElement.focus
+            ) {
+              const previousScrollY = window.pageYOffset
+              focusableElement.focus()
+              if (this.isElementOutside(focusableElement)) {
+                this.props.onBlur(event)
+              }
+              setTimeout(() => {
+                window.scroll(0, previousScrollY)
+              })
+            }
+          }
+        }
+      })
+
+      observer.observe(nextFocusedElement.parentNode, { childList: true })
+
+      setTimeout(() => {
+        observer.disconnect()
+      }, 800)
+    }
+  }
+
+  requestBlur = (event) => {
+    const nextFocusedElement = event.relatedTarget || document.activeElement
+
+    this.maybeRestoreFocus(nextFocusedElement, event)
+
+    if (this.isElementOutside(nextFocusedElement)) {
+      this.props.onBlur(event)
+    }
+  }
+
+  render() {
+    return (
+      <SetRefContext.Provider value={this.setRef}>
+        {this.props.children({
+          setRef: this.setRef,
+          requestBlur: this.requestBlur,
+        })}
+      </SetRefContext.Provider>
+    )
+  }
+}
+
+export default FocusGroup

package/src/FocusGroup/index.js

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

package/src/Form/Form.js

@@ -0,0 +1,189 @@
+// @flow
+import * as React from 'react'
+
+import { shallowEqual } from '../utils'
+
+type Props = {
+  /**
+   * The initial data to seed the form with. Used to determine
+   * previous state when a cancel action occurs as well as if the
+   * form should submit or not. This can be passed new data
+   * (like updating from `onSubmit`). Use a simple data structure
+   * to avoid false positives when the previous and initial payload
+   * are compared to determine calling `onSubmit`.
+   */
+  initialPayload: Object<any>,
+
+  /**
+   * Called whenever a submit action occurs (enter key / form blur)
+   * and the form has a different internal payload compared to
+   * the `initialPayload`.
+   *
+   * `payload`
+   *
+   * The newly edited `payload` that should be submitted.
+   *
+   * `complete`
+   *
+   * Call whenever the form is done completing to re-enable the form.
+   */
+  onSubmit: (payload: Object<any>, complete: () => void) => void,
+
+  /**
+   * `isEditing`
+   *
+   * Toggled by trigger or focusing/blurring a field.
+   *
+   * `isSubmitting`
+   *
+   * True when a submit action occurs either from the enter key or
+   * blurring the form with different data from `initialPayload`.
+   *
+   * `editButtonProps`
+   *
+   * Provides the proper props and callbacks to toggle editing
+   * mode and show a spinner when submitting. Must be passed to
+   * a [Button](/button) component.
+   *
+   * `getFieldProps`
+   *
+   * Accepts an `id` as the first argument that maps to the respective
+   * field key in `initialPayload`. It also receives a `getChangeValue`
+   * function as the second argument used to resolve the value when
+   * dealing with non traditional events like `Select` or `NumberField`.
+   */
+  children: (props: {
+    isEditing: boolean,
+    isSubmitting: boolean,
+    editButtonProps: Object,
+    getFieldProps: (id: any) => Object,
+  }) => React.Node,
+}
+
+class Form extends React.Component<Props> {
+  state = {
+    isEditing: false,
+    isSubmitting: false,
+    payload: this.props.initialPayload,
+  }
+
+  submitTimeoutId = null
+
+  startSubmitTimeout = () => {
+    this.submitTimeoutId = setTimeout(this.handleSubmit)
+  }
+
+  clearSubmitTimeout = () => {
+    clearTimeout(this.submitTimeoutId)
+    this.submitTimeoutId = null
+  }
+
+  componentDidUpdate(lastProps) {
+    if (!shallowEqual(lastProps.initialPayload, this.props.initialPayload)) {
+      this.setState({
+        payload: this.props.initialPayload,
+      })
+    }
+  }
+
+  handleEditing = () => {
+    this.setState({ isEditing: true })
+    if (this.focusable) {
+      this.focusable.focus()
+    }
+  }
+
+  handleReset = () => {
+    this.setState({
+      isEditing: false,
+      payload: this.props.initialPayload,
+    })
+  }
+
+  handleSubmit = () => {
+    if (
+      JSON.stringify(this.props.initialPayload) ===
+      JSON.stringify(this.state.payload)
+    ) {
+      this.setState({ isEditing: false }, this.clearSubmitTimeout)
+    } else {
+      let timeoutId = setTimeout(() => {
+        this.setState({ isEditing: false, isSubmitting: true })
+      })
+      this.props.onSubmit(this.state.payload, () => {
+        clearTimeout(timeoutId)
+        this.clearSubmitTimeout()
+        this.setState({ isSubmitting: false })
+      })
+    }
+  }
+
+  storeFocusRef = (node) => {
+    if (!this.focusable) {
+      this.focusable = node
+    }
+  }
+
+  render() {
+    const { isEditing, isSubmitting, payload } = this.state
+    return this.props.children({
+      ...this.state,
+      editButtonProps: {
+        disabled: isSubmitting,
+        icon: isEditing ? undefined : { name: 'general.pencil' },
+        onClick: () => {
+          // bail out if we've already triggered a submit in onBlur
+          if (this.submitTimeoutId === null) {
+            if (isEditing) {
+              this.handleSubmit()
+            } else {
+              this.handleEditing()
+            }
+          }
+        },
+        spinner: isSubmitting,
+        title: isEditing ? 'Save' : 'Edit',
+        tooltip: isEditing
+          ? isSubmitting
+            ? { title: 'Saving' }
+            : undefined
+          : { title: 'Edit' },
+      },
+      getFieldProps: (key, getChangeValue = (event) => event.target.value) => ({
+        innerRef: this.storeFocusRef,
+        disabled: isSubmitting,
+        hover: isEditing,
+        value: payload[key],
+        onFocus: () => {
+          this.clearSubmitTimeout()
+          this.setState({ isEditing: true })
+        },
+        onBlur: () => {
+          this.startSubmitTimeout()
+        },
+        onChange: (event) => {
+          const nextValue = getChangeValue(event)
+          this.setState((state) => {
+            return {
+              payload: {
+                ...state.payload,
+                [key]: nextValue,
+              },
+            }
+          })
+        },
+        onKeyDown: (event) => {
+          if (event.key === 'Enter' || event.key === 'Escape') {
+            event.preventDefault()
+            event.target.blur()
+            if (event.key === 'Escape') {
+              this.handleReset()
+            }
+          }
+        },
+      }),
+    })
+  }
+}
+
+export default Form