@xaypay/tui 0.0.119 → 0.0.121

package/src/components/table/td.js

@@ -1,429 +0,0 @@
-import React from 'react'
-
-import { SingleCheckbox } from './../singleCheckbox'
-
-import { hasOwnerProperty } from './../../utils'
-
-import styles from './table.module.css'
-
-const TD = ({
-    row,
-    item,
-    index,
-    rowItem,
-    rowRadius,
-    hideBorder,
-    innerIndex,
-    tBodyColor,
-    borderRight,
-    tBodyPadding,
-    tBodyFontSize,
-    openListColor,
-    tBodyTextAlign,
-    tBodyFontFamily,
-    tBodyFontWeight,
-    handleCheckDots,
-    openListFontSize,
-    handleCheckedBody,
-    openListFontFamily,
-    tableColumnMinWidth,
-    tableColumnMaxWidth,
-    handleBodyActionClick,
-    handleMoreOptionsClick,
-    handleContentListClick,
-    handleCheckArrowAction,
-    handleOpenCloseRowSingleArrow,
-}) => {
-    const handleBodyAction = (e, data) => {
-        const actionData = {
-            index,
-            innerIndex,
-            items: item,
-            item: data.item,
-            itemIndex: data.itemIndex,
-        }
-        handleBodyActionClick(e, actionData)
-    }
-
-    const handleCheckActions = (e, object, property, objectIndex) => {
-        if (hasOwnerProperty(object, property)) {
-            handleBodyAction(e, {
-                item: object,
-                itemIndex: objectIndex,
-            })
-        }
-    }
-
-    const handleMoreOptions = (item, index, optionItem, innerIndex, optionIndex, options) => {
-        handleMoreOptionsClick({
-            item,
-            index,
-            options,
-            optionItem,
-            innerIndex,
-            optionIndex,
-        })
-    }
-
-    const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
-        handleContentListClick(e, {
-            item,
-            index,
-            innerIndex,
-            listContentId,
-            listContent,
-            listContentIndex,
-        })
-    }
-
-    return (
-        <td
-            style={{
-                width: 'auto',
-                color: tBodyColor,
-                verticalAlign: 'top',
-                padding: tBodyPadding,
-                fontSize: tBodyFontSize,
-                borderRight: borderRight,
-                textAlign: tBodyTextAlign,
-                fontFamily: tBodyFontFamily,
-                fontWeight: tBodyFontWeight,
-                minWidth: tableColumnMinWidth,
-                maxWidth: tableColumnMaxWidth,
-                whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
-                borderColor: hideBorder ? 'transparent' : '#eeeeee',
-                boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
-                borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
-                borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
-                borderTopRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
-                borderBottomRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
-            }}
-        >
-            {Array.isArray(item) ? (
-                item.length > 0 ? (
-                    item.map((newItem, newIndex) => {
-                        if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
-                            return (
-                                <span
-                                    style={{
-                                        width: '32px',
-                                        height: '32px',
-                                        marginRight: '10px',
-                                        cursor: hasOwnerProperty(newItem, 'type') ? 'pointer' : 'auto',
-                                    }}
-                                    id={newItem.id}
-                                    type={newItem.type}
-                                    className={styles['td-span']}
-                                    key={`${newItem.id}_${newIndex}`}
-                                    onClick={(e) => handleCheckActions(e, newItem, 'type', newIndex)}
-                                >
-                                    {newItem.content === 0
-                                        ? newItem.content.toString()
-                                        : newItem.content
-                                        ? newItem.content
-                                        : ''}
-                                </span>
-                            )
-                        } else if (newItem && Array.isArray(newItem)) {
-                            return (
-                                <span
-                                    key={`${newItem.id}_${newIndex}`}
-                                    style={{
-                                        display: 'inline-block',
-                                        marginRight: newIndex !== item.length - 1 ? '10px' : '0px',
-                                        borderRight:
-                                            newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none',
-                                    }}
-                                >
-                                    {item[newIndex].map((iT, iN) => {
-                                        return (
-                                            <span
-                                                style={{
-                                                    width: '32px',
-                                                    height: '32px',
-                                                    marginRight: '10px',
-                                                    cursor: hasOwnerProperty(iT, 'type') ? 'pointer' : 'auto',
-                                                }}
-                                                id={iT.id ? iT.id : ''}
-                                                type={iT.type ? iT.type : ''}
-                                                className={styles['td-span']}
-                                                onClick={(e) => handleCheckActions(e, iT, 'type', iN)}
-                                                key={`${iT.id || iT.content}_${iN}`}
-                                            >
-                                                {iT.content === 0
-                                                    ? iT.content.toString()
-                                                    : iT.content
-                                                    ? iT.content
-                                                    : ''}
-                                            </span>
-                                        )
-                                    })}
-                                </span>
-                            )
-                        } else {
-                            return <span key={`${newItem.id}_${newIndex}`}>{newItem}</span>
-                        }
-                    })
-                ) : (
-                    <></>
-                )
-            ) : item !== null && !Array.isArray(item) && typeof item === 'object' ? (
-                <div
-                    style={{
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: hasOwnerProperty(item, 'checkBox')
-                            ? 'space-between'
-                            : tBodyTextAlign
-                            ? tBodyTextAlign === 'left'
-                                ? 'flex-start'
-                                : tBodyTextAlign === 'right'
-                                ? 'flex-end'
-                                : 'center'
-                            : 'center',
-                    }}
-                >
-                    {!hasOwnerProperty(item, 'hideArrow') &&
-                    item.hideArrow !== false &&
-                    (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true)
-                        ? hasOwnerProperty(item, 'contentList') &&
-                          (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && (
-                              <div
-                                  id={item.id}
-                                  style={{
-                                      width: '21px',
-                                      height: '21px',
-                                      cursor: 'pointer',
-                                  }}
-                                  onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex, item)}
-                                  className={styles['td-span']}
-                              >
-                                  {hasOwnerProperty(item, 'status') && item.status === 'close'
-                                      ? item.closeArrow
-                                      : item.openArrow}
-                              </div>
-                          )
-                        : ''}
-
-                    {hasOwnerProperty(item, 'checkBox') && (
-                        <SingleCheckbox
-                            data={item}
-                            index={index}
-                            innerIndex={innerIndex}
-                            checked={item.checkBox.checked}
-                            handleChecked={handleCheckedBody}
-                            disabled={item.checkBox.disabled}
-                            checkedColor={item.checkBox.checkedColor}
-                            unCheckedColor={item.checkBox.unCheckedColor}
-                        />
-                    )}
-
-                    <div
-                        style={{
-                            flexShrink: 11,
-                            marginLeft:
-                                hasOwnerProperty(item, 'contentList') &&
-                                (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
-                                    ? hasOwnerProperty(item, 'rightArrow')
-                                        ? item.rightArrow === true
-                                            ? '0px'
-                                            : '11px'
-                                        : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')
-                                        ? '11px'
-                                        : '0px'
-                                    : '0px',
-                            marginRight:
-                                hasOwnerProperty(item, 'contentList') &&
-                                (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
-                                    ? hasOwnerProperty(item, 'rightArrow')
-                                        ? item.rightArrow === true
-                                            ? '11px'
-                                            : '0px'
-                                        : '0px'
-                                    : '0px',
-                        }}
-                    >
-                        <p
-                            style={{
-                                textAlign: tBodyTextAlign,
-                                margin: '0px',
-                                cursor:
-                                    hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots')
-                                        ? 'pointer'
-                                        : 'auto',
-                            }}
-                            onClick={
-                                hasOwnerProperty(item, 'arrowComponent')
-                                    ? () => handleCheckArrowAction(item, item.checkIndex)
-                                    : hasOwnerProperty(item, 'dots')
-                                    ? (e) => handleCheckDots(e, item, index, innerIndex)
-                                    : (_) => _
-                            }
-                        >
-                            {item.content === 0 ? (
-                                item.content.toString()
-                            ) : item.content ? (
-                                item.content
-                            ) : hasOwnerProperty(item, 'arrowComponent') ? (
-                                item.status === 'close' ? (
-                                    item.closeArrow
-                                ) : (
-                                    item.openArrow
-                                )
-                            ) : hasOwnerProperty(item, 'dots') ? (
-                                <span
-                                    style={{
-                                        display: 'block',
-                                        position: 'relative',
-                                    }}
-                                >
-                                    {item.dotsStatus === 'deActive' ? item.deActiveIcon : item.activeIcon}
-                                    <span
-                                        style={{
-                                            position: 'absolute',
-                                            display: item.dotsStatus === 'deActive' ? 'none' : 'block',
-                                            top: '0px',
-                                            zIndex: 100,
-                                            right: 'calc(100% + 6px)',
-                                            width: '223px',
-                                            height: 'auto',
-                                            overflow: 'auto',
-                                            minHeight: '40px',
-                                            maxHeight: '246px',
-                                            borderRadius: '6px',
-                                            backgroundColor: '#FFFFFF',
-                                            boxShadow: '0px 0px 20px 0px #3C393E4D',
-                                        }}
-                                    >
-                                        {hasOwnerProperty(item, 'options') &&
-                                            item.options.map((optionItem, optionIndex) => {
-                                                return (
-                                                    <span
-                                                        key={`${optionItem.content}_${optionIndex}`}
-                                                        className={styles['dots-option-item']}
-                                                        style={{
-                                                            color: '#3C393E',
-                                                            fontSize: '14px',
-                                                            fontFamily: 'Noto Sans Armenian',
-                                                        }}
-                                                        onClick={() =>
-                                                            handleMoreOptions(
-                                                                item,
-                                                                index,
-                                                                optionItem,
-                                                                innerIndex,
-                                                                optionIndex,
-                                                                item.options
-                                                            )
-                                                        }
-                                                    >
-                                                        <span
-                                                            style={{
-                                                                marginRight: '10px',
-                                                            }}
-                                                        >
-                                                            {optionItem.icon}
-                                                        </span>
-                                                        <span
-                                                            style={{
-                                                                width: 'calc(100% - 36px)',
-                                                                textAlign: 'left',
-                                                                overflow: 'hidden',
-                                                                whiteSpace: 'nowrap',
-                                                                textOverflow: 'ellipsis',
-                                                                marginBottom: '5px',
-                                                            }}
-                                                            title={optionItem.content}
-                                                        >
-                                                            {optionItem.content === 0
-                                                                ? optionItem.content.toString()
-                                                                : optionItem.content
-                                                                ? optionItem.content
-                                                                : ''}
-                                                        </span>
-                                                    </span>
-                                                )
-                                            })}
-                                    </span>
-                                </span>
-                            ) : (
-                                ''
-                            )}
-                        </p>
-                        {hasOwnerProperty(item, 'contentList') && (
-                            <div
-                                style={{
-                                    overflow: 'auto',
-                                    marginTop: '10px',
-                                    maxHeight: '500px',
-                                    maxWidth: '100%',
-                                    height: item.status === 'close' ? '0px' : 'auto',
-                                }}
-                            >
-                                {item.contentList.map((innerItem, innerItemIndex) => {
-                                    return (
-                                        <p
-                                            key={`${innerItem}_${innerItemIndex}`}
-                                            className={styles['list-text']}
-                                            style={{
-                                                maxWidth: '100%',
-                                                color: openListColor,
-                                                textAlign: tBodyTextAlign,
-                                                fontSize: openListFontSize,
-                                                fontFamily: openListFontFamily,
-                                            }}
-                                            onClick={(e) =>
-                                                handleContentList(
-                                                    e,
-                                                    item,
-                                                    index,
-                                                    innerIndex,
-                                                    innerItem.id,
-                                                    innerItem.content,
-                                                    innerItemIndex
-                                                )
-                                            }
-                                        >
-                                            {innerItem.content === 0
-                                                ? innerItem.content.toString()
-                                                : innerItem.content
-                                                ? innerItem.content
-                                                : ''}
-                                        </p>
-                                    )
-                                })}
-                            </div>
-                        )}
-                    </div>
-
-                    {!hasOwnerProperty(item, 'hideArrow') &&
-                    item.hideArrow !== false &&
-                    hasOwnerProperty(item, 'rightArrow') &&
-                    item.rightArrow === true
-                        ? hasOwnerProperty(item, 'contentList') &&
-                          (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && (
-                              <div
-                                  id={item.id}
-                                  style={{
-                                      width: '21px',
-                                      height: '21px',
-                                      cursor: 'pointer',
-                                  }}
-                                  onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex, item)}
-                                  className={styles['td-span']}
-                              >
-                                  {hasOwnerProperty(item, 'status') && item.status === 'close'
-                                      ? item.closeArrow
-                                      : item.openArrow}
-                              </div>
-                          )
-                        : ''}
-                </div>
-            ) : (
-                ''
-            )}
-        </td>
-    )
-}
-
-export default TD

