@startlibs/form 1.0.11 → 1.1.0

package/src/FormValue.jsx

@@ -0,0 +1,67 @@
+import React, {useContext, useEffect, useState, useMemo} from 'react'
+import {useUpdateEffect} from '@startlibs/core'
+import {ifUndefined, callIfFunction, getUID} from '@startlibs/utils'
+import {FormContext, useFormMeta, useFormValue} from './Form'
+import _ from 'lodash/fp'
+import {TransitionDiv,SwitchDiv} from '@startlibs/components'
+
+export const FormValue = ({path,children,inputs,format=_.identity}) => {
+  const [value,setValue] = useFormValue(path,inputs || [])
+  return ifUndefined(callIfFunction(children,format(value),setValue),_.isObject(value) ? null : value,null)
+}
+export const IfFormValue = ({path,children,inputs,check = _.identity,invert,...rest}) => {
+  const [value,setValue] = useFormValue(path,inputs || [])
+  const doInvert = (v) => invert ? !v : !!v
+  return <TransitionDiv {...rest}>{
+    doInvert(callIfFunction(check,value))
+     ? ifUndefined(callIfFunction(children,value,setValue),_.isObject(value) ? null : value,null)
+     : null
+  }</TransitionDiv>
+}
+export const IfFormValueUpdate = ({path,children,updatePath}) => {
+  const [readValue] = useFormValue(path,[])
+  const [,setValue] = useFormValue(updatePath,[])
+  useUpdateEffect(() => {
+    setValue(callIfFunction(children,readValue))
+  },[readValue])
+  return null
+}
+export const SwitchOnFormValue = ({path,children,inputs,on,off,check,invert,map = _.identity,...rest}) => {
+  const [value,setValue] = useFormValue(path,inputs || [])
+  const doInvert = (v) => invert ? !v : v
+  const isOn = (check || invert ) ? doInvert(callIfFunction(check,value)) : value
+  const mappedValue = map(value)
+  const onKey = useMemo(() => getUID() , [isOn,mappedValue])
+  return <SwitchDiv on={onKey} {...rest}>{
+    isOn
+     ? (on && on[mappedValue])
+       ? callIfFunction(on[mappedValue],value,setValue)
+       : ifUndefined(callIfFunction(on,value,setValue),_.isObject(value) ? null : value,null)
+     : ifUndefined(callIfFunction(off,value,setValue),_.isObject(value) ? null : value,null)
+  }</SwitchDiv>
+}
+
+export const FormMeta = ({path,children,inputs}) => {
+  const [value,setValue] = useFormMeta(path,inputs || [])
+  return ifUndefined(callIfFunction(children,value,setValue),value,null)
+}
+export const IfFormMeta = ({path,children,inputs,check = _.identity,invert,...rest}) => {
+  const [value,setValue] = useFormMeta(path,inputs || [])
+  const doInvert = (v) => invert ? !v : !!v
+  return <TransitionDiv {...rest}>{
+    doInvert(callIfFunction(check,value))
+      ? ifUndefined(callIfFunction(children,value,setValue),_.isObject(value) ? null : value,null)
+      : null
+  }</TransitionDiv>
+}
+export const LazyFormValues = ({value,format = _.identity, children}) => {
+  const currentValue = value.read()
+  const [loaded,setLoaded] = useState(false)
+  const formUtils = useContext(FormContext)
+  useEffect(() => {
+    formUtils.setValues(format(currentValue), false)
+    setLoaded(getUID)
+    return () => value.refresh()
+  }, [])
+  return callIfFunction(children,loaded)
+}

