@modernpoacher/gremlins 0.0.311 → 1.0.1

package/src/gremlins/index.jsx

@@ -1,291 +0,0 @@
-/**
- * GroupGremlin component
- *
- * @typedef {import('@modernpoacher/gremlins/gremlins').GroupGremlinProps} GroupGremlinProps
- */
-/**
- * FieldGremlin component
- *
- * @typedef {import('@modernpoacher/gremlins/gremlins').FieldGremlinProps} FieldGremlinProps
- */
-
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import {
-  DEFAULT_HANDLE_CHANGE,
-  DEFAULT_HANDLE_CLICK
-} from '#gremlins/common'
-
-import Field, {
-  ValueField,
-  CheckField
-} from '#gremlins/components/field'
-
-import Group from '#gremlins/components/group'
-
-export class FieldGremlin extends Component {
-  getClassName () {
-    const {
-      required = false,
-      disabled = false,
-      readOnly = false
-    } = this.props
-
-    return classnames('gremlin', { required, disabled, readOnly })
-  }
-
-  getId () {
-    const {
-      id,
-      name
-    } = this.props
-
-    return id || name
-  }
-
-  /**
-   * @param {FieldGremlinProps} props
-   * @returns {boolean}
-   */
-  shouldComponentUpdate (props, state) {
-    return (
-      (props.name !== this.props.name) ||
-      (props.id !== this.props.id) ||
-      (props.required !== this.props.required) ||
-      (props.disabled !== this.props.disabled) ||
-      (props.readOnly !== this.props.readOnly) ||
-      (props.tabIndex !== this.props.tabIndex) ||
-      (props.accessKey !== this.props.accessKey) ||
-      (props.placeholder !== this.props.placeholder) ||
-      (props.onChange !== this.props.onChange)
-    )
-  }
-
-  renderField () {
-    const id = this.getId()
-
-    const {
-      name,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      placeholder,
-      onChange = DEFAULT_HANDLE_CHANGE,
-      fieldRef
-    } = this.props
-
-    return (
-      <Field
-        id={id}
-        name={name}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        placeholder={placeholder}
-        onChange={onChange}
-        fieldRef={fieldRef}
-      />
-    )
-  }
-
-  render () {
-    const className = this.getClassName()
-
-    return (
-      <div className={className}>
-        {this.renderField()}
-      </div>
-    )
-  }
-}
-
-FieldGremlin.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  fieldRef: PropTypes.shape({
-    current: PropTypes.shape().isRequired
-  })
-}
-
-FieldGremlin.defaultProps = {
-  required: false,
-  disabled: false,
-  readOnly: false,
-  onChange: DEFAULT_HANDLE_CHANGE
-}
-
-export class ValueGremlin extends FieldGremlin {
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props) ||
-      (props.value !== this.props.value)
-    )
-  }
-
-  renderField () {
-    const id = this.getId()
-
-    const {
-      name,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      placeholder,
-      onChange = DEFAULT_HANDLE_CHANGE,
-      fieldRef
-    } = this.props
-
-    return (
-      <ValueField
-        id={id}
-        name={name}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        placeholder={placeholder}
-        onChange={onChange}
-        fieldRef={fieldRef}
-      />
-    )
-  }
-}
-
-ValueGremlin.propTypes = {
-  ...FieldGremlin.propTypes,
-  value: PropTypes.string,
-  defaultValue: PropTypes.string
-}
-
-ValueGremlin.defaultProps = {
-  ...FieldGremlin.defaultProps
-}
-
-export class CheckGremlin extends FieldGremlin {
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props) ||
-      (props.checked !== this.props.checked) ||
-      (props.onClick !== this.props.onClick)
-    )
-  }
-
-  renderField () {
-    const id = this.getId()
-
-    const {
-      name,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      placeholder,
-      onChange = DEFAULT_HANDLE_CHANGE,
-      onClick = DEFAULT_HANDLE_CLICK,
-      fieldRef
-    } = this.props
-
-    return (
-      <CheckField
-        id={id}
-        name={name}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        placeholder={placeholder}
-        onChange={onChange}
-        onClick={onClick}
-        fieldRef={fieldRef}
-      />
-    )
-  }
-}
-
-CheckGremlin.propTypes = {
-  ...FieldGremlin.propTypes,
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  onClick: PropTypes.func
-}
-
-CheckGremlin.defaultProps = {
-  ...FieldGremlin.defaultProps,
-  onClick: DEFAULT_HANDLE_CLICK
-}
-
-export class GroupGremlin extends Component {
-  getClassName () {
-    return 'gremlin'
-  }
-
-  /**
-   * @param {GroupGremlinProps} props
-   * @returns {boolean}
-   */
-  shouldComponentUpdate (props, state) {
-    return (
-      (props.children !== this.props.children) ||
-      (props.onChange !== this.props.onChange)
-    )
-  }
-
-  renderGroup () {
-    const {
-      onChange = DEFAULT_HANDLE_CHANGE,
-      groupRef,
-      children
-    } = this.props
-
-    return (
-      <Group
-        onChange={onChange}
-        groupRef={groupRef}>
-        {children}
-      </Group>
-    )
-  }
-
-  render () {
-    const className = this.getClassName()
-
-    return (
-      <div className={className}>
-        {this.renderGroup()}
-      </div>
-    )
-  }
-}
-
-GroupGremlin.propTypes = {
-  onChange: PropTypes.func,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ]),
-  groupRef: PropTypes.shape({
-    current: PropTypes.shape().isRequired
-  })
-}
-
-GroupGremlin.defaultProps = {
-  onChange: DEFAULT_HANDLE_CHANGE
-}

