diff --git a/10119-f679aeb89e1d09d8cc07.css b/10119-f679aeb89e1d09d8cc07.css new file mode 100644 index 000000000..cba009f74 --- /dev/null +++ b/10119-f679aeb89e1d09d8cc07.css @@ -0,0 +1 @@ +.Badges-module__badge___vex-\+{color:#fff;font-family:Verdana,DejaVu Sans,sans-serif;font-size:.7857rem;text-decoration:none}[dir=ltr] .Badges-module__badge___vex-\+{margin-right:.5em}[dir=rtl] .Badges-module__badge___vex-\+{margin-left:.5em}[dir] .Badges-module__badge-container___B13Mv{margin-bottom:.4em}[dir] .Badges-module__badge-name___jkN0m, [dir] .Badges-module__badge-version___agZ\+P{padding:.232rem .357rem}[dir=ltr] .Badges-module__badge-name___jkN0m, [dir=ltr] .Badges-module__badge-version___agZ\+P{text-shadow:1px 1px rgba(0,0,0,.3)}[dir=rtl] .Badges-module__badge-name___jkN0m, [dir=rtl] .Badges-module__badge-version___agZ\+P{text-shadow:-1px 1px rgba(0,0,0,.3)}[dir] .Badges-module__badge-name___jkN0m{background-color:#555}[dir=ltr] .Badges-module__badge-name___jkN0m{border-radius:3px 0 0 3px}[dir=rtl] .Badges-module__badge-name___jkN0m{border-radius:0 3px 3px 0}[dir] .Badges-module__badge-version___agZ\+P{background-color:#007acc}[dir=ltr] .Badges-module__badge-version___agZ\+P{border-radius:0 3px 3px 0}[dir=rtl] .Badges-module__badge-version___agZ\+P{border-radius:3px 0 0 3px} diff --git a/10119-f679aeb89e1d09d8cc07.js b/10119-f679aeb89e1d09d8cc07.js new file mode 100644 index 000000000..6f8cac395 --- /dev/null +++ b/10119-f679aeb89e1d09d8cc07.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkterra_ui=self.webpackChunkterra_ui||[]).push([[10119,17711,40092,72949,95330,7235,29616,62473,84854,38663,61044,92260,69879,47498,25117,81784,59403,37022,14641,71308,48927,98463,20844,53701,76082],{55713:function(e,n,a){var r=a(24994);n.A=void 0;var t=r(a(96540)),o=r(a(5556)),s=r(a(67967)),l=r(a(25642)),i=s.default.bind(l.default),p={name:o.default.string.isRequired,src:o.default.string,url:o.default.string,version:o.default.string.isRequired},c=function(e){var n=e.src,a=e.name,r=e.url,o=e.version,s=t.default.createElement("a",{className:i("badge"),href:r||"https://www.npmjs.org/package/".concat(a,"/v/").concat(o)},t.default.createElement("span",{className:i("badge-name")},r?"package":"npm"),t.default.createElement("span",{className:i("badge-version")},"v".concat(o))),l=n?t.default.createElement("a",{className:i("badge"),href:n},t.default.createElement("span",{className:i("badge-name")},"github"),t.default.createElement("span",{className:i("badge-version")},"source")):void 0;return t.default.createElement("div",{className:i("badge-container")},s,l)};c.propTypes=p;n.A=c},10119:function(e,n,a){a.r(n),a.d(n,{default:function(){return c}});a(96540);var r=a(36665),t=a(44403),o=["components"];function s(){return s=Object.assign?Object.assign.bind():function(e){for(var n=1;n=0||(t[a]=e[a]);return t}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(t[a]=e[a])}return t}var i={},p="wrapper";function c(e){var n=e.components,a=l(e,o);return(0,r.mdx)(p,s({},i,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)(t.E,{mdxType:"Badge"}),(0,r.mdx)("h1",{id:"terra-slide-panel-manager---upgrade-guide"},"Terra Slide Panel Manager - Upgrade Guide"),(0,r.mdx)("h2",{id:"upgrading-from-v2x-to-v3x"},"Upgrading from v2.x to v3.x"),(0,r.mdx)("p",null,"With the release of terra-disclosure-manager v3.x, the SlidePanelManager now provides its APIs through context instead of prop injection. Please view the terra-disclosure-manager documentation/upgrade guide for more information. "),(0,r.mdx)("p",null,"The below example code details the changes necessary to interact with terra-slide-panel-manager v3.x."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-diff"},"/**\n * v2.x to v3.x\n */\n import Base from 'terra-base';\n import SlidePanelManager from 'terra-slide-panel-manager'; \n- import AppDelegate from 'terra-app-delegate';\n+ import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';\n\n- const MyDisclosureComponent = ({ app }) => (\n+ const MyDisclosureComponent = withDisclosureManager(({ disclosureManager }) => (\n { \n- app.closeDisclosure();\n+ disclosureManager.closeDisclosure();\n }}\n />\n- );\n+ ));\n\n MyDisclosureComponent.propType = {\n- app: AppDelegate.propType,\n+ disclosureManager: disclosureManagerShape,\n };\n\n- const MyComponent = ({ app }) => (\n+ const MyComponent = withDisclosureManager(({ disclosureManager }) => (\n { \n- app.disclose({\n+ disclosureManager.disclose({\n preferredType: 'panel',\n content: {\n key: 'MY-PANEL-DISCLOSURE',\n component: ,\n }\n });\n }}\n />\n- );\n+ ));\n \n MyComponent.propType = {\n- app: AppDelegate.propType,\n+ disclosureManager: disclosureManagerShape,\n };\n\n const MyApp = () => (\n \n \n \n \n \n );\n")))}c.isMDXComponent=!0},44403:function(e,n,a){a.d(n,{E:function(){return o}});var r=a(96540),t=a(55713),o=function(e){var n=e.url;return r.createElement(t.A,{src:"https://github.com/cerner/terra-framework/tree/main/packages/terra-slide-panel-manager",name:"terra-slide-panel-manager",version:"5.101.0",url:n})}},25642:function(e,n,a){a.r(n),n.default={badge:"Badges-module__badge___vex-+","badge-container":"Badges-module__badge-container___B13Mv","badge-name":"Badges-module__badge-name___jkN0m","badge-version":"Badges-module__badge-version___agZ+P"}}}]); \ No newline at end of file diff --git a/10802-2ef6327bedeb108dbfda.js b/10802-2ef6327bedeb108dbfda.js new file mode 100644 index 000000000..7fbd81cce --- /dev/null +++ b/10802-2ef6327bedeb108dbfda.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkterra_ui=self.webpackChunkterra_ui||[]).push([[10802],{19566:function(t,n){Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var e={key:"dynamic_dataset_1",values:[{x:new Date(2016,0,1,3).toISOString(),y:1},{x:new Date(2016,0,1,6).toISOString(),y:5},{x:new Date(2016,0,1,9).toISOString(),y:8},{x:new Date(2016,0,1,12).toISOString(),y:20},{x:new Date(2016,0,1,15).toISOString(),y:6}]};n.default=e},74315:function(t,n,e){var a=e(24994);n.A=void 0;var r=a(e(85715)),i=a(e(96540)),o=a(e(23986)),l=a(e(61770)),p=a(e(45839));e(11719);var c,s=a(e(29683)),u=a(e(84147)),d=a(e(2682)),m=a(e(19566)),f=p.default.deepClone((0,u.default)("#BarPanningDynamicData")),g=p.default.deepClone(d.default),x={initial:0,factor:3};n.A=function(){i.default.useEffect((function(){(c=l.default.api.graph(f)).loadContent(l.default.api.bar(g))}),[]);var t=i.default.useReducer((function(t,n){var e;switch(n.type){case"panLeft":e=t.initial-t.factor;break;case"panRight":e=t.initial+t.factor;break;default:return t}return{initial:e,factor:t.factor}}),x),n=(0,r.default)(t,2),e=n[0],a=n[1];return i.default.useLayoutEffect((function(){if(c){c.config.axis.x.lowerLimit=new Date(2016,0,1,e.initial).toISOString(),c.config.axis.x.upperLimit=new Date(2016,0,2,e.initial).toISOString();var t={panData:[p.default.deepClone(m.default)]};c.reflowMultipleDatasets(t)}}),[e.initial]),i.default.createElement(i.default.Fragment,null,i.default.createElement(o.default,{className:"button-pan-left",text:"<",onClick:function(){return a({type:"panLeft"})}}),i.default.createElement(o.default,{className:"button-pan-right",text:">",onClick:function(){return a({type:"panRight"})}}),i.default.createElement(s.default,{id:"BarPanningDynamicData"}))}},10802:function(t,n,e){e.r(n),e.d(n,{default:function(){return E}});var a=e(96540),r=e(36665),i=e(74315),o=["components"];function l(){return l=Object.assign?Object.assign.bind():function(t){for(var n=1;n=0||(r[e]=t[e]);return r}(t,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var c={};function s(t){var n=t.components,e=p(t,o);return(0,r.mdx)("wrapper",l({},c,e,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport Button from 'terra-button/lib/Button';\nimport Carbon from '@cerner/carbon-graphs';\nimport utils from '@cerner/carbon-graphs/lib/js/helpers/utils';\nimport '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Bar/BarGraph.module.scss';\nimport ExampleGraphContainer from '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer';\nimport getBarConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/Bar/barPanning';\nimport initialData from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Bar/datasetTimeseries1';\nimport updatedData from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Bar/datasetTimeseries1newData';\n\n/*\nPlease refer to the documentation below to see the graphConfig and data objects\n*/\n\nconst graphConfig = utils.deepClone(getBarConfig('#BarPanningDynamicData'));\nconst dataset = utils.deepClone(initialData);\nconst initialState = {\n initial: 0,\n factor: 3,\n};\n\nlet graph;\n\nconst BarPanningExample = () => {\n React.useEffect(() => {\n graph = Carbon.api.graph(graphConfig);\n graph.loadContent(Carbon.api.bar(dataset));\n }, []);\n\n const reducer = (panState, action) => {\n let hour;\n\n switch (action.type) {\n case 'panLeft':\n hour = panState.initial - panState.factor;\n break;\n case 'panRight':\n hour = panState.initial + panState.factor;\n break;\n default:\n return panState;\n }\n\n return {\n initial: hour,\n factor: panState.factor,\n };\n };\n\n const [panState, dispatch] = React.useReducer(reducer, initialState);\n\n React.useLayoutEffect(() => {\n if (!graph) { return; }\n\n graph.config.axis.x.lowerLimit = new Date(2016, 0, 1, panState.initial).toISOString();\n graph.config.axis.x.upperLimit = new Date(2016, 0, 2, panState.initial).toISOString();\n\n const newDataset = { panData: [utils.deepClone(updatedData)] };\n\n graph.reflowMultipleDatasets(newDataset);\n }, [panState.initial]);\n\n return (\n <>\n