@modernpoacher/sprockets 0.0.5

package/src/sprockets/index.jsx

@@ -0,0 +1,90 @@
+/**
+ * Sprocket component
+ *
+ * @typedef {import('@modernpoacher/sprockets/sprockets').SprocketProps} SprocketProps
+ */
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import Title from '@modernpoacher/sprockets/components/title'
+import Group from '@modernpoacher/sprockets/components/group'
+
+function onChange () {
+  /* */
+}
+
+export default class Sprocket extends Component {
+  getClassName () {
+    return 'sprocket'
+  }
+
+  /**
+   * @param {SprocketProps} props
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.children !== this.props.children) ||
+      (props.title !== this.props.title) ||
+      (props.onChange !== this.props.onChange)
+    )
+  }
+
+  renderTitle () {
+    const {
+      title
+    } = this.props
+
+    return (
+      <Title
+        title={title}
+      />
+    )
+  }
+
+  renderGroup () {
+    const {
+      onChange,
+      groupRef,
+      children
+    } = this.props
+
+    return (
+      <Group
+        onChange={onChange}
+        groupRef={groupRef}>
+        {this.renderTitle()}
+        {children}
+      </Group>
+    )
+  }
+
+  render () {
+    const className = this.getClassName()
+
+    return (
+      <div className={className}>
+        {this.renderGroup()}
+      </div>
+    )
+  }
+}
+
+Sprocket.propTypes = {
+  title: PropTypes.string,
+  onChange: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(
+      PropTypes.node
+    )
+  ]),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}
+
+Sprocket.defaultProps = {
+  onChange
+}

package/src/sprockets/table/group/index.cjs

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/table/group')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/sprockets/table/group/index.jsx

@@ -0,0 +1,163 @@
+/**
+ * TableGroup component
+ *
+ * @typedef {import('@modernpoacher/sprockets/components/group').GroupProps} GroupProps
+ *
+ * Group state
+ *
+ * @typedef {Object} GroupState
+ * @property {{}} [children]
+ */
+
+import React, { isValidElement } from 'react'
+import PropTypes from 'prop-types'
+
+import classnames from 'classnames'
+
+import Group from '@modernpoacher/sprockets/components/group'
+import Title from '@modernpoacher/sprockets/sprockets/table/title'
+
+function getText ({ text }) {
+  return text
+}
+
+export default class TableGroup extends Group {
+  /**
+   * @type {GroupState}
+   */
+  state = {}
+
+  getClassName () {
+    return classnames(super.getClassName(), 'table')
+  }
+
+  /**
+   *  Compare latest 'props' with 'state' for changes to 'children'
+   *
+   * @param {GroupProps} props   Latest props
+   * @param {GroupState} state   Current state
+   * @returns {{children: {}}}
+   */
+  static getDerivedStateFromProps ({ children: c }, { children: C }) {
+    return {
+      children: (c !== C) ? c : C
+    }
+  }
+
+  /**
+   * Compare latest 'props' with 'state' for changes to 'children'
+   *
+   * @param {GroupProps} props   Latest props
+   * @param {GroupState} state   Current state
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props, state) {
+    const {
+      head: h,
+      body: b
+    } = state
+
+    const {
+      head: H,
+      body: B
+    } = this.state
+
+    return (h !== H) || (b !== B)
+  }
+
+  render () {
+    const {
+      groupRef,
+      title,
+      head,
+      body
+    } = this.props
+
+    if (head.length || body.length) {
+      return (
+        <table
+          className={this.getClassName()}
+          ref={groupRef}>
+          <Title
+            title={title}
+          />
+          {head.length && (
+            <thead>
+              <tr>
+                {head.map(({ text }, i) => (
+                  <th key={i}>
+                    {text}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          {body.length && (
+            <tbody>
+              {body.map((row, i) => (
+                <tr key={i}>
+                  {row.map((item, i) => {
+                    if (i) {
+                      if (isValidElement(item)) {
+                        return (
+                          <td key={i}>
+                            {item}
+                          </td>
+                        )
+                      }
+
+                      return (
+                        <td key={i}>
+                          {getText(item)}
+                        </td>
+                      )
+                    }
+
+                    if (isValidElement(item)) {
+                      return (
+                        <th key={i}>
+                          {item}
+                        </th>
+                      )
+                    }
+
+                    return (
+                      <th key={i}>
+                        {getText(item)}
+                      </th>
+                    )
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          )}
+        </table>
+      )
+    }
+
+    return null
+  }
+}
+
+TableGroup.propTypes = {
+  title: PropTypes.string,
+  head: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string.isRequired
+    })
+  ),
+  body: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        text: PropTypes.string.isRequired
+      })
+    )
+  ),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}
+
+TableGroup.defaultProps = {
+  ...Group.defaultProps
+}

package/src/sprockets/table/index.cjs

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/table')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/sprockets/table/index.jsx

@@ -0,0 +1,91 @@
+/**
+ * TableSprocket component
+ *
+ * @typedef {import('@modernpoacher/sprockets/sprockets').SprocketProps} SprocketProps
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import classnames from 'classnames'
+
+import Sprocket from '@modernpoacher/sprockets/sprockets'
+import Group from './group/index.jsx'
+
+export default class TableSprocket extends Sprocket {
+  getClassName () {
+    return classnames(super.getClassName(), 'table')
+  }
+
+  /**
+   * @param {SprocketProps} props
+   * @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    return (
+      (props.title !== this.props.title) ||
+      (props.head !== this.props.head) ||
+      (props.body !== this.props.body)
+    )
+  }
+
+  renderGroup () {
+    const {
+      groupRef,
+      title,
+      head,
+      body
+    } = this.props
+
+    return (
+      <Group
+        groupRef={groupRef}
+        title={title}
+        head={head}
+        body={body}
+      />
+    )
+  }
+
+  render () {
+    const {
+      head,
+      body
+    } = this.props
+
+    if (head.length || body.length) {
+      return (
+        <div className={this.getClassName()}>
+          {this.renderGroup()}
+        </div>
+      )
+    }
+
+    return null
+  }
+}
+
+TableSprocket.propTypes = {
+  title: PropTypes.string,
+  head: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string.isRequired
+    })
+  ),
+  body: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        text: PropTypes.string.isRequired
+      })
+    )
+  ),
+  groupRef: PropTypes.shape({
+    current: PropTypes.shape().isRequired
+  })
+}
+
+TableSprocket.defaultProps = {
+  ...Sprocket.defaultProps,
+  head: [],
+  body: []
+}

package/src/sprockets/table/title/index.cjs

@@ -0,0 +1,17 @@
+require('@babel/register')({
+  ignore: [
+    /node_modules\/(?!@modernpoacher\/cogs|@modernpoacher\/sprockets)/
+  ]
+})
+
+const debug = require('debug')
+
+const log = debug('@modernpoacher/sprockets/sprockets/table/title')
+
+log('`sprockets` is awake')
+
+const {
+  default: component
+} = require('./index.jsx')
+
+module.exports = component

package/src/sprockets/table/title/index.jsx

@@ -0,0 +1,33 @@
+/**
+ * TableTitle component
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import Title from '@modernpoacher/sprockets/components/title'
+
+export default class TableTitle extends Title {
+  getClassName () {
+    return classnames(super.getClassName(), 'table')
+  }
+
+  render () {
+    if (this.hasTextContent()) {
+      return (
+        <caption className={this.getClassName()}>
+          {this.renderTextContent()}
+        </caption>
+      )
+    }
+
+    return null
+  }
+}
+
+TableTitle.propTypes = {
+  ...Title.propTypes
+}
+
+TableTitle.defaultProps = {
+  ...Title.defaultProps
+}