9623999805

Committed 22 Jun 2024 08:02AM UTC coverage: 55.558% (-0.008%) from 55.566%

Build # 9623999805

Build Type

push

github

Committed by

rinick

Commit Message

max length of group property

Run Details

4822 of 10120 branches covered (47.65%)

Branch coverage included in aggregate %.

31 of 35 new or added lines in 6 files covered. (88.57%)

112 existing lines in 4 files now uncovered.

13531 of 22914 relevant lines covered (59.05%)

242.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/editor/property/PropertyEditor.tsx

import React from 'react';
import {Button, Tooltip, Dropdown, Input, Checkbox} from 'antd';
import DeleteIcon from '@ant-design/icons/DeleteOutlined';
import EditIcon from '@ant-design/icons/EditOutlined';
import LockIcon from '@ant-design/icons/LockOutlined';
import LockFilledIcon from '@ant-design/icons/LockFilled';
import {
  ClientConn,
  getOutputDesc,
  ValueState,
  ValueUpdate,
  FunctionDesc,
  PropDesc,
  arrayEqual,
  deepEqual,
  ValueSubscriber,
  DataMap,
  isBindable,
  getSubBlockFuncData,
} from '../../../src/core/editor';
import {MultiSelectComponent, MultiSelectLoader} from './MultiSelectComponent';
import {DragDropDiv, DragState} from 'rc-dock';
import {ExpandIcon} from '../component/Tree';
import {PropertyList} from './PropertyList';
import {ServiceEditor} from './value/ServiceEditor';
import {ReadonlyEditor} from './value/ReadonlyEditor';
import {LocalizedPropertyName, t} from '../component/LocalizedLabel';
import {PropertyDropdown} from '../popup/PropertyDropdown';
import {typeEditorMap} from './value';

class PropertyLoader extends MultiSelectLoader<PropertyEditor> {
  name: string;
  bProperties: string[] = [];

  constructor(key: string, parent: PropertyEditor) {
    super(key, parent);
    this.name = parent.props.name;
  }

  init() {
    this.valueListener.subscribe(this.conn, `${this.path}.${this.name}`);
    this.displayListener.subscribe(this.conn, `${this.path}.@b-p`);
  }

  cache: ValueState;
  subBlock = false;
  valueListener = new ValueSubscriber({
    onUpdate: (response: ValueUpdate) => {
      let changed = this.cache == null;
      this.cache = response.cache;
      if (response.change.hasOwnProperty('value') || response.change.hasOwnProperty('bindingPath')) {
        this.subBlock = response.cache.bindingPath === `~${this.name}.#output`;
        changed = true;
      }
      if (changed) {
        this.parent.forceUpdate();
      }
    },
  });
  displayListener = new ValueSubscriber({
    onUpdate: (response: ValueUpdate) => {
      let value = response.cache.value;
      if (!Array.isArray(value)) {
        value = [];
      }
      if (!deepEqual(value, this.bProperties)) {
        this.bProperties = value;
        if (this.cache) {
          // update only when cache is ready
          // this avoid an unnecessary render that cause all editor to blink
          this.parent.forceUpdate();
        }
      }
    },
  });

  destroy() {
    this.valueListener.unsubscribe();
    this.displayListener.unsubscribe();
  }
}

export interface PropertyReorder {
  getDragData(props: PropertyEditorProps): DataMap;
  onDragOver(props: PropertyEditorProps, e: DragState): string;
  onDragDrop(props: PropertyEditorProps, e: DragState): void;
}

export interface PropertyEditorProps {
  conn: ClientConn;
  paths: string[];
  name: string; // name is usually same as propDesc.name, but when it's in group, it will have a number after
  funcDesc: FunctionDesc;
  propDesc: PropDesc;
  isCustom?: boolean;
  isTemp?: boolean;
  group?: string;
  baseName?: string; // the name used in propDesc.name
  reorder?: PropertyReorder;
}

interface State {
  unlocked: boolean;
  showSubBlock: boolean;
  showMenu: boolean;
}

interface PropertyState {
  count: number;
  value?: any;
  valueSame: boolean;
  isTemp: boolean;
  bindingPath?: string;
  bindingSame: boolean;
  subBlock: boolean;
  display: boolean;
  displaySame: boolean;
}

