@bbl-digital/snorre 4.0.37 → 4.0.38

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. package/dist/bundle.js +6 -6
  2. package/esm/core/BoxedTable/TableBody/index.js +10 -0
  3. package/esm/core/BoxedTable/TableBody/styles.js +16 -0
  4. package/esm/globals/validation/regularExpressions.js +1 -1
  5. package/esm/illustrations/MySite/IllustrationMySiteBenefits.js +2 -2
  6. package/lib/core/BoxedTable/TableBody/index.d.ts +7 -0
  7. package/lib/core/BoxedTable/TableBody/index.d.ts.map +1 -0
  8. package/lib/core/BoxedTable/TableBody/index.js +10 -0
  9. package/lib/core/BoxedTable/TableBody/styles.d.ts +6 -0
  10. package/lib/core/BoxedTable/TableBody/styles.d.ts.map +1 -0
  11. package/lib/core/BoxedTable/TableBody/styles.js +16 -0
  12. package/lib/globals/validation/regularExpressions.js +1 -1
  13. package/lib/illustrations/MySite/IllustrationMySiteBenefits.d.ts.map +1 -1
  14. package/lib/illustrations/MySite/IllustrationMySiteBenefits.js +2 -2
  15. package/package.json +1 -1
  16. package/esm/core/Autocomplete/utils/useHandleOptionsHeight.js +0 -16
  17. package/esm/core/CheckboxController/index.js +0 -22
  18. package/esm/core/Datepicker/yearMonthForm.js +0 -56
  19. package/esm/core/EditorOld/config.js +0 -69
  20. package/esm/core/EditorOld/index.js +0 -147
  21. package/esm/core/EditorOld/styles.js +0 -65
  22. package/esm/core/ImageCarousel/index.js +0 -70
  23. package/esm/core/ImageCarousel/styles.js +0 -58
  24. package/esm/enums/ModifierKey.js +0 -13
  25. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts +0 -7
  26. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts.map +0 -1
  27. package/lib/core/Autocomplete/utils/useHandleOptionsHeight.js +0 -16
  28. package/lib/core/CheckboxController/index.d.ts +0 -1
  29. package/lib/core/CheckboxController/index.d.ts.map +0 -1
  30. package/lib/core/CheckboxController/index.js +0 -22
  31. package/lib/core/Datepicker/yearMonthForm.d.ts +0 -10
  32. package/lib/core/Datepicker/yearMonthForm.d.ts.map +0 -1
  33. package/lib/core/Datepicker/yearMonthForm.js +0 -56
  34. package/lib/core/EditorOld/config.d.ts +0 -56
  35. package/lib/core/EditorOld/config.d.ts.map +0 -1
  36. package/lib/core/EditorOld/config.js +0 -69
  37. package/lib/core/EditorOld/index.d.ts +0 -39
  38. package/lib/core/EditorOld/index.d.ts.map +0 -1
  39. package/lib/core/EditorOld/index.js +0 -147
  40. package/lib/core/EditorOld/styles.d.ts +0 -23
  41. package/lib/core/EditorOld/styles.d.ts.map +0 -1
  42. package/lib/core/EditorOld/styles.js +0 -65
  43. package/lib/core/ImageCarousel/index.d.ts +0 -11
  44. package/lib/core/ImageCarousel/index.d.ts.map +0 -1
  45. package/lib/core/ImageCarousel/index.js +0 -70
  46. package/lib/core/ImageCarousel/styles.d.ts +0 -26
  47. package/lib/core/ImageCarousel/styles.d.ts.map +0 -1
  48. package/lib/core/ImageCarousel/styles.js +0 -58
  49. package/lib/enums/ModifierKey.d.ts +0 -12
  50. package/lib/enums/ModifierKey.d.ts.map +0 -1
  51. package/lib/enums/ModifierKey.js +0 -13
package/dist/bundle.js CHANGED
@@ -4170,7 +4170,7 @@
4170
4170
  };
4171
4171
  }
4172
4172
 
