@mw-kit/mw-ui 0.3.4 → 1.0.3

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

@@ -0,0 +1,226 @@
+import React, { useState } from 'react'
+import { filterObject } from '../../../../functions/formatters'
+
+import useOnClickOut from '../../../../hooks/onClickOut'
+import Button from '../../../Button'
+import Checkbox from '../Checkbox'
+import Input from '../Input'
+import { InputProps } from '../../components/Input/interfaces'
+import Menu from '../../../Menu'
+import { Option } from '../../../Menu/interfaces'
+import Provider, { useContext } from './context'
+import { Data, SelectProps } from './interfaces'
+import * as S from './styles'
+
+const Header = () => {
+  const context = useContext()
+
+  if (!context.props.search && !context.props.multiple) {
+    return <React.Fragment />
+  }
+
+  const [value, setValue] = useState<string>('')
+
+  const {
+    props: { search, options },
+    checked,
+    setChecked,
+  } = context
+
+  const onClick = () =>
+    setChecked((prev) =>
+      prev.length === options.length
+        ? []
+        : options.map((option) => option.value),
+    )
+
+  return (
+    <S.HeaderContainer>
+      {context.props.type === 'select-multiple' && context.props.selectAll && (
+        <S.SelectAllContainer>
+          <b>Selecionados ({checked.length})</b>
+
+          <Button
+            type='button'
+            content='Selecionar todos'
+            appearance='link'
+            onClick={onClick}
+            color='darkBlue'
+          />
+        </S.SelectAllContainer>
+      )}
+
+      {search && (
+        <Input
+          type='search'
+          placeholder='Pesquisa'
+          onChange={(event) => setValue(event.target.value)}
+          value={value}
+          onPressEnter={() => search(value)}
+          icon={{
+            icon: {
+              type: 'feather',
+              icon: 'search',
+            },
+            onClick: () => search(value),
+          }}
+        />
+      )}
+    </S.HeaderContainer>
+  )
+}
+
+const Footer = () => {
+  const context = useContext()
+
+  if (context.props.type !== 'select-multiple') return <React.Fragment />
+
+  const {
+    props: { setValue },
+    checked,
+    setOpen,
+  } = context
+
+  const onClick = () => {
+    setValue([...checked])
+    setOpen(false)
+  }
+
+  return (
+    <Button
+      type='button'
+      content='Aplicar'
+      onClick={onClick}
+      style={{ marginRight: '-3.5px' }}
+    />
+  )
+}
+
+const getOptions = (
+  props: SelectProps,
+  checked: (string | number)[],
+  setChecked: React.Dispatch<React.SetStateAction<(string | number)[]>>,
+): Option<{ value: string | number }>[] => {
+  if (props.type === 'select-multiple') {
+    return props.options.map((option) => {
+      return {
+        label: (
+          <Checkbox
+            type='checkbox'
+            checked={checked.includes(option.value)}
+            label={option.label}
+            onChange={(event) => {
+              const isChecked = event.target.checked
+
+              setChecked((prev) => {
+                const newState = prev.filter((v) => v !== option.value)
+
+                if (isChecked) newState.push(option.value)
+
+                return newState
+              })
+            }}
+            padding={{
+              top: 's3',
+              left: 's3',
+              right: 's3',
+              bottom: 's3',
+            }}
+          />
+        ),
+        onClick: () => {},
+        data: {
+          value: option.value,
+        },
+        keepOpen: true,
+      }
+    })
+  }
+
+  return props.options.map((option) => {
+    return {
+      label: option.label,
+      onClick:
+        option.onClick ||
+        ((_index: number, data: Data) => {
+          props.setValue(data.value)
+        }),
+      data: {
+        value: option.value,
+      },
+    }
+  })
+}
+
+const Select = React.forwardRef(
+  (props: SelectProps, ref?: React.ForwardedRef<HTMLInputElement>) => {
+    const { onScrollEnd, position, disableAutoPosition, search, type } = props
+
+    const [open, setOpen] = useState<boolean>(false)
+    const [checked, setChecked] = useState<(string | number)[]>(
+      Array.isArray(props.value) ? [...props.value] : [],
+    )
+
+    const options = getOptions(props, checked, setChecked)
+
+    const inputProps = filterObject<SelectProps, InputProps>(props, [
+      'type',
+      'onScrollEnd',
+      'options',
+      'position',
+      'disableAutoPosition',
+    ])
+
+    if (props.type === 'select-multiple') {
+      if (props.value.length > 0) {
+        inputProps.value =
+          props.value.length > 1
+            ? `Há ${props.value.length} seleções`
+            : `Há ${props.value.length} seleção`
+      }
+    }
+
+    return (
+      <Provider.Provider value={{ props, open, setOpen, checked, setChecked }}>
+        <S.RelativeContainer ref={useOnClickOut(() => setOpen(false))}>
+          <Input
+            {...inputProps}
+            type='search'
+            readOnly
+            onClick={() => {
+              setOpen((prev) => !prev)
+            }}
+            icon={{
+              position: 'right',
+              icon: {
+                type: 'semantic',
+                icon: open ? 'caret up' : 'caret down',
+                width: '14px',
+              },
+            }}
+            ref={ref}
+          />
+          <Menu
+            open={open}
+            close={() => setOpen(false)}
+            options={options}
+            onScrollEnd={onScrollEnd}
+            width='100%'
+            bordered
+            spacing={type === 'select-multiple' ? undefined : 's3'}
+            position={position}
+            disableAutoPosition={disableAutoPosition}
+            references={{ bottom: '35px' }}
+            before={<Header />}
+            after={<Footer />}
+            scrollHeight={search ? '135px' : '165px'}
+          />
+        </S.RelativeContainer>
+      </Provider.Provider>
+    )
+  },
+)
+
+Select.displayName = 'Select'
+
+export default Select

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

