@mw-kit/mw-ui 0.3.4 → 1.0.3

package/src/components/Input/components/Date/index.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from 'react'
+
+import {
+  dateToIsoString,
+  filterObject,
+  isoStringToDate,
+} from '../../../../functions/formatters'
+import useOnClickOut from '../../../../hooks/onClickOut'
+
+import Calendar from '../../../Calendar'
+import { IconProps } from '../../../Icon/interfaces'
+
+import Input from '../Input'
+import { InputProps } from '../Input/interfaces'
+
+import { JSDate } from './functions'
+import { DateProps } from './interfaces'
+import * as S from './styles'
+
+const isLeapYear = (year: number): boolean => {
+  if (year % 4 !== 0) return false
+  else if (year % 100 !== 0) return true
+  else if (year % 400 !== 0) return false
+  else return true
+}
+
+const mask = (v: string) => {
+  v = v.replace(/[^0-9\s]/g, '')
+
+  while (v.length > 0 && parseInt(v[0]) > 3) {
+    v = v.substring(1)
+  }
+
+  if (v.length > 1) {
+    if (v[0] === '3') {
+      while (v.length > 1 && parseInt(v[1]) > 1) {
+        v = v[0] + v.substring(2)
+      }
+    }
+  }
+
+  if (v.length > 2) {
+    while (v.length > 2 && parseInt(v[2]) > 1) {
+      v = v.substring(0, 2) + v.substring(3)
+    }
+  }
+
+  if (v.length > 3) {
+    if (v[2] === '1') {
+      while (v.length > 3 && parseInt(v[3]) > 2) {
+        v = v.substring(0, 3) + v.substring(4)
+      }
+    }
+  }
+
+  v = v.substring(0, 8)
+
+  const date = [v.substring(0, 2), v.substring(2, 4), v.substring(4)]
+
+  if (date[1] === '02') {
+    const d = parseInt(date[0])
+
+    if (date[2].length < 4 || isLeapYear(parseInt(date[2]))) {
+      // se for ano nao estiver setado, ou se for bissexto, o dia maximo de fevereiro deve ser 29
+      if (d > 29) {
+        date[0] = '29'
+      }
+    } else if (d > 28) {
+      // se for ano estiver setado e nao for bissexto, o dia maximo de fevereiro deve ser 28
+      date[0] = '28'
+    }
+  } else if (['04', '06', '09', '11'].includes(date[1]) && date[0] === '31') {
+    // meses com 30 dias
+    date[0] = '30'
+  }
+
+  v = date.join('')
+
+  if (v.length < 3) return v
+  else if (v.length < 5) return v.substring(0, 2) + '/' + v.substring(2)
+  else return v.substring(0, 2) + '/' + v.substring(2, 4) + '/' + v.substring(4)
+}
+
+const Date = React.forwardRef(
+  (props: DateProps, ref?: React.ForwardedRef<HTMLInputElement>) => {
+    const { picker, value, min, max } = props
+
+    const setValue = props.setValue || (() => {})
+
+    const [open, setOpen] = useState<boolean>(false)
+
+    const _onKeyDown = props.onKeyDown || (() => {})
+
+    const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      const target = event.target as HTMLInputElement
+
+      const todayDate = new JSDate()
+
+      const curD = todayDate.getDate()
+      const curM = todayDate.getMonth() + 1
+      const curY = todayDate.getFullYear()
+
+      const value = target.value.replace(/[^0-9\s]/g, '')
+
+      let tmp = value.substring(0, 2)
+      const d = tmp.length === 0 ? curD : parseInt(tmp.padEnd(2, '0'))
+
+      tmp = value.substring(2, 4)
+      const m = tmp.length === 0 ? curM : parseInt(tmp.padEnd(2, '0'))
+
+      tmp = value.substring(4, 8)
+      const y = tmp.length === 0 ? curY : parseInt(tmp.padEnd(2, '0'))
+
+      if (event.key === 'ArrowUp') {
+        const date = new JSDate(`${y}-${m}-${d} 00:00:00`)
+        date.setDate(date.getDate() + 1)
+
+        if (!max || date <= max) {
+          target.value = dateToIsoString(date)
+        }
+      } else if (event.key === 'ArrowDown') {
+        const date = new JSDate(`${y}-${m}-${d} 00:00:00`)
+        date.setDate(date.getDate() - 1)
+
+        if (!min || date >= min) {
+          target.value = dateToIsoString(date)
+        }
+      }
+
+      _onKeyDown(event)
+    }
+
+    const placeholder =
+      props.placeholder === undefined ? 'dd/mm/aaaa' : props.placeholder
+
+    const icon = picker
+      ? {
+          icon: {
+            type: 'feather',
+            icon: 'calendar',
+          } as IconProps,
+          position: 'right' as 'right' | 'left',
+          onClick: () => setOpen((prev) => !prev),
+        }
+      : undefined
+
+    const inputProps = filterObject<DateProps, InputProps>(props, [
+      'picker',
+      'min',
+      'max',
+    ])
+
+    return (
+      <S.RelativeContainer ref={useOnClickOut(() => setOpen(false))}>
+        <Input
+          {...inputProps}
+          type='text'
+          placeholder={placeholder}
+          mask={mask}
+          onKeyDown={onKeyDown}
+          icon={icon}
+          ref={ref}
+        />
+
+        {open && (
+          <Calendar
+            initalValue={value ? isoStringToDate(value) : undefined}
+            onSubmit={{
+              onClick: (date) => {
+                if (!date) return
+                const newValue = dateToIsoString(date)
+                setValue(newValue)
+                setOpen(false)
+              },
+            }}
+            min={min}
+            max={max}
+            references={{ bottom: '35px' }}
+          />
+        )}
+      </S.RelativeContainer>
+    )
+  },
+)
+
+Date.displayName = 'Date'
+
+export default Date