const notReadyState = {
  count: 0,
  valueSame: false,
  isTemp: false,
  bindingSame: false,
  subBlock: false,
  display: false,
  displaySame: false,
};

export class PropertyEditor extends MultiSelectComponent<PropertyEditorProps, State, PropertyLoader> {
  constructor(props: Readonly<PropertyEditorProps>) {
    super(props);
    this.state = {unlocked: false, showSubBlock: false, showMenu: false};
    this.updateLoaders(props.paths);
  }

  createLoader(path: string) {
    return new PropertyLoader(path, this);
  }

  // map parent paths to subblock paths
  // this needs to be cached to optimize children rendering
  subBlockPaths: string[];

  buildSubBlockPaths(props: PropertyEditorProps) {
    let {name, paths} = props;
    this.subBlockPaths = paths.map((s: string) => `${s}.~${name}`);
  }

  unlock = (e: any) => {
    this.safeSetState({unlocked: !this.state.unlocked});
  };
  expandSubBlock = (e: any) => {
    this.safeSetState({showSubBlock: !this.state.showSubBlock});
  };

  onChange = (value: any) => {
    let {conn, paths, name, propDesc} = this.props;
    if (value === propDesc.default) {
      switch (typeof value) {
        case 'number':
          // number value should only convert default 0 to undefined, to prevent confusing binding result
          if (value === 0) {
            value = undefined;
          }
          break;
        case 'boolean':
          // boolean value should only convert default false to undefined, to prevent confusing binding result
          if (value === false) {
            value = undefined;
          }
          break;
        default:
          value = undefined;
      }
    }
    for (let path of paths) {
      conn.setValue(`${path}.${name}`, value);
    }
  };

  onDragStart = (e: DragState) => {
    let {conn, paths, name, reorder} = this.props;

    if (e.dragType === 'right') {
      let data = reorder?.getDragData(this.props);
      if (data) {
        e.setData(data, conn.getBaseConn());
        e.startDrag();
      } else {
        return;
      }
    } else {
      let fields = paths.map((s) => `${s}.${name}`);
      e.setData({fields}, conn.getBaseConn());
      e.startDrag();
    }
  };
  onDragOver = (e: DragState) => {
    let {conn, paths, name, propDesc, reorder} = this.props;
    if (e.dragType === 'right') {
      // check reorder drag with right click
      let accepted = reorder?.onDragOver(this.props, e);
      if (accepted) {
        e.accept(accepted);
        return;
      }
    } else {
      // check drag from property
      let dragFields: string[] = DragState.getData('fields', conn.getBaseConn());
      if (Array.isArray(dragFields)) {
        if (!propDesc.readonly && (dragFields.length === 1 || dragFields.length === paths.length)) {
          if (dragFields.length === paths.length) {
            let bindable = false;
            for (let i = 0; i < paths.length; ++i) {
              if (isBindable(`${paths[i]}.${name}`, dragFields[i])) {
                bindable = true;
                break;
              }
            }
            if (!bindable) {
              e.reject();
              return;
            }
          }
          e.accept('tico-fas-link');
          return;
        }
      }
      // check drag from type
      let blockData = DragState.getData('blockData', conn.getBaseConn());
      if (blockData && blockData['#is']) {
        let desc = conn.watchDesc(blockData['#is']);
        let outProp = getOutputDesc(desc);
        if (outProp) {
          e.accept('tico-fas-plus-square');
          return;
        }
      }
    }
    e.reject();
  };
  onDrop = (e: DragState) => {
    let {conn, paths, name, reorder} = this.props;
    if (e.dragType === 'right') {
      reorder?.onDragDrop(this.props, e);
    } else {
      // check drag from property
      let dragFields: string[] = DragState.getData('fields', conn.getBaseConn());
      if (Array.isArray(dragFields)) {
        let fields = paths.map((s) => `${s}.${name}`);
        if (dragFields.length === 1) {
          for (let field of fields) {
            if (dragFields[0] !== field) {
              conn.setBinding(field, dragFields[0], true);
            }
          }
        } else if (dragFields.length === fields.length) {
          for (let i = 0; i < fields.length; ++i) {
            if (dragFields[i] !== fields[i]) {
              conn.setBinding(fields[i], dragFields[i], true);
            }
          }
        }
        return;
      }
      // check drag from type
      let blockData = DragState.getData('blockData', conn.getBaseConn());
      if (blockData && blockData['#is']) {
        this.onAddSubBlock(blockData['#is'], null, getSubBlockFuncData(blockData));
        return;
      }
    }
  };

