feat(entries): add Simple component

Related to bpmn-io/bpmn-properties-panel#54

assets/properties-panel.css

@@ -370,6 +370,15 @@ textarea.bio-properties-panel-input {
   font-size: 13px;
 }
 
+.bio-properties-panel-simple {
+  width: 100%;
+  margin-right: 12px;
+}
+
+.bio-properties-panel-simple + .bio-properties-panel-remove-entry {
+  margin: auto;
+} 
+
 /**
  * Toggle Switch
  */

src/components/entries/Simple.js

@@ -0,0 +1,57 @@
+import {
+  useMemo
+} from 'preact/hooks';
+
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {Function} props.setValue
+ */
+export default function Simple(props) {
+  const {
+    element,
+    id,
+    debounce,
+    disabled,
+    getValue,
+    setValue
+  } = props;
+
+  const handleInput = useMemo(() => {
+    return debounce(({ target }) => setValue(target.value.length ? target.value : undefined));
+  }, [ setValue, debounce ]);
+
+  const value = getValue(element);
+
+  return (
+    <div class="bio-properties-panel-simple">
+      <input
+        id={ prefixId(id) }
+        type="text"
+        name={ id }
+        spellCheck="false"
+        autoComplete="off"
+        disabled={ disabled }
+        class="bio-properties-panel-input"
+        onInput={ handleInput }
+        onFocus={ props.onFocus }
+        onBlur={ props.onBlur }
+        value={ value || '' } />
+    </div>
+  );
+}
+
+export function isEdited(node) {
+  return node && !!node.value;
+}
+
+
+// helpers /////////////////
+
+function prefixId(id) {
+  return `bio-properties-panel-${ id }`;
+}

test/spec/components/Simple.spec.js

@@ -0,0 +1,152 @@
+import {
+  render
+} from '@testing-library/preact/pure';
+
+import TestContainer from 'mocha-test-container-support';
+
+import {
+  query as domQuery
+} from 'min-dom';
+
+import {
+  insertCoreStyles,
+  changeInput
+} from 'test/TestHelper';
+
+import Simple, { isEdited } from 'src/components/entries/Simple';
+
+insertCoreStyles();
+
+const noop = () => {};
+
+
+describe('<Simple>', function() {
+
+  let container;
+
+  beforeEach(function() {
+    container = TestContainer.get(this);
+  });
+
+
+  it('should render', function() {
+
+    // given
+    const result = createSimple({ container });
+
+    // then
+    expect(domQuery('.bio-properties-panel-simple', result.container)).to.exist;
+  });
+
+
+  it('should update', function() {
+
+    // given
+    const updateSpy = sinon.spy();
+
+    const result = createSimple({ container, setValue: updateSpy });
+
+    const input = domQuery('.bio-properties-panel-input', result.container);
+
+    // when
+    changeInput(input, 'foo');
+
+    // then
+    expect(updateSpy).to.have.been.calledWith('foo');
+  });
+
+
+  it('should NOT blow up on empty value', function() {
+
+    // given
+    const updateSpy = sinon.spy();
+
+    const result = createSimple({ container, setValue: updateSpy });
+
+    const input = domQuery('.bio-properties-panel-input', result.container);
+
+    // when
+    changeInput(input, undefined);
+
+    // then
+    expect(updateSpy).to.have.been.calledWith(undefined);
+  });
+
+
+  describe('#isEdited', function() {
+
+    it('should NOT be edited', function() {
+
+      // given
+      const result = createSimple({ container });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      const edited = isEdited(input);
+
+      // then
+      expect(edited).to.be.false;
+    });
+
+
+    it('should be edited', function() {
+
+      // given
+      const result = createSimple({ container, getValue: () => 'foo' });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // when
+      const edited = isEdited(input);
+
+      // then
+      expect(edited).to.be.true;
+    });
+
+
+    it('should be edited after update', function() {
+
+      // given
+      const result = createSimple({ container });
+
+      const input = domQuery('.bio-properties-panel-input', result.container);
+
+      // assume
+      expect(isEdited(input)).to.be.false;
+
+      // when
+      changeInput(input, 'foo');
+
+      // then
+      expect(isEdited(input)).to.be.true;
+    });
+
+  });
+
+});
+
+
+// helpers ////////////////////
+
+function createSimple(options = {}) {
+  const {
+    element,
+    id,
+    debounce = fn => fn,
+    disabled,
+    getValue = noop,
+    setValue = noop,
+    container
+  } = options;
+
+  return render(
+    <Simple
+      element={ element }
+      id={ id }
+      debounce={ debounce }
+      disabled={ disabled }
+      getValue={ getValue }
+      setValue={ setValue } />,
+    { container });
+}