4173
- const IllustrationHouse$1 = props => {
4173
+ const IllustrationHouse = props => {
4174
4174
  return /*#__PURE__*/jsxRuntime$1.jsx("svg", {
4175
4175
  viewBox: "0 0 80 44",
4176
4176
  ...props,
@@ -4242,7 +4242,7 @@
4242
4242
  })
4243
4243
  });
4244
4244
  };
4245
- var IllustrationHouse$2 = withIllustration()(IllustrationHouse$1);
4245
+ var IllustrationHouse$1 = withIllustration()(IllustrationHouse);
4246
4246
 
4247
4247
  const IllustrationHighHouseComposition = props => {
4248
4248
  return /*#__PURE__*/jsxRuntime$1.jsx("svg", {
@@ -24727,7 +24727,7 @@
24727
24727
  };
24728
24728
  var IllustrationMySiteLetterSent$1 = withIllustration()(IllustrationMySiteLetterSent);
24729
24729
 
24730
- const IllustrationHouse = props => {
24730
+ const IllustrationMySiteBenefits = props => {
24731
24731
  return /*#__PURE__*/jsxRuntime$1.jsxs("svg", {
24732
24732
  viewBox: " 0 0 125 85",
24733
24733
  ...props,
@@ -24903,7 +24903,7 @@
24903
24903
  })]
24904
24904
  });
24905
24905
  };
24906
- var IllustrationMySiteBenefits = withIllustration()(IllustrationHouse);
24906
+ var IllustrationMySiteBenefits$1 = withIllustration()(IllustrationMySiteBenefits);
24907
24907
 
24908
24908
  function _EMOTION_STRINGIFIED_CSS_ERROR__$W() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
