From 58cea7bd5a7b07588c2f6230e98953b08806c3d9 Mon Sep 17 00:00:00 2001 From: michel Date: Tue, 7 Jan 2025 09:52:23 +0100 Subject: [PATCH 1/6] fix: add optionActions --- package.json | 4 ++-- src/prefabs/structures/PriceInput/index.ts | 19 ++++++++++++++++++- src/prefabs/structures/SelectInput/index.ts | 20 +++++++++++++++++++- src/prefabs/structures/TextInput/index.ts | 20 +++++++++++++++++++- yarn.lock | 16 ++++++++-------- 5 files changed, 66 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index ad0f6970f..86dc8f84a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "license": "UNLICENSED", "private": false, "devDependencies": { - "@betty-blocks/cli": "^25.102.0", + "@betty-blocks/cli": "^25.102.1", "@commitlint/cli": "^16.1.0", "@commitlint/config-angular": "^16.0.0", "@semantic-release/changelog": "^6.0.1", @@ -57,7 +57,7 @@ "dist" ], "dependencies": { - "@betty-blocks/component-sdk": "^1.86.1", + "@betty-blocks/component-sdk": "^1.87.0", "@date-io/date-fns": "^1.3.13", "@material-ui/core": "^4.9.11", "@material-ui/icons": "^4.11.2", diff --git a/src/prefabs/structures/PriceInput/index.ts b/src/prefabs/structures/PriceInput/index.ts index 5917a3d5f..8c98506fa 100644 --- a/src/prefabs/structures/PriceInput/index.ts +++ b/src/prefabs/structures/PriceInput/index.ts @@ -1,4 +1,7 @@ -import { PrefabReference } from '@betty-blocks/component-sdk'; +import { + optionActionSetVariable, + PrefabReference, +} from '@betty-blocks/component-sdk'; import { updateOption } from '../../../utils'; import { TextInput } from '../TextInput'; import { options } from './options'; @@ -22,6 +25,20 @@ export const PriceInput = ( optionTemplates: { addChild: { options: addChildOptions, + optionActions: { + property: { + onChange: [ + optionActionSetVariable('value', 'propertyValue'), + optionActionSetVariable('label', 'propertyLabel'), + ], + }, + actionVariableId: { + onChange: [ + optionActionSetVariable('value', 'propertyValue'), + optionActionSetVariable('label', 'propertyLabel'), + ], + }, + }, }, }, }, diff --git a/src/prefabs/structures/SelectInput/index.ts b/src/prefabs/structures/SelectInput/index.ts index 2adf6ebce..67a4cb03b 100644 --- a/src/prefabs/structures/SelectInput/index.ts +++ b/src/prefabs/structures/SelectInput/index.ts @@ -1,4 +1,8 @@ -import { component, PrefabReference } from '@betty-blocks/component-sdk'; +import { + component, + optionActionSetVariable, + PrefabReference, +} from '@betty-blocks/component-sdk'; import { Configuration } from '../Configuration'; import { options as defaults } from './options/index'; import { updateOption } from '../../../utils'; @@ -57,6 +61,20 @@ export const SelectInput = ( optionTemplates: { addChild: { options: addChildOptions, + optionActions: { + property: { + onChange: [ + optionActionSetVariable('value', 'propertyValue'), + optionActionSetVariable('label', 'propertyLabel'), + ], + }, + actionVariableId: { + onChange: [ + optionActionSetVariable('value', 'propertyValue'), + optionActionSetVariable('label', 'propertyLabel'), + ], + }, + }, }, }, }, diff --git a/src/prefabs/structures/TextInput/index.ts b/src/prefabs/structures/TextInput/index.ts index 80d4e02a3..29a0293d5 100644 --- a/src/prefabs/structures/TextInput/index.ts +++ b/src/prefabs/structures/TextInput/index.ts @@ -1,4 +1,8 @@ -import { component, PrefabReference } from '@betty-blocks/component-sdk'; +import { + component, + optionActionSetVariable, + PrefabReference, +} from '@betty-blocks/component-sdk'; import { updateOption } from '../../../utils'; import { Configuration } from '../Configuration'; import { options as defaults } from './options/index'; @@ -93,6 +97,20 @@ export const TextInput = ( optionTemplates: { addChild: { options: addChildOptions, + optionActions: { + property: { + onChange: [ + optionActionSetVariable('value', 'propertyValue'), + optionActionSetVariable('label', 'propertyLabel'), + ], + }, + actionVariableId: { + onChange: [ + optionActionSetVariable('value', 'propertyValue'), + optionActionSetVariable('label', 'propertyLabel'), + ], + }, + }, }, }, }, diff --git a/yarn.lock b/yarn.lock index 61ab29f6a..a5bfb2079 100644 --- a/yarn.lock +++ b/yarn.lock @@ -154,10 +154,10 @@ "@babel/helper-validator-identifier" "^7.22.5" to-fast-properties "^2.0.0" -"@betty-blocks/cli@^25.102.0": - version "25.102.0" - resolved "https://registry.yarnpkg.com/@betty-blocks/cli/-/cli-25.102.0.tgz#50a2746cfebe79aab97635138aef00b82bc70c79" - integrity sha512-WNDtYMxJG7QRR1lylIxdz1yS8jsaGpPrEq0KOGRD0uPbdV3+SL1siGcttsFvPszonuH/rMrt5CuKZzmTZ3+d3w== +"@betty-blocks/cli@^25.102.1": + version "25.102.1" + resolved "https://registry.yarnpkg.com/@betty-blocks/cli/-/cli-25.102.1.tgz#b9abae3bbfe16d4deaced739b6a474063abbd7fb" + integrity sha512-kRTYKNYt3ht6cw4w3+rJQj90v7cqz5bgsJflbCizhaMZo9bPVUeJAs1zqj60PZRjA8vIGGr7wSEruSozz432Mw== dependencies: "@azure/ms-rest-js" "^2.0.4" "@azure/storage-blob" "^10.3.0" @@ -196,10 +196,10 @@ optionalDependencies: isolated-vm "^4.0.0" -"@betty-blocks/component-sdk@^1.86.1": - version "1.86.1" - resolved "https://registry.yarnpkg.com/@betty-blocks/component-sdk/-/component-sdk-1.86.1.tgz#f6d3a8bfafa92e99145ad26fb8826eaa941867b0" - integrity sha512-ClXiRk4ihbocKOrr5pvBCD3qwW3jQkUmKLTYKM6FnVEwTHB3Sw1PoekIMdYTmHIhhG755ICTJJHELXdd4nLydw== +"@betty-blocks/component-sdk@^1.87.0": + version "1.87.0" + resolved "https://registry.yarnpkg.com/@betty-blocks/component-sdk/-/component-sdk-1.87.0.tgz#8e1ef384fb30459b73c0a4bbef53a1c6c68bd302" + integrity sha512-GQV/zQKDLkD9S6zVrks9XYc9yJspqBPrmFs81yf9sOE8zGs0otwLNh7pSzME6hSLD/DbetC+NeQf7AkY1W4TUA== "@colors/colors@1.5.0": version "1.5.0" From 54c138a2911b0298b1c03c29bc94534bb93bcc18 Mon Sep 17 00:00:00 2001 From: Ingmar van Stipriaan Date: Thu, 9 Jan 2025 17:58:13 +0100 Subject: [PATCH 2/6] chore: remove before create from prefabs with textInput --- src/prefabs/decimalinput.ts | 18 + src/prefabs/decimalinput.tsx | 330 ----------------- src/prefabs/emailinput.ts | 21 ++ src/prefabs/emailinput.tsx | 346 ------------------ src/prefabs/helpers/getKindsByType.ts | 56 +++ src/prefabs/ibaninput.ts | 21 ++ src/prefabs/ibaninput.tsx | 345 ----------------- src/prefabs/numberinput.ts | 17 + src/prefabs/numberinput.tsx | 330 ----------------- src/prefabs/passwordinput.ts | 18 + src/prefabs/passwordinput.tsx | 297 --------------- src/prefabs/phoneinput.ts | 18 + src/prefabs/phoneinput.tsx | 343 ----------------- src/prefabs/{priceinput.tsx => priceinput.ts} | 1 - src/prefabs/richTextInput.ts | 16 + src/prefabs/richTextInput.tsx | 320 ---------------- .../{selectinput.tsx => selectinput.ts} | 1 - .../structures/ActionJSForm/children.ts | 8 +- src/prefabs/structures/Configuration.ts | 3 +- src/prefabs/structures/PriceInput/index.ts | 6 +- .../structures/PriceInput/options/addChild.ts | 41 --- src/prefabs/structures/RichTextInput/index.ts | 4 +- src/prefabs/structures/SelectInput/index.ts | 2 +- src/prefabs/structures/TextArea/index.ts | 2 +- src/prefabs/structures/TextInput/index.ts | 7 +- .../structures/TextInput/options/addChild.ts | 62 ++-- src/prefabs/{textinput.tsx => textinput.ts} | 2 +- src/prefabs/urlinput.ts | 18 + src/prefabs/urlinput.tsx | 341 ----------------- 29 files changed, 256 insertions(+), 2738 deletions(-) create mode 100644 src/prefabs/decimalinput.ts delete mode 100644 src/prefabs/decimalinput.tsx create mode 100644 src/prefabs/emailinput.ts delete mode 100644 src/prefabs/emailinput.tsx create mode 100644 src/prefabs/helpers/getKindsByType.ts create mode 100644 src/prefabs/ibaninput.ts delete mode 100644 src/prefabs/ibaninput.tsx create mode 100644 src/prefabs/numberinput.ts delete mode 100644 src/prefabs/numberinput.tsx create mode 100644 src/prefabs/passwordinput.ts delete mode 100644 src/prefabs/passwordinput.tsx create mode 100644 src/prefabs/phoneinput.ts delete mode 100644 src/prefabs/phoneinput.tsx rename src/prefabs/{priceinput.tsx => priceinput.ts} (93%) create mode 100644 src/prefabs/richTextInput.ts delete mode 100644 src/prefabs/richTextInput.tsx rename src/prefabs/{selectinput.tsx => selectinput.ts} (94%) delete mode 100644 src/prefabs/structures/PriceInput/options/addChild.ts rename src/prefabs/{textinput.tsx => textinput.ts} (93%) create mode 100644 src/prefabs/urlinput.ts delete mode 100644 src/prefabs/urlinput.tsx diff --git a/src/prefabs/decimalinput.ts b/src/prefabs/decimalinput.ts new file mode 100644 index 000000000..97ecbc9d5 --- /dev/null +++ b/src/prefabs/decimalinput.ts @@ -0,0 +1,18 @@ +import { Icon, prefab } from '@betty-blocks/component-sdk'; +import { TextInput } from './structures/TextInput'; + +const attributes = { + category: 'FORM', + icon: Icon.DecimalInputIcon, + keywords: ['Form', 'input'], +}; + +export default prefab('Decimal', attributes, undefined, [ + TextInput({ + label: 'Decimal field', + inputLabel: 'Decimal', + type: 'decimal', + inputType: 'decimal', + pattern: '^\\d+(\\.\\d{1,2})?$', + }), +]); diff --git a/src/prefabs/decimalinput.tsx b/src/prefabs/decimalinput.tsx deleted file mode 100644 index ccc5e00a1..000000000 --- a/src/prefabs/decimalinput.tsx +++ /dev/null @@ -1,330 +0,0 @@ -import * as React from 'react'; -import { BeforeCreateArgs, Icon, prefab } from '@betty-blocks/component-sdk'; -import { TextInput } from './structures/TextInput'; - -const beforeCreate = ({ - close, - components: { - Content, - Field, - Footer, - Header, - FormField, - Toggle, - PropertySelector, - Label, - TextInput: Text, - CircleQuestion, - BBTooltip, - }, - prefab: originalPrefab, - save, - helpers, -}: BeforeCreateArgs) => { - const { - BettyPrefabs, - prepareInput, - useModelIdSelector, - useActionIdSelector, - usePrefabSelector, - usePropertyQuery, - setOption, - createUuid, - useModelQuery, - createBlacklist, - useModelRelationQuery, - } = helpers; - - const [propertyPath, setProperty] = React.useState(''); - const [variableInput, setVariableInput] = React.useState(null); - const modelId = useModelIdSelector(); - const actionId = useActionIdSelector(); - const selectedPrefab = usePrefabSelector(); - const [model, setModel] = React.useState(null); - const [propertyBased, setPropertyBased] = React.useState(!!modelId); - const [prefabSaved, setPrefabSaved] = React.useState(false); - - const [validationMessage, setValidationMessage] = React.useState(''); - - const modelRequest = useModelQuery({ - variables: { id: modelId }, - onCompleted: (result) => { - setModel(result.model); - }, - }); - - const validate = () => { - if (modelRequest.loading) { - setValidationMessage( - 'Model details are still loading, please try submitting again.', - ); - return false; - } - - return true; - }; - - let name: string | undefined; - let propertyKind; - let propertyModelId; - const componentId = createUuid(); - - function isProperty(path: string) { - return ( - typeof path !== 'string' && - typeof path === 'object' && - !Array.isArray(path) - ); - } - - let propertyId: string; - if (isProperty(propertyPath)) { - const { id } = propertyPath; - propertyId = Array.isArray(id) ? id[id.length - 1] : id; - } else { - propertyId = propertyPath; - } - - const propertyResponse = usePropertyQuery(propertyId); - - if (!(propertyResponse.loading || propertyResponse.error)) { - if (propertyResponse.data) { - name = propertyResponse.data.property.label; - propertyKind = propertyResponse.data.property.kind; - propertyModelId = propertyResponse.data.property.referenceModel?.id; - } - } - - const modelRelationResponse = useModelRelationQuery(propertyModelId); - - let relationalProperties; - let modelProperty; - if (!(modelRelationResponse.loading || modelRelationResponse.error)) { - if (modelRelationResponse.data) { - relationalProperties = modelRelationResponse.data.model.properties; - modelProperty = relationalProperties.find( - (property) => property.name === 'id', - ); - } - } - - const unsupportedKinds = createBlacklist(['DECIMAL']); - - const structure = originalPrefab.structure[0]; - - if (structure.type !== 'COMPONENT') - return
expected component prefab, found {structure.type}
; - - const handlePropertyChange = (propertyOrId): void => { - setProperty(propertyOrId); - }; - - if (!actionId && !prefabSaved) { - setPrefabSaved(true); - save(originalPrefab); - } - - const actionVariableOptionType = structure.options.find( - (option: { type: string }) => option.type === 'ACTION_JS_VARIABLE', - ); - - const actionVariableOption = actionVariableOptionType?.key || null; - const labelOptionKey = 'label'; - const nameOptionKey = 'actionVariableId'; - - return ( - <> -
- - {modelId && ( - - setPropertyBased(!propertyBased)}> - {}} - /> - - - )} - {propertyBased ? ( - {validationMessage} - ) - } - > - - - ) : ( - - - - setVariableInput(e.target.value)} - color="orange" - /> - - )} - -