@hanzo/react 0.1.2 → 1.0.0

package/src/controls/MUICheckbox.js

@@ -1,108 +0,0 @@
-import React, { Component } from 'react'
-
-import control from './control'
-import {
-  Checkbox,
-  MenuItem,
-  FormControl,
-  FormControlLabel,
-  FormHelperText
-} from '@material-ui/core'
-
-import { withStyles } from '@material-ui/core/styles'
-
-//
-// *** Hanzo Standardized Checkbox ***
-//
-
-export class BaseMUICheckbox extends Component{
-  constructor(props) {
-    super(props)
-  }
-
-  change(e, checked) {
-    let { onChange, onBlur } = this.props
-    onChange = onChange || onBlur
-
-    if (onChange) {
-      onChange(checked)
-    }
-  }
-
-  render() {
-    let {
-      id,
-      value,
-      defaultValue,
-      error,
-      helperText,
-      disabled,
-      children,
-      classes,
-      label,
-      onBlur,
-      onChange,
-      ...props
-    } = this.props
-
-    if (!disabled) {
-      disabled = this.disabled
-    }
-
-    value = value || defaultValue || false
-
-    let c = pug`Checkbox(
-        ...props
-        id=id
-        disabled=disabled
-        checked=!!value
-        onChange=this.change.bind(this)
-        className=classes.pointer
-        type='checkbox'
-      )`
-
-
-    return pug`
-      .switch
-        FormControl(className=classes.row)
-          FormControlLabel(
-            control=c
-            label=label
-          )
-          div(className=classes.break)
-          if !!helperText
-            FormHelperText(
-              disabled=disabled
-              error=!!error
-              className=classes.helper
-            )
-              =helperText
-      `
-  }
-}
-
-const styles = theme => ({
-  pointer: {
-    cursor: 'pointer',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-  },
-  break: {
-    flexBasis: '100%',
-    height: 0,
-  },
-  label: {
-    textAlign: 'left',
-    cursor: 'pointer',
-  },
-  helper: {
-    padding: '0 0 15px',
-    margin: '-3px 0 0',
-  },
-})
-
-@control
-export default withStyles(styles)(class MUICheckbox extends BaseMUICheckbox {})

package/src/controls/MUIKeyboardDatePicker.js

@@ -1,90 +0,0 @@
-import React, { Component } from 'react'
-import moment from 'moment-timezone'
-import MomentUtils from '@date-io/moment'
-import { MuiPickersUtilsProvider } from '@material-ui/pickers'
-
-import control from './control'
-import { KeyboardDatePicker } from '@material-ui/pickers'
-
-import {
-  defaultFormat,
-  renderJSONDate,
-  isFunction,
-} from '@hanzo/utils'
-
-//
-// *** Hanzo Standardized Keyboard Date Picker ***
-//
-// A Material UI Date Picker with Keyboard Support.  It returns hanzo
-// compatible dates (rfc3339) and converts from hanzo compatible dates.
-//
-// Custom Fields
-// - unix - instead of converting to and from rfc3339, target unix time integers
-//   instead
-//
-
-export class BaseMUIKeyboardDatePicker extends Component {
-  options = undefined
-
-  constructor(props) {
-    super(props)
-  }
-
-  // Make it so that setters convert to unix dates if set to do so
-  wrapUnixSetter(setter) {
-    return (e) => {
-      return setter(this.props.unix != null ? e.unix() : renderJSONDate(e))
-    }
-  }
-
-  render() {
-    let {
-      value,
-      defaultValue,
-      format,
-      shrink,
-      onChange,
-      onBlur,
-      unix,
-      inputVariant,
-      variant,
-      ...props
-    } = this.props
-
-    let isUnix = unix != null
-
-    if (isFunction(onChange)) {
-      onChange = this.wrapUnixSetter(onChange)
-    }
-
-    if (isFunction(onBlur)) {
-      onBlur = this.wrapUnixSetter(onBlur)
-    }
-
-    // handle dates in unix mode
-    if (isUnix) {
-      if (value) {
-        value = moment(value).unix()
-      }
-
-      if (defaultValue) {
-        defaultValue = moment(defaultValue).unix()
-      }
-    }
-
-    return pug`
-      MuiPickersUtilsProvider(utils=MomentUtils)
-        KeyboardDatePicker(
-          ...props
-          inputVariant=variant || inputVariant
-          format=format || defaultFormat()
-          onChange=onBlur || onChange
-          value=value || defaultValue
-          InputLabelProps={ shrink: !!value || !!defaultValue || shrink }
-        )
-        `
-  }
-}
-
-@control
-export default class MUIKeyboardDatePicker extends BaseMUIKeyboardDatePicker {}

