@webiny/ui 5.27.0-beta.0 → 5.28.0
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.js +27 -13
- package/Accordion/Accordion.js.map +1 -1
- package/Accordion/Accordion.stories.js +34 -23
- package/Accordion/Accordion.stories.js.map +1 -1
- package/Accordion/AccordionItem.js +60 -36
- package/Accordion/AccordionItem.js.map +1 -1
- package/Accordion/index.js +31 -2
- package/Accordion/index.js.map +1 -1
- package/Alert/Alert.js +21 -10
- package/Alert/Alert.js.map +1 -1
- package/Alert/Alert.stories.js +22 -13
- package/Alert/Alert.stories.js.map +1 -1
- package/Alert/index.js +18 -1
- package/Alert/index.js.map +1 -1
- package/AutoComplete/AutoComplete.js +100 -77
- package/AutoComplete/AutoComplete.js.map +1 -1
- package/AutoComplete/AutoComplete.stories.js +27 -17
- package/AutoComplete/AutoComplete.stories.js.map +1 -1
- package/AutoComplete/MultiAutoComplete.js +164 -139
- package/AutoComplete/MultiAutoComplete.js.map +1 -1
- package/AutoComplete/MultiAutoComplete.stories.js +39 -28
- package/AutoComplete/MultiAutoComplete.stories.js.map +1 -1
- package/AutoComplete/index.js +31 -2
- package/AutoComplete/index.js.map +1 -1
- package/AutoComplete/styles.js +14 -4
- package/AutoComplete/styles.js.map +1 -1
- package/AutoComplete/types.js +5 -1
- package/AutoComplete/types.js.map +1 -1
- package/AutoComplete/utils.js +19 -4
- package/AutoComplete/utils.js.map +1 -1
- package/Avatar/Avatar.js +30 -15
- package/Avatar/Avatar.js.map +1 -1
- package/Avatar/Avatar.stories.js +19 -10
- package/Avatar/Avatar.stories.js.map +1 -1
- package/Avatar/index.js +18 -1
- package/Avatar/index.js.map +1 -1
- package/Button/Button.js +52 -23
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js +42 -29
- package/Button/Button.stories.js.map +1 -1
- package/Button/CopyButton/CopyButton.js +24 -11
- package/Button/CopyButton/CopyButton.js.map +1 -1
- package/Button/CopyButton/CopyButton.stories.js +20 -10
- package/Button/CopyButton/CopyButton.stories.js.map +1 -1
- package/Button/IconButton/IconButton.js +14 -4
- package/Button/IconButton/IconButton.js.map +1 -1
- package/Button/IconButton/IconButton.stories.js +31 -19
- package/Button/IconButton/IconButton.stories.js.map +1 -1
- package/Button/index.js +44 -3
- package/Button/index.js.map +1 -1
- package/Carousel/Carousel.js +34 -21
- package/Carousel/Carousel.js.map +1 -1
- package/Carousel/Carouser.stories.js +27 -17
- package/Carousel/Carouser.stories.js.map +1 -1
- package/Carousel/index.js +15 -1
- package/Carousel/index.js.map +1 -1
- package/Checkbox/Checkbox.js +37 -22
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js +27 -16
- package/Checkbox/Checkbox.stories.js.map +1 -1
- package/Checkbox/Checkbox.styles.js +11 -4
- package/Checkbox/Checkbox.styles.js.map +1 -1
- package/Checkbox/CheckboxGroup.js +36 -21
- package/Checkbox/CheckboxGroup.js.map +1 -1
- package/Checkbox/CheckboxGroup.stories.js +29 -18
- package/Checkbox/CheckboxGroup.stories.js.map +1 -1
- package/Checkbox/index.js +23 -2
- package/Checkbox/index.js.map +1 -1
- package/Chips/Chip.js +21 -7
- package/Chips/Chip.js.map +1 -1
- package/Chips/ChipIcon.js +21 -7
- package/Chips/ChipIcon.js.map +1 -1
- package/Chips/Chips.js +29 -12
- package/Chips/Chips.js.map +1 -1
- package/Chips/Chips.stories.js +27 -16
- package/Chips/Chips.stories.js.map +1 -1
- package/Chips/index.js +44 -3
- package/Chips/index.js.map +1 -1
- package/Chips/styles.js +14 -4
- package/Chips/styles.js.map +1 -1
- package/CodeEditor/CodeEditor.js +48 -29
- package/CodeEditor/CodeEditor.js.map +1 -1
- package/CodeEditor/CodeEditor.stories.js +30 -17
- package/CodeEditor/CodeEditor.stories.js.map +1 -1
- package/CodeEditor/index.js +18 -1
- package/CodeEditor/index.js.map +1 -1
- package/ColorPicker/ColorPicker.js +58 -44
- package/ColorPicker/ColorPicker.js.map +1 -1
- package/ColorPicker/ColorPicker.stories.js +26 -15
- package/ColorPicker/ColorPicker.stories.js.map +1 -1
- package/ColorPicker/index.js +18 -1
- package/ColorPicker/index.js.map +1 -1
- package/ConfirmationDialog/ConfirmationDialog.js +51 -42
- package/ConfirmationDialog/ConfirmationDialog.js.map +1 -1
- package/ConfirmationDialog/ConfirmationDialog.stories.js +22 -12
- package/ConfirmationDialog/ConfirmationDialog.stories.js.map +1 -1
- package/ConfirmationDialog/index.js +31 -2
- package/ConfirmationDialog/index.js.map +1 -1
- package/ConfirmationDialog/withConfirmation.js +19 -6
- package/ConfirmationDialog/withConfirmation.js.map +1 -1
- package/Dialog/Dialog.js +68 -37
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +26 -16
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/index.js +18 -1
- package/Dialog/index.js.map +1 -1
- package/Drawer/Drawer.js +20 -6
- package/Drawer/Drawer.js.map +1 -1
- package/Drawer/Drawer.stories.js +26 -15
- package/Drawer/Drawer.stories.js.map +1 -1
- package/Drawer/index.js +18 -1
- package/Drawer/index.js.map +1 -1
- package/DynamicFieldset/Fieldset.js +56 -47
- package/DynamicFieldset/Fieldset.js.map +1 -1
- package/DynamicFieldset/index.js +15 -1
- package/DynamicFieldset/index.js.map +1 -1
- package/Elevation/Elevation.js +17 -6
- package/Elevation/Elevation.js.map +1 -1
- package/Elevation/Elevation.stories.js +27 -16
- package/Elevation/Elevation.stories.js.map +1 -1
- package/Elevation/index.js +18 -1
- package/Elevation/index.js.map +1 -1
- package/FormElementMessage/FormElementMessage.js +15 -5
- package/FormElementMessage/FormElementMessage.js.map +1 -1
- package/FormElementMessage/index.js +13 -1
- package/FormElementMessage/index.js.map +1 -1
- package/FullName/FullName.js +8 -1
- package/FullName/FullName.js.map +1 -1
- package/FullName/index.js +18 -1
- package/FullName/index.js.map +1 -1
- package/Grid/Grid.js +26 -9
- package/Grid/Grid.js.map +1 -1
- package/Grid/Grid.stories.js +21 -12
- package/Grid/Grid.stories.js.map +1 -1
- package/Grid/index.js +18 -1
- package/Grid/index.js.map +1 -1
- package/Helpers/ClassNames.js +16 -7
- package/Helpers/ClassNames.js.map +1 -1
- package/Helpers/index.js +13 -2
- package/Helpers/index.js.map +1 -1
- package/Icon/Icon.js +19 -7
- package/Icon/Icon.js.map +1 -1
- package/Icon/Icon.stories.js +33 -20
- package/Icon/Icon.stories.js.map +1 -1
- package/Icon/index.js +18 -1
- package/Icon/index.js.map +1 -1
- package/Image/Image.js +15 -7
- package/Image/Image.js.map +1 -1
- package/Image/Image.stories.js +21 -11
- package/Image/Image.stories.js.map +1 -1
- package/Image/index.js +18 -1
- package/Image/index.js.map +1 -1
- package/ImageEditor/ImageEditor.js +75 -65
- package/ImageEditor/ImageEditor.js.map +1 -1
- package/ImageEditor/index.js +18 -1
- package/ImageEditor/index.js.map +1 -1
- package/ImageEditor/toolbar/crop.js +30 -13
- package/ImageEditor/toolbar/crop.js.map +1 -1
- package/ImageEditor/toolbar/filter.js +61 -44
- package/ImageEditor/toolbar/filter.js.map +1 -1
- package/ImageEditor/toolbar/flip.js +32 -15
- package/ImageEditor/toolbar/flip.js.map +1 -1
- package/ImageEditor/toolbar/icons/index.js +69 -8
- package/ImageEditor/toolbar/icons/index.js.map +1 -1
- package/ImageEditor/toolbar/index.js +39 -4
- package/ImageEditor/toolbar/index.js.map +1 -1
- package/ImageEditor/toolbar/rotate.js +58 -35
- package/ImageEditor/toolbar/rotate.js.map +1 -1
- package/ImageEditor/toolbar/types.js +5 -1
- package/ImageEditor/toolbar/types.js.map +1 -1
- package/ImageUpload/Image.js +57 -35
- package/ImageUpload/Image.js.map +1 -1
- package/ImageUpload/ImageEditorDialog.js +48 -30
- package/ImageUpload/ImageEditorDialog.js.map +1 -1
- package/ImageUpload/MultiImageUpload.js +88 -70
- package/ImageUpload/MultiImageUpload.js.map +1 -1
- package/ImageUpload/MultiImageUpload.stories.js +26 -15
- package/ImageUpload/MultiImageUpload.stories.js.map +1 -1
- package/ImageUpload/SingleImageUpload.js +68 -45
- package/ImageUpload/SingleImageUpload.js.map +1 -1
- package/ImageUpload/SingleImageUpload.stories.js +27 -16
- package/ImageUpload/SingleImageUpload.stories.js.map +1 -1
- package/ImageUpload/index.js +39 -4
- package/ImageUpload/index.js.map +1 -1
- package/ImageUpload/styled.d.ts +2 -2
- package/ImageUpload/styled.js +29 -15
- package/ImageUpload/styled.js.map +1 -1
- package/Input/Input.js +52 -35
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +62 -46
- package/Input/Input.stories.js.map +1 -1
- package/Input/__tests__/Input.test.js +37 -26
- package/Input/__tests__/Input.test.js.map +1 -1
- package/Input/index.js +18 -1
- package/Input/index.js.map +1 -1
- package/List/CollapsibleList/CollapsibleList.stories.js +27 -16
- package/List/CollapsibleList/CollapsibleList.stories.js.map +1 -1
- package/List/CollapsibleList/index.js +21 -6
- package/List/CollapsibleList/index.js.map +1 -1
- package/List/DataList/DataList.js +89 -60
- package/List/DataList/DataList.js.map +1 -1
- package/List/DataList/DataList.stories.js +37 -25
- package/List/DataList/DataList.stories.js.map +1 -1
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js +29 -10
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map +1 -1
- package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js +27 -9
- package/List/DataList/DataListModalOverlay/DataListModalOverlayAction.js.map +1 -1
- package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js +24 -8
- package/List/DataList/DataListModalOverlay/DataListModalOverlayContext.js.map +1 -1
- package/List/DataList/DataListModalOverlay/index.js +35 -3
- package/List/DataList/DataListModalOverlay/index.js.map +1 -1
- package/List/DataList/Loader.js +25 -13
- package/List/DataList/Loader.js.map +1 -1
- package/List/DataList/NoData.js +19 -6
- package/List/DataList/NoData.js.map +1 -1
- package/List/DataList/icons/index.js +83 -38
- package/List/DataList/icons/index.js.map +1 -1
- package/List/DataList/index.js +48 -3
- package/List/DataList/index.js.map +1 -1
- package/List/DataList/types.js +5 -1
- package/List/DataList/types.js.map +1 -1
- package/List/List.js +92 -49
- package/List/List.js.map +1 -1
- package/List/List.stories.js +52 -37
- package/List/List.stories.js.map +1 -1
- package/List/icons/index.js +23 -3
- package/List/icons/index.js.map +1 -1
- package/List/index.js +60 -3
- package/List/index.js.map +1 -1
- package/Menu/Menu.js +58 -46
- package/Menu/Menu.js.map +1 -1
- package/Menu/Menu.stories.js +24 -14
- package/Menu/Menu.stories.js.map +1 -1
- package/Menu/index.js +18 -1
- package/Menu/index.js.map +1 -1
- package/Mosaic/Mosaic.js +16 -7
- package/Mosaic/Mosaic.js.map +1 -1
- package/Mosaic/Mosaic.stories.js +37 -28
- package/Mosaic/Mosaic.stories.js.map +1 -1
- package/Mosaic/index.js +18 -1
- package/Mosaic/index.js.map +1 -1
- package/Progress/CircularProgress.js +25 -11
- package/Progress/CircularProgress.js.map +1 -1
- package/Progress/index.js +15 -1
- package/Progress/index.js.map +1 -1
- package/Radio/Radio.js +37 -22
- package/Radio/Radio.js.map +1 -1
- package/Radio/Radio.styles.js +11 -4
- package/Radio/Radio.styles.js.map +1 -1
- package/Radio/RadioGroup.js +33 -19
- package/Radio/RadioGroup.js.map +1 -1
- package/Radio/RadioGroup.stories.js +29 -18
- package/Radio/RadioGroup.stories.js.map +1 -1
- package/Radio/index.js +23 -2
- package/Radio/index.js.map +1 -1
- package/RichTextEditor/RichTextEditor.js +56 -32
- package/RichTextEditor/RichTextEditor.js.map +1 -1
- package/RichTextEditor/RichTextEditor.stories.js +21 -10
- package/RichTextEditor/RichTextEditor.stories.js.map +1 -1
- package/RichTextEditor/createPropsFromConfig.js +15 -4
- package/RichTextEditor/createPropsFromConfig.js.map +1 -1
- package/RichTextEditor/index.js +30 -2
- package/RichTextEditor/index.js.map +1 -1
- package/Ripple/Ripple.js +16 -5
- package/Ripple/Ripple.js.map +1 -1
- package/Ripple/Ripple.stories.js +57 -42
- package/Ripple/Ripple.stories.js.map +1 -1
- package/Ripple/index.js +18 -1
- package/Ripple/index.js.map +1 -1
- package/Scrollbar/Scrollbar.js +14 -4
- package/Scrollbar/Scrollbar.js.map +1 -1
- package/Scrollbar/Scrollbar.stories.js +18 -9
- package/Scrollbar/Scrollbar.stories.js.map +1 -1
- package/Scrollbar/index.js +18 -1
- package/Scrollbar/index.js.map +1 -1
- package/Section/Section.stories.js +22 -12
- package/Section/Section.stories.js.map +1 -1
- package/Section/index.js +30 -15
- package/Section/index.js.map +1 -1
- package/Select/Select.js +37 -18
- package/Select/Select.js.map +1 -1
- package/Select/Select.stories.js +36 -25
- package/Select/Select.stories.js.map +1 -1
- package/Select/index.js +18 -1
- package/Select/index.js.map +1 -1
- package/Slider/Slider.js +43 -27
- package/Slider/Slider.js.map +1 -1
- package/Slider/Slider.stories.js +27 -16
- package/Slider/Slider.stories.js.map +1 -1
- package/Slider/index.js +15 -1
- package/Slider/index.js.map +1 -1
- package/Snackbar/Snackbar.js +38 -20
- package/Snackbar/Snackbar.js.map +1 -1
- package/Snackbar/Snackbar.stories.js +44 -30
- package/Snackbar/Snackbar.stories.js.map +1 -1
- package/Snackbar/index.js +19 -1
- package/Snackbar/index.js.map +1 -1
- package/Switch/Switch.js +43 -27
- package/Switch/Switch.js.map +1 -1
- package/Switch/Switch.stories.js +27 -16
- package/Switch/Switch.stories.js.map +1 -1
- package/Switch/index.js +18 -1
- package/Switch/index.js.map +1 -1
- package/Tabs/Tab.js +21 -7
- package/Tabs/Tab.js.map +1 -1
- package/Tabs/Tabs.js +49 -28
- package/Tabs/Tabs.js.map +1 -1
- package/Tabs/Tabs.stories.js +34 -22
- package/Tabs/Tabs.stories.js.map +1 -1
- package/Tabs/index.js +31 -2
- package/Tabs/index.js.map +1 -1
- package/Tags/Tags.js +64 -40
- package/Tags/Tags.js.map +1 -1
- package/Tags/Tags.stories.js +27 -16
- package/Tags/Tags.stories.js.map +1 -1
- package/Tags/index.js +18 -1
- package/Tags/index.js.map +1 -1
- package/Tooltip/Tooltip.js +38 -24
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/Tooltip.stories.js +20 -11
- package/Tooltip/Tooltip.stories.js.map +1 -1
- package/Tooltip/index.js +18 -1
- package/Tooltip/index.js.map +1 -1
- package/TopAppBar/TopAppBar.js +18 -7
- package/TopAppBar/TopAppBar.js.map +1 -1
- package/TopAppBar/TopAppBar.stories.js +39 -25
- package/TopAppBar/TopAppBar.stories.js.map +1 -1
- package/TopAppBar/TopAppBarActionItem.js +14 -4
- package/TopAppBar/TopAppBarActionItem.js.map +1 -1
- package/TopAppBar/TopAppBarNavigationIcon.js +14 -4
- package/TopAppBar/TopAppBarNavigationIcon.js.map +1 -1
- package/TopAppBar/TopAppBarPrimary.js +18 -7
- package/TopAppBar/TopAppBarPrimary.js.map +1 -1
- package/TopAppBar/TopAppBarSecondary.js +18 -7
- package/TopAppBar/TopAppBarSecondary.js.map +1 -1
- package/TopAppBar/TopAppBarSection.js +18 -7
- package/TopAppBar/TopAppBarSection.js.map +1 -1
- package/TopAppBar/TopAppBarTitle.js +18 -7
- package/TopAppBar/TopAppBarTitle.js.map +1 -1
- package/TopAppBar/index.js +96 -7
- package/TopAppBar/index.js.map +1 -1
- package/TopProgressBar/TopProgressBar.js +20 -7
- package/TopProgressBar/TopProgressBar.js.map +1 -1
- package/TopProgressBar/TopProgressBar.stories.js +22 -12
- package/TopProgressBar/TopProgressBar.stories.js.map +1 -1
- package/TopProgressBar/hoc/index.js +15 -1
- package/TopProgressBar/hoc/index.js.map +1 -1
- package/TopProgressBar/hoc/withTopProgressBar.js +16 -5
- package/TopProgressBar/hoc/withTopProgressBar.js.map +1 -1
- package/TopProgressBar/index.js +18 -1
- package/TopProgressBar/index.js.map +1 -1
- package/Typography/Typography.js +14 -4
- package/Typography/Typography.js.map +1 -1
- package/Typography/Typography.stories.js +43 -34
- package/Typography/Typography.stories.js.map +1 -1
- package/Typography/index.js +18 -1
- package/Typography/index.js.map +1 -1
- package/package.json +8 -8
- package/types.js +5 -1
- package/types.js.map +1 -1
package/Radio/RadioGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["RadioGroup","props","description","label","validation","validationIsValid","isValid","validationMessage","message","webinyRadioTitle","children","onChange","value","getValue","id","React","Component"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { webinyRadioTitle } from \"./Radio.styles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface RadioGroupRenderParams {\n onChange: (id: string | number) => () => void;\n getValue: (id: string | number) => boolean;\n}\n\ntype Props = FormComponentProps & {\n // Form element's label.\n label?: string;\n\n // Form element's description.\n description?: string;\n\n // An array of Radio components.\n children: (props: RadioGroupRenderParams) => React.ReactNode;\n};\n\nclass RadioGroup extends React.Component<Props> {\n public override render() {\n const { description, label, validation } = this.props;\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n return (\n <React.Fragment>\n {label && (\n <div\n className={\n \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent \" +\n webinyRadioTitle\n }\n >\n {label}\n </div>\n )}\n\n {this.props.children({\n onChange: value => () => this.props.onChange && this.props.onChange(value),\n getValue: id => this.props.value === id\n })}\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n }\n}\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;IAkBMA,U;;;;;;;;;;;;WACF,kBAAyB;MAAA;;MACrB,kBAA2C,KAAKC,KAAhD;MAAA,IAAQC,WAAR,eAAQA,WAAR;MAAA,IAAqBC,KAArB,eAAqBA,KAArB;MAAA,IAA4BC,UAA5B,eAA4BA,UAA5B;;MAEA,WAAmEA,UAAU,IAAI,EAAjF;MAAA,IAAiBC,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKL,KAAK,iBACF;QACI,SAAS,EACL,uEACAM;MAHR,GAMKN,KANL,CAFR,EAYK,KAAKF,KAAL,CAAWS,QAAX,CAAoB;QACjBC,QAAQ,EAAE,kBAAAC,KAAK;UAAA,OAAI;YAAA,OAAM,KAAI,CAACX,KAAL,CAAWU,QAAX,IAAuB,KAAI,CAACV,KAAL,CAAWU,QAAX,CAAoBC,KAApB,CAA7B;UAAA,CAAJ;QAAA,CADE;QAEjBC,QAAQ,EAAE,kBAAAC,EAAE;UAAA,OAAI,KAAI,CAACb,KAAL,CAAWW,KAAX,KAAqBE,EAAzB;QAAA;MAFK,CAApB,CAZL,EAiBKT,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CAlBR,EAqBKF,iBAAiB,KAAK,KAAtB,IAA+BH,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAtBR,CADJ;IA2BH;;;EAjCoBa,cAAA,CAAMC,S;;eAoChBhB,U"}
|
|
@@ -1,14 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _react2 = require("@storybook/react");
|
|
8
|
+
|
|
9
|
+
var _Story = require("@webiny/storybook-utils/Story");
|
|
10
|
+
|
|
11
|
+
var _addonKnobs = require("@storybook/addon-knobs");
|
|
12
|
+
|
|
13
|
+
var _README = _interopRequireDefault(require("./README.md"));
|
|
14
|
+
|
|
15
|
+
var _form = require("@webiny/form");
|
|
16
|
+
|
|
17
|
+
var _ = require(".");
|
|
18
|
+
|
|
19
|
+
var story = (0, _react2.storiesOf)("Components/Radio", module);
|
|
20
|
+
story.addDecorator(_addonKnobs.withKnobs);
|
|
10
21
|
story.add("usage", function () {
|
|
11
|
-
var disabled = boolean("Disabled", false);
|
|
22
|
+
var disabled = (0, _addonKnobs.boolean)("Disabled", false);
|
|
12
23
|
var options = [{
|
|
13
24
|
id: "apple",
|
|
14
25
|
name: "Apple"
|
|
@@ -19,26 +30,26 @@ story.add("usage", function () {
|
|
|
19
30
|
id: "orange",
|
|
20
31
|
name: "Orange"
|
|
21
32
|
}];
|
|
22
|
-
return /*#__PURE__*/
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
|
|
23
34
|
title: "Simple radio with label and description"
|
|
24
|
-
}, /*#__PURE__*/
|
|
35
|
+
}, /*#__PURE__*/_react.default.createElement(_form.Form, {
|
|
25
36
|
data: {
|
|
26
37
|
fruits: "pear"
|
|
27
38
|
}
|
|
28
39
|
}, function (_ref) {
|
|
29
40
|
var Bind = _ref.Bind;
|
|
30
|
-
return /*#__PURE__*/
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(Bind, {
|
|
31
42
|
name: "fruits"
|
|
32
|
-
}, /*#__PURE__*/
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement(_.RadioGroup, {
|
|
33
44
|
label: "Fruit selection",
|
|
34
45
|
description: "Choose fruit you like the most."
|
|
35
46
|
}, function (_ref2) {
|
|
36
47
|
var onChange = _ref2.onChange,
|
|
37
48
|
getValue = _ref2.getValue;
|
|
38
|
-
return /*#__PURE__*/
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options.map(function (_ref3) {
|
|
39
50
|
var id = _ref3.id,
|
|
40
51
|
name = _ref3.name;
|
|
41
|
-
return /*#__PURE__*/
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(_.Radio, {
|
|
42
53
|
disabled: disabled,
|
|
43
54
|
key: id,
|
|
44
55
|
label: name,
|
|
@@ -47,9 +58,9 @@ story.add("usage", function () {
|
|
|
47
58
|
});
|
|
48
59
|
}));
|
|
49
60
|
}));
|
|
50
|
-
})), /*#__PURE__*/
|
|
61
|
+
})), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n <Form data={{fruits: ['pear']}}>\n {({ Bind }) => (\n <Bind name=\"fruits\">\n <RadioGroup\n label=\"Fruits selection\"\n description={\"Choose only fruits you like.\"}\n >\n {({ onChange, getValue }) => (\n <React.Fragment>\n {options.map(({id, name}) => (\n <Radio\n disabled={disabled}\n key={id}\n label={name}\n value={getValue(id)}\n onChange={onChange(id)}\n />\n ))}\n </React.Fragment>\n )}\n </RadioGroup>\n </Bind>\n )}\n </Form>\n ")));
|
|
51
62
|
}, {
|
|
52
63
|
info: {
|
|
53
|
-
propTables: [Radio, RadioGroup]
|
|
64
|
+
propTables: [_.Radio, _.RadioGroup]
|
|
54
65
|
}
|
|
55
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","options","id","name","readme","fruits","Bind","onChange","getValue","map","info","propTables","Radio","RadioGroup"],"sources":["RadioGroup.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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Radio, RadioGroup } from \".\";\n\nconst story = storiesOf(\"Components/Radio\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n \"usage\",\n () => {\n const disabled = boolean(\"Disabled\", false);\n\n const options = [\n { id: \"apple\", name: \"Apple\" },\n { id: \"pear\", name: \"Pear\" },\n { id: \"orange\", name: \"Orange\" }\n ];\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample title={\"Simple radio with label and description\"}>\n <Form data={{ fruits: \"pear\" }}>\n {({ Bind }) => (\n <Bind name=\"fruits\">\n <RadioGroup\n label=\"Fruit selection\"\n description={\"Choose fruit you like the most.\"}\n >\n {({ onChange, getValue }) => (\n <React.Fragment>\n {options.map(({ id, name }) => (\n <Radio\n disabled={disabled}\n key={id}\n label={name}\n value={getValue(id)}\n onChange={onChange(id)}\n />\n ))}\n </React.Fragment>\n )}\n </RadioGroup>\n </Bind>\n )}\n </Form>\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n <Form data={{fruits: ['pear']}}>\n {({ Bind }) => (\n <Bind name=\"fruits\">\n <RadioGroup\n label=\"Fruits selection\"\n description={\"Choose only fruits you like.\"}\n >\n {({ onChange, getValue }) => (\n <React.Fragment>\n {options.map(({id, name}) => (\n <Radio\n disabled={disabled}\n key={id}\n label={name}\n value={getValue(id)}\n onChange={onChange(id)}\n />\n ))}\n </React.Fragment>\n )}\n </RadioGroup>\n </Bind>\n )}\n </Form>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [Radio, RadioGroup] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,IAAMC,OAAO,GAAG,CACZ;IAAEC,EAAE,EAAE,OAAN;IAAeC,IAAI,EAAE;EAArB,CADY,EAEZ;IAAED,EAAE,EAAE,MAAN;IAAcC,IAAI,EAAE;EAApB,CAFY,EAGZ;IAAED,EAAE,EAAE,QAAN;IAAgBC,IAAI,EAAE;EAAtB,CAHY,CAAhB;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,MAAM,EAAE;IAAV;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,YAAD;MACI,KAAK,EAAC,iBADV;MAEI,WAAW,EAAE;IAFjB,GAIK;MAAA,IAAGC,QAAH,SAAGA,QAAH;MAAA,IAAaC,QAAb,SAAaA,QAAb;MAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKP,OAAO,CAACQ,GAAR,CAAY;QAAA,IAAGP,EAAH,SAAGA,EAAH;QAAA,IAAOC,IAAP,SAAOA,IAAP;QAAA,oBACT,6BAAC,OAAD;UACI,QAAQ,EAAEJ,QADd;UAEI,GAAG,EAAEG,EAFT;UAGI,KAAK,EAAEC,IAHX;UAII,KAAK,EAAEK,QAAQ,CAACN,EAAD,CAJnB;UAKI,QAAQ,EAAEK,QAAQ,CAACL,EAAD;QALtB,EADS;MAAA,CAAZ,CADL,CADH;IAAA,CAJL,CADJ,CADH;EAAA,CADL,CADJ,CADJ,eA2BI,6BAAC,uBAAD,i1CA3BJ,CAFJ,CADJ;AA6DH,CAxEL,EAyEI;EAAEQ,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,OAAD,EAAQC,YAAR;EAAd;AAAR,CAzEJ"}
|
package/Radio/index.js
CHANGED
|
@@ -1,2 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "Radio", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Radio.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "RadioGroup", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _RadioGroup.default;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
var _Radio = _interopRequireDefault(require("./Radio"));
|
|
22
|
+
|
|
23
|
+
var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
|
package/Radio/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as Radio } from \"./Radio\";\nexport { default as RadioGroup } from \"./RadioGroup\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -1,51 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.RichTextEditor = void 0;
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
|
|
15
|
+
|
|
16
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
17
|
+
|
|
18
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
19
|
+
|
|
20
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
21
|
+
|
|
22
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
23
|
+
|
|
24
|
+
var _shortid = _interopRequireDefault(require("shortid"));
|
|
25
|
+
|
|
26
|
+
var _editorjs = _interopRequireDefault(require("@editorjs/editorjs"));
|
|
27
|
+
|
|
28
|
+
var _FormElementMessage = require("../FormElementMessage");
|
|
29
|
+
|
|
30
|
+
var _emotion = require("emotion");
|
|
31
|
+
|
|
32
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
33
|
+
|
|
5
34
|
var _excluded = ["value", "context", "onReady"];
|
|
6
|
-
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
7
|
-
import React, { Fragment, useEffect, useRef } from "react";
|
|
8
|
-
import shortid from "shortid";
|
|
9
|
-
import EditorJS from "@editorjs/editorjs";
|
|
10
|
-
import { FormElementMessage } from "../FormElementMessage";
|
|
11
|
-
import { css } from "emotion";
|
|
12
|
-
import classNames from "classnames";
|
|
13
35
|
var classes = {
|
|
14
|
-
wrapper: /*#__PURE__*/css({
|
|
36
|
+
wrapper: /*#__PURE__*/(0, _emotion.css)({
|
|
15
37
|
backgroundColor: "var(--mdc-theme-background)",
|
|
16
38
|
padding: "20px 16px 6px"
|
|
17
39
|
}, "label:wrapper;"),
|
|
18
|
-
label: /*#__PURE__*/css({
|
|
40
|
+
label: /*#__PURE__*/(0, _emotion.css)({
|
|
19
41
|
marginBottom: "10px !important"
|
|
20
42
|
}, "label:label;"),
|
|
21
|
-
disable: /*#__PURE__*/css({
|
|
43
|
+
disable: /*#__PURE__*/(0, _emotion.css)({
|
|
22
44
|
opacity: 0.7,
|
|
23
45
|
pointerEvents: "none"
|
|
24
46
|
}, "label:disable;")
|
|
25
47
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
48
|
+
|
|
49
|
+
var RichTextEditor = function RichTextEditor(props) {
|
|
50
|
+
var elementId = (0, _react.useRef)("rte-" + _shortid.default.generate());
|
|
51
|
+
var editorRef = (0, _react.useRef)();
|
|
52
|
+
(0, _react.useEffect)(function () {
|
|
30
53
|
var value = props.value,
|
|
31
54
|
context = props.context,
|
|
32
55
|
_onReady = props.onReady,
|
|
33
|
-
nativeProps =
|
|
34
|
-
|
|
56
|
+
nativeProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
35
57
|
var initialData = value ? {
|
|
36
58
|
blocks: value
|
|
37
59
|
} : {
|
|
38
60
|
blocks: []
|
|
39
61
|
};
|
|
40
|
-
editorRef.current = new
|
|
62
|
+
editorRef.current = new _editorjs.default((0, _objectSpread2.default)((0, _objectSpread2.default)({}, nativeProps), {}, {
|
|
41
63
|
holder: elementId.current,
|
|
42
64
|
logLevel: "ERROR",
|
|
43
65
|
data: initialData,
|
|
44
66
|
onChange: function () {
|
|
45
|
-
var _onChange =
|
|
67
|
+
var _onChange = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
|
|
46
68
|
var _yield$editorRef$curr, data;
|
|
47
69
|
|
|
48
|
-
return
|
|
70
|
+
return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
|
|
49
71
|
while (1) {
|
|
50
72
|
switch (_context.prev = _context.next) {
|
|
51
73
|
case 0:
|
|
@@ -114,7 +136,7 @@ export var RichTextEditor = function RichTextEditor(props) {
|
|
|
114
136
|
} else if (typeof tool.config === "function") {
|
|
115
137
|
tool.config = tool.config();
|
|
116
138
|
} else {
|
|
117
|
-
tool.config =
|
|
139
|
+
tool.config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tool.config), {}, {
|
|
118
140
|
context: context
|
|
119
141
|
});
|
|
120
142
|
}
|
|
@@ -135,13 +157,15 @@ export var RichTextEditor = function RichTextEditor(props) {
|
|
|
135
157
|
disabled = props.disabled,
|
|
136
158
|
validation = props.validation,
|
|
137
159
|
className = props.className;
|
|
138
|
-
return /*#__PURE__*/
|
|
139
|
-
className:
|
|
140
|
-
}, label && /*#__PURE__*/
|
|
141
|
-
className:
|
|
142
|
-
}, label), /*#__PURE__*/
|
|
160
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
161
|
+
className: (0, _classnames.default)(classes.wrapper, className, (0, _defineProperty2.default)({}, classes.disable, disabled))
|
|
162
|
+
}, label && /*#__PURE__*/_react.default.createElement("div", {
|
|
163
|
+
className: (0, _classnames.default)("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
|
|
164
|
+
}, label), /*#__PURE__*/_react.default.createElement("div", {
|
|
143
165
|
id: elementId.current
|
|
144
|
-
})), validation && validation.isValid === false && /*#__PURE__*/
|
|
166
|
+
})), validation && validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
|
|
145
167
|
error: true
|
|
146
|
-
}, validation.message), validation && validation.isValid !== false && description && /*#__PURE__*/
|
|
147
|
-
};
|
|
168
|
+
}, validation.message), validation && validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
exports.RichTextEditor = RichTextEditor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["classes","wrapper","css","backgroundColor","padding","label","marginBottom","disable","opacity","pointerEvents","RichTextEditor","props","elementId","useRef","shortid","generate","editorRef","useEffect","value","context","onReady","nativeProps","initialData","blocks","current","EditorJS","holder","logLevel","data","onChange","save","editor","tools","Object","keys","reduce","name","tool","config","destroy","description","disabled","validation","className","classNames","isValid","message"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\nimport shortid from \"shortid\";\nimport EditorJS from \"@editorjs/editorjs\";\nimport {\n LogLevels,\n OutputBlockData,\n OutputData,\n SanitizerConfig,\n ToolSettings\n} from \"@editorjs/editorjs\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormComponentProps } from \"@webiny/form\";\n\nconst classes = {\n wrapper: css({\n backgroundColor: \"var(--mdc-theme-background)\",\n padding: \"20px 16px 6px\"\n }),\n label: css({\n marginBottom: \"10px !important\"\n }),\n disable: css({\n opacity: 0.7,\n pointerEvents: \"none\"\n })\n};\n\ninterface EditorJSType {\n destroy?: () => void;\n save: () => Promise<any>;\n}\n\nexport interface OnReadyParams {\n editor: any;\n initialData: OutputData;\n}\n\nexport type RichTextEditorValue = OutputBlockData[];\n\nexport interface RichTextEditorProps {\n autofocus?: boolean;\n context?: { [key: string]: any };\n logLevel?: string;\n minHeight?: number;\n onChange?: (data: RichTextEditorValue) => void;\n onReady?: (params: OnReadyParams) => void;\n placeholder?: string;\n readOnly?: boolean;\n sanitizer?: SanitizerConfig;\n tools?: {\n [toolName: string]: ToolSettings;\n };\n value?: RichTextEditorValue;\n label?: string;\n description?: string;\n disabled?: boolean;\n validation?: FormComponentProps[\"validation\"];\n className?: string;\n}\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n const elementId = useRef(\"rte-\" + shortid.generate());\n const editorRef = useRef<EditorJSType>();\n\n useEffect(() => {\n const { value, context, onReady, ...nativeProps } = props;\n const initialData = value ? { blocks: value } : { blocks: [] };\n\n editorRef.current = new EditorJS({\n ...nativeProps,\n holder: elementId.current,\n logLevel: \"ERROR\" as LogLevels.ERROR,\n data: initialData,\n onChange: async () => {\n if (!editorRef.current) {\n return;\n }\n const { blocks: data } = await editorRef.current.save();\n if (!props.onChange) {\n return;\n }\n props.onChange(data);\n },\n onReady() {\n if (typeof onReady !== \"function\") {\n return;\n }\n onReady({ editor: editorRef.current, initialData });\n },\n tools: Object.keys(props.tools || {}).reduce((tools, name) => {\n const tool = props.tools ? props.tools[name] : null;\n if (!tool) {\n return tools;\n }\n tools[name] = tool;\n if (!tool.config) {\n tool.config = { context };\n } else if (typeof tool.config === \"function\") {\n tool.config = tool.config();\n } else {\n tool.config = { ...tool.config, context };\n }\n return tools;\n }, {} as Record<string, ToolSettings>)\n });\n\n return () => {\n if (!editorRef.current || typeof editorRef.current.destroy !== \"function\") {\n return;\n }\n\n editorRef.current.destroy();\n };\n }, []);\n\n const { label, description, disabled, validation, className } = props;\n\n return (\n <Fragment>\n <div\n className={classNames(classes.wrapper, className, { [classes.disable]: disabled })}\n >\n {label && (\n <div\n className={classNames(\n \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n classes.label\n )}\n >\n {label}\n </div>\n )}\n <div id={elementId.current} />\n </div>\n {validation && validation.isValid === false && (\n <FormElementMessage error>{validation.message}</FormElementMessage>\n )}\n {validation && validation.isValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </Fragment>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,19 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
|
|
9
|
+
var _react2 = require("@storybook/react");
|
|
10
|
+
|
|
11
|
+
var _Story = require("@webiny/storybook-utils/Story");
|
|
12
|
+
|
|
13
|
+
var _README = _interopRequireDefault(require("./README.md"));
|
|
14
|
+
|
|
15
|
+
var _index = require("./index");
|
|
16
|
+
|
|
17
|
+
var story = (0, _react2.storiesOf)("Components/RichTextEditor", module);
|
|
7
18
|
story.add("usage", function () {
|
|
8
|
-
var onChange = useCallback(function (data) {
|
|
19
|
+
var onChange = (0, _react.useCallback)(function (data) {
|
|
9
20
|
console.log(data);
|
|
10
21
|
}, []);
|
|
11
|
-
return /*#__PURE__*/
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_index.RichTextEditor, {
|
|
12
23
|
value: undefined,
|
|
13
24
|
onChange: onChange
|
|
14
|
-
})), /*#__PURE__*/
|
|
25
|
+
})), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n import { RichTextEditor } from \"..\";\n\n <RichTextEditor/>\n ")));
|
|
15
26
|
}, {
|
|
16
27
|
info: {
|
|
17
|
-
propTables: [RichTextEditor]
|
|
28
|
+
propTables: [_index.RichTextEditor]
|
|
18
29
|
}
|
|
19
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["story","storiesOf","module","add","onChange","useCallback","data","console","log","readme","undefined","info","propTables","RichTextEditor"],"sources":["RichTextEditor.stories.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { storiesOf } from \"@storybook/react\";\n\nimport {\n Story,\n StoryReadme,\n StorySandboxCode,\n StorySandbox,\n StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { RichTextEditor } from \"./index\";\n\nconst story = storiesOf(\"Components/RichTextEditor\", module);\n\nstory.add(\n \"usage\",\n () => {\n const onChange = useCallback(data => {\n console.log(data);\n }, []);\n\n return (\n <Story>\n <StoryReadme>{readme}</StoryReadme>\n <StorySandbox>\n <StorySandboxExample>\n <RichTextEditor value={undefined} onChange={onChange} />\n </StorySandboxExample>\n <StorySandboxCode>\n {`\n import { RichTextEditor } from \"..\";\n\n <RichTextEditor/>\n `}\n </StorySandboxCode>\n </StorySandbox>\n </Story>\n );\n },\n { info: { propTables: [RichTextEditor] } }\n);\n"],"mappings":";;;;;;AAAA;;AACA;;AAEA;;AAOA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,2BAAV,EAAuCC,MAAvC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,kBAAA,EAAY,UAAAC,IAAI,EAAI;IACjCC,OAAO,CAACC,GAAR,CAAYF,IAAZ;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcG,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,qBAAD;IAAgB,KAAK,EAAEC,SAAvB;IAAkC,QAAQ,EAAEN;EAA5C,EADJ,CADJ,eAII,6BAAC,uBAAD,8IAJJ,CAFJ,CADJ;AAiBH,CAxBL,EAyBI;EAAEO,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,qBAAD;EAAd;AAAR,CAzBJ"}
|
|
@@ -1,11 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.createPropsFromConfig = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
2
11
|
|
|
3
12
|
/**
|
|
4
13
|
* Creates RichTextEditor props from the given config (or array of configs).
|
|
5
14
|
*
|
|
6
15
|
* TODO: figure out types for editor and return type of the function.
|
|
7
16
|
*/
|
|
8
|
-
|
|
17
|
+
var createPropsFromConfig = function createPropsFromConfig(config) {
|
|
9
18
|
var configs = Array.isArray(config) ? config : [config];
|
|
10
19
|
return {
|
|
11
20
|
onReady: function onReady(params) {
|
|
@@ -16,7 +25,9 @@ export var createPropsFromConfig = function createPropsFromConfig(config) {
|
|
|
16
25
|
});
|
|
17
26
|
},
|
|
18
27
|
tools: configs.reduce(function (tools, config) {
|
|
19
|
-
return
|
|
28
|
+
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tools), config.tools);
|
|
20
29
|
}, {})
|
|
21
30
|
};
|
|
22
|
-
};
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
exports.createPropsFromConfig = createPropsFromConfig;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["createPropsFromConfig","config","configs","Array","isArray","onReady","params","forEach","tools","reduce"],"sources":["createPropsFromConfig.ts"],"sourcesContent":["import { RichTextEditorProps } from \"./RichTextEditor\";\nimport { ToolSettings } from \"@editorjs/editorjs\";\nimport { OutputData } from \"@editorjs/editorjs/types\";\n\ninterface CreatePropsFromConfigResult {\n onReady: (editor: any) => void;\n tools: {\n [key: string]: ToolSettings;\n };\n}\n\ninterface OnReadyParams {\n editor: any;\n initialData: OutputData;\n}\n/**\n * Creates RichTextEditor props from the given config (or array of configs).\n *\n * TODO: figure out types for editor and return type of the function.\n */\nexport const createPropsFromConfig = (\n config: RichTextEditorProps[]\n): CreatePropsFromConfigResult => {\n const configs = (Array.isArray(config) ? config : [config]) as RichTextEditorProps[];\n\n return {\n onReady(params: OnReadyParams) {\n configs.forEach(config => {\n if (typeof config.onReady === \"function\") {\n config.onReady(params);\n }\n });\n },\n tools: configs.reduce((tools, config) => {\n return {\n ...tools,\n ...config.tools\n };\n }, {} as Record<string, ToolSettings>)\n };\n};\n"],"mappings":";;;;;;;;;;;AAeA;AACA;AACA;AACA;AACA;AACO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CACjCC,MADiC,EAEH;EAC9B,IAAMC,OAAO,GAAIC,KAAK,CAACC,OAAN,CAAcH,MAAd,IAAwBA,MAAxB,GAAiC,CAACA,MAAD,CAAlD;EAEA,OAAO;IACHI,OADG,mBACKC,MADL,EAC4B;MAC3BJ,OAAO,CAACK,OAAR,CAAgB,UAAAN,MAAM,EAAI;QACtB,IAAI,OAAOA,MAAM,CAACI,OAAd,KAA0B,UAA9B,EAA0C;UACtCJ,MAAM,CAACI,OAAP,CAAeC,MAAf;QACH;MACJ,CAJD;IAKH,CAPE;IAQHE,KAAK,EAAEN,OAAO,CAACO,MAAR,CAAe,UAACD,KAAD,EAAQP,MAAR,EAAmB;MACrC,mEACOO,KADP,GAEOP,MAAM,CAACO,KAFd;IAIH,CALM,EAKJ,EALI;EARJ,CAAP;AAeH,CApBM"}
|
package/RichTextEditor/index.js
CHANGED
|
@@ -1,2 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
createPropsFromConfig: true
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "createPropsFromConfig", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function get() {
|
|
12
|
+
return _createPropsFromConfig.createPropsFromConfig;
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
var _RichTextEditor = require("./RichTextEditor");
|
|
17
|
+
|
|
18
|
+
Object.keys(_RichTextEditor).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
+
if (key in exports && exports[key] === _RichTextEditor[key]) return;
|
|
22
|
+
Object.defineProperty(exports, key, {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function get() {
|
|
25
|
+
return _RichTextEditor[key];
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
var _createPropsFromConfig = require("./createPropsFromConfig");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./RichTextEditor\";\nexport type { RichTextEditorProps, OnReadyParams, RichTextEditorValue } from \"./RichTextEditor\";\nexport { createPropsFromConfig } from \"./createPropsFromConfig\";\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA"}
|
package/Ripple/Ripple.js
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.Ripple = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _ripple = require("@rmwc/ripple");
|
|
4
15
|
|
|
5
16
|
/**
|
|
6
17
|
* Use Ripple component to display a list of choices, once the handler is triggered.
|
|
@@ -8,7 +19,7 @@ import { Ripple as RmwcRipple } from "@rmwc/ripple";
|
|
|
8
19
|
var Ripple = function Ripple(props) {
|
|
9
20
|
// Let's pass "unbounded" / "primary" / "accent" flags as "type" prop instead.
|
|
10
21
|
var type = props.type || "surface";
|
|
11
|
-
return /*#__PURE__*/
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_ripple.Ripple, Object.assign({}, (0, _defineProperty2.default)({}, type, true), props), props.children);
|
|
12
23
|
};
|
|
13
24
|
|
|
14
|
-
|
|
25
|
+
exports.Ripple = Ripple;
|
package/Ripple/Ripple.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Ripple","props","type","children"],"sources":["Ripple.tsx"],"sourcesContent":["import React from \"react\";\nimport { Ripple as RmwcRipple } from \"@rmwc/ripple\";\n\ninterface Props {\n // Choose the type of ripple.\n type?: \"unbounded\" | \"primary\" | \"accent\";\n\n // Makes the ripple disabled.\n disabled?: boolean;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Ripple: React.FC<Props> = props => {\n // Let's pass \"unbounded\" / \"primary\" / \"accent\" flags as \"type\" prop instead.\n const type = props.type || \"surface\";\n\n return (\n <RmwcRipple {...{ [type]: true }} {...props}>\n {props.children}\n </RmwcRipple>\n );\n};\n\nexport { Ripple };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAUA;AACA;AACA;AACA,IAAMA,MAAuB,GAAG,SAA1BA,MAA0B,CAAAC,KAAK,EAAI;EACrC;EACA,IAAMC,IAAI,GAAGD,KAAK,CAACC,IAAN,IAAc,SAA3B;EAEA,oBACI,6BAAC,cAAD,sDAAmBA,IAAnB,EAA0B,IAA1B,GAAsCD,KAAtC,GACKA,KAAK,CAACE,QADX,CADJ;AAKH,CATD"}
|