package/src/gremlins/number/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/number/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class NumberField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/number/field' {
-  export { default } from '#gremlins/gremlins/number/field'
-}

package/src/gremlins/number/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/number' {
-  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
-
-  export default class NumberGremlin extends Gremlin {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/number' {
-  export { default } from '#gremlins/gremlins/number'
-}

package/src/gremlins/password/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/password/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class PasswordField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/password/field' {
-  export { default } from '#gremlins/gremlins/password/field'
-}

package/src/gremlins/password/field/index.jsx

@@ -1,54 +0,0 @@
-/**
- * PasswordField component
- */
-import React from 'react'
-import classnames from 'classnames'
-
-import { ValueField } from '#gremlins/components/field'
-
-export default class PasswordField extends ValueField {
-  getClassName () {
-    return classnames(super.getClassName(), 'password')
-  }
-
-  render () {
-    const {
-      id,
-      name,
-      value,
-      defaultValue,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      placeholder,
-      fieldRef
-    } = this.props
-
-    const className = this.getClassName()
-
-    return (
-      <input
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        placeholder={placeholder}
-        onChange={this.handleChange}
-        className={className}
-        type='password'
-        ref={fieldRef}
-      />
-    )
-  }
-}
-
-PasswordField.propTypes = {
-  ...ValueField.propTypes
-}

package/src/gremlins/password/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/password' {
-  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
-
-  export default class PasswordGremlin extends Gremlin {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/password' {
-  export { default } from '#gremlins/gremlins/password'
-}

package/src/gremlins/radio/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/radio/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class RadioField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/radio/field' {
-  export { default } from '#gremlins/gremlins/radio/field'
-}

package/src/gremlins/radio/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/radio' {
-  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
-
-  export default class RadioGremlin extends Gremlin {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/radio' {
-  export { default } from '#gremlins/gremlins/radio'
-}

package/src/gremlins/select/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/select/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class SelectField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/select/field' {
-  export { default } from '#gremlins/gremlins/select/field'
-}

package/src/gremlins/select/field/index.jsx

