@kwiz/fluentui 1.0.2 → 1.0.4

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.
Files changed (5) hide show
  1. package/dist/controls/dropdown.d.ts +16 -5
  2. package/dist/controls/dropdown.js +20 -6
  3. package/dist/controls/dropdown.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/controls/dropdown.tsx +39 -16
package/dist/controls/dropdown.d.ts CHANGED
@@ -1,18 +1,29 @@
1
+ import { DropdownProps } from '@fluentui/react-components';
1
2
  import React from 'react';
2
- interface IProps<dataType, keyType extends string = string> {
3
- selected: keyType[];
3
+ type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
4
+ interface IProps<dataType, keyType extends string = string> extends ForwardProps {
5
+ required?: boolean;
6
+ selected: keyType | keyType[];
4
7
  items: {
5
8
  key: keyType;
6
9
  value: string;
7
10
  data?: dataType;
11
+ /** display complex controls in the drop down */
8
12
  option?: JSX.Element;
9
13
  }[];
10
- onSelect: (item: {
14
+ onSelect: (
15
+ /** the specific option that was selected/unselected */
16
+ option: {
11
17
  key: keyType;
12
18
  value: string;
13
19
  data?: dataType;
14
- }) => void;
15
- placeholder?: string;
20
+ },
21
+ /** only sent for multi select - all selected options, in case of multi select */
22
+ options?: {
23
+ key: keyType;
24
+ value: string;
25
+ data?: dataType;
26
+ }[]) => void;
16
27
  }
17
28
  export declare const DropdownEX: React.ForwardRefExoticComponent<IProps<unknown, string> & React.RefAttributes<HTMLButtonElement>>;
18
29
  export {};
package/dist/controls/dropdown.js CHANGED
@@ -1,13 +1,27 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Dropdown, Option } from '@fluentui/react-components';
3
- import { filterEmptyEntries, firstOrNull } from '@kwiz/common';
3
+ import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
4
4
  import React from 'react';
5
5
  function $DropdownEX(props, ref) {
6
- let text = filterEmptyEntries(props.selected.map(s => {
7
- let v = firstOrNull(props.items, i => i.key === s);
8
- return v ? v.value : '';
9
- })).join(', ');
10
- return (_jsx(Dropdown, { placeholder: props.placeholder, ref: ref, appearance: 'underline', selectedOptions: props.selected, value: text, children: props.items.map(i => _jsx(Option, { value: i.key, onClick: () => { props.onSelect(i); }, text: i.value, children: i.option ? i.option : i.value }, i.key)) }));
6
+ const selected = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
7
+ //sometimes control will lose value when re-rendered
8
+ //use case: public forms when editing other fields after the dropdown was set
9
+ //re-set the text value manually to fix
10
+ let text = Array.isArray(props.selected)
11
+ ? filterEmptyEntries(props.selected.map(s => {
12
+ let v = firstOrNull(props.items, i => i.key === s);
13
+ return v ? v.value : '';
14
+ })).join(', ')
15
+ : props.selected || "";
16
+ return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, ref: ref, clearable: !props.required && !props.multiselect, appearance: 'underline', selectedOptions: selected, value: text, onOptionSelect: (e, data) => {
17
+ let o = firstOrNull(props.items, i => i.key === data.optionValue);
18
+ if (props.multiselect) {
19
+ let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
20
+ props.onSelect(o, current);
21
+ }
22
+ else
23
+ props.onSelect(o);
24
+ }, children: props.items.map(i => _jsx(Option, { value: i.key, text: i.value, children: i.option ? i.option : i.value }, i.key)) })));
11
25
  }
12
26
  export const DropdownEX = React.forwardRef($DropdownEX);
13
27
  //# sourceMappingURL=dropdown.js.map
package/dist/controls/dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAChJ,IAAI,IAAI,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACjD,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,OAAO,CACH,KAAC,QAAQ,IAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAC,WAAW,EAAC,eAAe,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,YAClH,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAClD,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACrC,IAAI,EAAE,CAAC,CAAC,KAAK,YACf,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAHI,CAAC,CAAC,GAAG,CAGC,CAAC,GACnC,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC"}
1
+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAChJ,MAAM,QAAQ,GAAc,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvI,oDAAoD;IACpD,6EAA6E;IAC7E,uCAAuC;IACvC,IAAI,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;QACpC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;YACnD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACd,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC;IAE3B,OAAO,CACH,KAAC,QAAQ,oBAAU,KAAK,IAAE,QAAQ,EAAE,SAAS,EAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EACvG,UAAU,EAAC,WAAW,EAAC,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YACvF,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;YAClE,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;gBACpB,IAAI,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;gBACxF,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;YAC/B,CAAC;;gBACI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,YACA,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,YAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAlE,CAAC,CAAC,GAAG,CAAuE,CAAC,IACzG,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kwiz/fluentui",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "KWIZ common controls for FluentUI",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/controls/dropdown.tsx CHANGED
@@ -1,25 +1,48 @@
1
- import { Dropdown, Option } from '@fluentui/react-components';
2
- import { filterEmptyEntries, firstOrNull } from '@kwiz/common';
1
+ import { Dropdown, DropdownProps, Option } from '@fluentui/react-components';
2
+ import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
3
3
  import React from 'react';
4
4
 
5
- interface IProps<dataType, keyType extends string = string> {
6
- selected: keyType[];
7
- items: { key: keyType, value: string, data?: dataType, option?: JSX.Element; }[];
8
- onSelect: (item: { key: keyType, value: string, data?: dataType }) => void;
9
- placeholder?: string;
5
+ type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
6
+
7
+ interface IProps<dataType, keyType extends string = string> extends ForwardProps {
8
+ required?: boolean;
9
+ selected: keyType | keyType[];
10
+ items: {
11
+ key: keyType, value: string, data?: dataType,
12
+ /** display complex controls in the drop down */
13
+ option?: JSX.Element;
14
+ }[];
15
+ onSelect: (
16
+ /** the specific option that was selected/unselected */
17
+ option: { key: keyType, value: string, data?: dataType },
18
+ /** only sent for multi select - all selected options, in case of multi select */
19
+ options?: { key: keyType, value: string, data?: dataType }[]) => void;
10
20
  }
11
21
 
12
22
  function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
13
- let text = filterEmptyEntries(props.selected.map(s => {
14
- let v = firstOrNull(props.items, i => i.key === s);
15
- return v ? v.value : ''
16
- })).join(', ');
23
+ const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
24
+
25
+ //sometimes control will lose value when re-rendered
26
+ //use case: public forms when editing other fields after the dropdown was set
27
+ //re-set the text value manually to fix
28
+ let text = Array.isArray(props.selected)
29
+ ? filterEmptyEntries(props.selected.map(s => {
30
+ let v = firstOrNull(props.items, i => i.key === s);
31
+ return v ? v.value : ''
32
+ })).join(', ')
33
+ : props.selected || "";
34
+
17
35
  return (
18
- <Dropdown placeholder={props.placeholder} ref={ref} appearance='underline' selectedOptions={props.selected} value={text} >
19
- {props.items.map(i => <Option key={i.key} value={i.key}
20
- onClick={() => { props.onSelect(i); }}
21
- text={i.value}
22
- >{i.option ? i.option : i.value}</Option>)}
36
+ <Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
37
+ appearance='underline' selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
38
+ let o = firstOrNull(props.items, i => i.key === data.optionValue);
39
+ if (props.multiselect) {
40
+ let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
41
+ props.onSelect(o, current);
42
+ }
43
+ else props.onSelect(o);
44
+ }}>
45
+ {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
23
46
  </Dropdown>
24
47
 
25
48
  );