package/src/IconRadioBoxOldHubt.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Icon} from '@startlibs/components'
+import {enhanceInput} from './enhanceInput'
+import {customTheme,getColor} from '@startlibs/utils'
+
+const Text = styled.div`
+  flex-grow: 1;
+  padding: 0.5rem;
+  min-height: 3rem;
+  align-content: center;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  -ms-flex-positive: 1;
+  display: -ms-flexbox;
+  -ms-flex-line-pack: center;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -ms-flex-direction: column;
+
+  background-color: transparent;
+  border-top: 1px solid ${getColor('gray150')};
+  text-align: center;
+`
+
+
+export const StyledIconRadioBox = styled(({className, setFromField, name, tabIndex, icon, value, label, fieldValue}) =>
+  <label className={className}>
+    <input type="radio" value={fieldValue} name={name} tabIndex={tabIndex}
+           onChange={setFromField} checked={value === fieldValue}/>
+    <Icon icon={icon}/>
+    <Text>
+      {label}
+    </Text>
+  </label>
+)`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${getColor('gray150')};
+  color: ${getColor('gray150')};
+  border-radius: 5px;
+  background-color: #fff;
+  cursor: pointer;
+
+  ${props => props.value === props.fieldValue ? css`
+    border-color: ${getColor('main')};
+    color: ${getColor('main')};
+    ${Text} {
+      background-color: ${getColor('main')};
+      border-top-color: ${getColor('main')};
+      color:#fff;
+    }
+  ` : css`
+    :hover ${Text} {
+      background-color: ${getColor('gray150')};
+      color: #fff;
+    }
+  `}
+
+  ${Icon} {
+    font-size: 100px;
+    line-height: 72px;
+    margin: 0.5rem auto;
+    text-align: center;
+  }
+
+  input {
+    opacity: 0;
+    position: absolute;
+    left: -20000000px;
+  }
+
+  input:focus ~ ${Icon}::after {
+   content: '';
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    left: -4px;
+    bottom: -4px;
+    border-radius: 7px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+  }
+
+  ${customTheme("IconRadioBox")}
+`
+
+export const IconRadioBox = enhanceInput(StyledIconRadioBox)
+
+IconRadioBox.Text = Text

package/src/InputboxGroup.jsx