@@ -1,111 +0,0 @@
-/**
- * SelectField component
- */
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import { ValueField } from '#gremlins/components/field'
-
-import {
-  DEFAULT_HANDLE_CHANGE
-} from '#gremlins/common'
-
-function getSelectedValues ({ target: { selectedOptions } }) {
-  return (
-    Array.from(selectedOptions)
-      .map(({ value, text }) => value || text)
-  )
-}
-
-function getSelectedValue ({ target: { value } }) {
-  return value
-}
-
-export default class SelectField extends ValueField {
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props) ||
-      (props.multiple !== this.props.multiple) ||
-      (props.children !== this.props.children)
-    )
-  }
-
-  getClassName () {
-    return classnames(super.getClassName(), 'select')
-  }
-
-  handleChange = (event) => {
-    const {
-      multiple = false,
-      onChange = DEFAULT_HANDLE_CHANGE
-    } = this.props
-
-    if (multiple) {
-      onChange(getSelectedValues(event))
-    } else {
-      onChange(getSelectedValue(event))
-    }
-  }
-
-  render () {
-    const {
-      id,
-      name,
-      value,
-      defaultValue,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      multiple = false,
-      children,
-      fieldRef
-    } = this.props
-
-    const className = this.getClassName()
-
-    return (
-      <select
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        multiple={multiple}
-        onChange={this.handleChange}
-        className={className}
-        ref={fieldRef}>
-        {children}
-      </select>
-    )
-  }
-}
-
-SelectField.propTypes = {
-  ...ValueField.propTypes,
-  multiple: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.string
-    )
-  ]),
-  defaultValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.string
-    )
-  ]),
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(
-      PropTypes.node
-    )
-  ])
-}

package/src/gremlins/select/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/select' {
-  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
-
-  export default class SelectGremlin extends Gremlin {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/select' {
-  export { default } from '#gremlins/gremlins/select'
-}

package/src/gremlins/text/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/text/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class TextField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/text/field' {
-  export { default } from '#gremlins/gremlins/text/field'
-}

package/src/gremlins/text/field/index.jsx

@@ -1,54 +0,0 @@
-/**
- * TextField component
- */
-import React from 'react'
-import classnames from 'classnames'
-
-import { ValueField } from '#gremlins/components/field'
-
-export default class TextField extends ValueField {
-  getClassName () {
-    return classnames(super.getClassName(), 'text')
-  }
-
-  render () {
-    const {
-      id,
-      name,
-      value,
-      defaultValue,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      placeholder,
-      fieldRef
-    } = this.props
-
-    const className = this.getClassName()
-
-    return (
-      <input
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        placeholder={placeholder}
-        onChange={this.handleChange}
-        className={className}
-        type='text'
-        ref={fieldRef}
-      />
-    )
-  }
-}
-
-TextField.propTypes = {
-  ...ValueField.propTypes
-}

package/src/gremlins/text/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/text' {
-  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
-
-  export default class TextGremlin extends Gremlin {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/text' {
-  export { default } from '#gremlins/gremlins/text'
-}

package/src/gremlins/textarea/field/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/textarea/field' {
-  import Field from '#gremlins/components/field'
-
-  export default class TextareaField extends Field {}
-}
-
-declare module '@modernpoacher/gremlins/textarea/field' {
-  export { default } from '#gremlins/gremlins/textarea/field'
-}

package/src/gremlins/textarea/field/index.jsx

@@ -1,53 +0,0 @@
-/**
- * TextareaField component
- */
-import React from 'react'
-import classnames from 'classnames'
-
-import { ValueField } from '#gremlins/components/field'
-
-export default class TextareaField extends ValueField {
-  getClassName () {
-    return classnames(super.getClassName(), 'textarea')
-  }
-
-  render () {
-    const {
-      id,
-      name,
-      value,
-      defaultValue,
-      required = false,
-      disabled = false,
-      readOnly = false,
-      tabIndex,
-      accessKey,
-      placeholder,
-      fieldRef
-    } = this.props
-
-    const className = this.getClassName()
-
-    return (
-      <textarea
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        required={required}
-        disabled={disabled}
-        readOnly={readOnly}
-        tabIndex={tabIndex}
-        accessKey={accessKey}
-        placeholder={placeholder}
-        onChange={this.handleChange}
-        className={className}
-        ref={fieldRef}
-      />
-    )
-  }
-}
-
-TextareaField.propTypes = {
-  ...ValueField.propTypes
-}

package/src/gremlins/textarea/index.d.mts

@@ -1,9 +0,0 @@
-declare module '#gremlins/gremlins/textarea' {
-  import { FieldGremlin as Gremlin } from '#gremlins/gremlins'
-
-  export default class TextareaGremlin extends Gremlin {}
-}
-
-declare module '@modernpoacher/gremlins/gremlins/textarea' {
-  export { default } from '#gremlins/gremlins/textarea'
-}