  mergePropertyState(): PropertyState {
    let it = this.loaders[Symbol.iterator]();
    let [firstKey, firstLoader] = it.next().value;
    let firstCache = firstLoader.cache;
    if (!firstCache) {
      return notReadyState;
    }

    let {name} = this.props;

    let count = this.loaders.size;
    let value = firstCache.value;
    let valueSame = true;
    let isTemp = firstCache.temp;
    let bindingPath = firstCache.bindingPath;
    let bindingSame = true;
    let subBlock = firstLoader.subBlock;
    let display = firstLoader.bProperties.includes(name);
    let displaySame = true;

    for (let [key, loader] of it) {
      let cache = loader.cache;
      if (!cache) {
        return notReadyState;
      }
      if (!Object.is(value, cache.value)) {
        valueSame = false;
      }
      if (cache.temp) {
        isTemp = true;
      }
      if (bindingPath !== cache.bindingPath) {
        bindingSame = false;
        if (!bindingPath && cache.bindingPath) {
          bindingPath = cache.bindingPath;
        }
      }

      if (!loader.subBlock) {
        subBlock = false;
      }
      let thisDisplay = loader.bProperties.includes(name) !== display;
      if (thisDisplay !== display) {
        displaySame = false;
        if (thisDisplay) {
          display = true;
        }
      }
    }
    return {count, value, valueSame, isTemp, bindingPath, bindingSame, subBlock, display, displaySame};
  }

  onBindChange = (str: string) => {
    let {conn, paths, name} = this.props;
    if (str === '') {
      str = undefined;
    }
    for (let key of paths) {
      conn.setBinding(`${key}.${name}`, str);
    }
  };

  onAddSubBlock = (id: string, desc?: FunctionDesc, data?: any) => {
    PropertyDropdown.addSubBlock(this.props, id, desc, data);
    this.safeSetState({showSubBlock: true});
  };

