Skip to content

Commit

Permalink
improves performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@perpetualgrimace
perpetualgrimace committed Oct 2, 2019
1 parent 2d75eb6 commit 1735243
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 150 deletions.
2 changes: 1 addition & 1 deletion packages/cms/src/components/interface/Toolbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@mixin min-lg {
.cms-panel {
will-change: width;
transition: width 0.2s ease-out 0.4s;
transition: width 0.2s ease-out 0.2s;
}
.cms-panel:not(:last-child) {
width: calc(100% - var(--toolbox-width));
Expand Down
300 changes: 151 additions & 149 deletions packages/cms/src/components/interface/Toolbox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,157 +239,159 @@ export default class Toolbox extends Component {
</Button>
</div>

<FilterSearch
label="filter by name, output, description..."
namespace="cms"
value={query}
onChange={this.filter.bind(this)}
onReset={this.onReset.bind(this)}
/>

<ButtonGroup namespace="cms" buttons={[
{
onClick: () => this.setState({detailView: true}),
active: detailView,
namespace: "cms",
icon: "th-list",
iconPosition: "left",
children: "detail view",
fontSize: "xs"
},
{
onClick: () => this.setState({detailView: false}),
active: !detailView,
namespace: "cms",
icon: "list",
iconPosition: "left",
children: "output view",
fontSize: "xs"
}
]} />

{!detailView &&
<ul className="cms-button-list">
{Object.keys(variables[localeDefault])
.sort((a, b) => a.localeCompare(b))
.filter(key => key !== "_genStatus" && key !== "_matStatus")
.filter(key => key.toLowerCase().includes(query.toLowerCase()) || typeof variables[localeDefault][key] === "string" && variables[localeDefault][key].toLowerCase().includes(query.toLowerCase()))
.map(key =>
<li key={key} className="cms-button-item">
<Button
onClick={this.openGenerator.bind(this, key)}
namespace="cms"
fontSize="xxs"
fill
>
{key}: <ConsoleVariable value={variables[localeDefault][key]} />
</Button>
</li>
)}
</ul>
}

{/* Hide the panels if not detailView - but SHOW them if forceOpen is set, which means
* that someone has clicked an individual variable and wants to view its editor
*/}
<div className={`cms-toolbox-deck-wrapper${detailView || forceOpen ? "" : " is-hidden"}`}>

{(showGenerators || forceOpen) &&
<Deck
title="Generators"
entity="generator"
description="Variables constructed from JSON data calls."
addItem={this.addItem.bind(this, "generator")}
cards={generators.map(g =>
<GeneratorCard
key={g.id}
context="generator"
hidden={!detailView}
item={g}
attr={minData.attr || {}}
locale={localeDefault}
secondaryLocale={locale}
previews={previews}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
onClose={this.onClose.bind(this)}
type="generator"
variables={variables[localeDefault]}
secondaryVariables={variables[locale]}
forceOpen={forceType === "generator" && forceID === g.id ? forceOpen : null}
/>
)}
/>
}

{(showMaterializers || forceOpen) &&
<Deck
title="Materializers"
entity="materializer"
description="Variables constructed from other variables. No API calls needed."
addItem={this.addItem.bind(this, "materializer")}
cards={materializers.map(m =>
<GeneratorCard
key={m.id}
context="materializer"
hidden={!detailView}
item={m}
locale={localeDefault}
secondaryLocale={locale}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
onClose={this.onClose.bind(this)}
type="materializer"
variables={variables[localeDefault]}
secondaryVariables={variables[locale]}
parentArray={minData.materializers}
onMove={this.onMove.bind(this)}
forceOpen={forceType === "materializer" && forceID === m.id ? forceOpen : null}
/>
)}
/>
}

{ detailView && showSelectors &&
<Deck
title="Selectors"
entity="selector"
description="Profile-wide Selectors."
addItem={this.addItem.bind(this, "selector")}
cards={selectors.map(s =>
<SelectorCard
key={s.id}
minData={s}
type="selector"
locale={localeDefault}
onSave={this.updateSelectors.bind(this)}
onDelete={this.onDelete.bind(this)}
variables={variables[localeDefault]}
/>
)}
/>
{toolbarVisible && <React.Fragment>
<FilterSearch
label="filter by name, output, description..."
namespace="cms"
value={query}
onChange={this.filter.bind(this)}
onReset={this.onReset.bind(this)}
/>

<ButtonGroup namespace="cms" buttons={[
{
onClick: () => this.setState({detailView: true}),
active: detailView,
namespace: "cms",
icon: "th-list",
iconPosition: "left",
children: "detail view",
fontSize: "xs"
},
{
onClick: () => this.setState({detailView: false}),
active: !detailView,
namespace: "cms",
icon: "list",
iconPosition: "left",
children: "output view",
fontSize: "xs"
}
]} />

{!detailView &&
<ul className="cms-button-list">
{Object.keys(variables[localeDefault])
.sort((a, b) => a.localeCompare(b))
.filter(key => key !== "_genStatus" && key !== "_matStatus")
.filter(key => key.toLowerCase().includes(query.toLowerCase()) || typeof variables[localeDefault][key] === "string" && variables[localeDefault][key].toLowerCase().includes(query.toLowerCase()))
.map(key =>
<li key={key} className="cms-button-item">
<Button
onClick={this.openGenerator.bind(this, key)}
namespace="cms"
fontSize="xxs"
fill
>
{key}: <ConsoleVariable value={variables[localeDefault][key]} />
</Button>
</li>
)}
</ul>
}

{ detailView && showFormatters &&
<Deck
title="Formatters"
entity="formatter"
addItem={this.addItem.bind(this, "formatter")}
description="Javascript Formatters for Canon text components"
cards={formatters.map(g =>
<GeneratorCard
context="formatter"
key={g.id}
item={g}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
type="formatter"
variables={{}}
/>
)}
/>
}
</div>
{/* Hide the panels if not detailView - but SHOW them if forceOpen is set, which means
* that someone has clicked an individual variable and wants to view its editor
*/}
<div className={`cms-toolbox-deck-wrapper${detailView || forceOpen ? "" : " is-hidden"}`}>

{(showGenerators || forceOpen) &&
<Deck
title="Generators"
entity="generator"
description="Variables constructed from JSON data calls."
addItem={this.addItem.bind(this, "generator")}
cards={generators.map(g =>
<GeneratorCard
key={g.id}
context="generator"
hidden={!detailView}
item={g}
attr={minData.attr || {}}
locale={localeDefault}
secondaryLocale={locale}
previews={previews}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
onClose={this.onClose.bind(this)}
type="generator"
variables={variables[localeDefault]}
secondaryVariables={variables[locale]}
forceOpen={forceType === "generator" && forceID === g.id ? forceOpen : null}
/>
)}
/>
}

{(showMaterializers || forceOpen) &&
<Deck
title="Materializers"
entity="materializer"
description="Variables constructed from other variables. No API calls needed."
addItem={this.addItem.bind(this, "materializer")}
cards={materializers.map(m =>
<GeneratorCard
key={m.id}
context="materializer"
hidden={!detailView}
item={m}
locale={localeDefault}
secondaryLocale={locale}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
onClose={this.onClose.bind(this)}
type="materializer"
variables={variables[localeDefault]}
secondaryVariables={variables[locale]}
parentArray={minData.materializers}
onMove={this.onMove.bind(this)}
forceOpen={forceType === "materializer" && forceID === m.id ? forceOpen : null}
/>
)}
/>
}

{ detailView && showSelectors &&
<Deck
title="Selectors"
entity="selector"
description="Profile-wide Selectors."
addItem={this.addItem.bind(this, "selector")}
cards={selectors.map(s =>
<SelectorCard
key={s.id}
minData={s}
type="selector"
locale={localeDefault}
onSave={this.updateSelectors.bind(this)}
onDelete={this.onDelete.bind(this)}
variables={variables[localeDefault]}
/>
)}
/>
}

{ detailView && showFormatters &&
<Deck
title="Formatters"
entity="formatter"
addItem={this.addItem.bind(this, "formatter")}
description="Javascript Formatters for Canon text components"
cards={formatters.map(g =>
<GeneratorCard
context="formatter"
key={g.id}
item={g}
onSave={this.onSave.bind(this)}
onDelete={this.onDelete.bind(this)}
type="formatter"
variables={{}}
/>
)}
/>
}
</div>
</React.Fragment>}

{/* loading status */}
<Status recompiling={recompiling} />
Expand Down

0 comments on commit 1735243

Please sign in to comment.