sea-chart 0.0.41-beta.7 → 0.0.41-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/editor/index.js +50 -5
  2. package/dist/settings/index.js +5 -44
  3. package/dist/settings/widgets/chart-type/index.js +29 -7
  4. package/package.json +1 -1
package/dist/editor/index.js CHANGED
@@ -1,16 +1,61 @@
1
- import React from 'react';
1
+ import React, { useEffect, useState, useCallback } from 'react';
2
2
  import View, { defaultProps, propTypes } from '../view';
3
3
  import Settings from '../settings';
4
+ import TypesDialog from '../components/types-dialog';
5
+ import EventBus from '../utils/event-bus';
6
+ import { generateChartConfig } from '../utils';
7
+ import { EXTERNAL_EVENT } from '../constants/common-constants';
4
8
  import './index.css';
5
9
  function Editor(props) {
6
10
  const {
7
- isHideView
11
+ chart,
12
+ tables,
13
+ mode,
14
+ onChange
8
15
  } = props;
16
+ const [isDialogShow, setDialogShow] = useState(false);
17
+ const showTypesDialog = () => {
18
+ setDialogShow(true);
19
+ };
20
+ const closeTypesDialog = useCallback(() => {
21
+ setDialogShow(false);
22
+ }, []);
23
+ const onTypeChange = useCallback(newType => {
24
+ const {
25
+ config = {}
26
+ } = chart || {};
27
+ const {
28
+ type: oldType
29
+ } = config;
30
+ if (newType === oldType) return;
31
+ const convertedChart = generateChartConfig({
32
+ ...config,
33
+ type: newType
34
+ }, tables);
35
+ onChange && onChange({
36
+ ...chart,
37
+ config: convertedChart
38
+ }, 'data');
39
+ closeTypesDialog();
40
+ }, [chart, closeTypesDialog, onChange, tables]);
41
+ useEffect(() => {
42
+ const unsubscribeShowTypesDialog = EventBus.subscribe(EXTERNAL_EVENT.SHOW_TYPES_DIALOG, showTypesDialog);
43
+ console.log('editor-mount');
44
+ return () => {
45
+ unsubscribeShowTypesDialog();
46
+ };
47
+ }, []);
48
+ if (mode === 'new_mode') {
49
+ var _chart$config;
50
+ return /*#__PURE__*/React.createElement(React.Fragment, null, isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
51
+ type: chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type,
52
+ onToggle: closeTypesDialog,
53
+ onChange: onTypeChange
54
+ }));
55
+ }
9
56
  return /*#__PURE__*/React.createElement("div", {
10
57
  className: "sea-chart-editor"
11
- }, !isHideView && /*#__PURE__*/React.createElement(View, props), /*#__PURE__*/React.createElement(Settings, Object.assign({}, props, {
12
- isHideSettings: isHideView
13
- }), props.children));
58
+ }, /*#__PURE__*/React.createElement(View, props), /*#__PURE__*/React.createElement(Settings, props, props.children));
14
59
  }
15
60
  Editor.defaultProps = defaultProps;
16
61
  export default Editor;
package/dist/settings/index.js CHANGED
@@ -1,33 +1,24 @@
1
1
  import React, { useCallback, useMemo, useState, useEffect } from 'react';
2
2
  import classnames from 'classnames';
3
3
  import { eventStopPropagation } from '../utils';
4
- import { BaseUtils, generateChartConfig } from '../utils';
5
- import TypesDialog from '../components/types-dialog';
4
+ import { BaseUtils } from '../utils';
6
5
  import intl from '../intl';
7
6
  import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
8
- import EventBus from '../utils/event-bus';
9
- import { EXTERNAL_EVENT } from '../constants/common-constants';
10
7
  import StyleSettings from './style-settings';
11
8
  import DataSettings from './data-settings';
12
9
  import Divider from './widgets/divider';
13
10
  import './index.css';
14
11
  const Settings = _ref => {
15
- var _chart$config;
16
12
  let {
17
13
  chart,
18
14
  dataSources,
19
15
  title,
20
16
  tables,
21
17
  onChange,
22
- children,
23
- isHideSettings = false
18
+ children
24
19
  } = _ref;
25
20
  const [type, setType] = useState(CHART_SETTINGS_TYPE.DATA);
26
21
  const [labelColorConfigs, setLabelColorConfigs] = useState([]);
27
- const [isDialogShow, setDialogShow] = useState(false);
28
- const showTypesDialog = () => {
29
- setDialogShow(true);
30
- };
31
22
  useEffect(() => {
32
23
  var _window$dtable;
33
24
  const systemCustomColors = ((_window$dtable = window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.customColors) || [];
@@ -39,10 +30,6 @@ const Settings = _ref => {
39
30
  color: customColor.color.toUpperCase()
40
31
  }))];
41
32
  setLabelColorConfigs(colorConfigs);
42
- const unsubscribeShowTypesDialog = EventBus.subscribe(EXTERNAL_EVENT.SHOW_TYPES_DIALOG, showTypesDialog);
43
- return () => {
44
- unsubscribeShowTypesDialog();
45
- };
46
33
  }, []);