package/src/components/Input/components/Date/interfaces.ts

@@ -0,0 +1,10 @@
+import { InputProps } from '../Input/interfaces'
+
+export interface DateProps
+  extends Omit<InputProps, 'type' | 'mask' | 'icon' | 'min' | 'max'> {
+  type: 'date'
+  picker?: boolean
+  value?: string
+  max?: Date
+  min?: Date
+}

package/src/components/Input/components/Date/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const RelativeContainer = styled.div`
+  position: relative;
+`

package/src/components/Input/components/DatePicker/index.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react'
+import {
+  dateToIsoString,
+  filterObject,
+  isoStringToDate,
+} from '../../../../functions/formatters'
+import useOnClickOut from '../../../../hooks/onClickOut'
+import Calendar from '../../../Calendar'
+import Icon from '../../../Icon'
+import { IconProps } from '../../../Icon/interfaces'
+import Input from '../Input'
+import { InputProps } from '../Input/interfaces'
+import { DatePickerProps } from './interfaces'
+import * as S from './styles'
+
+const DatePicker = React.forwardRef(
+  (props: DatePickerProps, ref?: React.ForwardedRef<HTMLInputElement>) => {
+    const { picker, value, setValue, min, max } = props
+
+    const disabled = props.disabled || props.loading
+
+    const today = dateToIsoString(new Date())
+
+    const [open, setOpen] = useState<boolean>(false)
+
+    useEffect(() => {
+      const date = isoStringToDate(value)
+      if (!date) {
+        setValue(dateToIsoString(new Date()))
+      }
+    }, [value])
+
+    const onAdd = () => {
+      const date = isoStringToDate(value) || new Date()
+      date.setDate(date.getDate() + 1)
+      if (max && date > max) return
+      setValue(dateToIsoString(date))
+    }
+
+    const onSub = () => {
+      const date = isoStringToDate(value) || new Date()
+      date.setDate(date.getDate() - 1)
+      if (min && date < min) return
+      setValue(dateToIsoString(date))
+    }
+
+    const icon = picker
+      ? {
+          icon: {
+            type: 'feather',
+            icon: 'calendar',
+            width: '24px',
+          } as IconProps,
+          position: 'right' as 'right' | 'left',
+          onClick: () => setOpen((prev) => !prev),
+        }
+      : undefined
+
+    const inputProps = filterObject<DatePickerProps, InputProps>(props, [
+      'picker',
+      'min',
+      'max',
+    ])
+
+    return (
+      <S.RelativeContainer ref={useOnClickOut(() => setOpen(false))}>
+        <Input {...inputProps} type='text' icon={icon} ref={ref} htmlDisabled />
+
+        <S.Container
+          iconWidth={picker ? '24px' : '0px'}
+          invalid={props.invalid ? 1 : 0}
+          disabled={props.disabled ? 1 : 0}
+        >
+          <S.Button
+            type='button'
+            onClick={disabled ? undefined : onSub}
+            disabled={
+              disabled ||
+              (() => {
+                if (!min) return undefined
+                const v = isoStringToDate(value)
+                if (!v) return undefined
+
+                return v <= min
+              })()
+            }
+          >
+            <Icon
+              type='feather'
+              icon='chevron_left'
+              color={props.invalid ? 'warningRed' : 'grey'}
+              strokeWidth='3px'
+            />
+          </S.Button>
+
+          <div>{today === value ? 'Hoje' : value}</div>
+
+          <S.Button
+            type='button'
+            onClick={disabled ? undefined : onAdd}
+            disabled={
+              disabled ||
+              (() => {
+                if (!max) return undefined
+                const v = isoStringToDate(value)
+                if (!v) return undefined
+
+                return v >= max
+              })()
+            }
+          >
+            <Icon
+              type='feather'
+              icon='chevron_right'
+              color={props.invalid ? 'warningRed' : 'grey'}
+              strokeWidth='3px'
+            />
+          </S.Button>
+        </S.Container>
+
+        {open && (
+          <Calendar
+            initalValue={value ? isoStringToDate(value) : undefined}
+            onSubmit={{
+              onClick: (date) => {
+                if (!date) return
+                setValue(dateToIsoString(date))
+                setOpen(false)
+              },
+            }}
+            min={min}
+            max={max}
+            references={{ bottom: '35px' }}
+          />
+        )}
+      </S.RelativeContainer>
+    )
+  },
+)
+
+DatePicker.displayName = 'DatePicker'
+
+export default DatePicker

