design-react-kit 3.3.3 → 4.0.0

package/src/components/Input/Input.js

@@ -1,261 +0,0 @@
-/* eslint react/prefer-stateless-function: 0 */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Util } from 'reactstrap'
-import isNumber from 'is-number'
-
-import InputContainer from './InputContainer'
-import Icon from '../Icon/Icon'
-import {
-  getTag,
-  getFormControlClass,
-  getClasses,
-  getInfoTextControlClass
-} from './utils'
-
-const { deprecated, warnOnce } = Util
-
-const propTypes = {
-  children: PropTypes.node,
-  type: PropTypes.string,
-  size: PropTypes.string,
-  label: PropTypes.string,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-  id: PropTypes.string,
-  infoText: PropTypes.string,
-  normalized: PropTypes.bool,
-  bsSize: PropTypes.string,
-  state: deprecated(
-    PropTypes.string,
-    'Please use the props "valid" and "invalid" to indicate the state.'
-  ),
-  valid: PropTypes.bool,
-  invalid: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  innerRef: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.func,
-    PropTypes.string
-  ]),
-  static: deprecated(PropTypes.bool, 'Please use the prop "plaintext"'),
-  plaintext: PropTypes.bool,
-  addon: PropTypes.bool,
-  className: PropTypes.string,
-  cssModule: PropTypes.object
-}
-
-const defaultProps = {
-  type: 'text'
-}
-
-class Input extends React.Component {
-  state = {
-    isFocused: false,
-    hidden: true,
-    icon: true
-  }
-
-  toggleFocusLabel = () => {
-    this.setState({
-      isFocused: true
-    })
-  }
-
-  toggleBlurLabel = e => {
-    if (e.target.value === '') {
-      this.setState({
-        isFocused: !this.state.isFocused
-      })
-    }
-  }
-
-  toggleShow = () => {
-    this.setState({ hidden: !this.state.hidden, icon: !this.state.icon })
-  }
-
-  render() {
-    const {
-      id,
-      className,
-      cssModule,
-      type,
-      state,
-      tag,
-      addon,
-      static: staticInput,
-      plaintext,
-      innerRef,
-      label,
-      infoText,
-      placeholder,
-      normalized,
-      value,
-      ...attributes
-    } = this.props
-    let { bsSize, valid, invalid } = this.props
-
-    const Tag = getTag({ tag, plaintext, staticInput, type })
-    const formControlClass = getFormControlClass(
-      {
-        plaintext,
-        staticInput,
-        type,
-        addon
-      },
-      cssModule
-    )
-    const infoTextControlClass = getInfoTextControlClass(
-      { valid, invalid },
-      cssModule
-    )
-
-    if (state && valid == null && invalid == null) {
-      invalid = state === 'danger'
-      valid = state === 'success'
-    }
-
-    if (attributes.size && !isNumber(attributes.size)) {
-      warnOnce(
-        'Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.'
-      )
-      bsSize = attributes.size
-      delete attributes.size
-    }
-
-    if (Tag === 'input' || typeof tag !== 'string') {
-      attributes.type = type
-    }
-
-    if (
-      attributes.children &&
-      !(
-        plaintext ||
-        staticInput ||
-        type === 'select' ||
-        typeof Tag !== 'string' ||
-        Tag === 'select'
-      )
-    ) {
-      warnOnce(
-        `Input with a type of "${type}" cannot have children. Please use "value"/"defaultValue" instead.`
-      )
-      delete attributes.children
-    }
-
-    const inputPassword = attributes.type === 'password'
-
-    // Styling
-    const {
-      activeClass,
-      infoTextClass,
-      inputClasses,
-      wrapperClass
-    } = getClasses(
-      className,
-      {
-        valid,
-        invalid,
-        bsSize,
-        placeholder,
-        value,
-        label,
-        infoText,
-        normalized,
-        inputPassword,
-        formControlClass,
-        infoTextControlClass,
-        isFocused: this.state.isFocused
-      },
-      cssModule
-    )
-
-    // set of attributes always shared by the Input components
-    const sharedAttributes = {
-      id,
-      onFocus: this.toggleFocusLabel,
-      onBlur: this.toggleBlurLabel,
-      value: value,
-      ref: innerRef
-    }
-
-    // set of attributes always shared by the wrapper component
-    const containerProps = {
-      id,
-      activeClass,
-      label,
-      infoTextClass,
-      infoText,
-      wrapperClass
-    }
-
-    if (placeholder) {
-      return (
-        <InputContainer {...containerProps}>
-          <Tag
-            {...attributes}
-            {...sharedAttributes}
-            className={inputClasses}
-            placeholder={placeholder}
-          />
-        </InputContainer>
-      )
-    }
-
-    if (inputPassword) {
-      return (
-        <InputContainer {...containerProps}>
-          <Tag
-            {...attributes}
-            {...sharedAttributes}
-            type={this.state.hidden ? 'password' : 'text'}
-            className={inputClasses}
-            placeholder={placeholder}
-          />
-          <span className="password-icon" aria-hidden="true">
-            <Icon
-              size="sm"
-              icon={`it-password-${this.state.icon ? 'visible' : 'invisible'}`}
-              className="password-icon-visible"
-              onClick={this.toggleShow}
-            />
-          </span>
-        </InputContainer>
-      )
-    }
-    if (normalized) {
-      return (
-        <InputContainer {...containerProps}>
-          <Tag
-            {...attributes}
-            {...sharedAttributes}
-            className={inputClasses}
-            readOnly
-          />
-        </InputContainer>
-      )
-    }
-    if (label || infoText) {
-      return (
-        <InputContainer {...containerProps}>
-          <Tag {...attributes} {...sharedAttributes} className={inputClasses} />
-        </InputContainer>
-      )
-    }
-
-    return (
-      <Tag
-        {...attributes}
-        ref={innerRef}
-        className={inputClasses}
-        {...sharedAttributes}
-      />
-    )
-  }
-}
-
-Input.propTypes = propTypes
-Input.defaultProps = defaultProps
-
-export default Input

