DX Component - Highlight Field Demo

简介

DX Component highlight 控件样例。

样例需求

• 根据判断条件显示不同颜色的字段

详细步骤

第一步： 创建控件

myserver@my-dev:~/pega/pega_dx_component/persdxcomponent$ npm run create
DX Component Builder v23.1.15
? Enter type of component Field
? Enter subtype of component Text
? Enter component name (required) HighlightValue
? Enter component label for display (required) Highlight Value
? Enter component version 1.0.0
? Enter library name (required) PersDXComponent
? Please enter the application names to be supported (comma-separated). Keep empty for all applications 
? Enter description for the component Highlight value 
Pers_PersDXComponent_HighlightValue component is created in /home/myserver/pega/pega_dx_component/persdxcomponent/src/components/Pers_PersDXComponent_HighlightValue

第二步： 更新 index.tsx

import { Text, withConfiguration } from '@pega/cosmos-react-core';

import type { PConnFieldProps } from './PConnProps';
import './create-nonce';

import StyledPersPersDxComponentHighlightValueWrapper from './styles';

// interface for props
interface PersPersDxComponentHighlightValueProps extends PConnFieldProps {
  // If any, enter additional props that only exist on TextInput here

}

// Duplicated runtime code from Constellation Design System Component

// props passed in combination of props from property panel (config.json) and run time props from Constellation
// any default values in config.pros should be set in defaultProps at bottom of this file
function PersPersDxComponentHighlightValue(props: PersPersDxComponentHighlightValueProps) {
  const { value } = props;


  switch(value) {
    case 'High': 
      return (<StyledPersPersDxComponentHighlightValueWrapper><Text variant='h1' status='error'>Risk is {value}</Text></StyledPersPersDxComponentHighlightValueWrapper>);
      break;
    case 'Low': 
      return (<StyledPersPersDxComponentHighlightValueWrapper><Text variant='h1' status='success'>Risk is {value}</Text></StyledPersPersDxComponentHighlightValueWrapper>);
      break;
    default:
      return (<StyledPersPersDxComponentHighlightValueWrapper><Text>Risk is undefined</Text></StyledPersPersDxComponentHighlightValueWrapper>);
  }


};


export default withConfiguration(PersPersDxComponentHighlightValue);

第三步： 修改 demo.stories.tsx - 用于测试

/* eslint-disable react/jsx-no-useless-fragment */
// @ts-nocheck
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { stateProps, configProps } from './mock';

import PersPersDxComponentHighlightValue from './index';

const meta: Meta<typeof PersPersDxComponentHighlightValue> = {
  title: 'PersPersDxComponentHighlightValue',
  component: PersPersDxComponentHighlightValue,
  excludeStories: /.*Data$/
};

export default meta;
type Story = StoryObj<typeof PersPersDxComponentHighlightValue>;

export const BasePersPersDxComponentHighlightValue: Story = args => {

  const [value, setValue] = useState(configProps.value);

  const props = {
    value: 'High', // 更新了 value 数据
    placeholder: configProps.placeholder,
    label: configProps.label,
    testId: configProps.testId,
    hasSuggestions: configProps.hasSuggestions,

    getPConnect: () => {
      return {
        getStateProps: () => {
          return stateProps;
        },
        getActionsApi: () => {
          return {
            updateFieldValue: (propName, theValue) => {
              setValue(theValue);
            },
            triggerFieldChange: () => {/* nothing */}
          };
        },
        ignoreSuggestion: () => {/* nothing */},
        acceptSuggestion: () => {/* nothing */},
        setInheritedProps: () => {/* nothing */},
        resolveConfigProps: () => {/* nothing */}
      };
    }
  };

  return (
    <>
      <PersPersDxComponentHighlightValue {...props} {...args} />
    </>
  );
};

BasePersPersDxComponentHighlightValue.args = {
  label: configProps.label,
  helperText: configProps.helperText,
  placeholder: configProps.placeholder,
  testId: configProps.testId,
  readOnly: configProps.readOnly,
  disabled: configProps.disabled,
  required: configProps.required,
  status: configProps.status,
  hideLabel: configProps.hideLabel,
  displayMode: configProps.displayMode,
  validatemessage: configProps.validatemessage
};

第四步： 测试

myserver@my-dev:~/pega/pega_dx_component/persdxcomponent$ npm run startStorybook
info @storybook/react v6.5.16
info 
info => Loading presets

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished

info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
assets by chunk 5.58 MiB (id hint: vendors)
  assets by status 5.36 MiB [big]
    asset vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.94 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_formatter-0d5cb0eb_js.manager.bundle.js 885 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_OverlayScrollbars-1355f44c_js.manager.bundle.js 295 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter-b07b042a_js.manager.bundle.js 284 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_WithTooltip-167e9982_js.manager.bundle.js 125 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_Color-f953d088_js.manager.bundle.js 82.5 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_GlobalScrollAreaStyles-8793ce4a_js.manager.bundle.js 15.5 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 13.7 KiB [emitted] (name: runtime~main)
asset index.html 2.83 KiB [emitted]
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.29 KiB [emitted]
asset main.manager.bundle.js 832 bytes [emitted] (name: main)
Entrypoint main [big] 3.95 MiB = runtime~main.manager.bundle.js 13.7 KiB vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.94 MiB main.manager.bundle.js 832 bytes
orphan modules 763 KiB [orphan] 40 modules
runtime modules 8.39 KiB 14 modules
modules by path ./node_modules/ 4.97 MiB 899 modules
./util.inspect (ignored) 15 bytes [built] [code generated]
manager (webpack 5.89.0) compiled successfully in 22021 ms
webpack built preview 85ae1ee5ad77a7e09f64 in 132621ms
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Storybook 6.5.16 for React started                 │
│   30 s for manager and 2.33 min for preview          │
│                                                      │
│    Local:            http://localhost:6040/          │
│    On your network:  http://192.168.122.110:6040/    │
│                                                      │
╰──────────────────────────────────────────────────────╯
<i> [webpack-dev-middleware] wait until bundle finished: /
webpack built preview 29fc5c6a871c3d83c83e in 2890ms

第五步： 查看Demo

 第六步： 部署至 Pega。

参考文档： 【PEGA - DX Component - 部署】

以上便是本文的全部内容，感谢您的阅读。