24909
24909
  const styles$l = {
@@ -34786,7 +34786,7 @@ to {top: 100vh;}
34786
34786
  exports.IllustrationErrorGeneric = IllustrationErrorGeneric$1;
34787
34787
  exports.IllustrationHighHouse = IllustrationHighHouse$1;
34788
34788
  exports.IllustrationHighHouseComposition = IllustrationHighHouseComposition$1;
34789
- exports.IllustrationHouse = IllustrationHouse$2;
34789
+ exports.IllustrationHouse = IllustrationHouse$1;
34790
34790
  exports.IllustrationHouseComposition = IllustrationHouseComposition$1;
34791
34791
  exports.IllustrationHouseMissing = IllustrationHouseMissing$1;
34792
34792
  exports.IllustrationHousesBackground = IllustrationHousesBackground$1;
@@ -34794,7 +34794,7 @@ to {top: 100vh;}
34794
34794
  exports.IllustrationLowHouse = IllustrationLowHouse$1;
34795
34795
  exports.IllustrationLowHouseComposition = IllustrationLowHouseComposition$1;
34796
34796
  exports.IllustrationMySiteAssociation = IllustrationMySiteAssociation$1;
34797
- exports.IllustrationMySiteBenefits = IllustrationMySiteBenefits;
34797
+ exports.IllustrationMySiteBenefits = IllustrationMySiteBenefits$1;
34798
34798
  exports.IllustrationMySiteBuilding = IllustrationMySiteBuilding$1;
34799
34799
  exports.IllustrationMySiteCoffeeBook = IllustrationMySiteCoffeeBook$1;
34800
34800
  exports.IllustrationMySiteComputer = IllustrationMySiteComputer$1;
@@ -0,0 +1,10 @@
1
+ import { BodyWrapper } from './styles';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const TableBody = ({
4
+ children
5
+ }) => {
6
+ return /*#__PURE__*/_jsx(BodyWrapper, {
7
+ children: children
8
+ });
9
+ };
10
+ export default TableBody;
@@ -0,0 +1,16 @@
1
+ import _styled from "@emotion/styled/base";
2
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
3
+ export const BodyWrapper = /*#__PURE__*/_styled("tbody", process.env.NODE_ENV === "production" ? {
4
+ target: "e1u8g1t20"
5
+ } : {
6
+ target: "e1u8g1t20",
7
+ label: "BodyWrapper"
8
+ })(process.env.NODE_ENV === "production" ? {
9
+ name: "ixi98c",
10
+ styles: "display:flex;flex-direction:column;grid-row-gap:1em"
11
+ } : {
12
+ name: "ixi98c",
13
+ styles: "display:flex;flex-direction:column;grid-row-gap:1em",
14
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0JveGVkVGFibGUvVGFibGVCb2R5L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvQm94ZWRUYWJsZS9UYWJsZUJvZHkvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBCb2R5V3JhcHBlciA9IHN0eWxlZC50Ym9keWBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZ3JpZC1yb3ctZ2FwOiAxZW07XG5gXG4iXX0= */",
15
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
16
+ });
@@ -3,7 +3,7 @@ const regularExpressions = {
3
3
  mobilenumber: new RegExp(/(?:^((?!00|[+])|(?:(?:00|[+])47))([49]\d{7})$)|(?:^(?:00|[+])(?!47)([49]\d{7,15})$)/),
4
4
  exclusiveNumbers: new RegExp(/^\d+$/),
5
5
  date: new RegExp(/^(0[1-9]|[12][0-9]|3[01])[\.](0[1-9]|1[012])[\.]\d{4}|(0[1-9]|[1-2][0-9]|31(?!(?:0[2469]|11))|30(?!02))(0[1-9]|1[0-2])([12]\d{3})|([01][0-9]|2[0-8])(0[0-9]|1[0-2])[0-9][0-9]|30(0[013-9]|1[0-2])[0-9][0-9]|31(0[13578]|1[02])[0-9][0-9]|29((0[013-9]|1[0-2])[0-9][0-9]|02([0246][048]|[13579][26]))|(0[1-9]|[12][0-9]|3[01])[\.](0[1-9]|1[012])[\.]\d{2}$/),
6
- email: new RegExp(/^[^<>()\[\]\\.,;:\s@"]+(?:\.[^<>()\[\]\\.,;:\s@"]+)*@(?:[a-zA-ZæÆøØåÅ0-9-]+\.)+[a-zA-Z]{2,}$/),
6
+ email: new RegExp(/(?:[^<>()\[\]\\.,;:\s@"]+(?:\.[^<>()\[\]\\.,;:\s@"]+)*@(?:[a-zA-ZæÆøØåÅ0-9-]+\.)+[a-zA-Z]{2,}(?:\s?[;,:\s]\s?)?)+/),
7
7
  year: new RegExp(/^[12][0-9]{3}$/),
8
8
  url: new RegExp(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/)
9
9
  };
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import withIllustration from '../withIllustration';
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
- const IllustrationHouse = props => {
5
+ const IllustrationMySiteBenefits = props => {
6
6
  return /*#__PURE__*/_jsxs("svg", {
7
7
  viewBox: " 0 0 125 85",
8
8
  ...props,
@@ -178,4 +178,4 @@ const IllustrationHouse = props => {
178
178
  })]
179
179
  });
180
180
  };