package/src/components/Input/components/DatePicker/interfaces.ts

@@ -0,0 +1,21 @@
+import { InputProps } from '../Input/interfaces'
+
+export interface DatePickerProps
+  extends Omit<
+    InputProps,
+    | 'type'
+    | 'mask'
+    | 'icon'
+    | 'htmlDisabled'
+    | 'clearable'
+    | 'onPressEnter'
+    | 'min'
+    | 'max'
+  > {
+  type: 'datepicker'
+  picker?: boolean
+  value: string
+  setValue: (value: string) => void
+  max?: Date
+  min?: Date
+}

package/src/components/Input/components/DatePicker/styles.ts

@@ -0,0 +1,64 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const RelativeContainer = styled.div`
+  position: relative;
+
+  input {
+    color: transparent;
+  }
+`
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  iconWidth: string
+  invalid: 1 | 0
+  disabled: 1 | 0
+}
+
+export const Container = styled.div<ContainerProps>`
+  position: absolute;
+  bottom: 1px;
+  left: 1px;
+  width: calc(100% - 2px - ${({ iconWidth, theme }) => `${iconWidth} - ${theme.spacings.s3}`});
+  height: 33px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${({ theme }) =>
+    `${theme.spacings.s2} 0 ${theme.spacings.s2} ${theme.spacings.s3}`};
+  border-radius: 4px;
+
+  ${({ invalid, theme }) => {
+    if (!invalid) return
+
+    return css`
+      color: ${theme.colors.warningRed};
+    `
+  }}
+
+  ${({ disabled }) => {
+    if (!disabled) return
+
+    return css`
+      opacity: 0.5;
+    `
+  }}
+`
+
+export const Button = styled.button`
+  display: flex;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  box-shadow: none;
+
+  ${({ onClick }) => {
+    if (!onClick) return
+
+    return css`
+      :not(:disabled) {
+        cursor: pointer;
+      }
+    `
+  }};
+`

package/src/components/Input/components/Input/functions.ts

@@ -0,0 +1,35 @@
+import { Mask, MaskFunction, MaskReplace, MaskReplaceArray } from './interfaces'
+
+const isMaskFunction = (value?: Mask): value is MaskFunction => {
+  return typeof value === 'function'
+}
+
+const isMaskReplace = (value?: Mask): value is MaskReplace => {
+  return Array.isArray(value) && value[0] instanceof RegExp
+}
+
+const isMaskReplaceArray = (value?: Mask): value is MaskReplaceArray => {
+  return Array.isArray(value) && Array.isArray(value[0])
+}
+
+export const getMask = (mask?: Mask): MaskFunction => {
+  if (isMaskFunction(mask)) {
+    return mask
+  } else if (isMaskReplace(mask)) {
+    const [find, replace] = mask
+    return (value: string) => value.replace(find, replace)
+  } else if (isMaskReplaceArray(mask)) {
+    return (value: string) => {
+      let newValue = value
+
+      mask.forEach((e) => {
+        const [find, replace] = e
+        newValue = newValue.replace(find, replace)
+      })
+
+      return newValue
+    }
+  }
+
+  return (value: string) => value
+}

package/src/components/Input/components/Input/index.tsx

