From b3a9e3756e3cd393afd034fb8b0837ee55ec9bdf Mon Sep 17 00:00:00 2001 From: telamonian Date: Mon, 7 Oct 2019 19:18:20 -0400 Subject: [PATCH] all of the wrapped icons now get autogenerated by `integrity` also had to revert the cleanup of createIcon's return type. The new way didn't work since some template parameters weren't specified --- buildutils/src/ensure-package.ts | 18 +++++++-- packages/notebook/src/truststatus.tsx | 8 ++-- .../ui-components/src/icon/iconimports.ts | 37 +++++++++++++++++++ packages/ui-components/src/icon/jlicon.tsx | 15 +++----- 4 files changed, 60 insertions(+), 18 deletions(-) diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts index 04999b0c5cf0..02bb53dc49b4 100644 --- a/buildutils/src/ensure-package.ts +++ b/buildutils/src/ensure-package.ts @@ -21,6 +21,7 @@ const HEADER_TEMPLATE = ` `; const ICON_IMPORTS_TEMPLATE = ` +import { createIcon } from './jlicon'; import { Icon } from './interfaces'; // icon svg import statements @@ -32,6 +33,9 @@ export namespace IconImports { {{iconModelDeclarations}} ]; } + +// wrapped icon definitions +{{wrappedIconDefs}} `; const ICON_CSS_CLASSES_TEMPLATE = ` @@ -350,6 +354,7 @@ export async function ensureUiComponents( // build the per-icon import code let _iconImportStatements: string[] = []; let _iconModelDeclarations: string[] = []; + let _wrappedIconDefs: string[] = []; svgs.forEach(svg => { const name = utils.stem(svg); const svgpath = path @@ -364,20 +369,25 @@ export async function ensureUiComponents( ); } else { // load the icon svg using `import` - const nameCamel = utils.camelCase(name) + 'Svg'; + const svgname = utils.camelCase(name) + 'Svg'; + const iconname = utils.camelCase(name, true) + 'Icon'; - _iconImportStatements.push(`import ${nameCamel} from '${svgpath}';`); - _iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`); + _iconImportStatements.push(`import ${svgname} from '${svgpath}';`); + _iconModelDeclarations.push(`{ name: '${name}', svg: ${svgname} }`); + _wrappedIconDefs.push( + `export const ${iconname} = createIcon('${name}', ${svgname});` + ); } }); const iconImportStatements = _iconImportStatements.join('\n'); const iconModelDeclarations = _iconModelDeclarations.join(',\n'); + const wrappedIconDefs = _wrappedIconDefs.join('\n'); // generate the actual contents of the iconImports file const iconImportsPath = path.join(iconSrcDir, 'iconImports.ts'); const iconImportsContents = utils.fromTemplate( HEADER_TEMPLATE + ICON_IMPORTS_TEMPLATE, - { funcName, iconImportStatements, iconModelDeclarations } + { funcName, iconImportStatements, iconModelDeclarations, wrappedIconDefs } ); messages.push(...ensureFile(iconImportsPath, iconImportsContents)); diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx index e6761424c35f..6a60f812faaf 100644 --- a/packages/notebook/src/truststatus.tsx +++ b/packages/notebook/src/truststatus.tsx @@ -6,7 +6,7 @@ import { INotebookModel, Notebook } from '.'; import { Cell } from '@jupyterlab/cells'; -import { DefaultIconReact } from '@jupyterlab/ui-components'; +import { NotTrustedIcon, TrustedIcon } from '@jupyterlab/ui-components'; import { toArray } from '@phosphor/algorithm'; @@ -45,11 +45,9 @@ function NotebookTrustComponent( props: NotebookTrustComponent.IProps ): React.ReactElement { if (props.allCellsTrusted) { - return ; + return ; } else { - return ( - - ); + return ; } } diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts index c368090d0736..d50ce366e6a7 100644 --- a/packages/ui-components/src/icon/iconimports.ts +++ b/packages/ui-components/src/icon/iconimports.ts @@ -5,6 +5,7 @@ /* This file was auto-generated by ensureUiComponents() in @jupyterlab/buildutils */ +import { createIcon } from './jlicon'; import { Icon } from './interfaces'; // icon svg import statements @@ -76,3 +77,39 @@ export namespace IconImports { { name: 'stop', svg: stopSvg } ]; } + +// wrapped icon definitions +export const FileIcon = createIcon('file', fileSvg); +export const FolderIcon = createIcon('folder', folderSvg); +export const Html5Icon = createIcon('html5', html5Svg); +export const ImageIcon = createIcon('image', imageSvg); +export const JsonIcon = createIcon('json', jsonSvg); +export const MarkdownIcon = createIcon('markdown', markdownSvg); +export const NotebookIcon = createIcon('notebook', notebookSvg); +export const PythonIcon = createIcon('python', pythonSvg); +export const RKernelIcon = createIcon('r-kernel', rKernelSvg); +export const ReactIcon = createIcon('react', reactSvg); +export const SpreadsheetIcon = createIcon('spreadsheet', spreadsheetSvg); +export const YamlIcon = createIcon('yaml', yamlSvg); +export const BuildIcon = createIcon('build', buildSvg); +export const ExtensionIcon = createIcon('extension', extensionSvg); +export const PaletteIcon = createIcon('palette', paletteSvg); +export const RunningIcon = createIcon('running', runningSvg); +export const TabIcon = createIcon('tab', tabSvg); +export const JupyterFaviconIcon = createIcon( + 'jupyter-favicon', + jupyterFaviconSvg +); +export const KernelIcon = createIcon('kernel', kernelSvg); +export const LineFormIcon = createIcon('line-form', lineFormSvg); +export const NotTrustedIcon = createIcon('not-trusted', notTrustedSvg); +export const TerminalIcon = createIcon('terminal', terminalSvg); +export const TrustedIcon = createIcon('trusted', trustedSvg); +export const AddIcon = createIcon('add', addSvg); +export const CopyIcon = createIcon('copy', copySvg); +export const CutIcon = createIcon('cut', cutSvg); +export const PasteIcon = createIcon('paste', pasteSvg); +export const RefreshIcon = createIcon('refresh', refreshSvg); +export const RunIcon = createIcon('run', runSvg); +export const SaveIcon = createIcon('save', saveSvg); +export const StopIcon = createIcon('stop', stopSvg); diff --git a/packages/ui-components/src/icon/jlicon.tsx b/packages/ui-components/src/icon/jlicon.tsx index 59cd19409fe4..a207ff05bcb6 100644 --- a/packages/ui-components/src/icon/jlicon.tsx +++ b/packages/ui-components/src/icon/jlicon.tsx @@ -33,7 +33,7 @@ export function createIcon( } } - const JLIcon: JLIcon.IComponent = React.forwardRef( + const _JLIcon = React.forwardRef( (props: JLIcon.IProps, ref: React.RefObject) => { const { className, title, tag = 'div', ...propsStyle } = props; const Tag = tag; @@ -59,6 +59,11 @@ export function createIcon( } ); + // widen type to include .element + let JLIcon: typeof _JLIcon & { + element: (props: JLIcon.IProps) => HTMLElement; + } = _JLIcon as any; + JLIcon.element = ({ className, title, @@ -109,14 +114,6 @@ export namespace JLIcon { */ title?: string; } - - /** - * The type of the react component-like object that gets - * returned by createIcon - */ - export interface IComponent extends ReturnType { - element?: (props: IProps) => HTMLElement; - } } namespace Private {