;\nexport interface FormDataSet extends FormElementType {\n elements: FormDataSet[];\n pages: FormDataSet[];\n props: P;\n controlProps: C;\n parent: FormDataSet;\n isSelected: boolean;\n moveElement(from: FormDataSet, to: FormDataSet, index?: number): void;\n}\n\ntype SchemaElementType = DataSet;\nexport interface SchemaDataSet extends SchemaElementType {\n id: string;\n required: string[];\n parent: SchemaDataSet;\n properties: IMSTMap>;\n items: SchemaDataSet;\n definitions: IMSTMap>;\n reference?: SchemaDataSet;\n imports: IMSTMap>;\n oneOf: SchemaDataSet[];\n allOf: SchemaDataSet[];\n anyOf: SchemaDataSet[];\n not: SchemaDataSet;\n changeType(value: string, prev: string): void;\n}\n\nexport type StateDataSet = {\n readonly selectedSchema: SchemaDataSet;\n readonly selectedSchemaName: string;\n readonly selectedElement: FormDataSet;\n readonly selectedForm: FormDataSet;\n readonly selectedLeftPane: LeftPane;\n setForm(element: FormDataSet): void;\n setSchema(schema: SchemaDataSet, name?: string): void;\n setElement(element: FormDataSet, schema: SchemaDataSet): void;\n deleteActiveSchema(): void;\n deleteActiveElement(): void;\n changeLeftPane(view: LeftPane): void;\n};\n\ntype LeftPane = 'pages' | 'data' | 'components' | 'outline' | 'views' | 'all';\n\nexport interface ProjectDataSet {\n form: FormDataSet;\n schema: SchemaDataSet;\n state: StateDataSet;\n\n renameSchema(name: string, rootSchema: SchemaDataSet): string;\n}\n\n// add advanced properties\n// till i will be able to add a multiple properties\n// TODO: once I will enable type unions in schema this will go\n\n/* =========================================================\n Utility methods\n ======================================================== */\n\nfunction mergeProp(\n schema: JSONSchema,\n localTypes: { [index: string]: JSONSchema },\n sharedTypes: SchemaRecord[]\n) {\n let item = { ...schema };\n if (item.properties) {\n item.properties = mergeProperties(item, localTypes, sharedTypes);\n }\n if (item.$import) {\n item.reference = sharedTypes.find(t => t.id === item.$import).id;\n }\n if (item.$ref) {\n item.reference = item.$ref.split('/')[2];\n }\n return item;\n}\n\nfunction mergeProperties(\n schema: JSONSchema,\n localTypes: { [index: string]: JSONSchema },\n sharedTypes: SchemaRecord[]\n) {\n let keys = Object.getOwnPropertyNames(schema.properties);\n let newProperties: { [index: string]: JSONSchema } = {};\n\n for (let key of keys) {\n let prop = mergeProp(schema.properties[key], localTypes, sharedTypes);\n newProperties[key] = mergeSchema(prop, localTypes, sharedTypes);\n }\n return newProperties;\n}\n\nfunction mergeSchema(\n schema: JSONSchema,\n localTypes: { [index: string]: JSONSchema },\n sharedTypes: SchemaRecord[]\n): JSONSchema {\n let newSchema = { ...schema };\n\n if (schema.properties) {\n newSchema.properties = mergeProperties(schema, localTypes, sharedTypes);\n }\n if (schema.items) {\n newSchema.items = mergeProp(newSchema.items, localTypes, sharedTypes);\n }\n\n return newSchema;\n}\n\nexport function searchJsonSchema(func: (item: JSONSchema) => any, schema: JSONSchema) {\n let queue = [schema];\n while (queue.length) {\n let current = queue.pop();\n if (!current.properties) {\n continue;\n }\n for (let key of Object.getOwnPropertyNames(current.properties)) {\n let property = current.properties[key];\n if (property.properties) {\n queue.push(property);\n }\n let result = func(property);\n if (result) {\n return result;\n }\n }\n }\n}\n\nexport function searchSchema(schema: SchemaDataSet, func: (item: SchemaDataSet) => any) {\n let queue = [schema];\n while (queue.length) {\n let current = queue.pop();\n if (!current.properties) {\n continue;\n }\n for (let key of Array.from(current.properties.keys())) {\n let property = current.properties.get(key);\n if (property.properties) {\n queue.push(property);\n }\n let result = func(property);\n if (result) {\n return result;\n }\n }\n }\n}\n\nexport function searchForm(form: FormDataSet, func: (item: FormDataSet) => any) {\n let queue = [form];\n while (queue.length) {\n let current = queue.pop();\n for (let element of current.elements) {\n if (element.elements) {\n queue.push(element);\n }\n let result = func(element);\n if (result) {\n return result;\n }\n }\n }\n}\n\nfunction assignArrayIds(schema: JSONSchema, schemas: SchemaRecord[]) {\n let s: any = schema;\n s.imports = {};\n\n // import all used schemas\n // do not import unused schemas\n searchJsonSchema(property => {\n if (property.$import) {\n let item = schemas.find(s => s.id === property.$import);\n s.imports[item.id] = item.schema;\n }\n }, schema);\n}\n\n/* =========================================================\n Stores\n ======================================================== */\n\nfunction assignSource(props: any) {\n Object.getOwnPropertyNames(props).forEach(key => {\n // 'checked'\n props[key].control.props = {\n [props[key].schema.type === 'boolean' ? 'value' : 'value']: { source: key },\n ...props[key].control.props\n };\n });\n}\n\nfunction buildProps(props: PropMap, extraProps = {}) {\n // assign the default source\n assignSource(props);\n\n // build schema\n let schema = new Schema({\n type: 'object',\n properties: { ...buildPropSchema(props), ...extraProps }\n });\n return buildStore(schema, {}, false);\n}\n\nfunction buildPropSchema(props: PropMap) {\n let result: { [index: string]: JSONSchema } = {};\n for (let key of Object.getOwnPropertyNames(props)) {\n result[key] = props[key].schema;\n }\n return result;\n}\n\ntype IState = {\n editorCatalogue: EditorComponentCatalogue;\n selectedParentSchema: SchemaDataSet;\n selectedSourcePath: string;\n recomputeDataBounce(): void;\n types: SchemaRecord[];\n schema: SchemaDataSet;\n form: FormDataSet;\n project: ProjectDataSet;\n state: StateDataSet;\n};\n\nexport function prepareStores(context: IState) {\n let id = 0;\n let date = Date.now();\n\n function generateId() {\n if (process.env.NODE_ENV === 'test') {\n return (id++).toString();\n }\n return (date + id++).toString();\n }\n\n let objectMap: { [index: string]: any } = {};\n\n const mapModifiers = (self: any) => ({\n afterCreate() {\n objectMap[self.uid] = self;\n },\n beforeDestroy() {\n delete objectMap[self.uid];\n }\n });\n\n const referenceHandlers = {\n get(identifier: string) {\n return objectMap[identifier] || null;\n },\n // given a user, produce the identifier that should be stored\n set(value: any /* User */) {\n return value.uid;\n }\n };\n\n const props: { [index: string]: any } = {};\n const propNames: { [index: string]: string[] } = {};\n let childProps: JSONSchema = {\n properties: {\n control: { type: 'string' },\n label: boundSchema(),\n css: boundSchema(),\n className: boundSchema(),\n hidden: boundSchema(),\n editorLabel: { type: 'string' },\n locked: { type: 'boolean' }\n }\n };\n\n // find all child props\n let childPropStore = buildStore(new Schema({ type: 'object', properties: {} }), {}, false);\n // const emptyStore = buildStore(new Schema({ type: 'object', properties: {} }), {}, false);\n\n if (context.editorCatalogue) {\n for (let key of Object.getOwnPropertyNames(context.editorCatalogue.components)) {\n let c = context.editorCatalogue.components[key];\n if (c.childProps) {\n // assign default source\n assignSource(c.childProps);\n\n // build schems\n childProps = { properties: { ...childProps.properties, ...buildPropSchema(c.childProps) } };\n }\n }\n\n // this is a generic store for all element\n // if element does not define its own prop, it defines at least these props\n childPropStore = buildStore(\n new Schema({ type: 'object', properties: childProps.properties }),\n {},\n false\n );\n\n // build control prop stores\n for (let key of Object.getOwnPropertyNames(context.editorCatalogue.components)) {\n let c = context.editorCatalogue.components[key];\n if (c.props) {\n props[key] = buildProps(c.props, childProps.properties);\n propNames[key] = Object.keys(c.props).concat(Object.keys(childProps.properties));\n }\n }\n }\n\n const elementStore = buildStore(elementSchema, {}, false)\n .props({\n uid: types.optional(types.string, generateId),\n props: types.optional(\n types.union({\n dispatcher: snapshot => {\n if (!snapshot || !snapshot.control) {\n // console.warn('No control props detected ...');\n return childPropStore;\n }\n return props[snapshot.control] || childPropStore;\n }\n }),\n {}\n ),\n // sourceRef: types.maybe(types.reference(types.late((): IAnyModelType => elementStore), referenceHandlers)),\n elements: types.optional(\n types.array(\n types.maybe(types.union(types.late((): IAnyModelType => elementStore), types.null))\n ),\n []\n ),\n pages: types.optional(\n types.array(\n types.maybe(types.union(types.late((): IAnyModelType => elementStore), types.null))\n ),\n []\n ),\n isSelected: types.optional(types.boolean, false)\n })\n .actions(mapModifiers)\n .actions(() => ({\n moveElement(from: FormDataSet, to: FormDataSet, index: number) {\n from.parent.detach(from);\n // from.detach(from);\n if (index != null && index >= 0) {\n to.insertRow('elements', index, toJS(from));\n } else {\n to.addRow('elements', toJS(from));\n }\n }\n }));\n\n // const formStore = buildStore(elementSchema, {}, false, {\n // formElement: elementStore as any\n // });\n const schemaStore = buildStore(schemaSchema, {}, false)\n .actions(mapModifiers)\n .props({\n uid: types.optional(types.string, generateId),\n properties: types.maybe(types.map(types.late((): IAnyModelType => schemaStore))),\n items: types.maybe(types.late((): IAnyModelType => schemaStore)),\n reference: types.maybe(\n types.reference(types.late((): IAnyModelType => schemaStore), {\n get(identifier: string, parent: SchemaDataSet) {\n let root: SchemaDataSet = (parent.root() as any).schema;\n if (!root) {\n return {};\n }\n // find in types\n let key = Array.from(root.definitions.keys()).find(f => f === identifier);\n if (key) {\n return root.definitions.get(key);\n }\n // find in imports\n key = Array.from(root.imports.keys()).find(f => f === identifier);\n if (key) {\n return root.imports.get(key);\n }\n throw new Error('Could not find reference to: ' + identifier);\n },\n // given a user, produce the identifier that should be stored\n set(value: SchemaDataSet /* User */) {\n let root: SchemaDataSet = (value.root() as any).schema;\n if (!root) {\n return '';\n }\n\n let key = Array.from(root.definitions.keys()).find(\n f => root.definitions.get(f) === value\n );\n if (key) {\n return key;\n }\n // find in imports\n key = Array.from(root.imports.keys()).find(f => root.imports.get(f) === value);\n if (key) {\n return key;\n }\n throw new Error('WTF');\n }\n })\n ),\n definitions: types.optional(types.map(types.late((): IAnyModelType => schemaStore)), {}),\n imports: types.optional(types.map(types.late((): IAnyModelType => schemaStore)), {}),\n anyOf: types.optional(types.array(types.late((): IAnyModelType => schemaStore)), []),\n allOf: types.optional(types.array(types.late((): IAnyModelType => schemaStore)), []),\n oneOf: types.optional(types.array(types.late((): IAnyModelType => schemaStore)), []),\n errorMessage: types.maybe(\n types.union(types.string, types.map(types.union(types.string, types.map(types.string))))\n )\n })\n .volatile(self => ({\n name() {\n let parent: SchemaDataSet = self.parent as any;\n let key = Array.from(parent.properties.keys()).find(\n k => parent.properties.get(k) === (self as any)\n );\n if (key) {\n return key;\n }\n return 'unknownArgMessage';\n }\n }))\n .actions(self => ({\n changeType: (value: string, prev: string) => {\n const owner = (self as unknown) as SchemaDataSet;\n\n owner.setValue('$ref', null);\n owner.setValue('$import', null);\n owner.setValue('reference', undefined);\n owner.setValue('type', value);\n\n // atomic types do not need to be handled\n if (['string', 'number', 'integer', 'boolean'].indexOf(value) >= 0) {\n owner.setValue('properties', undefined);\n owner.setValue('items', undefined);\n return;\n }\n\n if (value === 'array' && prev !== 'array') {\n owner.setValue('items', { type: 'object', properties: {} });\n return;\n }\n\n if (value === 'object') {\n if (!owner.getValue('properties')) {\n owner.setValue('properties', {});\n }\n return;\n }\n\n let elementRoot = root(owner);\n\n let localTypes = Array.from(elementRoot.definitions.keys());\n if (localTypes.indexOf(value) >= 0) {\n owner.setValue('reference', value);\n owner.setValue('$ref', `#/definitions/${value}`);\n owner.setValue('type', 'object');\n return;\n }\n\n let imports = Array.from(elementRoot.imports.keys());\n if (imports.indexOf(value) >= 0) {\n owner.setValue('reference', value);\n owner.setValue('$import', value);\n owner.setValue('type', 'object');\n return;\n }\n }\n }));\n\n const stateStore = types\n .model({\n selectedForm: types.maybe(types.reference(elementStore, referenceHandlers)),\n selectedSchema: types.maybe(types.reference(schemaStore, referenceHandlers)),\n selectedSchemaName: types.maybe(types.string),\n selectedElement: types.maybe(types.reference(elementStore, referenceHandlers)),\n selectedLeftPane: types.optional(types.string, localStorage.getItem('CORPIX_LEFT') || 'pages')\n })\n .actions(self => ({\n setForm(element: FormDataSet) {\n self.selectedSchema = undefined;\n self.selectedElement = element as any;\n self.selectedForm = element as any;\n },\n setSchema(schema: any, name: string = '') {\n self.selectedSchema = schema;\n self.selectedSchemaName = name;\n self.selectedElement = undefined;\n },\n setElement(element: FormDataSet, schema: SchemaDataSet) {\n self.selectedSchema = undefined;\n if (self.selectedElement) {\n self.selectedElement.setValue('isSelected', false);\n }\n self.selectedElement = element as any;\n self.selectedElement.setValue('isSelected', true);\n context.selectedParentSchema = findParentSchema(\n element,\n schema,\n context as DynamicForm.EditorContextType\n );\n },\n changeLeftPane(view: LeftPane) {\n localStorage.setItem('CORPIX_LEFT', view);\n self.selectedLeftPane = view;\n }\n }))\n .actions(self => ({\n deleteActiveSchema() {\n self.selectedSchema.parent.detach(self.selectedSchema);\n self.setSchema(undefined, undefined);\n },\n deleteActiveElement() {\n self.selectedElement.parent.detach(self.selectedElement);\n self.selectedElement = undefined;\n }\n }));\n\n const projectStore = types\n .model({\n form: elementStore,\n schema: schemaStore,\n state: stateStore,\n history: types.optional(UndoManager, {} as any)\n })\n .actions(self => ({\n renameSchema: (name: string, rootSchema: SchemaDataSet) => {\n // TODO: Represnt schema elements as array\n let selected = self.state.selectedSchema;\n let owner = selected.reference ? selected.reference : selected;\n let parent: SchemaDataSet = owner.parent as any;\n let sourcePath = context.selectedSourcePath;\n let titleOnly =\n !sourcePath || (parent.definitions.has(sourcePath) && rootSchema === parent);\n\n let current = self.state.selectedSchema;\n\n // we are modifying a data type name\n // this is only a title change, not a map\n if (titleOnly) {\n current.setValue('title', name);\n return;\n }\n\n if (parent.properties.has(name)) {\n current.setError('title', 'Element with this name already exists!');\n return;\n }\n\n // rename all references in the form\n\n let newSourcePathParts = sourcePath.split('.');\n newSourcePathParts.pop();\n let newSourcePath = newSourcePathParts.concat(name).join('.');\n\n context.selectedSourcePath = newSourcePath;\n\n searchForm(self.form as any, item => {\n // change props\n for (let prop of propNames[item.control]) {\n let p = item.props[prop];\n if (p && p.source && p.source.indexOf(sourcePath) >= 0) {\n p.setValue('source', p.source.replace(sourcePath, newSourcePath));\n }\n }\n });\n\n const data: any = schemaDatasetToJS(current);\n parent.properties.set(name, data);\n\n let newValue = parent.properties.get(name);\n newValue.setValue('title', name);\n self.state.setSchema(newValue, name);\n\n parent.detach(current);\n\n context.recomputeDataBounce();\n }\n }));\n\n return function buildFormEditorDataset(form: FormElement, schema: JSONSchema): ProjectDataSet {\n // add globals to schema\n\n assignArrayIds(schema, context.types);\n // prepare schemas\n\n if (schema) {\n schema = mergeSchema(schema, schema.definitions, context.types);\n } else {\n schema = {};\n }\n\n let s = projectStore.create({ form, schema, state: {} } as any);\n\n // select the main form by default\n\n if (form) {\n const currentForm = localStorage.getItem('CORPIX_SELECTED_FORM');\n if (currentForm && s.form.pages.some(p => p.uid === currentForm)) {\n s.state.setForm(s.form.pages.find(p => p.uid === currentForm));\n } else {\n s.state.setForm(s.form as any);\n }\n }\n\n context.form = s.form as any;\n context.schema = s.schema as any;\n context.project = s as any;\n context.state = s.state as any;\n\n if (!undoSet) {\n setUndoManager(s);\n\n (global as any).__state = s;\n undoSet = true;\n }\n\n return (s as unknown) as ProjectDataSet;\n };\n}\n","import { Theme } from './common';\n\nexport const white: Theme = {\n borderColor: '#777',\n buttonBackground: '#888',\n dark: false,\n dragBackground: '#666',\n dragBorder: '#999',\n headerBackground: '#bcbcbc',\n headerText: '#444',\n headerColor: '#444',\n inputBackground: '#E0e0e0',\n inputBorder: '#BBB',\n inputColor: '#333',\n inputLabel: '#666',\n invalidBackground: '#f48f42',\n invalidColor: 'black',\n inverted: false,\n label: '#e8a4bb',\n menuColor: '#cdcdcc',\n meta: '#888',\n pane: '#efefef',\n selectedBackground: '#ddd',\n selectedColor: '#555',\n sideMenuColor: 'black',\n textColor: '#303030'\n};\n","import { Theme } from './common';\n\nexport const black: Theme = {\n dark: true,\n sideMenuColor: 'black',\n menuColor: '#303030',\n selectedColor: '#d0d0d0',\n selectedBackground: '#555',\n dragBackground: '#666',\n dragBorder: '#999',\n pane: '#272822',\n headerBackground: '#303030',\n textColor: '#bfbfbf',\n meta: '#909090',\n headerText: '#d0d0d0',\n inverted: true,\n inputBackground: '#303030',\n buttonBackground: '#404040',\n headerColor: '#ccc',\n inputColor: '#d0d0d0',\n inputLabel: '#666',\n borderColor: 'black',\n invalidColor: 'white',\n invalidBackground: '#f48f42',\n label: '#e8a4bb',\n inputBorder: '#111'\n};\n","import * as React from 'react';\nimport { observer } from 'mobx-react';\nimport names from 'classnames';\n\nimport { bind } from '../editor_helpers';\nimport { css } from '../../common';\nimport { FormDataSet } from '../form_store';\nimport { GridChildProps } from '../../layouts/grid_view';\nimport { EditorContextType, EditorContext } from '../editor_context';\nimport { calculateHorizontalPosition } from '../editor_common';\nimport { clearAll } from '../../layouts/drag_drop';\nimport { FormComponentProps, DataSet, FormComponentCatalogue } from '@tomino/dynamic-form';\n\nconst cell = css`\n &.empty {\n border: dotted 2px #dfdfdf;\n min-width: 50px;\n min-height: 20px;\n height: 100%;\n }\n label: cell;\n`;\n\nexport interface DropCellProps {\n className?: string;\n formElement: FormDataSet;\n parentFormElement?: FormDataSet;\n editorState: EditorContextType;\n owner: DataSet;\n catalogue: FormComponentCatalogue;\n style?: any;\n children: any;\n mouseOver?: (e: React.MouseEvent, props: FormComponentProps, context: EditorContextType) => void;\n mouseOut?: () => void;\n id: string;\n hover?: (e: React.DragEvent, props: DropCellProps, context?: EditorContextType) => void;\n drop: (e: React.DragEvent, props: DropCellProps, context?: EditorContextType) => boolean;\n}\n\nexport const DropCell = observer((props: DropCellProps) => {\n const context = React.useContext(EditorContext);\n const ref = React.useRef();\n\n const onDrag = React.useCallback(\n (ev: React.DragEvent) => {\n context.dragItem = {\n name: props.formElement.control,\n row: props.formElement.props.row,\n column: props.formElement.props.column,\n element: props.formElement,\n id: props.id,\n position: calculateHorizontalPosition(ev)\n };\n },\n [context.dragItem, props.formElement, props.id]\n );\n\n const dragEnter = React.useCallback(() => clearAll(), []);\n\n const dragOver = React.useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n\n const item = context.dragItem;\n if (!item) {\n return;\n }\n\n // dataset binding highlight\n // dragging over the dataset binding\n\n if (item.dataset) {\n props.editorState.hoverParent = props.formElement.parent;\n } else if (props.hover) {\n props.hover(e, props, context);\n }\n ref.current.style.background = '#999';\n },\n [context, props]\n );\n\n const dragLeave = React.useCallback((e: React.DragEvent) => {\n e.preventDefault();\n ref.current.style.background = 'inherit';\n }, []);\n\n const drop = React.useCallback(\n e => {\n const item = context.dragItem;\n if (!item) {\n return;\n }\n\n // dataset binding highlight\n // dragging over the dataset binding\n if (item.dataset) {\n bind(props.formElement, item);\n }\n\n if (props.drop(e, props, context)) {\n context.project.state.setElement(item.element, props.editorState.schema);\n context.selectedParent = props.parentFormElement;\n }\n\n ref.current.style.background = 'inherit';\n },\n [context, props]\n );\n\n const mouseOver = React.useCallback(\n e => {\n if (props.mouseOver) {\n props.mouseOver(e, props, context);\n }\n },\n [context, props]\n );\n\n let control = props.formElement.control;\n return (\n \n {props.children || '\\xa0'}\n \n );\n});\n","import { FormComponentProps } from '@tomino/dynamic-form';\n\nimport { FormDataSet, SchemaDataSet } from './form_store';\nimport { GridChildProps } from '../layouts/grid_view';\nimport { EditorContextType } from './editor_context';\nimport { bindGetValue } from '../helpers';\n\nexport function findConflict(\n props: FormComponentProps,\n context: EditorContextType,\n cells: FormDataSet[],\n start: number,\n end: number\n) {\n const getValue = bindGetValue(props, context);\n return cells.find(\n e =>\n (getValue(e, 'column') >= start && getValue(e, 'column') <= end) ||\n (getValue(e, 'column') + getValue(e, 'width') - 1 >= start &&\n getValue(e, 'column') + getValue(e, 'width') - 1 <= end)\n );\n}\n\nexport function adjustPosition(\n props: FormComponentProps,\n context: EditorContextType,\n where: string,\n source: FormDataSet,\n target: FormDataSet,\n parent: FormDataSet\n) {\n const getValue = bindGetValue(props, context);\n if (!parent) {\n // TODO: fix\n return getValue(target, 'column');\n }\n let dimensions = parent.elements.reduce(\n (prev, next) => ({\n rows: prev.rows < next.props.row ? next.props.row : prev.rows,\n columns: prev.columns < next.props.column ? next.props.column : prev.columns\n }),\n { rows: 0, columns: 0 }\n );\n\n // adjust from left or right\n let column =\n where === 'left'\n ? getValue(target, 'column')\n : getValue(target, 'column') - getValue(target, 'width') + 1;\n\n // if (adjust) {\n // source.props.column = position.props.column - source.props.width + 1;\n // }\n // adjust to min width\n column = column < 1 ? 1 : column;\n // adjust to max width\n column =\n column + source.props.width > dimensions.columns\n ? dimensions.columns - getValue(source, 'width') + 1\n : column;\n\n let cells = parent.elements.filter(e => e.props.row === target.props.row && e !== source);\n // try one adjustment moving the item left or right from the conflict cell\n let conflict = findConflict(props, context, cells, column, column + source.props.width - 1);\n\n // TRYING TO SOLVE IT FOR THE USER\n // if (conflict) {\n // column = where === 'left' ? conflict.props.column - source.props.width : conflict.props.column + conflict.props.width;\n // }\n // // if it fails again we give up\n // if (column >= 0) {\n // conflict = findConflict(cells, column, column + source.props.width - 1);\n // }\n\n if (conflict) {\n return -1;\n }\n return column;\n}\n\nexport function bind(formElement: FormDataSet, item: any) {\n // we can either drop on existing control\n // or on an empty cell\n\n if (formElement.parent) {\n // find the parent path\n let parent = formElement.parent;\n let parentPath = '';\n while (parent) {\n if (parent.props.value && parent.props.value.source) {\n parentPath = parentPath + parent.props.value + '.';\n }\n parent = parent.parent;\n }\n let path = item.name.replace(parentPath, '');\n formElement.setValue('source', path);\n return;\n }\n\n // if it is an empty cell, we will guess the control\n\n const schema: SchemaDataSet = item.schema;\n item.label = item.name;\n item.source = item.name;\n\n if (schema.type === 'boolean') {\n item.name = 'Checkbox';\n } else if (schema.type === 'array') {\n item.name = 'Table';\n } else if (schema.type === 'number' || schema.type === 'integer') {\n item.name = 'Input';\n item.controlProps = { type: 'number' };\n } else if (schema.type === 'string') {\n item.name = 'Input';\n }\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\n\nimport { css } from '../common';\nimport { EditorContextType } from '../editor/editor_context';\n\nexport type Processor = {\n children: (owner: T) => T[];\n name: (owner: T) => string;\n id: (owner: T) => string;\n disableDrop?: (owner: T, schema: any) => boolean;\n};\n\nconst dropZone = `\n opacity: 0.3;\n min-width: 100px;\n display: block;\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n text-wrap: ellipsis;\n font-size: 10px;\n`;\n\nconst horizontalDropZone = `\n ${dropZone}\n display: flex !important;\n align-items: center !important;\n height: 100%;\n top: 0px;\n \n`;\n\nconst placeholder = (size: number, dropStyle: any) => css`\n transition: margin 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;\n position: relative;\n /* padding-top: 5px; */\n /* padding-bottom: 5px; */\n\n &.onMiddle {\n outline: dashed 2px #ccc;\n }\n\n &.onBottom {\n margin-bottom: ${size}px !important;\n ::after {\n ${dropZone}\n ${dropStyle}\n content: attr(data-after);\n bottom: -${size - (size - 20) / 2}px;\n }\n }\n\n &.onTop {\n margin-top: ${size}px !important;\n ::before {\n ${dropZone}\n ${dropStyle}\n content: attr(data-before);\n top: -${size - (size - 20) / 2}px;\n }\n }\n\n &.onRight {\n margin-right: 110px !important;\n ::after {\n ${horizontalDropZone}\n ${dropStyle}\n content: attr(data-after);\n right: -105px;\n }\n }\n\n &.onLeft {\n margin-left: 110px !important;\n ::before {\n ${horizontalDropZone}\n ${dropStyle}\n content: attr(data-before);\n left: -105px;\n }\n }\n label: placeholder;\n`;\n\nfunction findVerticalIndex(e: React.DragEvent, rects: HTMLDivElement[], i: number) {\n return (\n rects[i].getBoundingClientRect().top + window.scrollY < e.pageY &&\n (!rects[i + 1] || rects[i + 1].getBoundingClientRect().top + window.scrollY > e.pageY)\n );\n}\n\nfunction findHorizontalIndex(e: React.DragEvent, rects: HTMLDivElement[], i: number) {\n let rect = rects[i].getBoundingClientRect();\n\n return (\n rect.top + window.scrollY < e.pageY &&\n rect.top + rect.height + window.scrollY > e.pageY &&\n rect.left + window.scrollX < e.pageX &&\n (!rects[i + 1] ||\n rect.left + rect.width + window.scrollX > e.pageX ||\n rects[i + 1].getBoundingClientRect().left + window.scrollX > e.pageX)\n );\n}\n\nfunction findVerticalPosition(e: React.DragEvent, rect: ClientRect, previousEnd: number) {\n let offset = 8; // rect.height > 40 ? 20 : rect.height / 2;\n // return rect.top + window.scrollY + offset > e.pageY\n // ? 'top'\n // : rect.top + window.scrollY + rect.height - offset < e.pageY\n // ? 'bottom'\n // : 'middle';\n\n return rect.bottom + window.scrollY < e.pageY\n ? 'bottom'\n : previousEnd + window.scrollY + offset > e.pageY\n ? 'top'\n : 'middle';\n}\n\nfunction findHorizontalPosition(e: React.DragEvent, rect: ClientRect) {\n let offset = rect.width > 100 ? 20 : rect.width / 2;\n return rect.left + window.scrollX + offset > e.pageX\n ? 'top'\n : rect.left + window.scrollX + rect.width - offset < e.pageX\n ? 'bottom'\n : 'middle';\n}\n\n// function getRandomColor() {\n// var letters = '0123456789ABCDEF';\n// var color = '#';\n// for (var i = 0; i < 6; i++) {\n// color += letters[Math.floor(Math.random() * 16)];\n// }\n// return color;\n// }\n\nlet config: {\n [index: string]: {\n currentStacks: string[];\n active: HTMLDivElement[];\n padMap: HTMLDivElement[];\n drops: { position: string; index: number };\n };\n} = {};\n\nfunction clear(id: string) {\n for (let el of config[id].active) {\n el.classList.remove('onBottom', 'onTop', 'onLeft', 'onRight', 'onMiddle');\n }\n config[id].active = [];\n}\n\nfunction cleanup(id: string, context: EditorContextType, e?: any, endDragHandler?: any) {\n config[id].currentStacks = [];\n\n for (let pad of config[id].padMap) {\n pad.style.paddingBottom = null;\n pad.style.paddingTop = null;\n }\n config[id].padMap = [];\n\n if (endDragHandler) {\n endDragHandler(e);\n }\n\n if (context) {\n context.dragItem = null;\n }\n}\n\nexport function clearAll(context?: EditorContextType) {\n for (let key of Object.keys(config)) {\n clear(key);\n cleanup(key, context);\n }\n}\n\nexport class DragDrop {\n startClass: string;\n endClass: string;\n findIndex: (e: React.DragEvent, rects: HTMLDivElement[], i: number) => boolean;\n findPosition: (\n e: React.DragEvent,\n rect: ClientRect,\n previousEnd: number,\n nextStart: number\n ) => string;\n placeholderClass: string;\n paddingElement: 'paddingBottom' | 'paddingRight';\n allowParenting: boolean;\n\n context: EditorContextType;\n owner: T;\n processor: Processor;\n uid: string;\n dropHandler: (to: number, position?: string) => void;\n endDragHandler: (e?: React.DragEvent) => void;\n\n add = true;\n initialised = false;\n\n constructor(\n layout: 'row' | 'column',\n owner: T,\n processor: Processor,\n dropStyle: string,\n uid = 'global',\n dropHandler: (to: number, position?: string) => void,\n endDragHandler: (e?: React.DragEvent) => void,\n allowParenting: boolean,\n height = 40,\n context: EditorContextType = null\n ) {\n this.startClass = layout === 'row' ? 'onLeft' : 'onTop';\n this.endClass = layout === 'row' ? 'onRight' : 'onBottom';\n this.findIndex = layout === 'row' ? findHorizontalIndex : findVerticalIndex;\n this.findPosition = layout === 'row' ? findHorizontalPosition : findVerticalPosition;\n this.paddingElement = layout === 'row' ? 'paddingRight' : 'paddingBottom';\n this.processor = processor;\n this.owner = owner;\n this.uid = uid;\n this.dropHandler = dropHandler;\n this.endDragHandler = endDragHandler;\n this.context = context;\n this.allowParenting = allowParenting;\n\n this.placeholderClass = placeholder(height, dropStyle);\n\n if (!config[this.uid]) {\n config[this.uid] = {\n currentStacks: [],\n active: [],\n drops: null,\n padMap: []\n };\n }\n }\n\n get config() {\n return config[this.uid];\n }\n\n init = (container: HTMLDivElement) => {\n let items = this.processor.children(this.owner);\n let nodes = Array.from(container.childNodes) as HTMLDivElement[];\n let id = this.processor.id(this.owner);\n\n container.setAttribute('data-drag', id);\n\n //container.style.backgroundColor = getRandomColor();\n\n for (let i = 0; i < items.length; i++) {\n let element = nodes[i];\n let item = items[i];\n\n if (!item || !element) {\n continue;\n }\n\n let id = this.processor.id(item);\n\n element.setAttribute('data-drag', id);\n //element.style.backgroundColor = getRandomColor();\n if (!element.classList.contains(this.placeholderClass)) {\n element.classList.add(this.placeholderClass);\n }\n\n let name = this.processor.name(item);\n element.setAttribute('data-after', '🔰 After ' + name);\n element.setAttribute('data-before', '🔰 Before ' + name);\n }\n };\n\n findRect(e: React.DragEvent, elements: HTMLDivElement[]) {\n for (let i = 0; i < elements.length; i++) {\n // all other element\n if (this.findIndex(e, elements, i)) {\n return i;\n }\n }\n return -1;\n }\n\n clear() {\n // console.log('Cleaning: ' + this.uid);\n clear(this.uid);\n }\n\n dragEnd(e: React.DragEvent) {\n // console.log(`Leave: ${index}: ${position}`);\n this.add = true;\n this.clear();\n cleanup(this.uid, this.context, e, this.endDragHandler);\n }\n\n onDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n\n if (this.processor.disableDrop && this.processor.disableDrop(this.owner, this.context)) {\n return;\n }\n\n // we will incrementally be expanding elements for a better dragover experience\n if (this.config.padMap.indexOf(e.currentTarget) === -1) {\n e.currentTarget.style[this.paddingElement] = '5px';\n this.config.padMap.push(e.currentTarget);\n }\n\n if (!this.initialised) {\n this.init(e.currentTarget as HTMLDivElement);\n this.initialised = true;\n }\n\n let id = e.currentTarget.getAttribute('data-drag');\n\n // we start adding to the stack when signalled\n // stack is cleared when a DragLeave event is detected\n // in this moment it wil repopulate with current elements\n if (this.add) {\n this.config.currentStacks.push(id);\n this.add = false;\n }\n\n let elements = ((e.currentTarget.childNodes as any) || []) as HTMLDivElement[];\n if (!elements || elements.length === 0) {\n return;\n }\n\n // we only process current element, if event bubbles up we will avoid it\n // we use stack for this purpose where the current control is on the very bottom\n const currentIndex = this.config.currentStacks.findIndex(s => s === id);\n if (currentIndex != 0) {\n return;\n }\n\n // find the index of the current item\n const index = this.findRect(e, elements);\n if (index === -1) {\n return;\n }\n\n let element = elements[index];\n // we may skip all elements that dave no-drop attribute\n if (!element || element.getAttribute('data-no-drop')) {\n return;\n }\n\n // decide behaviour based on position\n // position is either the top | bottom | middle part of the drag over element\n let previous = element.previousSibling as HTMLDivElement;\n let next = element.nextSibling as HTMLDivElement;\n let previousEnd =\n (previous\n ? previous.getBoundingClientRect().bottom\n : element.parentElement.getBoundingClientRect().top) + window.scrollY;\n let nextStart =\n (next\n ? next.getBoundingClientRect().top\n : element.parentElement.getBoundingClientRect().bottom) + window.scrollY;\n\n let pos = this.findPosition(e, element.getBoundingClientRect(), previousEnd, nextStart);\n\n // when we are in the middle of the element we remove classes\n // if (pos === 'middle') {\n // console.log('Clearing middle...');\n\n // this.clear();\n // return;\n // }\n\n // console.log(pos);\n\n let className: string;\n if (index === 0 && pos === 'top') {\n className = this.startClass;\n } else if (pos === 'bottom') {\n className = this.endClass;\n } else if (index > 0 && pos === 'top') {\n className = this.endClass;\n element = element.previousSibling as HTMLDivElement;\n } else if (this.allowParenting && pos === 'middle') {\n className = 'onMiddle';\n }\n\n if (element.classList.contains(className)) {\n return;\n }\n\n // console.log('Showing: ' + id + ' - ' + index + ':' + pos);\n this.config.drops = { index, position: pos };\n\n // the current element changed so we need to clear all previous\n this.clear();\n\n element.classList.add(className);\n this.config.active.push(element);\n };\n\n onDragEnd = (e: React.DragEvent) => {\n // console.log('Drag end ...');\n this.dragEnd(e);\n };\n\n onDragLeave = () => {\n this.config.currentStacks = [];\n this.add = true;\n };\n\n onDrop = (e: React.DragEvent) => {\n let id = e.currentTarget.getAttribute('data-drag');\n let currentIndex = this.config.currentStacks.findIndex(s => s === id);\n if (currentIndex === 0) {\n // console.log(\n // `Drop ${currentIndex} - ${this.config.drops.index} - ${this.config.drops.position}`\n // );\n\n if (this.dropHandler) {\n this.initialised = false;\n this.dropHandler(\n this.config.drops.index + (this.config.drops.position === 'bottom' ? 1 : 0),\n this.config.drops.position\n );\n }\n this.dragEnd(e);\n }\n };\n\n props() {\n return {\n onDragOver: this.onDragOver,\n onDragEnd: this.onDragEnd,\n onDrop: this.onDrop,\n onDragLeave: this.onDragLeave\n };\n }\n}\n","import { css, Theme } from '../common';\n\nexport const selected = css`\n /* name:selected */\n outline: dashed 3px lightcoral !important;\n outline-offset: -1px !important;\n label: selected;\n`;\n\nexport const borderHandler = css`\n width: 5px;\n height: 100%;\n flex: 1 5px;\n cursor: ew-resize;\n`;\n\nexport const cellContent = css`\n flex: 1 100%;\n`;\n\nexport const cellStyle = css`\n display: flex;\n width: 100%;\n`;\n\nexport const containerWrapper = css`\n width: 100%;\n position: relative;\n label: containerWrapper;\n`;\n\nexport const containerLabelBase = css`\n position: absolute;\n font-weight: bold;\n z-index: 10;\n padding: 3px 12px;\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n opacity: 0.8;\n display: block;\n white-space: nowrap;\n label: containerLabel;\n`;\n\nexport const containerLabelRight = css`\n ${containerLabelBase}\n border-radius: 3px;\n right: 3px;\n bottom: 3px;\n\n label: containerLabelRight;\n`;\n\nexport const containerLabelLeft = css`\n ${containerLabelBase}\n position: inherit;\n display: block;\n border-radius: 0px;\n margin-bottom: 6px;\n label: containerLabelLeft;\n`;\n\nexport const containerBorder = (theme: Theme) => css`\n .on {\n outline: dotted 2px ${theme.label};\n outline-offset: -1px;\n border-radius: 3px;\n }\n label: containerBorder;\n`;\n\nconst hover = css`\n background-color: grey;\n label: hover;\n transition: padding 0.3s;\n`;\n\nexport const caret = css`\n width: 10px;\n margin-right: 6px;\n opacity: 0.7;\n font-size: 12px;\n`;\n\nexport const hoverStates: { [index: string]: any } = {\n hoverDataset: css`\n ${hover}\n opacity: 0.5;\n `,\n off: css`\n background-color: transparent;\n label: off;\n `,\n hover,\n error: css`\n background-color: #ff9999;\n label: error;\n `,\n leftHover: css`\n ${hover};\n background-color: white;\n padding-left: 15px;\n label: hoverLeft;\n `,\n rightHover: css`\n ${hover};\n background-color: white;\n padding-right: 15px;\n label: hoverRight;\n `,\n topHover: css`\n ${hover};\n background-color: white;\n padding-top: 10px;\n label: hoverTop;\n `,\n bottomHover: css`\n ${hover};\n background-color: white;\n padding-bottom: 10px;\n label: hoverBottom;\n `\n};\n","/* eslint-disable react-hooks/rules-of-hooks */\n\nimport React from 'react';\n\nimport { css } from '../common';\nimport { EditorContext } from './editor_context';\nimport { FormDataSet } from './form_store';\nimport { FormComponentProps } from '@tomino/dynamic-form';\n\nconst label = css`\n position: absolute;\n z-index: 100;\n background: salmon;\n padding: 3px;\n border-radius: 3px;\n white-space: nowrap;\n overflow: hidden;\n color: white;\n transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n\n span {\n padding: 0px 3px;\n cursor: pointer;\n }\n\n label: label;\n`;\n\nconst overStyle = css`\n outline: dotted 2px;\n outline-color: transparent;\n transition: outline-color 0.3s;\n .on {\n outline: dotted 2px;\n outline-color: #aaa !important;\n }\n\n /* outline-offset: -3px; */\n /* background-color: pink !important; */\n label: over;\n`;\n\nlet controls: any[] = [];\nlet elem: HTMLDivElement;\nlet timer: any = null;\nlet out = true;\n\nfunction startTimer() {\n clearTimeout(timer);\n timer = setTimeout(() => {\n if (!elem) {\n return;\n }\n elem.style.left = '-1000px';\n elem.style.top = '-1000px';\n }, 1000);\n}\n\nfunction showLabel(currentTarget: HTMLElement) {\n // console.log(index + ' over: ' + element.control);\n clearTimeout(timer);\n if (!elem) {\n elem = document.createElement('div');\n elem.className = label;\n document.body.appendChild(elem);\n }\n let bb = currentTarget.getBoundingClientRect();\n elem.onmouseover = () => {\n clearTimeout(timer);\n };\n elem.onmouseout = () => startTimer();\n\n let left = bb.left + window.scrollX;\n let top = bb.top + bb.height + window.scrollY;\n\n while (elem.firstChild) {\n elem.removeChild(elem.firstChild);\n }\n\n elem.style.left = left + 'px';\n elem.style.top = top + 'px';\n}\n\nexport function editorProps(element: FormDataSet, props: FormComponentProps) {\n const context = React.useContext(EditorContext);\n const ele = element;\n // const [over, setOver] = React.useState(false);\n const onClick = React.useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n context.state.setElement(element, context.schema);\n },\n [context.schema, context.state, element]\n );\n\n const onMouseOver = React.useCallback(\n (e: React.ChangeEvent) => {\n e.stopPropagation();\n e.preventDefault();\n\n let el = ele;\n // if (!e.target.getAttribute('data-editor-id')) {\n // return;\n // }\n // console.log('Over: ' + (ele && ele.control) + e.currentTarget.getAttribute('data-control'));\n\n if (controls.length > 0) {\n return;\n }\n\n // we detect \"invisible\" or \"provider\" elements\n // TODO: revisit\n while (el.elements && el.elements.length && el.elements[0]) {\n let control = context.editorCatalogue.components[el.elements[0].control];\n if (control && control.provider) {\n el = el.elements[0];\n } else {\n break;\n }\n }\n\n while (el != null && el.control) {\n let current = el;\n controls.push(element);\n\n // let index = e.handled || 0;\n // e.handled = index + 1;\n if (out) {\n showLabel(e.currentTarget);\n if (!e.currentTarget.classList.contains(overStyle)) {\n e.currentTarget.classList.add(overStyle);\n }\n e.currentTarget.classList.add('on');\n out = false;\n }\n\n // console.log(\n // `${e.currentTarget === e.target} C: ${e.currentTarget.getAttribute(\n // 'data-editor-id'\n // )} T: ${e.target.getAttribute('data-editor-id')}`\n // );\n\n let child = document.createElement('span');\n child.onclick = ((e: React.MouseEvent) => {\n e.stopPropagation();\n context.state.setElement(current, context.schema);\n }) as any;\n child.innerHTML = el.control;\n\n if (elem && elem.childNodes.length === 1) {\n let expand = document.createElement('span');\n expand.onclick = () => {\n elem.style.width = elem.getAttribute('data-full-width') + 'px';\n };\n expand.style.padding = '0px 6px 0px 3px';\n expand.innerHTML = ' \\u276F ';\n elem.appendChild(expand);\n } else if (elem && elem.childNodes.length > 1) {\n elem.appendChild(document.createTextNode(' \\u276F '));\n }\n if (elem) {\n elem.appendChild(child);\n\n // calculate hide\n elem.style.width = null;\n if (elem.childNodes.length === 1) {\n elem.setAttribute('data-start-width', elem.getBoundingClientRect().width.toString());\n } else {\n elem.setAttribute('data-full-width', elem.getBoundingClientRect().width.toString());\n elem.style.width = parseInt(elem.getAttribute('data-start-width')) + 16 + 'px';\n }\n }\n el = el.parent;\n }\n },\n [context.editorCatalogue.components, context.schema, context.state, ele, element]\n );\n\n const onMouseOut = React.useCallback((e: React.MouseEvent) => {\n out = true;\n controls = [];\n e.currentTarget.classList.remove('on');\n // e.currentTarget.classList.remove(overStyle);\n startTimer();\n }, []);\n\n const newProps = React.useMemo(\n () => ({\n ...props.extra,\n onClick,\n onMouseOver,\n onMouseOut\n }),\n [onClick, onMouseOut, onMouseOver, props.extra]\n );\n\n if (!element || element.uid == null) {\n return undefined;\n }\n\n return newProps;\n}\n","import * as React from 'react';\n\nimport { ImageProps, Link, TextView, TextProps, ImageView, LinkSelectorView } from './text_view';\nimport { FormComponentProps, EditorComponent } from '@tomino/dynamic-form';\nimport { observer } from 'mobx-react';\nimport { propGroup, prop, boundProp } from '../editor/editor_common';\nimport { getValue } from '../helpers';\nimport { Context } from '../context';\nimport { DynamicComponent } from '../wrapper';\n\n/* =========================================================\n Text\n ======================================================== */\n\nconst TextEditorComponent: React.FC> = observer(props => {\n const context = React.useContext(Context);\n if (!getValue(props, context)) {\n return [Text];\n }\n return ;\n});\n\nexport const TextEditor: EditorComponent = {\n Component: observer(TextEditorComponent),\n title: 'Text',\n control: 'Text',\n icon: 'font',\n props: propGroup('Text', {\n value: boundProp({\n props: { label: '', display: 'padded' },\n control: 'Textarea'\n })\n })\n};\n\n/* =========================================================\n IMAGE\n ======================================================== */\n\nconst ImageEditorComponent = observer((props: FormComponentProps) => {\n let context = React.useContext(Context);\n let src = getValue(props, context, 'src');\n if (!src) {\n return [Image];\n }\n return ;\n});\n\nImageEditorComponent.displayName = 'ImageEditor';\n\nexport const ImageEditor: EditorComponent = {\n Component: observer(ImageEditorComponent),\n title: 'Image',\n control: 'Image',\n icon: 'image outline',\n props: propGroup('Image', {\n alt: boundProp({\n props: { label: 'Alternative Text' }\n }),\n src: boundProp(),\n imageWidth: boundProp(),\n imageHeight: boundProp()\n })\n};\n\n/* =========================================================\n Link\n ======================================================== */\n\nexport const LinkEditor: EditorComponent = {\n Component: observer(Link),\n title: 'Link',\n control: 'Link',\n icon: 'anchor',\n props: propGroup('Link', {\n url: {\n control: {\n props: { label: 'Url' },\n documentation:\n 'You can interpolate values using \"${}\" notation. For example \"This is my ${name}\", where name is a value from the dataset.'\n },\n schema: { type: 'string' }\n },\n text: {\n control: {\n props: { label: 'Text' },\n documentation:\n 'You can interpolate values using \"${}\" notation. For example \"This is my ${name}\", where name is a value from the dataset.'\n },\n schema: { type: 'string' }\n }\n })\n};\n\n/* =========================================================\n Link Selector\n ======================================================== */\n\nexport const LinkSelectorEditor: EditorComponent = {\n Component: LinkSelectorView.Component,\n title: 'Selector',\n control: 'LinkSelector',\n icon: 'anchor',\n props: {\n ...propGroup('Selector', {\n text: prop({ control: 'Textarea' }),\n source: boundProp({\n documentation:\n 'This value is stored to the target. You do not have to specify this and use \"source\", where the value from \"source\" will be stored in the \"target\"'\n }),\n target: boundProp({\n documentation: 'Dataset path to store the value'\n })\n })\n }\n};\n","import * as React from 'react';\nimport { FormComponentProps, FormComponent, BoundProp } from '@tomino/dynamic-form';\nimport { css, pointer, tryInterpolate, getValue, DynamicControl, sourceValue } from '../common';\nimport { observer } from 'mobx-react';\nimport { Context } from '../context';\nimport { EditorContext } from '../editor/editor_context';\n\nconst formText = css`\n margin-top: 20px;\n label: formText;\n`;\n\n/* =========================================================\n Text\n ======================================================== */\n\nexport type TextProps = {\n value: string;\n text: string;\n inline: boolean;\n};\n\nexport const TextComponent: React.FC> = props => {\n const context = React.useContext(EditorContext);\n const text = getValue(props, context, 'value');\n const inline = getValue(props, context, 'inline');\n\n let parsedText = '';\n try {\n parsedText = tryInterpolate(text, props.owner);\n } catch (ex) {\n parsedText = 'Error: ' + ex.message;\n }\n return (\n \n );\n};\n\nexport const TextView: FormComponent = {\n Component: TextComponent,\n toString: f => f.props.text\n};\n\n/* =========================================================\n Image\n ======================================================== */\n\nexport type ImageProps = {\n text?: string;\n src?: string;\n imageWidth?: string;\n imageHeight?: string;\n};\n\nconst imageProps = ['alt', 'src'];\n\nexport const Image: React.FC> = props => {\n const context = React.useContext(Context);\n return (\n \n );\n};\n\nImage.displayName = 'Image';\n\nexport const ImageView: FormComponent = {\n Component: Image,\n toString: formElement => formElement.props.url\n};\n\n/* =========================================================\n LINK\n ======================================================== */\n\nexport type LinkProps = {\n text: string;\n url: string;\n};\n\nexport const Link: React.FC> = props => {\n const {\n owner,\n formElement: {\n props: { text, url }\n }\n } = props;\n return (\n \n {tryInterpolate(text, owner) || '[Link]'}\n \n );\n};\n\nexport const LinkView: FormComponent = {\n Component: Link,\n toString: (owner, { formElement }) => {\n return `[${formElement.props.url}] ${tryInterpolate(formElement.props.url, owner)}`;\n }\n};\n\n/* =========================================================\n LINK SELECTOR\n ======================================================== */\n\nexport type LinkSelectorProps = {\n text: string;\n target: BoundProp;\n source: BoundProp;\n};\n\nexport const LinkSelectorComponent: React.FC> = props => {\n const { formElement, owner } = props;\n const { text, target } = formElement.props;\n const context = React.useContext(Context);\n const onClick = React.useCallback(\n () => owner.setValue(sourceValue(target), getValue(props, context, 'source')),\n [context, owner, props, target]\n );\n return (\n \n {tryInterpolate(text, owner)}\n \n );\n};\n\nexport const LinkSelectorView: FormComponent = {\n Component: observer(LinkSelectorComponent),\n toString: (owner, props, context) => {\n return tryInterpolate(getValue(props, context), owner);\n }\n};\n","import * as React from 'react';\n\nimport { FormComponentProps, EditorComponent } from '@tomino/dynamic-form';\n\nimport { observer } from 'mobx-react';\nimport { GridChildProps, GridProps, GridView } from './grid_view';\nimport { DropCellProps, DropCell } from '../editor/form/editor_cell';\nimport { adjustPosition } from '../editor/editor_helpers';\nimport { propGroup, boundProp } from '../editor/editor_common';\nimport { LayoutProps, generateEmptyCells } from '../editor/layouts_common_editor';\nimport { EditorContextType, EditorContext } from '../editor/editor_context';\nimport { DynamicComponent } from '../wrapper';\nimport { showHandles, timeHideHandles } from '../editor/drag_drop_boundary';\n\nfunction drop(_e: React.DragEvent, props: DropCellProps, context: EditorContextType): boolean {\n const item = context.dragItem;\n context.dragItem = null;\n\n let sourceElement = item.element;\n let targetElement = props.formElement;\n\n // OPTION 1: We are dropping on the existing element\n if (targetElement && targetElement.control !== 'EditorCell') {\n return false;\n }\n\n // OPTION 2: We are dropping existing element on empty cell\n else if (sourceElement) {\n const column = adjustPosition(\n props,\n context,\n item.position,\n sourceElement,\n props.formElement,\n props.parentFormElement\n // false\n );\n // const column = props.formElement.props.column;\n if (column === -1) {\n return false;\n }\n sourceElement.props.setValue('row', props.formElement.props.row);\n sourceElement.props.setValue('column', column);\n // we can grab by left part or right part\n }\n // OPTION 3: We are dropping new item on empty cell\n else {\n let width = sourceElement ? sourceElement.width : 1;\n props.parentFormElement.addRow('elements', {\n label: item.label || '',\n props: {\n ...item.controlProps,\n control: item.name,\n row: props.formElement.props.row,\n column: props.formElement.props.column,\n width\n },\n control: item.name,\n source: item.source,\n elements: item.defaultChildren\n });\n sourceElement = props.parentFormElement.elements[props.parentFormElement.elements.length - 1];\n }\n return false;\n}\n\nconst EditorCell = (props: DropCellProps) => {\n return (\n \n );\n};\n\nexport const GridEditorComponent: React.FC<\n FormComponentProps & LayoutProps\n> = props => {\n const context = React.useContext(EditorContext);\n const controls = generateEmptyCells(context, props, props.formElement, 'EditorCell');\n\n // we replace the form element with the new one\n return (\n \n \n \n );\n};\n\nexport const GridEditor: EditorComponent = {\n Component: observer(GridEditorComponent),\n control: 'Grid',\n icon: 'grid layout',\n title: 'Grid',\n group: 'Layout',\n defaultProps: {\n rows: 1,\n columns: 1,\n gap: '6px'\n },\n childProps: propGroup('Layout', {\n row: boundProp(\n {\n documentation: 'Row of the grid (1 ..)',\n props: { inputLabel: 'row' },\n tuple: 'Position',\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n ),\n column: boundProp(\n {\n documentation: 'Column of the grid (1 ..)',\n props: { inputLabel: 'col' },\n tuple: 'Position',\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n ),\n width: boundProp(\n {\n documentation: 'Width of the control in number of grid cells.',\n tuple: 'Dimension',\n props: { inputLabel: 'w' },\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n ),\n height: boundProp(\n {\n documentation: 'Height of the control in number of grid cells.',\n tuple: 'Dimension',\n props: { inputLabel: 'h' },\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n )\n }),\n props: {\n ...propGroup('Grid', {\n alignItems: boundProp({\n control: 'Select',\n documentation: `Aligns grid items vertically.
\n \n - Start (default): items are packed toward the top
\n - End: items are packed toward the bottom
\n - Center: items are centered
\n - Stretch: items fill the whole height of the cell/li>\n
\n Information taken from this guide for more details`,\n group: 'Basic',\n type: 'string',\n $enum: [\n { text: 'Start', value: 'flex-start' },\n { text: 'End', value: 'flex-end' },\n { text: 'Center', value: 'center' },\n { text: 'Stretch', value: 'stretch' }\n ]\n }),\n gap: boundProp({\n control: 'Select',\n documentation: 'Spacing between cells',\n group: 'Basic',\n $enum: [\n {\n text: 'None',\n value: '0px'\n },\n {\n text: 'Tiny',\n value: '3px'\n },\n {\n text: 'Small',\n value: '6px'\n },\n {\n text: 'Normal',\n value: '12px'\n },\n {\n text: 'Big',\n value: '18px'\n },\n {\n text: 'Huge',\n value: '24px'\n }\n ],\n type: 'string'\n }),\n justifyItems: boundProp({\n control: 'Select',\n documentation: `Aligns grid items horizontally.
\n \n - Start (default): items are packed toward the start line
\n - End: items are packed toward the end line
\n - Center: items are centered along the line
\n - Stretch: items fill the whole width of the cell/li>\n
\n Information taken from this guide for more details`,\n group: 'Basic',\n type: 'string',\n $enum: [\n { text: 'Start', value: 'flex-start' },\n { text: 'End', value: 'flex-end' },\n { text: 'Center', value: 'center' },\n { text: 'Stretch', value: 'stretch' }\n ],\n props: { label: 'Justify Content' }\n })\n }),\n rows: boundProp(\n {\n documentation: 'Number of grid rows',\n group: 'Dimensions',\n props: {\n inputLabel: 'rows'\n },\n tuple: 'Size',\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n ),\n columns: boundProp(\n {\n documentation: 'Number of grid columns',\n group: 'Dimensions',\n props: {\n inputLabel: 'cols'\n },\n tuple: 'Size',\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n ),\n rowSize: boundProp({\n documentation: 'Default height of extra rows (e.g. 100px)',\n group: 'Dimensions',\n props: {\n inputLabel: 'rows'\n },\n tuple: 'Width',\n type: 'number'\n }),\n columnSize: boundProp({\n documentation: 'Default width of extra columns (e.g. 100px)',\n group: 'Dimensions',\n props: {\n inputLabel: 'cols'\n },\n tuple: 'Width',\n type: 'number'\n }),\n templateRows: boundProp({\n documentation: `Row Template. For example: \n 10px auto 1fr
will define a grid with three rows. \n First row will be 10px high. Second row will automatically adjust its height. \n And third column will fill the visible height.`,\n group: 'Templates',\n props: { label: 'Rows' },\n type: 'number'\n }),\n templateColumns: boundProp({\n documentation: `Column template. For example: \n 10px auto 1fr
will define a grid with three columns. \n First columns will be 10px wide. Second column will automatically adjust its size. \n And third column will fill the visible width.`,\n group: 'Templates',\n props: { label: 'Column' },\n type: 'number'\n }),\n rowsReadOnly: boundProp(\n {\n documentation: 'Number of grid rows in read only mode',\n group: 'Read-Only',\n props: {\n inputLabel: 'rows'\n },\n tuple: 'Size',\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n ),\n columnsReadOnly: boundProp(\n {\n documentation: 'Number of grid columns in read only mode',\n group: 'Read-Only',\n props: {\n inputLabel: 'cols'\n },\n tuple: 'Size',\n type: 'number'\n },\n 'ValueSourceHandler',\n 'number'\n ),\n templateRowsReadOnly: boundProp({\n documentation: 'Row template for read only mode (e.g. 10px auto 1fr)',\n group: 'Read-Only',\n props: { label: 'Row Template' },\n type: 'number'\n }),\n templateColumnsReadOnly: boundProp({\n documentation: 'Column template for read only mode (e.g. 10px auto 1fr)',\n group: 'Read-Only',\n props: { label: 'Column Template' },\n type: 'number'\n })\n }\n};\n","import * as React from 'react';\n\nimport { FormElement, FormComponentProps, FormComponent } from '@tomino/dynamic-form';\n\nimport { css } from '../common';\nimport { observer } from 'mobx-react';\nimport { processControls } from './layouts_common';\nimport { DynamicComponent } from '../wrapper';\nimport { BoundProp } from '@tomino/dynamic-form';\nimport { ContextType, Context } from '../context';\nimport { getValue, getPropValue } from '../helpers';\n\nexport const grid = css`\n display: grid;\n position: relative;\n`;\n\nexport type Props = {\n EditorCell?: React.ComponentType;\n controls?: FormElement[];\n};\n\nexport type GridProps = {\n rows?: BoundProp;\n rowsReadOnly?: BoundProp;\n templateRows?: BoundProp;\n templateRowsReadOnly?: BoundProp;\n columns?: BoundProp;\n columnsReadOnly?: BoundProp;\n templateColumns?: BoundProp;\n templateColumnsReadOnly?: BoundProp;\n columnSize?: BoundProp;\n rowSize?: BoundProp;\n alignItems?: BoundProp;\n justifyItems?: BoundProp;\n gap?: BoundProp;\n};\n\nexport type GridChildProps = {\n width?: BoundProp;\n height?: BoundProp;\n row?: BoundProp;\n column?: BoundProp;\n justifySelf?: BoundProp;\n alignSelf?: BoundProp;\n};\n\nexport function sortGrid(context: ContextType, props: FormComponentProps) {\n return function(a: FormElement, b: FormElement) {\n return getPropValue(props, a, context, 'row') < getPropValue(props, b, context, 'row')\n ? -1\n : getPropValue(props, a, context, 'row') > getPropValue(props, b, context, 'row')\n ? 1\n : getPropValue(props, a, context, 'column') < getPropValue(props, b, context, 'column')\n ? -1\n : 1;\n };\n}\n\nexport function createColumnStyles(\n props: FormComponentProps,\n formElement: FormElement,\n context: ContextType\n) {\n return {\n gridColumn: `${getPropValue(props, formElement, context, 'column')} / span ${getPropValue(\n props,\n formElement,\n context,\n 'width',\n 1\n )}`,\n gridRow: `${getPropValue(props, formElement, context, 'row')} / span ${getPropValue(\n props,\n formElement,\n context,\n 'height'\n ) || 1}`,\n justifySelf: getPropValue(props, formElement, context, 'justifySelf'),\n alignSelf: getPropValue(props, formElement, context, 'alignSelf')\n };\n}\n\nexport function createGridStyles(\n props: FormComponentProps,\n context: ContextType,\n readOnly: boolean\n) {\n let gridTemplateColumns = (readOnly && getValue(props, context, 'templateColumnsReadOnly')\n ? getValue(props, context, 'templateColumnsReadOnly')\n : getValue(props, context, 'templateColumns')\n ? getValue(props, context, 'templateColumns')\n : `repeat(${\n readOnly && getValue(props, context, 'columnsReadOnly')\n ? getValue(props, context, 'columnsReadOnly')\n : getValue(props, context, 'columns', 1)\n }, 1fr)`) as string;\n\n let gridTemplateRows = (readOnly && getValue(props, context, 'templateRowsReadOnly')\n ? getValue(props, context, 'templateRowsReadOnly')\n : getValue(props, context, 'templateRows')\n ? getValue(props, context, 'templateRows')\n : `repeat(${\n readOnly && getValue(props, context, 'rowsReadOnly')\n ? getValue(props, context, 'rowsReadOnly')\n : getValue(props, context, 'rows') || 1\n }, auto)`) as string;\n\n return {\n gridTemplateColumns,\n gridTemplateRows,\n gridAutoColumns: getValue(props, context, 'columnSize') || '20px',\n gridAutoRows: getValue(props, context, 'rowSize') || '20px',\n alignItems: getValue(props, context, 'alignItems'),\n justifyItems: getValue(props, context, 'justifyItems'),\n gridGap: getValue(props, context, 'gap')\n };\n}\n\nexport const Grid: React.FC & Props> = props => {\n const controls: FormElement[] = processControls(props);\n const { EditorCell, className, ...rest } = props;\n const context = React.useContext(Context);\n return (\n \n {(props.controls || controls).map((element, i) =>\n EditorCell ? (\n \n {props.catalogue.createComponent(props, element, context)}\n \n ) : (\n \n {props.catalogue.createComponent(props, element, context)}\n
\n )\n )}\n \n );\n};\n\nexport const GridView: FormComponent = {\n Component: observer(Grid),\n toString(owner, props, context) {\n const sort = sortGrid(context, props);\n let sorted = props.formElement.elements.sort(sort);\n return sorted\n .map(s => props.catalogue.components[s.control].toString(owner, props, context))\n .join('\\n');\n }\n};\n","// import React from 'react';\n\nimport { FormComponentProps } from '@tomino/dynamic-form';\n\n// import { css } from '../common';\n// import { Icon } from 'semantic-ui-react';\n// import { observer } from 'mobx-react';\n\nexport function processControls(props: FormComponentProps) {\n // filter out what we do not need\n let controls = props.readOnly\n ? props.formElement.elements.filter(e => e.control.indexOf('Button') === -1)\n : props.formElement.elements;\n\n // generate empty cells if requires\n return controls;\n}\n\n// const handle = css`\n// padding-left: 1px;\n// opacity: 0.8;\n// width: 20px;\n// position: absolute;\n// color: #777;\n// border: 1px solid #777;\n// border-radius: 3px;\n// left: -10px;\n// background: #ddd;\n// display: none;\n// label: handle;\n// `;\n\n// export const Handle = observer((props: any) => (\n// \n// \n// \n// ));\n\n// Handle.displayName = 'Handle';\n","import { action } from 'mobx';\nimport { findConflict } from './editor_helpers';\nimport { FormDataSet } from './form_store';\nimport { GridChildProps } from '../layouts/grid_view';\nimport { FormComponentProps, DataSet } from '@tomino/dynamic-form';\nimport { css } from '../common';\nimport { getPropValue, setPropValue } from '../helpers';\nimport { EditorContextType } from './editor_context';\n\nconst handle = css`\n width: 8px;\n height: 8px;\n position: absolute;\n left: -100px;\n top: -100px;\n background-color: #aaa;\n border: solid 1px #222;\n cursor: ew-resize;\n label: handle;\n`;\n\nlet leftHandle: HTMLDivElement;\nlet rightHandle: HTMLDivElement;\nlet hideTimeout: any;\nlet hiding = false;\n\nexport function timeHideHandles() {\n // console.log(' wait hiding');\n hideTimeout = setTimeout(hideHandles, 10);\n}\n\nfunction createHandle() {\n const resizeHandle = document.createElement('div');\n resizeHandle.draggable = true;\n resizeHandle.className = handle;\n resizeHandle.onmouseover = () => clearTimeout(hideTimeout);\n resizeHandle.onmouseout = timeHideHandles;\n document.body.appendChild(resizeHandle);\n return resizeHandle;\n}\n\nexport function showHandles(\n e: React.MouseEvent,\n props: FormComponentProps,\n context: EditorContextType\n) {\n if (!leftHandle) {\n leftHandle = createHandle();\n rightHandle = createHandle();\n }\n if (hiding) {\n return;\n }\n if (props.formElement.control !== 'EditorCell') {\n clearTimeout(hideTimeout);\n\n let rect = (e.currentTarget.childNodes[0] as HTMLDivElement).getBoundingClientRect();\n leftHandle.style.left = rect.left - 4 + window.scrollX + 'px';\n leftHandle.style.top = rect.top + rect.height / 2 + window.scrollY - 4 + 'px';\n rightHandle.style.left = rect.left + rect.width - 4 + window.scrollX + 'px';\n rightHandle.style.top = rect.top + rect.height / 2 + window.scrollY - 4 + 'px';\n\n const target = e.currentTarget as HTMLDivElement;\n\n leftHandle.ondragstart = ev =>\n dragElement(ev, props, context, target, props.formElement as any, 'left');\n leftHandle.setAttribute('data-row', props.formElement.props.row);\n leftHandle.setAttribute('data-column', props.formElement.props.column);\n\n rightHandle.ondragstart = ev =>\n dragElement(ev, props, context, target, props.formElement as any, 'right');\n rightHandle.setAttribute('data-row', props.formElement.props.row);\n rightHandle.setAttribute('data-column', props.formElement.props.column);\n }\n}\n\nfunction hideHandles() {\n // console.log('hiding');\n if (leftHandle) {\n rightHandle.style.left = '-100px';\n leftHandle.style.top = '-100px';\n }\n return true;\n}\n\nexport function dragElement(\n e: DragEvent,\n props: FormComponentProps,\n context: EditorContextType,\n target: HTMLDivElement,\n element: FormDataSet,\n direction: 'left' | 'right'\n) {\n // let widthPx = 0;\n e.preventDefault();\n e.stopPropagation();\n\n hiding = true;\n hideHandles();\n\n let formWidth = getPropValue(props, element, context, 'width');\n\n // create a clone of the currentTarget element\n // const form = document.querySelector('#editorForm');\n // const sibling = (direction === 'left'\n // ? e.currentTarget.nextSibling\n // : e.currentTarget.previousSibling) as HTMLDivElement;\n\n const clone = target.cloneNode(true) as HTMLDivElement;\n\n // console.log(clone.className);\n\n target.classList.remove('content');\n target.style.opacity = '0.1';\n\n const rect = target.getBoundingClientRect();\n //const parentRect = sibling.parentElement.parentElement.getBoundingClientRect();\n\n let originalX = direction === 'left' ? rect.left : rect.right;\n let clientWidth = rect.width;\n let widthDivision = clientWidth / formWidth;\n let newWidth = Math.floor(clientWidth / widthDivision);\n\n // used in validation\n let cells = element.parent.elements.filter(\n e => e.props.row === element.props.row && e !== element\n );\n\n // insert the clone to the page\n // TODO: position the clone appropriately\n document.body.appendChild(clone);\n\n clone.style.outline = 'dotted 3px blue';\n clone.style.outlineOffset = '-1px';\n clone.style.backgroundColor = 'white';\n clone.style.position = 'absolute';\n clone.style.top = rect.top + window.scrollY + 'px';\n clone.style.left = rect.left + window.scrollX + 'px';\n clone.style.width = rect.width + 'px';\n clone.style.height = rect.height + 'px';\n\n const closeDragElement = action(() => {\n /* stop moving when mouse button is released:*/\n document.onmouseup = null;\n document.onmousemove = null;\n\n if (validateDrag() && newFormWidth() > 0) {\n setPropValue(props, element.props as DataSet, context, newColumn(), 'column');\n setPropValue(props, element.props as DataSet, context, newFormWidth(), 'width');\n }\n\n //sibling.classList.add('content');\n target.style.opacity = '1';\n document.body.removeChild(clone);\n hiding = false;\n });\n\n e = e || (window.event as any);\n // get the mouse cursor position at startup:\n document.onmouseup = closeDragElement;\n // call a function whenever the cursor moves:\n document.onmousemove = elementDrag;\n\n function newFormWidth() {\n return Math.ceil(newWidth / widthDivision);\n }\n\n function newColumn() {\n const col = getPropValue(props, element, context, 'column');\n const width = getPropValue(props, element, context, 'width');\n return direction === 'left' ? col - (newFormWidth() - width) : col;\n }\n\n function validateDrag() {\n // try one adjustment moving the item left or right from the conflict cell\n // console.log(`${newColumn()}`);\n\n return !findConflict(props, context, cells, newColumn(), newColumn() + newFormWidth() - 1);\n }\n\n function elementDrag(e: MouseEvent) {\n e = e || (window.event as any);\n e.preventDefault();\n\n if (direction === 'left') {\n // set the element's new position:\n newWidth = originalX - e.clientX + clientWidth;\n if (validateDrag()) {\n clone.style.width = newWidth + 'px';\n clone.style.left = e.clientX - 2 + 'px'; // clone.offsetLeft - pos1 + 'px';\n }\n } else {\n newWidth = e.clientX - originalX + clientWidth;\n if (validateDrag()) {\n clone.style.width = newWidth + 'px';\n }\n }\n }\n}\n","import React from 'react';\nimport { EditorComponent, FormComponentProps } from '@tomino/dynamic-form';\n\nimport { propGroup, prop, gapProp } from '../editor/editor_common';\nimport { StackView, StackProps } from './stack_view';\nimport { DropComponentEditor } from '../editor/droppable_editor';\n\nexport const StackEditorComponent: React.FC> = props => (\n \n);\n\nexport const StackEditor: EditorComponent = {\n Component: StackEditorComponent,\n control: 'Stack',\n icon: 'align justify',\n title: 'Stack Layout',\n group: 'Layout',\n defaultProps: {\n layout: 'column'\n },\n props: propGroup('Stack', {\n layout: prop({\n documentation: 'Items can either be stacked in rows or columns',\n label: 'Layout',\n control: 'Select',\n type: 'string',\n $enum: [{ text: 'Rows', value: 'row' }, { text: 'Columns', value: 'column' }]\n }),\n final: prop({\n type: 'boolean',\n documentation:\n 'Prohibits adding new elements to the stack. This is used mostly in editor for visual appeal.'\n }),\n gap: gapProp({\n documentation: 'Spacing between cells'\n }),\n padding: gapProp({\n documentation: 'Cell padding',\n label: 'Padding'\n })\n })\n};\n","import * as React from 'react';\n\nimport { FormComponentProps, FormComponent, FormElement } from '@tomino/dynamic-form';\n\nimport { css } from '../common';\nimport { observer } from 'mobx-react';\nimport { processControls } from './layouts_common';\nimport { DynamicComponent } from '../wrapper';\nimport { Context } from '../context';\n\nexport type Props = {\n EmptyCell?: React.FC;\n};\n\nexport type StackProps = {\n layout: 'row' | 'column';\n gap: string;\n padding: string;\n final: boolean;\n};\n\nexport type StackChildProps = {};\n\nexport function itemCSS(formElement: FormElement, layout: 'column' | 'row') {\n let itemCSS =\n layout === 'row' ||\n (formElement.props.padding && formElement.props.padding != '0px') ||\n (formElement.props.gap && formElement.props.gap != '0px')\n ? `padding: ${formElement.props.padding}; \n margin: ${formElement.props.gap};\n display: ${layout === 'row' ? 'inline-block' : 'block'};\n :first-of-type label,\n :first-of-type {\n margin-top: 0px;\n padding-top: 0px;\n }\n label: item-${layout};\n `\n : '';\n return itemCSS ? css([itemCSS]) : '';\n}\n\nconst StackComponent: React.FC & Props> = props => {\n const context = React.useContext(Context);\n const controls = processControls(props) || [];\n const itemsCss = itemCSS(props.formElement, props.formElement.props.layout);\n\n return (\n <>\n \n {controls.map((element, i) =>\n itemsCss ? (\n \n {props.catalogue.createComponent(props, element, context, null)}\n
\n ) : (\n \n {props.catalogue.createComponent(props, element, context, itemsCss)}\n \n )\n )}\n \n {props.formElement.elements.length === 0 && props.EmptyCell && (\n \n )}\n \n );\n};\n\nexport const StackView: FormComponent = {\n Component: observer(StackComponent),\n toString(owner, props, catalogue) {\n return props.formElement.elements\n .map(s => catalogue.components[s.control].toString(s, owner, catalogue))\n .join('\\n');\n }\n};\n","import React from 'react';\nimport { FormComponentProps } from '@tomino/dynamic-form';\n\nimport { css, names } from '../common';\nimport { EditorContext } from './editor_context';\nimport { FormDataSet } from './form_store';\nimport { DragDrop } from '../layouts/drag_drop';\nimport { SingleDropCell } from './layouts_common_editor';\nimport { processor } from './editor_common';\nimport { dragDropHandler } from './drag_drop_form_control';\n\nconst extraPad = css`\n padding-top: 1px;\n`;\n\ntype Props = {\n Component: React.ComponentType;\n layout: 'row' | 'column';\n};\n\nexport const DropComponentEditor: React.FC & Props> = props => {\n const context = React.useContext(EditorContext);\n\n const dropHandler = React.useCallback(\n dragDropHandler(context, props.formElement as FormDataSet),\n [context.dragItem, props.formElement]\n );\n\n const drag = React.useMemo(\n () =>\n new DragDrop(\n props.layout,\n props.formElement as FormDataSet,\n processor,\n `color: ${context.theme.textColor}!important;`,\n 'editor',\n dropHandler,\n null,\n false,\n 35,\n context\n ),\n [context, dropHandler, props.formElement, props.layout]\n );\n\n return (\n (\n \n )}\n />\n );\n};\n","import { EditorContextType } from './editor_context';\nimport { FormDataSet } from './form_store';\nimport { toJS } from '../common';\n\nexport function dragEndHandler(context: EditorContextType) {\n return function() {\n let item = context.dragItem;\n if (item && item.node) {\n item.node.style.visibility = 'visible';\n item.node.style.height = 'inherit';\n }\n context.dragItem = null;\n };\n}\n\nexport function dragDropHandler(context: EditorContextType, item: FormDataSet) {\n return function(to: number, position: string) {\n const dragItem = context.dragItem;\n if (dragItem === null) {\n return;\n }\n\n // we either move existing element\n // or we drag element from toolbox\n if (dragItem.type === 'outline') {\n const fromItem = dragItem.element as FormDataSet;\n const toItem = item.elements[to];\n const fromRow = toJS(fromItem.elements[dragItem.from]);\n\n fromItem.removeRow('elements', dragItem.from);\n to = item.elements.indexOf(toItem);\n to = to == -1 ? item.elements.length : to;\n\n if (position === 'middle') {\n toItem.addRow('elements', fromRow);\n dragItem.drag.initialised = false;\n } else {\n console.log('Inserting to: ' + to);\n item.insertRow('elements', to, fromRow);\n dragItem.drag.initialised = false;\n }\n } else {\n let control = dragItem.name;\n let value = undefined;\n let label = undefined;\n\n if (dragItem.type === 'dataset') {\n control = dragItem.schema.type === 'boolean' ? 'Checkbox' : 'Input';\n value = {\n source: dragItem.name\n };\n label = dragItem.name;\n\n dragItem.target.style.visibility = 'visible';\n dragItem.target.style.height = 'inherit';\n }\n const newItem = {\n label: dragItem.label || '',\n props: {\n ...dragItem.controlProps,\n control: control,\n value,\n label\n },\n control: control,\n elements: dragItem.defaultChildren\n };\n if (position === 'middle') {\n const toItem = item.elements[to];\n toItem.addRow('elements', newItem);\n } else {\n item.insertRow('elements', to, newItem);\n }\n }\n };\n}\n","import React from 'react';\n\nimport { EditorComponent, FormComponentProps } from '@tomino/dynamic-form';\n\nimport { FormView } from './form_view';\nimport { propGroup, handlerProp } from './editor/editor_common';\nimport { SingleDropCell } from './editor/layouts_common_editor';\nimport { DynamicComponent } from './wrapper';\nimport { observer } from 'mobx-react';\n\nexport type FormProps = {\n text: string;\n};\n\nexport const FormEditorComponent: React.FC = props => {\n if (props.formElement.elements.length === 0) {\n return (\n \n \n \n );\n } else return ;\n};\n\nexport const FormEditor: EditorComponent = {\n Component: observer(FormEditorComponent),\n title: 'Form',\n control: 'Form',\n icon: 'file outline',\n valueProvider: 'value',\n props: propGroup('Form Editor', {\n onCreate: handlerProp()\n })\n};\n","import React from 'react';\nimport { EditorComponent, FormComponentProps } from '@tomino/dynamic-form';\n\nimport { AuthItem, AuthItemProps } from './auth_item_view';\nimport { prop, propGroup } from '../editor/editor_common';\nimport { observer } from 'mobx-react';\nimport { createComponents } from '../common';\n\n// export const AuthItemEditorComponent: React.FC> = observer(\n// props => {\n// return (\n// \n// );\n// }\n// );\n\nexport const AuthItemEditorComponent: React.FC> = observer(\n props =>\n props.formElement.props.disable ? <>{createComponents(props)} : \n);\n\nAuthItemEditorComponent.displayName = 'ApolloProviderEditor';\n\nexport const AuthItemEditor: EditorComponent = {\n provider: true,\n Component: AuthItemEditorComponent,\n title: 'Auth Item',\n control: 'AuthItem',\n icon: 'lock',\n group: 'Auth',\n props: propGroup('Auth', {\n roles: prop({\n control: 'Table',\n props: { text: 'Roles' },\n type: 'array',\n elements: [\n {\n control: 'Input'\n }\n ],\n items: { type: 'string' }\n }),\n disable: {\n control: {\n documentation: 'This is useful during testing when a mocked provider can be used instead.',\n props: { label: 'Disable' },\n group: 'Auth',\n control: 'Checkbox'\n },\n schema: { type: 'boolean' }\n }\n })\n};\n","import * as React from 'react';\n\nimport { createComponents } from '../common';\nimport { FormComponentProps } from '@tomino/dynamic-form';\nimport { Context } from '../context';\nimport { observer } from 'mobx-react';\n\nexport type AuthItemProps = {\n roles: string[];\n disable: boolean;\n};\n\nexport const AuthItem: React.FC> = observer(props => {\n const ctx = React.useContext(Context);\n const { roles } = props.formElement.props;\n if (\n !ctx.auth.user ||\n !ctx.auth.user.id ||\n (roles && roles.length && roles.every(r => !ctx.auth.user.roles.some(u => u === r)))\n ) {\n return null;\n }\n return <>{createComponents(props)};\n // return (\n // \n // {createComponents(props)}\n // \n // );\n});\n","import React from 'react';\nimport { FormComponentProps, EditorComponent } from '@tomino/dynamic-form';\n\nimport { propGroup, boundProp } from '../editor/editor_common';\nimport { FlexView, FlexProps } from './flex_view';\nimport { DropComponentEditor } from '../editor/droppable_editor';\n\nexport const FlexEditorComponent: React.FC> = props => (\n \n);\n\nexport const FlexEditor: EditorComponent = {\n Component: FlexEditorComponent,\n control: 'Flex',\n icon: 'align justify',\n title: 'Flex Layout',\n group: 'Layout',\n defaultProps: {\n layout: 'column'\n },\n props: propGroup('Flex', {\n layout: boundProp({\n documentation: 'Items can either be stacked in rows or columns',\n label: 'Layout',\n type: 'string',\n $enum: [{ text: 'Rows', value: 'row' }, { text: 'Columns', value: 'column' }]\n }),\n gap: boundProp({\n documentation: 'Spacing between cells',\n label: 'Gap',\n control: 'Select',\n type: 'string',\n $enum: [\n { text: 'None', value: '0px' },\n { text: 'Tiny', value: '3px' },\n { text: 'Small', value: '6px' },\n { text: 'Normal', value: '12px' },\n { text: 'Big', value: '18px' },\n { text: 'Huge', value: '24px' }\n ]\n }),\n wrap: boundProp({\n documentation: 'Items can wrap if no space remains',\n label: 'Wrap',\n control: 'Select',\n type: 'string',\n $enum: [\n { text: 'Wrap', value: 'wrap' },\n { text: 'No Wrap', value: 'no-wrap' },\n { text: 'Reverse Wrap', value: 'wrap-reverse' }\n ]\n }),\n justifyContent: boundProp({\n control: 'Select',\n documentation: `Set how elements are distributed in the container.
\n \n - Start (default): items are packed toward the start line
\n - End: items are packed toward the end line
\n - Center: items are centered along the line
\n - Space Between: items are evenly distributed in the line; first item is on the start line, last item on the end line
\n - Space Around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
\n - Space Evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
\n
\n Information taken from this guide for more details`,\n label: 'Justify',\n\n type: 'string',\n $enum: [\n { text: 'Start', value: 'flex-start' },\n { text: 'End', value: 'flex-end' },\n { text: 'Center', value: 'center' },\n { text: 'Space Between', value: 'space-between' },\n { text: 'Space Around', value: 'space-around' },\n { text: 'Space Evenly', value: 'space-evenly' }\n ]\n }),\n alignItems: boundProp({\n documentation: `This defines the default behavior for how items are laid out along horizontal (column layout) or vertical (row layout) axis.
\n \n - Stretch (default): stretch to fill the container
\n - Start: items are aligned at the beginning of their container
\n - End: items are aligned at the end of their container
\n - Center: items are centered
\n - Baseline: items are aligned based on text position
\n
\n Information taken from this guide for more details`,\n label: 'Align Items',\n type: 'string',\n $enum: [\n { text: 'Stretch', value: 'stretch' },\n { text: 'Start', value: 'flex-start' },\n { text: 'End', value: 'flex-end' },\n { text: 'Center', value: 'center' },\n { text: 'Baseline', value: 'baseline' }\n ]\n }),\n alignContent: boundProp({\n control: 'Select',\n documentation: `This defines the default behavior for how items are laid out along vertical (column layout) or horizontal (row layout) axis.
\n \n - Start: lines packed to the start of the container
\n - End: lines packed to the end of the container
\n - Center: lines packed to the center of the container
\n - Space Between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
\n - Space Around: lines evenly distributed with equal space around each line
\n - Stretch (default): lines stretch to take up the remaining space
\n
\n Information taken from this guide for more details`,\n label: 'Align Content',\n type: 'string',\n $enum: [\n { text: 'Start', value: 'flex-start' },\n { text: 'End', value: 'flex-end' },\n { text: 'Center', value: 'center' },\n { text: 'Space Between', value: 'space-between' },\n { text: 'Space Around', value: 'space-around' },\n { text: 'Stretch', value: 'stretch' }\n ]\n })\n }),\n childProps: {\n basis: boundProp({\n group: 'Layout',\n documentation: 'Base width of the item. Value can be in [px, %, auto]',\n label: 'Width',\n type: 'string'\n }),\n grow: boundProp({\n group: 'Layout',\n label: 'Grow',\n documentation:\n 'Ratio to which the item grows in relation to other items. If all items have grow value 1, all grow the same way. If one item has grow value 1 and other 2, the one with value 2 will grow twice as big.',\n type: 'number'\n }),\n shrink: boundProp({\n group: 'Layout',\n documentation:\n 'Ratio to which the item shrinks in relation to other items. If all items have grow value 1, all shrink the same way. If one item has shrink value 1 and other 2, the one with value 2 will shrink twice smaller.',\n label: 'Shrink',\n type: 'number'\n }),\n alignSelf: boundProp({\n group: 'Layout',\n control: 'Select',\n documentation: `This defines the default behavior for how the item is laid out along horizontal (column layout) or vertical (row layout) axis.
\n \n - Stretch (default): stretch to fill the container
\n - Start: items are aligned at the beginning of their container
\n - End: items are aligned at the end of their container
\n - Center: items are centered
\n - Baseline: items are aligned based on text position
\n
\n Information taken from this guide for more details`,\n label: 'Align Item',\n type: 'string',\n $enum: [\n { text: 'Stretch', value: 'stretch' },\n { text: 'Start', value: 'flex-start' },\n { text: 'End', value: 'flex-end' },\n { text: 'Center', value: 'center' },\n { text: 'Baseline', value: 'baseline' }\n ]\n })\n }\n};\n","import * as React from 'react';\n\nimport { FormComponentProps, FormComponent } from '@tomino/dynamic-form';\n\nimport { css } from '../common';\nimport { observer } from 'mobx-react';\nimport { FlexDirectionProperty, FlexWrapProperty } from 'csstype';\nimport { processControls } from './layouts_common';\nimport { DynamicComponent } from '../wrapper';\nimport { Context } from '../context';\n\nexport const stack = css`\n position: relative;\n display: flex;\n label: stack;\n`;\n\n// const sortRow = (a: FormElement, b: FormElement) => (a.column < b.column ? -1 : 1);\nconst containerBasis = {\n display: 'flex'\n};\nexport function createContainerFlexStyle(props: FlexProps): React.CSSProperties {\n if (!props) {\n return containerBasis;\n }\n return {\n ...containerBasis,\n flexWrap: props.wrap,\n flexDirection: props.layout,\n justifyContent: props.justifyContent,\n alignItems: props.alignItems,\n alignContent: props.alignContent\n };\n}\n\nconst itemBasis = {\n flex: 'none'\n};\nexport function createItemFlexStyle(props: FlexChildProps): React.CSSProperties {\n if (!props) {\n return itemBasis;\n }\n return {\n flex: !props.basis && !props.grow && !props.shrink ? 'none' : '',\n flexBasis: props.basis,\n flexGrow: props.grow,\n flexShrink: props.shrink,\n alignSelf: props.alignSelf\n };\n}\n\nexport type Props = {\n EmptyCell?: React.FC;\n};\n\nexport type FlexProps = {\n gap: number;\n wrap: FlexWrapProperty;\n layout: FlexDirectionProperty;\n justifyContent: string;\n alignItems: string;\n alignContent: string;\n};\n\nexport type FlexChildProps = {\n flex: string;\n basis: number;\n grow: number;\n shrink: number;\n alignSelf: string;\n};\n\nconst FlexComponent: React.FC & Props> = props => {\n const context = React.useContext(Context);\n const control = props.formElement;\n const controlProps: FlexProps = control.props;\n const controls = processControls(props);\n const className = css({ padding: controlProps.gap, label: 'gap' });\n\n return (\n \n {controls.map((element, i) => (\n \n {props.catalogue.createComponent(props, element, context)}\n
\n ))}\n {props.formElement.elements.length === 0 && props.EmptyCell && (\n \n )}\n \n );\n};\n\nexport const FlexView: FormComponent = {\n Component: observer(FlexComponent),\n toString(owner, props, context, catalogue) {\n return props.formElement.elements\n .map(s => props.catalogue.components[s.control].toString(owner, props, context, catalogue))\n .join('\\n');\n }\n};\n","import { EditorComponentCatalogue } from '@tomino/dynamic-form';\n\nimport { CheckboxEditor } from './checkbox_editor';\nimport { InputEditor } from './input_editor';\nimport { RadioEditor } from './radio_editor';\nimport { TableEditor } from './table_editor';\nimport { SignatureEditor } from './signature_editor';\nimport { TextAreaEditor } from './textarea_editor';\nimport { CommentEditor } from './comment_editor';\nimport { DropdownEditor } from './dropdown_editor';\nimport { DateEditor } from './date_time_editor';\nimport { ButtonEditor } from './buttons_editor';\nimport { FormEditor } from '../form_editor';\nimport { MenuEditor, MenuItemEditor } from './menu_editor';\nimport { IconEditor } from './icon_editor';\nimport { SegmentEditor } from './segment_editor';\nimport { TabsEditor } from './tab_editor';\nimport { HeaderEditor } from './header_editor';\nimport { IfEditor } from '../vanilla/if_editor';\nimport { SearchEditor } from './search_editor';\n\nexport const catalogueEditor: EditorComponentCatalogue = {\n cssClass: 'ui form',\n components: {\n Button: ButtonEditor,\n Checkbox: CheckboxEditor,\n Comment: CommentEditor,\n Date: DateEditor,\n Dropdown: DropdownEditor,\n Form: FormEditor,\n Header: HeaderEditor,\n Icon: IconEditor,\n If: IfEditor,\n Input: InputEditor,\n Lookup: SearchEditor,\n MenuItem: MenuItemEditor,\n Menu: MenuEditor,\n Radio: RadioEditor,\n // Search: SearchEditor,\n Segment: SegmentEditor,\n Signature: SignatureEditor,\n Table: TableEditor,\n Tabs: TabsEditor,\n Textarea: TextAreaEditor\n }\n};\n","import { EditorComponent } from '@tomino/dynamic-form';\n\nimport { CheckboxView } from './checkbox_view';\nimport { propGroup, boundProp } from '../editor/editor_common';\n\nexport type CheckBoxProps = {\n text: string;\n};\n\nexport const CheckboxEditor: EditorComponent = {\n Component: CheckboxView.Component,\n bound: true,\n title: 'Checkbox',\n control: 'Checkbox',\n icon: 'check square outline',\n props: propGroup('Checkbox', {\n value: boundProp({ type: 'boolean' }),\n text: boundProp(),\n radio: boundProp({ type: 'boolean' }),\n slider: boundProp({ type: 'boolean' }),\n toggle: boundProp({ type: 'boolean' })\n })\n};\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\nimport { Checkbox } from 'semantic-ui-react';\nimport { FormComponentProps, FormComponent } from '@tomino/dynamic-form';\n\nimport { DynamicComponent } from '../wrapper';\nimport { processControl, getValue } from '../helpers';\n\nconst checkboxProps = ['radio', 'slider', 'toggle'];\n\nconst CheckboxComponent: React.FC = props => {\n const { source, disabled, controlProps, value, handleChange } = processControl(props);\n\n return (\n \n );\n};\n\nexport const CheckboxView: FormComponent = {\n Component: observer(CheckboxComponent),\n toString: (_owner, props, context) => (getValue(props, context) ? 'Yes' : 'No')\n};\n","import { EditorComponent } from '@tomino/dynamic-form';\nimport { InputView } from './input_view';\nimport { propGroup, boundProp } from '../editor/editor_common';\nimport { sizes } from './enums';\n\nexport const InputEditor: EditorComponent = {\n Component: InputView.Component,\n title: 'Input',\n control: 'Input',\n icon: 'square outline',\n bound: true,\n props: propGroup('Input', {\n fluid: boundProp({ type: 'boolean' }),\n focus: boundProp({ type: 'boolean' }),\n icon: boundProp(),\n iconPosition: boundProp({\n control: 'Select',\n props: { options: [{ text: 'Left', value: 'left' }, { text: 'Right', value: 'right' }] }\n }),\n inverted: boundProp({ type: 'boolean' }),\n inputLabel: boundProp(),\n labelPosition: boundProp({\n control: 'Select',\n props: { options: [{ text: 'Left', value: 'left' }, { text: 'Right', value: 'right' }] }\n }),\n loading: boundProp({ type: 'boolean' }),\n size: boundProp({ control: 'Select', props: { options: sizes } }),\n transparent: boundProp({ type: 'boolean' }),\n value: boundProp(),\n placeholder: boundProp()\n }),\n defaultProps: {\n fluid: true\n }\n};\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\nimport { Form, Input, InputProps } from 'semantic-ui-react';\nimport { DataSet, FormComponentProps, FormComponent } from '@tomino/dynamic-form';\n\nimport { ErrorLabel } from './error_view';\nimport { processControl, getValue } from '../helpers';\nimport { DynamicComponent } from '../wrapper';\n\nconst inputProps = [\n // 'action',\n // 'actionPosition',\n 'fluid',\n 'focus',\n 'icon',\n 'iconPosition',\n 'inverted',\n 'label',\n 'labelPosition',\n 'loading',\n 'onChange',\n 'size',\n 'transparent',\n 'placeholder',\n 'value'\n];\n\nconst InputComponent: React.FC> = props => {\n const { source, disabled, error, handleChange, owner, context, value } = processControl(props);\n const schema = owner.getSchema(source);\n\n const inputLabel = getValue(props, context, 'inputLabel');\n\n return (\n \n );\n};\n\nInputComponent.displayName = 'Input';\n\nexport const InputView: FormComponent = {\n Component: observer(InputComponent),\n toString: (_owner, props, context) => getValue(props, context)\n};\n\ninterface InputBoundProps {\n name: string;\n owner: DataSet;\n label: string;\n}\n\nexport class FormInputComponent extends React.Component {\n handleInputChange: React.ReactEventHandler = e => {\n // find value\n this.props.owner.setValue(this.props.name, e.currentTarget.value);\n };\n\n render() {\n const { owner, name, label } = this.props;\n\n return (\n \n \n \n\n \n \n );\n }\n}\n\nexport const FormInput = observer(FormInputComponent);\n","export const colors = [\n { value: 'red', text: 'red' },\n { value: 'orange', text: 'orange' },\n { value: 'yellow', text: 'yellow' },\n { value: 'olive', text: 'olive' },\n { value: 'green', text: 'green' },\n { value: 'teal', text: 'teal' },\n { value: 'blue', text: 'blue' },\n { value: 'violet', text: 'violet' },\n { value: 'purple', text: 'purple' },\n { value: 'pink', text: 'pink' },\n { value: 'brown', text: 'brown' },\n { value: 'grey', text: 'grey' },\n { value: 'black', text: 'black' }\n];\n\nexport const sizes = [\n { value: 'mini', text: 'mini' },\n { value: 'tiny', text: 'tiny' },\n { value: 'small', text: 'small' },\n { value: 'large', text: 'large' },\n { value: 'big', text: 'big' },\n { value: 'huge', text: 'huge' },\n { value: 'massive', text: 'massive' }\n];\n\nexport const align = [\n { value: 'left', text: 'left' },\n { value: 'center', text: 'center' },\n { value: 'right', text: 'right' },\n { value: 'justified', text: 'justified' }\n];\n\nexport const verticalAlign = [\n { value: 'top', text: 'top' },\n { value: 'middle', text: 'middle' },\n { value: 'bottom', text: 'bottom' }\n];\n","import { EditorComponent } from '@tomino/dynamic-form';\nimport { RadioView } from './radio_view';\nimport { propGroup, boundProp, tableProp, dataProp } from '../editor/editor_common';\n\nexport const RadioEditor: EditorComponent = {\n Component: RadioView.Component,\n title: 'Radio',\n control: 'Radio',\n icon: 'circle',\n bound: true,\n props: {\n ...propGroup('Radio', {\n value: boundProp(),\n schemaSource: dataProp()\n }),\n options: tableProp({ bound: true }, 'Options')\n }\n};\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\nimport { Radio, CheckboxProps as SuiCheckboxProps } from 'semantic-ui-react';\nimport { Option, FormComponentProps, FormComponent } from '@tomino/dynamic-form';\n\nimport { css } from '../common';\nimport { processControl, getValues, getValue, setValue } from '../helpers';\nimport { DynamicComponent } from '../wrapper';\n\nconst formRadio = css`\n margin-right: 12px;\n margin-bottom: 6px;\n`;\n\nexport const RadioComponent: React.FC = props => {\n const { source, disabled, error, owner, value, context } = processControl(props, false);\n const [options, schemaSource, vertical] = getValues(props, 'options', 'schemaSource', 'vertical');\n const radioValues = schemaSource ? owner.getSchema(schemaSource).$enum : options;\n\n const handleToggleChange = React.useCallback(\n (_: any, control: SuiCheckboxProps) => {\n // find value\n setValue(props, context, control.value);\n },\n [context, props]\n );\n\n return (\n \n {radioValues.map((item: Option) => (\n \n \n {vertical &&
}\n \n ))}\n \n );\n};\n\nexport const RadioView: FormComponent = {\n Component: observer(RadioComponent),\n toString: (_, props, context) => {\n const value = getValue(props, context);\n // let radioList = props.formElement.props.list;\n // const radioOptions = owner.getSchema(radioList).$enum;\n // const radioText = radioOptions.find(o => o.value === value).text;\n return value;\n }\n};\n","import * as React from 'react';\n\nimport { FormComponentProps, EditorComponent } from '@tomino/dynamic-form';\nimport { TableView, TableProps, createDataset } from './table_view';\nimport { observer } from 'mobx-react';\nimport { prop, propGroup, handlerProp, boundProp } from '../editor/editor_common';\nimport { align, verticalAlign } from './enums';\nimport { DynamicComponent } from '../wrapper';\nimport { TemplateEditor } from '../vanilla/template_editor';\nimport { EditorContext } from '../editor/editor_context';\nimport { Table } from 'semantic-ui-react';\nimport { EditorControl, SingleDropCell } from '../editor/layouts_common_editor';\nimport { toJS } from 'mobx';\n\nconst templates = [\n { text: 'Component View', value: 'component' },\n { text: 'View Template', value: 'view' },\n { text: 'Edit Template', value: 'edit' },\n { text: 'Add Template', value: 'add' }\n];\n\nconst Template = observer((props: FormComponentProps & { templateIndex: number }) => {\n const editorState = React.useContext(EditorContext);\n let addDataset = createDataset(props.formElement.props.items, toJS(props.owner));\n let formElement = props.formElement;\n let template = formElement.elements[props.templateIndex];\n let elements = template.elements;\n let items = props.formElement.props.items;\n\n editorState.project.state.selectedElement;\n\n return (\n \n \n \n {items.map((m, i) => (\n {m.title}\n ))}\n \n \n \n \n {items.map((m, i) => (\n \n {elements.length > i && elements[i] ? (\n \n ) : (\n \n )}\n \n ))}\n \n \n \n
\n );\n});\n\nconst TableComponent = (props: FormComponentProps) => {\n return (\n \n \n \n );\n};\n\nexport const TableEditor: EditorComponent = {\n Component: observer(TableComponent),\n title: 'Table',\n control: 'Table',\n icon: 'code',\n bound: true,\n valueProvider: 'value',\n defaultChildren: [\n {\n elements: []\n },\n {\n elements: []\n },\n {\n elements: []\n }\n ],\n props: {\n ...propGroup('Templates', {\n allowAdd: prop({ type: 'boolean' }),\n allowEdit: prop({ type: 'boolean' }),\n allowDelete: prop({ type: 'boolean' }),\n customView: prop({ type: 'boolean' })\n }),\n ...propGroup('Table', {\n value: boundProp(),\n template: prop({\n control: 'Select',\n props: {\n options: templates,\n default: 'component'\n }\n }),\n propSource: prop({}),\n attached: boundProp({\n type: 'boolean',\n control: 'Select',\n props: {\n options: [\n { text: '', value: '' },\n { text: 'Top', value: 'top' },\n { text: 'Bottom', value: 'bottom' },\n { text: 'Both', value: true }\n ]\n }\n }),\n basic: boundProp({\n type: 'boolean',\n control: 'Select',\n props: {\n options: [\n { text: '', value: '' },\n { text: 'Very', value: 'very' },\n { text: 'Normal', value: true }\n ]\n }\n }),\n inverted: boundProp({ type: 'boolean', control: 'Checkbox' }),\n celled: boundProp({ type: 'boolean' }),\n collapsing: boundProp({ type: 'boolean' }),\n compact: boundProp({\n type: 'boolean',\n control: 'Select',\n props: {\n options: [\n { text: '', value: '' },\n { text: 'Very', value: 'very' },\n { text: 'Normal', value: true }\n ]\n }\n }),\n padded: boundProp({\n type: 'boolean',\n control: 'Select',\n props: {\n options: [\n { text: '', value: '' },\n { text: 'Very', value: 'very' },\n { text: 'Normal', value: true }\n ]\n }\n }),\n fixed: boundProp({ type: 'boolean' }),\n selectable: boundProp({ type: 'boolean' }),\n singleLine: boundProp({ type: 'boolean' }),\n sortable: boundProp({ type: 'boolean' }),\n stackable: boundProp({ type: 'boolean' }),\n striped: boundProp({ type: 'boolean' }),\n structured: boundProp({ type: 'boolean' }),\n textAlign: boundProp({ control: 'Select', props: { options: align } }),\n verticalAlign: boundProp({ control: 'Select', props: { options: verticalAlign } })\n }),\n ...propGroup('Handlers', {\n onCreate: handlerProp(),\n onAdd: handlerProp(),\n onSave: handlerProp(),\n onDelete: handlerProp()\n }),\n items: prop({\n control: 'Table',\n props: { text: 'Columns' },\n elements: [\n {\n props: { placeholder: 'Title', value: { source: 'title' } }\n },\n {\n props: {\n value: { source: 'source' },\n text: 'Source',\n options: { handler: 'datasetSource' }\n },\n control: 'Select'\n },\n {\n control: 'Select',\n props: {\n text: 'Type',\n value: { source: 'type' },\n options: [\n {\n value: 'string',\n text: 'String'\n },\n {\n value: 'number',\n text: 'Number'\n },\n {\n value: 'boolean',\n text: 'Boolean'\n }\n ]\n }\n }\n ],\n type: 'array',\n items: {\n type: 'object',\n properties: {\n title: { type: 'string' },\n source: { type: 'string' },\n type: { type: 'string' }\n }\n }\n })\n }\n};\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\nimport { Button, Table, TableProps as TablePropsSUI } from 'semantic-ui-react';\nimport {\n DataSet,\n FormComponentProps,\n FormComponent,\n JSONSchema,\n FormElement,\n JSONSchema7TypeName,\n buildDataSet,\n BoundProp\n} from '@tomino/dynamic-form';\n\nimport { ErrorView } from './error_view';\nimport { css, toJS, prop } from '../common';\nimport { getValue, getPropValue, simpleHandle, valueSource } from '../helpers';\nimport { Context } from '../context';\nimport { DynamicComponent } from '../wrapper';\n\nexport function createDataset(items: Column[], parent: any) {\n let schema: JSONSchema = {\n type: 'object',\n properties: {}\n };\n for (let column of items) {\n schema.properties[column.source] = {\n type: column.type || 'string'\n };\n }\n return buildDataSet(schema, toJS(parent));\n}\n\nexport const tableAddButton = css`\n margin-top: 12px !important;\n`;\n\ntype Column = {\n title: string;\n source: string;\n type: JSONSchema7TypeName;\n};\n\nexport type TableProps = TablePropsSUI & {\n propSource: string;\n onCreate: string;\n onAdd: string;\n onSave: string;\n onDelete: string;\n items: Column[];\n allowAdd?: boolean;\n allowEdit?: boolean;\n allowDelete?: boolean;\n customView?: boolean;\n value: BoundProp;\n};\n\nfunction hasControl(template: FormElement, i: number) {\n return template && template.elements && template.elements.length > i && template.elements[i];\n}\n\nconst tableProps = [\n 'attached',\n 'basic',\n 'inverted',\n 'celled',\n 'collapsing',\n 'compact',\n 'padded',\n 'fixed',\n 'selectable',\n 'singleLine',\n 'sortable',\n 'stackable',\n 'striped',\n 'structured',\n 'textAlign',\n 'verticalAlign'\n];\n\nconst TableComponent: React.FC> = props => {\n const [editingRow, editRow] = React.useState(-1);\n const context = React.useContext(Context);\n const controlProps = props.formElement.props || ({} as TableProps);\n const {\n formElement,\n owner\n }: { formElement: FormElement; owner: DataSet } = controlProps.onCreate\n ? simpleHandle(props, controlProps.onCreate, context)\n : { formElement: props.formElement, owner: props.owner };\n const readOnly = props.readOnly;\n\n const list: DataSet[] = controlProps.propSource\n ? props.dataProps[controlProps.propSource]\n : getValue(props, context) || [];\n\n const { items, allowAdd, allowDelete, allowEdit, customView } =\n formElement.props || ({} as TableProps);\n\n const edit = React.useCallback((e: React.MouseEvent) => {\n editRow(parseInt(e.currentTarget.getAttribute('data-index')));\n }, []);\n\n const source = prop(props.formElement);\n\n const viewTemplate =\n formElement.elements && formElement.elements.length > 0 && formElement.elements[0];\n const editTemplate =\n formElement.elements && formElement.elements.length > 1 && formElement.elements[1];\n const addTemplate =\n formElement.elements && formElement.elements.length > 2 && formElement.elements[2];\n\n let filteredItems = (items || []).filter(i => i && i.title && i.type && i.source);\n\n // build add dataset\n const addDataset = React.useMemo(() => {\n return createDataset(filteredItems, owner);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [items]);\n\n const addRow = React.useCallback(() => {\n const data: any = toJS(addDataset);\n if (formElement.props.onAdd) {\n simpleHandle(props, formElement.props.onAdd, context, { data });\n } else if (data.__item) {\n owner.addRow(source, data.__item);\n } else {\n owner.addRow(source, data);\n }\n }, [addDataset, context, formElement.props.onAdd, owner, props, source]);\n\n let rowDataset = editingRow >= 0 ? createDataset(items, list[editingRow]) : null;\n const cancelEdit = React.useCallback(() => {\n editRow(-1);\n }, []);\n const editRowHandler = React.useCallback(() => {\n const data: any = toJS(rowDataset);\n if (formElement.props.onSave) {\n simpleHandle(props, formElement.props.onSave, context, { data });\n } else if (owner && owner.replaceRow) {\n const source = valueSource(props.formElement);\n owner.replaceRow(source, editingRow, data);\n } else {\n alert('You need to define an on save handler');\n }\n editRow(-1);\n }, [context, editingRow, formElement.props.onSave, owner, props, rowDataset]);\n\n const deleteRow = React.useCallback(\n (e: React.MouseEvent) => {\n if (formElement.props.onDelete) {\n simpleHandle(props, formElement.props.onDelete, context, {\n index: parseInt(e.currentTarget.getAttribute('data-index')),\n data: list\n });\n } else {\n owner.removeRowIndex(source, parseInt(e.currentTarget.getAttribute('data-index')));\n }\n },\n [context, formElement.props.onDelete, list, owner, props, source]\n );\n\n if (!filteredItems || !filteredItems.length) {\n return You need to define table columns
;\n }\n\n let simpleArray = filteredItems.length === 1 && filteredItems[0].source === '__item';\n\n if (!list) {\n return Collection contains no items ...
;\n }\n\n return (\n \n \n \n {filteredItems.map((m, i) => (\n {m.title}\n ))}\n {!readOnly && (allowEdit || allowDelete || allowAdd) ? : null}\n \n \n \n {list.map((row, i) => (\n \n {editingRow === i\n ? filteredItems.map((e, i) => {\n // If this is a simple array\n if (simpleArray) {\n const r = row;\n row = {\n setValue(_s: any, value: any) {\n owner.replaceRow(source, i, value);\n },\n getValue() {\n return r;\n },\n getSchema() {\n return owner.getSchema().items;\n },\n isRequired() {\n return false;\n }\n } as any;\n } else {\n row = rowDataset;\n }\n return (\n \n {props.catalogue.createComponent(\n { ...props, owner: row, dataProps: owner },\n hasControl(editTemplate, i)\n ? editTemplate.elements[i]\n : {\n control: 'Input',\n props: { value: { source: e.source } }\n },\n context\n )}\n \n );\n })\n : filteredItems.map((m, j) => {\n const value = m.source === '__item' ? row : (row as any)[m.source];\n return (\n \n {customView && hasControl(viewTemplate, j)\n ? props.catalogue.createComponent(\n {\n ...props,\n owner: row,\n dataProps: owner\n },\n viewTemplate.elements[j],\n context\n )\n : value && typeof value == 'object'\n ? '[object]'\n : value}\n \n );\n })}\n {!readOnly && (allowEdit || allowDelete || allowAdd) ? (\n \n {allowEdit && editingRow === i && (\n <>\n \n \n \n )}\n {allowEdit && editingRow !== i && (\n \n )}\n {allowDelete && editingRow !== i && (\n \n )}\n \n ) : null}\n \n ))}\n {!readOnly && allowAdd ? (\n \n {filteredItems.map((m, i) => (\n \n {props.catalogue.createComponent(\n { ...props, owner: addDataset, dataProps: owner },\n hasControl(addTemplate, i)\n ? addTemplate.elements[i]\n : {\n control: 'Input',\n props: {\n value: { source: m.source },\n placeholder: m.title\n }\n },\n context\n )}\n \n ))}\n \n \n \n \n ) : null}\n \n\n \n \n );\n};\n\nexport const TableView: FormComponent = {\n Component: observer(TableComponent),\n toString: (_owner, props, context) => {\n const tableList: DataSet[] = getValue(props, context);\n return tableList\n .map(\n (_, i) =>\n `[${i + 1}] ${props.formElement.elements\n .map(\n e => `${getPropValue(props, e, context, 'label')}: ${getPropValue(props, e, context)}`\n )\n .join('\\n ')}`\n )\n .join('\\n\\n');\n }\n};\n","import * as React from 'react';\n\nimport { Signature } from './signature_view';\nimport { FormComponentProps, EditorComponent } from '@tomino/dynamic-form';\n\n// TODO:\nconst SignatureEditorComponent = (props: FormComponentProps) => (\n \n);\n\nexport const SignatureEditor: EditorComponent = {\n Component: SignatureEditorComponent,\n title: 'Signature',\n control: 'Signature',\n icon: 'edit',\n bound: true\n};\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { css, SignatureType } from '../common';\nimport { SignedSignature } from './signature/signature_signed';\nimport { SignatureRejected } from './signature/signature_rejected';\nimport { SignatureRoot } from './signature/signature';\nimport { FormComponentProps, FormComponent } from '@tomino/dynamic-form';\nimport { getValue } from '../helpers';\nimport { Context } from '../context';\n\nconst signatureStyle = css`\n border: solid 1px #ededed;\n border-radius: 5px;\n\n .image {\n width: 32px !important;\n }\n\n .button {\n margin-top: 6px !important;\n }\n\n .items {\n margin-top: 6px !important;\n }\n\n .list {\n margin-top: 6px !important;\n }\n\n img {\n width: 32px !important;\n vertical-align: middle;\n margin-right: 6px;\n cursor: pointer;\n }\n`;\n\nexport class Signature extends React.Component {\n static contextType = Context;\n\n state = {\n modalOpen: false,\n modalRejectOpen: false,\n reason: '',\n password: '',\n loading: false,\n error: '',\n fontReady: typeof window === 'undefined' ? true : false\n };\n\n handleOpen = () => this.setState({ modalOpen: true });\n handleClose = () => !this.state.loading && this.setState({ modalOpen: false });\n\n async componentDidMount() {\n const value = getValue(this.props, this.context) as SignatureType;\n if (value.signature) {\n const state = await this.props.handlers.verifySignature({\n owner: this.props.owner,\n props: this.props,\n context: this.context,\n args: {\n uid: value.uid,\n signature: value.signature\n }\n });\n // console.log(state);\n value.setValue('verifiedState', state);\n }\n }\n\n render() {\n const {\n formElement,\n formElement: { props },\n handlers\n } = this.props;\n\n // check if all handlers are present\n if (\n !this.props.readOnly &&\n (!handlers ||\n !handlers.verifySignature ||\n !handlers.sign ||\n !handlers.signatureFont ||\n !handlers.validateForm)\n ) {\n throw new Error(\n `You must implement following handlers to use signatures:\n - validateForm (): boolean\n - verifySignature(uid: string, signature: string): boolean\n - sign(source: string, reject: boolean, password: string, reason: string, submit: boolean): string\n - signatureFont(): string`\n );\n }\n\n const value = getValue(this.props, this.context) as SignatureType;\n const { allowComment } = props;\n const font = handlers.signatureFont ? handlers.signatureFont(null) : 'Menlo, Arial';\n\n // load font if needed\n if (value.signature && typeof window !== undefined) {\n // use three possible fonts\n\n if (typeof window !== 'undefined') {\n require('webfontloader').load({\n google: { families: [font] },\n fontactive: () => !this.state.fontReady && this.setState({ fontReady: true })\n });\n }\n }\n\n return (\n \n );\n }\n}\n\nexport const SignatureView: FormComponent = {\n Component: observer(Signature),\n toString: () => ''\n};\n","import * as React from 'react';\n\nimport { verified, rejected, pending } from './images';\n\nimport { SignatureType, css } from '../../common';\nimport { Item, Modal, Header, Button, Icon } from 'semantic-ui-react';\nimport { Observer } from 'mobx-react';\n\nconst signedStyle = css`\n font-size: 18px !important;\n`;\n\nconst signedDate = css`\n font-size: 12px !important;\n color: #333;\n`;\n\ntype Props = {\n value: SignatureType;\n font: string;\n readonly: boolean;\n};\nexport const SignedSignature: React.FC = ({ value, font, readonly }) => {\n const [modalOpen, toggleOpen] = React.useState(false);\n\n if (readonly) {\n return (\n \n - \n \n \n \n \n \n {value.name}\n \n
\n {new Date(value.date).toLocaleDateString()}\n \n \n \n );\n }\n\n return (\n \n {() => (\n \n - \n \n {value.verifiedState === 'Pending' && (\n toggleOpen(true)}\n />\n }\n basic\n size=\"small\"\n open={modalOpen}\n >\n \n \n
Please wait while we verify the signature.
\n \n \n \n \n \n )}\n {value.verifiedState === 'Verified' && (\n toggleOpen(true)} />\n }\n basic\n size=\"small\"\n open={modalOpen}\n >\n \n \n \n The signature was verified. User {value.name} has signed this document and\n since the document has been signed it has not been modified or tampered with.\n
\n \n \n \n \n \n )}\n {value.verifiedState === 'Rejected' && (\n toggleOpen(true)}\n />\n }\n basic\n size=\"small\"\n open={modalOpen}\n >\n \n \n \n It is possible that the content of the form has been modified after user\n signed the document. Please contact the process owner and the signatory.\n
\n \n \n \n \n \n )}\n \n \n \n {value.name}\n \n
\n {new Date(value.date).toLocaleDateString()}\n \n \n \n )}\n \n );\n};\n","export const verified =\n 'data:image/png;base64,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';\n\nexport const rejected = `data:image/png;base64,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`;\n\nexport const pending = `data:image/gif;base64,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`;\n","import * as React from 'react';\nimport { List } from 'semantic-ui-react';\n\nimport { SignatureType } from '../../common';\n\ntype Props = {\n value: SignatureType;\n};\n\nexport const SignatureRejected: React.FC = ({ value }) => (\n \n \n {value.comment && }\n
\n);\n","import * as React from 'react';\n\nimport { css } from '../../common';\nimport { TextArea } from 'semantic-ui-react';\nimport { FormComponentProps } from '@tomino/dynamic-form';\nimport { SignatureSign } from './signature_sign';\nimport { SignatureReject } from './signature_reject';\nimport { ErrorView } from '../error_view';\nimport { valueSource } from '../../helpers';\n\ntype Props = {\n allowComment: boolean;\n};\n\nconst signatureLine = css`\n height: 20px;\n margin: 12px;\n border-bottom: dashed 1px #d4d4d5;\n`;\n\nexport const SignatureRoot: React.FC = props => {\n const [reason, setReason] = React.useState('');\n\n if (props.readOnly) {\n return
;\n }\n\n return (\n <>\n {props.allowComment && (\n setReason(e.currentTarget.value)}\n />\n )}\n\n \n\n {(props.formElement.props || {}).allowReject && (\n \n )}\n\n \n \n );\n};\n\nSignatureRoot.displayName = 'Signature';\n","import * as React from 'react';\n\nimport { css } from '../../common';\nimport { Modal, Header, Button, Icon, Input, Label, Message } from 'semantic-ui-react';\nimport { FormComponentProps } from '@tomino/dynamic-form';\nimport { Context } from '../../context';\nimport { valueSource, setValue } from '../../helpers';\n\ntype Props = {\n allowComment: boolean;\n reason: string;\n};\n\nconst margined = css`\n margin-top: 12px;\n`;\n\nconst centered = css`\n text-align: center;\n`;\n\nconst errorLabel = css`\n margin-left: 12px !important;\n`;\n\nexport const SignatureSign: React.FC = props => {\n const { allowComment, handlers, formElement, owner, reason } = props;\n const context = React.useContext(Context);\n const [password, setPassword] = React.useState('');\n const [error, setError] = React.useState('');\n const [modelOpen, setModalOpen] = React.useState(false);\n const [loading, setLoading] = React.useState(false);\n\n return (\n handlers.validateForm(null) && setModalOpen(true)}\n icon=\"pencil alternate\"\n content=\"Sign\"\n labelPosition=\"left\"\n primary\n floated={allowComment ? 'right' : null}\n />\n }\n size=\"small\"\n >\n \n \n \n
\n {formElement.props && formElement.props.submit\n ? `Do you wish to sign this form? Upon signing, you will no longer be able to make any\n changes, the form will be automatically submitted and process will advance to a next\n state.`\n : `Do you wish to sign this form? Upon signing, you will no longer be able to make any\n changes. To submit this form go back to the process page and press the \"Submit\" button.\n To make further changes to the form, you will need to remove your signature.`}\n
\n\n {reason && (\n
\n )}\n\n
\n
\n
\n {formElement.props.submit\n ? `Do you wish to reject this form? Upon rejecting, you will no longer be able to\n make any changes, the form will be automatically submitted and process will\n advance to a next state.`\n : `Do you wish to reject this form? Upon rejecting, you will no longer be able to\n make any changes. To make further changes to the form, you will need to withdraw your rejection.`}\n
\n {reason && (\n
\n )}\n\n
\n
Component not bound.
;\n }\n\n const value = getValue(controlProps, context);\n\n let isTrue = true;\n if (props.exists && !value) {\n isTrue = false;\n } else if (props.notExists && value) {\n isTrue = false;\n } else if (props.equal && value != value) {\n isTrue = false;\n } else if (props.notEqual && value == parseFloat(value)) {\n isTrue = false;\n } else if (props.biggerThan && value <= parseFloat(value)) {\n isTrue = false;\n } else if (props.biggerOrEqualThan && value < parseFloat(value)) {\n isTrue = false;\n } else if (props.smallerThan && value <= parseFloat(value)) {\n isTrue = false;\n } else if (props.smallerOrEqualThan && value > parseFloat(value)) {\n isTrue = false;\n } else if (props.expression) {\n isTrue = safeEval(owner, props.expression, owner);\n }\n\n if (formElement.elements && formElement.elements.length) {\n return controlProps.catalogue.createComponent(\n controlProps,\n formElement.elements[isTrue ? 0 : 1],\n context\n ); //, true);\n }\n return Empty template
;\n};\n\nIfView.displayName = 'IfView';\n","import { EditorComponent } from '@tomino/dynamic-form';\nimport { SearchComponentProps, SearchComponent } from './search_view';\nimport { observer } from 'mobx-react';\nimport { propGroup, prop, handlerProp, boundProp } from '../editor/editor_common';\n\nexport const SearchEditor: EditorComponent = {\n Component: observer(SearchComponent),\n title: 'Lookup',\n control: 'Lookup',\n icon: 'search',\n bound: true,\n props: {\n ...propGroup('Lookup', {\n searchName: prop(),\n search: handlerProp(),\n single: prop({ type: 'boolean' }),\n limit: prop({ type: 'number' }),\n value: boundProp()\n }),\n renderTemplate: prop({\n group: 'Render Template',\n control: 'Code',\n props: {\n language: 'markup'\n }\n })\n }\n};\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\nimport { SearchResultData, SearchProps, Search } from 'semantic-ui-react';\nimport { FormComponentProps, BoundProp } from '@tomino/dynamic-form';\nimport { debounce } from '@tomino/toolbelt';\n\nimport { handle, css } from '../common';\nimport { Context, ContextType } from '../context';\nimport { getValue, setValue, valueSource } from '../helpers';\nimport { DynamicComponent } from '../wrapper';\n\ntype DropdownOption = {\n title: string;\n titles: string[];\n description?: string;\n image?: string;\n price?: string;\n value: string;\n};\n\ntype State = {\n isLoading: boolean;\n value: string;\n options: DropdownOption[];\n};\n\nexport type SearchComponentProps = {\n searchName: string;\n renderTemplate: string;\n search: string;\n single: number;\n limit: number;\n value: BoundProp;\n};\n\nconst style = css`\n .input {\n display: block !important;\n }\n .result:first-of-type:hover,\n .result:first-of-type {\n background: #dedede !important;\n font-weight: bold;\n }\n`;\n\nexport const SearchComponent: React.FC> = props => {\n const ctx = React.useContext(Context); // the react component freezes when used with context\n return ;\n};\n\nconst controlProps = ['fluid'];\n\n@observer\nexport class SearchWithContext extends React.Component<\n FormComponentProps & { context: ContextType },\n State\n> {\n static contextType = Context;\n\n state = { isLoading: false, options: [] as any[], value: '' };\n\n async componentDidMount() {\n this.resetComponent();\n\n let props = this.props.formElement.props;\n let value = getValue(this.props, this.context);\n\n if (!value) {\n return;\n }\n\n // we need to preload our value\n if (value != null) {\n this.setState({ isLoading: true });\n handle(\n this.props.handlers,\n props.search || 'lookup',\n this.props.owner,\n this.props,\n this.props.formElement,\n this.context,\n {\n lookup: props.searchName,\n single: props.single,\n limit: props.limit,\n value,\n context: this.props.context,\n searchByValue: true\n }\n ).then((options: DropdownOption[]) => {\n // handle titles, make sure they are defined\n this.createTitles(options);\n this.setState({\n isLoading: false,\n value: options && options.length ? options[options.length - 1].title : ''\n });\n });\n }\n }\n\n resetComponent = () => this.setState({ isLoading: false, options: [], value: '' });\n\n handleResultSelect = (_event: React.MouseEvent, { result }: SearchResultData) => {\n if (result.key === '-1') {\n return false;\n }\n\n this.setState({ value: result.title });\n setValue(this.props, this.context, result.value);\n };\n\n handleSearchChange = (_event: React.MouseEvent, { value }: SearchProps) => {\n this.setState({ isLoading: true, value });\n if (value.length < 1) return this.resetComponent();\n\n this.getResults(value);\n };\n\n createTitles(options: DropdownOption[]) {\n for (let option of options) {\n if (!option.title) {\n if (option.titles) {\n option.title = option.titles.join(' - ');\n } else {\n console.error('You need to provide title!');\n }\n }\n }\n }\n\n resultRenderer = (option: any) => {\n let control = this.props.formElement.props.renderTemplate;\n let titles: string[] = option.titles || [option.title];\n\n if (control[0] && control[0].match(/\\d/)) {\n control = control\n .split('\\n')\n .map((s, i) => `{${i}}
`)\n .join('\\n');\n }\n\n titles.forEach((t, i) => (control = control.replace(`{${i}}`, t)));\n\n return ;\n };\n\n getResults = debounce((value: string) => {\n if (!value) {\n return [];\n }\n if (!this.props.formElement.props.searchName) {\n throw new Error('You need to define a search name!');\n }\n let props = this.props.formElement.props;\n handle(\n this.props.handlers,\n props.search || 'lookup',\n this.props.owner,\n this.props,\n this.props.formElement,\n this.context,\n {\n lookup: props.searchName,\n single: props.single,\n limit: props.limit,\n value,\n context: this.props.context\n }\n ).then((options: DropdownOption[]) => {\n // handle titles, make sure they are defined\n this.createTitles(options);\n\n this.setState({\n isLoading: false,\n options\n });\n });\n }, 500);\n\n render() {\n const { isLoading, value, options } = this.state;\n\n if (!valueSource(this.props.formElement)) {\n return Component not bound ;(;\n }\n\n if (this.props.readOnly || this.props.formElement.props.single) {\n // return ;\n return value;\n }\n\n return (\n \n );\n }\n}\n\nexport const SearchView = {\n Component: SearchComponent,\n toString: () => ''\n};\n","import { EditorComponentCatalogue } from '@tomino/dynamic-form';\nimport { ApolloProviderEditor } from './apollo_provider_editor';\nimport { ApolloQueryEditor } from './apollo_query.editor';\nimport { ApolloMutationEditor } from './apollo_mutation_editor';\n\nexport const catalogueEditor: EditorComponentCatalogue = {\n components: {\n ApolloProvider: ApolloProviderEditor,\n ApolloQuery: ApolloQueryEditor,\n ApolloMutation: ApolloMutationEditor\n },\n cssClass: ''\n};\n","import React from 'react';\nimport { EditorComponent, FormComponentProps } from '@tomino/dynamic-form';\n\nimport { ApolloProvider, ApolloProps } from './apollo_provider_view';\nimport { thumbnails } from './apollo_query.editor';\nimport { propGroup, prop } from '../editor/editor_common';\nimport { Context } from '../context';\nimport { DynamicComponent } from '../wrapper';\n\nconst Provider = (props: any) => (\n \n);\n\nexport const ApolloProviderEditorComponent: React.FC> = props => {\n const controlProps = props.formElement.props;\n const context = React.useContext(Context);\n\n if (controlProps.authorised) {\n context.auth.user = {\n roles: controlProps.roles.split(','),\n name: controlProps.user,\n id: controlProps.id\n };\n }\n\n return ;\n};\n\nApolloProviderEditorComponent.displayName = 'ApolloProviderEditor';\n\nexport const ApolloProviderEditor: EditorComponent = {\n Component: ApolloProviderEditorComponent,\n title: 'Apollo Provider',\n control: 'ApolloProvider',\n thumbnail: thumbnails,\n provider: true,\n group: 'Data',\n props: {\n ...propGroup('Apollo', {\n server: prop({ label: 'Server Url', type: 'string' }),\n tokenName: prop({ label: 'Token', type: 'string' }),\n auth: prop({ label: 'Use Authentication', control: 'Checkbox', type: 'boolean' }),\n batchRequests: prop({ label: 'Batch Requests', control: 'Checkbox', type: 'boolean' }),\n disable: prop({\n documentation: 'This is useful during testing when a mocked provider can be used instead.',\n label: 'Disable provider',\n group: 'Apollo',\n control: 'Checkbox',\n type: 'boolean'\n })\n }),\n ...propGroup('Test', {\n authorised: prop({ label: 'Authorise', control: 'Checkbox', type: 'boolean' }),\n user: prop({ label: 'User', type: 'string' }),\n roles: prop({ label: 'Roles', type: 'string' }),\n id: prop({ label: 'Id', type: 'string' })\n })\n }\n};\n","import * as React from 'react';\n\nimport { ApolloProvider as Provider } from 'react-apollo';\nimport { ApolloClient } from 'apollo-client';\nimport { InMemoryCache } from 'apollo-cache-inmemory';\n\nimport { FormComponentProps, FormComponent } from '@tomino/dynamic-form';\nimport { createComponents } from '../common';\nimport { Context } from '../context';\n\nexport type ApolloProps = {\n server: string;\n auth: string;\n tokenName: string;\n batchRequests: boolean;\n disable: boolean;\n authorised?: boolean;\n user?: string;\n roles?: string;\n id?: string;\n};\n\nexport const ApolloProvider: React.FC> = props => {\n const context = React.useContext(Context);\n const {\n formElement: {\n props: { auth, server, tokenName, batchRequests, disable }\n }\n } = props;\n\n if (disable) {\n return <>{createComponents(props)};\n }\n\n let httpLink;\n\n if (batchRequests) {\n let { BatchHttpLink } = require('apollo-link-batch-http');\n httpLink = new BatchHttpLink({ uri: server });\n } else {\n httpLink = require('apollo-link-http').createHttpLink({\n uri: server\n });\n }\n\n let client: ApolloClient;\n\n if (auth) {\n const { setContext } = require('apollo-link-context');\n const authLink = setContext((_: any, { headers }: any) => {\n const token = localStorage.getItem(tokenName || 'CORPIX_TOKEN');\n return {\n headers: {\n ...headers,\n authorization: token ? `Bearer ${token}` : ''\n }\n };\n });\n client = new ApolloClient({\n link: authLink.concat(httpLink),\n cache: new InMemoryCache()\n });\n } else {\n client = new ApolloClient({\n link: httpLink,\n cache: new InMemoryCache()\n });\n }\n\n context.app.client = client;\n\n return {createComponents(props)};\n};\n\nexport const ApolloProviderView: FormComponent = {\n Component: ApolloProvider\n};\n","import React from 'react';\nimport { EditorComponent, FormComponentProps } from '@tomino/dynamic-form';\nimport gql from 'graphql-tag';\nimport { MockedProvider } from 'react-apollo/test-utils';\n\nimport { ApolloQueryView, ApolloQueryProps, parseVariables } from './apollo_query_view';\nimport { prop, propGroup, handlerProp, boundProp, dataProp } from '../editor/editor_common';\nimport { observer } from 'mobx-react';\nimport { getValue } from '../helpers';\nimport { Context } from '../context';\n\nexport const thumbnails = {\n light:\n 'data:image/png;base64,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',\n dark:\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOxAAADsQBlSsOGwAABCJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjk2PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj45NjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjY0PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj42NDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAg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'\n};\n\nexport const variables = {\n variables: prop({\n control: 'Table',\n props: { text: 'Variables - Constant', display: 'group' },\n elements: [\n {\n control: 'Input',\n props: { placeholder: 'Name', value: { source: 'name' }, label: 'Name' }\n },\n {\n control: 'Input',\n props: { placeholder: 'Value', label: 'Value', value: { source: 'value' } }\n },\n {\n control: 'Select',\n\n props: {\n label: 'Type',\n value: { source: 'type' },\n options: [\n { text: 'String', value: 'string' },\n { text: 'Number', value: 'number' },\n { text: 'Boolean', value: 'boolean' }\n ]\n }\n }\n ],\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n value: { type: 'string' },\n type: { type: 'string' }\n }\n }\n }),\n boundVariables: prop({\n control: 'Table',\n props: { text: 'Variables - Bound', display: 'group' },\n elements: [\n {\n control: 'Input',\n props: { placeholder: 'Name', label: 'Name', value: { source: 'name' } }\n },\n {\n control: 'Select',\n props: {\n options: { handler: 'datasetSource' },\n label: 'Source',\n value: { source: 'source' }\n }\n }\n ],\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: { type: 'string' },\n source: { type: 'string' },\n value: { type: 'string' }\n }\n }\n })\n};\n\nconst ApolloQueryEditorComponent = (props: FormComponentProps) => {\n const controlProps = props.formElement.props;\n const context = React.useContext(Context);\n controlProps.query;\n\n let fakeData = getValue(props, context, 'fakeData');\n if (fakeData) {\n let data: any;\n try {\n data = eval(`(${fakeData.trim()})`);\n } catch (ex) {\n return Error parsing json: {ex.message}
;\n }\n\n const mocks = [\n {\n request: {\n query: gql([controlProps.query]),\n variables: parseVariables(props, context)\n },\n result: {\n data\n }\n }\n ];\n\n return (\n \n \n \n );\n }\n return ;\n};\n\nexport const ApolloQueryEditor: EditorComponent = {\n Component: observer(ApolloQueryEditorComponent),\n title: 'Apollo Query',\n control: 'ApolloQuery',\n thumbnail: thumbnails,\n provider: true,\n group: 'Data',\n props: {\n ...propGroup('Query', {\n query: prop({\n label: 'Query',\n control: 'Code',\n props: {\n display: 'topLabel',\n language: 'graphql'\n },\n type: 'string'\n }),\n target: dataProp({\n label: 'Target'\n }),\n propTarget: prop({\n label: 'Prop Target',\n documentation: 'The query result will be passed to child components under this prop name'\n }),\n loadingText: prop({\n props: { value: { source: 'loadingText' } },\n type: 'string'\n })\n }),\n ...variables,\n ...propGroup('Handlers', {\n onResult: handlerProp({\n label: 'onResult'\n }),\n onError: handlerProp({\n label: 'onError'\n }),\n onQuery: handlerProp({\n label: 'onQuery'\n })\n }),\n ...propGroup('Editor', {\n fakeData: boundProp({\n control: 'Code',\n props: { language: 'javascript', display: 'topLabel' }\n })\n })\n },\n defaultProps: {\n loadingText: 'Loading ...'\n }\n};\n","import * as React from 'react';\n\nimport { Query } from 'react-apollo';\nimport { FormComponentProps, FormComponent } from '@tomino/dynamic-form';\nimport gql from 'graphql-tag';\n\nimport { createComponents } from '../common';\nimport { ApolloError } from 'apollo-client';\nimport { observer } from 'mobx-react';\nimport { Context, ContextType } from '../context';\nimport { simpleHandle } from '../helpers';\n\nexport type ApolloQueryProps = {\n query: string;\n target: string;\n propTarget: string;\n loadingText: string;\n variables: { name: string; value: string; type: string }[];\n boundVariables: { name: string; source: string }[];\n onResult: string;\n onError: string;\n onQuery: string;\n fakeData: string;\n};\n\nexport function parseParameter(value: string, type: string) {\n switch (type) {\n case 'number':\n return parseFloat(value);\n case 'boolean':\n return value === 'true' ? true : false;\n }\n return value;\n}\n\nexport function parseVariables(props: FormComponentProps, context: ContextType) {\n const {\n owner,\n formElement: {\n props: { variables, boundVariables, onQuery }\n }\n } = props;\n let currentVariables: any = onQuery ? simpleHandle(props, onQuery, owner, context) : {};\n if (variables) {\n for (let v of variables) {\n currentVariables[v.name] = parseParameter(v.value, v.type);\n }\n }\n if (boundVariables) {\n for (let v of boundVariables) {\n currentVariables[v.name] = owner.getValue(v.source);\n }\n }\n return currentVariables;\n}\n\nexport const ApolloQuery: React.FC> = props => {\n const [error, setError] = React.useState(null);\n const context = React.useContext(Context);\n const {\n owner,\n formElement: {\n props: { query, loadingText, target, onError, onResult, propTarget }\n }\n } = props;\n\n if (!query) {\n return Please specify the query
;\n }\n\n let parsedQuery: any;\n try {\n parsedQuery = gql([query]);\n } catch (ex) {\n return Query Error: {ex.message};\n }\n\n let currentVariables = parseVariables(props, context);\n\n return (\n {\n if (target) {\n // setValue(props, context, data[Object.getOwnPropertyNames(data)[0]], target);\n owner.setValue(target, data[Object.getOwnPropertyNames(data)[0]]);\n }\n if (onResult) {\n simpleHandle(props, onResult, context, data);\n }\n }}\n onError={(data: ApolloError) => {\n console.log(data);\n try {\n if (onError) {\n simpleHandle(props, onError, context, data);\n }\n if (error) {\n setError(null);\n }\n setError(data.message);\n } catch (ex) {\n setError(ex);\n }\n }}\n >\n {({ loading, error, data }: any) => {\n if (error) {\n return Query Error: {JSON.stringify(error, null, 2)};\n }\n if (loading) return loadingText;\n if (error) return `Error! ${error.message}`;\n\n let dataProps = { ...props };\n if (propTarget) {\n dataProps.dataProps = { [propTarget]: data[Object.getOwnPropertyNames(data)[0]] };\n }\n return createComponents(dataProps);\n }}\n \n );\n};\n\nexport const ApolloQueryView: FormComponent = {\n Component: observer(ApolloQuery)\n};\n","import React from 'react';\nimport { EditorComponent, FormComponentProps } from '@tomino/dynamic-form';\n\nimport { prop, propGroup, handlerProp } from '../editor/editor_common';\nimport { observer } from 'mobx-react';\nimport { thumbnails, variables } from './apollo_query.editor';\nimport { ApolloMutationView, ApolloMutationProps } from './apollo_mutation_view';\n\nimport gql from 'graphql-tag';\nimport { MockedProvider } from 'react-apollo/test-utils';\nimport { Context } from '../context';\nimport { getValue } from '../helpers';\nimport { EditorContext } from '../editor/editor_context';\n\nconst ApolloMutationEditorComponent = observer((props: FormComponentProps) => {\n const controlProps = props.formElement.props;\n const context = React.useContext(Context);\n const editorContext = React.useContext(EditorContext);\n\n const handler = getValue(props, context, 'clickHandler');\n if (editorContext.projectHandlers.indexOf(handler) === -1) {\n editorContext.projectHandlers.push(handler);\n }\n\n controlProps.mutation;\n\n let fakeData = getValue(props, context, 'fakeData');\n if (fakeData) {\n let data: any;\n try {\n data = eval(`(${fakeData.trim()})`);\n } catch (ex) {\n return Error parsing json: {ex.message}
;\n }\n\n const mocks = [\n {\n request: {\n query: gql([controlProps.mutation])\n },\n result: {\n data\n }\n }\n ];\n\n return (\n \n \n \n );\n }\n return ;\n});\n\nexport const ApolloMutationEditor: EditorComponent = {\n Component: ApolloMutationEditorComponent,\n title: 'Apollo Mutation',\n control: 'ApolloMutation',\n thumbnail: thumbnails,\n provider: true,\n group: 'Data',\n handlers: {\n newHandler({ owner, context, args: { current, previous } }) {\n context.projectHandlers.remove(previous);\n if (context.projectHandlers.some((s: string) => s === current)) {\n owner.setError('clickHandler', `Handler \"${current}\" exists`);\n return null;\n } else {\n context.projectHandlers.push(current);\n }\n owner.setError('clickHandler', '');\n owner.setValue('clickHandler', current);\n\n return current;\n }\n },\n props: {\n ...propGroup('Mutation', {\n mutation: prop({\n control: 'Code',\n props: {\n language: 'graphql'\n },\n type: 'string'\n })\n }),\n ...propGroup('Options', {\n target: prop({\n control: 'Select',\n props: {\n options: { handler: 'datasetSource' }\n }\n }),\n clickHandler: prop({\n documentation:\n 'Name of the handler that submits this mutation. You can assign this handler to any other component.',\n props: {\n value: {\n source: 'clickHandler',\n parse: 'newHandler'\n }\n }\n }),\n successAlert: prop({\n documentation: 'Displays an alert after successful mutation. Requires \"AlertProvider\"'\n }),\n errorAlert: prop({\n documentation: 'Displays an alert after failed mutation. Requires \"AlertProvider\"'\n })\n // loadingText: {\n // control: { source: 'loadingText', label: 'Loading Text' },\n // schema: { type: 'string' }\n // }\n }),\n ...variables,\n ...propGroup('Handlers', {\n onSubmit: handlerProp(),\n onResult: handlerProp(),\n onError: handlerProp()\n }),\n ...propGroup('Editor', {\n fakeData: prop({ control: 'Code', props: { language: 'javascript' } })\n })\n },\n defaultProps: {\n loadingText: 'Loading ...'\n }\n};\n","import * as React from 'react';\n\nimport { Mutation } from 'react-apollo';\nimport { FormComponentProps, FormComponent } from '@tomino/dynamic-form';\nimport gql from 'graphql-tag';\n\nimport { createComponents } from '../common';\nimport { ApolloError } from 'apollo-client';\nimport { observer } from 'mobx-react';\nimport { Context } from '../context';\nimport { parseParameter } from './apollo_query_view';\nimport { simpleHandle } from '../helpers';\nimport { Message } from 'semantic-ui-react';\n\nexport type ApolloMutationProps = {\n mutation: string;\n target: string;\n variables: { name: string; value: string; type: string }[];\n boundVariables: { name: string; source: string }[];\n onResult: string;\n onError: string;\n clickHandler: string;\n onSubmit: string;\n successAlert: string;\n errorAlert: string;\n fakeData: string;\n};\n\nexport const ApolloMutation = observer((props: FormComponentProps) => {\n const [error, setError] = React.useState(null);\n\n const {\n owner,\n formElement: {\n props: {\n mutation,\n target,\n onError,\n onResult,\n clickHandler,\n variables,\n boundVariables,\n onSubmit,\n successAlert,\n errorAlert\n }\n }\n } = props;\n\n const context = React.useContext(Context);\n\n if (!mutation) {\n return Please specify the mutation
;\n }\n\n let parsedMutation: any;\n try {\n parsedMutation = React.useMemo(() => gql([mutation]), [mutation]);\n } catch (ex) {\n return Mutation Error: {ex.message};\n }\n\n return (\n {\n if (target) {\n owner.setValue(target, data[Object.getOwnPropertyNames(data)[0]]);\n }\n if (onResult) {\n simpleHandle(props, onResult, context, data);\n }\n if (successAlert) {\n if (!context.alert) {\n throw new Error('You need to add AlertProvider');\n }\n context.alert.success(successAlert);\n }\n if (error) {\n setError(null);\n }\n }}\n onError={(data: ApolloError) => {\n try {\n if (onError) {\n simpleHandle(props, onError, context, data);\n }\n if (errorAlert) {\n if (!context.alert) {\n throw new Error('You need to add AlertProvider');\n }\n context.alert.error(errorAlert);\n }\n\n setError(data.message);\n } catch (ex) {\n setError(ex);\n }\n }}\n >\n {(mutate: any, { loading, error, data }: any) => {\n let handlers = props.handlers;\n if (clickHandler) {\n const newClickHandler = () => {\n let currentVariables: any = onSubmit\n ? simpleHandle(props, onSubmit, context, data)\n : {};\n if (currentVariables == null) {\n return;\n }\n if (variables) {\n for (let v of variables) {\n currentVariables[v.name] = parseParameter(v.value, v.type);\n }\n }\n if (boundVariables) {\n for (let v of boundVariables) {\n currentVariables[v.name] = owner.getValue(v.source);\n }\n }\n mutate({\n variables: currentVariables\n });\n };\n handlers = { ...handlers, [clickHandler]: newClickHandler };\n }\n const components = createComponents({\n ...props,\n handlers,\n extra: { loading, error, data }\n });\n if (error) {\n return (\n <>\n \n {/* Query Error: {JSON.stringify(error, null, 2)} */}\n
\n {components}\n \n );\n }\n return <>{components};\n }}\n \n );\n});\n\nexport const ApolloMutationView: FormComponent = {\n Component: ApolloMutation,\n toString: () => {\n throw new Error('Not Implemented');\n }\n};\n","import { EditorComponentCatalogue } from '@tomino/dynamic-form';\nimport { ReactRouterProviderEditor } from './react_router_editor';\nimport { ReactRouterRouteEditor } from './react_router_editor';\nimport { ReactRouterSwitchEditor } from './react_router_editor';\nimport { ReactRouterLinkEditor } from './react_router_editor';\nimport { ReactRouterRedirectEditor } from './react_router_editor';\n\nexport const catalogueEditor: EditorComponentCatalogue = {\n components: {\n ReactRouterProvider: ReactRouterProviderEditor,\n ReactRouterRoute: ReactRouterRouteEditor,\n ReactRouterSwitch: ReactRouterSwitchEditor,\n ReactRouterLink: ReactRouterLinkEditor,\n ReactRouterRedirect: ReactRouterRedirectEditor\n },\n cssClass: ''\n};\n","import React from 'react';\nimport { Label } from 'semantic-ui-react';\nimport { observer } from 'mobx-react';\n\nimport { MemoryRouter } from 'react-router';\n\nimport {\n EditorComponent,\n FormComponentProps,\n config,\n PropMap\n} from '@tomino/dynamic-form';\n\nimport {\n ReactRouterProvider,\n ReactRouterProps,\n ReactRouterRoute,\n ReactRouterSwitch,\n ReactRouterLinkView,\n RedirectProps\n} from './react_router_view';\n\nimport { root, createComponents } from '../common';\nimport { propGroup, prop, boundProp } from '../editor/editor_common';\nimport { DynamicComponent } from '../wrapper';\nimport { EditorDropCell } from '../editor/layouts_common_editor';\nimport { getValue } from '../helpers';\nimport { EditorContext } from '../editor/editor_context';\n\nexport const thumbnails = {\n dark:\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjE0NDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTQ0PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAg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',\n light:\n 'data:image/png;base64,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'\n};\n\n/* =========================================================\n Provider\n ======================================================== */\n\nconst DisabledRouter: React.FC> = props => (\n \n {createComponents(props)}\n \n);\n\nDisabledRouter.displayName = 'DisabledRouter';\n\nexport const ReactRouterProviderEditorComponent: React.FC<\n FormComponentProps\n> = props => {\n const context = React.useContext(EditorContext);\n let route = getValue(props, context, 'testRoute');\n return (\n \n );\n};\n\nexport const ReactRouterProviderEditor: EditorComponent = {\n Component: observer(ReactRouterProviderEditorComponent),\n title: 'React Router Provider',\n control: 'ReactRouterProvider',\n thumbnail: thumbnails,\n provider: true,\n group: 'React Router',\n props: propGroup('Editor', {\n testRoute: boundProp({\n documentation: 'This is useful during testing when a mocked provider can be used instead.'\n })\n })\n};\n\nexport const routeProps: PropMap = propGroup('Router', {\n exact: prop({\n group: 'Route',\n control: 'Checkbox',\n documentation:\n 'Allows to match the path \"exactly\". For example route \"/\" without \"exact\" would match also \"/home\"',\n label: 'Exact',\n type: 'boolean'\n }),\n path: prop({\n group: 'Route',\n label: 'Path',\n documentation: 'Path / Route to match',\n type: 'string'\n }),\n page: prop({\n control: 'Select',\n group: 'Route',\n label: 'Page',\n documentation: 'Page to display',\n props: {\n options: { handler: 'optionsProjectPages' }\n },\n type: 'string'\n })\n});\n\nexport const ReactRouterRouteEditor: EditorComponent = {\n Component: observer(ReactRouterRoute),\n title: 'Route',\n control: 'ReactRouterRoute',\n thumbnail: thumbnails,\n group: 'React Router',\n props: routeProps,\n handlers: {\n optionsProjectPages: ({ owner }) => {\n const form = root(owner);\n return form.pages\n ? form.pages.map(p => ({\n text: p.props.label,\n value: p.uid\n }))\n : [];\n }\n }\n};\n\n/* =========================================================\n Switch\n ======================================================== */\n\nexport const ReactRouterSwitchEditor: EditorComponent = {\n Component: observer(ReactRouterSwitch),\n title: 'Switch',\n control: 'ReactRouterSwitch',\n thumbnail: thumbnails,\n group: 'React Router',\n props: {\n config: prop({\n control: 'Table',\n props: { text: 'Routes' },\n elements: [\n {\n control: 'Input',\n props: { placeholder: 'path', label: 'Path', value: { source: 'path' } }\n },\n {\n control: 'Select',\n props: {\n label: 'Page',\n value: { source: 'page' },\n options: { handler: 'optionsProjectPages' }\n },\n documentation: 'Page to display'\n },\n {\n control: 'Checkbox',\n props: {\n label: 'Exact',\n width: '20px',\n value: { source: 'exact' }\n }\n }\n ],\n type: 'array',\n items: {\n type: 'object',\n properties: {\n exact: { type: 'boolean' },\n path: { type: 'string' },\n page: { type: 'string' }\n }\n }\n })\n }\n};\n\n/* =========================================================\n Link\n ======================================================== */\n\nexport const ReactRouterLinkEditor: EditorComponent = {\n Component: observer(ReactRouterLinkView.Component),\n title: 'Link',\n control: 'ReactRouterLink',\n thumbnail: thumbnails,\n group: 'React Router',\n props: propGroup('Router', {\n url: prop({\n label: 'Url',\n documentation:\n 'You can interpolate values using \"${}\" notation. For example \"This is my ${name}\", where name is a value from the dataset.',\n type: 'string'\n }),\n text: prop({\n label: 'Text',\n documentation:\n 'You can interpolate values using \"${}\" notation. For example \"This is my ${name}\", where name is a value from the dataset.',\n type: 'string'\n })\n })\n};\n\n/* =========================================================\n Link\n ======================================================== */\n\nexport const ReactRouterRedirectEditorComponent: React.FC<\n FormComponentProps\n> = observer(props => );\n\nexport const ReactRouterRedirectEditor: EditorComponent = {\n Component: observer(ReactRouterRedirectEditorComponent),\n title: 'Redirect',\n control: 'ReactRouterRedirect',\n icon: 'anchor',\n props: propGroup('Router', {\n url: prop({\n label: 'Url',\n documentation:\n 'You can interpolate values using \"${}\" notation. For example \"This is my ${name}\", where name is a value from the dataset.',\n type: 'string'\n })\n })\n};\n","import * as React from 'react';\n\nimport {\n BrowserRouter,\n Route,\n Link,\n Redirect,\n Switch,\n RouteComponentProps\n} from 'react-router-dom';\nimport { FormComponentProps, FormComponent } from '@tomino/dynamic-form';\nimport { createComponents, root, tryInterpolate } from '../common';\nimport { FormView } from '../form_view';\nimport { observer } from 'mobx-react';\nimport { DynamicComponent } from '../wrapper';\n\nexport type ReactRouterProps = {\n disable: boolean;\n testRoute: string;\n};\n\n/* =========================================================\n Provider\n ======================================================== */\n\nexport const ReactRouterProvider: React.FC> = props => {\n return {createComponents(props)};\n};\n\n/* =========================================================\n Route\n ======================================================== */\n\nexport type RouteProps = {\n path: string;\n page: string;\n exact?: boolean;\n};\n\ntype PropAssignProps = FormComponentProps & RouteComponentProps & { Component: any };\n\nexport class PageView extends React.PureComponent {\n assignParams() {\n if (this.props.match.params) {\n for (let key of Object.keys(this.props.match.params)) {\n try {\n if (this.props.owner.getValue(key) != this.props.match.params[key]) {\n this.props.owner.setValue(key, this.props.match.params[key]);\n }\n } catch (ex) {\n console.warn(ex);\n }\n }\n }\n }\n componentWillMount() {\n this.assignParams();\n }\n componentWillUpdate() {\n this.assignParams();\n }\n render() {\n return ;\n }\n}\n\nconst EmptyPage: React.FC> = props => (\n Please select a page ...\n);\n\nexport const ReactRouterRoute: React.FC> = props => {\n const Component = React.useMemo(() => {\n const page = root(props.formElement).pages.find(p => p.uid === props.formElement.props.page);\n\n if (!page) {\n return EmptyPage;\n }\n\n const RouteView = (routerProps: RouteComponentProps) => (\n \n );\n return RouteView;\n }, [props]);\n Component.displayName = 'MemoRoute';\n\n return (\n \n );\n};\n\nReactRouterRoute.displayName = 'ReactRouterRoute';\n\n/* =========================================================\n Switch\n ======================================================== */\n\nexport type SwitchProps = {\n config: RouteProps[];\n};\n\nexport const ReactRouterSwitch: React.FC> = props => {\n const { formElement, ...rest } = props;\n\n if (!props.formElement.props.config) {\n return null;\n }\n\n return (\n \n {props.formElement.props.config.map((c, i) => {\n return (\n \n );\n })}\n \n );\n};\n\nReactRouterSwitch.displayName = 'ReactRouterSwitch';\n\n/* =========================================================\n LINK\n ======================================================== */\n\nexport type LinkProps = {\n text: string;\n url: string;\n};\n\nconst ReactRouterLink: React.FC> = props => {\n const {\n owner,\n formElement,\n formElement: {\n props: { text, url }\n }\n } = props;\n return (\n \n {tryInterpolate(text, owner) ||\n (formElement.elements && formElement.elements.length && createComponents(props)) ||\n '[⚓︎ Link]'}\n \n );\n};\n\nexport const ReactRouterLinkView: FormComponent = {\n Component: observer(ReactRouterLink),\n toString: (owner, props) => {\n return `[${props.formElement.props.url}] ${tryInterpolate(props.formElement.props.url, owner)}`;\n }\n};\n\n/* =========================================================\n Redirect\n ======================================================== */\n\nexport type RedirectProps = {\n url: string;\n};\n\nexport const ReactRouterRedirect: React.FC> = ({\n owner,\n formElement: {\n props: { url }\n }\n}) => ;\n","import { EditorComponentCatalogue } from '@tomino/dynamic-form';\nimport { AlertProviderEditor } from './react_alert_provider_editor';\n\nexport const catalogueEditor: EditorComponentCatalogue = {\n components: {\n AlertProvider: AlertProviderEditor\n },\n cssClass: ''\n};\n","import { EditorComponent } from '@tomino/dynamic-form';\n\nimport { positions, transitions } from 'react-alert';\nimport { AlertProvider } from './react_alert_provider_view';\nimport { observer } from 'mobx-react';\nimport { propGroup, boundProp, prop } from '../editor/editor_common';\n\nexport const AlertProviderEditor: EditorComponent = {\n Component: observer(AlertProvider),\n title: 'Alert Provider',\n control: 'AlertProvider',\n icon: 'exclamation',\n group: 'Data',\n defaultProps: {\n position: positions.TOP_RIGHT,\n timeout: 5000,\n transition: transitions.SCALE,\n offset: '30px'\n },\n props: propGroup('Alert', {\n position: boundProp({\n control: 'Select',\n group: 'Alert',\n type: 'string',\n $enum: [\n {\n text: 'Top Right',\n value: positions.TOP_RIGHT\n },\n {\n text: 'Top Center',\n value: positions.TOP_CENTER\n },\n {\n text: 'Top Left',\n value: positions.TOP_LEFT\n },\n {\n text: 'Bottom Center',\n value: positions.BOTTOM_CENTER\n },\n {\n text: 'Bottom Left',\n value: positions.BOTTOM_LEFT\n },\n {\n text: 'Bottom Right',\n value: positions.BOTTOM_RIGHT\n },\n {\n text: 'Middle',\n value: positions.MIDDLE\n },\n {\n text: 'Middle Left',\n value: positions.MIDDLE_LEFT\n },\n {\n text: 'Middle Right',\n value: positions.MIDDLE_RIGHT\n }\n ]\n }),\n timeout: prop({ type: 'number' }),\n offset: prop(),\n transition: prop({\n control: 'Select',\n type: 'string',\n $enum: [\n {\n text: 'Fade',\n value: transitions.FADE\n },\n {\n text: 'Scale',\n value: transitions.SCALE\n }\n ]\n })\n })\n};\n","import React from 'react';\n\n// @ts-ignore\nimport AlertTemplate from 'react-alert-template-basic';\nimport { FormComponentProps } from '@tomino/dynamic-form';\nimport { Provider, AlertProviderProps, useAlert } from 'react-alert';\n\nimport { createComponents } from '../common';\nimport { Context } from '../context';\nimport { DynamicComponent } from '../wrapper';\n\nconst Init: React.FC = () => {\n const ctx = React.useContext(Context);\n ctx.alert = useAlert();\n return null;\n};\n\nconst controlProps = ['position', 'timeout', 'offset', 'transition'];\n\nexport const AlertProvider: React.FC> = props => (\n \n \n {createComponents(props)}\n \n);\n\nAlertProvider.displayName = 'AlertProvider';\n","import { EditorComponentCatalogue } from '@tomino/dynamic-form';\nimport { PrivateReactRouterRouteEditor } from './auth_editor';\n\nexport const catalogueEditor: EditorComponentCatalogue = {\n components: {\n PrivateReactRouterRoute: PrivateReactRouterRouteEditor\n },\n cssClass: ''\n};\n","import React from 'react';\nimport { EditorComponent, FormComponentProps } from '@tomino/dynamic-form';\n\nimport { routeProps } from '../../react-router/react_router_editor';\nimport { thumbnails } from '../../apollo/apollo_query.editor';\nimport { ReactRouterRoute } from '../../react-router/react_router_view';\nimport { observer } from 'mobx-react';\nimport { PrivateRouteProps, PrivateReactRouterRoute } from './auth_view';\nimport { propGroup, prop } from '../../editor/editor_common';\n\nconst PrivateReactRouterRouteEditorComponent: React.FC<\n FormComponentProps\n> = observer(props => {\n // const state = React.useContext(EditorContext);\n props.formElement.props.page;\n return props.formElement.props.disable ? (\n \n ) : (\n \n );\n});\n\nexport const PrivateReactRouterRouteEditor: EditorComponent = {\n Component: PrivateReactRouterRouteEditorComponent,\n title: 'Private Route',\n control: 'PrivateReactRouterRoute',\n thumbnail: thumbnails,\n group: 'React Router',\n props: propGroup('Router', {\n ...routeProps,\n disable: prop({\n label: 'Disable Auth',\n control: 'Checkbox',\n group: 'Route',\n type: 'boolean'\n })\n })\n};\n","import * as Gql from './gql';\n\nimport React from 'react';\nimport { Route, RouteComponentProps } from 'react-router';\nimport { FormComponentProps } from '@tomino/dynamic-form';\n\nimport { Context } from '../../context';\nimport { PageView, RouteProps } from '../../react-router/react_router_view';\nimport { root } from '../../common';\nimport Login from './login';\nimport { observer } from 'mobx-react';\n\n/* =========================================================\n Private Route\n ======================================================== */\n\nexport type PrivateRouteProps = RouteProps & {\n disable: boolean;\n};\n\nexport const LoggedInView = observer(\n (props: FormComponentProps & { result: any; routerProps: any }) => {\n const { routerProps } = props;\n const ctx = React.useContext(Context);\n\n const Component = React.useMemo(() => {\n const page = root(props.formElement).pages.find(p => p.uid === props.formElement.props.page);\n const RouteView = (routerProps: RouteComponentProps) => (\n \n );\n return RouteView;\n }, [props]);\n\n let user = ctx.auth.user;\n let token = localStorage.getItem(ctx.authToken);\n\n if (token && !user) {\n return (\n \n {(result: any) => {\n if (result.loading || !result.data) {\n return Authorising ...
;\n } else {\n if (result.error || !result.data.resume.user) {\n return ;\n } else {\n if (!ctx.auth.user) {\n ctx.auth.user = result.data.resume.user;\n ctx.auth.logout = () => {\n localStorage.removeItem(ctx.authToken);\n ctx.auth.user = null;\n };\n }\n return ;\n }\n }\n }}\n \n );\n } else if (user) {\n return ;\n } else {\n return ;\n }\n }\n);\n\nexport const PrivateReactRouterRoute: React.FC> = props => {\n // const ctx = React.useContext(Context);\n return (\n }\n />\n );\n};\n","import * as React from 'react';\n\nimport * as ReactApollo from 'react-apollo';\nimport gql from 'graphql-tag';\n\ntype Maybe = T | null;\n\n/* =========================================================\n Login\n ======================================================== */\n\nexport const LoginMutationDocument = gql`\n mutation LoginMutation($email: String!, $password: String!) {\n login(email: $email, password: $password) {\n token\n }\n }\n`;\n\nexport type LoginMutationVariables = {\n email: string;\n password: string;\n};\n\nexport type LoginMutationMutation = {\n __typename?: 'Mutation';\n\n login: Maybe;\n};\n\nexport type LoginMutationLogin = {\n __typename?: 'AuthPayload';\n\n token: Maybe;\n};\n\nexport class LoginMutationComponent extends React.Component<\n Partial>\n> {\n render() {\n return (\n \n mutation={LoginMutationDocument}\n {...(this as any)['props'] as any}\n />\n );\n }\n}\n\n/* =========================================================\n Resume\n ======================================================== */\n\nexport type ResumeQueryVariables = {\n token: string;\n};\n\nexport type ResumeQueryQuery = {\n __typename?: 'Mutation';\n\n resume: Maybe;\n};\n\nexport type ResumeMutationResume = {\n __typename?: 'AuthPayload';\n\n token: Maybe;\n\n user: Maybe;\n};\n\nexport type ResumeMutationUser = {\n __typename?: 'User';\n\n email: string;\n\n id: string;\n\n roles: Maybe<(Maybe)[]>;\n\n user: string;\n};\n\nexport const ResumeQueryDocument = gql`\n query ResumeQuery($token: String!) {\n resume(token: $token) {\n token\n user {\n email\n id\n roles\n user\n }\n }\n }\n`;\nexport class ResumeQueryComponent extends React.Component<\n Partial>\n> {\n render() {\n return (\n \n query={ResumeQueryDocument}\n {...(this as any)['props'] as any}\n />\n );\n }\n}\n\n/* =========================================================\n Signup\n ======================================================== */\n\nexport type SignupMutationVariables = {\n email: string;\n password: string;\n name: string;\n};\n\nexport type SignupMutationMutation = {\n __typename?: 'Mutation';\n\n signup: Maybe;\n};\n\nexport type SignupMutationSignup = {\n __typename?: 'AuthPayload';\n\n token: Maybe;\n};\n\nexport const SignupMutationDocument = gql`\n mutation SignupMutation($email: String!, $password: String!, $name: String!) {\n signup(email: $email, password: $password, name: $name) {\n token\n }\n }\n`;\nexport class SignupMutationComponent extends React.Component<\n Partial>\n> {\n render() {\n return (\n \n mutation={SignupMutationDocument}\n {...(this as any)['props'] as any}\n />\n );\n }\n}\n","import * as Gql from './gql';\n\nimport React from 'react';\nimport { Segment, Form, Button, Message } from 'semantic-ui-react';\nimport useReactRouter from 'use-react-router';\n\nimport { useMergeState, css } from '../../common';\nimport { Context, ContextType } from '../../context';\n\nconst loginSegment = css`\n margin: 16px !important;\n`;\n\nconst buttonRow = css`\n margin-top: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst Login = () => {\n const [state, changeState] = useMergeState({\n login: true, // switch between Login and SignUp\n email: '',\n password: '',\n name: '',\n error: false\n });\n const ctx = React.useContext(Context);\n\n const { login, email, password, name } = state;\n const { history } = useReactRouter();\n\n const saveUserData = (ctx: ContextType, token: string) => {\n localStorage.setItem(ctx.authToken, token);\n };\n\n const confirm = async (ctx: ContextType, data: any) => {\n const login = state.login ? data.login : data.signup;\n ctx.auth.user = login.user;\n saveUserData(ctx, login.token);\n history.push(`/`);\n changeState({ error: false });\n };\n\n console.log(state.error);\n\n return (\n \n \n \n );\n};\n\nexport default Login;\n","import * as React from 'react';\nimport { ToolBox as StyledToolBox } from '../editor_styles';\n\nimport { Menu, Input } from 'semantic-ui-react';\nimport { EditorComponentCatalogue } from '@tomino/dynamic-form';\nimport { groupByArray } from '@tomino/toolbelt';\n\nimport { PaneContent } from '../editor_styles';\nimport { generateId } from '../editor_common';\nimport { EditorContext } from '../editor_context';\nimport { ToolItem } from './tool_item';\nimport { css } from 'emotion';\n\ntype Props = {\n catalogue: EditorComponentCatalogue;\n};\n\nconst searchInput = css`\n position: absolute !important;\n left: 90px;\n right: 12px;\n top: 6px;\n bottom: 6px;\n`;\n\nexport const ToolBox: React.FC = ({ catalogue }) => {\n const editorState = React.useContext(EditorContext);\n const [filter, setFilter] = React.useState('');\n const items = Object.getOwnPropertyNames(catalogue.components)\n .map(key => catalogue.components[key])\n .sort((a, b) => (a.title < b.title ? -1 : 1));\n\n let filtered = filter\n ? items.filter(s => s.title.toLowerCase().indexOf(filter.toLowerCase()) >= 0)\n : items;\n\n let grouped = groupByArray(filtered, 'group').sort((a, b) => (a.key < b.key ? -1 : 1));\n\n return (\n \n \n
Controls
\n
setFilter(e.currentTarget.value)}\n />\n \n {props.children}\n
\n );\n};\n\nexport const noRoundCorners = css`\n border-radius: 0px !important;\n`;\n\nexport const pointers = css`\n > * > div {\n cursor: pointer;\n }\n`;\n\nconst common = `\n margin-left: -8px;\n padding-bottom: 5px;\n font-weight: bold;\n font-size: 11px;\n font-family: 'Courier';\n`;\n\nconst folderCommon = `\n color: black;\n font-weight: bold;\n font-size: 10px;\n font-family: 'Courier';\n margin-left: -10px;\n`;\n\nexport const list = (theme: Theme) => css`\n label: list;\n width: 100%;\n height: 100%;\n\n .label {\n float: right;\n }\n\n .selected {\n background: ${theme.selectedBackground};\n color: ${theme.selectedColor};\n border-radius: 3px;\n }\n\n .over {\n background: #aaa;\n border-radius: 3px;\n padding-left: 3px;\n margin-right: 6px;\n }\n\n .array {\n display: flex;\n }\n\n .import {\n display: flex;\n }\n\n .reference {\n display: flex;\n }\n\n .reference::after {\n content: 'T';\n color: white;\n ${folderCommon}\n }\n\n .import::after {\n content: 'I';\n ${folderCommon}\n }\n\n .array::after {\n content: 'A';\n ${folderCommon}\n }\n\n .string::after {\n content: 'S';\n ${common}\n }\n\n .integer::after {\n content: 'I';\n ${common}\n }\n\n .number::after {\n content: 'F';\n ${common}\n }\n\n .boolean::after {\n content: 'B';\n ${common}\n }\n\n .treeCaret {\n margin-right: 2px !important;\n flex: 1 1 16px;\n cursor: pointer;\n }\n\n .folder {\n font-weight: bold;\n flex: 1 1 100%;\n padding-left: 3px;\n cursor: pointer;\n }\n\n .pointer {\n cursor: pointer;\n }\n\n .item {\n display: flex;\n margin: 0px;\n padding: 1px 3px 1px 3px !important;\n align-items: center;\n justify-content: flex-start;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .item.folder i {\n margin-left: -5px !important;\n margin-right: 5px !important;\n }\n\n .item i {\n flex: 0 0 16px;\n margin-right: 6px;\n align-self: flex-start;\n width: 16px;\n }\n\n .item .content {\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n }\n\n .item.single {\n margin-left: 14px !important;\n }\n\n .item.single i {\n color: ${theme.invalidBackground};\n }\n\n .itemContent {\n padding-left: 12px;\n }\n\n .contentSimple {\n padding-left: 6px;\n }\n\n .link {\n width: 100%;\n cursor: pointer;\n padding: 0px 3px;\n }\n\n .meta {\n font-size: smaller;\n color: ${theme.meta};\n font-weight: normal;\n }\n\n a.single {\n color: ${theme.textColor};\n }\n`;\n\nexport const List = styleComponent(list);\n","import React from 'react';\nimport { names, Theme } from '../common';\nimport { EditorContext } from './editor_context';\n\nexport const styleComponent = (style: (theme: Theme) => string) => {\n const Styled = (props: any) => {\n const context = React.useContext(EditorContext);\n return (\n \n {props.children}\n
\n );\n };\n return Styled;\n};\n","import * as React from 'react';\n\nimport { FormElement, EditorComponent } from '@tomino/dynamic-form';\nimport { css, Theme, names } from '../../common';\n// import { calculateHorizontalPosition } from '../editor_common';\nimport { ToolIcon } from './tool_icon';\nimport { EditorContextType, EditorContext } from '../editor_context';\nimport { calculateHorizontalPosition } from '../editor_common';\nimport { clearAll } from '../../layouts/drag_drop';\n\nconst bareItem = (theme: Theme) => css`\n /* border: 1px solid #deded2;\n background-color: white;*/\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${theme.textColor};\n /* border-bottom: dotted 1px #444; */\n padding-bottom: 6px;\n padding-top: 6px;\n`;\n\nconst style = css`\n cursor: move;\n width: 100%;\n height: 100%;\n display: flex;\n`;\n\ninterface BoxProps {\n control: string;\n title: string;\n icon?: string;\n thumbnail?: {\n dark: string;\n light: string;\n };\n row?: number;\n column?: number;\n id: string;\n formElement?: FormElement;\n defaultChildren?: EditorComponent[];\n defaultProps?: { [index: string]: any };\n editorState: EditorContextType;\n}\n\nexport const ToolItem: React.FC = props => {\n const context = React.useContext(EditorContext);\n const { title, icon, children, thumbnail } = props;\n const onDrag = React.useCallback(\n (ev: React.DragEvent) => {\n context.dragItem = {\n name: props.control,\n row: props.row,\n column: props.column,\n element: props.formElement,\n id: props.id,\n position: calculateHorizontalPosition(ev),\n props: props.defaultProps,\n defaultChildren: props.defaultChildren\n };\n },\n [\n context.dragItem,\n props.column,\n props.control,\n props.defaultChildren,\n props.defaultProps,\n props.formElement,\n props.id,\n props.row\n ]\n );\n\n const onDragEnd = React.useCallback(() => clearAll(context), [context]);\n\n return (\n \n {children ? (\n children\n ) : (\n <>\n \n {title}\n \n )}\n \n );\n};\n","import React from 'react';\nimport { Icon } from 'semantic-ui-react';\n\nimport { css } from '../../common';\nimport { EditorContext } from '../editor_context';\n\nconst image = css`\n width: 16px;\n height: 16px;\n vertical-align: middle;\n margin-right: 6px;\n`;\n\ntype Props = {\n icon: string;\n thumbnail: { dark?: string; light?: string };\n title?: string;\n theme: any;\n};\n\nexport const ToolIcon = ({ icon, thumbnail, title }: Props) => {\n const context = React.useContext(EditorContext);\n return (\n <>\n {icon && }\n {thumbnail && (\n \n )}\n \n );\n};\n","import * as React from 'react';\n\nimport { FormView } from '../form_view';\nimport { FormViewProps } from '@tomino/dynamic-form';\nimport { css } from '../common';\n\nexport const formStyle = css`\n .disabled,\n :disabled {\n opacity: 1 !important;\n cursor: auto;\n }\n\n label {\n cursor: auto !important;\n }\n\n label:before {\n border: solid 1px #d4d4d5 !important;\n }\n`;\n\nexport const SemanticFormView: React.FC = props => (\n \n);\n","import { catalogue as vanilla } from './vanilla/catalogue';\nimport { catalogue as semantic } from './semantic/catalogue';\nimport { catalogue as apollo } from './apollo/catalogue';\nimport { catalogue as router } from './react-router/catalogue';\nimport { catalogue as alert } from './react-alert/catalogue';\nimport { catalogue as auth } from './semantic/auth-graphql-react-router/catalogue';\n\nimport { merge } from './helpers';\n\nexport const catalogue = merge(vanilla, semantic, apollo, router, alert, auth);\n","import { FormComponentCatalogue } from '@tomino/dynamic-form';\n\nimport { FormulaView } from './formula_view';\nimport { RepeaterView } from './repeater_view';\nimport { TextView, ImageView, LinkView, LinkSelectorView } from './text_view';\nimport { GridView } from '../layouts/grid_view';\nimport { StackView } from '../layouts/stack_view';\nimport { AuthItem } from './auth_item_view';\nimport { FlexView } from '../layouts/flex_view';\nimport { FormView } from '../form_view';\nimport { createComponent1 } from '../common';\n\nexport const catalogue: FormComponentCatalogue = {\n createComponent: createComponent1,\n cssClass: '',\n components: {\n AuthItem: AuthItem,\n EditorCell: null,\n Flex: FlexView,\n Form: FormView,\n Formula: FormulaView,\n Grid: GridView,\n Image: ImageView,\n Link: LinkView,\n LinkSelector: LinkSelectorView,\n Repeater: RepeaterView,\n Stack: StackView,\n Text: TextView\n }\n};\n","import { FormComponentCatalogue } from '@tomino/dynamic-form';\n\nimport { CheckboxView } from './checkbox_view';\nimport { InputView } from './input_view';\nimport { RadioView } from './radio_view';\nimport { TableView } from './table_view';\nimport { SignatureView } from './signature_view';\nimport { TextAreaView } from './textarea_view';\nimport { CommentView } from './comment_view';\nimport { SearchView } from './search_view';\nimport { DateView } from './date_time_view';\nimport { MenuView, MenuItem } from './menu_view';\nimport { TabView } from './tab_view';\nimport { ButtonView } from './buttons_view';\nimport { DropdownView } from './dropdown_view';\nimport { IconView } from './icon_view';\nimport { SegmentView } from './segment_view';\nimport { HeaderView } from './header_view';\nimport { IfView } from '../vanilla/if_view';\n\nexport const catalogue: FormComponentCatalogue = {\n cssClass: 'ui form',\n components: {\n // ApproveButton: ApproveButton,\n Button: ButtonView,\n Checkbox: CheckboxView,\n Comment: CommentView,\n Date: DateView,\n // DeleteButton: DeleteButton,\n Dropdown: DropdownView,\n EditorCell: null,\n Header: HeaderView,\n Icon: IconView,\n If: IfView,\n Input: InputView,\n Lookup: SearchView,\n Menu: MenuView,\n MenuItem: MenuItem,\n Radio: RadioView,\n // RejectButton: RejectButton,\n Segment: SegmentView,\n Search: SearchView,\n Signature: SignatureView,\n // SubmitButton: SubmitButton,\n Tabs: TabView,\n Table: TableView,\n Textarea: TextAreaView,\n Time: DateView\n }\n};\n","import { FormComponentCatalogue } from '@tomino/dynamic-form';\nimport { ApolloProviderView } from './apollo_provider_view';\nimport { ApolloQueryView } from './apollo_query_view';\nimport { ApolloMutation } from './apollo_mutation_view';\n\nexport const catalogue: FormComponentCatalogue = {\n components: {\n ApolloProvider: ApolloProviderView,\n ApolloQuery: ApolloQueryView,\n ApolloMutation: ApolloMutation\n },\n cssClass: ''\n};\n","import { FormComponentCatalogue } from '@tomino/dynamic-form';\nimport { ReactRouterProvider } from './react_router_view';\nimport { ReactRouterRoute } from './react_router_view';\nimport { ReactRouterSwitch } from './react_router_view';\nimport { ReactRouterLinkView } from './react_router_view';\nimport { ReactRouterRedirect } from './react_router_view';\n\nexport const catalogue: FormComponentCatalogue = {\n components: {\n ReactRouterProvider,\n ReactRouterRoute,\n ReactRouterSwitch,\n ReactRouterLink: ReactRouterLinkView,\n ReactRouterRedirect\n },\n cssClass: ''\n};\n","import { FormComponentCatalogue } from '@tomino/dynamic-form';\nimport { AlertProvider } from './react_alert_provider_view';\n\nexport const catalogue: FormComponentCatalogue = {\n components: {\n AlertProvider\n },\n cssClass: ''\n};\n","import { FormComponentCatalogue } from '@tomino/dynamic-form';\nimport { PrivateReactRouterRoute } from './auth_view';\n\nexport const catalogue: FormComponentCatalogue = {\n components: {\n PrivateReactRouterRoute\n },\n cssClass: ''\n};\n","import * as React from 'react';\n\nimport * as propertyHandlers from './property_panel.handlers';\n\nimport { observer } from 'mobx-react';\nimport { config, FormElement, FormComponentProps } from '@tomino/dynamic-form';\nimport { groupByArray, debounce } from '@tomino/toolbelt';\nimport { FormDataSet, SchemaDataSet } from '../form_store';\nimport { pointer, names, prop } from '../../common';\nimport { renderElements } from '../../properties/control_factory_helpers';\nimport { Help } from '../../properties/help_view';\nimport { EditorContext, EditorContextType } from '../editor_context';\nimport { Message, Button, Icon, InputProps } from 'semantic-ui-react';\nimport { pad12, paneContent, margin12, searchableSidePane } from '../editor_styles';\nimport { schemaPanel, schemaHandlers } from '../schema/schema_panel';\nimport { styledPropertyView } from './property_styles';\nimport { propertyPanel } from './property_panel';\nimport { findSchema, createPath } from '../editor_common';\nimport { DeleteSchema } from '../dataset/dataset_modals';\nimport { EditorState } from '../editor_state';\nimport { getValue } from '../../helpers';\nimport { Input } from 'semantic-ui-react';\n\n// import * as schemaHandlers from '../editor/schema/schema_panel.handlers';\n\nexport type RenderPropsProps = {\n groupName: string;\n props: FormElement[];\n activeElement: FormDataSet;\n handlers: any;\n filter: string;\n};\n\nexport const RenderProps = ({\n props,\n activeElement,\n groupName,\n handlers,\n filter\n}: RenderPropsProps) => {\n let i = 0;\n const groups = groupByArray(props, x => x.group || (x.props.display === 'group' ? i++ : ''));\n const editorState = React.useContext(EditorContext);\n\n return (\n <>\n {groups.map((g, i) => (\n \n {renderElements(\n editorState,\n g.key && (!g.values[0].props || g.values[0].props.display !== 'group')\n ? [\n {\n control: 'Group',\n props: {\n text: g.key || groupName\n },\n elements: g.values\n }\n ]\n : g.values,\n activeElement.props,\n handlers,\n null /* catalogue */,\n editorState,\n activeElement.uid,\n filter\n )}\n \n ))}\n \n );\n};\n\nfunction buildElementBreadcrumbs(\n context: EditorContextType,\n props: FormComponentProps,\n activeElement: FormDataSet\n) {\n let breadcrumbs: any[];\n\n if (activeElement) {\n let label = getValue(props, context, 'label');\n breadcrumbs = [\n \n {activeElement.control}\n {label && ` - ${label}`}\n \n ];\n breadcrumbs.push();\n\n let parent = activeElement.parent;\n let index = 0;\n while (parent != null && parent !== context.form) {\n let current = parent;\n if (parent.control) {\n if (breadcrumbs.length > 5) {\n breadcrumbs.push('...');\n return breadcrumbs;\n }\n breadcrumbs.push(\n context.project.state.setElement(current, context.schema)}\n >\n {parent.control}\n \n );\n breadcrumbs.push();\n }\n parent = parent.parent;\n }\n breadcrumbs.push(Element);\n }\n return breadcrumbs;\n}\n\nfunction buildSchemaBreadcrumbs(activeElement: SchemaDataSet, state: EditorState) {\n let breadcrumbs: any[];\n\n if (activeElement) {\n breadcrumbs = [\n \n {activeElement.title}\n \n ];\n breadcrumbs.push();\n\n let parent = activeElement.parent;\n let index = 0;\n while (parent != null && parent !== state.schema) {\n let current = parent;\n\n breadcrumbs.push(\n state.project.state.setSchema(current, current.title)}\n >\n {current.title}\n \n );\n breadcrumbs.push();\n parent = parent.parent;\n }\n breadcrumbs.push(Schema);\n }\n return breadcrumbs;\n}\n\nexport const PropertyEditor = observer(() => {\n const context = React.useContext(EditorContext);\n const [filter, setFilter] = React.useState('');\n const [searchProperty, setSearchProperty] = React.useState('');\n const debouncedSet = React.useMemo(() => debounce(setSearchProperty, 400), []);\n const handleSearch = React.useCallback(\n (_, props: InputProps) => {\n setFilter(props.value);\n debouncedSet(props.value);\n },\n [debouncedSet]\n );\n\n const { selectedElement, selectedSchema } = context.state;\n\n // subscribe to schema changes\n context.state.selectedSchemaName;\n\n const handlers = React.useMemo(() => {\n let result = propertyHandlers;\n if (context.editorCatalogue) {\n for (let key of Object.keys(context.editorCatalogue.components)) {\n const component = context.editorCatalogue.components[key];\n if (component.handlers) {\n result = { ...result, ...component.handlers };\n }\n }\n }\n return result;\n }, [context.editorCatalogue]);\n\n const activeElement =\n selectedElement &&\n selectedElement.control !== 'EditorCell' &&\n selectedElement.control !== '' &&\n selectedElement.control !== null\n ? selectedElement\n : null;\n let activeSchema = prop(activeElement)\n ? findSchema(activeElement, context.project.schema, context)\n : selectedSchema;\n\n // const foundSchema = searchSchema(s => s.)\n\n const editorElement =\n activeElement &&\n context.editorCatalogue &&\n context.editorCatalogue.components[activeElement.control];\n const parentEditorElement =\n activeElement &&\n activeElement.parent &&\n context.editorCatalogue &&\n context.editorCatalogue.components[activeElement.parent.control];\n\n const editorProps = React.useMemo(\n () =>\n editorElement\n ? context\n .cachedProps(editorElement)\n .filter(p => p.group === 'Editor')\n .concat(context.editorProps)\n : [],\n [context, editorElement]\n );\n const componentProps = React.useMemo(\n () =>\n editorElement ? context.cachedProps(editorElement).filter(p => p.group !== 'Editor') : [],\n [context, editorElement]\n );\n\n const childProps = parentEditorElement ? context.cachedChildProps(parentEditorElement) : [];\n\n if (activeElement && !editorElement) {\n throw new Error(`Control '${activeElement.control}' does not exists in the catalogue`);\n }\n\n let props: FormComponentProps = {\n catalogue: context.editorCatalogue,\n owner: activeElement,\n handlers,\n formElement: activeElement\n };\n\n let breadcrumbs: any = activeElement ? (\n buildElementBreadcrumbs(context, props, activeElement).reverse()\n ) : activeSchema ? (\n buildSchemaBreadcrumbs(activeSchema, context).reverse()\n ) : (\n Properties\n );\n\n return (\n \n
\n
\n \n
\n
\n {activeElement && (\n <>\n {/* Shared PROPS */}\n {!editorElement.provider && (\n
\n )}\n {/* Control Props */}\n {editorElement.props && (\n
\n )}\n\n {/* Child Props */}\n {parentEditorElement && parentEditorElement.childProps && (\n
\n )}\n\n {/* Editor Props */}\n
\n \n )}\n\n {activeElement && !activeSchema && prop(activeElement) && (\n
')}`}\n />\n )}\n {/* Schema Props */}\n {activeSchema &&\n renderElements(\n context,\n schemaPanel,\n activeSchema as any,\n schemaHandlers as any,\n null,\n context /* catalogue */,\n activeSchema.title,\n searchProperty\n )}\n\n {(activeElement || activeSchema) && }\n\n \n {activeElement &&\n activeElement.parent.parent &&\n (!activeElement.props || !activeElement.props.locked) && (\n \n )}\n {selectedSchema && }\n
\n \n
');\n }}\n >\n {group.key && (\n \n )}\n\n {display === 'topLabel' &&
}\n\n {group.values.map((formElement, i) => {\n display = formElement.props.display;\n\n return (\n \n {renderControl({ formElement, owner, handlers, catalogue, uid }, filter)}\n {prop(formElement) && (\n \n )}\n \n );\n })}\n \n );\n });\n}\n","import * as React from 'react';\n\nimport { FormElement, DataSet, Handlers, FormComponentCatalogue } from '@tomino/dynamic-form';\n\nimport { Group } from './group';\nimport { Input } from './input';\nimport { Select } from './select';\nimport { TextArea } from './textbox';\nimport { Checkbox } from './checkbox';\nimport { Map } from './map';\nimport { Value } from './value';\nimport { TableView } from './table';\nimport { Tuple } from './tuple';\nimport { CodeEditor } from './code';\nimport { EditorContextType } from '../editor/editor_context';\nimport { Binding } from './binding';\n\n// import { Map } from './map';\n// import { MapTable } from './map_table';\n\nexport function renderControl(\n props: {\n formElement: FormElement;\n owner: DataSet;\n handlers?: Handlers;\n catalogue: FormComponentCatalogue;\n uid: string;\n },\n filter?: string\n) {\n if (props.formElement.bound) {\n return ;\n }\n switch (props.formElement.control) {\n case 'Input':\n return ;\n case 'Code':\n return ;\n case 'Table':\n return ;\n case 'Value':\n return ;\n case 'Group':\n return ;\n case 'Select':\n return ;\n case 'Tuple':\n return ;\n case 'Textarea':\n return ;\n case 'Checkbox':\n return ;\n\n case 'Map':\n return ;\n // case 'MapTable':\n // return ;\n default:\n return ;\n }\n}\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\n\nimport { css, names, pointer, Theme } from '../common';\nimport { FormComponentProps } from '@tomino/dynamic-form';\nimport { renderElements } from './control_factory_helpers';\nimport { Icon } from 'semantic-ui-react';\nimport { EditorContext } from '../editor/editor_context';\nimport { getPropValue } from '../helpers';\n\nexport const groupLabel = (theme: Theme) => css`\n height: 30px;\n color: ${theme.headerColor};\n background-color: ${theme.headerBackground};\n display: flex;\n align-items: center;\n padding-left: 12px;\n border-top: 1px solid black;\n border-bottom: 1px solid black;\n white-space: nowrap;\n label: groupLabel;\n\n &.h1 {\n .group-label {\n font-size: 16px !important;\n }\n }\n &.h2 {\n padding: 0px !important;\n .group-label {\n font-size: 14px;\n margin-bottom: 3px;\n }\n }\n &.h3 {\n padding: 0px;\n .group-label {\n font-size: 12px;\n margin-bottom: 3px;\n }\n }\n i {\n flex: 0 0 18px;\n }\n span {\n flex: 1 1 100%;\n }\n .group-label.h3 {\n font-size: 12px !important;\n }\n`;\n\nconst groupContent = css`\n padding: 6px 12px;\n`;\n\ntype HeaderProps = {\n label: string;\n buttons: any;\n className?: string;\n bare?: boolean;\n};\n\nexport const PropertyHeader = observer(\n ({ children, label, buttons, bare = false, className }: React.Props & HeaderProps) => {\n const context = React.useContext(EditorContext);\n const groups = JSON.parse(localStorage.getItem('CORPIX_GROUPS') || '{}');\n const [expanded, setExpanded] = React.useState(groups[label] == null ? true : groups[label]);\n\n return (\n <>\n \n {\n const groups = JSON.parse(localStorage.getItem('CORPIX_GROUPS') || '{}');\n groups[label] = !expanded;\n localStorage.setItem('CORPIX_GROUPS', JSON.stringify(groups));\n setExpanded(!expanded);\n }}\n name={expanded ? 'caret down' : 'caret right'}\n />\n {label}\n \n {buttons}\n
\n {expanded && children && (\n {children}
\n )}\n \n );\n }\n);\n\ntype Props = {\n text: string;\n bare: boolean;\n};\n\nexport const Group = observer((controlProps: FormComponentProps & { filter: string }) => {\n const { formElement, owner, handlers, catalogue } = controlProps;\n const editorState = React.useContext(EditorContext);\n const { elements, props: props = {} as Props } = formElement;\n const text = props.text;\n const label = getPropValue(controlProps, elements[0], editorState, 'label');\n return (\n \n {elements &&\n renderElements(\n editorState,\n elements,\n owner,\n handlers,\n catalogue,\n editorState,\n controlProps.uid,\n controlProps.filter\n )}\n \n );\n});\n\nGroup.displayName = 'Group';\n","import * as React from 'react';\n\nimport { observer } from 'mobx-react';\nimport names from 'classnames';\n\nimport { parseProps, onChangeHandler, controlMargin } from './properties_common';\nimport { FormComponentProps } from '@tomino/dynamic-form';\nimport { EditorContext } from '../editor/editor_context';\nimport { tableRowFlex } from './properties_styles';\nimport { prop } from '../common';\n\nexport const Input = observer((componentProps: FormComponentProps) => {\n const context = React.useContext(EditorContext);\n const onChange = React.useMemo(\n () => onChangeHandler.bind({ props: componentProps, editorState: context }),\n [componentProps, context]\n );\n\n const { formElement, readOnly, owner } = componentProps;\n const { value, error, props = {} } = parseProps(componentProps, context, true);\n const source = prop(formElement);\n const schema = owner.getSchema(source);\n\n let type =\n schema.properties && schema.properties.value ? schema.properties.value.type : schema.type;\n\n return (\n \n
\n {props && props.inputLabel &&
{props.inputLabel}
}\n