181
- export default withIllustration('IllustrationHouse')(IllustrationHouse);
181
+ export default withIllustration('IllustrationMySiteBenefits')(IllustrationMySiteBenefits);
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ declare type Props = {
3
+ children: React.ReactNode;
4
+ };
5
+ declare const TableBody: ({ children }: Props) => import("react").JSX.Element;
6
+ export default TableBody;
7
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/BoxedTable/TableBody/index.tsx"],"names":[],"mappings":";AAEA,aAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AACD,QAAA,MAAM,SAAS,iBAAkB,KAAK,gCAErC,CAAA;AACD,eAAe,SAAS,CAAA"}
@@ -0,0 +1,10 @@
1
+ import { BodyWrapper } from './styles';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const TableBody = ({
4
+ children
5
+ }) => {
6
+ return /*#__PURE__*/_jsx(BodyWrapper, {
7
+ children: children
8
+ });
9
+ };
10
+ export default TableBody;
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ export declare const BodyWrapper: import("@emotion/styled").StyledComponent<{
3
+ theme?: import("@emotion/react").Theme | undefined;
4
+ as?: import("react").ElementType<any> | undefined;
5
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
6
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/BoxedTable/TableBody/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,WAAW;;;2HAIvB,CAAA"}
@@ -0,0 +1,16 @@
1
+ import _styled from "@emotion/styled/base";
2
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
3
+ export const BodyWrapper = /*#__PURE__*/_styled("tbody", process.env.NODE_ENV === "production" ? {
4
+ target: "e1u8g1t20"
5
+ } : {
6
+ target: "e1u8g1t20",
7
+ label: "BodyWrapper"
8
+ })(process.env.NODE_ENV === "production" ? {
9
+ name: "ixi98c",
10
+ styles: "display:flex;flex-direction:column;grid-row-gap:1em"
11
+ } : {
12
+ name: "ixi98c",
13
+ styles: "display:flex;flex-direction:column;grid-row-gap:1em",
14
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0JveGVkVGFibGUvVGFibGVCb2R5L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvQm94ZWRUYWJsZS9UYWJsZUJvZHkvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBCb2R5V3JhcHBlciA9IHN0eWxlZC50Ym9keWBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZ3JpZC1yb3ctZ2FwOiAxZW07XG5gXG4iXX0= */",
15
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
16
+ });
@@ -3,7 +3,7 @@ const regularExpressions = {
3
3
  mobilenumber: new RegExp(/(?:^((?!00|[+])|(?:(?:00|[+])47))([49]\d{7})$)|(?:^(?:00|[+])(?!47)([49]\d{7,15})$)/),
4
4
  exclusiveNumbers: new RegExp(/^\d+$/),
5
5
  date: new RegExp(/^(0[1-9]|[12][0-9]|3[01])[\.](0[1-9]|1[012])[\.]\d{4}|(0[1-9]|[1-2][0-9]|31(?!(?:0[2469]|11))|30(?!02))(0[1-9]|1[0-2])([12]\d{3})|([01][0-9]|2[0-8])(0[0-9]|1[0-2])[0-9][0-9]|30(0[013-9]|1[0-2])[0-9][0-9]|31(0[13578]|1[02])[0-9][0-9]|29((0[013-9]|1[0-2])[0-9][0-9]|02([0246][048]|[13579][26]))|(0[1-9]|[12][0-9]|3[01])[\.](0[1-9]|1[012])[\.]\d{2}$/),
6
- email: new RegExp(/^[^<>()\[\]\\.,;:\s@"]+(?:\.[^<>()\[\]\\.,;:\s@"]+)*@(?:[a-zA-ZæÆøØåÅ0-9-]+\.)+[a-zA-Z]{2,}$/),
6
+ email: new RegExp(/(?:[^<>()\[\]\\.,;:\s@"]+(?:\.[^<>()\[\]\\.,;:\s@"]+)*@(?:[a-zA-ZæÆøØåÅ0-9-]+\.)+[a-zA-Z]{2,}(?:\s?[;,:\s]\s?)?)+/),
7
7
  year: new RegExp(/^[12][0-9]{3}$/),
8
8
  url: new RegExp(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{2,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/)
9
9
  };
