@webiny/ui 5.34.4 → 5.34.5-beta.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/Accordion/Accordion.stories.js.map +1 -1
- package/Alert/Alert.stories.js.map +1 -1
- package/AutoComplete/AutoComplete.js.map +1 -1
- package/AutoComplete/MultiAutoComplete.js.map +1 -1
- package/Button/CopyButton/CopyButton.stories.js.map +1 -1
- package/Button/IconButton/IconButton.stories.js.map +1 -1
- package/Chips/Chips.stories.js.map +1 -1
- package/ConfirmationDialog/ConfirmationDialog.js.map +1 -1
- package/ConfirmationDialog/ConfirmationDialog.stories.js.map +1 -1
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Drawer/Drawer.stories.js.map +1 -1
- package/Elevation/Elevation.stories.js.map +1 -1
- package/Grid/Grid.stories.js.map +1 -1
- package/Icon/Icon.stories.js.map +1 -1
- package/ImageEditor/ImageEditor.js.map +1 -1
- package/ImageEditor/toolbar/crop.js.map +1 -1
- package/ImageEditor/toolbar/filter.js.map +1 -1
- package/ImageEditor/toolbar/flip.js.map +1 -1
- package/ImageUpload/ImageEditorDialog.js.map +1 -1
- package/ImageUpload/MultiImageUpload.js.map +1 -1
- package/List/DataList/DataList.stories.js.map +1 -1
- package/List/DataList/NoData.js.map +1 -1
- package/List/List.stories.js.map +1 -1
- package/Menu/Menu.stories.js.map +1 -1
- package/Ripple/Ripple.stories.js.map +1 -1
- package/Scrollbar/Scrollbar.stories.js.map +1 -1
- package/Section/Section.stories.js.map +1 -1
- package/Select/Select.stories.js.map +1 -1
- package/Snackbar/Snackbar.stories.js.map +1 -1
- package/Tabs/Tabs.stories.js.map +1 -1
- package/Tooltip/Tooltip.stories.js.map +1 -1
- package/TopProgressBar/TopProgressBar.stories.js.map +1 -1
- package/Typography/Typography.stories.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Accordion","AccordionItem"],"sources":["Accordion.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { ReactComponent as SettingsIcon } from \"./icons/round-settings-24px.svg\";\n\nconst story = storiesOf(\"Components/Accordion\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Accordion\"}>\n <StorySandboxExample>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </StorySandboxExample>\n <StorySandboxCode>\n <div>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </div>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Accordion, AccordionItem] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,oBAAD,qBACI,6BAAC,4BAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,WAAW,EAAC,sBAHhB;IAII,IAAI;EAJR,gBAMI,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Accordion","AccordionItem"],"sources":["Accordion.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { ReactComponent as SettingsIcon } from \"./icons/round-settings-24px.svg\";\n\nconst story = storiesOf(\"Components/Accordion\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Accordion\"}>\n <StorySandboxExample>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </StorySandboxExample>\n <StorySandboxCode>\n <div>\n <Accordion>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 1\"\n description=\"Settings description\"\n open\n >\n <div>Inner child 1</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 2\"\n description=\"Settings description\"\n >\n <div>Inner child 2</div>\n </AccordionItem>\n <AccordionItem\n icon={<SettingsIcon />}\n title=\"Settings 3\"\n description=\"Settings description\"\n >\n <div>Inner child 3</div>\n </AccordionItem>\n </Accordion>\n </div>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Accordion, AccordionItem] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,oBAAD,qBACI,6BAAC,4BAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,WAAW,EAAC,sBAHhB;IAII,IAAI;EAJR,gBAMI,0CAAK,eAAL,CANJ,CADJ,eASI,6BAAC,4BAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,WAAW,EAAC;EAHhB,gBAKI,0CAAK,eAAL,CALJ,CATJ,eAgBI,6BAAC,4BAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,WAAW,EAAC;EAHhB,gBAKI,0CAAK,eAAL,CALJ,CAhBJ,CADJ,CADJ,eA2BI,6BAAC,uBAAD,qBACI,uDACI,6BAAC,oBAAD,qBACI,6BAAC,4BAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,WAAW,EAAC,sBAHhB;IAII,IAAI;EAJR,gBAMI,0CAAK,eAAL,CANJ,CADJ,eASI,6BAAC,4BAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,WAAW,EAAC;EAHhB,gBAKI,0CAAK,eAAL,CALJ,CATJ,eAgBI,6BAAC,4BAAD;IACI,IAAI,eAAE,6BAAC,iCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,WAAW,EAAC;EAHhB,gBAKI,0CAAK,eAAL,CALJ,CAhBJ,CADJ,CADJ,CA3BJ,CAFJ,CADJ;AA6DH,CAhEL,EAiEI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oBAAD,EAAYC,4BAAZ;EAAd;AAAR,CAjEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Alert"],"sources":["Alert.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { Alert } from \"./Alert\";\n\nconst story = storiesOf(\"Components/Alert\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Info\"}>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n <StorySandbox>\n <StorySandboxExample title={\"Danger\"}>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Alert] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Alert"],"sources":["Alert.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { Alert } from \"./Alert\";\n\nconst story = storiesOf(\"Components/Alert\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Info\"}>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"info\"}>\n We failed to fetch your data.\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n <StorySandbox>\n <StorySandboxExample title={\"Danger\"}>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxExample>\n <StorySandboxCode>\n <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n Please contact support!\n </Alert>\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Alert] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,GAAqD,+BAArD,CADJ,CADJ,eAMI,6BAAC,uBAAD,qBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,GAAqD,+BAArD,CADJ,CANJ,CAFJ,eAcI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,GAAuD,yBAAvD,CADJ,CADJ,eAMI,6BAAC,uBAAD,qBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,GAAuD,yBAAvD,CADJ,CANJ,CAdJ,CADJ;AA6BH,CAhCL,EAiCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAD;EAAd;AAAR,CAjCJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","classNames","AutoComplete","inputValue","React","createRef","previousProps","props","value","options","previousValue","item","find","option","getOptionValue","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","suggestionList","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n top: \"unset !important\",\n bottom: 75\n});\n\nconst listStyles = css({\n \"&.autocomplete__options-list\": {\n listStyle: \"none\",\n paddingLeft: 0,\n \"& li\": {\n margin: 0\n }\n }\n});\n\nexport enum Placement {\n top = \"top\",\n bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n placement?: Placement;\n\n /* A callback that is executed each time a value is changed. */\n onChange?: (value: any, selection?: any) => void;\n\n /* If true, will show a loading spinner on the right side of the input. */\n loading?: boolean;\n\n /* A component that renders supporting UI in case of no result found. */\n noResultFound?: React.ReactNode;\n}\n\ninterface State {\n inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n return (\n <MaterialSpinner\n size={24}\n spinnerColor={\"var(--mdc-theme-primary)\"}\n spinnerWidth={2}\n visible\n />\n );\n};\n\ninterface RenderOptionsParams\n extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n options: AutoCompleteProps[\"options\"];\n placement?: Placement;\n}\n\ninterface OptionsListProps {\n placement?: Placement;\n getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n return (\n <Elevation\n z={1}\n className={classNames({\n [menuStyles]: placement === Placement.top\n })}\n >\n <ul\n className={classNames(\"autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {children}\n </ul>\n </Elevation>\n );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n static defaultProps: Partial<AutoCompleteProps> = {\n valueProp: \"id\",\n textProp: \"name\",\n options: [],\n placement: Placement.bottom,\n /**\n * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n */\n renderItem(item: any) {\n return (\n <Typography use={\"body2\"}>\n {getOptionText(item, (this as unknown as AutoComplete).props)}\n </Typography>\n );\n }\n };\n\n public override state: State = {\n inputValue: \"\"\n };\n\n /**\n * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n */\n downshift: any = React.createRef();\n\n public override componentDidUpdate(previousProps: AutoCompleteProps) {\n const { value, options } = this.props;\n const { value: previousValue } = previousProps;\n\n if (!isEqual(value, previousValue)) {\n let item = null;\n\n if (value) {\n if (typeof value === \"object\") {\n item = value;\n } else {\n item =\n options.find(option => {\n return value === getOptionValue(option, this.props);\n }) || null;\n }\n }\n\n const { current: downshift } = this.downshift;\n downshift && downshift.selectItem(item);\n }\n }\n\n /**\n * Renders options - based on user's input. It will try to match input text with available options.\n */\n private renderOptions({\n options,\n isOpen,\n highlightedIndex,\n selectedItem,\n getMenuProps,\n getItemProps,\n placement\n }: RenderOptionsParams) {\n if (!isOpen) {\n return null;\n }\n /**\n * Suggest user to start typing when there are no options available to choose from.\n */\n if (!this.state.inputValue && !options.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>Start typing to find entry</Typography>\n </li>\n </OptionsList>\n );\n }\n\n const { renderItem } = this.props;\n\n const filtered = options.filter(item => {\n // 2) At the end, we want to show only options that are matched by typed text.\n if (!this.state.inputValue) {\n return true;\n }\n\n if (item.aliases) {\n return findInAliases(item, this.state.inputValue);\n }\n\n return getOptionText(item, this.props)\n .toLowerCase()\n .includes(this.state.inputValue.toLowerCase());\n });\n\n if (!filtered.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>No results.</Typography>\n {this.props.noResultFound}\n </li>\n </OptionsList>\n );\n }\n\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n {filtered.map((item, index) => {\n const itemValue = getOptionValue(item, this.props);\n\n // Base classes.\n const itemClassNames = {\n [suggestionList]: true,\n highlighted: highlightedIndex === index,\n selected: false\n };\n\n // Add \"selected\" class if the item is selected.\n if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n itemClassNames.selected = true;\n }\n\n // Render the item.\n return (\n <li\n key={itemValue}\n {...getItemProps({\n index,\n item,\n className: classNames(itemClassNames)\n })}\n >\n {renderItem.call(this, item, index)}\n </li>\n );\n })}\n </OptionsList>\n );\n }\n\n public override render() {\n const {\n className,\n options,\n onChange,\n value,\n // valueProp,\n // textProp,\n onInput,\n validation = {\n isValid: null,\n message: null\n },\n placement,\n ...otherInputProps\n } = this.props;\n\n // Downshift related props.\n const downshiftProps = {\n className: autoCompleteStyle,\n itemToString: (item: any) => getOptionText(item, this.props),\n defaultSelectedItem: value,\n onChange: (selection: string) => {\n if (!selection || !onChange) {\n return;\n }\n onChange(getOptionValue(selection, this.props), selection);\n this.setState(state => ({\n ...state,\n inputValue: \"\"\n }));\n }\n };\n\n return (\n <div className={classNames(autoCompleteStyle, className)}>\n <Downshift {...downshiftProps} ref={this.downshift}>\n {({ getInputProps, openMenu, ...rest }) => (\n <div>\n <Input\n {...getInputProps({\n // This prop is above `otherInputProps` since it can be overridden by the user.\n trailingIcon: this.props.loading && <Spinner />,\n ...otherInputProps,\n // @ts-ignore\n validation,\n rawOnChange: true,\n onChange: ev => ev,\n onBlur: ev => ev,\n onFocus: ev => {\n openMenu();\n otherInputProps.onFocus && otherInputProps.onFocus(ev);\n },\n onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n if (keyCode === \"backspace\") {\n if (onChange) {\n onChange(null);\n }\n setTimeout(() => openMenu(), 50);\n }\n },\n onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n const target = ev.currentTarget;\n const inputValue = target.value || \"\";\n\n // If user pressed 'esc', 'enter' or similar...\n if (\n keyCode &&\n keyCode.length > 1 &&\n keyCode !== \"backspace\"\n ) {\n return;\n }\n\n // If values are the same, exit, do not update current search term.\n if (inputValue === this.state.inputValue) {\n return;\n }\n\n this.setState(\n state => ({\n ...state,\n inputValue\n }),\n () => {\n onInput && onInput(inputValue);\n }\n );\n }\n })}\n />\n {!otherInputProps.disabled &&\n !otherInputProps.readOnly &&\n this.renderOptions({\n ...rest,\n options,\n placement\n })}\n </div>\n )}\n </Downshift>\n </div>\n );\n }\n}\n\nexport { AutoComplete };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","classNames","AutoComplete","inputValue","React","createRef","previousProps","props","value","options","previousValue","item","find","option","getOptionValue","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","suggestionList","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n top: \"unset !important\",\n bottom: 75\n});\n\nconst listStyles = css({\n \"&.autocomplete__options-list\": {\n listStyle: \"none\",\n paddingLeft: 0,\n \"& li\": {\n margin: 0\n }\n }\n});\n\nexport enum Placement {\n top = \"top\",\n bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n placement?: Placement;\n\n /* A callback that is executed each time a value is changed. */\n onChange?: (value: any, selection?: any) => void;\n\n /* If true, will show a loading spinner on the right side of the input. */\n loading?: boolean;\n\n /* A component that renders supporting UI in case of no result found. */\n noResultFound?: React.ReactNode;\n}\n\ninterface State {\n inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n return (\n <MaterialSpinner\n size={24}\n spinnerColor={\"var(--mdc-theme-primary)\"}\n spinnerWidth={2}\n visible\n />\n );\n};\n\ninterface RenderOptionsParams\n extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n options: AutoCompleteProps[\"options\"];\n placement?: Placement;\n}\n\ninterface OptionsListProps {\n placement?: Placement;\n getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n return (\n <Elevation\n z={1}\n className={classNames({\n [menuStyles]: placement === Placement.top\n })}\n >\n <ul\n className={classNames(\"autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {children}\n </ul>\n </Elevation>\n );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n static defaultProps: Partial<AutoCompleteProps> = {\n valueProp: \"id\",\n textProp: \"name\",\n options: [],\n placement: Placement.bottom,\n /**\n * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n */\n renderItem(item: any) {\n return (\n <Typography use={\"body2\"}>\n {getOptionText(item, (this as unknown as AutoComplete).props)}\n </Typography>\n );\n }\n };\n\n public override state: State = {\n inputValue: \"\"\n };\n\n /**\n * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n */\n downshift: any = React.createRef();\n\n public override componentDidUpdate(previousProps: AutoCompleteProps) {\n const { value, options } = this.props;\n const { value: previousValue } = previousProps;\n\n if (!isEqual(value, previousValue)) {\n let item = null;\n\n if (value) {\n if (typeof value === \"object\") {\n item = value;\n } else {\n item =\n options.find(option => {\n return value === getOptionValue(option, this.props);\n }) || null;\n }\n }\n\n const { current: downshift } = this.downshift;\n downshift && downshift.selectItem(item);\n }\n }\n\n /**\n * Renders options - based on user's input. It will try to match input text with available options.\n */\n private renderOptions({\n options,\n isOpen,\n highlightedIndex,\n selectedItem,\n getMenuProps,\n getItemProps,\n placement\n }: RenderOptionsParams) {\n if (!isOpen) {\n return null;\n }\n /**\n * Suggest user to start typing when there are no options available to choose from.\n */\n if (!this.state.inputValue && !options.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>Start typing to find entry</Typography>\n </li>\n </OptionsList>\n );\n }\n\n const { renderItem } = this.props;\n\n const filtered = options.filter(item => {\n // 2) At the end, we want to show only options that are matched by typed text.\n if (!this.state.inputValue) {\n return true;\n }\n\n if (item.aliases) {\n return findInAliases(item, this.state.inputValue);\n }\n\n return getOptionText(item, this.props)\n .toLowerCase()\n .includes(this.state.inputValue.toLowerCase());\n });\n\n if (!filtered.length) {\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>No results.</Typography>\n {this.props.noResultFound}\n </li>\n </OptionsList>\n );\n }\n\n return (\n <OptionsList placement={placement} getMenuProps={getMenuProps}>\n {filtered.map((item, index) => {\n const itemValue = getOptionValue(item, this.props);\n\n // Base classes.\n const itemClassNames = {\n [suggestionList]: true,\n highlighted: highlightedIndex === index,\n selected: false\n };\n\n // Add \"selected\" class if the item is selected.\n if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n itemClassNames.selected = true;\n }\n\n // Render the item.\n return (\n <li\n key={itemValue}\n {...getItemProps({\n index,\n item,\n className: classNames(itemClassNames)\n })}\n >\n {renderItem.call(this, item, index)}\n </li>\n );\n })}\n </OptionsList>\n );\n }\n\n public override render() {\n const {\n className,\n options,\n onChange,\n value,\n // valueProp,\n // textProp,\n onInput,\n validation = {\n isValid: null,\n message: null\n },\n placement,\n ...otherInputProps\n } = this.props;\n\n // Downshift related props.\n const downshiftProps = {\n className: autoCompleteStyle,\n itemToString: (item: any) => getOptionText(item, this.props),\n defaultSelectedItem: value,\n onChange: (selection: string) => {\n if (!selection || !onChange) {\n return;\n }\n onChange(getOptionValue(selection, this.props), selection);\n this.setState(state => ({\n ...state,\n inputValue: \"\"\n }));\n }\n };\n\n return (\n <div className={classNames(autoCompleteStyle, className)}>\n <Downshift {...downshiftProps} ref={this.downshift}>\n {({ getInputProps, openMenu, ...rest }) => (\n <div>\n <Input\n {...getInputProps({\n // This prop is above `otherInputProps` since it can be overridden by the user.\n trailingIcon: this.props.loading && <Spinner />,\n ...otherInputProps,\n // @ts-ignore\n validation,\n rawOnChange: true,\n onChange: ev => ev,\n onBlur: ev => ev,\n onFocus: ev => {\n openMenu();\n otherInputProps.onFocus && otherInputProps.onFocus(ev);\n },\n onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n if (keyCode === \"backspace\") {\n if (onChange) {\n onChange(null);\n }\n setTimeout(() => openMenu(), 50);\n }\n },\n onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n const keyCode: string = keycode(ev as unknown as Event);\n\n const target = ev.currentTarget;\n const inputValue = target.value || \"\";\n\n // If user pressed 'esc', 'enter' or similar...\n if (\n keyCode &&\n keyCode.length > 1 &&\n keyCode !== \"backspace\"\n ) {\n return;\n }\n\n // If values are the same, exit, do not update current search term.\n if (inputValue === this.state.inputValue) {\n return;\n }\n\n this.setState(\n state => ({\n ...state,\n inputValue\n }),\n () => {\n onInput && onInput(inputValue);\n }\n );\n }\n })}\n />\n {!otherInputProps.disabled &&\n !otherInputProps.readOnly &&\n this.renderOptions({\n ...rest,\n options,\n placement\n })}\n </div>\n )}\n </Downshift>\n </div>\n );\n }\n}\n\nexport { AutoComplete };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["listItemMetaClassName","css","display","iconButtonClassName","style","pagination","bar","justifyContent","alignItems","borderBottom","padding","pages","searchInput","height","list","secondaryText","color","listStyles","listStyle","paddingLeft","margin","Spinner","OptionsList","getMenuProps","children","classNames","MultiAutoComplete","inputValue","multipleSelectionPage","multipleSelectionSearch","reorderFormVisible","reorderFormValue","React","createRef","set","selection","setState","props","unique","value","allowFreeInput","useSimpleValues","options","values","Array","isArray","filtered","state","existingValue","includes","unshift","find","item","getOptionText","textProp","filter","getOptionValue","aliases","findInAliases","toLowerCase","params","isOpen","highlightedIndex","getItemProps","length","noResultFound","renderItem","map","index","itemValue","itemClassNames","suggestionList","className","call","limit","page","search","data","option","lastPage","Math","ceil","totalCount","slice","from","to","meta","hasData","hasPrevious","hasNext","onChange","disabled","useMultipleSelectionList","description","renderListItemLabel","renderListItemOptions","paginateMultipleSelection","setMultipleSelectionSearch","setMultipleSelectionPage","key","e","newValue","splice","target","marginRight","minWidth","hasItems","onInput","validation","isValid","message","otherInputProps","getOptions","autoCompleteStyle","downshift","assignedValueAfterClearing","current","clearSelection","getInputProps","openMenu","rest","rawOnChange","trailingIcon","loading","onBlur","onKeyUp","onFocus","renderOptions","renderMultipleSelection","Component","valueProp"],"sources":["MultiAutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { Input } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { List, ListItem, ListItemMeta } from \"~/List\";\nimport { IconButton } from \"~/Button\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as PrevIcon } from \"./icons/navigate_before-24px.svg\";\nimport { ReactComponent as NextIcon } from \"./icons/navigate_next-24px.svg\";\nimport { ReactComponent as PrevAllIcon } from \"./icons/skip_previous-24px.svg\";\nimport { ReactComponent as NextAllIcon } from \"./icons/skip_next-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as ReorderIcon } from \"./icons/reorder_black_24dp.svg\";\nimport { css } from \"emotion\";\nimport { ListItemGraphic } from \"~/List\";\nimport { AutoCompleteProps } from \"~/AutoComplete/AutoComplete\";\n\nconst listItemMetaClassName = css({\n display: \"table\"\n});\n\nconst iconButtonClassName = css({\n display: \"table-cell !important\"\n});\n\nconst style = {\n pagination: {\n bar: css({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n borderBottom: \"2px solid #fa5723\",\n padding: \"6px 0\"\n }),\n pages: css({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\"\n }),\n searchInput: css({\n height: \"42px !important\"\n }),\n list: css({\n padding: \"0 0 5px 0 !important\",\n \".mdc-list-item\": {\n borderBottom: \"1px solid var(--mdc-theme-on-background)\"\n }\n }),\n secondaryText: css({\n color: \"var(--mdc-theme-text-secondary-on-background)\"\n })\n }\n};\n\nconst listStyles = css({\n \"&.multi-autocomplete__options-list\": {\n listStyle: \"none\",\n paddingLeft: 0,\n \"& li\": {\n margin: 0\n }\n }\n});\n\ninterface SelectionItem {\n name: string;\n}\n\ntype MultiAutoCompletePropsValue = SelectionItem[] | string[];\n\nexport interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, \"value\"> {\n /**\n * Prevents adding the same item to the list twice.\n */\n unique: boolean;\n\n /**\n * Set if custom values (not from list of suggestions) are allowed.\n */\n allowFreeInput?: boolean;\n\n /**\n * If true, will show a loading spinner on the right side of the input.\n */\n loading?: boolean;\n\n /**\n * Use data list instead of default Chips component. Useful when expecting a lot of data.\n */\n useMultipleSelectionList?: boolean;\n\n /**\n * Render list item when `useMultipleSelectionList` is used.\n */\n renderListItemLabel?: Function;\n /**\n * Render in meta wrapper\n */\n renderListItemOptions?: (item: any) => React.ReactNode | null;\n\n /* A component that renders supporting UI in case of no result found. */\n noResultFound?: React.ReactNode;\n /**\n * Value is an array of strings. But can be undefined.\n */\n value?: MultiAutoCompletePropsValue;\n}\n\ninterface MultiAutoCompleteState {\n inputValue: string;\n multipleSelectionPage: number;\n multipleSelectionSearch: string;\n reorderFormVisible: string;\n reorderFormValue: string;\n}\n\nconst Spinner: React.FC = () => {\n return <MaterialSpinner size={24} spinnerColor={\"#fa5723\"} spinnerWidth={2} visible />;\n};\n\ninterface RenderOptionsParams\n extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n options: AutoCompleteProps[\"options\"];\n unique: boolean;\n}\n\ninterface OptionsListProps {\n getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\ninterface AssignedValueAfterClearing {\n set: boolean;\n selection: string | null;\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ getMenuProps, children }) => {\n return (\n <Elevation z={1}>\n <ul\n className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {children}\n </ul>\n </Elevation>\n );\n};\n\nexport class MultiAutoComplete extends React.Component<\n MultiAutoCompleteProps,\n MultiAutoCompleteState\n> {\n static defaultProps: Partial<MultiAutoCompleteProps> = {\n valueProp: \"id\",\n textProp: \"name\",\n unique: true,\n options: [],\n useSimpleValues: false,\n useMultipleSelectionList: false,\n /**\n * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.\n */\n renderItem(item: any) {\n return (\n <Typography use={\"body2\"}>\n {getOptionText(item, (this as unknown as MultiAutoComplete).props)}\n </Typography>\n );\n },\n /**\n * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.\n */\n renderListItemLabel(item: any) {\n return getOptionText(item, (this as unknown as MultiAutoComplete).props);\n }\n };\n\n public override state: MultiAutoCompleteState = {\n inputValue: \"\",\n multipleSelectionPage: 0,\n multipleSelectionSearch: \"\",\n reorderFormVisible: \"\",\n reorderFormValue: \"\"\n };\n\n /**\n * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n */\n private downshift = React.createRef<any>();\n\n private assignedValueAfterClearing: AssignedValueAfterClearing = {\n set: false,\n selection: null\n };\n\n setMultipleSelectionPage = (multipleSelectionPage: number): void => {\n this.setState({ multipleSelectionPage });\n };\n\n setMultipleSelectionSearch = (multipleSelectionSearch: string): void => {\n this.setState({ multipleSelectionSearch });\n };\n\n getOptions() {\n const { unique, value, allowFreeInput, useSimpleValues, options } = this.props;\n\n const values = Array.isArray(value) ? [...value] : [];\n\n const filtered = [...options];\n\n // If free input is allowed, prepend typed value to the list.\n if (allowFreeInput && this.state.inputValue) {\n if (useSimpleValues) {\n const existingValue = filtered.includes(this.state.inputValue);\n if (!existingValue) {\n filtered.unshift(this.state.inputValue);\n }\n } else {\n const existingValue = filtered.find(\n item => this.state.inputValue === getOptionText(item, this.props)\n );\n if (!existingValue) {\n filtered.unshift({ [this.props.textProp]: this.state.inputValue });\n }\n }\n }\n\n return filtered.filter(item => {\n // We need to filter received options.\n // 1) If \"unique\" prop was passed, we don't want to show already picked options again.\n if (unique) {\n if (Array.isArray(values)) {\n if (\n values.find(\n value =>\n getOptionValue(value, this.props) ===\n getOptionValue(item, this.props)\n )\n ) {\n return false;\n }\n }\n }\n\n // 2) At the end, we want to show only options that are matched by typed text.\n if (!this.state.inputValue) {\n return true;\n }\n\n if (item.aliases) {\n return findInAliases(item, this.state.inputValue);\n }\n\n return getOptionText(item, this.props)\n .toLowerCase()\n .includes(this.state.inputValue.toLowerCase());\n });\n }\n\n /**\n * Renders options - based on user's input. It will try to match input text with available options.\n */\n private renderOptions(params: RenderOptionsParams) {\n const { options, isOpen, highlightedIndex, getMenuProps, getItemProps } = params;\n if (!isOpen) {\n return null;\n }\n\n /**\n * Suggest user to start typing when there are no options available to choose from.\n */\n if (!this.state.inputValue && !options.length) {\n return (\n <OptionsList getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>Start typing to find entry</Typography>\n </li>\n </OptionsList>\n );\n }\n\n if (!options.length) {\n return (\n <Elevation z={1}>\n <ul\n className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n <li>\n <Typography use={\"body2\"}>No results.</Typography>\n {this.props.noResultFound}\n </li>\n </ul>\n </Elevation>\n );\n }\n\n const { renderItem } = this.props;\n return (\n <Elevation z={1}>\n <ul\n className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {options.map((item, index) => {\n const itemValue = getOptionValue(item, this.props);\n\n // Base classes.\n const itemClassNames = {\n [suggestionList]: true,\n highlighted: highlightedIndex === index,\n selected: false\n };\n\n // Render the item.\n return (\n <li\n key={itemValue + index}\n {...getItemProps({\n index,\n item,\n className: classNames(itemClassNames)\n })}\n >\n {renderItem.call(this, item, index)}\n </li>\n );\n })}\n </ul>\n </Elevation>\n );\n }\n\n paginateMultipleSelection() {\n const { value } = this.props;\n const limit = 10;\n let page = this.state.multipleSelectionPage;\n const search = this.state.multipleSelectionSearch;\n\n // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.\n let data = Array.isArray(value)\n ? value.map((option, index) => {\n return { option, index };\n })\n : [];\n\n if (search) {\n data = data.filter(item => {\n return getOptionText(item.option, this.props)\n .toLowerCase()\n .includes(search.toLowerCase());\n });\n }\n\n const lastPage = Math.ceil(data.length / limit);\n const totalCount = data.length;\n\n page = page || lastPage;\n data = data.slice((page - 1) * limit, page * limit);\n\n let from = 0;\n let to = 0;\n if (data.length) {\n from = (page - 1) * limit + 1;\n to = from + (data.length - 1);\n }\n\n const meta = {\n hasData: data.length > 0,\n totalCount,\n from,\n to,\n page: page,\n lastPage,\n limit,\n hasPrevious: page > 1,\n hasNext: page < lastPage\n };\n\n return { data, meta };\n }\n\n /**\n * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for\n * rendering selected items (we are using already existing \"Chips\" component).\n */\n public renderMultipleSelection() {\n const {\n value,\n onChange,\n disabled,\n useMultipleSelectionList,\n description,\n renderListItemLabel,\n renderListItemOptions\n } = this.props;\n\n if (useMultipleSelectionList) {\n const { data, meta } = this.paginateMultipleSelection();\n\n return (\n <>\n <div className={style.pagination.bar}>\n <div>\n <Input\n className={style.pagination.searchInput}\n placeholder={\"Search selected...\"}\n value={this.state.multipleSelectionSearch}\n data-testid=\"pb.pagination.search\"\n onChange={value => {\n this.setMultipleSelectionSearch(value);\n this.setMultipleSelectionPage(value ? 1 : 0);\n }}\n />\n </div>\n\n <div className={style.pagination.pages}>\n <div className={meta.hasData ? \"\" : style.pagination.secondaryText}>\n {meta.from} - {meta.to} of {meta.totalCount}\n </div>\n <div>\n <IconButton\n icon={<PrevAllIcon />}\n disabled={!meta.hasData || meta.page === 1}\n onClick={() => this.setMultipleSelectionPage(1)}\n />\n <IconButton\n icon={<PrevIcon />}\n disabled={!meta.hasData || !meta.hasPrevious}\n onClick={() => this.setMultipleSelectionPage(meta.page - 1)}\n />\n <IconButton\n icon={<NextIcon />}\n disabled={!meta.hasData || !meta.hasNext}\n onClick={() => this.setMultipleSelectionPage(meta.page + 1)}\n />\n <IconButton\n icon={<NextAllIcon />}\n disabled={!meta.hasData || meta.page === meta.lastPage}\n onClick={() => this.setMultipleSelectionPage(meta.lastPage)}\n />\n </div>\n </div>\n </div>\n\n <List className={style.pagination.list}>\n {meta.hasData ? (\n data.map((item, index) => {\n const key = `${getOptionValue(item.option, this.props)}-${index}`;\n if (this.state.reorderFormVisible === key) {\n return (\n <ListItem key={key}>\n <ListItemGraphic>\n <IconButton disabled icon={<ReorderIcon />} />\n </ListItemGraphic>\n <Input\n value={this.state.reorderFormValue}\n data-testid=\"pb.pagination.input\"\n onKeyDown={(e: any) => {\n const key = e.key;\n if (key !== \"Escape\" && key !== \"Enter\") {\n return;\n }\n\n if (key === \"Enter\") {\n // Reorder the item.\n const newValue = [\n ...(value as SelectionItem[])\n ];\n newValue.splice(\n e.target.value - 1,\n 0,\n newValue.splice(item.index, 1)[0]\n );\n\n if (onChange) {\n onChange(newValue);\n }\n }\n\n this.setState({\n reorderFormVisible: \"\",\n reorderFormValue: \"\"\n });\n }}\n onChange={value =>\n this.setState({ reorderFormValue: value })\n }\n type={\"number\"}\n autoFocus\n className={style.pagination.searchInput}\n placeholder={\n \"Type a new order number and press Enter, or press Esc to cancel.\"\n }\n />\n <ListItemMeta>\n <IconButton icon={<DeleteIcon />} disabled />\n </ListItemMeta>\n </ListItem>\n );\n }\n\n return (\n <ListItem key={key}>\n <ListItemGraphic>\n <IconButton\n icon={<ReorderIcon />}\n onClick={() => {\n this.setState({ reorderFormVisible: key });\n }}\n />\n </ListItemGraphic>\n <div\n style={{\n color: \"var(--mdc-theme-text-secondary-on-background)\",\n marginRight: 8,\n minWidth: 32\n }}\n >\n {item.index + 1}.\n </div>{\" \"}\n {renderListItemLabel &&\n renderListItemLabel.call(this, item.option)}\n <ListItemMeta className={listItemMetaClassName}>\n {renderListItemOptions &&\n renderListItemOptions.call(this, item.option)}\n <IconButton\n icon={<DeleteIcon />}\n className={iconButtonClassName}\n onClick={() => {\n if (!onChange) {\n return;\n }\n onChange([\n ...(value as SelectionItem[]).slice(\n 0,\n item.index\n ),\n ...(value as SelectionItem[]).slice(\n item.index + 1\n )\n ]);\n }}\n />\n </ListItemMeta>\n </ListItem>\n );\n })\n ) : (\n <ListItem>\n <span className={style.pagination.secondaryText}>\n Nothing to show.\n </span>\n </ListItem>\n )}\n </List>\n <div>\n <FormElementMessage>{description}</FormElementMessage>\n </div>\n </>\n );\n }\n\n const hasItems = Array.isArray(value) && value.length;\n if (!hasItems) {\n return null;\n }\n\n return (\n <Chips disabled={disabled}>\n {(value as SelectionItem[]).map((item, index) => (\n <Chip\n label={getOptionText(item, this.props)}\n key={`${getOptionValue(item, this.props)}-${index}`}\n trailingIcon={<BaselineCloseIcon />}\n onRemove={() => {\n if (!onChange) {\n return;\n }\n onChange([\n ...(value as SelectionItem[]).slice(0, index),\n ...(value as SelectionItem[]).slice(index + 1)\n ]);\n }}\n />\n ))}\n </Chips>\n );\n }\n\n public override render() {\n const {\n props,\n props: {\n // options: rawOptions,\n // allowFreeInput,\n // useSimpleValues,\n unique,\n value,\n onChange,\n // valueProp,\n // textProp,\n onInput,\n validation = { isValid: null, message: null },\n useMultipleSelectionList,\n description,\n ...otherInputProps\n }\n } = this;\n\n const options = this.getOptions();\n\n return (\n <div className={classNames(autoCompleteStyle, props.className)}>\n <Downshift\n defaultSelectedItem={null}\n // @ts-ignore there is no className on Downshift\n className={autoCompleteStyle}\n itemToString={item => item && getOptionText(item, props)}\n ref={this.downshift}\n onChange={selection => {\n if (!this.assignedValueAfterClearing.set) {\n this.assignedValueAfterClearing = {\n set: true,\n selection\n };\n this.downshift.current.clearSelection();\n this.setMultipleSelectionPage(0);\n return;\n }\n\n if (this.assignedValueAfterClearing.set) {\n this.setState({ inputValue: \"\" });\n this.assignedValueAfterClearing.set = false;\n if (Array.isArray(value)) {\n onChange &&\n onChange([...value, this.assignedValueAfterClearing.selection]);\n } else {\n onChange && onChange([this.assignedValueAfterClearing.selection]);\n }\n }\n }}\n >\n {/* \"getInputProps\" and \"openMenu\" are not needed in renderOptions method. */}\n {({ getInputProps, openMenu, ...rest }) => (\n <div>\n <Input\n {...getInputProps({\n ...otherInputProps,\n // @ts-ignore\n validation,\n\n // Only pass description if not using \"useMultipleSelectionList\".\n description: useMultipleSelectionList ? null : description,\n rawOnChange: true,\n trailingIcon: this.props.loading && <Spinner />,\n onChange: e => e,\n onBlur: e => e,\n onKeyUp: (e: any) => {\n const inputValue = e.target.value || \"\";\n\n // Set current input value into state and trigger onInput if different.\n if (inputValue !== this.state.inputValue) {\n this.setState({ inputValue }, () => {\n onInput && onInput(inputValue);\n });\n }\n },\n onFocus: e => {\n openMenu();\n otherInputProps.onFocus && otherInputProps.onFocus(e);\n }\n })}\n />\n {this.renderOptions({ ...rest, unique, options })}\n {this.renderMultipleSelection()}\n </div>\n )}\n </Downshift>\n </div>\n );\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["listItemMetaClassName","css","display","iconButtonClassName","style","pagination","bar","justifyContent","alignItems","borderBottom","padding","pages","searchInput","height","list","secondaryText","color","listStyles","listStyle","paddingLeft","margin","Spinner","OptionsList","getMenuProps","children","classNames","MultiAutoComplete","inputValue","multipleSelectionPage","multipleSelectionSearch","reorderFormVisible","reorderFormValue","React","createRef","set","selection","setState","props","unique","value","allowFreeInput","useSimpleValues","options","values","Array","isArray","filtered","state","existingValue","includes","unshift","find","item","getOptionText","textProp","filter","getOptionValue","aliases","findInAliases","toLowerCase","params","isOpen","highlightedIndex","getItemProps","length","noResultFound","renderItem","map","index","itemValue","itemClassNames","suggestionList","className","call","limit","page","search","data","option","lastPage","Math","ceil","totalCount","slice","from","to","meta","hasData","hasPrevious","hasNext","onChange","disabled","useMultipleSelectionList","description","renderListItemLabel","renderListItemOptions","paginateMultipleSelection","setMultipleSelectionSearch","setMultipleSelectionPage","key","e","newValue","splice","target","marginRight","minWidth","hasItems","onInput","validation","isValid","message","otherInputProps","getOptions","autoCompleteStyle","downshift","assignedValueAfterClearing","current","clearSelection","getInputProps","openMenu","rest","rawOnChange","trailingIcon","loading","onBlur","onKeyUp","onFocus","renderOptions","renderMultipleSelection","Component","valueProp"],"sources":["MultiAutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { Input } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { List, ListItem, ListItemMeta } from \"~/List\";\nimport { IconButton } from \"~/Button\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as PrevIcon } from \"./icons/navigate_before-24px.svg\";\nimport { ReactComponent as NextIcon } from \"./icons/navigate_next-24px.svg\";\nimport { ReactComponent as PrevAllIcon } from \"./icons/skip_previous-24px.svg\";\nimport { ReactComponent as NextAllIcon } from \"./icons/skip_next-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as ReorderIcon } from \"./icons/reorder_black_24dp.svg\";\nimport { css } from \"emotion\";\nimport { ListItemGraphic } from \"~/List\";\nimport { AutoCompleteProps } from \"~/AutoComplete/AutoComplete\";\n\nconst listItemMetaClassName = css({\n display: \"table\"\n});\n\nconst iconButtonClassName = css({\n display: \"table-cell !important\"\n});\n\nconst style = {\n pagination: {\n bar: css({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n borderBottom: \"2px solid #fa5723\",\n padding: \"6px 0\"\n }),\n pages: css({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\"\n }),\n searchInput: css({\n height: \"42px !important\"\n }),\n list: css({\n padding: \"0 0 5px 0 !important\",\n \".mdc-list-item\": {\n borderBottom: \"1px solid var(--mdc-theme-on-background)\"\n }\n }),\n secondaryText: css({\n color: \"var(--mdc-theme-text-secondary-on-background)\"\n })\n }\n};\n\nconst listStyles = css({\n \"&.multi-autocomplete__options-list\": {\n listStyle: \"none\",\n paddingLeft: 0,\n \"& li\": {\n margin: 0\n }\n }\n});\n\ninterface SelectionItem {\n name: string;\n}\n\ntype MultiAutoCompletePropsValue = SelectionItem[] | string[];\n\nexport interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, \"value\"> {\n /**\n * Prevents adding the same item to the list twice.\n */\n unique: boolean;\n\n /**\n * Set if custom values (not from list of suggestions) are allowed.\n */\n allowFreeInput?: boolean;\n\n /**\n * If true, will show a loading spinner on the right side of the input.\n */\n loading?: boolean;\n\n /**\n * Use data list instead of default Chips component. Useful when expecting a lot of data.\n */\n useMultipleSelectionList?: boolean;\n\n /**\n * Render list item when `useMultipleSelectionList` is used.\n */\n renderListItemLabel?: Function;\n /**\n * Render in meta wrapper\n */\n renderListItemOptions?: (item: any) => React.ReactNode | null;\n\n /* A component that renders supporting UI in case of no result found. */\n noResultFound?: React.ReactNode;\n /**\n * Value is an array of strings. But can be undefined.\n */\n value?: MultiAutoCompletePropsValue;\n}\n\ninterface MultiAutoCompleteState {\n inputValue: string;\n multipleSelectionPage: number;\n multipleSelectionSearch: string;\n reorderFormVisible: string;\n reorderFormValue: string;\n}\n\nconst Spinner: React.FC = () => {\n return <MaterialSpinner size={24} spinnerColor={\"#fa5723\"} spinnerWidth={2} visible />;\n};\n\ninterface RenderOptionsParams\n extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n options: AutoCompleteProps[\"options\"];\n unique: boolean;\n}\n\ninterface OptionsListProps {\n getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\ninterface AssignedValueAfterClearing {\n set: boolean;\n selection: string | null;\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ getMenuProps, children }) => {\n return (\n <Elevation z={1}>\n <ul\n className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {children}\n </ul>\n </Elevation>\n );\n};\n\nexport class MultiAutoComplete extends React.Component<\n MultiAutoCompleteProps,\n MultiAutoCompleteState\n> {\n static defaultProps: Partial<MultiAutoCompleteProps> = {\n valueProp: \"id\",\n textProp: \"name\",\n unique: true,\n options: [],\n useSimpleValues: false,\n useMultipleSelectionList: false,\n /**\n * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.\n */\n renderItem(item: any) {\n return (\n <Typography use={\"body2\"}>\n {getOptionText(item, (this as unknown as MultiAutoComplete).props)}\n </Typography>\n );\n },\n /**\n * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.\n */\n renderListItemLabel(item: any) {\n return getOptionText(item, (this as unknown as MultiAutoComplete).props);\n }\n };\n\n public override state: MultiAutoCompleteState = {\n inputValue: \"\",\n multipleSelectionPage: 0,\n multipleSelectionSearch: \"\",\n reorderFormVisible: \"\",\n reorderFormValue: \"\"\n };\n\n /**\n * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n */\n private downshift = React.createRef<any>();\n\n private assignedValueAfterClearing: AssignedValueAfterClearing = {\n set: false,\n selection: null\n };\n\n setMultipleSelectionPage = (multipleSelectionPage: number): void => {\n this.setState({ multipleSelectionPage });\n };\n\n setMultipleSelectionSearch = (multipleSelectionSearch: string): void => {\n this.setState({ multipleSelectionSearch });\n };\n\n getOptions() {\n const { unique, value, allowFreeInput, useSimpleValues, options } = this.props;\n\n const values = Array.isArray(value) ? [...value] : [];\n\n const filtered = [...options];\n\n // If free input is allowed, prepend typed value to the list.\n if (allowFreeInput && this.state.inputValue) {\n if (useSimpleValues) {\n const existingValue = filtered.includes(this.state.inputValue);\n if (!existingValue) {\n filtered.unshift(this.state.inputValue);\n }\n } else {\n const existingValue = filtered.find(\n item => this.state.inputValue === getOptionText(item, this.props)\n );\n if (!existingValue) {\n filtered.unshift({ [this.props.textProp]: this.state.inputValue });\n }\n }\n }\n\n return filtered.filter(item => {\n // We need to filter received options.\n // 1) If \"unique\" prop was passed, we don't want to show already picked options again.\n if (unique) {\n if (Array.isArray(values)) {\n if (\n values.find(\n value =>\n getOptionValue(value, this.props) ===\n getOptionValue(item, this.props)\n )\n ) {\n return false;\n }\n }\n }\n\n // 2) At the end, we want to show only options that are matched by typed text.\n if (!this.state.inputValue) {\n return true;\n }\n\n if (item.aliases) {\n return findInAliases(item, this.state.inputValue);\n }\n\n return getOptionText(item, this.props)\n .toLowerCase()\n .includes(this.state.inputValue.toLowerCase());\n });\n }\n\n /**\n * Renders options - based on user's input. It will try to match input text with available options.\n */\n private renderOptions(params: RenderOptionsParams) {\n const { options, isOpen, highlightedIndex, getMenuProps, getItemProps } = params;\n if (!isOpen) {\n return null;\n }\n\n /**\n * Suggest user to start typing when there are no options available to choose from.\n */\n if (!this.state.inputValue && !options.length) {\n return (\n <OptionsList getMenuProps={getMenuProps}>\n <li>\n <Typography use={\"body2\"}>Start typing to find entry</Typography>\n </li>\n </OptionsList>\n );\n }\n\n if (!options.length) {\n return (\n <Elevation z={1}>\n <ul\n className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n <li>\n <Typography use={\"body2\"}>No results.</Typography>\n {this.props.noResultFound}\n </li>\n </ul>\n </Elevation>\n );\n }\n\n const { renderItem } = this.props;\n return (\n <Elevation z={1}>\n <ul\n className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n {...getMenuProps()}\n >\n {options.map((item, index) => {\n const itemValue = getOptionValue(item, this.props);\n\n // Base classes.\n const itemClassNames = {\n [suggestionList]: true,\n highlighted: highlightedIndex === index,\n selected: false\n };\n\n // Render the item.\n return (\n <li\n key={itemValue + index}\n {...getItemProps({\n index,\n item,\n className: classNames(itemClassNames)\n })}\n >\n {renderItem.call(this, item, index)}\n </li>\n );\n })}\n </ul>\n </Elevation>\n );\n }\n\n paginateMultipleSelection() {\n const { value } = this.props;\n const limit = 10;\n let page = this.state.multipleSelectionPage;\n const search = this.state.multipleSelectionSearch;\n\n // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.\n let data = Array.isArray(value)\n ? value.map((option, index) => {\n return { option, index };\n })\n : [];\n\n if (search) {\n data = data.filter(item => {\n return getOptionText(item.option, this.props)\n .toLowerCase()\n .includes(search.toLowerCase());\n });\n }\n\n const lastPage = Math.ceil(data.length / limit);\n const totalCount = data.length;\n\n page = page || lastPage;\n data = data.slice((page - 1) * limit, page * limit);\n\n let from = 0;\n let to = 0;\n if (data.length) {\n from = (page - 1) * limit + 1;\n to = from + (data.length - 1);\n }\n\n const meta = {\n hasData: data.length > 0,\n totalCount,\n from,\n to,\n page: page,\n lastPage,\n limit,\n hasPrevious: page > 1,\n hasNext: page < lastPage\n };\n\n return { data, meta };\n }\n\n /**\n * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for\n * rendering selected items (we are using already existing \"Chips\" component).\n */\n public renderMultipleSelection() {\n const {\n value,\n onChange,\n disabled,\n useMultipleSelectionList,\n description,\n renderListItemLabel,\n renderListItemOptions\n } = this.props;\n\n if (useMultipleSelectionList) {\n const { data, meta } = this.paginateMultipleSelection();\n\n return (\n <>\n <div className={style.pagination.bar}>\n <div>\n <Input\n className={style.pagination.searchInput}\n placeholder={\"Search selected...\"}\n value={this.state.multipleSelectionSearch}\n data-testid=\"pb.pagination.search\"\n onChange={value => {\n this.setMultipleSelectionSearch(value);\n this.setMultipleSelectionPage(value ? 1 : 0);\n }}\n />\n </div>\n\n <div className={style.pagination.pages}>\n <div className={meta.hasData ? \"\" : style.pagination.secondaryText}>\n {meta.from} - {meta.to} of {meta.totalCount}\n </div>\n <div>\n <IconButton\n icon={<PrevAllIcon />}\n disabled={!meta.hasData || meta.page === 1}\n onClick={() => this.setMultipleSelectionPage(1)}\n />\n <IconButton\n icon={<PrevIcon />}\n disabled={!meta.hasData || !meta.hasPrevious}\n onClick={() => this.setMultipleSelectionPage(meta.page - 1)}\n />\n <IconButton\n icon={<NextIcon />}\n disabled={!meta.hasData || !meta.hasNext}\n onClick={() => this.setMultipleSelectionPage(meta.page + 1)}\n />\n <IconButton\n icon={<NextAllIcon />}\n disabled={!meta.hasData || meta.page === meta.lastPage}\n onClick={() => this.setMultipleSelectionPage(meta.lastPage)}\n />\n </div>\n </div>\n </div>\n\n <List className={style.pagination.list}>\n {meta.hasData ? (\n data.map((item, index) => {\n const key = `${getOptionValue(item.option, this.props)}-${index}`;\n if (this.state.reorderFormVisible === key) {\n return (\n <ListItem key={key}>\n <ListItemGraphic>\n <IconButton disabled icon={<ReorderIcon />} />\n </ListItemGraphic>\n <Input\n value={this.state.reorderFormValue}\n data-testid=\"pb.pagination.input\"\n onKeyDown={(e: any) => {\n const key = e.key;\n if (key !== \"Escape\" && key !== \"Enter\") {\n return;\n }\n\n if (key === \"Enter\") {\n // Reorder the item.\n const newValue = [\n ...(value as SelectionItem[])\n ];\n newValue.splice(\n e.target.value - 1,\n 0,\n newValue.splice(item.index, 1)[0]\n );\n\n if (onChange) {\n onChange(newValue);\n }\n }\n\n this.setState({\n reorderFormVisible: \"\",\n reorderFormValue: \"\"\n });\n }}\n onChange={value =>\n this.setState({ reorderFormValue: value })\n }\n type={\"number\"}\n autoFocus\n className={style.pagination.searchInput}\n placeholder={\n \"Type a new order number and press Enter, or press Esc to cancel.\"\n }\n />\n <ListItemMeta>\n <IconButton icon={<DeleteIcon />} disabled />\n </ListItemMeta>\n </ListItem>\n );\n }\n\n return (\n <ListItem key={key}>\n <ListItemGraphic>\n <IconButton\n icon={<ReorderIcon />}\n onClick={() => {\n this.setState({ reorderFormVisible: key });\n }}\n />\n </ListItemGraphic>\n <div\n style={{\n color: \"var(--mdc-theme-text-secondary-on-background)\",\n marginRight: 8,\n minWidth: 32\n }}\n >\n {item.index + 1}.\n </div>{\" \"}\n {renderListItemLabel &&\n renderListItemLabel.call(this, item.option)}\n <ListItemMeta className={listItemMetaClassName}>\n {renderListItemOptions &&\n renderListItemOptions.call(this, item.option)}\n <IconButton\n icon={<DeleteIcon />}\n className={iconButtonClassName}\n onClick={() => {\n if (!onChange) {\n return;\n }\n onChange([\n ...(value as SelectionItem[]).slice(\n 0,\n item.index\n ),\n ...(value as SelectionItem[]).slice(\n item.index + 1\n )\n ]);\n }}\n />\n </ListItemMeta>\n </ListItem>\n );\n })\n ) : (\n <ListItem>\n <span className={style.pagination.secondaryText}>\n Nothing to show.\n </span>\n </ListItem>\n )}\n </List>\n <div>\n <FormElementMessage>{description}</FormElementMessage>\n </div>\n </>\n );\n }\n\n const hasItems = Array.isArray(value) && value.length;\n if (!hasItems) {\n return null;\n }\n\n return (\n <Chips disabled={disabled}>\n {(value as SelectionItem[]).map((item, index) => (\n <Chip\n label={getOptionText(item, this.props)}\n key={`${getOptionValue(item, this.props)}-${index}`}\n trailingIcon={<BaselineCloseIcon />}\n onRemove={() => {\n if (!onChange) {\n return;\n }\n onChange([\n ...(value as SelectionItem[]).slice(0, index),\n ...(value as SelectionItem[]).slice(index + 1)\n ]);\n }}\n />\n ))}\n </Chips>\n );\n }\n\n public override render() {\n const {\n props,\n props: {\n // options: rawOptions,\n // allowFreeInput,\n // useSimpleValues,\n unique,\n value,\n onChange,\n // valueProp,\n // textProp,\n onInput,\n validation = { isValid: null, message: null },\n useMultipleSelectionList,\n description,\n ...otherInputProps\n }\n } = this;\n\n const options = this.getOptions();\n\n return (\n <div className={classNames(autoCompleteStyle, props.className)}>\n <Downshift\n defaultSelectedItem={null}\n // @ts-ignore there is no className on Downshift\n className={autoCompleteStyle}\n itemToString={item => item && getOptionText(item, props)}\n ref={this.downshift}\n onChange={selection => {\n if (!this.assignedValueAfterClearing.set) {\n this.assignedValueAfterClearing = {\n set: true,\n selection\n };\n this.downshift.current.clearSelection();\n this.setMultipleSelectionPage(0);\n return;\n }\n\n if (this.assignedValueAfterClearing.set) {\n this.setState({ inputValue: \"\" });\n this.assignedValueAfterClearing.set = false;\n if (Array.isArray(value)) {\n onChange &&\n onChange([...value, this.assignedValueAfterClearing.selection]);\n } else {\n onChange && onChange([this.assignedValueAfterClearing.selection]);\n }\n }\n }}\n >\n {/* \"getInputProps\" and \"openMenu\" are not needed in renderOptions method. */}\n {({ getInputProps, openMenu, ...rest }) => (\n <div>\n <Input\n {...getInputProps({\n ...otherInputProps,\n // @ts-ignore\n validation,\n\n // Only pass description if not using \"useMultipleSelectionList\".\n description: useMultipleSelectionList ? null : description,\n rawOnChange: true,\n trailingIcon: this.props.loading && <Spinner />,\n onChange: e => e,\n onBlur: e => e,\n onKeyUp: (e: any) => {\n const inputValue = e.target.value || \"\";\n\n // Set current input value into state and trigger onInput if different.\n if (inputValue !== this.state.inputValue) {\n this.setState({ inputValue }, () => {\n onInput && onInput(inputValue);\n });\n }\n },\n onFocus: e => {\n openMenu();\n otherInputProps.onFocus && otherInputProps.onFocus(e);\n }\n })}\n />\n {this.renderOptions({ ...rest, unique, options })}\n {this.renderMultipleSelection()}\n </div>\n )}\n </Downshift>\n </div>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["CopyButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { CopyButton } from \"./CopyButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n \"copy button\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Copy button\"}>\n <div>\n <span>Click the button to copy the "Hello" value:</span>\n <CopyButton value=\"Hello\" />\n </div>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["CopyButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { CopyButton } from \"./CopyButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n \"copy button\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Copy button\"}>\n <div>\n <span>Click the button to copy the "Hello" value:</span>\n <CopyButton value=\"Hello\" />\n </div>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,2CAAM,+CAAN,CADJ,eAEI,6BAAC,sBAAD;IAAY,KAAK,EAAC;EAAlB,EAFJ,CADJ,CAFJ,CADJ;AAWH,CAdL,EAeI;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAD,EAAOC,eAAP,EAAiBC,YAAjB,EAAwBC,kBAAxB,EAAqCC,mBAArC;EADjB;AADV,CAfJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","console","log","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { ReactComponent as CloudIcon } from \"./../assets/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as MoreIcon } from \"./../assets/round-more_vert-24px.svg\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { IconButton } from \"./IconButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n \"icon button\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Icon button\"}>\n <IconButton\n icon={<CloudIcon />}\n label=\"Icon label\"\n onClick={() => console.log(\"Button clicked\")}\n />\n </StorySandbox>\n <StorySandbox title={\"Menu example\"}>\n <Menu\n handle={\n <IconButton\n icon={<MoreIcon />}\n label=\"Toggle menu\"\n onClick={() => console.log(\"Button clicked\")}\n />\n }\n >\n <MenuItem\n onClick={() => {\n console.log(\"Apple selected!\");\n }}\n >\n Apple\n </MenuItem>\n <MenuItem>Banana</MenuItem>\n <MenuItem>Watermelon</MenuItem>\n </Menu>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,sBAAD;IACI,IAAI,eAAE,6BAAC,sCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,OAAO,EAAE;MAAA,OAAMC,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;IAAA;EAHb,EADJ,CAFJ,eASI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,WAAD;IACI,MAAM,eACF,6BAAC,sBAAD;MACI,IAAI,eAAE,6BAAC,kCAAD,OADV;MAEI,KAAK,EAAC,aAFV;MAGI,OAAO,EAAE;QAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;MAAA;IAHb;EAFR,gBASI,6BAAC,eAAD;IACI,OAAO,EAAE,mBAAM;MACXD,OAAO,CAACC,GAAR,CAAY,iBAAZ;IACH;EAHL,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","console","log","info","propTablesExclude","Menu","MenuItem","Story","StoryReadme","StorySandbox"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { ReactComponent as CloudIcon } from \"./../assets/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as MoreIcon } from \"./../assets/round-more_vert-24px.svg\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { IconButton } from \"./IconButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n \"icon button\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Icon button\"}>\n <IconButton\n icon={<CloudIcon />}\n label=\"Icon label\"\n onClick={() => console.log(\"Button clicked\")}\n />\n </StorySandbox>\n <StorySandbox title={\"Menu example\"}>\n <Menu\n handle={\n <IconButton\n icon={<MoreIcon />}\n label=\"Toggle menu\"\n onClick={() => console.log(\"Button clicked\")}\n />\n }\n >\n <MenuItem\n onClick={() => {\n console.log(\"Apple selected!\");\n }}\n >\n Apple\n </MenuItem>\n <MenuItem>Banana</MenuItem>\n <MenuItem>Watermelon</MenuItem>\n </Menu>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,aADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,sBAAD;IACI,IAAI,eAAE,6BAAC,sCAAD,OADV;IAEI,KAAK,EAAC,YAFV;IAGI,OAAO,EAAE;MAAA,OAAMC,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;IAAA;EAHb,EADJ,CAFJ,eASI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,WAAD;IACI,MAAM,eACF,6BAAC,sBAAD;MACI,IAAI,eAAE,6BAAC,kCAAD,OADV;MAEI,KAAK,EAAC,aAFV;MAGI,OAAO,EAAE;QAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;MAAA;IAHb;EAFR,gBASI,6BAAC,eAAD;IACI,OAAO,EAAE,mBAAM;MACXD,OAAO,CAACC,GAAR,CAAY,iBAAZ;IACH;EAHL,GAIC,OAJD,CATJ,eAgBI,6BAAC,eAAD,QAAU,QAAV,CAhBJ,eAiBI,6BAAC,eAAD,QAAU,YAAV,CAjBJ,CADJ,CATJ,CADJ;AAiCH,CApCL,EAqCI;EACIC,IAAI,EAAE;IACFC,iBAAiB,EAAE,CAACC,WAAD,EAAOC,eAAP,EAAiBC,YAAjB,EAAwBC,kBAAxB,EAAqCC,mBAArC;EADjB;AADV,CArCJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Chip","Chips"],"sources":["Chips.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\nimport { ReactComponent as BaselineEmailIcon } from \"./icons/baseline-email-24px.svg\";\nimport { Chip, Chips } from \"./index\";\n\nconst story = storiesOf(\"Components/Chips\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Simple chips with a label and description\"}>\n <div>\n <Chips>\n <Chip selected>Cookies</Chip>\n <Chip>Pizza</Chip>\n <Chip>Icecream</Chip>\n </Chips>\n\n <Chips>\n <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n <Chip trailingIcon icon={<BaselineDoneIcon />}>\n Cookies\n </Chip>\n <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n <Chip trailingIcon icon={<BaselineDoneIcon />}>\n Cookies\n </Chip>\n </Chips>\n </div>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <div>\n <Chips>\n <Chip selected>\n Cookies\n </Chip>\n <Chip>\n Pizza\n </Chip>\n <Chip>\n Icecream\n </Chip>\n </Chips>\n <Chips>\n <Chip>\n <ChipIcon leading icon={<BaselineEmailIcon />} />\n Cookies\n <ChipIcon trailing icon={<BaselineDoneIcon />} />\n </Chip>\n </Chips>\n </div>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Chip, Chips] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,uDACI,6BAAC,YAAD,qBACI,6BAAC,WAAD;IAAM,QAAQ;EAAd,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Chip","Chips"],"sources":["Chips.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\nimport { ReactComponent as BaselineEmailIcon } from \"./icons/baseline-email-24px.svg\";\nimport { Chip, Chips } from \"./index\";\n\nconst story = storiesOf(\"Components/Chips\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Simple chips with a label and description\"}>\n <div>\n <Chips>\n <Chip selected>Cookies</Chip>\n <Chip>Pizza</Chip>\n <Chip>Icecream</Chip>\n </Chips>\n\n <Chips>\n <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n <Chip trailingIcon icon={<BaselineDoneIcon />}>\n Cookies\n </Chip>\n <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n <Chip trailingIcon icon={<BaselineDoneIcon />}>\n Cookies\n </Chip>\n </Chips>\n </div>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <div>\n <Chips>\n <Chip selected>\n Cookies\n </Chip>\n <Chip>\n Pizza\n </Chip>\n <Chip>\n Icecream\n </Chip>\n </Chips>\n <Chips>\n <Chip>\n <ChipIcon leading icon={<BaselineEmailIcon />} />\n Cookies\n <ChipIcon trailing icon={<BaselineDoneIcon />} />\n </Chip>\n </Chips>\n </div>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Chip, Chips] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,uDACI,6BAAC,YAAD,qBACI,6BAAC,WAAD;IAAM,QAAQ;EAAd,GAAe,SAAf,CADJ,eAEI,6BAAC,WAAD,QAAM,OAAN,CAFJ,eAGI,6BAAC,WAAD,QAAM,UAAN,CAHJ,CADJ,eAOI,6BAAC,YAAD,qBACI,6BAAC,WAAD;IAAM,IAAI,eAAE,6BAAC,iCAAD;EAAZ,GAAmC,SAAnC,CADJ,eAEI,6BAAC,WAAD;IAAM,YAAY,MAAlB;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,GAA+C,SAA/C,CAFJ,eAKI,6BAAC,WAAD;IAAM,IAAI,eAAE,6BAAC,iCAAD;EAAZ,GAAmC,SAAnC,CALJ,eAMI,6BAAC,WAAD;IAAM,YAAY,MAAlB;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,GAA+C,SAA/C,CANJ,CAPJ,CADJ,CADJ,eAqBI,6BAAC,uBAAD,q6BArBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAD,EAAOC,YAAP;EAAd;AAAR,CAvDJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ConfirmationDialog","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","props","style","state","hideConfirmation","title","message","disableConfirm","children","showConfirmation","React","Component"],"sources":["ConfirmationDialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n Dialog,\n DialogButton,\n DialogCancel,\n DialogActions,\n DialogTitle,\n DialogContent\n} from \"./../Dialog\";\n\nimport { CircularProgress } from \"../Progress\";\n\ninterface ChildrenRenderProp {\n showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;\n}\n\ninterface ConfirmationCallbacks {\n onAccept?: () => void;\n onCancel?: () => void;\n}\n\ninterface Props {\n // Title of confirmation dialog\n title?: React.ReactNode;\n\n // Message of confirmation dialog\n message?: React.ReactNode;\n\n // This element will be rendered during loading\n loading?: React.ReactNode;\n\n // For testing purposes\n \"data-testid\"?: string;\n\n // An element that will trigger the confirmation dialog.\n children: (props: ChildrenRenderProp) => React.ReactNode;\n\n // Is `Confirm` button disabled\n disableConfirm?: boolean;\n\n // Dialog component's custom in-line styles.\n style?: React.CSSProperties;\n}\n\ninterface ConfirmationDialogState {\n show: boolean;\n loading: boolean;\n}\n\n/**\n * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.\n */\nclass ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {\n static defaultProps = {\n title: \"Confirmation\",\n message: \"Are you sure you want to continue?\",\n loading: <CircularProgress />\n };\n\n __isMounted = false;\n\n callbacks: ConfirmationCallbacks = {\n onAccept: () => {\n return void 0;\n },\n onCancel: () => {\n return void 0;\n }\n };\n\n public override state = {\n show: false,\n loading: false\n };\n\n public override componentDidMount() {\n this.__isMounted = true;\n }\n\n public override componentWillUnmount() {\n this.__isMounted = false;\n }\n\n private readonly showConfirmation = (onAccept?: () => void, onCancel?: () => void) => {\n this.callbacks = {\n onAccept,\n onCancel\n };\n this.setState({ show: true });\n };\n\n private readonly hideConfirmation = () => {\n this.setState({ show: false });\n };\n\n private readonly onAccept = async () => {\n const { onAccept } = this.callbacks;\n if (typeof onAccept === \"function\") {\n this.setState({ loading: true });\n await onAccept();\n if (this.__isMounted) {\n this.setState({ loading: false, show: false });\n }\n }\n };\n\n private readonly onCancel = async () => {\n const { onCancel } = this.callbacks;\n if (typeof onCancel === \"function\") {\n await onCancel();\n }\n };\n\n public override render() {\n return (\n <React.Fragment>\n <Dialog\n style={this.props.style}\n open={this.state.show}\n onClose={this.hideConfirmation}\n data-testid={this.props[\"data-testid\"]}\n >\n {this.state.loading ? this.props.loading : null}\n <DialogTitle>{this.props.title}</DialogTitle>\n <DialogContent>{this.props.message}</DialogContent>\n <DialogActions>\n <DialogCancel onClick={this.onCancel}>Cancel</DialogCancel>\n <DialogButton\n data-testid=\"confirmationdialog-confirm-action\"\n onClick={this.onAccept}\n disabled={this.props.disableConfirm}\n >\n Confirm\n </DialogButton>\n </DialogActions>\n </Dialog>\n {this.props.children({\n showConfirmation: this.showConfirmation\n })}\n </React.Fragment>\n );\n }\n}\n\nexport { ConfirmationDialog };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AASA;;AAuCA;AACA;AACA;IACMA,kB;;;;;;;;;;;;;;;8FAOY,K;4FAEqB;MAC/BC,QAAQ,EAAE,oBAAM;QACZ,OAAO,KAAK,CAAZ;MACH,CAH8B;MAI/BC,QAAQ,EAAE,oBAAM;QACZ,OAAO,KAAK,CAAZ;MACH;IAN8B,C;wFASX;MACpBC,IAAI,EAAE,KADc;MAEpBC,OAAO,EAAE;IAFW,C;mGAaY,UAACH,QAAD,EAAwBC,QAAxB,EAAkD;MAClF,MAAKG,SAAL,GAAiB;QACbJ,QAAQ,EAARA,QADa;QAEbC,QAAQ,EAARA;MAFa,CAAjB;;MAIA,MAAKI,QAAL,CAAc;QAAEH,IAAI,EAAE;MAAR,CAAd;IACH,C;mGAEmC,YAAM;MACtC,MAAKG,QAAL,CAAc;QAAEH,IAAI,EAAE;MAAR,CAAd;IACH,C;+LAE2B;MAAA;MAAA;QAAA;UAAA;YAAA;cAChBF,QADgB,GACH,MAAKI,SADF,CAChBJ,QADgB;;cAAA,MAEpB,OAAOA,QAAP,KAAoB,UAFA;gBAAA;gBAAA;cAAA;;cAGpB,MAAKK,QAAL,CAAc;gBAAEF,OAAO,EAAE;cAAX,CAAd;;cAHoB;cAAA,OAIdH,QAAQ,EAJM;;YAAA;cAKpB,IAAI,MAAKM,WAAT,EAAsB;gBAClB,MAAKD,QAAL,CAAc;kBAAEF,OAAO,EAAE,KAAX;kBAAkBD,IAAI,EAAE;gBAAxB,CAAd;cACH;;YAPmB;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;+LAWA;MAAA;MAAA;QAAA;UAAA;YAAA;cAChBD,QADgB,GACH,MAAKG,SADF,CAChBH,QADgB;;cAAA,MAEpB,OAAOA,QAAP,KAAoB,UAFA;gBAAA;gBAAA;cAAA;;cAAA;cAAA,OAGdA,QAAQ,EAHM;;YAAA;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;;;;;;WA/B5B,6BAAoC;MAChC,KAAKK,WAAL,GAAmB,IAAnB;IACH;;;WAED,gCAAuC;MACnC,KAAKA,WAAL,GAAmB,KAAnB;IACH;;;WAgCD,kBAAyB;MACrB,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;QACI,KAAK,EAAE,KAAKC,KAAL,CAAWC,KADtB;QAEI,IAAI,EAAE,KAAKC,KAAL,CAAWP,IAFrB;QAGI,OAAO,EAAE,KAAKQ,gBAHlB;QAII,eAAa,KAAKH,KAAL,CAAW,aAAX;MAJjB,GAMK,KAAKE,KAAL,CAAWN,OAAX,GAAqB,KAAKI,KAAL,CAAWJ,OAAhC,GAA0C,IAN/C,eAOI,6BAAC,mBAAD,QAAc,KAAKI,KAAL,CAAWI,KAAzB,CAPJ,eAQI,6BAAC,qBAAD,QAAgB,KAAKJ,KAAL,CAAWK,OAA3B,CARJ,eASI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD;QAAc,OAAO,EAAE,KAAKX;MAA5B,
|
|
1
|
+
{"version":3,"names":["ConfirmationDialog","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","props","style","state","hideConfirmation","title","message","disableConfirm","children","showConfirmation","React","Component"],"sources":["ConfirmationDialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n Dialog,\n DialogButton,\n DialogCancel,\n DialogActions,\n DialogTitle,\n DialogContent\n} from \"./../Dialog\";\n\nimport { CircularProgress } from \"../Progress\";\n\ninterface ChildrenRenderProp {\n showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;\n}\n\ninterface ConfirmationCallbacks {\n onAccept?: () => void;\n onCancel?: () => void;\n}\n\ninterface Props {\n // Title of confirmation dialog\n title?: React.ReactNode;\n\n // Message of confirmation dialog\n message?: React.ReactNode;\n\n // This element will be rendered during loading\n loading?: React.ReactNode;\n\n // For testing purposes\n \"data-testid\"?: string;\n\n // An element that will trigger the confirmation dialog.\n children: (props: ChildrenRenderProp) => React.ReactNode;\n\n // Is `Confirm` button disabled\n disableConfirm?: boolean;\n\n // Dialog component's custom in-line styles.\n style?: React.CSSProperties;\n}\n\ninterface ConfirmationDialogState {\n show: boolean;\n loading: boolean;\n}\n\n/**\n * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.\n */\nclass ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {\n static defaultProps = {\n title: \"Confirmation\",\n message: \"Are you sure you want to continue?\",\n loading: <CircularProgress />\n };\n\n __isMounted = false;\n\n callbacks: ConfirmationCallbacks = {\n onAccept: () => {\n return void 0;\n },\n onCancel: () => {\n return void 0;\n }\n };\n\n public override state = {\n show: false,\n loading: false\n };\n\n public override componentDidMount() {\n this.__isMounted = true;\n }\n\n public override componentWillUnmount() {\n this.__isMounted = false;\n }\n\n private readonly showConfirmation = (onAccept?: () => void, onCancel?: () => void) => {\n this.callbacks = {\n onAccept,\n onCancel\n };\n this.setState({ show: true });\n };\n\n private readonly hideConfirmation = () => {\n this.setState({ show: false });\n };\n\n private readonly onAccept = async () => {\n const { onAccept } = this.callbacks;\n if (typeof onAccept === \"function\") {\n this.setState({ loading: true });\n await onAccept();\n if (this.__isMounted) {\n this.setState({ loading: false, show: false });\n }\n }\n };\n\n private readonly onCancel = async () => {\n const { onCancel } = this.callbacks;\n if (typeof onCancel === \"function\") {\n await onCancel();\n }\n };\n\n public override render() {\n return (\n <React.Fragment>\n <Dialog\n style={this.props.style}\n open={this.state.show}\n onClose={this.hideConfirmation}\n data-testid={this.props[\"data-testid\"]}\n >\n {this.state.loading ? this.props.loading : null}\n <DialogTitle>{this.props.title}</DialogTitle>\n <DialogContent>{this.props.message}</DialogContent>\n <DialogActions>\n <DialogCancel onClick={this.onCancel}>Cancel</DialogCancel>\n <DialogButton\n data-testid=\"confirmationdialog-confirm-action\"\n onClick={this.onAccept}\n disabled={this.props.disableConfirm}\n >\n Confirm\n </DialogButton>\n </DialogActions>\n </Dialog>\n {this.props.children({\n showConfirmation: this.showConfirmation\n })}\n </React.Fragment>\n );\n }\n}\n\nexport { ConfirmationDialog };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AASA;;AAuCA;AACA;AACA;IACMA,kB;;;;;;;;;;;;;;;8FAOY,K;4FAEqB;MAC/BC,QAAQ,EAAE,oBAAM;QACZ,OAAO,KAAK,CAAZ;MACH,CAH8B;MAI/BC,QAAQ,EAAE,oBAAM;QACZ,OAAO,KAAK,CAAZ;MACH;IAN8B,C;wFASX;MACpBC,IAAI,EAAE,KADc;MAEpBC,OAAO,EAAE;IAFW,C;mGAaY,UAACH,QAAD,EAAwBC,QAAxB,EAAkD;MAClF,MAAKG,SAAL,GAAiB;QACbJ,QAAQ,EAARA,QADa;QAEbC,QAAQ,EAARA;MAFa,CAAjB;;MAIA,MAAKI,QAAL,CAAc;QAAEH,IAAI,EAAE;MAAR,CAAd;IACH,C;mGAEmC,YAAM;MACtC,MAAKG,QAAL,CAAc;QAAEH,IAAI,EAAE;MAAR,CAAd;IACH,C;+LAE2B;MAAA;MAAA;QAAA;UAAA;YAAA;cAChBF,QADgB,GACH,MAAKI,SADF,CAChBJ,QADgB;;cAAA,MAEpB,OAAOA,QAAP,KAAoB,UAFA;gBAAA;gBAAA;cAAA;;cAGpB,MAAKK,QAAL,CAAc;gBAAEF,OAAO,EAAE;cAAX,CAAd;;cAHoB;cAAA,OAIdH,QAAQ,EAJM;;YAAA;cAKpB,IAAI,MAAKM,WAAT,EAAsB;gBAClB,MAAKD,QAAL,CAAc;kBAAEF,OAAO,EAAE,KAAX;kBAAkBD,IAAI,EAAE;gBAAxB,CAAd;cACH;;YAPmB;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;+LAWA;MAAA;MAAA;QAAA;UAAA;YAAA;cAChBD,QADgB,GACH,MAAKG,SADF,CAChBH,QADgB;;cAAA,MAEpB,OAAOA,QAAP,KAAoB,UAFA;gBAAA;gBAAA;cAAA;;cAAA;cAAA,OAGdA,QAAQ,EAHM;;YAAA;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;;;;;;WA/B5B,6BAAoC;MAChC,KAAKK,WAAL,GAAmB,IAAnB;IACH;;;WAED,gCAAuC;MACnC,KAAKA,WAAL,GAAmB,KAAnB;IACH;;;WAgCD,kBAAyB;MACrB,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;QACI,KAAK,EAAE,KAAKC,KAAL,CAAWC,KADtB;QAEI,IAAI,EAAE,KAAKC,KAAL,CAAWP,IAFrB;QAGI,OAAO,EAAE,KAAKQ,gBAHlB;QAII,eAAa,KAAKH,KAAL,CAAW,aAAX;MAJjB,GAMK,KAAKE,KAAL,CAAWN,OAAX,GAAqB,KAAKI,KAAL,CAAWJ,OAAhC,GAA0C,IAN/C,eAOI,6BAAC,mBAAD,QAAc,KAAKI,KAAL,CAAWI,KAAzB,CAPJ,eAQI,6BAAC,qBAAD,QAAgB,KAAKJ,KAAL,CAAWK,OAA3B,CARJ,eASI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD;QAAc,OAAO,EAAE,KAAKX;MAA5B,GAAsC,QAAtC,CADJ,eAEI,6BAAC,oBAAD;QACI,eAAY,mCADhB;QAEI,OAAO,EAAE,KAAKD,QAFlB;QAGI,QAAQ,EAAE,KAAKO,KAAL,CAAWM;MAHzB,GAIC,SAJD,CAFJ,CATJ,CADJ,EAqBK,KAAKN,KAAL,CAAWO,QAAX,CAAoB;QACjBC,gBAAgB,EAAE,KAAKA;MADN,CAApB,CArBL,CADJ;IA2BH;;;EAzF4BC,cAAA,CAAMC,S;;;8BAAjClB,kB,kBACoB;EAClBY,KAAK,EAAE,cADW;EAElBC,OAAO,EAAE,oCAFS;EAGlBT,OAAO,eAAE,6BAAC,0BAAD;AAHS,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","showConfirmation","console","log","info","propTables","ConfirmationDialog"],"sources":["ConfirmationDialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ConfirmationDialog/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\nconst story = storiesOf(\"Components/ConfirmationDialog\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Icon with and without ConfirmationDialog\"}>\n <StorySandboxExample>\n <ConfirmationDialog\n title=\"Pay Invoice\"\n message=\"Are you sure you want pay this invoice?\"\n >\n {({ showConfirmation }) => {\n return (\n <ButtonPrimary\n onClick={() => {\n showConfirmation(\n () => console.log(\"Confirm\"),\n () => console.log(\"Cancel\")\n );\n }}\n >\n Pay Invoice\n </ButtonPrimary>\n );\n }}\n </ConfirmationDialog>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <ConfirmationDialog\n title=\"Pay Invoice\"\n message=\"Are you sure you want pay this invoice?\"\n >\n {({ showConfirmation }) => {\n return (\n <ButtonPrimary\n onClick={() => {\n showConfirmation(\n () => console.log(\"Confirm\"),\n () => console.log(\"Cancel\")\n );\n }}\n >\n Pay Invoice\n </ButtonPrimary>\n );\n }}\n </ConfirmationDialog>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [ConfirmationDialog] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,+BAAV,EAA2CC,MAA3C,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,sCAAD;IACI,KAAK,EAAC,aADV;IAEI,OAAO,EAAC;EAFZ,GAIK,gBAA0B;IAAA,IAAvBC,gBAAuB,QAAvBA,gBAAuB;IACvB,oBACI,6BAAC,qBAAD;MACI,OAAO,EAAE,mBAAM;QACXA,gBAAgB,CACZ;UAAA,OAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;QAAA,CADY,EAEZ;UAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;QAAA,CAFY,CAAhB;MAIH;IANL,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","showConfirmation","console","log","info","propTables","ConfirmationDialog"],"sources":["ConfirmationDialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ConfirmationDialog/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\nconst story = storiesOf(\"Components/ConfirmationDialog\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"Icon with and without ConfirmationDialog\"}>\n <StorySandboxExample>\n <ConfirmationDialog\n title=\"Pay Invoice\"\n message=\"Are you sure you want pay this invoice?\"\n >\n {({ showConfirmation }) => {\n return (\n <ButtonPrimary\n onClick={() => {\n showConfirmation(\n () => console.log(\"Confirm\"),\n () => console.log(\"Cancel\")\n );\n }}\n >\n Pay Invoice\n </ButtonPrimary>\n );\n }}\n </ConfirmationDialog>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <ConfirmationDialog\n title=\"Pay Invoice\"\n message=\"Are you sure you want pay this invoice?\"\n >\n {({ showConfirmation }) => {\n return (\n <ButtonPrimary\n onClick={() => {\n showConfirmation(\n () => console.log(\"Confirm\"),\n () => console.log(\"Cancel\")\n );\n }}\n >\n Pay Invoice\n </ButtonPrimary>\n );\n }}\n </ConfirmationDialog>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [ConfirmationDialog] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,+BAAV,EAA2CC,MAA3C,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,sCAAD;IACI,KAAK,EAAC,aADV;IAEI,OAAO,EAAC;EAFZ,GAIK,gBAA0B;IAAA,IAAvBC,gBAAuB,QAAvBA,gBAAuB;IACvB,oBACI,6BAAC,qBAAD;MACI,OAAO,EAAE,mBAAM;QACXA,gBAAgB,CACZ;UAAA,OAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;QAAA,CADY,EAEZ;UAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;QAAA,CAFY,CAAhB;MAIH;IANL,GAOC,aAPD,CADJ;EAYH,CAjBL,CADJ,CADJ,eAsBI,6BAAC,uBAAD,o7BAtBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sCAAD;EAAd;AAAR,CAvDJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","console","log","info","propTables","Dialog","DialogButton","DialogAccept","DialogCancel","DialogActions","DialogTitle","DialogContent"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Dialog/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport {\n Dialog,\n DialogButton,\n DialogAccept,\n DialogCancel,\n DialogActions,\n DialogTitle,\n DialogContent\n} from \".\";\n\nconst story = storiesOf(\"Components/Dialog\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const open = boolean(\"Open\", false);\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"dialog\"}>\n <StorySandboxExample title={\"A list with all possible options\"}>\n Toggle <code>open</code> prop via the bottom knobs.\n <br />\n <br />\n Note that instead of using <code>DialogFooter.Button</code> with{\" \"}\n <code>accept</code> or <code>cancel</code> prop, you can use a shorter{\" \"}\n <code>DialogAccept</code> and <code>DialogCancel</code> components\n respectively.\n <Dialog open={open}>\n <DialogTitle>Delete confirmation</DialogTitle>\n <DialogContent>Are you sure you want to delete?</DialogContent>\n <DialogActions>\n <DialogCancel onClick={() => console.log(\"Cancel\")}>\n Cancel\n </DialogCancel>\n <DialogAccept onClick={() => console.log(\"Accept\")}>\n OK\n </DialogAccept>\n </DialogActions>\n </Dialog>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Dialog open={${open}}>\n <DialogTitle>\n Delete confirmation\n </DialogTitle>\n <DialogBody>Are you sure you want to delete?</DialogBody>\n <DialogFooter>\n <DialogCancel onClick={() => console.log(\"Cancel\")}>Cancel</DialogCancel>\n <DialogAccept onClick={() => console.log(\"Accept\")}>OK</DialogAccept>\n </DialogFooter>\n </Dialog>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [\n Dialog,\n DialogButton,\n DialogAccept,\n DialogCancel,\n DialogActions,\n DialogTitle,\n DialogContent\n ]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AAUA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAA,EAAQ,MAAR,EAAgB,KAAhB,CAAb;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","console","log","info","propTables","Dialog","DialogButton","DialogAccept","DialogCancel","DialogActions","DialogTitle","DialogContent"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Dialog/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport {\n Dialog,\n DialogButton,\n DialogAccept,\n DialogCancel,\n DialogActions,\n DialogTitle,\n DialogContent\n} from \".\";\n\nconst story = storiesOf(\"Components/Dialog\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const open = boolean(\"Open\", false);\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"dialog\"}>\n <StorySandboxExample title={\"A list with all possible options\"}>\n Toggle <code>open</code> prop via the bottom knobs.\n <br />\n <br />\n Note that instead of using <code>DialogFooter.Button</code> with{\" \"}\n <code>accept</code> or <code>cancel</code> prop, you can use a shorter{\" \"}\n <code>DialogAccept</code> and <code>DialogCancel</code> components\n respectively.\n <Dialog open={open}>\n <DialogTitle>Delete confirmation</DialogTitle>\n <DialogContent>Are you sure you want to delete?</DialogContent>\n <DialogActions>\n <DialogCancel onClick={() => console.log(\"Cancel\")}>\n Cancel\n </DialogCancel>\n <DialogAccept onClick={() => console.log(\"Accept\")}>\n OK\n </DialogAccept>\n </DialogActions>\n </Dialog>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Dialog open={${open}}>\n <DialogTitle>\n Delete confirmation\n </DialogTitle>\n <DialogBody>Are you sure you want to delete?</DialogBody>\n <DialogFooter>\n <DialogCancel onClick={() => console.log(\"Cancel\")}>Cancel</DialogCancel>\n <DialogAccept onClick={() => console.log(\"Accept\")}>OK</DialogAccept>\n </DialogFooter>\n </Dialog>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n {\n info: {\n propTables: [\n Dialog,\n DialogButton,\n DialogAccept,\n DialogCancel,\n DialogActions,\n DialogTitle,\n DialogContent\n ]\n }\n }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AAUA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAA,EAAQ,MAAR,EAAgB,KAAhB,CAAb;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,GAAgE,SAAhE,eACW,2CAAM,MAAN,CADX,EAC4B,6BAD5B,eAEI,wCAFJ,eAGI,wCAHJ,EAGU,6BAHV,eAI+B,2CAAM,qBAAN,CAJ/B,EAI+D,OAJ/D,EAIqE,GAJrE,eAKI,2CAAM,QAAN,CALJ,EAKuB,MALvB,eAK2B,2CAAM,QAAN,CAL3B,EAK8C,8BAL9C,EAK2E,GAL3E,eAMI,2CAAM,cAAN,CANJ,EAM6B,OAN7B,eAMkC,2CAAM,cAAN,CANlC,EAM2D,2BAN3D,eAQI,6BAAC,QAAD;IAAQ,IAAI,EAAEF;EAAd,gBACI,6BAAC,aAAD,QAAa,qBAAb,CADJ,eAEI,6BAAC,eAAD,QAAe,kCAAf,CAFJ,eAGI,6BAAC,eAAD,qBACI,6BAAC,cAAD;IAAc,OAAO,EAAE;MAAA,OAAMG,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;IAAA;EAAvB,GAAoD,QAApD,CADJ,eAII,6BAAC,cAAD;IAAc,OAAO,EAAE;MAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;IAAA;EAAvB,GAAoD,IAApD,CAJJ,CAHJ,CARJ,CADJ,eAsBI,6BAAC,uBAAD,sDAEgBJ,IAFhB,+iBAtBJ,CAFJ,CADJ;AA0CH,CA/CL,EAgDI;EACIK,IAAI,EAAE;IACFC,UAAU,EAAE,CACRC,QADQ,EAERC,cAFQ,EAGRC,cAHQ,EAIRC,cAJQ,EAKRC,eALQ,EAMRC,aANQ,EAORC,eAPQ;EADV;AADV,CAhDJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","info","propTables","Drawer","DrawerHeader","DrawerContent"],"sources":["Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { List, ListItem } from \"./../List\";\n\nimport readme from \"./../Drawer/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { Drawer, DrawerHeader, DrawerContent } from \"./Drawer\";\n\nconst story = storiesOf(\"Components/Drawer\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const open = boolean(\"Open\", true);\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"drawer\"}>\n <StorySandboxExample title={\"A list with all possible options\"}>\n <Drawer open={open}>\n <DrawerHeader>Main Menu</DrawerHeader>\n <DrawerContent>\n <List>\n <ListItem>Users</ListItem>\n <ListItem>Companies</ListItem>\n <ListItem>Brands</ListItem>\n <ListItem>ACL</ListItem>\n <ListItem>Settings</ListItem>\n </List>\n </DrawerContent>\n </Drawer>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Drawer>\n <DrawerHeader>Main Menu</DrawerHeader>\n <DrawerContent>\n <List>\n <ListItem>Users</ListItem>\n <ListItem>Companies</ListItem>\n <ListItem>Brands</ListItem>\n <ListItem>ACL</ListItem>\n <ListItem>Settings</ListItem>\n </List>\n </DrawerContent>\n </Drawer>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Drawer, DrawerHeader, DrawerContent] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAA,EAAQ,MAAR,EAAgB,IAAhB,CAAb;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,cAAD;IAAQ,IAAI,EAAEF;EAAd,gBACI,6BAAC,oBAAD,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","info","propTables","Drawer","DrawerHeader","DrawerContent"],"sources":["Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { List, ListItem } from \"./../List\";\n\nimport readme from \"./../Drawer/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { Drawer, DrawerHeader, DrawerContent } from \"./Drawer\";\n\nconst story = storiesOf(\"Components/Drawer\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const open = boolean(\"Open\", true);\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"drawer\"}>\n <StorySandboxExample title={\"A list with all possible options\"}>\n <Drawer open={open}>\n <DrawerHeader>Main Menu</DrawerHeader>\n <DrawerContent>\n <List>\n <ListItem>Users</ListItem>\n <ListItem>Companies</ListItem>\n <ListItem>Brands</ListItem>\n <ListItem>ACL</ListItem>\n <ListItem>Settings</ListItem>\n </List>\n </DrawerContent>\n </Drawer>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Drawer>\n <DrawerHeader>Main Menu</DrawerHeader>\n <DrawerContent>\n <List>\n <ListItem>Users</ListItem>\n <ListItem>Companies</ListItem>\n <ListItem>Brands</ListItem>\n <ListItem>ACL</ListItem>\n <ListItem>Settings</ListItem>\n </List>\n </DrawerContent>\n </Drawer>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Drawer, DrawerHeader, DrawerContent] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,mBAAV,EAA+BC,MAA/B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAA,EAAQ,MAAR,EAAgB,IAAhB,CAAb;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,cAAD;IAAQ,IAAI,EAAEF;EAAd,gBACI,6BAAC,oBAAD,QAAc,WAAd,CADJ,eAEI,6BAAC,qBAAD,qBACI,6BAAC,UAAD,qBACI,6BAAC,cAAD,QAAU,OAAV,CADJ,eAEI,6BAAC,cAAD,QAAU,WAAV,CAFJ,eAGI,6BAAC,cAAD,QAAU,QAAV,CAHJ,eAII,6BAAC,cAAD,QAAU,KAAV,CAJJ,eAKI,6BAAC,cAAD,QAAU,UAAV,CALJ,CADJ,CAFJ,CADJ,CADJ,eAeI,6BAAC,uBAAD,4mBAfJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;EAAEG,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAD,EAASC,oBAAT,EAAuBC,qBAAvB;EAAd;AAAR,CA3CJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","transition","boolean","z","select","Array","keys","style","padding","backgroundColor","readme","info","propTables","Elevation"],"sources":["Elevation.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Elevation/README.md\";\nimport { withKnobs, boolean, select } from \"@storybook/addon-knobs\";\nimport { Elevation } from \"./Elevation\";\n\nconst story = storiesOf(\"Components/Elevation\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const transition = boolean(\"Transition\", true);\n const z = select(\"Z (elevation height)\", [...Array(25).keys()], 1);\n\n const style = {\n padding: 20,\n backgroundColor: \"white\"\n };\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"An area with applied elevation\"}>\n <StorySandboxExample>\n <Elevation z={z} transition={transition}>\n <div style={style}>This is an elevated content.</div>\n </Elevation>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Elevation z={${z}} transition={${transition}}>\n <div>This is an elevated content.</div>\n </Elevation>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Elevation] } }\n);\n"],"mappings":";;;;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,UAAU,GAAG,IAAAC,mBAAA,EAAQ,YAAR,EAAsB,IAAtB,CAAnB;EACA,IAAMC,CAAC,GAAG,IAAAC,kBAAA,EAAO,sBAAP,mCAAmCC,KAAK,CAAC,EAAD,CAAL,CAAUC,IAAV,EAAnC,GAAsD,CAAtD,CAAV;EAEA,IAAMC,KAAK,GAAG;IACVC,OAAO,EAAE,EADC;IAEVC,eAAe,EAAE;EAFP,CAAd;EAKA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,oBAAD;IAAW,CAAC,EAAEP,CAAd;IAAiB,UAAU,EAAEF;EAA7B,gBACI;IAAK,KAAK,EAAEM;EAAZ,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","transition","boolean","z","select","Array","keys","style","padding","backgroundColor","readme","info","propTables","Elevation"],"sources":["Elevation.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Elevation/README.md\";\nimport { withKnobs, boolean, select } from \"@storybook/addon-knobs\";\nimport { Elevation } from \"./Elevation\";\n\nconst story = storiesOf(\"Components/Elevation\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const transition = boolean(\"Transition\", true);\n const z = select(\"Z (elevation height)\", [...Array(25).keys()], 1);\n\n const style = {\n padding: 20,\n backgroundColor: \"white\"\n };\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"An area with applied elevation\"}>\n <StorySandboxExample>\n <Elevation z={z} transition={transition}>\n <div style={style}>This is an elevated content.</div>\n </Elevation>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Elevation z={${z}} transition={${transition}}>\n <div>This is an elevated content.</div>\n </Elevation>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Elevation] } }\n);\n"],"mappings":";;;;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,UAAU,GAAG,IAAAC,mBAAA,EAAQ,YAAR,EAAsB,IAAtB,CAAnB;EACA,IAAMC,CAAC,GAAG,IAAAC,kBAAA,EAAO,sBAAP,mCAAmCC,KAAK,CAAC,EAAD,CAAL,CAAUC,IAAV,EAAnC,GAAsD,CAAtD,CAAV;EAEA,IAAMC,KAAK,GAAG;IACVC,OAAO,EAAE,EADC;IAEVC,eAAe,EAAE;EAFP,CAAd;EAKA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,oBAAD;IAAW,CAAC,EAAEP,CAAd;IAAiB,UAAU,EAAEF;EAA7B,gBACI;IAAK,KAAK,EAAEM;EAAZ,GAAmB,8BAAnB,CADJ,CADJ,CADJ,eAMI,6BAAC,uBAAD,0DAEoBJ,CAFpB,2BAEsCF,UAFtC,yIANJ,CAFJ,CADJ;AAmBH,CA9BL,EA+BI;EAAEU,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oBAAD;EAAd;AAAR,CA/BJ"}
|
package/Grid/Grid.stories.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Grid","Cell"],"sources":["Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Grid/README.md\";\nimport { Grid, Cell } from \"./Grid\";\n\nconst story = storiesOf(\"Components/Grid\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"A simple grid.\"}>\n <Grid>\n <Cell span={3} tablet={6} phone={12}>\n Apples\n </Cell>\n <Cell span={3} tablet={6} phone={12}>\n Oranges\n </Cell>\n <Cell span={3} tablet={6} phone={12}>\n Bananas\n </Cell>\n <Cell span={3} tablet={6} phone={12}>\n Strawberries\n </Cell>\n </Grid>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Grid, Cell] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Grid","Cell"],"sources":["Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Grid/README.md\";\nimport { Grid, Cell } from \"./Grid\";\n\nconst story = storiesOf(\"Components/Grid\", module);\n\nstory.add(\n \"usage\",\n () => {\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox title={\"A simple grid.\"}>\n <Grid>\n <Cell span={3} tablet={6} phone={12}>\n Apples\n </Cell>\n <Cell span={3} tablet={6} phone={12}>\n Oranges\n </Cell>\n <Cell span={3} tablet={6} phone={12}>\n Bananas\n </Cell>\n <Cell span={3} tablet={6} phone={12}>\n Strawberries\n </Cell>\n </Grid>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Grid, Cell] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,GAAqC,QAArC,CADJ,eAII,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,GAAqC,SAArC,CAJJ,eAOI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,GAAqC,SAArC,CAPJ,eAUI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,GAAqC,cAArC,CAVJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD,EAAOC,UAAP;EAAd;AAAR,CAzBJ"}
|