  cachedPaths: string[] = [];
  renderImpl() {
    let {conn, paths, funcDesc, propDesc, name, reorder, group, isCustom, baseName} = this.props;
    let {unlocked, showSubBlock, showMenu} = this.state;

    if (this.subBlockPaths && !arrayEqual(this.cachedPaths, paths)) {
      this.cachedPaths = paths;
      this.buildSubBlockPaths(this.props);
    }

    const propertyName = isCustom ? <span>{name}</span> : <LocalizedPropertyName desc={funcDesc} name={name} />;

    let onChange = propDesc.readonly ? null : this.onChange;

    let isIndexed = group != null && !name.endsWith('[]');

    let {count, value, valueSame, isTemp, bindingPath, bindingSame, subBlock, display} = this.mergePropertyState();
    if (count === 0) {
      // not ready yet
      return (
        <div className="ticl-property">
          <div className="ticl-property-name">{propertyName}</div>
          <div className="ticl-property-value">
            <div className="ticl-property-loader" />
          </div>
        </div>
      );
    }
    let inBoundClass;
    if (subBlock) {
      // inBoundClass = 'ticl-prop-inbound';
    } else if (bindingPath) {
      inBoundClass = 'ticl-property-inbound';
      if (!bindingSame) {
        bindingPath = '???';
      }
    } else if (!propDesc.readonly) {
      inBoundClass = 'ticl-property-input';
    }

    // lock icon
    let locked = bindingPath || !valueSame;
    let renderLockIcon = locked && !propDesc.readonly;
    let locktooltip: React.ReactNode;
    let lockIcon: React.ReactNode;
    if (renderLockIcon) {
      if (unlocked) {
        locktooltip = t('Unlocked for editing\nDouble click to lock');
        lockIcon = <EditIcon />;
      } else if (bindingPath) {
        locktooltip = t('Editing blocked by binding\nDouble click to edit');
        lockIcon = <LockFilledIcon />;
      } else if (!valueSame) {
        locktooltip = t('Inconsistent values\nDouble click to edit');
        lockIcon = <LockIcon />;
      }
    }

    // expand icon
    let renderSubBlock = subBlock && showSubBlock;
    if (renderSubBlock && !this.subBlockPaths) {
      this.buildSubBlockPaths(this.props);
    }

    let editor: React.ReactNode;
    if (propDesc.type === 'service') {
      locked = bindingPath && !bindingSame;
      renderLockIcon = locked && !propDesc.readonly;
      if (renderLockIcon) {
        if (unlocked) {
          locktooltip = t('Unlocked for editing\nDouble click to lock');
        } else if (!bindingSame) {
          locktooltip = t('Inconsistent values\nDouble click to edit');
        }
      }
      editor = (
        <ServiceEditor
          conn={conn}
          keys={paths}
          value={value}
          funcDesc={funcDesc}
          desc={propDesc}
          bindingPath={bindingPath}
          locked={locked && !unlocked}
          onPathChange={this.onBindChange}
        />
      );
    } else {
      let EditorClass = typeEditorMap[propDesc.type];
      if (!EditorClass) {
        EditorClass = ReadonlyEditor;
      }
      let editorValue = value;
      if (value === undefined && propDesc.default != null) {
        editorValue = propDesc.default;
      }
      editor = (
        <EditorClass
          conn={conn}
          keys={paths}
          value={editorValue}
          funcDesc={funcDesc}
          desc={propDesc}
          name={name}
          locked={locked && !unlocked}
          onChange={onChange}
          addSubBlock={this.onAddSubBlock}
        />
      );
    }

    let nameClass = `ticl-property-name${propDesc.readonly ? ' ticl-property-readonly' : ''}${
      display ? ' ticl-property-display' : ''
    }`;
    return (
      <div className="ticl-property">
        {inBoundClass ? <div className={inBoundClass} title={bindingPath} /> : null}
        <PropertyDropdown
          funcDesc={funcDesc}
          propDesc={propDesc}
          bindingPath={bindingPath}
          conn={conn}
          group={group}
          valueDefined={value !== undefined}
          isCustom={isCustom}
          isTemp={isTemp}
          display={display}
          paths={paths}
          name={name}
          baseName={baseName}
          onAddSubBlock={this.onAddSubBlock}
        >
          <DragDropDiv
            className={nameClass}
            onDragStartT={this.onDragStart}
            useRightButtonDragT={reorder != null}
            onDragOverT={this.onDragOver}
            onDropT={this.onDrop}
          >
            {propertyName}
          </DragDropDiv>
        </PropertyDropdown>
        {renderLockIcon ? (
          <Tooltip title={locktooltip} overlayClassName="ticl-tooltip">
            <Button
              className="ticl-icon-btn"
              shape="circle"
              tabIndex={-1}
              icon={lockIcon}
              onDoubleClick={this.unlock}
            />
          </Tooltip>
        ) : null}
        {subBlock ? <ExpandIcon opened={showSubBlock ? 'opened' : 'closed'} onClick={this.expandSubBlock} /> : null}
        <div className="ticl-property-value">{editor}</div>
        {renderSubBlock ? <PropertyList conn={conn} paths={this.subBlockPaths} mode="subBlock" /> : null}
      </div>
    );
  }
}

