Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure consistent icon size, allow generateIndentCSS override, fix demo #50

Merged
merged 10 commits into from
Jun 5, 2020
Merged

Conversation

himdel
Copy link
Contributor

@himdel himdel commented May 21, 2020

Fixes #49

Demo build was failing on an import, changed to a relative import,
and added normalize.css so that the demo uses the same reset stylesheet as the UI.

Added an optional callbacks.generateIndentCSS prop, a function to generate the indent css given max depth. Returning an empty string will disable css generation.

Updated css so that all icons are actually 1em + 4px wide total.

@brumik WDYT?


Before:

before

After normalize.css + border-box:

middle

After everything:

after

@@ -1,4 +1,5 @@
import { HierarchicalNodeProps, TreeDataType } from 'react-wooden-tree';
// import { HierarchicalNodeProps, TreeDataType } from 'react-wooden-tree';
import { HierarchicalNodeProps, TreeDataType } from '../../src/';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was used with npm link to show that it is imported from the package, but I guess, it is more convenient like this.

Copy link
Contributor Author

@himdel himdel Jun 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, looks like we can keep the name and use an alias, that also works :) updated

Copy link
Owner

@brumik brumik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I like it (except that one small thing I commented under). Can you please generate new docs for it with npm docs after you updated the comments?

src/components/Tree.tsx Outdated Show resolved Hide resolved
himdel added 9 commits June 4, 2020 23:59
fixes build error:

    ERROR in /home/himdel/react-wooden-tree/demo/src/Generator.tsx
    ./src/Generator.tsx
    [tsl] ERROR in /home/himdel/react-wooden-tree/demo/src/Generator.tsx(1,53)
        TS2307: Cannot find module 'react-wooden-tree' or its corresponding type declarations.

by using a webpack alias
picked normalize because that's what manageiq ends up using (via patternfly and bootstrap)
normalize.css doesn't do it out of the box
when present, gets called with depth
does not actually affect the resulting css
this ensures every icon has a width of 1em + 4px,
where 1em is used for the actual icon, and 4px for padding

removed fa-fw because of the 1.2... width, but included the text-align:center rule
@himdel
Copy link
Contributor Author

himdel commented Jun 5, 2020

Can you please generate new docs for it with npm docs after you updated the comments?

Well, npm docs doesn't really work, because it doesn't run it in a globstar supporting shell by default (so no **):

> [email protected] docs /home/himdel/react-wooden-tree
> typedoc --out docs --name 'React Wodden Tree' --target es6 --excludePrivate --excludeProtected --excludeExternals --mode file src/**/{Tree,types}.tsx

fs.js:114
    throw err;
    ^

Error: ENOENT: no such file or directory, stat '/home/himdel/react-wooden-tree/src/**/{Tree,types}.tsx'
    at Object.statSync (fs.js:855:3)

But running manually, with some additions worked, added :)

typedoc --out docs --name 'React Wodden Tree' --target es6 --excludePrivate --excludeProtected --excludeExternals --mode file src/**/{Tree,types}.tsx

# remove /home/himdel/react-wooden-tree references
perl -i -npe 's/.home.himdel.//' docs/**/*.*

# fix github/himdel references back to github/brumik
perl -i -npe 's#github.com/himdel#github.com/brumik#' docs/**/*.*

typedoc --out docs --name 'React Wodden Tree' --target es6 --excludePrivate --excludeProtected --excludeExternals --mode file src/**/{Tree,types}.tsx

perl -i -npe 's/.home.himdel.//' docs/**/*.*

perl -i -npe 's#github.com/himdel#github.com/brumik#' docs/**/*.*
@himdel
Copy link
Contributor Author

himdel commented Jun 5, 2020

Should be ready @brumik :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Exposing params or methods for CSS generation
2 participants