package/src/components/Input/InputContainer.js

@@ -1,39 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const propTypes = {
-  value: PropTypes.string,
-  id: PropTypes.string,
-  label: PropTypes.string,
-  infoText: PropTypes.string,
-  wrapperClass: PropTypes.string,
-  activeClass: PropTypes.string,
-  infoTextClass: PropTypes.string,
-  children: PropTypes.node
-}
-const defaultProps = {}
-
-const InputContainer = ({
-  id,
-  activeClass,
-  label,
-  infoTextClass,
-  infoText,
-  wrapperClass,
-  children
-}) => {
-  return (
-    <div className={wrapperClass}>
-      {children}
-      <label htmlFor={id} className={activeClass}>
-        {label}
-      </label>
-      <small className={infoTextClass}>{infoText}</small>
-    </div>
-  )
-}
-
-InputContainer.propTypes = propTypes
-InputContainer.defaultProps = defaultProps
-
-export default InputContainer

package/src/components/Input/utils.js

@@ -1,126 +0,0 @@
-import classNames from 'classnames'
-import { Util } from 'reactstrap'
-const { mapToCssModules } = Util
-
-function getFormControlClassInternal({ plaintext, staticInput, type, addon }) {
-  const formControlClass = 'form-control'
-  if (plaintext || staticInput) {
-    return `${formControlClass}-plaintext`
-  }
-  if (type === 'file') {
-    return `${formControlClass}-file`
-  }
-  if (['radio', 'checkbox'].indexOf(type) > -1) {
-    if (addon) {
-      return null
-    }
-  }
-  return formControlClass
-}
-
-export function getFormControlClass(props, cssModule) {
-  return mapToCssModules(getFormControlClassInternal(props), cssModule)
-}
-
-export function getInfoTextControlClass({ valid, invalid }, cssModule) {
-  return mapToCssModules(
-    classNames({
-      'form-text text-muted': valid || invalid
-    }),
-    cssModule
-  )
-}
-
-export function getTag({ tag, plaintext, staticInput, type }) {
-  if (tag) {
-    return tag
-  }
-  if (['radio', 'checkbox'].indexOf(type) > -1) {
-    return 'input'
-  }
-  if ((plaintext, staticInput)) {
-    return 'p'
-  }
-  return 'input'
-}
-
-export function getClasses(
-  className,
-  {
-    isFocused,
-    valid,
-    invalid,
-    bsSize,
-    placeholder,
-    value,
-    label,
-    infoText,
-    normalized,
-    inputPassword,
-    formControlClass,
-    infoTextControlClass
-  },
-  cssModule
-) {
-  const hasPlainCondition = placeholder || label || infoText
-  const baseCondition = hasPlainCondition && !normalized && !inputPassword
-  const passwordOnlyCondition =
-    inputPassword && !hasPlainCondition && !normalized
-  const normalizedOnlyCondition =
-    normalized && !hasPlainCondition && !inputPassword
-
-  const classes = mapToCssModules(
-    classNames(
-      className,
-      {
-        'is-invalid': invalid,
-        'is-valid': valid,
-        [`form-control-${bsSize}`]: bsSize
-      },
-      formControlClass
-    ),
-    cssModule
-  )
-  const wrapperClass = mapToCssModules(
-    classNames(className, 'form-group'),
-    cssModule
-  )
-  const infoTextClass = mapToCssModules(
-    classNames(
-      {
-        'valid-feedback': valid,
-        'invalid-feedback': invalid
-      },
-      infoTextControlClass
-    ),
-    cssModule
-  )
-
-  const inputClasses = mapToCssModules(
-    classNames(
-      classes,
-      !baseCondition && {
-        // we can model here only if stylings
-        'form-control-plaintext': normalizedOnlyCondition,
-        'form-control': passwordOnlyCondition,
-        'input-password': passwordOnlyCondition,
-        'focus--mouse': passwordOnlyCondition || normalizedOnlyCondition
-      }
-    ),
-    cssModule
-  )
-
-  const activeClass = mapToCssModules(
-    classNames({
-      active: isFocused || placeholder || value
-    }),
-    cssModule
-  )
-
-  return {
-    wrapperClass,
-    inputClasses,
-    activeClass,
-    infoTextClass
-  }
-}