1	import React from 'react';	×
2	import {Button, Tooltip, Dropdown, Input, Checkbox} from 'antd';
3	import DeleteIcon from '@ant-design/icons/DeleteOutlined';
4	import EditIcon from '@ant-design/icons/EditOutlined';
5	import LockIcon from '@ant-design/icons/LockOutlined';
6	import LockFilledIcon from '@ant-design/icons/LockFilled';
7	import {
8	ClientConn,
9	getOutputDesc,
10	ValueState,
11	ValueUpdate,
12	FunctionDesc,
13	PropDesc,
14	arrayEqual,
15	deepEqual,
16	ValueSubscriber,
17	DataMap,
18	isBindable,
19	getSubBlockFuncData,
20	} from '../../../src/core/editor';
21	import {MultiSelectComponent, MultiSelectLoader} from './MultiSelectComponent';
22	import {DragDropDiv, DragState} from 'rc-dock';
23	import {ExpandIcon} from '../component/Tree';
24	import {PropertyList} from './PropertyList';
25	import {ServiceEditor} from './value/ServiceEditor';
26	import {ReadonlyEditor} from './value/ReadonlyEditor';
27	import {LocalizedPropertyName, t} from '../component/LocalizedLabel';
28	import {PropertyDropdown} from '../popup/PropertyDropdown';
29	import {typeEditorMap} from './value';
30
31	class PropertyLoader extends MultiSelectLoader<PropertyEditor> {
32	name: string;
33	bProperties: string[] = [];	×
34
35	constructor(key: string, parent: PropertyEditor) {
36	super(key, parent);	×
37	this.name = parent.props.name;	×
38	}
39
40	init() {
41	this.valueListener.subscribe(this.conn, `${this.path}.${this.name}`);	×
42	this.displayListener.subscribe(this.conn, `${this.path}.@b-p`);	×
43	}
44
45	cache: ValueState;
46	subBlock = false;	×
47	valueListener = new ValueSubscriber({	×
48	onUpdate: (response: ValueUpdate) => {
49	let changed = this.cache == null;	×
50	this.cache = response.cache;	×
51	if (response.change.hasOwnProperty('value') \|\| response.change.hasOwnProperty('bindingPath')) {	×
52	this.subBlock = response.cache.bindingPath === `~${this.name}.#output`;	×
53	changed = true;	×
54	}
55	if (changed) {	×
56	this.parent.forceUpdate();	×
57	}
58	},
59	});
60	displayListener = new ValueSubscriber({	×
61	onUpdate: (response: ValueUpdate) => {
62	let value = response.cache.value;	×
63	if (!Array.isArray(value)) {	×
64	value = [];	×
65	}
66	if (!deepEqual(value, this.bProperties)) {	×
67	this.bProperties = value;	×
68	if (this.cache) {	×
69	// update only when cache is ready
70	// this avoid an unnecessary render that cause all editor to blink
71	this.parent.forceUpdate();	×
72	}
73	}
74	},
75	});
76
77	destroy() {
78	this.valueListener.unsubscribe();	×
79	this.displayListener.unsubscribe();	×
80	}
81	}
82
83	export interface PropertyReorder {
84	getDragData(props: PropertyEditorProps): DataMap;
85	onDragOver(props: PropertyEditorProps, e: DragState): string;
86	onDragDrop(props: PropertyEditorProps, e: DragState): void;
87	}
88
89	export interface PropertyEditorProps {
90	conn: ClientConn;
91	paths: string[];
92	name: string; // name is usually same as propDesc.name, but when it's in group, it will have a number after
93	funcDesc: FunctionDesc;
94	propDesc: PropDesc;
95	isCustom?: boolean;
96	isTemp?: boolean;
97	group?: string;
98	baseName?: string; // the name used in propDesc.name
99	reorder?: PropertyReorder;
100	}
101
102	interface State {
103	unlocked: boolean;
104	showSubBlock: boolean;
105	showMenu: boolean;
106	}
107
108	interface PropertyState {
109	count: number;
110	value?: any;
111	valueSame: boolean;
112	isTemp: boolean;
113	bindingPath?: string;
114	bindingSame: boolean;
115	subBlock: boolean;
116	display: boolean;
117	displaySame: boolean;
118	}
119
120	const notReadyState = {	×
121	count: 0,
122	valueSame: false,
123	isTemp: false,
124	bindingSame: false,
125	subBlock: false,
126	display: false,
127	displaySame: false,
128	};
129
130	export class PropertyEditor extends MultiSelectComponent<PropertyEditorProps, State, PropertyLoader> {
131	constructor(props: Readonly<PropertyEditorProps>) {
132	super(props);	×
133	this.state = {unlocked: false, showSubBlock: false, showMenu: false};	×
134	this.updateLoaders(props.paths);	×
135	}
136
137	createLoader(path: string) {
138	return new PropertyLoader(path, this);	×
139	}
140
141	// map parent paths to subblock paths
142	// this needs to be cached to optimize children rendering
143	subBlockPaths: string[];
144
145	buildSubBlockPaths(props: PropertyEditorProps) {
146	let {name, paths} = props;	×
147	this.subBlockPaths = paths.map((s: string) => `${s}.~${name}`);	×
148	}
149
UNCOV 150	unlock = (e: any) => {	×
151	this.safeSetState({unlocked: !this.state.unlocked});	×
152	};
UNCOV 153	expandSubBlock = (e: any) => {	×
UNCOV 154	this.safeSetState({showSubBlock: !this.state.showSubBlock});	×
155	};
156
157	onChange = (value: any) => {	×
UNCOV 158	let {conn, paths, name, propDesc} = this.props;	×
159	if (value === propDesc.default) {	×
160	switch (typeof value) {	×
161	case 'number':
162	// number value should only convert default 0 to undefined, to prevent confusing binding result
163	if (value === 0) {	×
164	value = undefined;	×
165	}
166	break;	×
167	case 'boolean':
168	// boolean value should only convert default false to undefined, to prevent confusing binding result
169	if (value === false) {	×
170	value = undefined;	×
171	}
172	break;	×
173	default:
UNCOV 174	value = undefined;	×
175	}
176	}
UNCOV 177	for (let path of paths) {	×
178	conn.setValue(`${path}.${name}`, value);	×
179	}
180	};
181
UNCOV 182	onDragStart = (e: DragState) => {	×
183	let {conn, paths, name, reorder} = this.props;	×
184
UNCOV 185	if (e.dragType === 'right') {	×
UNCOV 186	let data = reorder?.getDragData(this.props);	×
UNCOV 187	if (data) {	×
188	e.setData(data, conn.getBaseConn());	×
189	e.startDrag();	×
190	} else {
191	return;	×
192	}
193	} else {
194	let fields = paths.map((s) => `${s}.${name}`);	×
195	e.setData({fields}, conn.getBaseConn());	×
UNCOV 196	e.startDrag();	×
197	}
198	};
UNCOV 199	onDragOver = (e: DragState) => {	×
200	let {conn, paths, name, propDesc, reorder} = this.props;	×
201	if (e.dragType === 'right') {	×
202	// check reorder drag with right click
UNCOV 203	let accepted = reorder?.onDragOver(this.props, e);	×
UNCOV 204	if (accepted) {	×
205	e.accept(accepted);	×
206	return;	×
207	}
208	} else {
209	// check drag from property
210	let dragFields: string[] = DragState.getData('fields', conn.getBaseConn());	×
211	if (Array.isArray(dragFields)) {	×
212	if (!propDesc.readonly && (dragFields.length === 1 \|\| dragFields.length === paths.length)) {	×
UNCOV 213	if (dragFields.length === paths.length) {	×
UNCOV 214	let bindable = false;	×
UNCOV 215	for (let i = 0; i < paths.length; ++i) {	×
216	if (isBindable(`${paths[i]}.${name}`, dragFields[i])) {	×
217	bindable = true;	×
218	break;	×
219	}
220	}
221	if (!bindable) {	×
222	e.reject();	×
223	return;	×
224	}
225	}
UNCOV 226	e.accept('tico-fas-link');	×
227	return;	×
228	}
229	}
230	// check drag from type
UNCOV 231	let blockData = DragState.getData('blockData', conn.getBaseConn());	×
232	if (blockData && blockData['#is']) {	×
233	let desc = conn.watchDesc(blockData['#is']);	×
UNCOV 234	let outProp = getOutputDesc(desc);	×
UNCOV 235	if (outProp) {	×
UNCOV 236	e.accept('tico-fas-plus-square');	×
237	return;	×
238	}
239	}
240	}
241	e.reject();	×
242	};
243	onDrop = (e: DragState) => {	×
UNCOV 244	let {conn, paths, name, reorder} = this.props;	×
UNCOV 245	if (e.dragType === 'right') {	×
UNCOV 246	reorder?.onDragDrop(this.props, e);	×
247	} else {
248	// check drag from property
249	let dragFields: string[] = DragState.getData('fields', conn.getBaseConn());	×
250	if (Array.isArray(dragFields)) {	×
251	let fields = paths.map((s) => `${s}.${name}`);	×
252	if (dragFields.length === 1) {	×
UNCOV 253	for (let field of fields) {	×
UNCOV 254	if (dragFields[0] !== field) {	×
255	conn.setBinding(field, dragFields[0], true);	×
256	}
257	}
258	} else if (dragFields.length === fields.length) {	×
259	for (let i = 0; i < fields.length; ++i) {	×
260	if (dragFields[i] !== fields[i]) {	×
261	conn.setBinding(fields[i], dragFields[i], true);	×
262	}
263	}
264	}
265	return;	×
266	}
267	// check drag from type
UNCOV 268	let blockData = DragState.getData('blockData', conn.getBaseConn());	×
UNCOV 269	if (blockData && blockData['#is']) {	×
UNCOV 270	this.onAddSubBlock(blockData['#is'], null, getSubBlockFuncData(blockData));	×
271	return;	×
272	}
273	}
274	};
275
276	mergePropertyState(): PropertyState {
277	let it = this.loaders[Symbol.iterator]();	×
UNCOV 278	let [firstKey, firstLoader] = it.next().value;	×
UNCOV 279	let firstCache = firstLoader.cache;	×
UNCOV 280	if (!firstCache) {	×
UNCOV 281	return notReadyState;	×
282	}
283
284	let {name} = this.props;	×
285
286	let count = this.loaders.size;	×
287	let value = firstCache.value;	×
UNCOV 288	let valueSame = true;	×
UNCOV 289	let isTemp = firstCache.temp;	×
290	let bindingPath = firstCache.bindingPath;	×
UNCOV 291	let bindingSame = true;	×
292	let subBlock = firstLoader.subBlock;	×
293	let display = firstLoader.bProperties.includes(name);	×
294	let displaySame = true;	×
295
296	for (let [key, loader] of it) {	×
297	let cache = loader.cache;	×
298	if (!cache) {	×
299	return notReadyState;	×
300	}
UNCOV 301	if (!Object.is(value, cache.value)) {	×
302	valueSame = false;	×
303	}
304	if (cache.temp) {	×
305	isTemp = true;	×
306	}
307	if (bindingPath !== cache.bindingPath) {	×
308	bindingSame = false;	×
UNCOV 309	if (!bindingPath && cache.bindingPath) {	×
310	bindingPath = cache.bindingPath;	×
311	}
312	}
313
314	if (!loader.subBlock) {	×
315	subBlock = false;	×
316	}
UNCOV 317	let thisDisplay = loader.bProperties.includes(name) !== display;	×
UNCOV 318	if (thisDisplay !== display) {	×
UNCOV 319	displaySame = false;	×
320	if (thisDisplay) {	×
321	display = true;	×
322	}
323	}
324	}
325	return {count, value, valueSame, isTemp, bindingPath, bindingSame, subBlock, display, displaySame};	×
326	}
327
UNCOV 328	onBindChange = (str: string) => {	×
UNCOV 329	let {conn, paths, name} = this.props;	×
UNCOV 330	if (str === '') {	×
331	str = undefined;	×
332	}
UNCOV 333	for (let key of paths) {	×
334	conn.setBinding(`${key}.${name}`, str);	×
335	}
336	};
337
UNCOV 338	onAddSubBlock = (id: string, desc?: FunctionDesc, data?: any) => {	×
339	PropertyDropdown.addSubBlock(this.props, id, desc, data);	×
340	this.safeSetState({showSubBlock: true});	×
341	};
342
UNCOV 343	cachedPaths: string[] = [];	×
344	renderImpl() {
345	let {conn, paths, funcDesc, propDesc, name, reorder, group, isCustom, baseName} = this.props;	×
346	let {unlocked, showSubBlock, showMenu} = this.state;	×
347
UNCOV 348	if (this.subBlockPaths && !arrayEqual(this.cachedPaths, paths)) {	×
UNCOV 349	this.cachedPaths = paths;	×
350	this.buildSubBlockPaths(this.props);	×
351	}
352
353	const propertyName = isCustom ? <span>{name}</span> : <LocalizedPropertyName desc={funcDesc} name={name} />;	×
354
355	let onChange = propDesc.readonly ? null : this.onChange;	×
356
357	let isIndexed = group != null && !name.endsWith('[]');	×
358
UNCOV 359	let {count, value, valueSame, isTemp, bindingPath, bindingSame, subBlock, display} = this.mergePropertyState();	×
360	if (count === 0) {	×
361	// not ready yet
UNCOV 362	return (	×
363	<div className="ticl-property">
364	<div className="ticl-property-name">{propertyName}</div>
365	<div className="ticl-property-value">
366	<div className="ticl-property-loader" />
367	</div>
368	</div>
369	);
370	}
371	let inBoundClass;
372	if (subBlock) {	×
373	// inBoundClass = 'ticl-prop-inbound';
374	} else if (bindingPath) {	×
375	inBoundClass = 'ticl-property-inbound';	×
376	if (!bindingSame) {	×
377	bindingPath = '???';	×
378	}
379	} else if (!propDesc.readonly) {	×
380	inBoundClass = 'ticl-property-input';	×
381	}
382
383	// lock icon
384	let locked = bindingPath \|\| !valueSame;	×
385	let renderLockIcon = locked && !propDesc.readonly;	×
386	let locktooltip: React.ReactNode;
387	let lockIcon: React.ReactNode;
388	if (renderLockIcon) {	×
389	if (unlocked) {	×
390	locktooltip = t('Unlocked for editing\nDouble click to lock');	×
391	lockIcon = <EditIcon />;	×
392	} else if (bindingPath) {	×
393	locktooltip = t('Editing blocked by binding\nDouble click to edit');	×
394	lockIcon = <LockFilledIcon />;	×
395	} else if (!valueSame) {	×
396	locktooltip = t('Inconsistent values\nDouble click to edit');	×
397	lockIcon = <LockIcon />;	×
398	}
399	}
400
401	// expand icon
402	let renderSubBlock = subBlock && showSubBlock;	×
403	if (renderSubBlock && !this.subBlockPaths) {	×
404	this.buildSubBlockPaths(this.props);	×
405	}
406
407	let editor: React.ReactNode;
408	if (propDesc.type === 'service') {	×
409	locked = bindingPath && !bindingSame;	×
410	renderLockIcon = locked && !propDesc.readonly;	×
411	if (renderLockIcon) {	×
412	if (unlocked) {	×
413	locktooltip = t('Unlocked for editing\nDouble click to lock');	×
414	} else if (!bindingSame) {	×
415	locktooltip = t('Inconsistent values\nDouble click to edit');	×
416	}
417	}
418	editor = (	×
419	<ServiceEditor
420	conn={conn}
421	keys={paths}
422	value={value}
423	funcDesc={funcDesc}
424	desc={propDesc}
425	bindingPath={bindingPath}
426	locked={locked && !unlocked}	×
427	onPathChange={this.onBindChange}
428	/>
429	);
430	} else {
431	let EditorClass = typeEditorMap[propDesc.type];	×
432	if (!EditorClass) {	×
433	EditorClass = ReadonlyEditor;	×
434	}
435	let editorValue = value;	×
436	if (value === undefined && propDesc.default != null) {	×
437	editorValue = propDesc.default;	×
438	}
439	editor = (	×
440	<EditorClass
441	conn={conn}
442	keys={paths}
443	value={editorValue}
444	funcDesc={funcDesc}
445	desc={propDesc}
446	name={name}
447	locked={locked && !unlocked}	×
448	onChange={onChange}
449	addSubBlock={this.onAddSubBlock}
450	/>
451	);
452	}
453
454	let nameClass = `ticl-property-name${propDesc.readonly ? ' ticl-property-readonly' : ''}${	×
455	display ? ' ticl-property-display' : ''	×
456	}`;
457	return (	×
458	<div className="ticl-property">
459	{inBoundClass ? <div className={inBoundClass} title={bindingPath} /> : null}	×
460	<PropertyDropdown
461	funcDesc={funcDesc}
462	propDesc={propDesc}
463	bindingPath={bindingPath}
464	conn={conn}
465	group={group}
466	valueDefined={value !== undefined}
467	isCustom={isCustom}
468	isTemp={isTemp}
469	display={display}
470	paths={paths}
471	name={name}
472	baseName={baseName}
473	onAddSubBlock={this.onAddSubBlock}
474	>
475	<DragDropDiv
476	className={nameClass}
477	onDragStartT={this.onDragStart}
478	useRightButtonDragT={reorder != null}
479	onDragOverT={this.onDragOver}
480	onDropT={this.onDrop}
481	>
482	{propertyName}
483	</DragDropDiv>
484	</PropertyDropdown>
485	{renderLockIcon ? (	×
486	<Tooltip title={locktooltip} overlayClassName="ticl-tooltip">
487	<Button
488	className="ticl-icon-btn"
489	shape="circle"
490	tabIndex={-1}
491	icon={lockIcon}
492	onDoubleClick={this.unlock}
493	/>
494	</Tooltip>
495	) : null}
496	{subBlock ? <ExpandIcon opened={showSubBlock ? 'opened' : 'closed'} onClick={this.expandSubBlock} /> : null}	×
497	<div className="ticl-property-value">{editor}</div>
498	{renderSubBlock ? <PropertyList conn={conn} paths={this.subBlockPaths} mode="subBlock" /> : null}	×
499	</div>
500	);
501	}
502	}

ticlo / ticlo / 9623999805

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous