@startlibs/form 1.0.11 → 1.1.0

package/src/TextInput.jsx

@@ -0,0 +1,519 @@
+import React, {useState, forwardRef, useEffect} from 'react'
+import {Field} from './Field'
+import {useInput} from './enhanceInput'
+import styled, {css} from 'styled-components'
+import {Loading} from '@startlibs/components'
+import {getScrollParent, ifUndefined, callIfFunction, getColor, customTheme, intToHour, digitsToPattern, isTouchDevice, media} from '@startlibs/utils'
+import {darken} from 'polished'
+import _ from 'lodash/fp'
+import {Icon} from '@startlibs/components'
+import {useEnsureRef, useRefState} from '@startlibs/core'
+
+const InputWithTextAfter = styled.div`
+  display: flex;
+  align-items: center;
+  border: 1px solid ${getColor('gray210')};
+  border-radius: ${props => props.rounded ? '100px' : '8px'};
+  background: white;
+  ${props => props.focused && css`
+    border-color: ${getColor('gray180')};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+  `}
+  ${props => props.hasErrors && css`
+    border-color: ${getColor('alert')} !important;
+  `}
+  input {
+    border: none;
+    box-shadow: none !important;
+    flex: 1;
+    min-width: 0;
+  }
+`
+const TextAfterLabel = styled.span`
+  padding-right: 0.7rem;
+  color: ${getColor('gray180')};
+  font-size: 14px;
+  white-space: nowrap;
+  ${media.mobile`
+    padding-right: 1rem;
+  `}
+`
+
+const InputWithIcon = styled.div`
+  position: relative;
+  width: 100%;
+  input, textarea {
+    display: block;
+  }
+`
+const InputIcon = styled(Icon)`
+  position: absolute;
+  left: ${props => props.rounded ? '13px' : '0.7rem'};
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 23px;
+  color: ${getColor('gray180')};
+  pointer-events: none;
+  z-index: 1;
+  line-height: 0;
+  ${media.mobile`
+    left: ${props => props.rounded ? '1.25rem' : '1rem'};
+  `}
+`
+
+const InputLoading = styled(Loading)`
+  bottom: 8px;
+  right: 0.6rem;
+  left: auto;
+  top: auto;
+  ${media.mobile`
+    bottom: 10px;
+  `} 
+`
+
+const Input = styled.input`
+  width: 100%;
+  font-size: 14px;
+  border: 1px solid ${getColor('gray210')};
+  border-radius: 8px;
+  outline: 0;
+  outline: none;
+  color: ${getColor('gray60')};
+  background: white;
+  position: relative;
+  height: 3rem;
+  padding: 0 0.7rem;
+  overflow: auto;
+  ${media.mobile`
+    height: 42px;
+    padding: 0 1rem;
+    @supports (-webkit-touch-callout: none) {
+      font-size: 16px;
+    }
+  `}
+
+  ::-webkit-input-placeholder {
+    color: rgba(0,0,0,0.3);
+  }
+  ::-moz-placeholder {
+    color: rgba(0,0,0,0.3);
+  }
+  :-moz-placeholder {
+    color: rgba(0,0,0,0.3);
+  }
+  :-ms-input-placeholder {
+    color: rgba(0,0,0,0.3);
+  }
+  ${props => !props.hasTextBox && !props.noFocus && css`
+    :focus {
+      border-color: ${getColor('gray180')};
+      box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+    }
+    ${props => props.hasErrors && css`
+      border-color: ${getColor('alert')} !important;
+    `}
+  `}
+  ::-ms-clear { //Clear IE pseudo-buttons
+    display: none;
+  }
+  ${props => props.locked && css`
+    padding-right: 2.25rem;
+    background: rgba(0,0,0,0.075);
+    pointer-events: none;
+  `}
+  ${props => props.isTextArea && css`
+    resize: none;
+    min-height: ${props => props.regularInputHeight ? 36 : props.minHeight || 60}px;
+    padding: .7rem;
+    display: block;
+    ${props => props.autoResize ? 'overflow:hidden;' : 'overflow:auto;'}
+    ${media.mobile`
+      padding: 1rem;
+      ${props => props.regularInputHeight && 'min-height: 42px;'}
+    `}
+  `}
+  ${props => props.rounded && css`
+    border-radius: 100px;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  `}
+  ${props => props.hasIcon && css`
+    padding-left: ${props.rounded ? '3rem' : '2.5rem'};
+    ${media.mobile`
+      padding-left: ${props.rounded ? '3.25rem' : '2.75rem'};
+    `}
+  `}
+  ${customTheme('TextInput')}
+`
+
+const InputWithTextBox = styled.div`
+  display: flex;
+  border-radius: ${props => props.rounded ? '100px' : '8px'};
+  position: relative;
+  :before {
+    position: absolute;
+    border-radius: ${props => props.rounded ? '100px' : '8px'};
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  ${props => props.focused && css`
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+    :before {
+      content: '';
+      border: 1px solid ${getColor('gray180')};
+    }
+  `}
+  ${props => props.hasErrors && css`
+    :before {
+      content: '';
+      border: 1px solid ${getColor('alert')};
+    }
+  `}
+  ${props => props.textBoxBefore && css`
+    input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  `}
+  ${props => props.textBoxAfter && css`
+    input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  `}
+`
+const TextBox = styled.span`
+  display: flex;
+  align-items: center;
+  padding: 0 0.7rem;
+  z-index: 1;
+  background-color: ${props => darken(0.075, getColor('gray240')(props))};
+  border: 1px solid ${getColor('gray210')};
+  cursor: text;
+  white-space: nowrap;
+`
+const TextBoxBefore = styled(TextBox)`
+  border-top-left-radius: ${props => props.rounded ? '100px' : '8px'};
+  border-bottom-left-radius: ${props => props.rounded ? '100px' : '8px'};
+  ${props => props.rounded && 'padding-left: 1.25rem;'}
+  margin-right: -1px;
+`
+const TextBoxAfter = styled(TextBox)`
+  border-top-right-radius: ${props => props.rounded ? '100px' : '8px'};
+  border-bottom-right-radius: ${props => props.rounded ? '100px' : '8px'};
+  ${props => props.rounded && 'padding-right: 1.25rem;'}
+  margin-left: -1px;
+`
+
+const doAutoResize = (element) => {
+  const scrollContainer = getScrollParent(element)
+  const lastTop = scrollContainer.scrollTop || scrollContainer.pageYOffset
+  element.style.height = 'auto'
+  element.style.height = (element.scrollHeight) + 'px'
+  if (scrollContainer === window) {
+    scrollContainer.scroll(scrollContainer.pageXOffset,lastTop)
+  } else {
+    scrollContainer.scrollTop = lastTop
+  }
+}
+
+export const useTextInput = (
+  {
+    onFocus,
+    onBlur,
+    autoResize,
+    autoSelectOnFocus,
+    constraint,
+    pattern,
+    path,
+    rawValue,
+    rawSetValue,
+    rawHasErrors,
+    transformOnBlur,
+    raw,
+    showValue,
+    deleteTrailing,
+    ...rest
+  },
+  ref
+) => {
+
+  const [formValue, setFormValue, {hasErrors}] = useInput({path,value:rawValue,setValue:rawSetValue,...rest},raw)
+  const [focused, setFocused] = useState()
+
+  const lastSelection = useRefState()
+  const lastValue = useRefState(showValue(formValue))
+
+  const handleOnFocus = (e) => {
+    setFocused(true)
+    if (!!autoSelectOnFocus && !!ref.current) {
+      setTimeout(() => ref.current?.select(), 0)
+    }
+    callIfFunction(onFocus, e)
+  }
+  const handleOnBlur = (e) => {
+    setFocused(false)
+    callIfFunction(onBlur, e)
+    if (transformOnBlur) {
+      setFormValue(transformOnBlur(formValue))
+    }
+  }
+
+  useEffect(() => {
+    if (lastSelection.get() === 1 && constraint === 'capitalize') {
+      ref.current.setSelectionRange(lastSelection.get(), lastSelection.get())
+    }
+  })
+
+  useEffect(() => {
+      if (autoResize) {
+        doAutoResize(ref.current)
+      }
+  },[])
+
+  useEffect(() => {
+    if (!!autoSelectOnFocus && !!ref.current && document.activeElement === ref.current) {
+      setTimeout(() => ref.current?.select(), 0)
+    }
+  }, [autoSelectOnFocus])
+
+  
+
+  const handleChange = (e) => {
+    if (autoResize) {
+      doAutoResize(ref.current)
+    }
+    const target = e.target
+    try {
+      lastSelection.set(target.selectionEnd)
+    } catch(e) {}
+    if (constraint || pattern) {
+      setFormValue(validateConstraint(target.value, constraint, showValue(formValue), pattern), ref.current)
+    } else {
+      setFormValue(target.value, ref.current)
+    }
+  }
+
+  const validateConstraint = (value, constraint, prevValue, pattern) => {
+    let newValue = ''
+    if (value === (lastValue.get()+"") || (lastValue.get() && (lastValue.get()+"").indexOf(value)>=0 && !pattern)) {
+      newValue = value
+      if (deleteTrailing) {
+        if (_.isString(deleteTrailing) && value.slice(-deleteTrailing.length) === deleteTrailing) {
+          newValue = value.slice(0,-deleteTrailing.length)
+        } else if (_.isRegExp(deleteTrailing) && deleteTrailing.test(value)) {
+          newValue = value.replace(deleteTrailing,'')
+        }
+      }
+      lastValue.set(showValue(newValue))
+      return newValue
+    }
+    if (pattern) {
+      newValue = value.match(pattern)?.slice(1)?.join("") || ""
+      // if (newValue.length < value.length - 1) {
+      //   newValue = value
+      // }
+    } else if (constraint === 'price') {
+      if (value.indexOf(',') >= 0) value = value.replace(/\./g, '') // ponytail: '.' é separador de milhar quando já há ',' decimal (ex: colar "2.000,45")
+      value = value.replace('.', ',').replace(/[^0-9,]/g, '')
+      const number = parseFloat(value.replace(',', '.'))
+      const commas = value.split(',')
+      const fixedNumber = number.toFixed(2)
+      newValue = !!commas[0] && commas.length === 2 && parseFloat(fixedNumber) === number && fixedNumber.split('.')[1].indexOf(commas[1]) === 0 ? value : digitsToPattern('>3???????#,##', value)
+    } else if (constraint === 'capitalize') {
+      // v = "R$ "+(parseInt(v.replace(/[^1-9]*([0-9]*)(,?)([0-9]{0,3}).*/,"$1$3") || 0)/100).toFixed(2).replace(".",",");
+      newValue = value.replace(/^[a-z]/, function(e) { return e.toUpperCase() })
+    } else if (constraint === 'number' || constraint === 'hour' || constraint === 'hour-int') {
+      newValue = value.replace(/\D/g, '')
+      if (newValue !== '') {
+        newValue = window.parseInt(newValue, 10)
+        if (constraint !== 'number') {
+          if ((newValue + '').length > 4 || newValue > 2399) {
+            newValue = prevValue
+          } else {
+            const resultHour = intToHour(newValue, false)
+            const val = resultHour.replace(/\D/g, '')
+            const result = (isNaN(parseInt(val, 10)) ? undefined : parseInt(val, 10))
+            newValue = constraint === 'hour-int' ? result : resultHour
+          }
+        }
+      }
+    } else if (constraint === 'cpf') {
+      newValue = digitsToPattern('###.###.###-##', value)
+    } else if (constraint === 'cnpj') {
+      newValue = digitsToPattern('##.###.###/####-##', value)
+    } else if (_.isFunction(constraint)) {
+      newValue = constraint(value)
+    } else if (_.isRegExp(constraint)) {
+      newValue = value.replace(constraint, '')
+    } else {
+      newValue = digitsToPattern(constraint, value)
+    }
+    lastValue.set(showValue(newValue))
+    return newValue
+  }
+  return [formValue, {onChange: handleChange, onFocus: handleOnFocus, onBlur: handleOnBlur}, rawHasErrors || hasErrors, focused]
+}
+
+
+export const TextInput = styled(forwardRef((
+  {
+    showValue = _.identity,
+    label,
+    type = 'text',
+    helpText,
+    descText,
+    bellowDescText,
+    mandatory,
+    isLoading,
+    locked,
+    textBoxBefore,
+    textBoxAfter,
+    textAfter,
+    icon,
+    className,
+    fieldClassName = '',
+    FieldType = Field,
+    margin,
+
+    value: rawValue,
+    setValue: rawSetValue,
+    hasErrors: rawHasErrors,
+
+    textarea = false,
+    onImage = false,
+    rounded,
+    autoFocus,
+    noFocus,
+    autoSelectOnFocus,
+
+    onFocus,
+    onBlur,
+    pattern,
+    autoResize,
+    constraint,
+    path,
+    raw,
+
+    tabIndex = 1,
+
+    ...rest
+  },
+  forwardedRef
+) => {
+  const ref = useEnsureRef(forwardedRef)
+  const [value, events, hasErrors, focused] = useTextInput({path, onFocus, onBlur, autoResize, autoSelectOnFocus, constraint, pattern, rawValue, rawSetValue, rawHasErrors, raw, showValue, ...rest}, ref)
+  const inputTag = textarea ? 'textarea' : 'input'
+
+  const focusInput = () => ref.current.focus()
+
+  const wrapInput = (input) => {
+    if (textBoxBefore) {
+      return (
+        <InputWithTextBox focused={focused} hasErrors={hasErrors} onClick={focusInput} textBoxBefore rounded={rounded}>
+          <TextBoxBefore rounded={rounded}>{textBoxBefore}</TextBoxBefore>
+          {input}
+        </InputWithTextBox>)
+    } else if (textBoxAfter) {
+      return (
+        <InputWithTextBox focused={focused} hasErrors={hasErrors} onClick={focusInput} textBoxAfter rounded={rounded}>
+          {input}
+          <TextBoxAfter rounded={rounded}>{textBoxAfter}</TextBoxAfter>
+        </InputWithTextBox>)
+    } else if (textAfter) {
+      return (
+        <InputWithTextAfter focused={focused} hasErrors={hasErrors} onClick={focusInput} rounded={rounded}>
+          {input}
+          <TextAfterLabel>{textAfter}</TextAfterLabel>
+        </InputWithTextAfter>)
+    } else {
+      return input
+    }
+  }
+  const input = wrapInput(<Input
+    {...rest}
+    as={inputTag}
+    className={!label ? className : undefined}
+    isTextArea={textarea}
+    data-hj-whitelist={type !== "password"}
+    locked={locked}
+    rounded={rounded}
+    hasIcon={!!icon}
+    autoFocus={!isTouchDevice() && autoFocus}
+    noFocus={noFocus}
+    hasErrors={hasErrors}
+    isOnImage={onImage}
+    ref={ref}
+    tabIndex={tabIndex}
+    type={type}
+    value={ifUndefined(showValue(value),'')}
+    hasTextBox={textBoxBefore || textBoxAfter || textAfter}
+    autoResize={autoResize}
+    rows={1}
+    {...events}
+  />)
+
+  const wrappedInput = icon
+    ? <InputWithIcon>
+        <InputIcon icon={icon} rounded={rounded}/>
+        {input}
+      </InputWithIcon>
+    : input
+
+  return (
+    !label
+    ? wrappedInput
+    : <FieldType
+      className={fieldClassName+ ' ' + className}
+      value={value}
+      focused={focused}
+      mandatory={mandatory}
+      isOnImage={onImage}
+      descText={descText}
+      bellowDescText={bellowDescText}
+      helpText={helpText}
+      label={label}
+      labelClick={focusInput}
+      margin={margin}
+    >
+      {isLoading && <InputLoading absolute size={20}/>}
+      {wrappedInput}
+    </FieldType>
+  )
+
+}))``
+
+TextInput.Input = Input
+export default TextInput
+
+const FloatingFieldType = styled(Field)`
+    input {
+      height: 5rem;
+      box-shadow: 0 1px 4px rgba(0,0,0,.2);
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 400;
+      padding: 16px 1rem 0;
+    }
+    ${Field.Label} {
+      position: absolute;
+      top: 1.5rem;
+      left: 1rem;
+      font-size: 20px;
+      font-weight: normal;
+      transition: all .2s ease;
+      color: rgba(0,0,0,.2);
+      pointer-events: none;
+      z-index: 1;
+      ${props => (props.value || props.focused) && `
+        top: 12px;
+        font-size: 14px;
+        color: rgba(0,0,0,.4);
+      `}
+    }
+  `
+export const FloatLabelTextInput = (props) => <TextInput {...props} FieldType={FloatingFieldType}/>