package/src/components/LinkList/LinkList.js

@@ -1,65 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /** Da utilizzare in caso di titolo principale della lista. Passare una componente React da mostrare come titolo */
-  header: PropTypes.node,
-  /** Classi aggiuntive da usare per il componente lista del LinkList */
-  className: PropTypes.string,
-  /** Classi aggiuntive da usare per il componente wrapper del LinkList */
-  wrapperClassName: PropTypes.string,
-  /** Quando è abilitato gestisce una lista in cui ciascun elemento è composto da più componenti/elementi. */
-  multiline: PropTypes.bool,
-  sublist: PropTypes.bool,
-  avatar: PropTypes.bool
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const LinkList = props => {
-  const {
-    className,
-    wrapperClassName,
-    tag: Tag,
-    multiline,
-    header,
-    sublist,
-    avatar,
-    ...attributes
-  } = props
-  const wrapperClasses = classNames(
-    multiline ? 'multiline' : false,
-    'link-list-wrapper',
-    wrapperClassName
-  )
-  const classes = classNames(
-    className,
-    sublist ? 'link-sublist' : 'link-list',
-    avatar && 'avatar-group'
-  )
-
-  if (sublist) {
-    return (
-      <>
-        {header}
-        <ul {...attributes} className={classes} />
-      </>
-    )
-  }
-  return (
-    <Tag className={wrapperClasses}>
-      {header}
-      <ul {...attributes} className={classes} />
-    </Tag>
-  )
-}
-
-LinkList.propTypes = propTypes
-LinkList.defaultProps = defaultProps
-
-export default LinkList

package/src/components/LinkList/LinkListItem.js

@@ -1,88 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  /** Indica se l'elemento è attivo o no */
-  active: PropTypes.bool,
-  /** Indica se l'elemento è disabilitato o no */
-  disabled: PropTypes.bool,
-  /** Indica se l'elemento è un titolo. */
-  header: PropTypes.bool,
-  /** Indica se l'elemento è un divisore */
-  divider: PropTypes.bool,
-  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /** Classi aggiuntive da usare per il componente LinkListItem */
-  className: PropTypes.any,
-  /** Indica il link a cui l'elemento deve puntare. */
-  href: PropTypes.string,
-  /** Indica la taglia/grandezza dell'elemento */
-  size: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'a'
-}
-
-const handleDisabledOnClick = e => {
-  e.preventDefault()
-}
-
-const LinkListItem = ({
-  className,
-  active,
-  disabled,
-  header,
-  divider,
-  href,
-  size,
-  tag: Tag,
-  ...attributes
-}) => {
-  const classes = classNames(
-    className,
-    {
-      active,
-      disabled,
-      header,
-      divider,
-      size
-    },
-    'list-item'
-  )
-
-  // Prevent click event when disabled.
-  if (disabled) {
-    attributes.onClick = handleDisabledOnClick
-  }
-
-  if (header) {
-    Tag = 'h3'
-  } else if (divider) {
-    Tag = 'span'
-  }
-
-  if (header && href) {
-    return (
-      <li>
-        <Tag>
-          <a href={href || '#'} {...attributes} className={classes} />
-        </Tag>
-      </li>
-    )
-  }
-
-  attributes.href = href
-
-  return (
-    <li>
-      <Tag {...attributes} className={classes} />
-    </li>
-  )
-}
-
-LinkListItem.propTypes = propTypes
-LinkListItem.defaultProps = defaultProps
-
-export default LinkListItem

