@talxis/base-controls 1.2602.2 → 1.2602.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,6 +4,7 @@ import { getColumnSelectorStyles } from './styles.js';
|
|
|
4
4
|
import { useModel } from '../../useModel.js';
|
|
5
5
|
import { Selector } from '../Selector/Selector.js';
|
|
6
6
|
import { useEditColumns } from '../useEditColumns.js';
|
|
7
|
+
import { Attribute } from '@talxis/client-libraries';
|
|
7
8
|
|
|
8
9
|
const ColumnSelector = (props) => {
|
|
9
10
|
const { openMenuOnMount } = props;
|
|
@@ -59,6 +60,7 @@ const ColumnSelector = (props) => {
|
|
|
59
60
|
placeholder: `${labels["add-column"]()}...`,
|
|
60
61
|
controlShouldRenderValue: false,
|
|
61
62
|
onInputChange: onInputChange,
|
|
63
|
+
getOptionValue: (column) => Attribute.GetNameFromAlias(column.name),
|
|
62
64
|
onKeyDown: (ev) => ev.key === 'Enter' && ref.current?.openMenu('first'),
|
|
63
65
|
loadOptions: (inputValue) => editColumnsModel.getAvailableColumns(inputValue),
|
|
64
66
|
onChange: (columns) => onChange(columns),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { InputActionMeta } from \"react-select\";\nimport { getColumnSelectorStyles } from \"./styles\";\nimport { useModel } from \"../../useModel\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { SelectInstance } from 'react-select';\nimport { IColumn } from \"@talxis/client-libraries\";\n\ninterface IColumnSelectorProps {\n openMenuOnMount?: boolean;\n}\n\n\nexport const ColumnSelector = (props: IColumnSelectorProps) => {\n const { openMenuOnMount } = props;\n const editColumnsModel = useEditColumns();\n const styles = useMemo(() => getColumnSelectorStyles(), []);\n const model = useModel();\n const labels = model.getLabels();\n const ref = React.useRef<SelectInstance>(null);\n const [defaultOptions, setDefaultOptions] = React.useState<IColumn[]>([]);\n const [inputValue, setInputValue] = React.useState<string>('');\n\n const onChange = (columns: IColumn[]) => {\n editColumnsModel.addColumn(columns[columns.length - 1]);\n setDefaultOptions([...defaultOptions]);\n setTimeout(() => {\n ref.current?.focusInput();\n }, 0);\n }\n\n const onInputChange = (value: string, actionMeta: InputActionMeta) => {\n switch (actionMeta.action) {\n case 'menu-close':\n case 'input-blur':\n case 'set-value': {\n value = actionMeta.prevInputValue;\n break;\n }\n }\n setInputValue(value);\n return value;\n }\n\n useEffect(() => {\n if (openMenuOnMount) {\n ref.current?.focus();\n ref.current?.openMenu('first');\n }\n (async () => {\n const options = await editColumnsModel.getAvailableColumns();\n //forces refresh of defaultOptions\n setDefaultOptions(options);\n })();\n }, []);\n\n\n return <Selector<true> onOverrideComponentProps={(props) => {\n return {\n ...props,\n ref: ref,\n isMulti: true,\n inputValue: inputValue,\n className: styles.root,\n backspaceRemovesValue: false,\n value: editColumnsModel.getColumns(),\n closeMenuOnSelect: false,\n hideSelectedOptions: true,\n defaultOptions: defaultOptions,\n placeholder: `${labels[\"add-column\"]()}...`,\n controlShouldRenderValue: false,\n onInputChange: onInputChange,\n onKeyDown: (ev) => ev.key === 'Enter' && ref.current?.openMenu('first'),\n loadOptions: (inputValue: string) => editColumnsModel.getAvailableColumns(inputValue),\n onChange: (columns) => onChange(columns as IColumn[]),\n }\n }} />\n}"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ColumnSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { InputActionMeta } from \"react-select\";\nimport { getColumnSelectorStyles } from \"./styles\";\nimport { useModel } from \"../../useModel\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { SelectInstance } from 'react-select';\nimport { Attribute, IColumn } from \"@talxis/client-libraries\";\n\ninterface IColumnSelectorProps {\n openMenuOnMount?: boolean;\n}\n\n\nexport const ColumnSelector = (props: IColumnSelectorProps) => {\n const { openMenuOnMount } = props;\n const editColumnsModel = useEditColumns();\n const styles = useMemo(() => getColumnSelectorStyles(), []);\n const model = useModel();\n const labels = model.getLabels();\n const ref = React.useRef<SelectInstance>(null);\n const [defaultOptions, setDefaultOptions] = React.useState<IColumn[]>([]);\n const [inputValue, setInputValue] = React.useState<string>('');\n\n const onChange = (columns: IColumn[]) => {\n editColumnsModel.addColumn(columns[columns.length - 1]);\n setDefaultOptions([...defaultOptions]);\n setTimeout(() => {\n ref.current?.focusInput();\n }, 0);\n }\n\n const onInputChange = (value: string, actionMeta: InputActionMeta) => {\n switch (actionMeta.action) {\n case 'menu-close':\n case 'input-blur':\n case 'set-value': {\n value = actionMeta.prevInputValue;\n break;\n }\n }\n setInputValue(value);\n return value;\n }\n\n useEffect(() => {\n if (openMenuOnMount) {\n ref.current?.focus();\n ref.current?.openMenu('first');\n }\n (async () => {\n const options = await editColumnsModel.getAvailableColumns();\n //forces refresh of defaultOptions\n setDefaultOptions(options);\n })();\n }, []);\n\n\n return <Selector<true> onOverrideComponentProps={(props) => {\n return {\n ...props,\n ref: ref,\n isMulti: true,\n inputValue: inputValue,\n className: styles.root,\n backspaceRemovesValue: false,\n value: editColumnsModel.getColumns(),\n closeMenuOnSelect: false,\n hideSelectedOptions: true,\n defaultOptions: defaultOptions,\n placeholder: `${labels[\"add-column\"]()}...`,\n controlShouldRenderValue: false,\n onInputChange: onInputChange,\n getOptionValue: (column) => Attribute.GetNameFromAlias(column.name),\n onKeyDown: (ev) => ev.key === 'Enter' && ref.current?.openMenu('first'),\n loadOptions: (inputValue: string) => editColumnsModel.getAvailableColumns(inputValue),\n onChange: (columns) => onChange(columns as IColumn[]),\n }\n }} />\n}"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/Selector/Selector.tsx"],"sourcesContent":["import { Attribute, IColumn } from \"@talxis/client-libraries\";\nimport { GroupBase, MenuProps } from 'react-select';\nimport { Callout, DirectionalHint, TooltipHost, useTheme } from \"@fluentui/react\";\nimport AsyncSelect from 'react-select/async';\nimport { AsyncProps } from 'react-select/dist/declarations/src/useAsync';\nimport { useModel } from \"../../useModel\";\nimport { components } from 'react-select';\nimport { useMemo } from \"react\";\nimport React from \"react\";\n\ntype ReactSelectProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> = AsyncProps<TColumn, IsMulti, GroupBase<TColumn>>;\n\ninterface ISelectorProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> {\n onOverrideComponentProps?: (props: ReactSelectProps<IsMulti, TColumn>) => ReactSelectProps<IsMulti, TColumn>\n}\n\nexport const Selector = <IsMulti extends boolean = false, TColumn extends IColumn = IColumn>(props: ISelectorProps<IsMulti, TColumn>) => {\n const theme = useTheme();\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((p) => p);\n const labels = useModel().getLabels();\n const id = useMemo(() => `selector-${window.crypto.randomUUID()}`, []);\n\n const MemoizedMenu = useMemo(() =>\n React.memo((props: any) => (\n <Callout\n directionalHint={DirectionalHint.leftTopEdge}\n target={`#${id}`}>\n <components.Menu {...props} />\n </Callout>\n )),\n [id]);\n\n const componentProps = onOverrideComponentProps({\n id: id,\n getOptionValue: (column
|
|
1
|
+
{"version":3,"file":"Selector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/Selector/Selector.tsx"],"sourcesContent":["import { Attribute, IColumn } from \"@talxis/client-libraries\";\nimport { GroupBase, MenuProps } from 'react-select';\nimport { Callout, DirectionalHint, TooltipHost, useTheme } from \"@fluentui/react\";\nimport AsyncSelect from 'react-select/async';\nimport { AsyncProps } from 'react-select/dist/declarations/src/useAsync';\nimport { useModel } from \"../../useModel\";\nimport { components } from 'react-select';\nimport { useMemo } from \"react\";\nimport React from \"react\";\n\ntype ReactSelectProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> = AsyncProps<TColumn, IsMulti, GroupBase<TColumn>>;\n\ninterface ISelectorProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> {\n onOverrideComponentProps?: (props: ReactSelectProps<IsMulti, TColumn>) => ReactSelectProps<IsMulti, TColumn>\n}\n\nexport const Selector = <IsMulti extends boolean = false, TColumn extends IColumn = IColumn>(props: ISelectorProps<IsMulti, TColumn>) => {\n const theme = useTheme();\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((p) => p);\n const labels = useModel().getLabels();\n const id = useMemo(() => `selector-${window.crypto.randomUUID()}`, []);\n\n const MemoizedMenu = useMemo(() =>\n React.memo((props: any) => (\n <Callout\n directionalHint={DirectionalHint.leftTopEdge}\n target={`#${id}`}>\n <components.Menu {...props} />\n </Callout>\n )),\n [id]);\n\n const componentProps = onOverrideComponentProps({\n id: id,\n getOptionValue: (column) => column.name,\n getOptionLabel: (column) => column.displayName ?? labels['no-name'](),\n noOptionsMessage: () => labels['no-result-found'](),\n maxMenuHeight: 600,\n isClearable: false,\n defaultOptions: true,\n styles: {\n option: (base) => {\n return {\n ...base,\n padding: 0,\n cursor: 'pointer',\n }\n },\n menu: () => {\n return {\n width: 300\n }\n }\n },\n theme: (base: any) => {\n return {\n ...base,\n colors: {\n ...base.colors,\n primary: theme.palette.themePrimary,\n primary75: theme.palette.themeLighterAlt,\n primary50: theme.palette.themeLight,\n primary25: theme.palette.themeLighter,\n }\n }\n },\n components: {\n Option: (props) => <components.Option {...props}>\n <TooltipHost\n content={props.data.name}\n >\n <div style={{ padding: '8px 12px' }}>\n {props.children}\n </div>\n </TooltipHost>\n </components.Option>,\n Menu: MemoizedMenu\n }\n })\n\n return <AsyncSelect {...componentProps} />\n}"],"names":["_jsx"],"mappings":";;;;;;;AAgBa,MAAA,QAAQ,GAAG,CAAqE,KAAuC,KAAI;AACpI,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9E,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;AACtC,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAY,SAAA,EAAA,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAEvE,MAAM,YAAY,GAAG,OAAO,CAAC,MACzB,KAAK,CAAC,IAAI,CAAC,CAAC,KAAU,MAClBA,GAAC,CAAA,OAAO,EACJ,EAAA,eAAe,EAAE,eAAe,CAAC,WAAW,EAC5C,MAAM,EAAE,CAAA,CAAA,EAAI,EAAE,CAAE,CAAA,EAAA,QAAA,EAChBA,GAAC,CAAA,UAAU,CAAC,IAAI,OAAK,KAAK,EAAA,CAAI,GACxB,CACb,CAAC,EACF,CAAC,EAAE,CAAC,CAAC,CAAC;IAEV,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAC5C,QAAA,EAAE,EAAE,EAAE;QACN,cAAc,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI;AACvC,QAAA,cAAc,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QACrE,gBAAgB,EAAE,MAAM,MAAM,CAAC,iBAAiB,CAAC,EAAE;AACnD,QAAA,aAAa,EAAE,GAAG;AAClB,QAAA,WAAW,EAAE,KAAK;AAClB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,CAAC,IAAI,KAAI;gBACb,OAAO;AACH,oBAAA,GAAG,IAAI;AACP,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,MAAM,EAAE,SAAS;iBACpB,CAAA;aACJ;YACD,IAAI,EAAE,MAAK;gBACP,OAAO;AACH,oBAAA,KAAK,EAAE,GAAG;iBACb,CAAA;aACJ;AACJ,SAAA;AACD,QAAA,KAAK,EAAE,CAAC,IAAS,KAAI;YACjB,OAAO;AACH,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE;oBACJ,GAAG,IAAI,CAAC,MAAM;AACd,oBAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACnC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;AACxC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;AACnC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACxC,iBAAA;aACJ,CAAA;SACJ;AACD,QAAA,UAAU,EAAE;AACR,YAAA,MAAM,EAAE,CAAC,KAAK,KAAKA,GAAC,CAAA,UAAU,CAAC,MAAM,OAAK,KAAK,EAAA,QAAA,EAC3CA,IAAC,WAAW,EAAA,EACR,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAA,QAAA,EAExBA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAC9B,QAAA,EAAA,KAAK,CAAC,QAAQ,EAAA,CACb,GACI,EACE,CAAA;AACpB,YAAA,IAAI,EAAE,YAAY;AACrB,SAAA;AACJ,KAAA,CAAC,CAAA;AAEF,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,cAAc,GAAI,CAAA;AAC9C;;;;"}
|