@startlibs/form 1.0.12 → 1.1.1

package/src/AutoComplete.jsx

@@ -0,0 +1,642 @@
+import React, {useEffect, useRef, useState} from 'react'
+import ContentEditable from 'react-contenteditable'
+import {useRefState, useToggle, useEnsureRef} from '@startlibs/core'
+import {ContextMenu, Li, Loading, Icon} from '@startlibs/components'
+import {Errors, useProvideErrors} from './Errors'
+import {Field} from './Field'
+import {useInput} from './enhanceInput'
+import _ from 'lodash/fp'
+import {callIfFunction, stopPropagation, constrainEvent, getColor, media, customTheme, _s} from '@startlibs/utils'
+import styled, {css} from 'styled-components'
+import {darken} from 'polished'
+
+const ua = navigator.userAgent.toLowerCase();
+const isSafari = ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0
+
+const InputLoading = styled(Loading)`
+  bottom: 8px;
+  right: 0.6rem;
+  left: auto;
+  top: 50%;
+  transform: translate(-50%);
+`
+const AutoCompleteInput = styled.div`
+  width: 100%;
+  font-size: 14px;
+  border: 1px solid ${getColor('gray210')};
+  border-radius: 8px;
+  color: ${getColor('gray60')};
+  cursor: text;
+  background: white;
+  position: relative;
+  outline: 0;
+  outline: none;
+  min-height: 3rem;
+  line-height: 28px;
+  padding: 0.25rem 0.7rem;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  ${props => props.focused && `
+    border-color: ${getColor('gray180')};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.075);
+  `}
+  ${props => props.hasErrors && css`
+    border-color: ${getColor('alert')} !important;
+  `}
+  ${media.mobile`
+    padding: 0.25rem 1rem;
+    min-height: 42px;
+  `}
+  ${props => props.withDropdown && css`
+    padding-right: 3rem;
+    ${media.mobile`
+      padding-right: 4rem;
+    `}
+  `}
+  ${customTheme('TextInput')}
+`
+
+const AutoCompletePlaceholder = styled.span`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: rgba(0,0,0,0.3);
+  left: 0.7rem;
+  right: 0.7rem;
+  ${media.mobile`
+    left: 1rem;
+    right: 1rem;
+  `}
+`
+
+const AutoCompleteTextboxDiv = styled(ContentEditable)`
+  display: inline-block;
+  outline: 0;
+  outline: none;
+  padding: 0 1px;
+  line-height: 130%;
+`
+const AddedBox = styled.span`
+  background-color: rgb(230,230,230);
+  padding: 5px 2rem 5px 0.75rem;
+  border-radius: 12px;
+  font-size: 13px;
+  position: relative;
+  margin-left: -3px;
+  margin-right: 9px;
+  white-space: nowrap;
+  cursor: default;
+  line-height: normal;
+  max-width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  ${isSafari ? `
+    vertical-align: 2px;
+    `:`
+    vertical-align: -7px;
+  `}
+`
+const RemoveIcon = styled(Icon)`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  line-height: 20px;
+  transform: translateY(-50%);
+  right: 2px;
+  font-size: 14px;
+  text-align: center;
+  cursor: pointer;
+  color: ${getColor('gray120')};
+  :hover {
+    background-color: ${getColor('gray210')};
+    color: ${props => darken(0.05, getColor('alert')(props))};
+  }
+`
+
+const AutoCompleteMenu = styled(ContextMenu)`
+  box-shadow: 0 2px 3px 1px rgba(0,0,0,0.2),0 0px 0px 1px rgba(0,0,0,0.05);
+  max-height: 22rem;
+  overflow: auto;
+  ${ContextMenu.ListItem} {
+      > * {
+        padding: 11px;
+      }
+  }
+`
+
+const AutoCompleteError = styled(Errors)`
+  ${Errors.Item} {
+    background: transparent;
+    border: none;
+    color: ${getColor('alert')};
+    padding: 0;
+    margin-top: 0.5rem;
+    font-weight: 600;
+    ${Errors.CloseIcon} {
+      display: none;
+    }
+  }
+`
+
+const DropdownIconContainer = styled(Icon)`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 3rem;
+  height: 3rem;
+  bottom: -1px;
+  ${media.mobile`
+    height: 42px;
+  `}
+  ${Icon} {
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    background: rgba(0,0,0,0.1);
+    border-radius: 50%;
+    text-align: center;
+    cursor: pointer;
+    color: ${getColor('gray90')};
+    :hover, :active {
+      background: rgba(0,0,0,0.15);
+    }
+  }
+`
+
+const focusBeforeLast = (e) => {
+  if (e.target && e.target !== e.currentTarget) return
+  const el = [].slice.call(e.currentTarget.querySelectorAll('div[contenteditable]')).slice(-1)[0]
+  if (!el) return
+  el.focus()
+  if (!el.firstChild) {
+    const node = document.createTextNode('')
+    el.appendChild(node)
+  }
+  setSelectionRange(el.firstChild, el.textContent.length + 1)
+}
+
+const setSelectionRange = (input, selectionStart, selectionEnd = 0) => {
+  let range = document.createRange()
+  let sel = window.getSelection()
+  range.setStart(input, Math.max(selectionStart - 1, 0))
+  sel.removeAllRanges()
+  sel.addRange(range)
+}
+
+export const AutoComplete =
+  React.forwardRef(({
+     path,
+     AutoCompleteLi = Li,
+     CompletedBox = ({label, remove, value}) => <AddedBox title={label}>
+       {label}
+       <RemoveIcon icon="x" onMouseUp={constrainEvent(remove)}/>
+     </AddedBox>,
+     EditableInput = (props) => <AutoCompleteTextboxDiv {...props} />,
+     getLabel = (v) => v,
+     minQueryLength = 3,
+     ignoreCase = true,
+     autoSelect,
+     autoSelectEquals,
+     fetchLimit = 6,
+     deleteOnBackspace = true,
+     fetchSuggestions: rawFetchSuggestions,
+     validation = (value) => ({success: value.trim()}),
+    transform,
+      withDropdown,
+    autoFocus,
+    clickOpensWhenEmpty,
+    tabIndex=1,
+    confirmIfNewKeys = [],
+    confirmKeys = ['Enter', ','],
+    confirmIfValueKeys = ['Tab'],
+    placeholder,
+    className,
+    getListItem = getLabel,
+    onAddValue,
+    getUniqueKey,
+    translatable = true,
+     withoutField, fieldClassName, bellowDescText, mandatory, descText, helpText, label,
+    value,setValue,raw
+   },outerRef) => {
+    const autoCompleteBox = useToggle()
+    const hoverIndex = useToggle()
+    const isLoading = useToggle()
+    const cancelEditable = useRef()
+
+    const [formValue, _setFormValue,{hasErrors}] = useInput({path,transform, value, setValue}, raw)
+    const formValueRef = useRef(formValue)
+    formValueRef.current = formValue
+    const [localFormValue,setLocalFormValue] = useState(_.last(formValue) === "" ? formValue : formValue.concat(""))
+    const setFormValue = (updater) => {
+      _setFormValue(updater)
+      setLocalFormValue(updater)
+      formValueRef.current = typeof updater === 'function' ? updater(formValueRef.current) : updater
+    }
+    const lastIsEditable = _.isEqual(localFormValue,formValue)
+
+    const [ErrorProvider, errorUtils] = useProvideErrors()
+    const hooksRef = useEnsureRef(outerRef)
+    const ref = useRef()
+    const queries = useRefState([])
+
+    const suggestionsFetchCache = useRefState({})
+    const suggestionsLabelMapCache = useRefState({})
+    const lastSuggestionQuery = useRefState('')
+
+    const [autoCompleteList, setAutoCompleteList] = useState([])
+
+    const getValue = () => formValueRef.current || []
+
+    const shouldFocusInput = useToggle()
+    const recentlyAdded = useRefState(false)
+
+    useEffect(() => {
+      if (autoFocus) {
+        focusInput()
+      }
+    },[])
+
+    const focusInput = () => shouldFocusInput.openWith(i => i+1)
+    useEffect(() => {
+      if (shouldFocusInput.isOpen)
+        focusBeforeLast({currentTarget: ref.current,target:ref.current})
+    },[shouldFocusInput.isOpen])
+
+    const editableIsEmpty = () => !lastIsEditable || (lastIsEditable && !formValue[formValue.length - 1])
+
+    const ignoreCaseIfNeeded = (s) => ignoreCase ? (s || '').toLowerCase() : s
+
+    const refreshSuggestions = (value = '', justFetch, dropdownFetch) => {
+      if ((value.length >= minQueryLength || dropdownFetch) && rawFetchSuggestions) {
+        queries.set([value])
+        const removeEditable = (list) => lastIsEditable ? list.slice(0, -1) : list
+        return isLoading.wait(Promise.resolve(fetchSuggestions(ignoreCaseIfNeeded(value))).then(list => {
+          const noRepeatedList = list.filter(v => !removeEditable(getValue()).find(_ => getLabel(v) === getLabel(_)))
+          if (justFetch) {
+            return noRepeatedList
+          }
+          const index = queries.get().indexOf(value)
+          if (index >= 0) {
+            queries.set(q => q.slice(index + 1))
+            if (!autoSelect && !(autoSelectEquals && noRepeatedList.slice(0,1).find(v => ignoreCaseIfNeeded(getLabel(v)) === ignoreCaseIfNeeded(value)))) {
+              hoverIndex.openWith(-1)
+            } else {
+              hoverIndex.openWith(0)
+            }
+            autoCompleteBox.open()
+            setAutoCompleteList(noRepeatedList)
+          }
+        }))
+      } else {
+        hoverIndex.openWith(-1)
+        setAutoCompleteList([])
+        return Promise.resolve([])
+      }
+    }
+
+    const fetchSuggestions = (s) => {
+      const prevQuery = lastSuggestionQuery.get()
+      lastSuggestionQuery.set(s)
+      if (suggestionsFetchCache.get()[s]) {
+        return suggestionsFetchCache.get()[s]
+      } else {
+        const lastFetch = suggestionsFetchCache.get()[ignoreCaseIfNeeded(prevQuery)]
+        if (s.indexOf(ignoreCaseIfNeeded(prevQuery)) >= 0 && lastFetch && lastFetch.length < fetchLimit) {
+          return suggestionsFetchCache.get()[s] = lastFetch.map(getLabel).filter(_ => ignoreCaseIfNeeded(_).indexOf(ignoreCaseIfNeeded(s)) >= 0).map(_ => suggestionsLabelMapCache.get()()[ignoreCaseIfNeeded(_)])
+        } else {
+          const fetch = Promise.resolve(rawFetchSuggestions(s))
+          fetch.then(list => {
+            suggestionsFetchCache[ignoreCaseIfNeeded(s)] = list
+            list.forEach(suggestion =>
+              suggestionsLabelMapCache.get()[ignoreCaseIfNeeded(getLabel(suggestion))] = suggestionsLabelMapCache.get()[ignoreCaseIfNeeded(getLabel(suggestion))] || suggestion
+            )
+          })
+          return fetch
+        }
+      }
+    }
+    useEffect(() => {
+      if (!lastIsEditable) {
+        if (recentlyAdded.get() !== cancelEditable.current) {
+          setFormValue(_.without([cancelEditable.current], formValue).concat(""))
+        } else {
+          setLocalFormValue(_.last(formValue) === "" ? formValue : formValue.concat(""))
+        }
+        cancelEditable.current = null
+      }
+    }, [lastIsEditable]);
+
+    useEffect(() => {
+      const newValue = (formValue || [])
+      refreshSuggestions(lastIsEditable ? getValue().slice(-1)[0] : '')
+      if (recentlyAdded.get()) {
+        recentlyAdded.set(false)
+        callIfFunction(onAddValue,formValue,setFormValue)
+      }
+    }, [formValue])
+
+
+    const confirmIfNew = (index, newValue) => {
+      refreshSuggestions(newValue, true).then(list => {
+        if (!list.length) {
+          confirm(index, newValue)
+        } else {
+          onChange(index, newValue)
+        }
+      })
+    }
+
+    const confirm = (index, newValue) => {
+      if (autoCompleteList.length && hoverIndex.isOpen >= 0) {
+        addValue(autoCompleteList[hoverIndex.isOpen])
+      } else {
+        confirmValue(index, newValue)
+      }
+    }
+
+    const confirmValue = (index, newValue, fromBlur) => {
+      if (!newValue) { return }
+      const suggestedValue = suggestionsLabelMapCache[ignoreCaseIfNeeded(newValue || '').trim()]
+      if (suggestedValue) {
+        addValue(suggestedValue, fromBlur)
+        return
+      }
+      const {success, errors} = validation(newValue)
+      if (errors) {
+        errorUtils.setErrors({errors})
+      } else {
+        addValue(success, fromBlur)
+      }
+    }
+
+    const onChange = (index, value) => {
+      errorUtils.clearErrors()
+      setFormValue(_s.set([index], value))
+    }
+
+
+    const addValue = (value, fromBlur) => {
+      const index = Math.max(lastIsEditable ? getValue().length - 1 : getValue().length,0)
+      recentlyAdded.set(formValue?.[index] || "")
+      setFormValue(_.flow(_.set([index], value),_.concat(_,"")))
+      if (!fromBlur) {
+        focusInput()
+      }
+    }
+
+    const remove = (index) => {
+      setFormValue(_.flow(_s.unset(index),_.filter(_=>_!==undefined)))
+      focusInput()
+    }
+
+    const onBlur = (e) => {
+      autoCompleteBox.close()
+      const v = getValue().slice(-1)[0]
+      if (lastIsEditable) {
+        const {errors} = validation(v)
+        const firstIsEqual = autoCompleteList.slice(0,1).find((item) => ignoreCaseIfNeeded(getLabel(item)) === ignoreCaseIfNeeded(v))
+        if (v && autoSelect && (autoCompleteList.length === 1 || firstIsEqual) && errors) {
+          addValue(autoCompleteList[0], true)
+        } else if (autoSelectEquals && firstIsEqual) {
+          addValue(autoCompleteList[0], true)
+        } else {
+          confirmValue(getValue().length - 1, v, true)
+        }
+      } else if (autoCompleteList.length) {
+        setAutoCompleteList([])
+      }
+    }
+
+    React.useImperativeHandle(hooksRef, () => ({addValue,confirm,remove}), [formValue])
+
+    const validValue = formValue || ['']
+    const uniqueKeyLabel = {}
+    const _getUniqueKey = (value) => {
+      if (getUniqueKey) {
+        return getUniqueKey(value)
+      }
+      const label = getLabel(value)
+      const uid = uniqueKeyLabel[label] = (uniqueKeyLabel[label] || 0) + 1
+      return label + uid
+    }
+
+    const tryOpenSuggestions = (e) => {
+      if (autoCompleteBox.get()) {
+          stopPropagation(onBlur)(e)
+      } else {
+         errorUtils.clearErrors()
+        refreshSuggestions(lastIsEditable ? getValue().slice(-1)[0] : '',false,true)
+        focusInput()
+      }
+    }
+    const input = <>
+      <AutoCompleteInput
+        onKeyDown={(e) => e.key === ' ' && e.stopPropagation()}
+        className={className}
+        ref={ref}
+        onFocus={() => {
+          if (autoCompleteList.length) autoCompleteBox.open()
+          else if (withDropdown && editableIsEmpty()) refreshSuggestions(undefined, undefined, true)
+        }}
+        hasErrors={errorUtils.errors.length>0 || hasErrors}
+        onBlur={onBlur}
+        onClick={(e) => { focusBeforeLast(e); if (editableIsEmpty() && !isLoading.isOpen) {refreshSuggestions(undefined,undefined,true)}}}
+        focused={autoCompleteBox.isOpen}
+        withDropdown={withDropdown}
+      >
+        <span>{'\u200b'}</span>
+        {validValue.map((v, i) =>
+          <ValueItem
+            value={v}
+            index={i}
+            cancelEditable={(v) => {cancelEditable.current = v }}
+            isEditable={lastIsEditable && validValue.length===i+1}
+            confirmKeys={confirmKeys}
+            confirmIfValueKeys={confirmIfValueKeys}
+            deleteOnBackspace={deleteOnBackspace}
+            EditableInput={EditableInput}
+            key={lastIsEditable && validValue.length===i+1 ? '$$editable$$' : _getUniqueKey(v)}
+            onChange={onChange}
+            remove={remove}
+            confirm={confirm}
+            getLabel={getLabel}
+            tabIndex={tabIndex}
+            confirmIfNew={confirmIfNew}
+            confirmIfNewKeys={confirmIfNewKeys}
+            CompletedBox={CompletedBox}
+          />
+        )}
+        <span>{'\u200b'}</span>
+        {(!formValue || !formValue.join('')) && placeholder &&
+        <AutoCompletePlaceholder onClick={(e) => ref.current.click()}>{placeholder}</AutoCompletePlaceholder>}
+        {
+          withDropdown && !isLoading.isOpen &&
+          <DropdownIconContainer onClick={tryOpenSuggestions}>
+            <Icon icon="arrow-down"/>
+          </DropdownIconContainer>
+        }
+      </AutoCompleteInput>
+      {
+        autoCompleteBox.isOpen !== false && !errorUtils.errors.length && autoCompleteList.length > 0 &&
+        <AutoCompleteMenu
+          hoverIndex={hoverIndex.isOpen}
+          autoHover={autoSelect}
+          onClick={constrainEvent()}
+          onHover={hoverIndex.openWith}
+          my="top left"
+          at="bottom left"
+          fill
+        >
+          {autoCompleteList.map(value =>
+            <AutoCompleteLi
+              className={ !translatable ? 'notranslate' : null }
+              key={_getUniqueKey(value)}
+              label={getListItem(value)}
+              onMouseDown={e => e.preventDefault()}
+              onClick={() => addValue(value)}
+            />
+          )}
+        </AutoCompleteMenu>
+      }
+      <ErrorProvider value={errorUtils}>
+        <AutoCompleteError/>
+      </ErrorProvider>
+    </>
+    return withoutField
+           ? input
+           : <Field bellowDescText={bellowDescText} className={fieldClassName} value={formValue} mandatory={mandatory}
+                    descText={descText} helpText={helpText} label={label} labelClick={focusInput}>
+             {isLoading.isOpen && <InputLoading absolute size={24}/>}
+             {input}
+           </Field>
+  }
+)
+
+AutoComplete.AddedBox = AddedBox
+AutoComplete.RemoveIcon = RemoveIcon
+AutoComplete.AutoCompleteTextboxDiv = AutoCompleteTextboxDiv
+
+const cleanText = text => {
+  const clean = text.replace('\u200b', '').replace(/\n/g, ' ').replace(/\s+/g, ' ')
+  return clean.trim() ? clean : ''
+}
+
+const ValueItem = ({CompletedBox,isEditable,getLabel,cancelEditable,value,remove,index,...props}) => {
+  const isEditing = useToggle(isEditable)
+  const valueRef = useRef(value)
+  valueRef.current = value
+  useEffect(() => () => {
+    if (isEditing.isOpen) {
+      cancelEditable(valueRef.current)
+    }
+  },[])
+  return isEditing.isOpen
+   ? <AutoCompleteTextbox
+    {...props}
+    value={value}
+    index={index}
+    remove={remove}
+  />
+    : <CompletedBox
+    label={getLabel(value)}
+    value={value}
+    remove={() => remove(index)}
+  />
+}
+
+export class AutoCompleteTextbox extends React.Component {
+
+  state = {value:this.props.value}
+
+  deletePrev = () => this.props.index > 0 && this.props.remove(this.props.index - 1)
+
+  onKeyDown = (e) => {
+    const range = window.getSelection().getRangeAt(0)
+    if (this.props.confirmIfNewKeys.indexOf(e.key) >= 0) {
+      e.preventDefault()
+      const text = range.startContainer.textContent
+      this.props.confirmIfNew(
+        this.props.index,
+        cleanText((text.slice(0, range.startOffset) + '\uFFFD' + text.slice(range.startOffset)).replace('\uFFFD', e.key))
+      )
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.stopPropagation()
+    } else if (this.props.confirmKeys.indexOf(e.key) >= 0 || this.props.confirmIfValueKeys.indexOf(e.key) >= 0) {
+      if (this.props.confirmKeys.indexOf(e.key) >= 0) {
+        e.preventDefault()
+      }
+      if (this.props.value) {
+        e.preventDefault()
+        e.stopPropagation()
+        this.props.confirm(this.props.index, this.props.value)
+      }
+    } else if (e.key === 'Backspace' && this.props.deleteOnBackspace) {
+      if (e.target.textContent !== '\u200b' || !range.collapsed) {
+        if (range.startContainer.previousSibling) {
+          if (range.startContainer.previousSibling.textContent.length) {
+            return
+          }
+        } else if (range.startOffset > 0) {
+          return
+        }
+      }
+      e.preventDefault()
+      this.deletePrev()
+    }
+  }
+
+  onChange = (evt) => {
+    this.props.onChange(this.props.index, cleanText(evt.currentTarget.isContentEditable ? evt.currentTarget.innerText : evt.target.value))
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const event = new CustomEvent('portalReposition')
+    setTimeout(() => window.dispatchEvent(event), 1)
+    if (this.el.innerHTML === '<br>' || !this.el.innerHTML) {
+      this.props.onChange(this.props.index, '')
+    }
+    return nextProps.value !== cleanText(this.el.innerText) || !!Object.keys(nextProps).find((k) => nextProps[k] !== this.props[k])
+  }
+
+  componentDidUpdate(oldProps) {
+    if (this.props.value.slice(-1) === ' ' && /\S/.test(this.el.textContent.slice(-1))) { // does not have blank space as last
+      this.el.innerHTML = this.props.value.replace(/\s/, '&nbsp;')
+    }
+    if (this.props.value !== oldProps.value && document.activeElement === this.el) {
+      setSelectionRange(this.el.firstChild || this.el, this.el.textContent.length + 1)
+    }
+  }
+
+  onPaste = (ev) => {
+    ev.preventDefault()
+    const text = ev.clipboardData.getData('text')
+    document.execCommand('insertText', false, text)
+  }
+
+  render() {
+    const {value, confirmKeys, index, EditableInput, confirmIfNewKeys, confirmIfNew, confirm, remove, ...rest} = this.props
+    const valueOrBlank = /*android fix, not needed? value || */ _.isString(value) && value ? value : '\u200b'
+
+    const props = {
+      innerRef: ref => this.el = ref,
+      onKeyDown: this.onKeyDown,
+      onPaste: this.onPaste,
+      value: value,
+      index: index,
+      html: valueOrBlank.replace(/\s$/, '&nbsp;'),
+      ...rest,
+      onChange: this.onChange,
+    }
+    return typeof EditableInput === 'function' ? EditableInput(props) : <EditableInput {...props} />
+  }
+}

