component---src-pages-complex-replace-existing-method-mdx-1b8165b3ef2173d2cdb4.js.map

{"version":3,"file":"component---src-pages-complex-replace-existing-method-mdx-1b8165b3ef2173d2cdb4.js","mappings":"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","sources":["webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageHeader/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/EditLink/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/EditLink/EditLink.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/EditLink/EditLink.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageTabs/PageTabs.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageTabs/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/LastModifiedDate/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/LastModifiedDate/LastModifiedDate.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/LastModifiedDate/last-modified-date.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/templates/Default.js","webpack://mas-playbook/./src/pages/complex/replace-existing-method.mdx"],"sourcesContent":["import PageHeader from './PageHeader';\n\nexport default PageHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport * as styles from './PageHeader.module.scss';\n\nconst PageHeader = ({ title, theme, tabs = [] }) => (\n  <div\n    className={cx(styles.pageHeader, {\n      [styles.withTabs]: tabs.length,\n      [styles.darkMode]: theme === 'dark',\n    })}>\n    <div className=\"bx--grid\">\n      <div className=\"bx--row\">\n        <div className=\"bx--col-lg-12\">\n          <h1 id=\"page-title\" className={styles.text}>\n            {title}\n          </h1>\n        </div>\n      </div>\n    </div>\n  </div>\n);\n\nPageHeader.propTypes = {\n  /**\n   * Specify the title for the page\n   */\n  title: PropTypes.node,\n};\n\nexport default PageHeader;\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"PageHeader-module--bx--text-truncate--end--b8JtW\";\nexport var bxTextTruncateFront = \"PageHeader-module--bx--text-truncate--front--WwZFh\";\nexport var darkMode = \"PageHeader-module--dark-mode--WCeH8\";\nexport var pageHeader = \"PageHeader-module--page-header--NqfPe\";\nexport var text = \"PageHeader-module--text--Er2EO\";\nexport var withTabs = \"PageHeader-module--with-tabs--vbQ-W\";","import EditLink from './EditLink';\n\nexport default EditLink;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { graphql, useStaticQuery } from 'gatsby';\n\nimport { link, row } from './EditLink.module.scss';\n\nconst EditLink = ({ relativePagePath, repository: repositoryProp }) => {\n  const {\n    site: {\n      siteMetadata: { repository },\n    },\n  } = useStaticQuery(graphql`\n    query REPOSITORY_QUERY {\n      site {\n        siteMetadata {\n          repository {\n            baseUrl\n            subDirectory\n            branch\n          }\n        }\n      }\n    }\n  `);\n\n  const { baseUrl, subDirectory, branch } = repositoryProp || repository;\n\n  const href = `${baseUrl}/edit/${branch}${subDirectory}/src/pages${relativePagePath}`;\n\n  return baseUrl ? (\n    <div className={`bx--row ${row}`}>\n      <div className=\"bx--col\">\n        <a className={link} href={href}>\n          Edit this page on GitHub\n        </a>\n      </div>\n    </div>\n  ) : null;\n};\n\nEditLink.propTypes = {\n  repository: PropTypes.shape({\n    baseUrl: PropTypes.string,\n    subDirectory: PropTypes.string,\n    branch: PropTypes.string,\n  }),\n  relativePagePath: PropTypes.string,\n};\n\nexport default EditLink;\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"EditLink-module--bx--text-truncate--end--uI0cF\";\nexport var bxTextTruncateFront = \"EditLink-module--bx--text-truncate--front--HxjcS\";\nexport var link = \"EditLink-module--link--IDrl1\";\nexport var row = \"EditLink-module--row--BEmSX\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'gatsby';\nimport slugify from 'slugify';\nimport cx from 'classnames';\n\nimport {\n  tabsContainer,\n  list,\n  selectedItem,\n  listItem,\n  link,\n} from './PageTabs.module.scss';\n\nexport default class PageTabs extends React.Component {\n  render() {\n    const { title, tabs, slug } = this.props;\n    const currentTab = slug.split('/').filter(Boolean).slice(-1)[0];\n\n    const pageTabs = tabs.map((tab) => {\n      const slugifiedTab = slugify(tab, { lower: true, strict: true });\n      const selected = slugifiedTab === currentTab;\n      // matches with or without trailing slash: /?\n      // matches with or without hash link: (#.*)?\n      const currentTabRegex = new RegExp(`${currentTab}/?(#.*)?$`);\n      const href = slug.replace(currentTabRegex, slugifiedTab);\n      return (\n        <li key={tab} className={cx({ [selectedItem]: selected }, listItem)}>\n          <Link className={link} to={`${href}`}>\n            {tab}\n          </Link>\n        </li>\n      );\n    });\n\n    return (\n      <div className={tabsContainer}>\n        <div className=\"bx--grid\">\n          <div className=\"bx--row\">\n            <div className=\"bx--col-lg-12 bx--col-no-gutter\">\n              <nav aria-label={title}>\n                <ul className={list}>{pageTabs}</ul>\n              </nav>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nPageTabs.propTypes = {\n  tabs: PropTypes.array,\n  slug: PropTypes.string,\n};\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"PageTabs-module--bx--text-truncate--end--OC59x\";\nexport var bxTextTruncateFront = \"PageTabs-module--bx--text-truncate--front--5I6-L\";\nexport var link = \"PageTabs-module--link--Kz-7R\";\nexport var list = \"PageTabs-module--list--xLqxG\";\nexport var listItem = \"PageTabs-module--list-item--024o6\";\nexport var selectedItem = \"PageTabs-module--selected-item--aBB0K\";\nexport var tabsContainer = \"PageTabs-module--tabs-container--Cdfzw\";","import PageTabs from './PageTabs';\n\nexport default PageTabs;\n","import LastModifiedDate from './LastModifiedDate';\n\nexport default LastModifiedDate;\n","import React from 'react';\nimport { Row, Column } from '../Grid';\nimport * as styles from './last-modified-date.module.scss';\n\nconst LastModifiedDate = ({ date }) => {\n  const options = {\n    day: '2-digit',\n    year: 'numeric',\n    month: 'long',\n  };\n\n  const lastModified = new Date(date);\n\n  return date ? (\n    <Row className={styles.row}>\n      <Column>\n        <div className={styles.text}>\n          Page last updated: {lastModified.toLocaleDateString('en-GB', options)}\n          {/* // https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/dates-and-times.html */}\n        </div>\n      </Column>\n    </Row>\n  ) : null;\n};\nexport default LastModifiedDate;\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"last-modified-date-module--bx--text-truncate--end--QgCc7\";\nexport var bxTextTruncateFront = \"last-modified-date-module--bx--text-truncate--front--kel8a\";\nexport var row = \"last-modified-date-module--row--XJoYQ\";\nexport var text = \"last-modified-date-module--text--ogPQF\";","import React from 'react';\nimport slugify from 'slugify';\nimport { useStaticQuery, graphql } from 'gatsby';\n\nimport Utils from '../components/Utils';\nimport Layout from '../components/Layout';\nimport PageHeader from '../components/PageHeader';\nimport EditLink from '../components/EditLink';\nimport NextPrevious from '../components/NextPrevious';\nimport PageTabs from '../components/PageTabs';\nimport Main from '../components/Main';\nimport useMetadata from '../util/hooks/useMetadata';\nimport LastModifiedDate from '../components/LastModifiedDate';\n\nconst Default = ({ pageContext, children, location, Title }) => {\n  const { frontmatter = {}, relativePagePath, titleType } = pageContext;\n  const {\n    tabs,\n    title,\n    theme: frontmatterTheme,\n    description,\n    keywords,\n    date,\n  } = frontmatter;\n\n  const { interiorTheme } = useMetadata();\n\n  // get the path prefix if it exists\n  const {\n    site: { pathPrefix },\n  } = useStaticQuery(graphql`\n    query PATH_PREFIX_QUERY {\n      site {\n        pathPrefix\n      }\n    }\n  `);\n\n  // let gatsby handle prefixing\n  const slug = pathPrefix\n    ? location.pathname.replace(pathPrefix, '')\n    : location.pathname;\n\n  const getCurrentTab = () => {\n    if (!tabs) return '';\n    return (\n      slug.split('/').filter(Boolean).slice(-1)[0] ||\n      slugify(tabs[0], { lower: true })\n    );\n  };\n\n  const currentTab = getCurrentTab();\n\n  const theme = frontmatterTheme || interiorTheme;\n\n  return (\n    <Layout\n      tabs={tabs}\n      homepage={false}\n      theme={theme}\n      pageTitle={title}\n      pageDescription={description}\n      pageKeywords={keywords}\n      titleType={titleType}>\n      <PageHeader\n        title={Title ? <Title /> : title}\n        label=\"label\"\n        tabs={tabs}\n        theme={theme}\n      />\n      {tabs && (\n        <PageTabs\n          title={title}\n          slug={slug}\n          tabs={tabs}\n          currentTab={currentTab}\n        />\n      )}\n      <Main padded>\n        {children}\n        <EditLink relativePagePath={relativePagePath} />\n        <LastModifiedDate date={date} />\n      </Main>\n      <NextPrevious\n        pageContext={pageContext}\n        location={location}\n        slug={slug}\n        tabs={tabs}\n        currentTab={currentTab}\n      />\n      <Utils />\n    </Layout>\n  );\n};\n\nexport default Default;\n","import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\n\nimport DefaultLayout from \"/home/travis/build/maximo-app-framework/configuration-practices-documentation/node_modules/gatsby-theme-carbon/src/templates/Default.js\";\nexport const _frontmatter = {};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n    <h2>{`About this task`}</h2>\n    <p>{`When a controller is bound to the application, page, or datasource, the controller class can handle any events that are dispatched. If the controller has a function that matches the event name, it will be invoked to handle the event.\nFor example, the Technician app has a sliding drawer (a dialog) which uses the “changeStatusHandler” controller. ChangeStatusHandler has a “changeStatus()” function that will be called when the “changeStatus” event is triggered by a button on the page.\nIf there is a need to do some processing before or after the call to changeStatus(), the Configuration Application can add an AppCustomizations.js file where the behavior can be modified through javascript.\nThe code works by swapping the controller’s implementation of changeStatus() with one of our own design. When the sliding drawer is first created, the dialog-initialized lifecycle event is sent and we can use that to replace the current changeStatus() call with another function.\nThe dialogInitialized() function checks to see whether the dialog being initialized is “woStatusChangeDialog”, and if so it will get the dialog’s controller, save off the changeStatus() function and then set changeStatus to a new function. The new code calls the original changeStatus() function, but can also do some processing before and after.`}</p>\n    <h2>{`Procedure`}</h2>\n    <h3>{`Step 1: Capture the method reference during initialization of the component.`}</h3>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-js\"\n      }}>{`  let controller = obj.controllers[0];\n  let oldChangeStatus = controller.changeStatus.bind(c);\n`}</code></pre>\n    <h3>{`Step 2: Reassign the method reference to a new function.`}</h3>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-js\"\n      }}>{`  controller.changeStatus = (evt) => {}\n`}</code></pre>\n    <h3>{`Step 3: AppCustomizations.js`}</h3>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-js\"\n      }}>{`// Custom Application Logic\nclass AppCustomizations{\n\n  applicationInitialized(app){\n    this.app = app;\n  }\n\n  dialogInitialized(obj) {\n    if(obj.name === 'woStatusChangeDialog'){\n      console.log('******dialogInitialized:dialogname='+obj.name);\n      let controller = obj.controllers[0];\n      let oldChangeStatus = controller.changeStatus.bind(c);\n      controller.changeStatus = (evt) => {\n        //do something before\n        console.log(\"*******before changeStatus\");\n        if(this.myChangeStatusCheck(evt)){\n          oldChangeStatus();\n        }\n        //do something after\n        console.log(\"*******afterchangeStatus\");\n      }\n    }\n  }\n\n  myChangeStatusCheck(evt) {\n    console.log(\"*******before changeStatus\");\n    return true;\n  }\n}\n\nexport default AppCustomizations;\n`}</code></pre>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"names":["title","theme","tabs","className","cx","length","id","relativePagePath","repositoryProp","repository","useStaticQuery","site","siteMetadata","baseUrl","subDirectory","href","branch","PageTabs","render","this","props","slug","currentTab","split","filter","Boolean","slice","pageTabs","map","tab","slugifiedTab","slugify","lower","strict","selected","currentTabRegex","RegExp","replace","key","Link","to","React","date","lastModified","Date","toLocaleDateString","day","year","month","pageContext","children","location","Title","frontmatter","titleType","frontmatterTheme","description","keywords","interiorTheme","useMetadata","pathPrefix","pathname","Layout","homepage","pageTitle","pageDescription","pageKeywords","label","Main","padded","NextPrevious","Utils","_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","mdxType","parentName","isMDXComponent"],"sourceRoot":""}