@xaypay/tui 0.0.119 → 0.0.120

package/src/components/textarea/index.js

@@ -1,285 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import { compereConfigs } from './../../utils'
-
-import SvgRequired from './../icon/Required'
-
-import './textarea.module.css'
-
-export const PositionSide = {
-    TOP: 'top',
-    BOTTOM: 'bottom',
-}
-
-export const Textarea = ({
-    size,
-    label,
-    width,
-    value,
-    height,
-    resize,
-    radius,
-    padding,
-    disabled,
-    required,
-    onChange,
-    minWidth,
-    maxWidth,
-    boxShadow,
-    minHeight,
-    maxHeight,
-    boxSizing,
-    maxLength,
-    labelSize,
-    errorSize,
-    marginTop,
-    className,
-    labelColor,
-    errorColor,
-    labelWeight,
-    placeholder,
-    labelDisplay,
-    errorMessage,
-    labelFontFamily,
-    backgroundColor,
-    borderFocusColor,
-    borderHoverColor,
-    labelMarginBottom,
-    showCharacterCount,
-    characterCountPosition,
-}) => {
-    const [error, setError] = useState('')
-    const [isHover, setIsHover] = useState(false)
-    const [isFocus, setIsFocus] = useState(false)
-    const [innerValue, setInnerValue] = useState('')
-
-    const configStyles = compereConfigs()
-    const classProps = classnames(className ? className : configStyles.TEXTAREA.className)
-
-    const handleMouseEnter = () => {
-        setIsHover(true)
-    }
-
-    const handleMouseLeave = () => {
-        setIsHover(false)
-    }
-
-    const handleFocus = () => {
-        setIsFocus(true)
-    }
-
-    const handleBlur = () => {
-        setIsFocus(false)
-    }
-
-    const handleChange = (e) => {
-        const value = e.target.value
-        onChange(value)
-        if (maxLength) {
-            if (value.length > maxLength) {
-                onChange(value.substr(0, maxLength))
-            }
-        } else {
-            if (value.length > configStyles.TEXTAREA.maxLength) {
-                onChange(value.substr(0, configStyles.TEXTAREA.maxLength))
-            }
-        }
-    }
-
-    useEffect(() => {
-        if (value === undefined) {
-            alert('Please add value prop on Textarea component')
-        }
-
-        if (!onChange) {
-            alert('Please add onChange function on Textarea component')
-        }
-
-        if (errorMessage) {
-            setError(errorMessage)
-        } else {
-            setError('')
-        }
-
-        if (value === '') {
-            setError('')
-        }
-
-        setInnerValue(value)
-    }, [value, onChange, errorMessage])
-
-    return (
-        <div
-            style={{
-                width: width ? width : configStyles.TEXTAREA.width,
-            }}
-            className={classProps}
-        >
-            <div
-                style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: label ? 'space-between' : 'flex-end',
-                    fontFamily: labelFontFamily ? labelFontFamily : configStyles.TEXTAREA.labelFontFamily,
-                    marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom,
-                }}
-            >
-                {label ? (
-                    <label
-                        style={{
-                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
-                            display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
-                            fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight,
-                        }}
-                    >
-                        {label}
-                        {required && (
-                            <sup>
-                                <SvgRequired />
-                            </sup>
-                        )}
-                    </label>
-                ) : (
-                    ''
-                )}
-
-                {showCharacterCount && maxLength && characterCountPosition === 'top' && (
-                    <span
-                        style={{
-                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
-                        }}
-                    >
-                        {maxLength - value.length} նիշ
-                    </span>
-                )}
-            </div>
-            <textarea
-                style={{
-                    width: '100%',
-                    border: 'none',
-                    outline: 'none',
-                    overflow: 'auto',
-                    cursor: disabled ? 'not-allowed' : 'auto',
-                    fontSize: size ? size : configStyles.TEXTAREA.size,
-                    height: height ? height : configStyles.TEXTAREA.height,
-                    padding: padding ? padding : configStyles.TEXTAREA.padding,
-                    borderRadius: radius ? radius : configStyles.TEXTAREA.radius,
-                    minWidth: minWidth ? minWidth : configStyles.TEXTAREA.minWidth,
-                    maxWidth: maxWidth ? maxWidth : configStyles.TEXTAREA.maxWidth,
-                    minHeight: minHeight ? minHeight : configStyles.TEXTAREA.minHeight,
-                    maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
-                    boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
-                    backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-                    boxShadow: error
-                        ? errorColor
-                            ? `0 0 0 2px ${errorColor}`
-                            : `0 0 0 2px ${configStyles.TEXTAREA.errorColor}`
-                        : isFocus
-                        ? borderFocusColor
-                            ? `0 0 0 2px ${borderFocusColor}`
-                            : `0 0 0 2px ${configStyles.TEXTAREA.borderFocusColor}`
-                        : isHover
-                        ? borderHoverColor
-                            ? `0 0 0 2px ${borderHoverColor}`
-                            : `0 0 0 2px ${configStyles.TEXTAREA.borderHoverColor}`
-                        : boxShadow
-                        ? boxShadow
-                        : configStyles.INPUT.boxShadow,
-                    resize: resize ? resize : configStyles.TEXTAREA.resize,
-                }}
-                value={innerValue}
-                disabled={disabled}
-                onBlur={handleBlur}
-                onFocus={handleFocus}
-                onChange={handleChange}
-                placeholder={placeholder}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
-            ></textarea>
-            {showCharacterCount && maxLength && characterCountPosition === 'bottom' && (
-                <div
-                    style={{
-                        float: 'right',
-                    }}
-                >
-                    <span
-                        style={{
-                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
-                        }}
-                    >
-                        {maxLength - value.length} նիշ
-                    </span>
-                </div>
-            )}
-
-            {error ? (
-                <div
-                    style={{
-                        clear: 'both',
-                        wordBreak: 'break-all',
-                        maxWidth: width ? width : configStyles.TEXTAREA.width,
-                    }}
-                >
-                    <span
-                        style={{
-                            display: 'inline-block',
-                            fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
-                            color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
-                            marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop,
-                        }}
-                    >
-                        {error}
-                    </span>
-                </div>
-            ) : (
-                ''
-            )}
-        </div>
-    )
-}
-
-Textarea.propTypes = {
-    size: PropTypes.string,
-    label: PropTypes.string,
-    width: PropTypes.string,
-    height: PropTypes.string,
-    resize: PropTypes.string,
-    radius: PropTypes.string,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    padding: PropTypes.string,
-    minWidth: PropTypes.string,
-    maxWidth: PropTypes.string,
-    boxShadow: PropTypes.string,
-    marginTop: PropTypes.string,
-    boxSizing: PropTypes.string,
-    minHeight: PropTypes.string,
-    maxHeight: PropTypes.string,
-    maxLength: PropTypes.number,
-    labelSize: PropTypes.string,
-    errorSize: PropTypes.string,
-    className: PropTypes.string,
-    labelColor: PropTypes.string,
-    errorColor: PropTypes.string,
-    labelWeight: PropTypes.string,
-    placeholder: PropTypes.string,
-    errorMessage: PropTypes.string,
-    labelDisplay: PropTypes.string,
-    labelFontFamily: PropTypes.string,
-    backgroundColor: PropTypes.string,
-    showCharacterCount: PropTypes.bool,
-    value: PropTypes.string.isRequired,
-    borderFocusColor: PropTypes.string,
-    borderHoverColor: PropTypes.string,
-    labelMarginBottom: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    characterCountPosition: PropTypes.oneOf(Object.values(PositionSide)),
-}
-
-Textarea.defaultProps = {
-    characterCountPosition: 'top',
-}