package/src/Checkbox.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {useInput} from './enhanceInput'
+import {useToggle} from '@startlibs/core'
+import {callIfFunction, isTouchDevice} from '@startlibs/utils'
+
+const HiddenInput = styled.input`
+  opacity: 0 !important;
+  position: absolute;
+  pointer-events: none;
+`
+
+export const Checkbox = ({className, children, isChecked = _.identity, isList, onClick, disabled, inverted, path, tabIndex = 1, raw, ...rest}) => {
+  const focused = useToggle()
+  const [v, ,{name, toggle, toggleItem, hasErrors}] = useInput({ path, isChecked,...rest}, raw)
+  const testInvert = (v) => inverted ? !v : v
+  const value = isChecked(testInvert(isList ? v?.indexOf(rest.fieldValue) >= 0 : v))
+  const _onClick = (e) => {
+    callIfFunction(onClick, e)
+    if (!e.isDefaultPrevented()) {
+      if (isList) {
+        toggleItem()
+      } else {
+        toggle();
+      }
+      e.preventDefault();
+    }
+  }
+  return <label onClick={_onClick} data-drag="false" className={className}>
+    {
+      !isTouchDevice() && <HiddenInput
+        onFocus={focused.open}
+        onBlur={focused.close}
+        disabled={disabled}
+        type="checkbox"
+        name={name}
+        readOnly
+        checked={!!value}
+        tabIndex={tabIndex}
+      />
+    }
+    {children && children({disabled, checked: !!value, hasErrors, focused: focused.isOpen})}
+  </label>
+}