47
34
  const onChartSettingsTypeChange = useCallback(event => {
48
35
  eventStopPropagation(event);
@@ -70,28 +57,7 @@ const Settings = _ref => {
70
57
  const validTitle = useMemo(() => {
71
58
  return title || {};
72
59
  }, [title]);
73
- const closeTypesDialog = useCallback(() => {
74
- setDialogShow(false);
75
- }, []);
76
- const onTypeChange = useCallback(newType => {
77
- const {
78
- config = {}
79
- } = chart || {};
80
- const {
81
- type: oldType
82
- } = config;
83
- if (newType === oldType) return;
84
- const convertedChart = generateChartConfig({
85
- ...config,
86
- type: newType
87
- }, tables);
88
- onChange && onChange({
89
- ...chart,
90
- config: convertedChart
91
- }, type);
92
- closeTypesDialog();
93
- }, [chart, closeTypesDialog, onChange, tables, type]);
94
- return /*#__PURE__*/React.createElement(React.Fragment, null, !isHideSettings && /*#__PURE__*/React.createElement("div", {
60
+ return /*#__PURE__*/React.createElement("div", {
95
61
  className: "sea-chart-settings"
96
62
  }, /*#__PURE__*/React.createElement("div", {
97
63
  className: "sea-chart-settings-type",
@@ -118,15 +84,10 @@ const Settings = _ref => {
118
84
  chart: chart,
119
85
  labelColorConfigs: labelColorConfigs,
120
86
  onChange: modifyStyle
121
- }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children)))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
122
- type: chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type,
123
- onToggle: closeTypesDialog,
124
- onChange: onTypeChange
125
- }));
87
+ }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children))));
126
88
  };
127
89
  Settings.defaultProps = {
128
- dataSources: 'filter',
129
- isHideSettings: false
90
+ dataSources: 'filter'
130
91
  };
131
92
  export default Settings;
132
93
  export { StyleSettings, Divider };
package/dist/settings/widgets/chart-type/index.js CHANGED
@@ -1,20 +1,38 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { useCallback, useState } from 'react';
2
2
  import { Label, FormGroup } from 'reactstrap';
3
3
  import { CHART_TYPE_SHOW } from '../../../constants';
4
4
  import { eventStopPropagation } from '../../../utils';
5
5
  import intl from '../../../intl';
6
- import { Icon } from '../../../components';
7
- import EventBus from '../../../utils/event-bus';
8
- import { EXTERNAL_EVENT } from '../../../constants/common-constants';
6
+ import { Icon, TypesDialog } from '../../../components';
9
7
  import './index.css';
10
8
  const ChartType = _ref => {
11
9
  let {
12
- chart
10
+ chart,
11
+ generateChartConfig,
12
+ onChange
13
13
  } = _ref;
14
+ const [isDialogShow, setDialogShow] = useState(false);
14
15
  const openTypesDialog = useCallback(event => {
15
16
  eventStopPropagation(event);
16
- EventBus.dispatch(EXTERNAL_EVENT.SHOW_TYPES_DIALOG);
17
+ setDialogShow(true);
17
18
  }, []);
19
+ const closeTypesDialog = useCallback(() => {
20
+ setDialogShow(false);
21
+ }, []);
22
+ const onTypeChange = useCallback(type => {
23
+ const {
24
+ config
25
+ } = chart;
26
+ const {
27
+ type: oldType
28
+ } = config;
29
+ if (type === oldType) return;
30
+ const convertedChart = generateChartConfig({
31
+ ...config,
32
+ type
33
+ });
34
+ onChange && onChange(convertedChart);
35
+ }, [chart, generateChartConfig, onChange]);
18
36
  const {
19
37
  config
20
38
  } = chart;
@@ -32,6 +50,10 @@ const ChartType = _ref => {
32
50
  }, /*#__PURE__*/React.createElement(Icon, {
33
51
  symbol: "type-change",
34
52
  className: "sea-chart-type-icon"
35
- })))));
53
+ })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
54
+ type: type,
55
+ onToggle: closeTypesDialog,
56
+ onChange: onTypeChange
57
+ }));
36
58
  };
37
59
  export default ChartType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sea-chart",
3
- "version": "0.0.41-beta.7",
3
+ "version": "0.0.41-beta.8",
4
4
  "main": "./dist/index.js",
5
5
  "dependencies": {
6
6
  "@antv/data-set": "0.11.8",