@@ -0,0 +1,49 @@
+import { ElementOrString } from '../../../../interfaces'
+import { Position } from '../../../AbsoluteContainer/interfaces'
+import { InputProps } from '../Input/interfaces'
+
+export interface Data {
+  value: string | number
+}
+
+interface Option extends Data {
+  label: ElementOrString
+  onClick?: (index: number, data: Data) => void
+}
+
+interface CommonProps
+  extends Omit<
+    InputProps,
+    'type' | 'mask' | 'icon' | 'setValue' | 'name' | 'value'
+  > {
+  onScrollEnd?: () => Promise<void>
+  position?: Position
+  disableAutoPosition?: boolean
+  search?: (value: string) => Promise<void>
+}
+
+export interface OneSelectProps extends CommonProps {
+  type: 'select'
+  options: Option[]
+  name?: string
+  setValue: (value: string | number) => void
+  value?: string | number
+}
+
+export interface MultSelectProps extends CommonProps {
+  type: 'select-multiple'
+  options: Option[]
+  setValue: (value: (string | number)[]) => void
+  value: (string | number)[]
+  selectAll?: boolean
+}
+
+export type SelectProps = OneSelectProps | MultSelectProps
+
+export interface ContextInterface {
+  props: SelectProps
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  checked: (string | number)[]
+  setChecked: React.Dispatch<React.SetStateAction<(string | number)[]>>
+}

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

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components'
+
+export const RelativeContainer = styled.div`
+  position: relative;
+`
+export const HeaderContainer = styled.div`
+  ${({ theme }) => css`
+    padding: ${theme.spacings.s3} calc(${theme.spacings.s3} * 0.75)
+      ${theme.spacings.s1} ${theme.spacings.s3};
+  `}
+`
+
+export const SelectAllContainer = styled.div`
+  margin-bottom: ${({ theme }) => theme.spacings.s1};
+  display: flex;
+  justify-content: space-between;
+`

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import { filterObject } from '../../../../functions/formatters'
+import { SwitchProps } from './interfaces'
+import * as S from './styles'
+
+const Switch = (props: SwitchProps) => {
+  const { label, disabled, required, invalid } = props
+
+  const htmlProps = filterObject<
+    SwitchProps,
+    React.InputHTMLAttributes<HTMLInputElement>
+  >(props, ['label', 'invalid', 'required'])
+
+  return (
+    <S.Label
+      disabled={disabled ? 1 : 0}
+      required={required ? 1 : 0}
+      invalid={invalid ? 1 : 0}
+    >
+      <input {...htmlProps} type='checkbox' />
+      <span></span>
+
+      {label && <S.LabelContainer>{label}</S.LabelContainer>}
+    </S.Label>
+  )
+}
+
+export default Switch

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

@@ -0,0 +1,16 @@
+import { ElementOrString } from '../../../../interfaces'
+
+export interface SwitchProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: ElementOrString
+  required?: boolean
+  invalid?: boolean
+  type: 'switch'
+}
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  disabled?: 1 | 0
+  required?: 1 | 0
+  invalid?: 1 | 0
+}

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

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components'
+import { LabelProps } from './interfaces'
+
+export const LabelContainer = styled.div`
+  ${({ theme }) => theme.useTypography('p')}
+  line-height: 14px;
+  display: flex;
+  align-items: center;
+`
+
+export const Label = styled.label<LabelProps>`
+  display: flex;
+  gap: ${({ theme }) => theme.spacings.s1};
+  position: relative;
+
+  ${({ disabled }) => {
+    if (!disabled) {
+      return css`
+        > span {
+          cursor: pointer;
+        }
+      `
+    }
+    return css`
+      opacity: 0.5;
+    `
+  }}
+
+  ${({ required }) => {
+    if (!required) return
+    return css`
+      > ${LabelContainer} {
+        :after {
+          content: '*';
+        }
+      }
+    `
+  }}
+
+  ${({ invalid }) => {
+    if (!invalid) {
+      return css`
+        > span:before {
+          border-color: ${({ theme }) => theme.colors.lightGrey};
+        }
+        > input:checked + span {
+          background-color: ${({ theme }) => theme.colors.blue};
+        }
+      `
+    }
+    return css`
+      > span:before {
+        border-color: ${({ theme }) => theme.colors.warningRed};
+      }
+      > input:checked + span {
+        background-color: ${({ theme }) => theme.colors.warningRed};
+      }
+    `
+  }}
+
+  > input {
+    position: absolute;
+    height: 0%;
+    width: 0%;
+    opacity: 0;
+  }
+
+  > span {
+    position: relative;
+    width: 50px;
+    height: calc(${({ theme }) => theme.spacings.s4} + 1px);
+    background-color: ${({ theme }) => theme.colors.warningGray};
+    border-radius: 20px;
+    transition-property: background-color;
+    transition-duration: 0.4s;
+    transition-timing-function: ease-in-out;
+    box-sizing: content-box;
+    :before {
+      content: '';
+      transition-property: left;
+      transition-duration: 0.4s;
+      transition-timing-function: ease-in-out;
+      position: absolute;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100%;
+      left: 0;
+      box-shadow: 0px 1px 3px ${({ theme }) => theme.getColor('black', 10)};
+      width: calc(${({ theme }) => theme.spacings.s4} - 1px);
+      height: calc(${({ theme }) => theme.spacings.s4} - 1px);
+      background-color: ${({ theme }) => theme.colors.white};
+    }
+  }
+
+  > input:checked + span {
+    :before {
+      left: calc(100% - ${({ theme }) => theme.spacings.s4} - 1px);
+    }
+  }
+`

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

@@ -0,0 +1,152 @@
+import React from 'react'
+import Input from '../Input'
+import { TimeProps } from './interfaces'
+
+const mask = (v: string, seconds?: boolean) => {
+  v = v.replace(/[^0-9\s]/g, '')
+
+  while (v.length > 0 && parseInt(v[0]) > 2) {
+    v = v.substring(1)
+  }
+
+  if (v.length > 1) {
+    if (v[0] === '2') {
+      while (v.length > 1 && parseInt(v[1]) > 3) {
+        v = v[0] + v.substring(2)
+      }
+    }
+  }
+
+  if (v.length > 2) {
+    while (v.length > 2 && parseInt(v[2]) > 5) {
+      v = v.substring(0, 2) + v.substring(3)
+    }
+  }
+
+  if (v.length > 4) {
+    while (v.length > 4 && parseInt(v[4]) > 5) {
+      v = v.substring(0, 4) + v.substring(5)
+    }
+  }
+
+  v = v.substring(0, seconds ? 6 : 4)
+
+  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 Time = React.forwardRef(
+  (props: TimeProps, ref?: React.ForwardedRef<HTMLInputElement>) => {
+    const { seconds } = props
+
+    const _onKeyDown = props.onKeyDown || (() => {})
+
+    const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      const target = event.target as HTMLInputElement
+
+      const todayDate = new Date()
+
+      const curH = todayDate.getHours()
+      const curM = todayDate.getMinutes()
+      const curS = todayDate.getSeconds()
+
+      const value = target.value.replace(/[^0-9\s]/g, '')
+
+      let tmp = value.substring(0, 2)
+      let h = tmp.length === 0 ? curH : parseInt(tmp.padEnd(2, '0'))
+
+      tmp = value.substring(2, 4)
+      let m = tmp.length === 0 ? curM : parseInt(tmp.padEnd(2, '0'))
+
+      tmp = value.substring(4, 6)
+      let s = tmp.length === 0 ? curS : parseInt(tmp.padEnd(2, '0'))
+
+      if (event.key === 'ArrowUp') {
+        const date = new Date()
+        date.setHours(h)
+        date.setMinutes(m)
+        date.setSeconds(s)
+
+        if (seconds) {
+          date.setSeconds(s + 1)
+
+          h = date.getHours()
+          m = date.getMinutes()
+          s = date.getSeconds()
+
+          target.value = [
+            h.toString().padStart(2, '0'),
+            m.toString().padStart(2, '0'),
+            s.toString().padStart(2, '0'),
+          ].join(':')
+        } else {
+          date.setMinutes(m + 1)
+
+          h = date.getHours()
+          m = date.getMinutes()
+          s = date.getSeconds()
+
+          target.value = [
+            h.toString().padStart(2, '0'),
+            m.toString().padStart(2, '0'),
+          ].join(':')
+        }
+      } else if (event.key === 'ArrowDown') {
+        const date = new Date()
+        date.setHours(h)
+        date.setMinutes(m)
+        date.setSeconds(s)
+
+        if (seconds) {
+          date.setSeconds(s - 1)
+
+          h = date.getHours()
+          m = date.getMinutes()
+          s = date.getSeconds()
+
+          target.value = [
+            h.toString().padStart(2, '0'),
+            m.toString().padStart(2, '0'),
+            s.toString().padStart(2, '0'),
+          ].join(':')
+        } else {
+          date.setMinutes(m - 1)
+
+          h = date.getHours()
+          m = date.getMinutes()
+          s = date.getSeconds()
+
+          target.value = [
+            h.toString().padStart(2, '0'),
+            m.toString().padStart(2, '0'),
+          ].join(':')
+        }
+      }
+
+      _onKeyDown(event)
+    }
+
+    const placeholder =
+      props.placeholder === undefined
+        ? seconds
+          ? '––:––:––'
+          : '––:––'
+        : props.placeholder
+
+    return (
+      <Input
+        {...props}
+        type='text'
+        placeholder={placeholder}
+        mask={(v: string) => mask(v, seconds)}
+        onKeyDown={onKeyDown}
+        ref={ref}
+      />
+    )
+  },
+)
+
+Time.displayName = 'Time'
+
+export default Time

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