package/src/components/textarea/textarea.module.css

@@ -1,25 +0,0 @@
-textarea {
-    -webkit-appearance: none;
-}
-
-textarea::-webkit-scrollbar {
-    width: 6px;
-}
-  
-textarea::-webkit-scrollbar-track {
-    background: #EEEEEE;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    -ms-border-radius: 3px;
-    -o-border-radius: 3px;
-}
-
-textarea::-webkit-scrollbar-thumb {
-    background: #D1D1D1;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    -ms-border-radius: 3px;
-    -o-border-radius: 3px;
-}

package/src/components/textarea/textarea.stories.js

@@ -1,56 +0,0 @@
-import React, { useState } from 'react'
-import { Textarea, PositionSide } from '.'
-
-export default {
-    Comment: Textarea,
-    title: 'Components/Textarea',
-    argsType: {
-        characterCountPosition: {
-            options: Object.values(PositionSide),
-        },
-    },
-}
-
-const Template = (args) => {
-    const [val, setVal] = useState('')
-
-    const handleChangeValue = (value) => {
-        setVal(value)
-    }
-
-    return <Textarea value={val} onChange={handleChangeValue} {...args} />
-}
-
-export const Default = Template.bind({})
-Default.args = {
-    label: 'Label for textarea',
-    required: true,
-    disabled: false,
-    size: '16px',
-    radius: '6px',
-    errorSize: '',
-    width: '400px',
-    errorColor: '',
-    height: '134px',
-    maxLength: 1500,
-    errorMessage: '',
-    color: '#3C393E',
-    minWidth: '200px',
-    maxWidth: '500px',
-    labelSize: '16px',
-    resize: 'vertical',
-    minHeight: '100px',
-    maxHeight: '300px',
-    border: '2px solid',
-    padding: '12px 15px',
-    labelColor: '#3C393E',
-    labelWeight: 'normal',
-    labelDisplay: 'block',
-    borderColor: '#D1D1D1',
-    boxSizing: 'border-box',
-    backgroundColor: 'white',
-    showCharacterCount: true, // for showing textarea character count
-    borderHoverColor: '#3C393E',
-    borderFocusColor: '#00236A',
-    characterCountPosition: 'top',
-}