package/src/controls/MUIPhone.js

@@ -1,33 +0,0 @@
-import React, { useRef } from 'react'
-
-import control from './control'
-
-import MUIPhoneNumber from './material-ui-phone-number'
-
-//
-// *** Hanzo Standardized Material UI Phone Input ***
-//
-// This control requires onChange
-//
-
-export const BaseMUIPhone = ({
-  defaultCountry,
-  onChange,
-  onBlur,
-  ...props
-}) => {
-  const ref = useRef()
-  const oc = onChange || onBlur
-
-  return (
-    <div ref={ref}>
-      <MUIPhoneNumber
-        defaultCountry={defaultCountry === undefined ? 'us' : ''}
-        onChange={oc}
-        {...props}
-      />
-    </div>
-  )
-}
-
-export default control(BaseMUIPhone)

package/src/controls/MUISwitch.js

@@ -1,107 +0,0 @@
-import React, { Component } from 'react'
-
-import control from './control'
-import {
-  Switch,
-  MenuItem,
-  FormControl,
-  FormControlLabel,
-  FormHelperText
-} from '@material-ui/core'
-
-import { withStyles } from '@material-ui/core/styles'
-
-//
-// *** Hanzo Standardized Switch ***
-//
-
-export class BaseMUISwitch extends Component{
-  constructor(props) {
-    super(props)
-  }
-
-  change(e, checked) {
-    let { onChange, onBlur } = this.props
-    onChange = onChange || onBlur
-
-    if (onChange) {
-      onChange(checked)
-    }
-  }
-
-  render() {
-    let {
-      id,
-      value,
-      defaultValue,
-      error,
-      helperText,
-      disabled,
-      children,
-      classes,
-      label,
-      onBlur,
-      onChange,
-      ...props
-    } = this.props
-
-    if (!disabled) {
-      disabled = this.disabled
-    }
-
-    value = value || defaultValue || false
-
-    let c = pug`Switch(
-        ...props
-        id=id
-        disabled=disabled
-        checked=!!value
-        onChange=this.change.bind(this)
-        className=classes.pointer
-        type='checkbox'
-      )`
-
-    return pug`
-      .switch
-        FormControl(className=classes.row)
-          FormControlLabel(
-            control=c
-            label=label
-          )
-          div(className=classes.break)
-          if !!helperText
-            FormHelperText(
-              disabled=disabled
-              error=!!error
-              className=classes.helper
-            )
-              =helperText
-      `
-  }
-}
-
-const styles = theme => ({
-  pointer: {
-    cursor: 'pointer',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-  },
-  break: {
-    flexBasis: '100%',
-    height: 0,
-  },
-  label: {
-    textAlign: 'left',
-    cursor: 'pointer',
-  },
-  helper: {
-    padding: '0 0 15px',
-    margin: '-3px 0 0',
-  },
-})
-
-@control
-export default withStyles(styles)(class MUISwitch extends BaseMUISwitch {})

package/src/controls/MUIText.js

