@mtes-mct/monitor-ui 1.5.0 → 1.5.1
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# [1.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.4.0...v1.5.0) (2022-11-29)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **fields:** add MultiSelect ([#26](https://github.com/MTES-MCT/monitor-ui/issues/26)) ([e1123b1](https://github.com/MTES-MCT/monitor-ui/commit/e1123b1e09dd55135b6806fdbe7615eab5f65704))
|
|
7
|
+
* **fields:** add Textarea ([#30](https://github.com/MTES-MCT/monitor-ui/issues/30)) ([0cd9b13](https://github.com/MTES-MCT/monitor-ui/commit/0cd9b132b0607b109dbec4ec54e7184e71b8f9d9))
|
|
8
|
+
* **fields:** add TextInput ([#28](https://github.com/MTES-MCT/monitor-ui/issues/28)) ([cdd610f](https://github.com/MTES-MCT/monitor-ui/commit/cdd610f679bfb967f2f6403f9c4c397bfafb0948))
|
|
9
|
+
* **formiks:** add FormikMultiSelect ([#27](https://github.com/MTES-MCT/monitor-ui/issues/27)) ([414c4da](https://github.com/MTES-MCT/monitor-ui/commit/414c4dad1a6a639ae4b1f7cbf61f851d778f08b7))
|
|
10
|
+
* **formiks:** add FormikTextarea ([#31](https://github.com/MTES-MCT/monitor-ui/issues/31)) ([59aa260](https://github.com/MTES-MCT/monitor-ui/commit/59aa260cc8efeec29d795d73261bc77263b67ab4))
|
|
11
|
+
* **formiks:** add FormikTextInput ([#29](https://github.com/MTES-MCT/monitor-ui/issues/29)) ([8feddd3](https://github.com/MTES-MCT/monitor-ui/commit/8feddd39d05484a2c2469e019baacf5b60a10000))
|
|
12
|
+
|
|
1
13
|
# [1.4.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.3.0...v1.4.0) (2022-11-28)
|
|
2
14
|
|
|
3
15
|
|
package/fields/MultiSelect.d.ts
CHANGED
|
@@ -3,8 +3,10 @@ import type { TagPickerProps } from 'rsuite';
|
|
|
3
3
|
import type { Promisable } from 'type-fest';
|
|
4
4
|
export declare type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {
|
|
5
5
|
defaultValue?: string[];
|
|
6
|
+
/** Width in REM */
|
|
7
|
+
fixedWidth?: number;
|
|
6
8
|
name: string;
|
|
7
9
|
onChange?: (nextValue: string[] | undefined) => Promisable<void>;
|
|
8
10
|
options: Option[];
|
|
9
11
|
};
|
|
10
|
-
export declare function MultiSelect({ onChange, options, searchable, ...originalProps }: MultiSelectProps): JSX.Element;
|
|
12
|
+
export declare function MultiSelect({ fixedWidth, onChange, options, searchable, ...originalProps }: MultiSelectProps): JSX.Element;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import { useMemo, useCallback } from 'react';
|
|
|
3
3
|
import { TagPicker } from 'rsuite';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
|
|
6
|
-
function MultiSelect({ onChange, options,
|
|
6
|
+
function MultiSelect({ fixedWidth = 5, onChange, options,
|
|
7
7
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
8
8
|
searchable = false, ...originalProps }) {
|
|
9
9
|
const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
|
|
@@ -14,10 +14,13 @@ searchable = false, ...originalProps }) {
|
|
|
14
14
|
const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
|
|
15
15
|
onChange(normalizedNextValue);
|
|
16
16
|
}, [onChange]);
|
|
17
|
-
return jsx(StyledTagPicker, { data: options, onChange: handleChange, searchable: searchable, ...originalProps }, key);
|
|
17
|
+
return (jsx(StyledTagPicker, { data: options, fixedWidth: fixedWidth, onChange: handleChange, searchable: searchable, ...originalProps }, key));
|
|
18
18
|
}
|
|
19
|
+
// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
|
|
20
|
+
// We should hack that.
|
|
19
21
|
const StyledTagPicker = styled(TagPicker) `
|
|
20
22
|
cursor: pointer;
|
|
23
|
+
width: ${p => p.fixedWidth}rem;
|
|
21
24
|
|
|
22
25
|
> .rs-picker-toggle {
|
|
23
26
|
cursor: inherit;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.js","sources":["../../../src/fields/MultiSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n defaultValue?: string[]\n name: string\n onChange?: (nextValue: string[] | undefined) => Promisable<void>\n options: Option[]\n}\nexport function MultiSelect({\n onChange,\n options,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n searchable = false,\n ...originalProps\n}: MultiSelectProps) {\n const key = useMemo(\n () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n [originalProps.defaultValue, originalProps.name]\n )\n\n const handleChange = useCallback(\n (nextValue: string[] | null) => {\n if (!onChange) {\n return\n }\n\n const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue\n\n onChange(normalizedNextValue)\n },\n [onChange]\n )\n\n return <StyledTagPicker
|
|
1
|
+
{"version":3,"file":"MultiSelect.js","sources":["../../../src/fields/MultiSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n defaultValue?: string[]\n /** Width in REM */\n fixedWidth?: number\n name: string\n onChange?: (nextValue: string[] | undefined) => Promisable<void>\n options: Option[]\n}\nexport function MultiSelect({\n fixedWidth = 5,\n onChange,\n options,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n searchable = false,\n ...originalProps\n}: MultiSelectProps) {\n const key = useMemo(\n () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n [originalProps.defaultValue, originalProps.name]\n )\n\n const handleChange = useCallback(\n (nextValue: string[] | null) => {\n if (!onChange) {\n return\n }\n\n const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue\n\n onChange(normalizedNextValue)\n },\n [onChange]\n )\n\n return (\n <StyledTagPicker\n key={key}\n data={options}\n fixedWidth={fixedWidth}\n onChange={handleChange}\n searchable={searchable}\n {...originalProps}\n />\n )\n}\n\n// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.\n// We should hack that.\nconst StyledTagPicker = styled(TagPicker)<{\n fixedWidth: number\n}>`\n cursor: pointer;\n width: ${p => p.fixedWidth}rem;\n\n > .rs-picker-toggle {\n cursor: inherit;\n }\n`\n"],"names":["_jsx"],"mappings":";;;;;AAgBM,SAAU,WAAW,CAAC,EAC1B,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACC,EAAA;AACjB,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAA0B,KAAI;QAC7B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAEnF,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,QACEA,GAAC,CAAA,eAAe,EAEd,EAAA,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EALZ,EAAA,GAAG,CAMR,EACH;AACH,CAAC;AAED;AACA;AACA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAEvC,CAAA;;AAES,SAAA,EAAA,CAAC,IAAI,CAAC,CAAC,UAAU,CAAA;;;;;CAK3B;;;;"}
|