@@ -0,0 +1,204 @@
+import React from 'react'
+
+import MwIcon from '../../../Icon'
+
+import { filterObject } from '../../../../functions/formatters'
+import { IconProps } from '../../../Icon/interfaces'
+import Loader from '../../../Loader'
+import { getMask } from './functions'
+
+import { InputProps, StyledInputProps } from './interfaces'
+import * as S from './styles'
+
+const Input = React.forwardRef(
+  (props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+    const {
+      label,
+      required,
+      invalid,
+      disabled,
+      loading,
+      clearable,
+      onPressEnter,
+      htmlDisabled,
+      width,
+    } = {
+      ...props,
+    }
+
+    const mask = getMask(props.mask)
+
+    const intInvalid = invalid === undefined ? undefined : invalid ? 1 : 0
+    const intRequired = required === undefined ? undefined : required ? 1 : 0
+    const intDisabled = disabled === undefined ? undefined : disabled ? 1 : 0
+
+    let position
+    let iconWidth
+    let iconSubmit
+    let iconOnClick
+    let icon: IconProps | undefined
+
+    if (props.icon) {
+      icon = { ...props.icon.icon }
+
+      position = props.icon.position || 'right'
+
+      if (intInvalid) icon.color = 'warningRed'
+
+      iconWidth = icon.width
+      iconSubmit = props.icon.submit
+      iconOnClick = props.icon.onClick
+    }
+
+    const inputProps = filterObject<InputProps, StyledInputProps>(
+      props,
+      [
+        'label',
+        'invalid',
+        'required',
+        'icon',
+        'mask',
+        'loading',
+        'clearable',
+        'setValue',
+        'onPressEnter',
+        'htmlDisabled',
+        'width',
+      ],
+      {
+        invalid: intInvalid,
+        type: 'text',
+      },
+    )
+
+    const onChange = inputProps.onChange || (() => {})
+    const setValue = props.setValue || (() => {})
+
+    inputProps.onChange = (event) => {
+      event.target.value = mask(event.target.value)
+      onChange(event)
+      setValue(event.target.value)
+    }
+
+    if (inputProps.onKeyDown || onPressEnter) {
+      const onKeyDown = inputProps.onKeyDown || (() => {})
+
+      const _onPressEnter = onPressEnter
+        ? (event: React.KeyboardEvent<HTMLInputElement>) => {
+            event.preventDefault()
+            onPressEnter(event)
+          }
+        : () => {}
+
+      inputProps.onKeyDown = (event) => {
+        const target = event.target as HTMLInputElement
+        const v = target.value
+
+        onKeyDown(event)
+
+        if (v !== target.value) setValue(target.value)
+
+        if (event.key === 'Enter') {
+          _onPressEnter(event)
+        }
+      }
+    }
+
+    if (inputProps.onKeyUp) {
+      const onKeyUp = inputProps.onKeyUp
+
+      inputProps.onKeyUp = (event) => {
+        const target = event.target as HTMLInputElement
+        const v = target.value
+
+        onKeyUp(event)
+
+        if (v !== target.value) setValue(target.value)
+      }
+    }
+
+    if (inputProps.onKeyDownCapture) {
+      const onKeyDownCapture = inputProps.onKeyDownCapture
+
+      inputProps.onKeyDownCapture = (event) => {
+        const target = event.target as HTMLInputElement
+        const v = target.value
+
+        onKeyDownCapture(event)
+
+        if (v !== target.value) setValue(target.value)
+      }
+    }
+
+    if (inputProps.onKeyUpCapture) {
+      const onKeyUpCapture = inputProps.onKeyUpCapture
+
+      inputProps.onKeyUpCapture = (event) => {
+        const target = event.target as HTMLInputElement
+        const v = target.value
+
+        onKeyUpCapture(event)
+
+        if (v !== target.value) setValue(target.value)
+      }
+    }
+
+    if (loading) {
+      position = position || 'left'
+      icon = {
+        type: 'jsx',
+        icon: <Loader size='14px' />,
+        width: '14px',
+      }
+      inputProps.disabled = true
+    } else if (clearable) {
+      position = position || 'right'
+
+      iconOnClick =
+        typeof clearable === 'function' ? clearable : () => setValue('')
+
+      icon = {
+        type: 'feather',
+        icon: 'x',
+        width: '14px',
+      }
+    }
+
+    const iconProps = position
+      ? {
+          position: position as 'left' | 'right',
+          width: iconWidth || '24px',
+        }
+      : undefined
+
+    if (htmlDisabled) inputProps.disabled = true
+
+    return (
+      <S.Label
+        required={intRequired}
+        disabled={intDisabled}
+        invalid={intInvalid}
+        icon={iconProps}
+        width={width}
+      >
+        <div>{label}</div>
+
+        <S.Input {...inputProps} ref={ref} />
+
+        {icon && (
+          <S.IconContainer
+            type={iconSubmit ? 'submit' : 'button'}
+            onClick={iconOnClick}
+            disabled={props.disabled}
+          >
+            <MwIcon {...icon} />
+          </S.IconContainer>
+        )}
+      </S.Label>
+    )
+  },
+)
+
+Input.displayName = 'Input'
+
+export default Input