@modernpoacher/gremlins 0.0.311 → 1.0.1

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

@@ -0,0 +1,83 @@
+/**
+ *  @typedef {GremlinsTypes.Components.Field.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Components.Field.Password.PasswordProps} PasswordProps
+ */
+
+/**
+ *  PasswordField component
+ */
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  ValueField,
+  toInputValue
+} from '#gremlins/components/field'
+
+/**
+ *  @extends {ValueField<ValueProps & PasswordProps>}
+ */
+export default class PasswordField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'password')
+  }
+
+  render () {
+    const {
+      name,
+      id,
+      defaultValue,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      placeholder,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    if (defaultValue === undefined) {
+      const {
+        value
+      } = this.props
+
+      return (
+        <input
+          name={name}
+          id={id}
+          value={toInputValue(value)}
+          required={required}
+          disabled={disabled}
+          readOnly={readOnly}
+          tabIndex={tabIndex}
+          accessKey={accessKey}
+          placeholder={placeholder}
+          onChange={this.handleChange}
+          className={className}
+          type='password'
+          ref={fieldRef}
+        />
+      )
+    }
+
+    return (
+      <input
+        name={name}
+        id={id}
+        defaultValue={String(defaultValue)}
+        required={required}
+        disabled={disabled}
+        readOnly={readOnly}
+        tabIndex={tabIndex}
+        accessKey={accessKey}
+        placeholder={placeholder}
+        onChange={this.handleChange}
+        className={className}
+        type='password'
+        ref={fieldRef}
+      />
+    )
+  }
+}

package/src/{gremlins → js/gremlins}/password/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/password')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Password
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Password

package/src/js/gremlins/password/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#gremlins/gremlins/password'
+export * from '#gremlins/gremlins/password'

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

@@ -0,0 +1,18 @@
+declare module '#gremlins/gremlins/password' {
+  import {
+    ValueGremlin
+  } from '#gremlins/gremlins'
+
+  export type PasswordProps = GremlinsTypes.Gremlins.Password.PasswordProps
+
+  export default class PasswordGremlin<P extends PasswordProps> extends ValueGremlin<P> {
+    handleChange (
+      value?: string | string[]
+    ): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins/password' {
+  export { default } from '#gremlins/gremlins/password'
+  export * from '#gremlins/gremlins/password'
+}

package/src/{gremlins → js/gremlins}/password/index.jsx

@@ -1,25 +1,42 @@
 /**
- * PasswordGremlin component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Gremlins.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Gremlins.Password.PasswordProps} PasswordProps
+ */
+
+/**
+ *  PasswordGremlin component
  */
 import React from 'react'
 import classnames from 'classnames'
 
-import { ValueGremlin } from '#gremlins/gremlins'
-
 import {
-  DEFAULT_HANDLE_CHANGE
-} from '#gremlins/common'
+  ValueGremlin
+} from '#gremlins/gremlins'
 
-import Field from './field/index.jsx'
+import Field from '#gremlins/gremlins/password/field'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
 