package/src/components/toaster/Toast.js

@@ -1,203 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react'
-import PropTypes from 'prop-types'
-
-import ToasterInfo from '../icon/ToasterInfo'
-import ToasterError from '../icon/ToasterError'
-import ToasterClose from '../icon/ToasterClose'
-import ToasterWarn from '../icon/ToasterWarning'
-import ToasterSuccess from '../icon/ToasterSuccess'
-
-import styles from './toaster.module.css'
-
-let wWidth = window.innerWidth
-
-const ToasterType = {
-    info: 'info',
-    warn: 'warn',
-    error: 'error',
-    success: 'success',
-}
-
-const ToasterPosition = {
-    topLeft: 'top-left',
-    topRight: 'top-right',
-    topCenter: 'top-center',
-    bottomLeft: 'bottom-left',
-    bottomRight: 'bottom-right',
-    bottomCenter: 'bottom-center',
-}
-
-export const Toast = ({ type, title, timer, position, removeToast, description }) => {
-    let timeoutCall
-    let timeoutClick
-
-    const ref = useRef(null)
-    const [showToaster, setShowToaster] = useState(true)
-
-    const handleToasterClick = (e) => {
-        e.stopPropagation()
-    }
-
-    const handleCloseToaster = (ref) => {
-        setShowToaster(false)
-        timeoutClick = setTimeout(() => {
-            removeToast(ref, position)
-        }, 300)
-        clearTimeout(timeoutCall)
-    }
-
-    useEffect(() => {
-        timeoutCall = setTimeout(() => {
-            handleCloseToaster(ref)
-        }, timer)
-        return () => {
-            setShowToaster(true)
-            clearTimeout(timeoutCall)
-            clearTimeout(timeoutClick)
-        }
-    }, [])
-
-    return (
-        <div
-            ref={ref}
-            onClick={handleToasterClick}
-            style={{
-                position: 'absolute',
-                display: 'flex',
-                width: wWidth > 480 ? '440px' : '300px',
-                height: '83px',
-                borderRadius: '40px',
-                alignItems: 'center',
-                boxSizing: 'border-box',
-                backgroundColor: '#FFFFFF',
-                border: '2px solid #EEEEEE',
-                padding: '14px 29px 14px 12px',
-                justifyContent: 'space-between',
-            }}
-            className={`
-        ${styles['notify-block']}
-        ${
-            position === 'top-left'
-                ? showToaster
-                    ? styles['bounce-in-left']
-                    : styles['bounce-out-left']
-                : position === 'top-right'
-                ? showToaster
-                    ? styles['bounce-in-right']
-                    : styles['bounce-out-right']
-                : position === 'top-center'
-                ? showToaster
-                    ? styles['bounce-in-left']
-                    : styles['bounce-out-left']
-                : position === 'bottom-left'
-                ? showToaster
-                    ? styles['bounce-in-left']
-                    : styles['bounce-out-left']
-                : position === 'bottom-right'
-                ? showToaster
-                    ? styles['bounce-in-right']
-                    : styles['bounce-out-right']
-                : position === 'bottom-center'
-                ? showToaster
-                    ? styles['bounce-in-left']
-                    : styles['bounce-out-left']
-                : ''
-        }
-      `}
-        >
-            <div
-                style={{
-                    display: 'flex',
-                    width: '60px',
-                    height: '60px',
-                    borderRadius: '30px',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    backgroundColor:
-                        type === 'info'
-                            ? 'rgba(0, 35, 106, 0.05)'
-                            : type === 'warn'
-                            ? 'rgba(255, 138, 0, 0.05)'
-                            : type === 'error'
-                            ? 'rgba(238, 0, 0, 0.05)'
-                            : type === 'success'
-                            ? 'rgba(13, 165, 116, 0.05)'
-                            : '',
-                }}
-            >
-                {type === 'info' ? (
-                    <ToasterInfo />
-                ) : type === 'warn' ? (
-                    <ToasterWarn />
-                ) : type === 'error' ? (
-                    <ToasterError />
-                ) : type === 'success' ? (
-                    <ToasterSuccess />
-                ) : (
-                    ''
-                )}
-            </div>
-
-            <div
-                style={{
-                    height: '100%',
-                    width: 'calc(100% - 90px)',
-                }}
-            >
-                <p
-                    style={{
-                        margin: '0px',
-                        fontWeight: 600,
-                        color: '#3C393E',
-                        fontSize: '16px',
-                        lineHeight: '22px',
-                        fontStyle: 'normal',
-                    }}
-                    className={styles['notify-title']}
-                >
-                    {title ? title : ''}
-                </p>
-                <span
-                    style={{
-                        fontWeight: 500,
-                        color: '#3C393E',
-                        fontSize: '12px',
-                        lineHeight: '16px',
-                        fontStyle: 'normal',
-                        fontFamily: '',
-                        opacity: 0.8,
-                    }}
-                    className={styles['notify-desc']}
-                >
-                    {description ? description : ''}
-                </span>
-            </div>
-
-            <div
-                onClick={() => handleCloseToaster(ref)}
-                style={{
-                    width: '18px',
-                    height: '18px',
-                    cursor: 'pointer',
-                }}
-            >
-                <ToasterClose />
-            </div>
-        </div>
-    )
-}
-
-Toast.propTypes = {
-    timer: PropTypes.number,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    removeToast: PropTypes.func.isRequired,
-    position: PropTypes.oneOf(Object.values(ToasterPosition)),
-    type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
-}
-
-Toast.defaultProps = {
-    timer: 5000,
-    position: 'top-right',
-    title: 'toaster title',
-}

