/
AppBar-AutoDense.json
74 lines (74 loc) · 8.54 KB
/
AppBar-AutoDense.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
{
"public/index.html": {
"content": "<!DOCTYPE html>\n<html lang=\"en\" class=\"{{THEME}}-theme\">\n <head>\n <meta charset=\"utf-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n />\n <meta name=\"theme-color\" content=\"#000000\" />\n <link\n rel=\"stylesheet\"\n href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n />\n <!-- the styles are loaded through the CDN to speed up codesandbox demos. You'll normally want to import the `src/styles.scss` in the `src/index.tsx` instead to create custom themes --!>\n <link\n rel=\"stylesheet\"\n href=\"https://cdn.jsdelivr.net/gh/mlaursen/react-md@{{RMD_VERSION}}/themes/react-md.teal-pink-200-{{THEME}}.min.css\"\n />\n <title>AppBar Example - Auto Dense</title>\n </head>\n <body>\n <noscript>You need to enable JavaScript to run this app.</noscript>\n <div id=\"root\"></div>\n </body>\n</html>\n",
"isBinary": false
},
"src/index.tsx": {
"content": "import React from \"react\";\nimport { render } from \"react-dom\";\nimport { Configuration } from \"@react-md/layout\";\n\nimport Demo from \"./Demo\";\n\nconst App = () => (\n <Configuration>\n <Demo />\n </Configuration>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n",
"isBinary": false
},
"src/styles.scss": {
"content": "@import \"variables\";\n@import \"~@react-md/app-bar/dist/mixins\";\n@import \"~@react-md/layout/dist/mixins\";\n@import \"~@react-md/states/dist/mixins\";\n@import \"~@react-md/theme/dist/mixins\";\n@import \"~@react-md/tooltip/dist/mixins\";\n@import \"~@react-md/typography/dist/mixins\";\n@import \"~@react-md/utils/dist/mixins\";\n\n@include react-md-utils;\n",
"isBinary": false
},
"src/_variables.scss": {
"content": "@import \"~@react-md/theme/dist/color-palette\";\n\n$rmd-theme-light: true;\n$rmd-theme-primary: $rmd-teal-500;\n$rmd-theme-secondary: $rmd-pink-a-200;\n",
"isBinary": false
},
"package.json": {
"content": {
"title": "AppBar Example - Auto Dense",
"description": "Example from https://react-md.dev/packages/app-bar/demos#auto-dense",
"main": "src/index.tsx",
"dependencies": {
"@react-md/app-bar": "latest",
"@react-md/layout": "latest",
"@react-md/material-icons": "latest",
"@react-md/states": "latest",
"@react-md/theme": "latest",
"@react-md/tooltip": "latest",
"@react-md/typography": "latest",
"@react-md/utils": "latest",
"react": "latest",
"react-dom": "latest"
},
"devDependencies": {
"@types/jest": "latest",
"@types/node": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"node-sass": "latest",
"react-scripts": "latest",
"typescript": "latest"
},
"scripts": {
"start": "react-scripts start"
}
},
"isBinary": false
},
"src/Demo.tsx": {
"content": "import React, { FC } from \"react\";\nimport { AppBar, AppBarNav } from \"@react-md/app-bar\";\nimport { MenuSVGIcon } from \"@react-md/material-icons\";\n\nimport AppBarTitle from \"./AppBarTitle\";\n\nimport Container from \"./Container\";\nimport styles from \"./AutoDense.module.scss\";\n\nconst Demo: FC = () => (\n <Container className={styles.container}>\n <AppBar id=\"auto-dense-app-bar\">\n <AppBarNav id=\"auto-dense-app-bar-nav\" aria-label=\"Navigation\">\n <MenuSVGIcon />\n </AppBarNav>\n <AppBarTitle>Auto Dense</AppBarTitle>\n </AppBar>\n <AppBar\n id=\"auto-prominent-dense-app-bar\"\n className={styles.prominent}\n height=\"prominent\"\n >\n <AppBar>\n <AppBarNav\n id=\"auto-prominent-dense-app-bar-nav\"\n aria-label=\"Navigation\"\n >\n <MenuSVGIcon />\n </AppBarNav>\n <AppBarTitle>Auto Dense and prominent</AppBarTitle>\n </AppBar>\n </AppBar>\n </Container>\n);\n\nexport default Demo;\n",
"isBinary": false
},
"src/AppBarTitle.tsx": {
"content": "import React, {\n ReactElement,\n ReactNode,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n AppBarTitle as RMDAppBarTitle,\n AppBarTitleProps,\n} from \"@react-md/app-bar\";\nimport { Tooltipped } from \"@react-md/tooltip\";\nimport { useResizeObserver } from \"@react-md/utils\";\n\nimport { useId } from \"./IdProvider\";\n\n/**\n * This component is a wrapper for the AppBarTitle component from @react-md/app-bar\n * that will automatically update the title to show a tooltip if the title becomes\n * truncated.\n *\n * This is pretty hacky right so it isn't part of the main lib yet, but a better\n * sultion to \"auto tooltip\" things might be added one day.\n */\nexport default function AppBarTitle({\n id,\n children,\n ...props\n}: AppBarTitleProps): ReactElement {\n const [tooltip, setTooltip] = useState<ReactNode>(null);\n const ref = useRef<HTMLHeadingElement | null>(null);\n const updateTooltip = useCallback(() => {\n if (!ref.current) {\n return;\n }\n\n const isTruncated = ref.current.offsetWidth < ref.current.scrollWidth;\n if (isTruncated && !tooltip) {\n setTooltip(children);\n } else if (!isTruncated && tooltip) {\n setTooltip(null);\n }\n }, [tooltip, ref, children]);\n const [, refHandler] = useResizeObserver(updateTooltip, {\n ref,\n disableHeight: true,\n });\n\n return (\n <Tooltipped id={useId(id)} tooltip={tooltip}>\n <RMDAppBarTitle\n {...props}\n ref={refHandler}\n tabIndex={tooltip ? 0 : undefined}\n >\n {children}\n </RMDAppBarTitle>\n </Tooltipped>\n );\n}\n",
"isBinary": false
},
"src/AutoDense.module.scss": {
"content": "@import \"~@react-md/app-bar/dist/mixins\";\n@import \"~@react-md/utils/dist/mixins\";\n\n.container {\n @include rmd-utils-desktop-media {\n @include rmd-app-bar-theme-update-var(\n height,\n rmd-app-bar-theme-var(dense-height)\n );\n\n .prominent {\n @include rmd-app-bar-theme-update-var(\n prominent-height,\n rmd-app-bar-theme-var(prominent-dense-height)\n );\n }\n }\n}\n\n.prominent {\n @include rmd-app-bar-theme-update-var(\n prominent-height,\n rmd-app-bar-theme-var(prominent-dense-height)\n );\n\n // just because I don't want to create 2 rows of data for this example\n align-items: flex-start;\n}\n",
"isBinary": false
},
"src/Container.tsx": {
"content": "import React, { FC, HTMLAttributes } from \"react\";\nimport { Grid } from \"@react-md/utils\";\n\nconst Container: FC<HTMLAttributes<HTMLDivElement>> = ({\n children,\n ...props\n}) => (\n <Grid {...props} clone padding={0} columns={1}>\n {children}\n </Grid>\n);\n\nexport default Container;\n",
"isBinary": false
},
"src/IdProvider.tsx": {
"content": "import React, {\n createContext,\n useContext,\n useMemo,\n ReactNode,\n ReactElement,\n} from \"react\";\nimport createIdGenerator from \"./createIdGenerator\";\n\ntype IdGenerator = ReturnType<typeof createIdGenerator>;\n\nconst context = createContext<IdGenerator>(createIdGenerator(\"autoid\"));\nconst { Provider } = context;\n\nexport function useId(id?: string): string {\n const generator = useContext(context);\n\n return useMemo(() => {\n if (id) {\n return id;\n }\n\n return generator();\n }, [id, generator]);\n}\n\nexport interface IdProviderProps {\n prefix?: string;\n children: ReactNode;\n}\n\nexport function IdProvider({\n children,\n prefix = \"autoid\",\n}: IdProviderProps): ReactElement {\n const value = useMemo(() => createIdGenerator(prefix), [prefix]);\n\n return <Provider value={value}>{children}</Provider>;\n}\n",
"isBinary": false
},
"src/createIdGenerator.ts": {
"content": "/**\n * An extremely simplified uuid function that is scoped with a speciifc prefix. This\n * will just always increment the total count at the end of the prefix.\n *\n * ```ts\n * const uuid = createIdGenerator(\"my-custom-prefix\");\n *\n * uuid(); // my-custom-prefix-0\n * uuid(); // my-custom-prefix-1\n * uuid(); // my-custom-prefix-2\n * ```\n *\n * @param prefix The string prefix to use\n * @return a function to call to generate a \"uuid\"\n */\nexport default function createIdGenerator(prefix: string): () => string {\n const generator = (function* idGenerator() {\n let index = 0;\n while (true) {\n yield `${prefix}-${index}`;\n index += 1;\n }\n })();\n\n return (): string => generator.next().value;\n}\n",
"isBinary": false
}
}