@@ -1 +1 @@
1
- {"version":3,"file":"IllustrationMySiteBenefits.d.ts","sourceRoot":"","sources":["../../../src/packages/illustrations/MySite/IllustrationMySiteBenefits.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;;AAoLzB,wBAAuE"}
1
+ {"version":3,"file":"IllustrationMySiteBenefits.d.ts","sourceRoot":"","sources":["../../../src/packages/illustrations/MySite/IllustrationMySiteBenefits.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;;AAoLzB,wBAEC"}
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import withIllustration from '../withIllustration';
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
- const IllustrationHouse = props => {
5
+ const IllustrationMySiteBenefits = props => {
6
6
  return /*#__PURE__*/_jsxs("svg", {
7
7
  viewBox: " 0 0 125 85",
8
8
  ...props,
@@ -178,4 +178,4 @@ const IllustrationHouse = props => {
178
178
  })]
179
179
  });
180
180
  };
181
- export default withIllustration('IllustrationHouse')(IllustrationHouse);
181
+ export default withIllustration('IllustrationMySiteBenefits')(IllustrationMySiteBenefits);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "4.0.37",
3
+ "version": "4.0.38",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",
@@ -1,16 +0,0 @@
1
- import { createRef, useEffect, useState } from 'react';
2
-
3
- const useHandleOptionsHeight = () => {
4
- const [optionsHeight, setOptionsHeight] = useState(0);
5
- const optionsRef = /*#__PURE__*/createRef();
6
- useEffect(() => {
7
- const rect = optionsRef.current?.getBoundingClientRect();
8
- setOptionsHeight(rect?.height || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
9
- }, [optionsRef.current]);
10
- return {
11
- optionsHeight,
12
- optionsRef
13
- };
14
- };
15
-
16
- export default useHandleOptionsHeight;
@@ -1,22 +0,0 @@
1
- // import React from 'react'
2
- // interface IProps {
3
- // /** Function children in which CheckBox components can be rendered. */
4
- // children: (component: React.ComponentType, values: string[], id: string) => void;
5
- // /** Unique name of the field. */
6
- // name: string,;
7
- // /** Callback that is triggered when a child CheckBox is clicked. */
8
- // onChange: (values: string[], event: React.ChangeEvent<HTMLInputElement>) => void;
9
- // /** Default checked values. */
10
- // value?: string,[];
11
- // }
12
- // const CheckboxController: React.FC<IProps> = props => {
13
- // const type: string = 'checkbox'
14
- // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
15
- // if (props.onChange) {
16
- // props.onChange(e.target.checked)
17
- // }
18
- // }
19
- // return (
20
- // )
21
- // }
22
- // export default Checkbox
@@ -1,56 +0,0 @@
1
- import React from 'react';
2
- import { MONTHS } from '../../utils/dates';
3
- import { StyledSelect, Div } from './styles';
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- import { jsxs as _jsxs } from "react/jsx-runtime";
6
-
7
- const YearMonthForm = ({
8
- onChange,
9
- date,
10
- fromDate,
11
- toDate
12
- }) => {
13
- const months = MONTHS;
14
- const years = [];
15
-
16
- for (let i = fromDate.getFullYear(); i <= toDate.getFullYear(); i += 1) {
17
- years.push(i);
18
- }
19
-
20
- const changeMonth = e => {
21
- let newDate = date;
22
- newDate.setMonth(e.target.value);
23
- if (newDate > toDate) newDate = toDate;
24
- onChange(newDate);
25
- };
26
-
27
- const changeYear = e => {
28
- let newDate = date;
29
- newDate.setFullYear(e.target.value);
30
- if (newDate > toDate) newDate = toDate;
31
- onChange(newDate);
32
- };
33
-
34
- return /*#__PURE__*/_jsxs(Div, {
35
- className: "DayPicker-Caption",
36
- children: [/*#__PURE__*/_jsx(StyledSelect, {
37
- name: "month",
38
- onChange: changeMonth,
39
- value: date.getMonth(),
40
- children: months.map((month, i) => /*#__PURE__*/_jsx("option", {
41
- value: i,
42
- children: month
43
- }, month))
44
- }), /*#__PURE__*/_jsx(StyledSelect, {
45
- name: "year",
46
- onChange: changeYear,
47
- value: date.getFullYear(),
48
- children: years.map(year => /*#__PURE__*/_jsx("option", {
49
- value: year,
50
- children: year
51
- }, year))
52
- })]
53
- });
54
- };
55
-
56
- export default YearMonthForm;
@@ -1,69 +0,0 @@
1
- export const basicToolbar = {
2
- options: ['inline', 'list'],
3
- inline: {
4
- options: ['bold', 'italic', 'underline']
5
- }
6
- };
7
- export const richToolbar = {
8
- options: ['blockType', 'inline', 'list', 'textAlign', 'link'],
9
- inline: {
10
- options: ['bold', 'italic', 'underline']
11
- },
12
- textAlign: {
13
- options: ['left', 'center', 'right', 'justify']
14
- },
15
- blockType: {
16
- inDropdown: true,
17
- options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']
18
- },
19
- link: {
20
- showOpenOptionOnHover: true,
21
- defaultTargetOption: '_blank',
22
- options: ['link', 'unlink']
23
- }
24
- };
25
- export const htmlToEntity = (nodeName, node, createEntity) => {
26
- if (nodeName === 'a') {
27
- return createEntity('LINK', 'MUTABLE', {
28
- url: node.href
29
- });
30
- }
31
- };
32
- export const getStrippedHtml = html => {
33
- return html.replace(/<img[^>]*>/g, '');
34
- };
35
- export const editorLabels = {
36
- // Generic
37
- 'generic.add': 'Legg til',
38
- 'generic.cancel': 'Avbryt',
39
- // Inline
40
- 'components.controls.inline.bold': 'Fet',
41
- 'components.controls.inline.italic': 'Kursiv',
42
- 'components.controls.inline.underline': 'Understrek',
43
- // List
44
- 'components.controls.list.unordered': 'Punktliste',
45
- 'components.controls.list.ordered': 'Nummerliste',
46
- 'components.controls.list.indent': 'Innrykk',
47
- 'components.controls.list.outdent': 'Utrykk',
48
- // Text align
49
- 'components.controls.textAlign.left': 'Venstrejuster',
50
- 'components.controls.textAlign.center': 'Midtstill',
51
- 'components.controls.textAlign.right': 'Høyrejuster',
52
- 'components.controls.textAlign.justify': 'Blokkjuster',
53
- // Block type
54
- 'components.controls.blocktype.normal': 'Avsnitt',
55
- 'components.controls.blocktype.h1': 'Overskrift 1',
56
- 'components.controls.blocktype.h2': 'Overskrift 2',
57
- 'components.controls.blocktype.h3': 'Overskrift 3',
58
- 'components.controls.blocktype.h4': 'Overskrift 4',
59
- 'components.controls.blocktype.h5': 'Overskrift 5',
60
- 'components.controls.blocktype.h6': 'Overskrift 6',
61
- // Link
62
- 'components.controls.link.linkTitle': 'Tittel',
63
- 'components.controls.link.linkTarget': 'URL',
64
- 'components.controls.link.linkTargetOption': 'Åpne i ny fane',
65
- 'components.controls.link.link': 'Legg til lenke',
66
- 'components.controls.link.unlink': 'Fjern lenke',
67
- // Remove
68
- 'components.controls.remove.remove': 'Fjern'
69
- };
@@ -1,147 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import React, { useState } from 'react';
3
- import { Editor as Wysiwyg } from 'react-draft-wysiwyg';
4
- import { convertToRaw, EditorState, Modifier } from 'draft-js';
5
- import { stateFromHTML } from 'draft-js-import-html';
6
- import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
7
- import { CounterWrapper, ErrorWrapper, Label, RelativeDiv, styles } from './styles';
8
- import { basicToolbar, editorLabels, getStrippedHtml, htmlToEntity, richToolbar } from './config';
9
- import { convertToHTML, convertFromHTML } from 'draft-convert';
10
- import Text from '../Text';
11
- import { useTheme } from '@emotion/react';
12
- import IconErrorOutline from '../../icons/General/IconErrorOutline';
13
- import draftToHtml from 'draftjs-to-html';
14
- import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
15
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
16
-
17
- /**
18
- *
19
- * TODO: REMOVE AND CLEANUP PACKAGES
20
- *
21
- */
22
- const EditorOld = ({
23
- initialValue,
24
- height = 300,
25
- maxHeight,
26
- maxlength,
27
- maxlengthType = 'plaintext',
28
- maxlengthText,
29
- withCounter,
30
- invalidMessage,
31
- label,
32
- customToolbar,
33
- type = 'basic',
34
- onChange,
35
- onBlur
36
- }) => {
37
- const theme = useTheme();
38
- const [maxlengthError, setMaxlengthError] = useState(null);
39
- const [charCount, setCharCount] = useState(0);
40
- const [editorState, setEditorState] = useState(initialValue ? EditorState.createWithContent(convertFromHTML({
41
- htmlToEntity
42
- })(initialValue)) : EditorState.createEmpty());
43
-
44
- const handleEditorChange = state => {
45
- handleValidity(state);
46
- setEditorState(state);
47
- const plainText = state.getCurrentContent().getPlainText();
48
- const html = draftToHtml(convertToRaw(state.getCurrentContent()));
49
- onChange(plainText.length > 0 ? html : ''); // return empty if no content
50
-
51
- if (withCounter && maxlength) {
52
- setCharCount(maxlengthType === 'html' ? html.length : plainText.length);
53
- }
54
- };
55
-
56
- const handleValidity = state => {
57
- if (!maxlength) {
58
- setMaxlengthError(null);
59
- return;
60
- }
61
-
62
- const plaintext = state.getCurrentContent().getPlainText();
63
- const html = convertToHTML(state.getCurrentContent());
64
-
65
- if (maxlengthType === 'html' && html.length > maxlength) {
66
- setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
67
- return;
68
- }
69
-
70
- if (maxlengthType === 'plaintext' && plaintext.length > maxlength) {
71
- setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
72
- return;
73
- }
74
-
75
- setMaxlengthError(null);
76
- };
77
-
78
- const Counter = _jsx(CounterWrapper, {
79
- children: _jsxs(Text, {
80
- children: [charCount, "/", maxlength]
81
- })
82
- });
83
-
84
- const handlePaste = (text, html, editorState, onChange) => {
85
- if (!html) return false;
86
- const strippedHtml = getStrippedHtml(html);
87
- const blockMap = stateFromHTML(strippedHtml).blockMap;
88
- const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
89
- onChange(EditorState.push(editorState, newState, 'insert-fragment'));
90
- return true;
91
- };
92
-
93
- const getToolbar = () => {
94
- switch (type) {
95
- case 'basic':
96
- return basicToolbar;
97
-
98
- case 'rich':
99
- return richToolbar;
100
-
101
- case 'custom':
102
- return customToolbar;
103
-
104
- default:
105
- return undefined;
106
- }
107
- };
108
-
109
- return _jsxs("div", {
110
- css: theme => [styles.default(theme, height), maxHeight && styles.maxHeight(maxHeight)],
111
- children: [label && _jsx(Label, {
112
- children: label
113
- }), _jsxs(RelativeDiv, {
114
- children: [_jsx(Wysiwyg, {
115
- editorState: editorState,
116
- toolbarClassName: "toolbar-wrapper",
117
- wrapperClassName: "editor-wrapper",
118
- editorClassName: "content-wrapper",
119
- onEditorStateChange: handleEditorChange,
120
- toolbar: getToolbar(),
121
- localization: {
122
- locale: 'nb_NO',
123
- translations: editorLabels
124
- },
125
- stripPastedStyles: type !== 'rich',
126
- onBlur: () => onBlur && onBlur(),
127
- handlePastedText: handlePaste
128
- }), maxlength && withCounter && Counter]
129
- }), (maxlengthError || invalidMessage) && _jsxs(ErrorWrapper, {
130
- children: [maxlengthError && _jsxs(Text, {
131
- color: theme.alert,
132
- children: [_jsx(IconErrorOutline, {
133
- size: "16px",
134
- color: theme.alert
135
- }), ' ', maxlengthError]
136
- }), invalidMessage && _jsxs(Text, {
137
- color: theme.alert,
138
- children: [_jsx(IconErrorOutline, {
139
- size: "16px",
140
- color: theme.alert
141
- }), ' ', invalidMessage]
142
- })]
143
- })]
144
- });
145
- };
146
-
147
- export default EditorOld;