package/src/alt/checkbox/SimpleCheckbox.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+
+import {Icon} from '@startlibs/components'
+import { getColor, ifProp, media } from '@startlibs/utils';
+import styled, {css} from 'styled-components'
+import {lighten, desaturate} from 'polished'
+import {Checkbox} from '../../Checkbox'
+import {HelpText} from '../../Field'
+
+const CheckboxPseudoInput = styled.div`
+  border-radius: 4px;
+  content: '';
+  border: 1px solid ${getColor('gray210')};
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  position: absolute;
+  left: -2rem;
+  top: 50%;
+  transform: translateY(-50%);
+
+  ${ifProp('focused', css`
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    border-color: ${getColor('gray180')};
+  `)}
+
+  ${Icon} {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    font-weight: bold;
+    font-size: 16px;
+    color: ${getColor('gray90')};
+  }
+`
+const TextLabel = styled.span `
+  font-size: 13px;
+  line-height: 16px;
+  margin: 2px 0;
+  display: block;
+`
+const DescText = styled.div `
+  color: rgba(0,0,0,0.4);
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+`
+const TextLabelContainer = styled.div `
+  display: flex;
+  align-items: center;
+  position: relative;
+  ${HelpText} {
+    margin-left: 0.25rem;
+  }
+`
+const CheckboxContent = styled.div `
+  cursor: pointer;
+  position: relative;
+  padding-left: 2rem;
+  transition: background 0.2s linear;
+  ${props => props.framed && css`
+    border: 1px solid ${getColor('gray210')};
+    border-radius: 8px;
+    min-height: 3rem;
+    min-width: 8rem;
+    background: white;
+    width: 100%;
+    align-items: center;
+    display: flex;
+    :hover {
+      background: rgb(245,245,245);
+    }
+    :active {
+      background: rgb(235,235,235);
+      transition: none;
+    }
+    padding: 10px 12px 10px 32px;
+    ${media.desktop`
+      padding: 7px 12px 7px 32px;
+    `}
+    ${props => props.hasErrors && css`
+      border-color: ${getColor('alert')} !important;
+    `}
+    ${props => props.checked && props.highlightSelected && css`
+      border-color: ${getColor('main')};
+      background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      :hover {
+        background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      }
+      ${CheckboxPseudoInput} {
+        ${Icon} {
+          color: ${getColor('main')};
+        }
+      }
+    `}
+    ${props => props.checked && props.ultraHighlightSelected && css`
+      border-color: ${getColor('main')};
+      background: ${getColor('main')};
+      color: white;
+      a, a.link {
+        color: white;
+      }
+      :hover {
+        background: ${getColor('main')};
+      }
+      ${CheckboxPseudoInput} {
+        ${Icon} {
+          color: ${getColor('main')};
+        }
+      }
+      ${HelpText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+      ${DescText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+    `}
+    ${props => props.disabled && css`
+      background-color: rgba(0,0,0,0.075) !important;
+      color: rgba(0,0,0,0.6); !important;
+      &[disabled] {
+        opacity: 0.75 !important;
+      }
+      ${CheckboxPseudoInput} {
+        background: transparent;
+      }
+    `}
+  `}
+`
+
+export const SimpleCheckbox = styled(({path, disabled, label, descText, helpText, isFirst, isLast, tabIndex, className,framedBoxes,highlightSelected,ultraHighlightSelected,...rest}) =>
+  <Checkbox
+    className={className}
+    path={path}
+    tabIndex={tabIndex}
+    {...rest}
+  >{({checked, hasErrors, focused}) =>
+    <CheckboxContent checked={checked} framed={framedBoxes} highlightSelected={highlightSelected} ultraHighlightSelected={ultraHighlightSelected} hasErrors={hasErrors} disabled={disabled}>
+    <div className="textContainer">
+      <TextLabelContainer>
+        <CheckboxPseudoInput focused={focused} tabIndex={tabIndex}>
+          {checked && <Icon icon="check"/>}
+        </CheckboxPseudoInput>
+        <TextLabel>{label}</TextLabel>{helpText && <HelpText>{helpText}</HelpText>}
+      </TextLabelContainer>
+      {descText && <DescText>{descText}</DescText>}
+    </div>
+    </CheckboxContent>
+  }</Checkbox>
+)`
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 1rem;
+  display: flex;
+  ${ifProp('disabled', css`
+    pointer-events: none;
+  `)}
+  .textContainer {
+    width: 100%;
+  }
+`