Jimu

1
2
3
4
5
6
7
8
9
10
11
12
// Example: Creating a custom widget
import { type AllWidgetProps } from 'jimu-core'

const Widget = (props: AllWidgetProps<any>) => {
  return (
    <div className="my-widget jimu-widget ">
      <p>My Widget</p>
    </div>
  )
}

export default Widget

1
2
3
export default class MyDataAction extends AbstractDataAction {}

export default class MyMessageAction extends AbstractMessageAction {}

1
export default class MyExtension implements extensionSpec.SomeExtensionInterface {}

1
2
3
4
5
6
7
8
9
10
11
{
  "widgets": {
    "my-widget": {
      "label": "My Widget",
      "uri": "widgets/my-widget",
      "config": {
        "title": "Custom Title"
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Button, TextInput, Modal } from 'jimu-ui';
import { css } from 'jimu-core';
import { React } from 'jimu-core';

// Example: Using UI components with theming
const widgetStyle = css`
  background: var(--background-color);
  color: var(--text-color);
  padding: 1rem;
`;

export default function MyWidget() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <div css={widgetStyle}>
      <TextInput placeholder="Enter data..." />
      <Button type="primary" onClick={() => setIsModalOpen(true)}>Submit</Button>
      <Modal isOpen={isModalOpen}>
        <div>Modal content</div>
      </Modal>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
import { JimuMapViewComponent } from 'jimu-arcgis';

// Example: Map integration
<JimuMapViewComponent
  useMapWidgetId={useMapWidgetId}
  onActiveViewChange={(jmv) => {
    // Handle map view changes
    jmv.view.when(() => {
      console.log('Map view ready');
    });
  }}
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import * as React from 'react'
import { render } from '@testing-library/react'
import { Checkbox } from 'jimu-ui'

describe('checkbox component test', () => {
  it('test mount', () => {
    const { container } = render(<Checkbox />)
    expect(container.firstChild).not.toBeNull()
  })

  it('test default jimu class name', () => {
    const { container } = render(<Checkbox />)
    expect(container.querySelector('.jimu-checkbox')).toBeTruthy()
  })

  it('test "checked" attribute', () => {
    const { container } = render(<Checkbox checked />)
    expect(container.querySelector('.jimu-checked')).toBeTruthy()
  })

  it('test "indeterminate" attribute', () => {
    const { container } = render(<Checkbox indeterminate />)
    expect(container.querySelector('.indeterminate')).toBeTruthy()
  })

  it('test "disabled" attribute', () => {
    const { container } = render(<Checkbox disabled />)
    expect(container.querySelector('.jimu-disabled')).toBeTruthy()
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { React, Immutable, getAppStore, appActions } from 'jimu-core'
import ButtonWidget from '../src/runtime/widget'
import { wrapWidget, widgetRender, getInitState, getDefaultAppConfig } from 'jimu-for-test'
import '@testing-library/jest-dom'
getAppStore().dispatch(appActions.updateStoreState(getInitState().merge({ appConfig: getDefaultAppConfig() })))

const render = widgetRender(false)
const Widget = wrapWidget(ButtonWidget)
describe('button widget test', function () {
  describe('default config', function () {
    const config = Immutable({
      functionConfig: {
        text: 'Please configure link',
        toolTip: '',
        linkParam: {
        }
      },
      styleConfig: {
        themeStyle: {
          quickStyleType: 'default'
        }
      }
    })

    it('button widget should be render', () => {
      const { queryBySelector } = render(<Widget config={config}/>)
      expect(queryBySelector('.widget-button-link')).not.toBeNull()
    })
  })

  describe('test value config', function () {
    const config = Immutable({
      functionConfig: {
        text: 'textTest',
        toolTip: 'testToolTip',
        linkParam: {
          value: 'detail-page',
          linkType: 'PAGE'
        }
      },
      styleConfig: {
        themeStyle: {
          quickStyleType: 'default'
        }
      }
    })

    it('button widget should be render', () => {
      const renderResult = render(<Widget config={config}/>)

      expect(renderResult.queryBySelector('.widget-button-link')).toBeInTheDocument()
      expect(renderResult.queryByText('textTest')).toBeInTheDocument() //text ok
      expect(renderResult.queryByTitle('testToolTip')).toBeInTheDocument() // toolTip ok
      // renderResult.queryBySelector('.widget-button-link').getAttribute('href'); // link ok
    })
  })
})