diff --git a/packages/patternfly-4/gatsby-theme-patternfly-org/components/cssVariables/cssVariables.js b/packages/patternfly-4/gatsby-theme-patternfly-org/components/cssVariables/cssVariables.js index 33e6dbe2e0..9b80487f62 100644 --- a/packages/patternfly-4/gatsby-theme-patternfly-org/components/cssVariables/cssVariables.js +++ b/packages/patternfly-4/gatsby-theme-patternfly-org/components/cssVariables/cssVariables.js @@ -1,11 +1,17 @@ import React from 'react'; -import { TextInput } from '@patternfly/react-core'; -import { Table, TableHeader, TableBody, sortable, SortByDirection } from '@patternfly/react-table'; -import * as tokensModule from '@patternfly/react-tokens'; +import { TextInput, debounce, SimpleList, SimpleListItem } from '@patternfly/react-core'; +import { Table, TableHeader, TableBody, sortable, SortByDirection, expandable } from '@patternfly/react-table'; +import * as tokensModule from '@patternfly/react-tokens/dist/variables/js'; import './cssVariables.css'; const isColorRegex = /^(#|rgb)/; +const mappingAsList = val => ( + + {val.values.map(entry => {entry})} + +); + export class CSSVariables extends React.Component { constructor(props) { super(props); @@ -13,23 +19,25 @@ export class CSSVariables extends React.Component { this.prefix = typeof props.prefix === 'string' ? [props.prefix] : props.prefix; - const initialRows = Object.entries(tokensModule) - .filter(([_key, val]) => { - for (let i = 0; i < this.prefix.length; i++) { - if (val.name.includes(this.prefix[i])) { + + const applicableFiles = Object.entries(tokensModule) + .filter(([key, val]) => { + for (let i = 0; i < this.prefix.length; i++) { + if (this.prefix[i] === 'global') { + if (key === 'patternfly_variables' || key === 'patternfly_charts') { return true; } + } else if (key === this.prefix[i].replace('pf-', '').replace(/-+/g, '_')) { + return true; } - return false - }) - .sort(([key1], [key2]) => key1.localeCompare(key2)) - .map(([key, val]) => [ - val.name, - key, - val.value - ]); + } + return false + }) + .sort(([key1], [key2]) => key1.localeCompare(key2)) + .map(([key, val]) => val); this.columns = [ + { title: 'Selector', transforms: [sortable], cellFormatters: [expandable] }, { title: 'Variable', transforms: [sortable] }, { title: 'React Token', transforms: [sortable] }, { title: 'Value', transforms: [sortable] } @@ -37,20 +45,92 @@ export class CSSVariables extends React.Component { this.state = { filterValue: '', - rows: initialRows, + applicableFiles, + rows: this.getFilteredRows(applicableFiles), sortBy: { index: 0, direction: 'asc' // a-z } }; + + this.getFilteredRows = this.getFilteredRows.bind(this); + this.getDebouncedFiltedRows = this.getDebouncedFiltedRows.bind(this); + this.onCollapse = this.onCollapse.bind(this); + } + + getFilteredRows = (applicableFiles, searchRE) => { + let filteredRows = []; + let rowNumber = -1; + applicableFiles.forEach(file => { + Object.entries(file).forEach(([selector, values]) => { + values.forEach(val => { + const passes = searchRE === undefined || (searchRE.test(selector) || searchRE.test(val.property) || searchRE.test(val.token) || searchRE.test(val.value) || (val.values && searchRE.test(JSON.stringify(val.values)))); + if (passes) { + const rowKey = `${selector}_${val.property}`; + filteredRows.push({ + isOpen: val.values ? false : undefined, + cells: [ + selector, + val.property, + val.token, +
+
+ {isColorRegex.test(val.value) && ( +
+ +
+ )} +
+ {val.value} +
+
+
+ ] + }); + rowNumber += 1; + if (val.values) { + filteredRows.push({ + parent: rowNumber, + fullWidth: true, + cells: [{ + title: mappingAsList(val) + }] + }); + rowNumber += 1; + } + } + }) + }); + }); + return filteredRows; + } + + onCollapse(event, rowKey, isOpen) { + const { rows } = this.state; + rows[rowKey].isOpen = isOpen; + this.setState({ + rows + }); } onFilterChange = (_change, event) => { this.setState({ filterValue: event.target.value - }); + }, () => this.getDebouncedFiltedRows(this.state.filterValue)); } + getDebouncedFiltedRows = debounce(value => { + const searchRE = new RegExp(value, 'i'); + this.setState({ + rows: this.getFilteredRows(this.state.applicableFiles, searchRE) + }); + }, 500); + + handleChange = e => { + let input = e.target.value.toLowerCase(); + this.setDisplayedContacts(input); + }; + onSort = (_event, index, direction) => { const sortedRows = this.state.rows .sort((a, b) => (a[index] < b[index] ? -1 : a[index] > b[index] ? 1 : 0)); @@ -64,9 +144,6 @@ export class CSSVariables extends React.Component { } render() { - const searchRE = new RegExp(this.state.filterValue, 'i'); - const filteredRows = this.state.rows - .filter(c => searchRE.test(c[0]) || searchRE.test(c[1]) || searchRE.test(c[2])); return ( ({ - cells: [ - row[0], - row[1], -
-
- {isColorRegex.test(row[2]) && ( -
- -
- )} -
- {row[2]} -
-
-
- ] - }))} + rows={this.state.rows} + onCollapse={this.onCollapse} > diff --git a/packages/patternfly-4/package.json b/packages/patternfly-4/package.json index c89bdc4bd2..81817cbf04 100644 --- a/packages/patternfly-4/package.json +++ b/packages/patternfly-4/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@patternfly/patternfly": "2.69.1", + "@patternfly/react-tokens": "2.8.9", "eslint-config-react-app": "^5.0.2", "gatsby": "2.18.6", "gatsby-cli": "2.8.15", diff --git a/yarn.lock b/yarn.lock index 65ac55a3fc..3e8a197660 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2028,6 +2028,11 @@ exenv "^1.2.2" lodash "^4.17.15" +"@patternfly/react-tokens@2.8.9": + version "2.8.9" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.8.9.tgz#587bf65fc5922f72624c3dfaeb44f53ea530439a" + integrity sha512-WOEclcWF7NNkp2kJ6SHZfjl8F9VXKzrmzTyQSSbx4AOlJjI/4PfxWrpwUxMlc3U48hS8qeU/ZL3MceKA6DdMFg== + "@patternfly/react-tokens@^2.8.8": version "2.8.8" resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.8.8.tgz#25edde60501708b8fe821f69ab1f284ac1b81814" @@ -10147,7 +10152,7 @@ is-directory@^0.3.1: resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1" integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE= -is-docker@2.0.0: +is-docker@2.0.0, is-docker@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.0.0.tgz#2cb0df0e75e2d064fe1864c37cdeacb7b2dcf25b" integrity sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ== @@ -12688,10 +12693,13 @@ onetime@^5.1.0: dependencies: mimic-fn "^2.1.0" -open@0.0.5: - version "0.0.5" - resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc" - integrity sha1-QsPhjslUZra/DcQvOilFw/DK2Pw= +open@7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/open/-/open-7.0.3.tgz#db551a1af9c7ab4c7af664139930826138531c48" + integrity sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA== + dependencies: + is-docker "^2.0.0" + is-wsl "^2.1.1" open@^6.3.0, open@^6.4.0: version "6.4.0"