@@ -1,298 +0,0 @@
-import {
-  isFunction,
-} from '@hanzo/utils'
-
-import {
-  MenuItem,
-  TextField,
-} from '@material-ui/core'
-
-import React, {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import raf from 'raf'
-import control from './control'
-
-const SPECIALNIL = '☭'
-
-//
-// *** Hanzo Standardized Material UI Input ***
-//
-// A Material UI TextField with the following bug fixes:
-// - Selects can now auto set themselves to a placeholder when undefined
-// - defaultValue now takes the first non-undefined value so you cna
-//   asynchronously set default value
-// - Forced always into uncontrolled mode so we don't fire a nonstandard onChange
-//   event compared to a normal input
-//
-// Custom Fields
-// - placeholder - default value for selects
-// - options - automatically generate a list of selections/menu items based on
-//   options map
-// - allowEmpty - Make the placeholder in select mode picakble with a
-//   onBlur/onChange value of undefined
-// - shrink - shorthand for InputLabelProps{ shrink }, recommended taht you overwrite
-//   the whole thing with custom shrink logic if using InputLabelProps
-// - sensitive - defaults to a password field unless focused
-//
-
-// Make it so that select can handle a specific nil value based on a rare
-// unicode special value because empty string does not work
-const wrapSelectSetter = (setter) => (
-  (e) => {
-    if (e === SPECIALNIL) {
-      return setter(undefined)
-    }
-
-    if (e && e.target && e.target.value === e === SPECIALNIL) {
-      const newE = Object.create(e, {
-        target: {
-          value: undefined,
-        },
-      })
-
-      return setter(newE)
-    }
-
-    return setter(e)
-  }
-)
-
-export const BaseMUIText = ({
-  options = [],
-  value,
-  defaultValue,
-  onChange,
-  onBlur,
-  onFocus,
-  InnerComponent,
-  select,
-  placeholder,
-  shrink,
-  disableAutoChange,
-  allowEmpty,
-  sensitive,
-  type,
-  InputLabelProps,
-  InputProps,
-  ...props
-}) => {
-  const [focused, setFocused] = useState(false)
-  const inputRef = useRef()
-
-  // Enable sensitive focus detection using Blur and Focus
-  const wrapSensitiveBlur = (ob) => (
-    (e) => {
-      setFocused(false)
-      console.log('what')
-
-      if (isFunction(ob)) {
-        ob(e)
-      }
-    }
-  )
-
-  const wrapSensitiveFocus = (of) => (
-    (e) => {
-      setFocused(true)
-
-      if (isFunction(of)) {
-        of(e)
-      }
-    }
-  )
-
-  const isSelect = select != null
-  const isSensitive = sensitive != null
-  const doesAllowEmpty = allowEmpty != null
-
-  const selectOptions = []
-
-  let oc = onChange
-  let ob = onBlur
-  let of = onFocus
-  let dv = defaultValue
-  let v = value
-
-  if (isSelect) {
-    // set the default value to '' if it doesn't exist
-    if (!options[dv]) {
-      dv = SPECIALNIL
-    }
-
-    // set the value to '' if it doesn't exist
-    if (!options[v]) {
-      v = SPECIALNIL
-      dv = undefined
-    }
-
-    if (props.SelectProps && props.SelectProps.native) {
-      if (placeholder) {
-        if (doesAllowEmpty) {
-          selectOptions.push(
-            <option key={SPECIALNIL} value={SPECIALNIL}>
-              {placeholder}
-            </option>,
-          )
-        } else {
-          selectOptions.push(
-            <option disabled key={SPECIALNIL} value={SPECIALNIL}>
-              {placeholder}
-            </option>,
-          )
-        }
-      }
-      for (const k in options) {
-        ((key) => {
-          const opt = options[key]
-
-          selectOptions.push(
-            <option key={key} value={key}>
-              {opt}
-            </option>,
-          )
-        })(k)
-      }
-    } else {
-      if (placeholder) {
-        if (doesAllowEmpty) {
-          selectOptions.push(
-            <MenuItem key={SPECIALNIL} value={SPECIALNIL}>
-              {placeholder}
-            </MenuItem>,
-          )
-        } else {
-          selectOptions.push(
-            <MenuItem disabled key={SPECIALNIL} value={SPECIALNIL}>
-              {placeholder}
-            </MenuItem>,
-          )
-        }
-      }
-
-      for (const k in options) {
-        ((key) => {
-          const opt = options[key]
-          selectOptions.push(
-            <MenuItem key={key} value={key}>
-              {opt}
-            </MenuItem>,
-          )
-        })(k)
-      }
-    }
-  }
-
-  const [actualValue, setActualValue] = useState(v || dv)
-  const [forceFlag, setForceFlag] = useState()
-
-  if (isFunction(oc)) {
-    const wssoc = wrapSelectSetter(oc)
-    oc = (e) => {
-      if (forceFlag && forceFlag === e.target.value) {
-        setForceFlag(null)
-        return null
-      }
-
-      setActualValue(e.target ? e.target.value : e)
-      return wssoc(e)
-    }
-  }
-
-  if (isFunction(ob)) {
-    const wrappedOb = wrapSelectSetter(ob)
-    ob = wrappedOb
-
-    if (!isFunction(oc)) {
-      oc = useMemo(() => {
-        let onChangeTimeoutId = -1
-
-        return (ev) => {
-          if (forceFlag && forceFlag === ev.target.value) {
-            setForceFlag(null)
-            return
-          }
-
-          setActualValue(ev.target ? ev.target.value : ev)
-          if (disableAutoChange) {
-            return
-          }
-
-          clearTimeout(onChangeTimeoutId)
-
-          const { target } = ev
-
-          if (isSelect) {
-            wrappedOb({
-              target,
-            })
-          } else {
-            onChangeTimeoutId = setTimeout(() => {
-              wrappedOb({
-                target,
-              })
-            }, 500)
-          }
-        }
-      }, [onBlur])
-    }
-  }
-
-  // update component if value is different than actual value
-  useEffect(() => {
-    if (v !== actualValue) {
-      raf(() => {
-        setForceFlag(v)
-        setActualValue(v)
-      })
-    }
-  }, [v])
-
-  ob = wrapSensitiveBlur(ob)
-  of = wrapSensitiveFocus(of)
-
-  const IC = InnerComponent || TextField
-  const InputPropsCheck = InputProps || {}
-
-  const shrinkInputLabelProps = !!(focused
-    || (inputRef && inputRef.value)
-    || !!v
-    || !!dv
-    || !!actualValue
-    || shrink
-    || isSelect
-    || placeholder
-    || InputPropsCheck.startAdornment
-    || InputPropsCheck.endAdornment)
-
-  return (
-    <IC
-      {...props}
-      inputRef={inputRef}
-      select={select}
-      options={options}
-      placeholder={isSelect ? '' : placeholder}
-      type={(isSensitive && !focused) ? 'password' : type}
-      value={actualValue}
-      defaultValue={actualValue ? undefined : dv}
-      onChange={isSelect ? (oc || ob) : oc}
-      onBlur={isSelect ? wrapSensitiveBlur() : ob}
-      onFocus={of}
-      InputProps={InputProps}
-      InputLabelProps={
-        {
-          shrink: shrinkInputLabelProps,
-          ...InputLabelProps,
-        }
-      }
-    >
-      {selectOptions}
-    </IC>
-  )
-}
-
-export default control(BaseMUIText)

package/src/controls/NumericFormats.js

@@ -1,57 +0,0 @@
-import { signs } from '@hanzo/utils'
-
-import React from 'react'
-import NF from 'react-number-format'
-
-export const CreateCurrencyFormat = (currency, opts) => (
-  (props) => {
-    const {
-      inputRef,
-      onBlur,
-      onChange,
-      onFocus,
-      value,
-      ...other
-    } = props
-
-    return (
-      <NF
-        {...other}
-        {...opts}
-        value={value}
-        getInputRef={inputRef}
-        onChange={onChange}
-        onBlur={onBlur}
-        isNumericString
-        prefix={signs[currency || '']}
-      />
-    )
-  }
-)
-
-export const CreateNumberFormat = (opts) => (
-  (props) => {
-    const {
-      inputRef,
-      onBlur,
-      onChange,
-      onFocus,
-      value,
-      ...other
-    } = props
-
-    console.log(onChange)
-
-    return (
-      <NF
-        {...other}
-        {...opts}
-        value={value}
-        getInputRef={inputRef}
-        onChange={onChange}
-        onBlur={onBlur}
-        isNumericString
-      />
-    )
-  }
-)