@onesy/ui-react 1.0.58 → 1.0.60
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/AudioPlayer/AudioPlayer.js +6 -23
- package/AudioRecorder/AudioRecorder.js +2 -1
- package/AutoComplete/AutoComplete.js +5 -4
- package/AutoCompleteCountry/AutoCompleteCountry.js +2 -1
- package/AutoCompleteCurrency/AutoCompleteCurrency.js +2 -1
- package/Breadcrumbs/Breadcrumbs.js +3 -2
- package/BubbleChart/BubbleChart.js +3 -2
- package/Calendar/Calendar.js +7 -6
- package/CalendarAvailability/CalendarAvailability.d.ts +4 -1
- package/CalendarAvailability/CalendarAvailability.js +23 -18
- package/CalendarMenu/CalendarMenu.js +6 -5
- package/CalendarMonth/CalendarMonth.js +8 -7
- package/CalendarViews/CalendarViews.d.ts +4 -1
- package/CalendarViews/CalendarViews.js +17 -12
- package/Chart/Chart.js +1 -0
- package/ColorTextField/ColorTextField.js +2 -1
- package/Confirm/Confirm.js +4 -3
- package/CookieBanner/CookieBanner.js +3 -2
- package/Countdown/Countdown.js +5 -4
- package/DatePicker/DatePicker.js +10 -9
- package/DateTimePicker/DateTimePicker.js +5 -4
- package/Drawing/Drawing.js +9 -8
- package/DropZone/DropZone.d.ts +1 -0
- package/DropZone/DropZone.js +3 -2
- package/Emojis/Emojis.js +46 -43
- package/Frame/Frame.js +6 -5
- package/ImageEdit/ImageEdit.js +21 -20
- package/Info/Info.js +2 -1
- package/Links/Links.d.ts +2 -0
- package/Links/Links.js +7 -6
- package/Medias/Medias.js +2 -1
- package/MenuDesktop/MenuDesktop.js +1 -3
- package/NavigationItem/NavigationItem.js +1 -1
- package/NotFound/NotFound.d.ts +1 -0
- package/NotFound/NotFound.js +3 -2
- package/Page/Page.js +2 -1
- package/PieChart/PieChart.js +4 -3
- package/RichTextEditor/RichTextEditor.js +57 -56
- package/ScreenCapture/ScreenCapture.js +2 -1
- package/SectionAction/SectionAction.js +2 -1
- package/SectionBoxes/SectionBoxes.js +2 -1
- package/SectionCards/SectionCards.js +2 -1
- package/SectionCarousel/SectionCarousel.js +2 -1
- package/SectionMedia/SectionMedia.js +2 -1
- package/SectionTextMedia/SectionTextMedia.js +2 -1
- package/Select/Select.js +9 -14
- package/Share/Share.js +15 -14
- package/SmartTextField/SmartTextField.js +13 -12
- package/SpeechToText/SpeechToText.js +3 -2
- package/SpeedDial/SpeedDial.js +1 -1
- package/SpeedDialItem/SpeedDialItem.js +1 -1
- package/TableCell/TableCell.js +2 -1
- package/TablePagination/TablePagination.js +2 -1
- package/TextField/TextField.d.ts +1 -0
- package/TextToSpeech/TextToSpeech.js +4 -3
- package/TimePicker/TimePicker.js +9 -8
- package/Timer/Timer.js +3 -2
- package/VideoPlayer/VideoPlayer.js +5 -4
- package/Widgets/Widgets.js +3 -2
- package/esm/AudioPlayer/AudioPlayer.js +7 -30
- package/esm/AudioRecorder/AudioRecorder.js +8 -7
- package/esm/AutoComplete/AutoComplete.js +5 -4
- package/esm/AutoCompleteCountry/AutoCompleteCountry.js +2 -0
- package/esm/AutoCompleteCurrency/AutoCompleteCurrency.js +2 -1
- package/esm/Breadcrumbs/Breadcrumbs.js +3 -2
- package/esm/BubbleChart/BubbleChart.js +3 -2
- package/esm/Calendar/Calendar.js +9 -8
- package/esm/CalendarAvailability/CalendarAvailability.js +31 -21
- package/esm/CalendarMenu/CalendarMenu.js +7 -6
- package/esm/CalendarMonth/CalendarMonth.js +8 -7
- package/esm/CalendarViews/CalendarViews.js +25 -15
- package/esm/Chart/Chart.js +1 -0
- package/esm/ColorTextField/ColorTextField.js +2 -1
- package/esm/Confirm/Confirm.js +7 -6
- package/esm/CookieBanner/CookieBanner.js +4 -3
- package/esm/Countdown/Countdown.js +10 -9
- package/esm/DatePicker/DatePicker.js +22 -21
- package/esm/DateTimePicker/DateTimePicker.js +11 -10
- package/esm/Drawing/Drawing.js +11 -10
- package/esm/DropZone/DropZone.js +4 -2
- package/esm/Emojis/Emojis.js +37 -34
- package/esm/Frame/Frame.js +6 -5
- package/esm/ImageEdit/ImageEdit.js +25 -24
- package/esm/Info/Info.js +2 -1
- package/esm/Links/Links.js +9 -6
- package/esm/Medias/Medias.js +2 -1
- package/esm/MenuDesktop/MenuDesktop.js +1 -2
- package/esm/NavigationItem/NavigationItem.js +1 -1
- package/esm/NotFound/NotFound.js +5 -3
- package/esm/Page/Page.js +3 -2
- package/esm/PieChart/PieChart.js +4 -4
- package/esm/RichTextEditor/RichTextEditor.js +76 -75
- package/esm/ScreenCapture/ScreenCapture.js +4 -3
- package/esm/SectionAction/SectionAction.js +2 -1
- package/esm/SectionBoxes/SectionBoxes.js +2 -1
- package/esm/SectionCards/SectionCards.js +2 -1
- package/esm/SectionCarousel/SectionCarousel.js +2 -1
- package/esm/SectionMedia/SectionMedia.js +2 -1
- package/esm/SectionTextMedia/SectionTextMedia.js +2 -1
- package/esm/Select/Select.js +11 -7
- package/esm/Share/Share.js +16 -15
- package/esm/SmartTextField/SmartTextField.js +15 -14
- package/esm/SpeechToText/SpeechToText.js +3 -2
- package/esm/SpeedDial/SpeedDial.js +1 -1
- package/esm/SpeedDialItem/SpeedDialItem.js +1 -1
- package/esm/TableCell/TableCell.js +2 -1
- package/esm/TablePagination/TablePagination.js +2 -1
- package/esm/TextToSpeech/TextToSpeech.js +4 -3
- package/esm/TimePicker/TimePicker.js +19 -18
- package/esm/Timer/Timer.js +7 -6
- package/esm/VideoPlayer/VideoPlayer.js +7 -6
- package/esm/Widgets/Widgets.js +3 -2
- package/esm/index.js +1 -1
- package/package.json +2 -2
|
@@ -222,6 +222,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
222
222
|
const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
223
223
|
var _a;
|
|
224
224
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
225
|
+
const l = theme.l;
|
|
225
226
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyRichTextEditor) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
|
|
226
227
|
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
|
|
227
228
|
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
|
|
@@ -568,8 +569,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
568
569
|
} }, ListItemProps_);
|
|
569
570
|
const IconProps = Object.assign({ size: 'small' }, IconProps_);
|
|
570
571
|
const WrapperToggleButton = react_1.default.useCallback(react_1.default.forwardRef((props_, ref_) => {
|
|
571
|
-
const { open: open_,
|
|
572
|
-
return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined,
|
|
572
|
+
const { open: open_, name, children: children_ } = props_, other_ = __rest(props_, ["open", "name", "children"]);
|
|
573
|
+
return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined, name: name }, TooltipProps, { children: react_1.default.cloneElement(children_, Object.assign(Object.assign({}, other_), children_.props)) })));
|
|
573
574
|
}), []);
|
|
574
575
|
const WrapperAppend = react_1.default.useCallback((props_) => {
|
|
575
576
|
const { open: open_, element, anchorElement, onClose, children: children_ } = props_, other_ = __rest(props_, ["open", "element", "anchorElement", "onClose", "children"]);
|
|
@@ -627,7 +628,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
627
628
|
onClose();
|
|
628
629
|
} }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
|
|
629
630
|
width: '100%'
|
|
630
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(ColorTextField, Object.assign({ tonal: tonal, color: color,
|
|
631
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(ColorTextField, Object.assign({ tonal: tonal, color: color, name: l('Custom color'), version: 'outlined', size: 'small', value: refs.inputValues.current[version_], onChange: valueNew => updateInputValues(version_, valueNew) }, ColorTextFieldProps, { className: (0, style_react_1.classNames)([
|
|
631
632
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
632
633
|
'onesy-RichTextEditor-text-field-color'
|
|
633
634
|
],
|
|
@@ -652,7 +653,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
652
653
|
classes.palette
|
|
653
654
|
]) }, other_, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
|
|
654
655
|
width: '100%'
|
|
655
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ tonal: tonal, color: color,
|
|
656
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ tonal: tonal, color: color, name: label, version: 'outlined', size: 'small', value: value__, onChange: onChange__, className: (0, style_react_1.classNames)([
|
|
656
657
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
657
658
|
'onesy-RichTextEditor-text-field-color'
|
|
658
659
|
],
|
|
@@ -673,12 +674,12 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
673
674
|
{ label: '48', value: 7 }
|
|
674
675
|
];
|
|
675
676
|
const font_versions = [
|
|
676
|
-
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children:
|
|
677
|
-
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children:
|
|
678
|
-
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h2' }, { children:
|
|
679
|
-
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3' }, { children:
|
|
680
|
-
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1' }, { children:
|
|
681
|
-
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't2' }, { children:
|
|
677
|
+
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: l('Normal text') })), value: 'p' },
|
|
678
|
+
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children: l('Heading 1') })), value: 'h1' },
|
|
679
|
+
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h2' }, { children: l('Heading 2') })), value: 'h2' },
|
|
680
|
+
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3' }, { children: l('Heading 3') })), value: 'h3' },
|
|
681
|
+
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1' }, { children: l('Heading 4') })), value: 'h4' },
|
|
682
|
+
{ label: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't2' }, { children: l('Heading 5') })), value: 'h5' }
|
|
682
683
|
];
|
|
683
684
|
const queryValueUpdate = () => {
|
|
684
685
|
const selected_ = [];
|
|
@@ -730,7 +731,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
730
731
|
queryValueUpdate();
|
|
731
732
|
}, []);
|
|
732
733
|
const updateElements = {
|
|
733
|
-
'font-version': ((0, jsx_runtime_1.jsx)(Select, Object.assign({
|
|
734
|
+
'font-version': ((0, jsx_runtime_1.jsx)(Select, Object.assign({ name: l('Font Version'), valueDefault: font_versions.find(item => item.value.includes('p')).value, value: inputValues['font-version'], onChange: (valueNew) => {
|
|
734
735
|
updateInputValues('font-version', valueNew);
|
|
735
736
|
method('font-version')(valueNew);
|
|
736
737
|
}, onMouseUp: onMouseUp, onMouseDown: onMouseDown }, SelectProps, { className: (0, style_react_1.classNames)([
|
|
@@ -742,7 +743,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
742
743
|
]), style: {
|
|
743
744
|
minWidth: '150px'
|
|
744
745
|
} }, { children: font_versions.map(item => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: item.label, value: item.value, button: true }, ListItemProps), item.value))) }))),
|
|
745
|
-
'font-family': ((0, jsx_runtime_1.jsx)(Select, Object.assign({
|
|
746
|
+
'font-family': ((0, jsx_runtime_1.jsx)(Select, Object.assign({ name: l('Font Family'), valueDefault: font_families.find(item => item.label.includes('DM Sans')).value, value: inputValues['font-family'], onChange: (valueNew) => {
|
|
746
747
|
updateInputValues('font-family', valueNew);
|
|
747
748
|
method('font-family')(valueNew);
|
|
748
749
|
}, onMouseUp: onMouseUp, onMouseDown: onMouseDown }, SelectProps, { className: (0, style_react_1.classNames)([
|
|
@@ -756,7 +757,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
756
757
|
} }, { children: font_families.map(item => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: item.label, value: item.value, button: true, style: {
|
|
757
758
|
fontFamily: item.value
|
|
758
759
|
} }, ListItemProps), item.value))) }))),
|
|
759
|
-
'font-size': ((0, jsx_runtime_1.jsx)(Select, Object.assign({
|
|
760
|
+
'font-size': ((0, jsx_runtime_1.jsx)(Select, Object.assign({ name: l('Font Size'), valueDefault: +font_sizes.find(item => item.label.includes('14')).value, value: inputValues['font-size'], onChange: (valueNew) => {
|
|
760
761
|
updateInputValues('font-size', +valueNew);
|
|
761
762
|
method('font-size')(+valueNew);
|
|
762
763
|
}, onMouseUp: onMouseUp, onMouseDown: onMouseDown }, SelectProps, { className: (0, style_react_1.classNames)([
|
|
@@ -766,26 +767,26 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
766
767
|
SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.className,
|
|
767
768
|
classes.select
|
|
768
769
|
]) }, { children: font_sizes.map(item => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: item.label, value: item.value, button: true }, ListItemProps), item.value))) }))),
|
|
769
|
-
'italic': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
770
|
-
'underline': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
771
|
-
'bold': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
772
|
-
'strike-line': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
773
|
-
'font-color': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.color, anchorElement: refs.elements.color.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('color', false), include: [refs.elements.color.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-color', onClose: () => updateOpen('color', false), onUpdate: method('font-color') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
774
|
-
'font-color-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.colorMiniMenu, anchorElement: refs.miniMenuElements.color, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('colorMiniMenu', false), include: [refs.miniMenuElements.color] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.colorPalette, version: 'font-color', onClose: () => updateOpen('colorMiniMenu', false), onUpdate: method('font-color') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
775
|
-
'font-background': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.background, anchorElement: refs.elements.background.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('background', false), include: [refs.elements.background.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-background', onClose: () => updateOpen('background', false), onUpdate: method('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
776
|
-
'font-background-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.backgroundMiniMenu, anchorElement: refs.miniMenuElements.background, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('backgroundMiniMenu', false), include: [refs.miniMenuElements.background] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.backgroundPalette, version: 'font-background', onClose: () => updateOpen('backgroundMiniMenu', false), onUpdate: method('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
777
|
-
'align-left': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
778
|
-
'align-center': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
779
|
-
'align-right': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
780
|
-
'align-justify': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
781
|
-
'indent': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
782
|
-
'outdent': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
783
|
-
'superscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
784
|
-
'subscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
785
|
-
'list-ordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
786
|
-
'list-unordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
787
|
-
'horizontal-rule': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
788
|
-
'link-add': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.link, anchorElement: refs.elements.linkAdd.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('link', false), include: [refs.elements.linkAdd.current] }, { children: (0, jsx_runtime_1.jsx)(Input, {
|
|
770
|
+
'italic': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Italic') }, { children: (0, utils_1.is)('function', render) ? render('italic', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('italic'), onClick: method('italic') }, { children: (0, jsx_runtime_1.jsx)(IconItalic, Object.assign({}, IconProps)) }))) }))),
|
|
771
|
+
'underline': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Underline') }, { children: (0, utils_1.is)('function', render) ? render('underline', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('underline'), onClick: method('underline') }, { children: (0, jsx_runtime_1.jsx)(IconUnderline, Object.assign({}, IconProps)) }))) }))),
|
|
772
|
+
'bold': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Bold'), onClick: method('bold') }, { children: (0, utils_1.is)('function', render) ? render('bold', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('bold') }, { children: (0, jsx_runtime_1.jsx)(IconBold, Object.assign({}, IconProps)) }))) }))),
|
|
773
|
+
'strike-line': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Strike Line'), onClick: method('strike-line') }, { children: (0, utils_1.is)('function', render) ? render('strike-line', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('strike-line') }, { children: (0, jsx_runtime_1.jsx)(IconStrikeLine, Object.assign({}, IconProps)) }))) }))),
|
|
774
|
+
'font-color': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.color, anchorElement: refs.elements.color.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('color', false), include: [refs.elements.color.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-color', onClose: () => updateOpen('color', false), onUpdate: method('font-color') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.color ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.color }, ToggleButtonProps, { selected: refs.open.current.color, onClick: () => updateOpen('color', !refs.open.current.color) }, { children: (0, jsx_runtime_1.jsx)(IconColor, Object.assign({}, IconProps)) }))) })) }))),
|
|
775
|
+
'font-color-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.colorMiniMenu, anchorElement: refs.miniMenuElements.color, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('colorMiniMenu', false), include: [refs.miniMenuElements.color] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.colorPalette, version: 'font-color', onClose: () => updateOpen('colorMiniMenu', false), onUpdate: method('font-color') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.colorMiniMenu ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.color }, ToggleButtonProps, { selected: refs.open.current.colorMiniMenu, onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconColor, Object.assign({}, IconProps)) }))) })) }))),
|
|
776
|
+
'font-background': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.background, anchorElement: refs.elements.background.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('background', false), include: [refs.elements.background.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-background', onClose: () => updateOpen('background', false), onUpdate: method('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Background Color'), open: refs.open.current.background ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('font-background', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.background }, ToggleButtonProps, { selected: refs.open.current.background, onClick: () => updateOpen('background', !refs.open.current.background) }, { children: (0, jsx_runtime_1.jsx)(IconBackground, Object.assign({}, IconProps)) }))) })) }))),
|
|
777
|
+
'font-background-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.backgroundMiniMenu, anchorElement: refs.miniMenuElements.background, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('backgroundMiniMenu', false), include: [refs.miniMenuElements.background] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.backgroundPalette, version: 'font-background', onClose: () => updateOpen('backgroundMiniMenu', false), onUpdate: method('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.backgroundMiniMenu ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('font-background', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.background }, ToggleButtonProps, { selected: refs.open.current.backgroundMiniMenu, onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconBackground, Object.assign({}, IconProps)) }))) })) }))),
|
|
778
|
+
'align-left': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Left') }, { children: (0, utils_1.is)('function', render) ? render('align-left', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('align-left'), onClick: method('align-left') }, { children: (0, jsx_runtime_1.jsx)(IconAlignLeft, Object.assign({}, IconProps)) }))) }))),
|
|
779
|
+
'align-center': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Center') }, { children: (0, utils_1.is)('function', render) ? render('align-center', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('align-center'), onClick: method('align-center') }, { children: (0, jsx_runtime_1.jsx)(IconAlignCenter, Object.assign({}, IconProps)) }))) }))),
|
|
780
|
+
'align-right': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Right') }, { children: (0, utils_1.is)('function', render) ? render('align-right', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('align-right'), onClick: method('align-right') }, { children: (0, jsx_runtime_1.jsx)(IconAlignRight, Object.assign({}, IconProps)) }))) }))),
|
|
781
|
+
'align-justify': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Justify') }, { children: (0, utils_1.is)('function', render) ? render('align-justify', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('align-justify'), onClick: method('align-justify') }, { children: (0, jsx_runtime_1.jsx)(IconAlignJustify, Object.assign({}, IconProps)) }))) }))),
|
|
782
|
+
'indent': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Indent') }, { children: (0, utils_1.is)('function', render) ? render('indent', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('indent') }, { children: (0, jsx_runtime_1.jsx)(IconIndent, Object.assign({}, IconProps)) }))) }))),
|
|
783
|
+
'outdent': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Outdent') }, { children: (0, utils_1.is)('function', render) ? render('outdent', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('outdent') }, { children: (0, jsx_runtime_1.jsx)(IconOutdent, Object.assign({}, IconProps)) }))) }))),
|
|
784
|
+
'superscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Superscript') }, { children: (0, utils_1.is)('function', render) ? render('superscript', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('superscript'), onClick: method('superscript') }, { children: (0, jsx_runtime_1.jsx)(IconSuperscript, Object.assign({}, IconProps)) }))) }))),
|
|
785
|
+
'subscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Subscript') }, { children: (0, utils_1.is)('function', render) ? render('subscript', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('subscript'), onClick: method('subscript') }, { children: (0, jsx_runtime_1.jsx)(IconSubscript, Object.assign({}, IconProps)) }))) }))),
|
|
786
|
+
'list-ordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('List Ordered') }, { children: (0, utils_1.is)('function', render) ? render('list-ordered', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('list-ordered'), onClick: method('list-ordered') }, { children: (0, jsx_runtime_1.jsx)(IconListOrdered, Object.assign({}, IconProps)) }))) }))),
|
|
787
|
+
'list-unordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('List Unordered') }, { children: (0, utils_1.is)('function', render) ? render('list-unordered', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.selected.current.includes('list-unordered'), onClick: method('list-unordered') }, { children: (0, jsx_runtime_1.jsx)(IconListUnordered, Object.assign({}, IconProps)) }))) }))),
|
|
788
|
+
'horizontal-rule': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Horizontal Rule'), onClick: method('horizontal-rule') }, { children: (0, utils_1.is)('function', render) ? render('horizontal-rule', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { children: (0, jsx_runtime_1.jsx)(IconHorizontalRule, Object.assign({}, IconProps)) }))) }))),
|
|
789
|
+
'link-add': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.link, anchorElement: refs.elements.linkAdd.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('link', false), include: [refs.elements.linkAdd.current] }, { children: (0, jsx_runtime_1.jsx)(Input, { name: l('Link'), labelButton: l('Add'), value: refs.inputValues.current.link, onChange: valueNew => updateInputValues('link', valueNew), onClick: () => {
|
|
789
790
|
if (refs.range.current) {
|
|
790
791
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
791
792
|
selection_.removeAllRanges();
|
|
@@ -794,8 +795,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
794
795
|
method('link-add')(refs.inputValues.current.link);
|
|
795
796
|
updateOpen('link', false);
|
|
796
797
|
updateInputValues('link', '');
|
|
797
|
-
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
798
|
-
'link-add-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.linkMiniMenu, anchorElement: refs.miniMenuElements.linkAdd, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('linkMiniMenu', false), include: [refs.miniMenuElements.linkAdd] }, { children: (0, jsx_runtime_1.jsx)(Input, { ref: refs.miniMenuElements.linkAddInput,
|
|
798
|
+
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Link'), open: refs.open.current.link ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.linkAdd }, ToggleButtonProps, { selected: refs.open.current.link, onClick: () => updateOpen('link', !refs.open.current.link) }, { children: (0, jsx_runtime_1.jsx)(IconLinkAdd, Object.assign({}, IconProps)) }))) })) }))),
|
|
799
|
+
'link-add-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.linkMiniMenu, anchorElement: refs.miniMenuElements.linkAdd, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('linkMiniMenu', false), include: [refs.miniMenuElements.linkAdd] }, { children: (0, jsx_runtime_1.jsx)(Input, { ref: refs.miniMenuElements.linkAddInput, name: l('Link'), labelButton: l('Add'), value: refs.inputValues.current.link, onChange: valueNew => updateInputValues('link', valueNew), onClick: () => {
|
|
799
800
|
if (refs.range.current) {
|
|
800
801
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
801
802
|
selection_.removeAllRanges();
|
|
@@ -804,9 +805,9 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
804
805
|
method('link-add')(refs.inputValues.current.link);
|
|
805
806
|
updateOpen('linkMiniMenu', false);
|
|
806
807
|
updateInputValues('link', '');
|
|
807
|
-
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
808
|
-
'link-remove': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
809
|
-
'quote': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.quote, anchorElement: refs.elements.quote.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('quote', false), include: [refs.elements.quote.current] }, { children: (0, jsx_runtime_1.jsx)(Input, {
|
|
808
|
+
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Link'), open: refs.open.current.linkMiniMenu ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('font-color', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.linkAdd }, ToggleButtonProps, { selected: refs.open.current.linkMiniMenu, onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconLinkAdd, Object.assign({}, IconProps)) }))) })) }))),
|
|
809
|
+
'link-remove': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Remove Link') }, { children: (0, utils_1.is)('function', render) ? render('link-remove', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('link-remove') }, { children: (0, jsx_runtime_1.jsx)(IconLinkRemove, Object.assign({}, IconProps)) }))) }))),
|
|
810
|
+
'quote': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.quote, anchorElement: refs.elements.quote.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('quote', false), include: [refs.elements.quote.current] }, { children: (0, jsx_runtime_1.jsx)(Input, { name: l('Quote'), labelButton: l('Add'), value: refs.inputValues.current.quote, onChange: valueNew => updateInputValues('quote', valueNew), InputProps: {
|
|
810
811
|
multiline: true
|
|
811
812
|
}, onClick: () => {
|
|
812
813
|
if (refs.range.current) {
|
|
@@ -817,15 +818,15 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
817
818
|
method('html')(`<blockquote>${refs.inputValues.current.quote}</blockquote>`);
|
|
818
819
|
updateOpen('quote', false);
|
|
819
820
|
updateInputValues('quote', '');
|
|
820
|
-
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
821
|
+
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Quote'), open: refs.open.current.quote ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('quote', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.quote }, ToggleButtonProps, { selected: refs.open.current.quote, onClick: () => updateOpen('quote', !refs.open.current.quote) }, { children: (0, jsx_runtime_1.jsx)(IconQuote, Object.assign({}, IconProps)) }))) })) }))),
|
|
821
822
|
'table': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.table, anchorElement: refs.elements.table.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('table', false), include: [refs.elements.table.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, tonal: tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', Component: Surface, className: (0, style_react_1.classNames)([
|
|
822
823
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
823
824
|
'onesy-RichTextEditor-palette'
|
|
824
825
|
],
|
|
825
826
|
classes.palette
|
|
826
|
-
]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, {
|
|
827
|
+
]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, { name: l('Rows'), tonal: tonal, color: color, size: 'small', version: 'outlined', increment: false, decrement: false, value: refs.inputValues.current.tableRows, onChange: valueNew => updateInputValues('tableRows', valueNew) }), "\u00D7", (0, jsx_runtime_1.jsx)(NumericTextField, { name: l('Columns'), tonal: tonal, color: color, size: 'small', version: 'outlined', increment: false, decrement: false, value: refs.inputValues.current.tableColumns, onChange: valueNew => updateInputValues('tableColumns', valueNew) })] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'space-between', style: {
|
|
827
828
|
width: '100%'
|
|
828
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(Label, Object.assign({ size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(Switch, { tonal: tonal, color: props.color !== undefined ? props.color : 'default', checked: refs.inputValues.current.tableHeader, onChange: valueNew => updateInputValues('tableHeader', valueNew) }),
|
|
829
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(Label, Object.assign({ size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(Switch, { tonal: tonal, color: props.color !== undefined ? props.color : 'default', checked: refs.inputValues.current.tableHeader, onChange: valueNew => updateInputValues('tableHeader', valueNew) }), l('Header')] })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: 'inherit', version: 'text', size: 'small', onClick: () => {
|
|
829
830
|
if (refs.range.current) {
|
|
830
831
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
831
832
|
selection_.removeAllRanges();
|
|
@@ -848,8 +849,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
848
849
|
updateInputValues('tableRows', '');
|
|
849
850
|
updateInputValues('tableColumns', '');
|
|
850
851
|
updateInputValues('tableHeader', '');
|
|
851
|
-
} }, { children:
|
|
852
|
-
'image': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.image, anchorElement: refs.elements.image.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('image', false), include: [refs.elements.image.current] }, { children: (0, jsx_runtime_1.jsx)(Input, {
|
|
852
|
+
} }, { children: l('Add') }))] }))] })) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Table'), open: refs.open.current.table ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('table', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.table }, ToggleButtonProps, { selected: refs.open.current.table, onClick: () => updateOpen('table', !refs.open.current.table) }, { children: (0, jsx_runtime_1.jsx)(IconTable, Object.assign({}, IconProps)) }))) })) }))),
|
|
853
|
+
'image': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.image, anchorElement: refs.elements.image.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('image', false), include: [refs.elements.image.current] }, { children: (0, jsx_runtime_1.jsx)(Input, { name: l('Image'), labelButton: l('Add'), value: refs.inputValues.current.image, onChange: valueNew => updateInputValues('image', valueNew), onClick: () => {
|
|
853
854
|
if (refs.range.current) {
|
|
854
855
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
855
856
|
selection_.removeAllRanges();
|
|
@@ -858,8 +859,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
858
859
|
method('image')(refs.inputValues.current.image);
|
|
859
860
|
updateOpen('image', false);
|
|
860
861
|
updateInputValues('image', '');
|
|
861
|
-
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
862
|
-
'video': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.video, anchorElement: refs.elements.video.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('video', false), include: [refs.elements.video.current] }, { children: (0, jsx_runtime_1.jsx)(Input, {
|
|
862
|
+
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Image'), open: refs.open.current.image ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('image', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.image }, ToggleButtonProps, { selected: refs.open.current.image, onClick: () => updateOpen('image', !refs.open.current.image) }, { children: (0, jsx_runtime_1.jsx)(IconImage, Object.assign({}, IconProps)) }))) })) }))),
|
|
863
|
+
'video': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.video, anchorElement: refs.elements.video.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('video', false), include: [refs.elements.video.current] }, { children: (0, jsx_runtime_1.jsx)(Input, { name: l('Video'), labelButton: l('Add'), value: refs.inputValues.current.video, onChange: valueNew => updateInputValues('video', valueNew), onClick: () => {
|
|
863
864
|
if (refs.range.current) {
|
|
864
865
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
865
866
|
selection_.removeAllRanges();
|
|
@@ -868,8 +869,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
868
869
|
method('html')(`<video controls><source src='${refs.inputValues.current.video}' /></video>`);
|
|
869
870
|
updateOpen('video', false);
|
|
870
871
|
updateInputValues('video', '');
|
|
871
|
-
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
872
|
-
'video-youtube': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.videoYoutube, anchorElement: refs.elements.videoYoutube.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('videoYoutube', false), include: [refs.elements.videoYoutube.current] }, { children: (0, jsx_runtime_1.jsx)(Input, {
|
|
872
|
+
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Video'), open: refs.open.current.video ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('video', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.video }, ToggleButtonProps, { selected: refs.open.current.video, onClick: () => updateOpen('video', !refs.open.current.video) }, { children: (0, jsx_runtime_1.jsx)(IconVideo, Object.assign({}, IconProps)) }))) })) }))),
|
|
873
|
+
'video-youtube': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.videoYoutube, anchorElement: refs.elements.videoYoutube.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('videoYoutube', false), include: [refs.elements.videoYoutube.current] }, { children: (0, jsx_runtime_1.jsx)(Input, { name: l('Youtube Video ID'), labelButton: l('Add'), value: refs.inputValues.current.videoYoutube, onChange: valueNew => updateInputValues('videoYoutube', valueNew), onClick: () => {
|
|
873
874
|
if (refs.range.current) {
|
|
874
875
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
875
876
|
selection_.removeAllRanges();
|
|
@@ -878,7 +879,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
878
879
|
method('html')(`<iframe width="560" height="315" src="https://www.youtube.com/embed/${refs.inputValues.current.videoYoutube}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`);
|
|
879
880
|
updateOpen('videoYoutube', false);
|
|
880
881
|
updateInputValues('videoYoutube', '');
|
|
881
|
-
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
882
|
+
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Youtube Video'), open: refs.open.current.videoYoutube ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('videoYoutube', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.videoYoutube }, ToggleButtonProps, { selected: refs.open.current.videoYoutube, onClick: () => updateOpen('videoYoutube', !refs.open.current.videoYoutube) }, { children: (0, jsx_runtime_1.jsx)(IconVideoYoutube, Object.assign({}, IconProps)) }))) })) }))),
|
|
882
883
|
'drawing': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.drawing, anchorElement: refs.elements.drawing.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('drawing', false), include: [refs.elements.drawing, refs.elements.drawingSelect, refs.elements.drawingSelect.current, refs.elements.drawingPalette, refs.elements.drawingPalette.current, refs.elements.drawingSize, refs.elements.drawingSize.current], includeParentQueries: ['.onesy-Drawing-palette', '.onesy-Drawing-modal'], includeQueries: ['a[download]', 'svg', 'path'] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, tonal: tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', Component: Surface, className: (0, style_react_1.classNames)([
|
|
883
884
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
884
885
|
'onesy-RichTextEditor-palette'
|
|
@@ -915,8 +916,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
915
916
|
const valueNew = svgClone.outerHTML;
|
|
916
917
|
method('html')(valueNew);
|
|
917
918
|
updateOpen('drawing', false);
|
|
918
|
-
} }, { children:
|
|
919
|
-
'code': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.code, anchorElement: refs.elements.code.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('code', false), include: [refs.elements.code.current] }, { children: (0, jsx_runtime_1.jsx)(Input, {
|
|
919
|
+
} }, { children: l('Add') })) }))] })) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Drawing'), open: refs.open.current.drawing ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('drawing', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.drawing }, ToggleButtonProps, { selected: refs.open.current.drawing, onClick: () => updateOpen('drawing', !refs.open.current.drawing) }, { children: (0, jsx_runtime_1.jsx)(IconDrawing, Object.assign({}, IconProps)) }))) })) }))),
|
|
920
|
+
'code': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.code, anchorElement: refs.elements.code.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('code', false), include: [refs.elements.code.current] }, { children: (0, jsx_runtime_1.jsx)(Input, { name: l('Code'), labelButton: l('Add'), value: refs.inputValues.current.code, onChange: valueNew => updateInputValues('code', valueNew), InputProps: {
|
|
920
921
|
multiline: true
|
|
921
922
|
}, onClick: () => {
|
|
922
923
|
if (refs.range.current) {
|
|
@@ -927,10 +928,10 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
927
928
|
method('html')(`<pre><code>${refs.inputValues.current.code}</code></pre>`);
|
|
928
929
|
updateOpen('code', false);
|
|
929
930
|
updateInputValues('code', '');
|
|
930
|
-
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
931
|
+
} }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Code'), open: refs.open.current.code ? false : undefined }, { children: (0, utils_1.is)('function', render) ? render('code', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.code }, ToggleButtonProps, { selected: refs.open.current.code, onClick: () => updateOpen('code', !refs.open.current.code) }, { children: (0, jsx_runtime_1.jsx)(IconCode, Object.assign({}, IconProps)) }))) })) })))
|
|
931
932
|
};
|
|
932
933
|
const actionElements = {
|
|
933
|
-
'clear': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
934
|
+
'clear': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Clear') }, { children: (0, utils_1.is)('function', render) ? render('clear', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('clear') }, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) }))) })))
|
|
934
935
|
};
|
|
935
936
|
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
|
|
936
937
|
if (ref) {
|
|
@@ -952,7 +953,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
952
953
|
],
|
|
953
954
|
ToolbarProps === null || ToolbarProps === void 0 ? void 0 : ToolbarProps.className,
|
|
954
955
|
classes.toolbars
|
|
955
|
-
]) }, { children: [updates_ && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', "aria-label": 'Updates' }, ToolbarUpdatesProps, { className: (0, style_react_1.classNames)([
|
|
956
|
+
]) }, { children: [updates_ && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', "aria-label": l('Updates') }, ToolbarUpdatesProps, { className: (0, style_react_1.classNames)([
|
|
956
957
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
957
958
|
'onesy-RichTextEditor-toolbar'
|
|
958
959
|
],
|
|
@@ -966,7 +967,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
966
967
|
DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
|
|
967
968
|
classes.divider,
|
|
968
969
|
classes.divider_middle
|
|
969
|
-
]) }))), actions_ && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', "aria-label": 'Actions' }, ToolbarActionsProps, { className: (0, style_react_1.classNames)([
|
|
970
|
+
]) }))), actions_ && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', "aria-label": l('Actions') }, ToolbarActionsProps, { className: (0, style_react_1.classNames)([
|
|
970
971
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
971
972
|
'onesy-RichTextEditor-toolbar'
|
|
972
973
|
],
|
|
@@ -975,7 +976,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
975
976
|
classes.toolbar_actions
|
|
976
977
|
]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', style: {
|
|
977
978
|
width: '100%'
|
|
978
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('copy', 'cut', 'paste', 'delete') && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [includes('copy') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({
|
|
979
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: includes('copy', 'cut', 'paste', 'delete') && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [includes('copy') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Copy') }, { children: (0, utils_1.is)('function', render) ? render('copy', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('copy') }, { children: (0, jsx_runtime_1.jsx)(IconCopy, Object.assign({}, IconProps)) }))) }))), includes('cut') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Cut') }, { children: (0, utils_1.is)('function', render) ? render('cut', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('cut') }, { children: (0, jsx_runtime_1.jsx)(IconCut, Object.assign({}, IconProps)) }))) }))), includes('paste') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Paste') }, { children: (0, utils_1.is)('function', render) ? render('paste', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('paste') }, { children: (0, jsx_runtime_1.jsx)(IconPaste, Object.assign({}, IconProps)) }))) }))), includes('delete') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Delete') }, { children: (0, utils_1.is)('function', render) ? render('delete', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('delete') }, { children: (0, jsx_runtime_1.jsx)(IconDelete, Object.assign({}, IconProps)) }))) })))] }))) })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start' }, { children: [includes('clear', 'select-all') && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [includes('clear') && actionElements['clear'], includes('select-all') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Select All') }, { children: (0, utils_1.is)('function', render) ? render('select-all', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('select-all') }, { children: (0, jsx_runtime_1.jsx)(IconSelectAll, Object.assign({}, IconProps)) }))) })))] }))), includes('undo', 'redo') && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [includes('undo') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Undo') }, { children: (0, utils_1.is)('function', render) ? render('undo', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('undo') }, { children: (0, jsx_runtime_1.jsx)(IconUndo, Object.assign({}, IconProps)) }))) }))), includes('redo') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Redo') }, { children: (0, utils_1.is)('function', render) ? render('redo', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: method('redo') }, { children: (0, jsx_runtime_1.jsx)(IconRedo, Object.assign({}, IconProps)) }))) })))] }))), includes('save', 'print') && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [includes('save') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Save') }, { children: (0, utils_1.is)('function', render) ? render('save', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: () => (0, utils_2.save)(refs.value.current) }, { children: (0, jsx_runtime_1.jsx)(IconSave, Object.assign({}, IconProps)) }))) }))), includes('print') && ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Print') }, { children: (0, utils_1.is)('function', render) ? render('print', ToggleButtonProps, refs.value.current, method) : ((0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: () => (0, utils_2.print)(refs.value.current) }, { children: (0, jsx_runtime_1.jsx)(IconPrint, Object.assign({}, IconProps)) }))) })))] })))] }))] })) }))), (0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
|
|
979
980
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
980
981
|
'onesy-RichTextEditor-divider'
|
|
981
982
|
],
|
|
@@ -994,7 +995,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
994
995
|
visibility: 'hidden'
|
|
995
996
|
} : undefined)), style) }, { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !!selection, add: true }, { children: (0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => {
|
|
996
997
|
setSelection('');
|
|
997
|
-
}, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', "aria-label": 'Mini menu', Component: Surface }, MiniMenuProps, { className: (0, style_react_1.classNames)([
|
|
998
|
+
}, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', "aria-label": l('Mini menu'), Component: Surface }, MiniMenuProps, { className: (0, style_react_1.classNames)([
|
|
998
999
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
999
1000
|
'onesy-RichTextEditor-mini-menu'
|
|
1000
1001
|
],
|
|
@@ -47,6 +47,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
47
47
|
const ScreenCapture = react_1.default.forwardRef((props_, ref) => {
|
|
48
48
|
var _a;
|
|
49
49
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
50
|
+
const l = theme.l;
|
|
50
51
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyScreenCapture) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
|
|
51
52
|
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
|
|
52
53
|
const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
|
|
@@ -330,7 +331,7 @@ const ScreenCapture = react_1.default.forwardRef((props_, ref) => {
|
|
|
330
331
|
],
|
|
331
332
|
className,
|
|
332
333
|
classes.root
|
|
333
|
-
]) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [view && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({
|
|
334
|
+
]) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [view && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('View') }, tooltipProps, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onView, loading: loading.includes('view'), disabled: done.includes('view') }, iconButtonProps, IconButtonProps, { children: done.includes('view') ? (0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { add: true, in: true }) : (0, jsx_runtime_1.jsx)(IconView, {}) })) }))), free && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: canvas ? l('Save') : l('Free form') }, tooltipProps, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => canvas ? onFreeSave(event) : onFree(event), loading: loading.includes('free'), disabled: done.includes('free') }, iconButtonProps, IconButtonProps, { children: done.includes('free') ? (0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { add: true, in: true }) : canvas ? (0, jsx_runtime_1.jsx)(IconDownload, {}) : (0, jsx_runtime_1.jsx)(IconFree, {}) })) })))] })), (0, jsx_runtime_1.jsx)(TextField, Object.assign({ name: l('Name'), value: name, onChange: onChange }, textFieldProps, TextFieldProps)), canvas && ((0, jsx_runtime_1.jsx)(Portal, Object.assign({ element: rootDocumentElement.body }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
|
|
334
335
|
(0, utils_2.staticClassName)('ScreenCapture', theme) && [
|
|
335
336
|
'onesy-ScreenCapture-image-wrapper'
|
|
336
337
|
],
|
|
@@ -27,6 +27,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
27
27
|
}), { name: 'onesy-SectionAction' });
|
|
28
28
|
const Element = react_1.default.forwardRef((props_, ref) => {
|
|
29
29
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
30
|
+
const l = theme.l;
|
|
30
31
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionAction) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
|
|
31
32
|
const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
|
|
32
33
|
const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
|
|
@@ -57,7 +58,7 @@ const Element = react_1.default.forwardRef((props_, ref) => {
|
|
|
57
58
|
],
|
|
58
59
|
ButtonProps === null || ButtonProps === void 0 ? void 0 : ButtonProps.className,
|
|
59
60
|
classes.button
|
|
60
|
-
]) }, { children: text || 'Click here' })) })));
|
|
61
|
+
]) }, { children: text || l('Click here') })) })));
|
|
61
62
|
});
|
|
62
63
|
Element.displayName = 'onesy-SectionAction';
|
|
63
64
|
exports.default = Element;
|
|
@@ -80,6 +80,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
80
80
|
}), { name: 'onesy-SectionBoxes' });
|
|
81
81
|
const Element = react_1.default.forwardRef((props_, ref) => {
|
|
82
82
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
83
|
+
const l = theme.l;
|
|
83
84
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionBoxes) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
|
|
84
85
|
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
|
|
85
86
|
const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
|
|
@@ -179,7 +180,7 @@ const Element = react_1.default.forwardRef((props_, ref) => {
|
|
|
179
180
|
],
|
|
180
181
|
(_l = item.propsButton) === null || _l === void 0 ? void 0 : _l.className,
|
|
181
182
|
classes.button
|
|
182
|
-
]) }, { children: item.buttonText || 'Click here' })) })))] }), index));
|
|
183
|
+
]) }, { children: item.buttonText || l('Click here') })) })))] }), index));
|
|
183
184
|
}, [theme, size]);
|
|
184
185
|
return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
|
|
185
186
|
if (ref) {
|
|
@@ -90,6 +90,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
90
90
|
}), { name: 'onesy-SectionCards' });
|
|
91
91
|
const Element = react_1.default.forwardRef((props_, ref) => {
|
|
92
92
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
93
|
+
const l = theme.l;
|
|
93
94
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionCards) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
|
|
94
95
|
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
|
|
95
96
|
const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
|
|
@@ -189,7 +190,7 @@ const Element = react_1.default.forwardRef((props_, ref) => {
|
|
|
189
190
|
],
|
|
190
191
|
(_o = item.propsButton) === null || _o === void 0 ? void 0 : _o.className,
|
|
191
192
|
classes.button
|
|
192
|
-
]) }, { children: item.buttonText || 'Click here' })) })))] }))] }), index));
|
|
193
|
+
]) }, { children: item.buttonText || l('Click here') })) })))] }))] }), index));
|
|
193
194
|
}, [theme, size]);
|
|
194
195
|
return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
|
|
195
196
|
if (ref) {
|
|
@@ -112,6 +112,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
112
112
|
}), { name: 'onesy-SectionCarousel' });
|
|
113
113
|
const Element = react_1.default.forwardRef((props_, ref) => {
|
|
114
114
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
115
|
+
const l = theme.l;
|
|
115
116
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionCarousel) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
|
|
116
117
|
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
|
|
117
118
|
const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
|
|
@@ -215,7 +216,7 @@ const Element = react_1.default.forwardRef((props_, ref) => {
|
|
|
215
216
|
],
|
|
216
217
|
(_k = item.propsButton) === null || _k === void 0 ? void 0 : _k.className,
|
|
217
218
|
classes.button
|
|
218
|
-
]) }, { children: item.buttonText || 'Click here' })) })))] })) }), index));
|
|
219
|
+
]) }, { children: item.buttonText || l('Click here') })) })))] })) }), index));
|
|
219
220
|
}, [theme, size]);
|
|
220
221
|
return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
|
|
221
222
|
if (ref) {
|
|
@@ -64,6 +64,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
64
64
|
}), { name: 'onesy-SectionMedia' });
|
|
65
65
|
const Element = react_1.default.forwardRef((props_, ref) => {
|
|
66
66
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
67
|
+
const l = theme.l;
|
|
67
68
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionMedia) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
|
|
68
69
|
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
|
|
69
70
|
const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
|
|
@@ -149,7 +150,7 @@ const Element = react_1.default.forwardRef((props_, ref) => {
|
|
|
149
150
|
'onesy-SectionMedia-name'
|
|
150
151
|
],
|
|
151
152
|
classes.name
|
|
152
|
-
]) }, { children: (0, utils_1.cleanValue)((value === null || value === void 0 ? void 0 : value.name) || 'No name', { capitalize: true }) })))] })) })));
|
|
153
|
+
]) }, { children: (0, utils_1.cleanValue)((value === null || value === void 0 ? void 0 : value.name) || l('No name'), { capitalize: true }) })))] })) })));
|
|
153
154
|
});
|
|
154
155
|
Element.displayName = 'onesy-SectionMedia';
|
|
155
156
|
exports.default = Element;
|
|
@@ -40,6 +40,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
40
40
|
const SectionTextMedia = react_1.default.forwardRef((props_, ref) => {
|
|
41
41
|
var _a;
|
|
42
42
|
const theme = (0, style_react_1.useOnesyTheme)();
|
|
43
|
+
const l = theme.l;
|
|
43
44
|
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionTextMedia) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
|
|
44
45
|
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
|
|
45
46
|
const Text = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Text) || Text_1.default; }, [theme]);
|
|
@@ -115,7 +116,7 @@ const SectionTextMedia = react_1.default.forwardRef((props_, ref) => {
|
|
|
115
116
|
],
|
|
116
117
|
(_a = button.props) === null || _a === void 0 ? void 0 : _a.className,
|
|
117
118
|
classes.button
|
|
118
|
-
]) }, { children: button.text || 'Click here' })))] })));
|
|
119
|
+
]) }, { children: button.text || l('Click here') })))] })));
|
|
119
120
|
return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
|
|
120
121
|
if (ref) {
|
|
121
122
|
if ((0, utils_1.is)('function', ref))
|