@@ -0,0 +1,6 @@
+import { InputProps } from '../Input/interfaces'
+
+export interface TimeProps extends Omit<InputProps, 'type' | 'mask'> {
+  type: 'time'
+  seconds?: boolean
+}

package/src/components/Input/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+
+import DefaultInput from './components/Input'
+import { InputProps as DefaultInputProps } from './components/Input/interfaces'
+
+import Checkbox from './components/Checkbox'
+import { CheckboxProps } from './components/Checkbox/interfaces'
+
+import Date from './components/Date'
+import { DateProps } from './components/Date/interfaces'
+
+import Time from './components/Time'
+import { TimeProps } from './components/Time/interfaces'
+
+import Select from './components/Select'
+import { MultSelectProps, OneSelectProps } from './components/Select/interfaces'
+
+import Password from './components/Password'
+import { PasswordProps } from './components/Password/interfaces'
+
+import Phone, { getDetails } from './components/Phone'
+import { PhoneProps } from './components/Phone/interfaces'
+
+import DatePicker from './components/DatePicker'
+import { DatePickerProps } from './components/DatePicker/interfaces'
+
+import { SwitchProps } from './components/Switch/interfaces'
+import Switch from './components/Switch'
+
+import Range from './components/Range'
+import { RangeProps } from './components/Range/interfaces'
+
+import { RadioButtonProps } from './components/RadioButton/interfaces'
+import RadioButton from './components/RadioButton'
+
+export type Props =
+  | DateProps
+  | TimeProps
+  | CheckboxProps
+  | OneSelectProps
+  | MultSelectProps
+  | PasswordProps
+  | PhoneProps
+  | DatePickerProps
+  | RangeProps
+  | DefaultInputProps
+  | SwitchProps
+  | RadioButtonProps
+
+const Input = React.forwardRef(
+  (props: Props, ref?: React.ForwardedRef<HTMLInputElement>) => {
+    switch (props.type) {
+      case 'date': {
+        return <Date {...props} ref={ref} />
+      }
+      case 'time': {
+        return <Time {...props} ref={ref} />
+      }
+      case 'checkbox': {
+        return <Checkbox {...props} ref={ref} />
+      }
+      case 'select': {
+        return <Select {...props} ref={ref} />
+      }
+      case 'select-multiple': {
+        return <Select {...props} ref={ref} />
+      }
+      case 'password': {
+        return <Password {...props} ref={ref} />
+      }
+      case 'phone': {
+        return <Phone {...props} ref={ref} />
+      }
+      case 'datepicker': {
+        return <DatePicker {...props} ref={ref} />
+      }
+      case 'range': {
+        return <Range {...props} ref={ref} />
+      }
+      case 'switch': {
+        return <Switch {...props} />
+      }
+      case 'radio': {
+        return <RadioButton {...props} />
+      }
+      default: {
+        return <DefaultInput {...props} ref={ref} />
+      }
+    }
+  },
+)
+
+Input.displayName = 'Input'
+
+export default Input