package/src/components/Nav/Nav.js

@@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Nav as NavBase } from 'reactstrap'
-
-const propTypes = {
-  /** Renderizza i componenti NavItem al suo interno come tab. */
-  tabs: PropTypes.bool,
-  /** Renderizza i componenti NavItem al suo interno come pills. */
-  pills: PropTypes.bool,
-  /** Renderizza i componenti NavItem al suo interno come tab. */
-  card: PropTypes.bool,
-  /** Se abilitato tutti i NavItem all'interno avranno la stessa larghezza */
-  justified: PropTypes.bool,
-  /** Se abilitato i NavItem all'intero occuperanno tutto lo spazio disponibile  */
-  fill: PropTypes.bool,
-  /** Da utilizzare per rendere il componente Nav verticale. Viene abilitato automaticamente in versione mobile. Valori possibili sono `true`, `false` o `"xs"` */
-  vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** Da utilizzare per cambiare l'allineamento all'interno della Nav. Valori possibili sono `"center"` o `"end"` per posizionare il contenuto a centro o sulla destra. */
-  horizontal: PropTypes.string,
-  /** Se utilizzata all'interno di una navbar, impostarlo su `true`. In caso di Header Nav, impostarlo a `true` insieme a inHeader. */
-  navbar: PropTypes.bool,
-  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-}
-
-const defaultProps = {
-  tag: 'ul',
-  vertical: false
-}
-
-const Nav = ({ ...attributes }) => {
-  return <NavBase {...attributes} />
-}
-
-Nav.propTypes = propTypes
-Nav.defaultProps = defaultProps
-export default Nav

package/src/components/Notification/Notification.js

@@ -1,78 +0,0 @@
-import React from 'react'
-import { Toast, ToastHeader, ToastBody, Button } from 'reactstrap'
-import Icon from '../Icon/Icon'
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-
-const propTypes = {
-  header: PropTypes.string,
-  children: PropTypes.element,
-  state: PropTypes.string,
-  dismissable: PropTypes.bool,
-  fix: PropTypes.string,
-  withIcon: PropTypes.bool,
-  style: PropTypes.object
-}
-
-const defaultProps = {}
-
-function pickIcon(state) {
-  var iconClass = 'it-check-circle'
-  switch (state) {
-    case 'success':
-      iconClass = 'it-check-circle'
-      break
-    case 'error':
-      iconClass = 'it-close-circle'
-      break
-    case 'info':
-      iconClass = 'it-info-circle'
-      break
-    case 'warning':
-      iconClass = 'it-error'
-  }
-  return iconClass
-}
-const Notification = props => {
-  const {
-    header,
-    state,
-    dismissable,
-    fix,
-    withIcon,
-    style,
-    children,
-    ...attributes
-  } = props
-  const wrapperClass = classNames(
-    'notification',
-    fix,
-    withIcon ? 'with-icon' : null,
-    state,
-    dismissable ? 'dismissable' : null
-  )
-  const icon = pickIcon(state)
-  const btnClass = classNames('btn', 'notification-close')
-  return (
-    <Toast className={wrapperClass} style={style}>
-      <ToastHeader>
-        <h5>
-          {header}
-          <Icon icon={icon} />
-        </h5>
-      </ToastHeader>
-      {children && <ToastBody {...attributes}>{children}</ToastBody>}
-
-      {dismissable && (
-        <Button className={btnClass}>
-          <Icon icon="it-close" />
-          <span className="sr-only">Chiudi notifica: Titolo notifica</span>
-        </Button>
-      )}
-    </Toast>
-  )
-}
-
-Notification.defaultProps = defaultProps
-Notification.propTypes = propTypes
-export default Notification