@laerdal/life-react-components 6.0.9-dev.1.full → 6.1.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/dist/InputFields/RichTextField.cjs +3 -19
- package/dist/InputFields/RichTextField.cjs.map +1 -1
- package/dist/InputFields/RichTextField.js +3 -19
- package/dist/InputFields/RichTextField.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +3 -0
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.d.ts +1 -0
- package/dist/Modals/ModalContainer.js +3 -0
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +7 -1
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.d.ts +2 -0
- package/dist/Modals/ModalDialog.js +7 -1
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Table/Table.cjs +3 -9
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +3 -9
- package/dist/Table/Table.js.map +1 -1
- package/package.json +148 -152
|
@@ -26,8 +26,7 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
|
|
|
26
26
|
.quill {
|
|
27
27
|
width: 100%;
|
|
28
28
|
margin-bottom: 4px;
|
|
29
|
-
overflow:
|
|
30
|
-
position: relative;
|
|
29
|
+
overflow: hidden;
|
|
31
30
|
|
|
32
31
|
box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
|
|
33
32
|
componentType: 'border',
|
|
@@ -104,20 +103,6 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
|
|
|
104
103
|
componentType: 'border',
|
|
105
104
|
defaultVariant: 'subtle'
|
|
106
105
|
}, props.theme)};
|
|
107
|
-
position: relative;
|
|
108
|
-
z-index: 1;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.ql-tooltip {
|
|
112
|
-
z-index: 1000 !important;
|
|
113
|
-
position: absolute !important;
|
|
114
|
-
left: 0 !important;
|
|
115
|
-
right: auto !important;
|
|
116
|
-
transform: none !important;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.ql-tooltip.ql-editing {
|
|
120
|
-
left: 8px !important;
|
|
121
106
|
}
|
|
122
107
|
|
|
123
108
|
.quill.valid .ql-toolbar,
|
|
@@ -134,7 +119,7 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
|
|
|
134
119
|
|
|
135
120
|
.ql-container.ql-snow {
|
|
136
121
|
border: none;
|
|
137
|
-
overflow-y:
|
|
122
|
+
overflow-y: hidden;
|
|
138
123
|
padding: 8px;
|
|
139
124
|
}
|
|
140
125
|
|
|
@@ -150,13 +135,12 @@ const RichTextFieldContainer = exports.RichTextFieldContainer = _styledComponent
|
|
|
150
135
|
|
|
151
136
|
.quill {
|
|
152
137
|
flex: none;
|
|
153
|
-
overflow:
|
|
138
|
+
overflow: initial;
|
|
154
139
|
}
|
|
155
140
|
|
|
156
141
|
.ql-container {
|
|
157
142
|
flex: none;
|
|
158
143
|
resize: vertical;
|
|
159
|
-
overflow-y: hidden;
|
|
160
144
|
}
|
|
161
145
|
|
|
162
146
|
.ql-editor {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuillNew","_styledComponents","_interopRequireWildcard","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","RichTextFieldContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","ComponentSStyling","ComponentTextStyle","Regular","Italic","ComponentMStyling","scrollBarStyling","Size","Small","readOnlyState","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties2","useTheme","m","toolbar","f","values","Image","Video","Formula","jsxs","className","children","jsx","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill-new/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: visible;\r\n position: relative;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .ql-tooltip {\r\n z-index: 1000 !important;\r\n position: absolute !important;\r\n left: 0 !important;\r\n right: auto !important;\r\n transform: none !important;\r\n }\r\n\r\n .ql-tooltip.ql-editing {\r\n left: 8px !important;\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: visible;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: visible;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n overflow-y: hidden;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuillNew","_styledComponents","_interopRequireWildcard","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","RichTextFieldContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","ComponentSStyling","ComponentTextStyle","Regular","Italic","ComponentMStyling","scrollBarStyling","Size","Small","readOnlyState","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties2","useTheme","m","toolbar","f","values","Image","Video","Formula","jsxs","className","children","jsx","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill-new/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,8 +17,7 @@ export const RichTextFieldContainer = styled.div`
|
|
|
17
17
|
.quill {
|
|
18
18
|
width: 100%;
|
|
19
19
|
margin-bottom: 4px;
|
|
20
|
-
overflow:
|
|
21
|
-
position: relative;
|
|
20
|
+
overflow: hidden;
|
|
22
21
|
|
|
23
22
|
box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
|
|
24
23
|
componentType: 'border',
|
|
@@ -95,20 +94,6 @@ export const RichTextFieldContainer = styled.div`
|
|
|
95
94
|
componentType: 'border',
|
|
96
95
|
defaultVariant: 'subtle'
|
|
97
96
|
}, props.theme)};
|
|
98
|
-
position: relative;
|
|
99
|
-
z-index: 1;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.ql-tooltip {
|
|
103
|
-
z-index: 1000 !important;
|
|
104
|
-
position: absolute !important;
|
|
105
|
-
left: 0 !important;
|
|
106
|
-
right: auto !important;
|
|
107
|
-
transform: none !important;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.ql-tooltip.ql-editing {
|
|
111
|
-
left: 8px !important;
|
|
112
97
|
}
|
|
113
98
|
|
|
114
99
|
.quill.valid .ql-toolbar,
|
|
@@ -125,7 +110,7 @@ export const RichTextFieldContainer = styled.div`
|
|
|
125
110
|
|
|
126
111
|
.ql-container.ql-snow {
|
|
127
112
|
border: none;
|
|
128
|
-
overflow-y:
|
|
113
|
+
overflow-y: hidden;
|
|
129
114
|
padding: 8px;
|
|
130
115
|
}
|
|
131
116
|
|
|
@@ -141,13 +126,12 @@ export const RichTextFieldContainer = styled.div`
|
|
|
141
126
|
|
|
142
127
|
.quill {
|
|
143
128
|
flex: none;
|
|
144
|
-
overflow:
|
|
129
|
+
overflow: initial;
|
|
145
130
|
}
|
|
146
131
|
|
|
147
132
|
.ql-container {
|
|
148
133
|
flex: none;
|
|
149
134
|
resize: vertical;
|
|
150
|
-
overflow-y: hidden;
|
|
151
135
|
}
|
|
152
136
|
|
|
153
137
|
.ql-editor {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","props","generateToken","componentType","defaultVariant","theme","state","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill-new/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: visible;\r\n position: relative;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .ql-tooltip {\r\n z-index: 1000 !important;\r\n position: absolute !important;\r\n left: 0 !important;\r\n right: auto !important;\r\n transform: none !important;\r\n }\r\n\r\n .ql-tooltip.ql-editing {\r\n left: 8px !important;\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: visible;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: visible;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n overflow-y: hidden;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","props","generateToken","componentType","defaultVariant","theme","state","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","readOnly","disabled","validationMessage","note","size","Medium","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","objectOf","any","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, { EmitterSource } from \"react-quill-new\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport 'react-quill-new/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n .quill {\r\n width: 100%;\r\n margin-bottom: 4px;\r\n overflow: hidden;\r\n\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)};\r\n border-radius: 4px;\r\n }\r\n\r\n .quill.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'positive'}, props.theme)};\r\n }\r\n\r\n .quill.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n }\r\n\r\n .quill:hover {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .quill:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n }\r\n\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n &.medium {\r\n .ql-editor,\r\n .ql-editor p{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n\r\n .ql-editor.ql-blank::before {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n .ql-toolbar.ql-snow {\r\n border: none;\r\n padding: 8px 7px;\r\n margin: 0 1px;\r\n border-bottom: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n }\r\n\r\n .quill.valid .ql-toolbar,\r\n .quill.invalid .ql-toolbar,\r\n .quill:hover .ql-toolbar,\r\n .quill:focus-within .ql-toolbar {\r\n padding: 8px 6px;\r\n margin: 0 2px;\r\n }\r\n\r\n .ql-container {\r\n font-family: unset !important;\r\n }\r\n\r\n .ql-container.ql-snow {\r\n border: none;\r\n overflow-y: hidden;\r\n padding: 8px;\r\n }\r\n\r\n .ql-editor {\r\n padding: 8px;\r\n overflow-y: auto;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n &.resizable {\r\n height: initial;\r\n\r\n .quill {\r\n flex: none;\r\n overflow: initial;\r\n }\r\n\r\n .ql-container {\r\n flex: none;\r\n resize: vertical;\r\n }\r\n\r\n .ql-editor {\r\n height: 100%;\r\n }\r\n }\r\n\r\n &.readonly {\r\n .quill {\r\n ${readOnlyState}\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n .quill {\r\n pointer-events: none;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n\r\n .ql-editor.ql-blank::before {\r\n color: ${props => COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n Background = 'background',\r\n Bold = 'bold',\r\n Color = 'color',\r\n Font = 'font',\r\n Code = 'code',\r\n Italic = 'italic',\r\n Link = 'link',\r\n Size = 'size',\r\n Strike = 'strike',\r\n Script = 'script',\r\n Underline = 'underline',\r\n Blockquote = 'blockquote',\r\n Header = 'header',\r\n Indent = 'indent',\r\n List = 'list',\r\n Align = 'align',\r\n Direction = 'direction',\r\n CodeBlock = 'code-block',\r\n Formula = 'formula',\r\n Image = 'image',\r\n Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n [{header: [1, 2, 3, false]}],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n ['link'],\r\n ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n /**\r\n * Optional. The ID of the rich text field.\r\n */\r\n id?: string;\r\n\r\n /**\r\n * Optional. The CSS class name of the rich text field.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is read-only.\r\n */\r\n readOnly?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is disabled.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * Optional. A boolean indicating whether the rich text field is resizable.\r\n */\r\n resizable?: boolean;\r\n\r\n /**\r\n * Optional. An object containing the modules to be used by the rich text field.\r\n */\r\n modules?: Record<string, unknown>;\r\n\r\n /**\r\n * Optional. An array of formats to be used by the rich text field.\r\n */\r\n formats?: RichTextFieldFormats[];\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field gains focus.\r\n */\r\n onFocus?(selection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when the rich text field loses focus.\r\n */\r\n onBlur?(previousSelection: ReactQuill.Range, source: EmitterSource, editor: ReactQuill.UnprivilegedEditor): void;\r\n\r\n /**\r\n * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n */\r\n onKeyDown?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n */\r\n onKeyPress?: React.EventHandler<any>;\r\n\r\n /**\r\n * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n */\r\n onKeyUp?: React.EventHandler<any>;\r\n\r\n /**\r\n * Required. The current value of the rich text field.\r\n */\r\n value: any;\r\n\r\n /**\r\n * Required. A function to be called when the value of the rich text field changes.\r\n */\r\n onChange: (value: any) => void;\r\n\r\n /**\r\n * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n */\r\n validationMessage?: string;\r\n\r\n /**\r\n * Optional. A note to be displayed below the rich text field.\r\n */\r\n note?: TextFieldNote;\r\n\r\n /**\r\n * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n */\r\n state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n readOnly,\r\n disabled,\r\n validationMessage,\r\n note,\r\n size = Size.Medium,\r\n state,\r\n resizable,\r\n modules,\r\n formats,\r\n ...rest\r\n }: RichTextFieldProps, ref) => {\r\n\r\n const theme = useTheme();\r\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n return (\r\n <RichTextFieldContainer\r\n className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\r\n <ReactQuill ref={ref}\r\n readOnly={readOnly || disabled}\r\n modules={m}\r\n theme={'snow'}\r\n formats={f}\r\n {...rest}\r\n />\r\n {validationMessage && (\r\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n {\r\n state === States.Valid\r\n ? <CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/>\r\n : <TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>\r\n }\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </RichTextFieldContainer>\r\n )\r\n});"],"mappings":"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","ignoreList":[]}
|
|
@@ -119,6 +119,7 @@ class ModalContainer extends React.Component {
|
|
|
119
119
|
render() {
|
|
120
120
|
const {
|
|
121
121
|
id,
|
|
122
|
+
className,
|
|
122
123
|
showModal,
|
|
123
124
|
closeModal,
|
|
124
125
|
children,
|
|
@@ -158,6 +159,7 @@ class ModalContainer extends React.Component {
|
|
|
158
159
|
onRequestClose: () => closeModal(),
|
|
159
160
|
shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
|
|
160
161
|
style: styles,
|
|
162
|
+
className: className,
|
|
161
163
|
children: children
|
|
162
164
|
});
|
|
163
165
|
}
|
|
@@ -193,6 +195,7 @@ class ModalContainer extends React.Component {
|
|
|
193
195
|
}
|
|
194
196
|
(0, _defineProperty2.default)(ModalContainer, "propTypes", {
|
|
195
197
|
id: _propTypes.default.string,
|
|
198
|
+
className: _propTypes.default.string,
|
|
196
199
|
showModal: _propTypes.default.bool.isRequired,
|
|
197
200
|
closeModal: _propTypes.default.func.isRequired,
|
|
198
201
|
children: _propTypes.default.any.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContainer.cjs","names":["React","_interopRequireWildcard","require","_reactModal","_interopRequireDefault","_styles","_styledComponents","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","Component","componentDidMount","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","assign","background","COLORS","generateToken","componentType","defaultVariant","context","theme","styles","setAppElement","jsx","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","_propTypes","string","bool","isRequired","func","any","number","ThemeContext","_default","exports"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS, COLORS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes, ThemeContext} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\ntype ModalContainerState = {\r\n scroll: number;\r\n};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n private static openInstances = 0;\r\n\r\n static contextType = ThemeContext;\r\n declare context: React.ContextType<typeof ThemeContext>;\r\n\r\n componentDidMount() {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (this.props.showModal) {\r\n this.preventScroll(window.scrollY);\r\n }\r\n }\r\n\r\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\r\n return {scroll: window.scrollY};\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\r\n if (this.props.showModal && !prevProps.showModal) {\r\n this.preventScroll(snapshot!.scroll);\r\n }\r\n if (!this.props.showModal && prevProps.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.props.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal),\r\n shouldCloseOnOverlayClick = true\r\n } = this.props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue,\r\n background: COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, this.context!.theme)\r\n });\r\n const styles = {content: stylesConfiguration};\r\n\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n }\r\n\r\n private preventScroll(offset: number) {\r\n if (!ModalContainer.openInstances) {\r\n this.setState({scroll: offset});\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n ModalContainer.openInstances++\r\n }\r\n\r\n private resetScroll() {\r\n ModalContainer.openInstances--;\r\n if (!ModalContainer.openInstances) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n this.state.scroll && window.scrollTo(0, this.state.scroll);\r\n this.setState({scroll: 0});\r\n }\r\n }\r\n}\r\n\r\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ModalContainer.cjs","names":["React","_interopRequireWildcard","require","_reactModal","_interopRequireDefault","_styles","_styledComponents","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","Component","componentDidMount","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","id","className","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","assign","background","COLORS","generateToken","componentType","defaultVariant","context","theme","styles","setAppElement","jsx","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","_propTypes","string","bool","isRequired","func","any","number","ThemeContext","_default","exports"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS, COLORS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes, ThemeContext} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n className?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\ntype ModalContainerState = {\r\n scroll: number;\r\n};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n private static openInstances = 0;\r\n\r\n static contextType = ThemeContext;\r\n declare context: React.ContextType<typeof ThemeContext>;\r\n\r\n componentDidMount() {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (this.props.showModal) {\r\n this.preventScroll(window.scrollY);\r\n }\r\n }\r\n\r\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\r\n return {scroll: window.scrollY};\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\r\n if (this.props.showModal && !prevProps.showModal) {\r\n this.preventScroll(snapshot!.scroll);\r\n }\r\n if (!this.props.showModal && prevProps.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.props.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n id,\r\n className,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal),\r\n shouldCloseOnOverlayClick = true\r\n } = this.props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue,\r\n background: COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, this.context!.theme)\r\n });\r\n const styles = {content: stylesConfiguration};\r\n\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n style={styles}\r\n className={className}>\r\n {children}\r\n </ReactModal>\r\n );\r\n }\r\n\r\n private preventScroll(offset: number) {\r\n if (!ModalContainer.openInstances) {\r\n this.setState({scroll: offset});\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n ModalContainer.openInstances++\r\n }\r\n\r\n private resetScroll() {\r\n ModalContainer.openInstances--;\r\n if (!ModalContainer.openInstances) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n this.state.scroll && window.scrollTo(0, this.state.scroll);\r\n this.setState({scroll: 0});\r\n }\r\n }\r\n}\r\n\r\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}
|
|
@@ -111,6 +111,7 @@ class ModalContainer extends React.Component {
|
|
|
111
111
|
render() {
|
|
112
112
|
const {
|
|
113
113
|
id,
|
|
114
|
+
className,
|
|
114
115
|
showModal,
|
|
115
116
|
closeModal,
|
|
116
117
|
children,
|
|
@@ -150,6 +151,7 @@ class ModalContainer extends React.Component {
|
|
|
150
151
|
onRequestClose: () => closeModal(),
|
|
151
152
|
shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
|
|
152
153
|
style: styles,
|
|
154
|
+
className: className,
|
|
153
155
|
children: children
|
|
154
156
|
});
|
|
155
157
|
}
|
|
@@ -185,6 +187,7 @@ class ModalContainer extends React.Component {
|
|
|
185
187
|
}
|
|
186
188
|
_defineProperty(ModalContainer, "propTypes", {
|
|
187
189
|
id: _pt.string,
|
|
190
|
+
className: _pt.string,
|
|
188
191
|
showModal: _pt.bool.isRequired,
|
|
189
192
|
closeModal: _pt.func.isRequired,
|
|
190
193
|
children: _pt.any.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","COLORS","Z_INDEXES","ThemeContext","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","Component","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","background","generateToken","componentType","defaultVariant","context","theme","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","_defineProperty","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS, COLORS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes, ThemeContext} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\ntype ModalContainerState = {\r\n scroll: number;\r\n};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n private static openInstances = 0;\r\n\r\n static contextType = ThemeContext;\r\n declare context: React.ContextType<typeof ThemeContext>;\r\n\r\n componentDidMount() {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (this.props.showModal) {\r\n this.preventScroll(window.scrollY);\r\n }\r\n }\r\n\r\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\r\n return {scroll: window.scrollY};\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\r\n if (this.props.showModal && !prevProps.showModal) {\r\n this.preventScroll(snapshot!.scroll);\r\n }\r\n if (!this.props.showModal && prevProps.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.props.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal),\r\n shouldCloseOnOverlayClick = true\r\n } = this.props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue,\r\n background: COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, this.context!.theme)\r\n });\r\n const styles = {content: stylesConfiguration};\r\n\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n }\r\n\r\n private preventScroll(offset: number) {\r\n if (!ModalContainer.openInstances) {\r\n this.setState({scroll: offset});\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n ModalContainer.openInstances++\r\n }\r\n\r\n private resetScroll() {\r\n ModalContainer.openInstances--;\r\n if (!ModalContainer.openInstances) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n this.state.scroll && window.scrollTo(0, this.state.scroll);\r\n this.setState({scroll: 0});\r\n }\r\n }\r\n}\r\n\r\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","COLORS","Z_INDEXES","ThemeContext","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","Component","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","id","className","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","background","generateToken","componentType","defaultVariant","context","theme","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","_defineProperty","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS, COLORS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes, ThemeContext} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n className?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\ntype ModalContainerState = {\r\n scroll: number;\r\n};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n private static openInstances = 0;\r\n\r\n static contextType = ThemeContext;\r\n declare context: React.ContextType<typeof ThemeContext>;\r\n\r\n componentDidMount() {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (this.props.showModal) {\r\n this.preventScroll(window.scrollY);\r\n }\r\n }\r\n\r\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\r\n return {scroll: window.scrollY};\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\r\n if (this.props.showModal && !prevProps.showModal) {\r\n this.preventScroll(snapshot!.scroll);\r\n }\r\n if (!this.props.showModal && prevProps.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.props.showModal) {\r\n this.resetScroll();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n id,\r\n className,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal),\r\n shouldCloseOnOverlayClick = true\r\n } = this.props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue,\r\n background: COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, this.context!.theme)\r\n });\r\n const styles = {content: stylesConfiguration};\r\n\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n style={styles}\r\n className={className}>\r\n {children}\r\n </ReactModal>\r\n );\r\n }\r\n\r\n private preventScroll(offset: number) {\r\n if (!ModalContainer.openInstances) {\r\n this.setState({scroll: offset});\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n ModalContainer.openInstances++\r\n }\r\n\r\n private resetScroll() {\r\n ModalContainer.openInstances--;\r\n if (!ModalContainer.openInstances) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n this.state.scroll && window.scrollTo(0, this.state.scroll);\r\n this.setState({scroll: 0});\r\n }\r\n }\r\n}\r\n\r\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}
|
|
@@ -41,7 +41,9 @@ const ModalDialog = _ref => {
|
|
|
41
41
|
contentOverflow,
|
|
42
42
|
hideCloseButton,
|
|
43
43
|
width,
|
|
44
|
-
hasContentBorders
|
|
44
|
+
hasContentBorders,
|
|
45
|
+
className,
|
|
46
|
+
id
|
|
45
47
|
} = _ref;
|
|
46
48
|
const theme = (0, _styledComponents.useTheme)();
|
|
47
49
|
const getMinWidth = () => {
|
|
@@ -262,6 +264,8 @@ const ModalDialog = _ref => {
|
|
|
262
264
|
}
|
|
263
265
|
};
|
|
264
266
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContainer.default, {
|
|
267
|
+
className: className,
|
|
268
|
+
id: id,
|
|
265
269
|
showModal: isModalOpen,
|
|
266
270
|
closeModal: closeAction,
|
|
267
271
|
minWidth: getMinWidth(),
|
|
@@ -344,6 +348,8 @@ ModalDialog.propTypes = {
|
|
|
344
348
|
buttons: _propTypes.default.array,
|
|
345
349
|
tooltip: _propTypes.default.string,
|
|
346
350
|
backButton: _propTypes.default.func,
|
|
351
|
+
className: _propTypes.default.string,
|
|
352
|
+
id: _propTypes.default.string,
|
|
347
353
|
closeAction: _propTypes.default.func.isRequired,
|
|
348
354
|
hideCloseButton: _propTypes.default.bool,
|
|
349
355
|
submitAction: _propTypes.default.func.isRequired,
|