package/src/components/toaster/index.js

@@ -1,131 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import classnames from 'classnames'
-import { compereConfigs } from './../../utils'
-
-import { Toast } from './Toast'
-
-import styles from './toaster.module.css'
-
-let toastify
-let path = window.location.href
-let wWidth = window.innerWidth
-
-const removeToast = (ref) => {
-    // eslint-disable-next-line react/no-find-dom-node
-    const node = ReactDOM.findDOMNode(ref.current)
-    const removeElem = node.parentNode
-    const parent = removeElem.parentNode
-
-    parent.removeChild(removeElem)
-
-    if (!parent.hasChildNodes()) {
-        toastify.removeChild(parent)
-    }
-}
-
-const createToast = ({ type, timer, title, position, description }) => {
-    let toastParentBlock
-    if (!toastify) {
-        toastify = document.getElementById('toastify')
-    }
-
-    const toastBlock = document.createElement('div')
-    toastBlock.style.position = 'relative'
-    toastBlock.style.flexShrink = 0
-    toastBlock.style.width = wWidth > 480 ? '440px' : '300px'
-    toastBlock.style.height = '83px'
-    toastBlock.style.marginBottom = '20px'
-    const newElem = React.createElement(Toast, {
-        type,
-        timer,
-        title,
-        position,
-        removeToast,
-        description,
-    })
-    ReactDOM.render(newElem, toastBlock)
-
-    if (!document.getElementById(styles[position]) || document.getElementById(styles[position]) == null) {
-        toastParentBlock = document.createElement('div')
-        toastParentBlock.style.position = 'fixed'
-        toastParentBlock.style.display = 'flex'
-        toastParentBlock.style.zIndex = 999999999999
-        toastParentBlock.style.flexDirection =
-            position === 'top-left' || position === 'top-right' || position === 'top-center'
-                ? 'column-reverse'
-                : 'column'
-        toastParentBlock.setAttribute('id', styles[position])
-        toastParentBlock.appendChild(toastBlock)
-        toastify.appendChild(toastParentBlock)
-    } else {
-        document.getElementById(styles[position]).appendChild(toastBlock)
-    }
-}
-
-export const toast = {
-    success: (title, props) => {
-        const { timer, position, description } = props || {}
-        createToast({
-            title,
-            type: 'success',
-            timer: timer ? timer : 5000,
-            position: position ? position : 'top-right',
-            description: description ? description : '',
-        })
-    },
-    info: (title, props) => {
-        const { timer, position, description } = props || {}
-        createToast({
-            title,
-            type: 'info',
-            timer: timer ? timer : 5000,
-            position: position ? position : 'top-right',
-            description: description ? description : '',
-        })
-    },
-    warn: (title, props) => {
-        const { timer, position, description } = props || {}
-        createToast({
-            title,
-            type: 'warn',
-            timer: timer ? timer : 5000,
-            position: position ? position : 'top-right',
-            description: description ? description : '',
-        })
-    },
-    error: (title, props) => {
-        const { timer, position, description } = props || {}
-        createToast({
-            title,
-            type: 'error',
-            timer: timer ? timer : 5000,
-            position: position ? position : 'top-right',
-            description: description ? description : '',
-        })
-    },
-}
-
-export const Toaster = ({ className }) => {
-    const configStyles = compereConfigs()
-    const classProps = classnames(className ? className : configStyles.TOASTER.className)
-
-    window.addEventListener('popstate', () => {
-        if (path !== window.location.href) {
-            if (!toastify) {
-                toastify = document.getElementById('toastify')
-            }
-
-            if (toastify.hasChildNodes()) {
-                toastify.innerHTML = ''
-            }
-
-            path = window.location.href
-        }
-    })
-    const handleToasterClick = (e) => {
-        e.stopPropagation()
-    }
-
-    return <div onClick={handleToasterClick} className={classProps} id="toastify"></div>
-}