Skip to content

Commit

Permalink
Fix code snippet expand button (carbon-design-system#284)
Browse files Browse the repository at this point in the history 
* Fix code snippet expand button

This change creates a table mapping the component name and the list of Carbon classes to instantiate.
This change also ensures that existing Carbon instances are released before instantiating new ones.

Fixes carbon-design-system#276.

* Fix for modal
  • Loading branch information
@asudoh @marijohannessen
asudoh authored and marijohannessen committed Jun 27, 2018
1 parent efd8f78 commit f9e5c7f
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 97 deletions.
66 changes: 0 additions & 66 deletions src/app/components/internal/CodePage/CodePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,72 +11,6 @@ class CodePage extends Component {
hideViewFullRender: PropTypes.bool,
};

componentDidMount() {
let currentComponent = this.props.component;
currentComponent = currentComponent.replace(/-([a-z])/g, g => g[1].toUpperCase());
currentComponent = currentComponent.charAt(0).toUpperCase() + currentComponent.substring(1);
if (currentComponent === 'Tabs') {
currentComponent = 'Tab';
} else if (currentComponent === 'Card') {
currentComponent = 'OverflowMenu';
} else if (currentComponent === 'CodeSnippet') {
currentComponent = 'CopyButton';
} else if (currentComponent === 'OrderSummary') {
currentComponent = 'Dropdown';
}
if (window.CDS['carbon-components'][currentComponent]) {
if (currentComponent === 'Tab') {
window.CDS['carbon-components'].Tab.init();
window.CDS['carbon-components'].ContentSwitcher.init();
} else if (currentComponent === 'DataTable') {
window.CDS['carbon-components'].OverflowMenu.init();
window.CDS['carbon-components'].DataTable.init();
window.CDS['carbon-components'].Toolbar.init();
window.CDS['carbon-components'].DataTableV2.init();
} else if (currentComponent === 'DatePicker') {
window.CDS['carbon-components'].DatePicker.init();
} else if (currentComponent === 'DetailPageHeader') {
window.CDS['carbon-components'].OverflowMenu.init();
window.CDS['carbon-components'].Tab.init();
} else {
window.CDS['carbon-components'][currentComponent].init();
}
}
}

componentDidUpdate() {
let currentComponent = this.props.component;
currentComponent = currentComponent.replace(/-([a-z])/g, g => g[1].toUpperCase());
currentComponent = currentComponent.charAt(0).toUpperCase() + currentComponent.substring(1);
if (currentComponent === 'Tabs') {
currentComponent = 'Tab';
} else if (currentComponent === 'Card') {
currentComponent = 'OverflowMenu';
} else if (currentComponent === 'CodeSnippet') {
currentComponent = 'CopyButton';
} else if (currentComponent === 'OrderSummary') {
currentComponent = 'Dropdown';
}
if (window.CDS['carbon-components'][currentComponent]) {
if (currentComponent === 'Tab') {
window.CDS['carbon-components'].Tab.init();
window.CDS['carbon-components'].ContentSwitcher.init();
} else if (currentComponent === 'DataTable') {
window.CDS['carbon-components'].OverflowMenu.init();
window.CDS['carbon-components'].DataTable.init();
window.CDS['carbon-components'].Toolbar.init();
window.CDS['carbon-components'].DataTableV2.init();
} else if (currentComponent === 'DatePicker') {
window.CDS['carbon-components'].DatePicker.init();
} else if (currentComponent === 'DetailPageHeader') {
window.CDS['carbon-components'].OverflowMenu.init();
window.CDS['carbon-components'].Tab.init();
} else {
window.CDS['carbon-components'][currentComponent].init();
}
}
}

renderVariation = (parent, variation, variations, title, codepenSlug) => {
let currentCodepenSlug = '';
if (!(codepenSlug === undefined)) {
Expand Down
81 changes: 50 additions & 31 deletions src/app/components/internal/ComponentExample/ComponentExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,15 @@ import CodeExample from '../CodeExample/CodeExample';

import { RadioButtonGroup, RadioButton } from 'carbon-components-react';

const componentNamesMap = {
Card: ['OverflowMenu'],
CodeSnippet: ['CodeSnippet', 'CopyButton'],
DataTable: ['DataTable', 'DataTableV2', 'OverflowMenu', 'Toolbar'],
DetailPageHeader: ['OverflowMenu', 'Tab'],
OrderSummary: ['Dropdown'],
Tabs: ['Tab', 'ContentSwitcher'],
};

class ComponentExample extends Component {
static propTypes = {
htmlFile: PropTypes.string,
Expand All @@ -15,42 +24,15 @@ class ComponentExample extends Component {
codepenSlug: PropTypes.string,
};

static _initHandles = new WeakMap();

state = {
currentFieldColor: 'field-01',
currentHTMLfile: this.props.htmlFile,
};

componentDidUpdate = () => {
let currentComponent = this.props.component;
currentComponent = currentComponent.replace(/-([a-z])/g, g => g[1].toUpperCase());
currentComponent = currentComponent.charAt(0).toUpperCase() + currentComponent.substring(1);
if (currentComponent === 'Tabs') {
currentComponent = 'Tab';
} else if (currentComponent === 'Card') {
currentComponent = 'OverflowMenu';
} else if (currentComponent === 'CodeSnippet') {
currentComponent = 'CopyButton';
} else if (currentComponent === 'OrderSummary') {
currentComponent = 'Dropdown';
}
if (window.CDS['carbon-components'][currentComponent]) {
if (currentComponent === 'Tab') {
window.CDS['carbon-components'].Tab.init();
window.CDS['carbon-components'].ContentSwitcher.init();
} else if (currentComponent === 'DataTable') {
window.CDS['carbon-components'].OverflowMenu.init();
window.CDS['carbon-components'].DataTable.init();
window.CDS['carbon-components'].Toolbar.init();
window.CDS['carbon-components'].DataTableV2.init();
} else if (currentComponent === 'DatePicker') {
window.CDS['carbon-components'].DatePicker.init();
} else if (currentComponent === 'DetailPageHeader') {
window.CDS['carbon-components'].OverflowMenu.init();
window.CDS['carbon-components'].Tab.init();
} else {
window.CDS['carbon-components'][currentComponent].init();
}
}
this._releaseAndInstantiateComponents();
};

onSwitchFieldColors = value => {
Expand All @@ -77,6 +59,43 @@ class ComponentExample extends Component {
});
};

_ref = null;

_instances = [];

_liveDemoRef = ref => {
this._ref = ref;
this._releaseAndInstantiateComponents();
};

_releaseAndInstantiateComponents() {
const instances = this._instances;
for (let instance = instances.pop(); instance; instance = instances.pop()) {
instance.release();
}
const ref = this._ref;
if (ref) {
const componentsList = window.CDS['carbon-components'];
const currentComponent = this.props.component
.replace(/-([a-z])/g, (match, token) => token.toUpperCase())
.replace(/^([a-z])/, (match, token) => token.toUpperCase());
(componentNamesMap[currentComponent] || [currentComponent]).forEach((name) => {
const TheComponent = componentsList[name];
if (TheComponent) {
if (TheComponent.prototype.createdByLauncher) {
const initHandles = this.constructor._initHandles;
if (!initHandles.has(TheComponent)) {
initHandles.set(TheComponent, TheComponent.init());
}
} else {
const selectorInit = TheComponent.options.selectorInit;
instances.push(...[...ref.querySelectorAll(selectorInit)].map(elem => TheComponent.create(elem)));
}
}
});
}
}

render() {
const { component, codepenSlug, variation } = this.props;
const classNames = classnames({
Expand Down Expand Up @@ -151,7 +170,7 @@ class ComponentExample extends Component {
<div className="svg--sprite" aria-hidden="true" />
<div className={liveBackgroundClasses}>
<div className={classNames}>
<div dangerouslySetInnerHTML={{ __html: this.state.currentHTMLfile }} />
<div ref={this._liveDemoRef} dangerouslySetInnerHTML={{ __html: this.state.currentHTMLfile }} />
</div>
</div>
<div className="component-toolbar">
Expand Down

0 comments on commit f9e5c7f

Please sign in to comment.