From 1dc8d3abf4b7d98534a31c1c9ee11ce153e67d2d Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 26 Nov 2020 10:26:28 +0100 Subject: [PATCH] Order files and folders, added support for icons in tree view --- .../file-explorer/src/lib/file-explorer.tsx | 25 +- libs/remix-ui/tree-view/.eslintrc | 261 ++---------------- libs/remix-ui/tree-view/jest.config.js | 2 +- libs/remix-ui/tree-view/src/index.ts | 4 +- .../tree-view/src/lib/remix-ui-tree-view.tsx | 4 +- .../src/lib/tree-view-item/tree-view-item.tsx | 8 +- libs/remix-ui/tree-view/src/types/index.ts | 7 +- 7 files changed, 48 insertions(+), 263 deletions(-) diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx index c851a10e84..7aa4c1f6f9 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -160,18 +160,29 @@ export const FileExplorer = (props: FileExplorerProps) => { } const normalize = (path, filesList) => { + const folders = [] + const files = [] const prefix = path.split('/')[0] - const files = Object.keys(filesList).map(key => { + + Object.keys(filesList).forEach(key => { const path = prefix + '/' + key - return { - path, - name: extractNameFromKey(path), - isDirectory: filesList[key].isDirectory + if (filesList[key].isDirectory) { + folders.push({ + path, + name: extractNameFromKey(path), + isDirectory: filesList[key].isDirectory + }) + } else { + files.push({ + path, + name: extractNameFromKey(path), + isDirectory: filesList[key].isDirectory + }) } }) - return files + return [...folders, ...files] } const extractNameFromKey = (key) => { @@ -390,7 +401,7 @@ export const FileExplorer = (props: FileExplorerProps) => { const renderFiles = (file, index) => { if (file.isDirectory) { return ( - { resolveDirectory(file.path) }} key={index} label={label(file)}> + { resolveDirectory(file.path) }}> { file.child ? { file.child.map((file, index) => { diff --git a/libs/remix-ui/tree-view/.eslintrc b/libs/remix-ui/tree-view/.eslintrc index 977f139a09..dae5c6feeb 100644 --- a/libs/remix-ui/tree-view/.eslintrc +++ b/libs/remix-ui/tree-view/.eslintrc @@ -1,248 +1,19 @@ { - "rules": { - "array-callback-return": "warn", - "dot-location": ["warn", "property"], - "eqeqeq": ["warn", "smart"], - "new-parens": "warn", - "no-caller": "warn", - "no-cond-assign": ["warn", "except-parens"], - "no-const-assign": "warn", - "no-control-regex": "warn", - "no-delete-var": "warn", - "no-dupe-args": "warn", - "no-dupe-keys": "warn", - "no-duplicate-case": "warn", - "no-empty-character-class": "warn", - "no-empty-pattern": "warn", - "no-eval": "warn", - "no-ex-assign": "warn", - "no-extend-native": "warn", - "no-extra-bind": "warn", - "no-extra-label": "warn", - "no-fallthrough": "warn", - "no-func-assign": "warn", - "no-implied-eval": "warn", - "no-invalid-regexp": "warn", - "no-iterator": "warn", - "no-label-var": "warn", - "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }], - "no-lone-blocks": "warn", - "no-loop-func": "warn", - "no-mixed-operators": [ - "warn", - { - "groups": [ - ["&", "|", "^", "~", "<<", ">>", ">>>"], - ["==", "!=", "===", "!==", ">", ">=", "<", "<="], - ["&&", "||"], - ["in", "instanceof"] - ], - "allowSamePrecedence": false - } - ], - "no-multi-str": "warn", - "no-native-reassign": "warn", - "no-negated-in-lhs": "warn", - "no-new-func": "warn", - "no-new-object": "warn", - "no-new-symbol": "warn", - "no-new-wrappers": "warn", - "no-obj-calls": "warn", - "no-octal": "warn", - "no-octal-escape": "warn", - "no-redeclare": "warn", - "no-regex-spaces": "warn", - "no-restricted-syntax": ["warn", "WithStatement"], - "no-script-url": "warn", - "no-self-assign": "warn", - "no-self-compare": "warn", - "no-sequences": "warn", - "no-shadow-restricted-names": "warn", - "no-sparse-arrays": "warn", - "no-template-curly-in-string": "warn", - "no-this-before-super": "warn", - "no-throw-literal": "warn", - "no-restricted-globals": [ - "error", - "addEventListener", - "blur", - "close", - "closed", - "confirm", - "defaultStatus", - "defaultstatus", - "event", - "external", - "find", - "focus", - "frameElement", - "frames", - "history", - "innerHeight", - "innerWidth", - "length", - "location", - "locationbar", - "menubar", - "moveBy", - "moveTo", - "name", - "onblur", - "onerror", - "onfocus", - "onload", - "onresize", - "onunload", - "open", - "opener", - "opera", - "outerHeight", - "outerWidth", - "pageXOffset", - "pageYOffset", - "parent", - "print", - "removeEventListener", - "resizeBy", - "resizeTo", - "screen", - "screenLeft", - "screenTop", - "screenX", - "screenY", - "scroll", - "scrollbars", - "scrollBy", - "scrollTo", - "scrollX", - "scrollY", - "self", - "status", - "statusbar", - "stop", - "toolbar", - "top" - ], - "no-unexpected-multiline": "warn", - "no-unreachable": "warn", - "no-unused-expressions": [ - "error", - { - "allowShortCircuit": true, - "allowTernary": true, - "allowTaggedTemplates": true - } - ], - "no-unused-labels": "warn", - "no-useless-computed-key": "warn", - "no-useless-concat": "warn", - "no-useless-escape": "warn", - "no-useless-rename": [ - "warn", - { - "ignoreDestructuring": false, - "ignoreImport": false, - "ignoreExport": false - } - ], - "no-with": "warn", - "no-whitespace-before-property": "warn", - "react-hooks/exhaustive-deps": "warn", - "require-yield": "warn", - "rest-spread-spacing": ["warn", "never"], - "strict": ["warn", "never"], - "unicode-bom": ["warn", "never"], - "use-isnan": "warn", - "valid-typeof": "warn", - "no-restricted-properties": [ - "error", - { - "object": "require", - "property": "ensure", - "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" - }, - { - "object": "System", - "property": "import", - "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" - } - ], - "getter-return": "warn", - "import/first": "error", - "import/no-amd": "error", - "import/no-webpack-loader-syntax": "error", - "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }], - "react/jsx-no-comment-textnodes": "warn", - "react/jsx-no-duplicate-props": "warn", - "react/jsx-no-target-blank": "warn", - "react/jsx-no-undef": "error", - "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }], - "react/jsx-uses-react": "warn", - "react/jsx-uses-vars": "warn", - "react/no-danger-with-children": "warn", - "react/no-direct-mutation-state": "warn", - "react/no-is-mounted": "warn", - "react/no-typos": "error", - "react/react-in-jsx-scope": "error", - "react/require-render-return": "error", - "react/style-prop-object": "warn", - "react/jsx-no-useless-fragment": "warn", - "jsx-a11y/accessible-emoji": "warn", - "jsx-a11y/alt-text": "warn", - "jsx-a11y/anchor-has-content": "warn", - "jsx-a11y/anchor-is-valid": [ - "warn", - { "aspects": ["noHref", "invalidHref"] } - ], - "jsx-a11y/aria-activedescendant-has-tabindex": "warn", - "jsx-a11y/aria-props": "warn", - "jsx-a11y/aria-proptypes": "warn", - "jsx-a11y/aria-role": "warn", - "jsx-a11y/aria-unsupported-elements": "warn", - "jsx-a11y/heading-has-content": "warn", - "jsx-a11y/iframe-has-title": "warn", - "jsx-a11y/img-redundant-alt": "warn", - "jsx-a11y/no-access-key": "warn", - "jsx-a11y/no-distracting-elements": "warn", - "jsx-a11y/no-redundant-roles": "warn", - "jsx-a11y/role-has-required-aria-props": "warn", - "jsx-a11y/role-supports-aria-props": "warn", - "jsx-a11y/scope": "warn", - "react-hooks/rules-of-hooks": "error", - "default-case": "off", - "no-dupe-class-members": "off", - "no-undef": "off", - "@typescript-eslint/consistent-type-assertions": "warn", - "no-array-constructor": "off", - "@typescript-eslint/no-array-constructor": "warn", - "@typescript-eslint/no-namespace": "error", - "no-use-before-define": "off", - "@typescript-eslint/no-use-before-define": [ - "warn", - { - "functions": false, - "classes": false, - "variables": false, - "typedefs": false - } - ], - "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": [ - "warn", - { "args": "none", "ignoreRestSiblings": true } - ], - "no-useless-constructor": "off", - "@typescript-eslint/no-useless-constructor": "warn" - }, "env": { - "browser": true, - "commonjs": true, - "es6": true, - "jest": true, - "node": true + "browser": true, + "es6": true + }, + "extends": "../../../.eslintrc", + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" }, - "settings": { "react": { "version": "detect" } }, - "plugins": ["import", "jsx-a11y", "react", "react-hooks"], - "extends": ["../../../.eslintrc"], - "ignorePatterns": ["!**/*"] -} + "parserOptions": { + "ecmaVersion": 11, + "sourceType": "module" + }, + "rules": { + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "error" + } +} diff --git a/libs/remix-ui/tree-view/jest.config.js b/libs/remix-ui/tree-view/jest.config.js index ea99fbe3c5..b442eaf362 100644 --- a/libs/remix-ui/tree-view/jest.config.js +++ b/libs/remix-ui/tree-view/jest.config.js @@ -9,4 +9,4 @@ module.exports = { }, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], coverageDirectory: '../../../coverage/libs/remix-ui/tree-view' -}; +} diff --git a/libs/remix-ui/tree-view/src/index.ts b/libs/remix-ui/tree-view/src/index.ts index 639d70eff2..abc1b93872 100644 --- a/libs/remix-ui/tree-view/src/index.ts +++ b/libs/remix-ui/tree-view/src/index.ts @@ -1,2 +1,2 @@ -export * from './lib/tree-view-item/tree-view-item'; -export * from './lib/remix-ui-tree-view'; +export * from './lib/tree-view-item/tree-view-item' +export * from './lib/remix-ui-tree-view' diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx index 70842535d3..37f9c49dad 100644 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx +++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx @@ -1,11 +1,11 @@ -import React from 'react' +import React from 'react' // eslint-disable-line import { TreeViewProps } from '../types' import './remix-ui-tree-view.css' export const TreeView = (props: TreeViewProps) => { const { children, id, ...otherProps } = props - + return (
    { children } diff --git a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx index a80767132c..ea607fbc26 100644 --- a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx +++ b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx @@ -1,10 +1,10 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect } from 'react' // eslint-disable-line import { TreeViewItemProps } from '../../types' import './tree-view-item.css' export const TreeViewItem = (props: TreeViewItemProps) => { - const { id, children, label, expand, ...otherProps } = props + const { id, children, label, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon = 'fa fa-file', ...otherProps } = props const [isExpanded, setIsExpanded] = useState(false) useEffect(() => { @@ -14,12 +14,12 @@ export const TreeViewItem = (props: TreeViewItemProps) => { return (
  • setIsExpanded(!isExpanded)}> -
    + { children ?
    :
    } { label }
    - { isExpanded ? children : null } + { isExpanded ? children : null }
    • ) } diff --git a/libs/remix-ui/tree-view/src/types/index.ts b/libs/remix-ui/tree-view/src/types/index.ts index 7ebbc05155..5650b85191 100644 --- a/libs/remix-ui/tree-view/src/types/index.ts +++ b/libs/remix-ui/tree-view/src/types/index.ts @@ -9,5 +9,8 @@ export interface TreeViewItemProps { label: string | number | React.ReactNode, expand?: boolean, onClick?: VoidFunction, - className?: string -} \ No newline at end of file + className?: string, + iconX?: string, + iconY?: string, + icon?: string +}