add: translate, custom palette

docs/RES.md → docs/RESOURCE.md

@@ -1 +1,2 @@
+### PACKAGE ARE USED
 `````"@bpmn-io/element-template-chooser": "^1.0.0",`````

src/custom/CustomPalette.js

@@ -1,3 +1,4 @@
+// const _getPaletteEntries = PaletteProvider.prototype.getPaletteEntries
 export default class CustomPalette {
   constructor (create, elementFactory, palette, translate) {
     this.create = create
@@ -14,13 +15,17 @@ export default class CustomPalette {
       translate
     } = this
 
+    // const entries = _getPaletteEntries.apply(this)
+    // delete entries['create.data-store']
+
     function createServiceTask (event) {
       const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' })
 
       create.start(event, shape)
     }
 
     return {
+      // ...entries,
       'create.service-task': {
         group: 'activity',
         className: 'bpmn-icon-service-task',

src/provider/magic/parts/SpellProps.js

@@ -1,21 +1,29 @@
 import { html } from 'htm/preact'
 
-import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel'
+// import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel'
+// load async data
+import { isSelectEntryEdited, SelectEntry } from '@bpmn-io/properties-panel'
 import { useService } from 'bpmn-js-properties-panel'
 
+// import hooks from the vendored preact package
+import { useEffect, useState } from '@bpmn-io/properties-panel/preact/hooks'
+
 export default function (element) {
   return [
     {
       id: 'spell',
       element,
       component: Spell,
-      isEdited: isTextFieldEntryEdited
+      isEdited: isSelectEntryEdited
     }
   ]
 }
 
 function Spell (props) {
-  const { element, id } = props
+  const {
+    element,
+    id
+  } = props
 
   const modeling = useService('modeling')
   const translate = useService('translate')
@@ -31,14 +39,72 @@ function Spell (props) {
     })
   }
 
-  return html`<${TextFieldEntry}
-    id=${id}
-    element=${element}
-    description=${translate('Apply a black magic spell')}
-    label=${translate('Spell')}
-    getValue=${getValue}
-    setValue=${setValue}
-    debounce=${debounce}
-    tooltip=${translate('Check available spells in the spellbook.')}
-  />`
+  const spellsList = [
+    'Avada Kedavra',
+    'Crucio',
+    'Vulnera Sanentur',
+    'Vingardium Leviosa',
+    'Alohomora'
+  ]
+
+  const [spells, setSpells] = useState([])
+
+  const getSpellsList = () => {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(spellsList)
+      }, 500)
+    })
+  }
+
+  getSpellsList().then(res => {
+    console.log('请求结果', res)
+  })
+
+  useEffect(() => {
+    function fetchSpells () {
+      getSpellsList()
+        // .then(res => res.json())
+        .then(spellbook => setSpells(spellbook))
+        .catch(error => console.error(error))
+    }
+
+    fetchSpells()
+  }, [setSpells])
+
+  const getOptions = () => {
+    return [
+      {
+        label: '<none>',
+        value: undefined
+      },
+      ...spells.map(spell => ({
+        label: spell,
+        value: spell
+      }))
+    ]
+  }
+
+  // return html`
+  //   <${TextFieldEntry}
+  //     id=${id}
+  //     element=${element}
+  //     description=${translate('Apply a black magic spell')}
+  //     label=${translate('Spell')}
+  //     getValue=${getValue}
+  //     setValue=${setValue}
+  //     debounce=${debounce}
+  //     tooltip=${translate('Check available spells in the spellbook.')}
+  //   />`
+  return html`
+    <${SelectEntry}
+      id=${id}
+      element=${element}
+      description=${translate('Apply a black magic spell')}
+      label=${translate('Spell')}
+      getValue=${getValue}
+      setValue=${setValue}
+      getOptions=${getOptions}
+      debounce=${debounce}
+    />`
 }

src/translate/translateFunc.js

@@ -0,0 +1,13 @@
+import translations from './translations1'
+
+export default function customTranslate (template, replacements) {
+  replacements = replacements || {}
+
+  // Translate
+  template = translations[template] || template
+
+  // Replace
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}'
+  })
+}