+/**
+ *  @extends {ValueGremlin<ValueProps & PasswordProps>}
+ */
 export default class PasswordGremlin extends ValueGremlin {
   getClassName () {
     return classnames(super.getClassName(), 'password')
   }
 
+  /**
+   *  @param {string | string[]} [value]
+   */
   handleChange = (value) => {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE
+      onChange = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onChange(value)
@@ -43,8 +60,8 @@ export default class PasswordGremlin extends ValueGremlin {
 
     return (
       <Field
-        id={id}
         name={name}
+        id={id}
         value={value}
         defaultValue={defaultValue}
         required={required}
@@ -59,7 +76,3 @@ export default class PasswordGremlin extends ValueGremlin {
     )
   }
 }
-
-PasswordGremlin.propTypes = {
-  ...ValueGremlin.propTypes
-}

package/src/{gremlins → js/gremlins}/radio/field/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/radio/field')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Field
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Field

package/src/js/gremlins/radio/field/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#gremlins/gremlins/radio/field'
+export * from '#gremlins/gremlins/radio/field'

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

@@ -0,0 +1,14 @@
+declare module '#gremlins/gremlins/radio/field' {
+  import {
+    CheckField
+  } from '#gremlins/components/field'
+
+  export type RadioProps = GremlinsTypes.Components.Field.Radio.RadioProps
+
+  export default class RadioField<P extends RadioProps> extends CheckField<P> {}
+}
+
+declare module '@modernpoacher/gremlins/gremlins/radio/field' {
+  export { default } from '#gremlins/gremlins/radio/field'
+  export * from '#gremlins/gremlins/radio/field'
+}

package/src/{gremlins → js/gremlins}/radio/field/index.jsx

@@ -1,12 +1,23 @@
 /**
- * RadioField component
+ *  @typedef {GremlinsTypes.Components.Field.CheckProps} CheckProps
+ *  @typedef {GremlinsTypes.Components.Field.Radio.RadioProps} RadioProps
+ */
+
+/**
+ *  RadioField component
  */
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { CheckField } from '#gremlins/components/field'
+import {
+  CheckField,
+  toInputValue
+} from '#gremlins/components/field'
 
+/**
+ *  @extends {CheckField<CheckProps & RadioProps>}
+ */
 export default class RadioField extends CheckField {
   getClassName () {
     return classnames(super.getClassName(), 'radio')
@@ -15,8 +26,8 @@ export default class RadioField extends CheckField {
   render () {
     const {
       checked,
-      id,
       name,
+      id,
       value,
       required = false,
       disabled = false,
@@ -32,10 +43,10 @@ export default class RadioField extends CheckField {
       return (
         <>
           <input
-            checked={checked}
-            id={id}
             name={name}
-            value={value}
+            id={id}
+            value={toInputValue(value)}
+            checked={checked}
             required={required}
             disabled={disabled}
             readOnly={readOnly}
@@ -61,10 +72,10 @@ export default class RadioField extends CheckField {
     return (
       <>
         <input
-          defaultChecked={defaultChecked}
-          id={id}
           name={name}
-          value={value}
+          id={id}
+          value={toInputValue(value)}
+          defaultChecked={defaultChecked}
           required={required}
           disabled={disabled}
           readOnly={readOnly}

package/src/{gremlins → js/gremlins}/radio/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/radio')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Radio
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Radio

package/src/js/gremlins/radio/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#gremlins/gremlins/radio'
+export * from '#gremlins/gremlins/radio'

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

@@ -0,0 +1,24 @@
+declare module '#gremlins/gremlins/radio' {
+  import {
+    CheckGremlin
+  } from '#gremlins/gremlins'
+
+  export type RadioProps = GremlinsTypes.Gremlins.Radio.RadioProps
+
+  export default class RadioGremlin<P extends RadioProps> extends CheckGremlin<P> {
+    handleChange (
+      value?: string | string[],
+      checked?: boolean
+    ): void
+
+    handleClick (
+      value?: string | string[],
+      checked?: boolean
+    ): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins/radio' {
+  export { default } from '#gremlins/gremlins/radio'
+  export * from '#gremlins/gremlins/radio'
+}

package/src/{gremlins → js/gremlins}/radio/index.jsx

@@ -1,47 +1,63 @@
 /**
- * Radio component
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Gremlins.CheckProps} CheckProps
+ *  @typedef {GremlinsTypes.Gremlins.Radio.RadioProps} RadioProps
+ */
+
+/**
+ *  Radio component
  */
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { CheckGremlin } from '#gremlins/gremlins'
-
 import {
-  DEFAULT_HANDLE_CHANGE,
-  DEFAULT_HANDLE_CLICK
-} from '#gremlins/common'
+  CheckGremlin
+} from '#gremlins/gremlins'
 
-import Field from './field/index.jsx'
+import Field from '#gremlins/gremlins/radio/field'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
 
+/**
+ *  @extends {CheckGremlin<CheckProps & RadioProps>}
+ */
 export default class Radio extends CheckGremlin {
   getClassName () {
     return classnames(super.getClassName(), 'radio')
   }
 
+  /**
+   *  @param {string} name
+   *  @param {string | string[]} [value]
+   *  @param {boolean} [checked]
+   */
   handleChange = (value, checked) => {
     const {
-      onChange = DEFAULT_HANDLE_CHANGE
+      onChange = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onChange(value, checked)
   }
 
+  /**
+   *  @param {string} name
+   *  @param {string | string[]} [value]
+   *  @param {boolean} [checked]
+   */
   handleClick = (value, checked) => {
     const {
-      onClick = DEFAULT_HANDLE_CLICK
+      onClick = DEFAULT_HANDLE_EVENT
     } = this.props
 
     onClick(value, checked)
   }
 
-  shouldComponentUpdate (props, state) {
-    return (
-      super.shouldComponentUpdate(props) ||
-      (props.value !== this.props.value)
-    )
-  }
-
   renderField () {
     const id = this.getId()
 
@@ -61,8 +77,8 @@ export default class Radio extends CheckGremlin {
 
     return (
       <Field
-        id={id}
         name={name}
+        id={id}
         value={value}
         checked={checked}
         defaultChecked={defaultChecked}

package/src/{gremlins → js/gremlins}/select/field/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/select/field')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Field
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Field

package/src/js/gremlins/select/field/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#gremlins/gremlins/select/field'
+export * from '#gremlins/gremlins/select/field'

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

@@ -0,0 +1,18 @@
+declare module '#gremlins/gremlins/select/field' {
+  import type { ChangeEvent } from 'react'
+
+  import {
+    ValueField
+  } from '#gremlins/components/field'
+
+  export type SelectProps = GremlinsTypes.Components.Field.Select.SelectProps
+
+  export default class SelectField<P extends SelectProps> extends ValueField<P> {
+    handleChange (event: ChangeEvent<HTMLSelectElement>): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins/select/field' {
+  export { default } from '#gremlins/gremlins/select/field'
+  export * from '#gremlins/gremlins/select/field'
+}

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

@@ -0,0 +1,200 @@
+/**
+ *  @typedef {GremlinsTypes.OnEventType} OnEventType
+ *  @typedef {GremlinsTypes.Components.Field.ValueProps} ValueProps
+ *  @typedef {GremlinsTypes.Components.Field.Select.SelectProps} SelectProps
+ */
+
+/**
+ *  SelectField component
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import {
+  ValueField,
+  toInputValue
+} from '#gremlins/components/field'
+
+/**
+ *  @type {OnEventType}
+ */
+function DEFAULT_HANDLE_EVENT () {
+  //
+}
+
+/**
+ *  @param {HTMLOptionElement[]} selectedOptions
+ *  @returns {string[]}
+ */
+function fromSelectedOptions (selectedOptions) {
+  return (
+    Array.from(selectedOptions)
+      .map(({ value, text }) => (value || text) ?? '')
+  )
+}
+
+/**
+ *  @param {{ target: { selectedOptions: HTMLOptionElement[] } }} event
+ *  @returns {string[]}
+ */
+function getSelectedValues ({ target: { selectedOptions } }) {
+  return (
+    fromSelectedOptions(selectedOptions)
+  )
+}
+
+/**
+ *  @param {{ target: { value?: string } }} event
+ *  @returns {string}
+ */
+function getSelectedValue ({ target: { value } }) {
+  return value ?? ''
+}
+
+/**
+ *  @extends {ValueField<ValueProps & SelectProps>}
+ */
+export default class SelectField extends ValueField {
+  getClassName () {
+    return classnames(super.getClassName(), 'select')
+  }
+
+  /**
+   *  @param {SelectProps} props
+   *  @returns {boolean}
+   */
+  shouldComponentUpdate (props) {
+    const {
+      multiple,
+      children,
+      ...superProps
+    } = props
+
+    return (
+      super.shouldComponentUpdate(superProps) || // , state ||
+      (multiple !== this.props.multiple) ||
+      (children !== this.props.children)
+    )
+  }
+
+  /**
+   *  @overload
+   *  @param {{ target: { selectedOptions: { value?: string, text?: string }[] } }} event
+   *  @returns {void}
+   *
+   *  @overload
+   *  @param {{ target: { value?: string } }} event
+   *  @returns {void}
+   *
+   *  @param {any} event
+   *  @returns {void}
+   */
+  handleChange = (event) => {
+    const {
+      multiple = false,
+      onChange = DEFAULT_HANDLE_EVENT
+    } = this.props
+
+    if (multiple) {
+      onChange(getSelectedValues(event))
+    } else {
+      onChange(getSelectedValue(event))
+    }
+  }
+
+  render () {
+    const {
+      name,
+      id,
+      defaultValue,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      tabIndex,
+      accessKey,
+      multiple = false,
+      children,
+      fieldRef
+    } = this.props
+
+    const className = this.getClassName()
+
+    if (defaultValue === undefined) {
+      const {
+        value
+      } = this.props
+
+      return (
+        <select
+          name={name}
+          id={id}
+          value={(
+            multiple
+              ? Array.isArray(value)
+                ? value
+                : [toInputValue(value)]
+              : toInputValue(value)
+          )}
+          required={required}
+          disabled={disabled} // @ts-ignore
+          readOnly={readOnly}
+          tabIndex={tabIndex}
+          accessKey={accessKey}
+          multiple={multiple}
+          onChange={this.handleChange}
+          className={className}
+          ref={fieldRef}>
+          {children}
+        </select>
+      )
+    }
+
+    return (
+      <select
+        name={name}
+        id={id}
+        defaultValue={(
+          multiple
+            ? Array.isArray(defaultValue)
+              ? defaultValue
+              : [String(defaultValue)]
+            : String(defaultValue)
+        )}
+        required={required}
+        disabled={disabled} // @ts-ignore
+        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 → js/gremlins}/select/index.cjs

@@ -11,7 +11,10 @@ const log = debug('@modernpoacher/gremlins/gremlins/select')
 log('`gremlins` is awake')
 
 const {
-  default: component
+  default: Select
 } = require('./index.jsx')
 
-module.exports = component
+/**
+ *  Exports only default
+ */
+module.exports = Select

package/src/js/gremlins/select/index.d.cts

@@ -0,0 +1,2 @@
+export { default } from '#gremlins/gremlins/select'
+export * from '#gremlins/gremlins/select'

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

@@ -0,0 +1,18 @@
+declare module '#gremlins/gremlins/select' {
+  import {
+    ValueGremlin
+  } from '#gremlins/gremlins'
+
+  export type SelectProps = GremlinsTypes.Gremlins.Select.SelectProps
+
+  export default class SelectGremlin<P extends SelectProps> extends ValueGremlin<Omit<Omit<P, 'value'>, 'defaultValue'>> {
+    handleChange (
+      value?: string | string[]
+    ): void
+  }
+}
+
+declare module '@modernpoacher/gremlins/gremlins/select' {
+  export { default } from '#gremlins/gremlins/select'
+  export * from '#gremlins/gremlins/select'
+}