package/src/components/table/th.js

@@ -1,103 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-import React from 'react'
-
-import { SingleCheckbox } from './../singleCheckbox'
-
-import { hasOwnerProperty } from './../../utils'
-
-import styles from './table.module.css'
-
-const TH = ({
-    item,
-    hideBorder,
-    tHeadFamily,
-    tHeadPadding,
-    tHeadFontSize,
-    tHeadTextAlign,
-    tHeadFontWeight,
-    tableColumnMinWidth,
-    tableColumnMaxWidth,
-    handleCheckedHeader,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    handleHeaderItemClick,
-    handleCheckArrowActionHeader,
-}) => {
-    const handleCheckArrowAction = (e, object, property) => {
-        if (hasOwnerProperty(object, property)) {
-            handleCheckArrowActionHeader(e, object)
-        }
-    }
-
-    return (
-        <th
-            style={{
-                width: 'auto',
-                cursor: 'pointer',
-                position: 'relative',
-                padding: tHeadPadding,
-                fontSize: tHeadFontSize,
-                fontFamily: tHeadFamily,
-                fontWeight: tHeadFontWeight,
-                minWidth: tableColumnMinWidth,
-                maxWidth: tableColumnMaxWidth,
-                borderTopLeftRadius: borderTopLeftRadius,
-                borderTopRightRadius: borderTopRightRadius,
-                borderColor: hideBorder ? 'transparent' : '#eeeeee',
-            }}
-            onClick={handleHeaderItemClick}
-            className={`${
-                hasOwnerProperty(item, 'sortingArrows')
-                    ? item.sortingArrows === true
-                        ? styles['sorting-arrows']
-                        : ''
-                    : ''
-            }`}
-        >
-            <div
-                style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    justifyContent: hasOwnerProperty(item, 'checkBox')
-                        ? 'space-between'
-                        : tHeadTextAlign
-                        ? tHeadTextAlign === 'left'
-                            ? 'flex-start'
-                            : tHeadTextAlign === 'right'
-                            ? 'flex-end'
-                            : 'center'
-                        : 'center',
-                }}
-            >
-                {hasOwnerProperty(item, 'checkBox') ? (
-                    <SingleCheckbox
-                        data={item}
-                        checked={item.checkBox.checked}
-                        disabled={item.checkBox.disabled}
-                        handleChecked={!item.checkBox.disabled ? handleCheckedHeader : (_) => _}
-                        checkedColor={item.checkBox.checkedColor ? item.checkBox.checkedColor : ''}
-                        unCheckedColor={item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''}
-                    />
-                ) : (
-                    ''
-                )}
-                <p
-                    style={{
-                        margin: '0px',
-                    }}
-                    onClick={(e) => handleCheckArrowAction(e, item, 'arrowComponent')}
-                >
-                    {item.type === 'show'
-                        ? item.content
-                        : hasOwnerProperty(item, 'arrowComponent')
-                        ? item.status === 'close'
-                            ? item.closeArrow
-                            : item.openArrow
-                        : ''}
-                </p>
-            </div>
-        </th>
-    )
-}
-
-export default TH