@mtes-mct/monitor-ui 1.7.0 → 1.7.2
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 +14 -0
- package/fields/MultiCheckbox.d.ts +3 -2
- package/fields/MultiRadio.d.ts +3 -2
- package/package.json +1 -1
- package/src/fields/MultiCheckbox.js +2 -2
- package/src/fields/MultiCheckbox.js.map +1 -1
- package/src/fields/MultiRadio.js +2 -2
- package/src/fields/MultiRadio.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [1.7.1](https://github.com/MTES-MCT/monitor-ui/compare/v1.7.0...v1.7.1) (2022-11-29)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **fields:** make optional labels mandatory ([#42](https://github.com/MTES-MCT/monitor-ui/issues/42)) ([629c98a](https://github.com/MTES-MCT/monitor-ui/commit/629c98aee5df1717eb1435d79ec015623803bd58))
|
|
7
|
+
|
|
8
|
+
# [1.7.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.6.0...v1.7.0) (2022-11-29)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **fields:** add missing labels ([#40](https://github.com/MTES-MCT/monitor-ui/issues/40)) ([95f7215](https://github.com/MTES-MCT/monitor-ui/commit/95f7215f28dc389981874eae73445b645c959787))
|
|
14
|
+
|
|
1
15
|
# [1.6.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.5.1...v1.6.0) (2022-11-29)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -3,9 +3,10 @@ import type { Promisable } from 'type-fest';
|
|
|
3
3
|
export declare type MultiCheckboxProps = {
|
|
4
4
|
defaultValue?: string[];
|
|
5
5
|
isInline?: boolean;
|
|
6
|
-
|
|
6
|
+
isLabelHidden?: boolean;
|
|
7
|
+
label: string;
|
|
7
8
|
name: string;
|
|
8
9
|
onChange?: (nextValue: string[] | undefined) => Promisable<void>;
|
|
9
10
|
options: Option[];
|
|
10
11
|
};
|
|
11
|
-
export declare function MultiCheckbox({ defaultValue, isInline, label, name, onChange, options }: MultiCheckboxProps): JSX.Element;
|
|
12
|
+
export declare function MultiCheckbox({ defaultValue, isInline, isLabelHidden, label, name, onChange, options }: MultiCheckboxProps): JSX.Element;
|
package/fields/MultiRadio.d.ts
CHANGED
|
@@ -3,9 +3,10 @@ import type { Promisable } from 'type-fest';
|
|
|
3
3
|
export declare type MultiRadioProps = {
|
|
4
4
|
defaultValue?: string;
|
|
5
5
|
isInline?: boolean;
|
|
6
|
-
|
|
6
|
+
isLabelHidden?: boolean;
|
|
7
|
+
label: string;
|
|
7
8
|
name: string;
|
|
8
9
|
onChange?: (nextValue: string | undefined) => Promisable<void>;
|
|
9
10
|
options: Option[];
|
|
10
11
|
};
|
|
11
|
-
export declare function MultiRadio({ defaultValue, isInline, label, name, onChange, options }: MultiRadioProps): JSX.Element;
|
|
12
|
+
export declare function MultiRadio({ defaultValue, isInline, isLabelHidden, label, name, onChange, options }: MultiRadioProps): JSX.Element;
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@ import { Fieldset } from '../elements/Fieldset.js';
|
|
|
7
7
|
import { Legend } from '../elements/Legend.js';
|
|
8
8
|
import { Checkbox } from './Checkbox.js';
|
|
9
9
|
|
|
10
|
-
function MultiCheckbox({ defaultValue = [], isInline = false, label, name, onChange, options }) {
|
|
10
|
+
function MultiCheckbox({ defaultValue = [], isInline = false, isLabelHidden = false, label, name, onChange, options }) {
|
|
11
11
|
const checkedOptionValues = useRef(defaultValue);
|
|
12
12
|
const key = useMemo(() => `${name}-${JSON.stringify(defaultValue)}`, [defaultValue, name]);
|
|
13
13
|
const handleChange = useCallback((nextOptionValue, isChecked) => {
|
|
@@ -20,7 +20,7 @@ function MultiCheckbox({ defaultValue = [], isInline = false, label, name, onCha
|
|
|
20
20
|
onChange(normalizedNextValue);
|
|
21
21
|
}
|
|
22
22
|
}, [onChange]);
|
|
23
|
-
return (jsxs(Fieldset, { children: [
|
|
23
|
+
return (jsxs(Fieldset, { children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsx(ChecboxesBox, { isInline: isInline, children: options.map((option, index) => (jsx(Checkbox, { defaultChecked: defaultValue.includes(option.value), label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }))) })] }, key));
|
|
24
24
|
}
|
|
25
25
|
const ChecboxesBox = styled.div `
|
|
26
26
|
color: ${p => p.theme.color.gunMetal};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiCheckbox.js","sources":["../../../src/fields/MultiCheckbox.tsx"],"sourcesContent":["import { equals, reject } from 'ramda'\nimport { useCallback, useMemo, useRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Fieldset } from '../elements/Fieldset'\nimport { Legend } from '../elements/Legend'\nimport { Checkbox } from './Checkbox'\n\nimport type { Option } from '../types'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiCheckboxProps = {\n defaultValue?: string[]\n isInline?: boolean\n
|
|
1
|
+
{"version":3,"file":"MultiCheckbox.js","sources":["../../../src/fields/MultiCheckbox.tsx"],"sourcesContent":["import { equals, reject } from 'ramda'\nimport { useCallback, useMemo, useRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Fieldset } from '../elements/Fieldset'\nimport { Legend } from '../elements/Legend'\nimport { Checkbox } from './Checkbox'\n\nimport type { Option } from '../types'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiCheckboxProps = {\n defaultValue?: string[]\n isInline?: boolean\n isLabelHidden?: boolean\n label: string\n name: string\n onChange?: (nextValue: string[] | undefined) => Promisable<void>\n options: Option[]\n}\nexport function MultiCheckbox({\n defaultValue = [],\n isInline = false,\n isLabelHidden = false,\n label,\n name,\n onChange,\n options\n}: MultiCheckboxProps) {\n const checkedOptionValues = useRef<string[]>(defaultValue)\n\n const key = useMemo(() => `${name}-${JSON.stringify(defaultValue)}`, [defaultValue, name])\n\n const handleChange = useCallback(\n (nextOptionValue: string, isChecked: boolean) => {\n const nextCheckedOptionValues = isChecked\n ? [...checkedOptionValues.current, nextOptionValue]\n : reject(equals(nextOptionValue))(checkedOptionValues.current)\n\n checkedOptionValues.current = nextCheckedOptionValues\n\n if (onChange) {\n const normalizedNextValue = nextCheckedOptionValues.length ? nextCheckedOptionValues : undefined\n\n onChange(normalizedNextValue)\n }\n },\n [onChange]\n )\n\n return (\n <Fieldset key={key}>\n <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n <ChecboxesBox isInline={isInline}>\n {options.map((option, index) => (\n <Checkbox\n defaultChecked={defaultValue.includes(option.value)}\n label={option.label}\n name={`${name}${index}`}\n onChange={(isChecked: boolean) => handleChange(option.value, isChecked)}\n />\n ))}\n </ChecboxesBox>\n </Fieldset>\n )\n}\n\nconst ChecboxesBox = styled.div<{\n isInline: boolean\n}>`\n color: ${p => p.theme.color.gunMetal};\n display: flex;\n flex-direction: ${p => (p.isInline ? 'row' : 'column')};\n font-weight: 500;\n\n > .rs-checkbox {\n > .rs-checkbox-checker {\n padding-left: 28px;\n padding-top: 2px;\n\n .rs-checkbox-wrapper {\n left: 2px;\n top: 0 !important;\n }\n }\n }\n\n ${p =>\n p.isInline &&\n css`\n > .rs-checkbox:not(:first-child) {\n margin-left: 0.75rem;\n }\n `}\n`\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAoBM,SAAU,aAAa,CAAC,EAC5B,YAAY,GAAG,EAAE,EACjB,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACY,EAAA;AACnB,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAW,YAAY,CAAC,CAAA;IAE1D,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA,CAAE,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAA;IAE1F,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,eAAuB,EAAE,SAAkB,KAAI;QAC9C,MAAM,uBAAuB,GAAG,SAAS;cACrC,CAAC,GAAG,mBAAmB,CAAC,OAAO,EAAE,eAAe,CAAC;AACnD,cAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAA;AAEhE,QAAA,mBAAmB,CAAC,OAAO,GAAG,uBAAuB,CAAA;AAErD,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,MAAM,GAAG,uBAAuB,GAAG,SAAS,CAAA;YAEhG,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC9B,SAAA;AACH,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,QACEA,IAAC,CAAA,QAAQ,eACPC,GAAC,CAAA,MAAM,IAAC,QAAQ,EAAE,aAAa,EAAA,QAAA,EAAG,KAAK,EAAU,CAAA,EAEjDA,IAAC,YAAY,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAC7B,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MACzBA,IAAC,QAAQ,EAAA,EACP,cAAc,EAAE,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACnD,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,GAAG,IAAI,CAAA,EAAG,KAAK,CAAE,CAAA,EACvB,QAAQ,EAAE,CAAC,SAAkB,KAAK,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAAA,CACvE,CACH,CAAC,EAAA,CACW,KAZF,GAAG,CAaP,EACZ;AACH,CAAC;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAE7B,CAAA;WACS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;;AAElB,kBAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAA;;;;;;;;;;;;;;;AAepD,EAAA,EAAA,CAAC,IACD,CAAC,CAAC,QAAQ;AACV,IAAA,GAAG,CAAA,CAAA;;;;AAIF,IAAA,CAAA,CAAA;CACJ;;;;"}
|
package/src/fields/MultiRadio.js
CHANGED
|
@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
|
|
|
5
5
|
import { Fieldset } from '../elements/Fieldset.js';
|
|
6
6
|
import { Legend } from '../elements/Legend.js';
|
|
7
7
|
|
|
8
|
-
function MultiRadio({ defaultValue, isInline = false, label, name, onChange, options }) {
|
|
8
|
+
function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, label, name, onChange, options }) {
|
|
9
9
|
const [checkedOptionValue, setCheckedOptionValue] = useState(undefined);
|
|
10
10
|
const key = useMemo(() => `${name}-${String(checkedOptionValue)}}`, [checkedOptionValue, name]);
|
|
11
11
|
const handleChange = useCallback((nextOptionValue, isChecked) => {
|
|
@@ -22,7 +22,7 @@ function MultiRadio({ defaultValue, isInline = false, label, name, onChange, opt
|
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
setCheckedOptionValue(defaultValue);
|
|
24
24
|
}, [defaultValue]);
|
|
25
|
-
return (jsxs(Fieldset, { children: [
|
|
25
|
+
return (jsxs(Fieldset, { children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsx(ChecboxesBox, { isInline: isInline, children: options.map(option => (jsx(Radio, { defaultChecked: option.value === checkedOptionValue, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }))) })] }, key));
|
|
26
26
|
}
|
|
27
27
|
const ChecboxesBox = styled.div `
|
|
28
28
|
color: ${p => p.theme.color.gunMetal};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiRadio.js","sources":["../../../src/fields/MultiRadio.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Radio } from 'rsuite'\nimport styled, { css } from 'styled-components'\n\nimport { Fieldset } from '../elements/Fieldset'\nimport { Legend } from '../elements/Legend'\n\nimport type { Option } from '../types'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiRadioProps = {\n defaultValue?: string\n isInline?: boolean\n
|
|
1
|
+
{"version":3,"file":"MultiRadio.js","sources":["../../../src/fields/MultiRadio.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Radio } from 'rsuite'\nimport styled, { css } from 'styled-components'\n\nimport { Fieldset } from '../elements/Fieldset'\nimport { Legend } from '../elements/Legend'\n\nimport type { Option } from '../types'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiRadioProps = {\n defaultValue?: string\n isInline?: boolean\n isLabelHidden?: boolean\n label: string\n name: string\n onChange?: (nextValue: string | undefined) => Promisable<void>\n options: Option[]\n}\nexport function MultiRadio({\n defaultValue,\n isInline = false,\n isLabelHidden = false,\n label,\n name,\n onChange,\n options\n}: MultiRadioProps) {\n const [checkedOptionValue, setCheckedOptionValue] = useState<string | undefined>(undefined)\n\n const key = useMemo(() => `${name}-${String(checkedOptionValue)}}`, [checkedOptionValue, name])\n\n const handleChange = useCallback(\n (nextOptionValue: string, isChecked: boolean) => {\n const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined\n\n setCheckedOptionValue(nextCheckedOptionValue)\n\n if (onChange) {\n onChange(nextCheckedOptionValue)\n }\n },\n [onChange]\n )\n\n // TODO There may be a better solution.\n // A key change is not enough to force radio checked check changes\n // on `defaultValue` property update (even when appending `defaultValue` to `key`),\n // we need to force a second re-render in order for the changes to be applied.\n useEffect(() => {\n setCheckedOptionValue(defaultValue)\n }, [defaultValue])\n\n return (\n <Fieldset key={key}>\n <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n <ChecboxesBox isInline={isInline}>\n {options.map(option => (\n <Radio\n defaultChecked={option.value === checkedOptionValue}\n name={name}\n onChange={(_: any, isChecked: boolean) => handleChange(option.value, isChecked)}\n >\n {option.label}\n </Radio>\n ))}\n </ChecboxesBox>\n </Fieldset>\n )\n}\n\nconst ChecboxesBox = styled.div<{\n isInline: boolean\n}>`\n color: ${p => p.theme.color.gunMetal};\n display: flex;\n flex-direction: ${p => (p.isInline ? 'row' : 'column')};\n font-weight: 500;\n\n > .rs-radio {\n > .rs-radio-checker {\n padding-left: 28px;\n padding-top: 2px;\n\n .rs-radio-wrapper {\n left: 2px;\n top: 3px !important;\n }\n }\n }\n\n ${p =>\n p.isInline &&\n css`\n > .rs-radio:not(:first-child) {\n margin-left: 0.75rem;\n }\n `}\n`\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAmBM,SAAU,UAAU,CAAC,EACzB,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACS,EAAA;IAChB,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAA;IAE3F,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAG,EAAA,IAAI,CAAI,CAAA,EAAA,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC,CAAA;IAE/F,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,eAAuB,EAAE,SAAkB,KAAI;QAC9C,MAAM,sBAAsB,GAAG,SAAS,GAAG,eAAe,GAAG,SAAS,CAAA;QAEtE,qBAAqB,CAAC,sBAAsB,CAAC,CAAA;AAE7C,QAAA,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,sBAAsB,CAAC,CAAA;AACjC,SAAA;AACH,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;;;;;IAMD,SAAS,CAAC,MAAK;QACb,qBAAqB,CAAC,YAAY,CAAC,CAAA;AACrC,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AAElB,IAAA,QACEA,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,IAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,aAAa,EAAG,QAAA,EAAA,KAAK,EAAU,CAAA,EAEjDA,IAAC,YAAY,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAC7B,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,MAAM,KACjBA,GAAC,CAAA,KAAK,EACJ,EAAA,cAAc,EAAE,MAAM,CAAC,KAAK,KAAK,kBAAkB,EACnD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,CAAM,EAAE,SAAkB,KAAK,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAAA,QAAA,EAE9E,MAAM,CAAC,KAAK,EACP,CAAA,CACT,CAAC,EACW,CAAA,CAAA,EAAA,EAbF,GAAG,CAcP,EACZ;AACH,CAAC;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAE7B,CAAA;WACS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;;AAElB,kBAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAA;;;;;;;;;;;;;;;AAepD,EAAA,EAAA,CAAC,IACD,CAAC,CAAC,QAAQ;AACV,IAAA,GAAG,CAAA,CAAA;;;;AAIF,IAAA,CAAA,CAAA;CACJ;;;;"}
|