@@ -0,0 +1,121 @@
+import React from 'react'
+
+import {callIfFunction} from '@startlibs/utils'
+import styled, {css} from 'styled-components'
+
+import {Field} from './Field'
+import {SimpleCheckbox} from './alt/checkbox/SimpleCheckbox'
+import {SimpleRadiobox} from './alt/radiobox/SimpleRadiobox'
+import {SplitColumnsContainer} from '@startlibs/components'
+import _ from "lodash/fp";
+
+export const InputboxGroup = styled(({path, className, column, as = column ? SplitColumnsContainer : 'div', children, label, descText,helpText,mandatory,margin, ...rest}) => {
+  const size = React.Children.count(children)
+  const Wrapper = as
+  const boxes = <Wrapper className={className}>{
+    React.Children.toArray(children).filter(child => child.props).map((child, i,arr) => React.cloneElement(child, {
+      isFirst: i === 0,
+      isLast: i === arr.length - 1,
+      index: i,
+      path,
+      ...rest,
+      ...child.props,
+    }))
+  }</Wrapper>
+  
+  return label 
+    ? <Field label={label} mandatory={mandatory} descText={descText} helpText={helpText} margin={margin}>{boxes}</Field> 
+    : boxes
+})`
+  ${props => props.wide && `
+    width: 100%;
+    display: flex;
+    label {
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+  `}
+  ${props => props.unevenlyWide && `
+    width: 100%;
+    display: flex;
+    label {
+      flex-grow: 1;
+    }
+  `}
+  ${props => props.horizontal ? `
+    @supports (flex-wrap: wrap) {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    min-height: 3rem;
+    ${SimpleRadiobox}, ${SimpleCheckbox} {
+      margin-right: 1.5rem;
+      margin-bottom: 0.5rem;
+    }
+  ` : `
+    ${SimpleRadiobox}, ${SimpleCheckbox} {
+      margin-bottom: 0.5rem;
+      :last-child {
+        margin-bottom: 1.5rem;
+      }
+    }
+  `}
+  ${props => props.framedBoxes && css`
+    ${props => props.horizontal && `
+      margin: -4px;
+      width: calc(100% + 8px);
+      ${SimpleRadiobox}, ${SimpleCheckbox} {
+          margin: 4px;
+      }
+    `}
+  `}
+`
+
+export const RadioboxGroup = InputboxGroup
+export const CheckboxGroup = InputboxGroup
+
+CheckboxGroup.createCheckManager = (path = []) => {
+  let lastSelected = null
+  const select = (itemOrItems,toggleValue) => {
+    lastSelected = _.isArray(itemOrItems) || _.isFunction(itemOrItems) ? lastSelected : itemOrItems
+    const items = _.isArray(itemOrItems) ? itemOrItems : [itemOrItems]
+    const intersects = (list) => path.length
+      ? _.intersectionBy(path,list,items).length === items.length
+      : _.intersection(list,items).length === items.length
+    return (currentlySelected = []) =>
+      _.isFunction(itemOrItems)
+        ? itemOrItems(currentlySelected)
+        : (toggleValue===false || (toggleValue !== true && intersects(currentlySelected)))
+          ? (path.length ? _.differenceBy(path, currentlySelected, items) : _.difference(currentlySelected, items))
+          : (path.length ? _.uniqBy(path,currentlySelected.concat(items)) : _.uniq(currentlySelected.concat(items)))
+  }
+
+  const getIndex = (item,list) => {
+    const element = path.length ? _.intersectionBy(path, list, [item])[0] : item
+    return list.indexOf(element)
+  }
+  const shiftSelect = (availableItems,item) => {
+    const lastSelectedIndex = getIndex(lastSelected,callIfFunction(availableItems))
+    lastSelected = item
+    return (currentlySelected=[]) => {
+      if (lastSelectedIndex < 0) {
+        return select(item)(currentlySelected)
+      } else {
+        const removing = path.length ? _.intersectionBy(path, [item], currentlySelected).length : (currentlySelected?.indexOf(item)>=0)
+        const currentIndex = getIndex(item,callIfFunction(availableItems))
+        const firstIndex = currentIndex > lastSelectedIndex ? lastSelectedIndex : currentIndex
+        const lastIndex = currentIndex > lastSelectedIndex ? (currentIndex + 1) : (lastSelectedIndex + 1)
+        if (removing) {
+          return path.length
+            ? _.differenceBy(path,currentlySelected,availableItems.slice(firstIndex,lastIndex))
+            : _.difference(currentlySelected,availableItems.slice(firstIndex,lastIndex))
+        } else {
+          return path.length
+            ? _.unionBy(path,currentlySelected,availableItems.slice(firstIndex,lastIndex))
+            : _.union(currentlySelected,availableItems.slice(firstIndex,lastIndex))
+        }
+      }
+    }
+  }
+  return {select, shiftSelect}
+}

package/src/Radiobox.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+import {useInput} from './enhanceInput'
+import {useToggle} from '@startlibs/core'
+import {isTouchDevice} from '@startlibs/utils'
+
+const HiddenInput = styled.input`
+  opacity: 0 !important;
+  position: absolute;
+  pointer-events: none;
+`
+
+export const Radiobox = ({className, children, disabled, isChecked, fieldValue, path, tabIndex = 1, raw, ...rest}) => {
+  const focused = useToggle()
+  const [value, , {setFromField, name, hasErrors}] = useInput({fieldValue, path, isChecked, ...rest}, raw)
+  const checked = isChecked ? isChecked(value) : value === fieldValue
+  return <label data-drag="false" onClick={(e) => {e.preventDefault();if (!disabled){setFromField()}}} className={className}>
+    {
+      !isTouchDevice() && <HiddenInput
+        onFocus={focused.open}
+        onBlur={focused.close}
+        disabled={disabled}
+        type="radio"
+        checked={checked}
+        value={fieldValue}
+        readOnly
+        name={name}
+        tabIndex={tabIndex}
+      />
+    }
+    {children && children({disabled, checked, hasErrors, focused: focused.isOpen})}
+  </label>
+}