@licklist/design 0.70.5-dev.3 → 0.70.6-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"TicketDescription.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/ticket-description/TicketDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAA;AAE1D,OAAO,EACL,KAAK,EAEN,MAAM,sDAAsD,CAAA;AAK7D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAID,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,SAAc,EACd,MAAM,EACN,KAAK,EACL,UAAkB,EAClB,SAAgB,GACjB,EAAE,sBAAsB,2CA4DxB"}
1
+ {"version":3,"file":"TicketDescription.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/ticket-description/TicketDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAA;AAE1D,OAAO,EACL,KAAK,EAEN,MAAM,sDAAsD,CAAA;AAK7D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAID,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,SAAc,EACd,MAAM,EACN,KAAK,EACL,UAAkB,EAClB,SAAgB,GACjB,EAAE,sBAAsB,2CAiDxB"}
@@ -56,40 +56,11 @@ var DESCRIPTION_MAX_LENGTH = 120;
56
56
  function TicketDescription(param) {
57
57
  var title = param.title, description = param.description, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, images = param.images, price = param.price, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_canExpand = param.canExpand, canExpand = _param_canExpand === void 0 ? true : _param_canExpand;
58
58
  var _useState = _sliced_to_array(useState(false), 2), isDescriptionExpanded = _useState[0], setIsDescriptionExpanded = _useState[1];
59
- var showDescription = !!description;
60
59
  var wrapperClasses = clsx('ticket-description', className);
61
60
  var imageSrc = images ? MediaService.getImageSrc(images, THUMBNAIL_IMAGE_SIZE) : null;
62
61
  var descriptionWrapperStyle = {
63
62
  '--description-wrapper-height': 'inherit'
64
63
  };
65
- var renderDescription = function() {
66
- return /*#__PURE__*/ jsx("div", {
67
- className: "description-content",
68
- children: /*#__PURE__*/ jsxs("div", {
69
- className: "d-flex flex-column",
70
- children: [
71
- /*#__PURE__*/ jsxs("div", {
72
- className: "product-title",
73
- children: [
74
- title,
75
- " ",
76
- isRequired && /*#__PURE__*/ jsx("span", {
77
- children: "*"
78
- })
79
- ]
80
- }),
81
- showDescription && /*#__PURE__*/ jsx(TipTapEditor, {
82
- viewMode: true,
83
- disabled: true,
84
- content: description,
85
- editorStyle: {
86
- backgroundColor: 'transparent'
87
- }
88
- })
89
- ]
90
- })
91
- });
92
- };
93
64
  return /*#__PURE__*/ jsxs("div", {
94
65
  className: wrapperClasses,
95
66
  children: [
@@ -110,17 +81,57 @@ function TicketDescription(param) {
110
81
  className: "ticket-description__container",
111
82
  isExpanded: isDescriptionExpanded,
112
83
  setIsExpanded: setIsDescriptionExpanded,
113
- children: renderDescription()
114
- }) : renderDescription()
84
+ children: /*#__PURE__*/ jsx(Description, {
85
+ title: title,
86
+ isRequired: isRequired,
87
+ description: description
88
+ })
89
+ }) : /*#__PURE__*/ jsx(Description, {
90
+ title: title,
91
+ isRequired: isRequired,
92
+ description: description
93
+ })
115
94
  ]
116
95
  })
117
96
  }),
118
97
  price && /*#__PURE__*/ jsx("div", {
119
- className: clsx(showDescription && 'mt-5'),
98
+ className: clsx({
99
+ 'mt-5': description
100
+ }),
120
101
  children: price
121
102
  })
122
103
  ]
123
104
  });
124
105
  }
106
+ var Description = function(param) {
107
+ var title = param.title, isRequired = param.isRequired, description = param.description;
108
+ return /*#__PURE__*/ jsx("div", {
109
+ className: "description-content",
110
+ children: /*#__PURE__*/ jsxs("div", {
111
+ className: "d-flex flex-column",
112
+ children: [
113
+ /*#__PURE__*/ jsxs("div", {
114
+ className: "product-title",
115
+ children: [
116
+ title,
117
+ " ",
118
+ isRequired && /*#__PURE__*/ jsx("span", {
119
+ children: "*"
120
+ })
121
+ ]
122
+ }),
123
+ !!description && /*#__PURE__*/ jsx(TipTapEditor, {
124
+ viewMode: true,
125
+ disabled: true,
126
+ content: description,
127
+ editorStyle: {
128
+ backgroundColor: 'transparent'
129
+ },
130
+ hideEmptyEditor: true
131
+ })
132
+ ]
133
+ })
134
+ });
135
+ };
125
136
 
126
137
  export { TicketDescription };
@@ -6,7 +6,7 @@
6
6
 
7
7
  &__wrapper {
8
8
  height: var(--description-wrapper-height);
9
- margin-bottom: 1rem;
9
+ margin-bottom: 0.5rem;
10
10
 
11
11
  &-children {
12
12
  display: flex;
@@ -7,6 +7,7 @@ export interface TipTapEditorProps {
7
7
  editorStyle?: React.CSSProperties;
8
8
  className?: string;
9
9
  id?: string;
10
+ hideEmptyEditor?: boolean;
10
11
  }
11
- export declare function TipTapEditor({ viewMode, withEmoji, content, onUpdate, disabled, editorStyle, className, id, }: TipTapEditorProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function TipTapEditor({ viewMode, withEmoji, content, onUpdate, disabled, editorStyle, className, id, hideEmptyEditor, }: TipTapEditorProps): import("react/jsx-runtime").JSX.Element;
12
13
  //# sourceMappingURL=TipTapEditor.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TipTapEditor.d.ts","sourceRoot":"","sources":["../../src/tiptap-editor/TipTapEditor.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AA0BD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAiB,EACjB,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,WAAW,EACX,SAAS,EACT,EAAE,GACH,EAAE,iBAAiB,2CA2CnB"}
1
+ {"version":3,"file":"TipTapEditor.d.ts","sourceRoot":"","sources":["../../src/tiptap-editor/TipTapEditor.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AA0BD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAiB,EACjB,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,WAAW,EACX,SAAS,EACT,EAAE,EACF,eAAuB,GACxB,EAAE,iBAAiB,2CAgDnB"}
@@ -21,6 +21,34 @@ import clsx from 'clsx';
21
21
  import { TipTapMenu } from './TipTapMenu/TipTapMenu.js';
22
22
  import { EmojiReplacer } from './TipTapMenu/extensions/EmojiReplacer.js';
23
23
 
24
+ function _define_property(obj, key, value) {
25
+ if (key in obj) {
26
+ Object.defineProperty(obj, key, {
27
+ value: value,
28
+ enumerable: true,
29
+ configurable: true,
30
+ writable: true
31
+ });
32
+ } else {
33
+ obj[key] = value;
34
+ }
35
+ return obj;
36
+ }
37
+ function _object_spread(target) {
38
+ for(var i = 1; i < arguments.length; i++){
39
+ var source = arguments[i] != null ? arguments[i] : {};
40
+ var ownKeys = Object.keys(source);
41
+ if (typeof Object.getOwnPropertySymbols === "function") {
42
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
43
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
44
+ }));
45
+ }
46
+ ownKeys.forEach(function(key) {
47
+ _define_property(target, key, source[key]);
48
+ });
49
+ }
50
+ return target;
51
+ }
24
52
  var DEFAULT_CONTENT = '<p></p>';
25
53
  var EXTENSIONS = [
26
54
  Blockquote,
@@ -44,7 +72,7 @@ var EXTENSIONS = [
44
72
  EmojiReplacer
45
73
  ];
46
74
  function TipTapEditor(param) {
47
- var viewMode = param.viewMode, _param_withEmoji = param.withEmoji, withEmoji = _param_withEmoji === void 0 ? false : _param_withEmoji, content = param.content, onUpdate = param.onUpdate, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, editorStyle = param.editorStyle, className = param.className, id = param.id;
75
+ var viewMode = param.viewMode, _param_withEmoji = param.withEmoji, withEmoji = _param_withEmoji === void 0 ? false : _param_withEmoji, content = param.content, onUpdate = param.onUpdate, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, editorStyle = param.editorStyle, className = param.className, id = param.id, _param_hideEmptyEditor = param.hideEmptyEditor, hideEmptyEditor = _param_hideEmptyEditor === void 0 ? false : _param_hideEmptyEditor;
48
76
  var editor = useEditor({
49
77
  extensions: EXTENSIONS,
50
78
  editable: !disabled,
@@ -81,7 +109,9 @@ function TipTapEditor(param) {
81
109
  /*#__PURE__*/ jsx(EditorContent, {
82
110
  name: "editor",
83
111
  className: clsx(!viewMode ? 'editor editor-with-menu' : 'editor-without-menu', disabled && 'editor-disabled', className),
84
- style: editorStyle,
112
+ style: _object_spread({}, editorStyle, hideEmptyEditor ? {
113
+ display: (editor === null || editor === void 0 ? void 0 : editor.isEmpty) ? 'none' : 'block'
114
+ } : {}),
85
115
  editor: editor
86
116
  })
87
117
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.70.5-dev.3",
3
+ "version": "0.70.6-dev.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -208,4 +208,4 @@
208
208
  "yarn": "4.4.0"
209
209
  },
210
210
  "stableVersion": "0.69.1-dev.3"
211
- }
211
+ }
@@ -30,7 +30,6 @@ export function TicketDescription({
30
30
  canExpand = true,
31
31
  }: TicketDescriptionProps) {
32
32
  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
33
- const showDescription = !!description
34
33
 
35
34
  const wrapperClasses = clsx('ticket-description', className)
36
35
 
@@ -42,24 +41,6 @@ export function TicketDescription({
42
41
  '--description-wrapper-height': 'inherit',
43
42
  } as CSSProperties
44
43
 
45
- const renderDescription = () => (
46
- <div className='description-content'>
47
- <div className='d-flex flex-column'>
48
- <div className='product-title'>
49
- {title} {isRequired && <span>*</span>}
50
- </div>
51
- {showDescription && (
52
- <TipTapEditor
53
- viewMode
54
- disabled
55
- content={description}
56
- editorStyle={{ backgroundColor: 'transparent' }}
57
- />
58
- )}
59
- </div>
60
- </div>
61
- )
62
-
63
44
  return (
64
45
  <div className={wrapperClasses}>
65
46
  <div
@@ -78,14 +59,46 @@ export function TicketDescription({
78
59
  isExpanded={isDescriptionExpanded}
79
60
  setIsExpanded={setIsDescriptionExpanded}
80
61
  >
81
- {renderDescription()}
62
+ <Description
63
+ title={title}
64
+ isRequired={isRequired}
65
+ description={description}
66
+ />
82
67
  </TextExpand>
83
68
  ) : (
84
- renderDescription()
69
+ <Description
70
+ title={title}
71
+ isRequired={isRequired}
72
+ description={description}
73
+ />
85
74
  )}
86
75
  </div>
87
76
  </div>
88
- {price && <div className={clsx(showDescription && 'mt-5')}>{price}</div>}
77
+ {price && <div className={clsx({ 'mt-5': description })}>{price}</div>}
89
78
  </div>
90
79
  )
91
80
  }
81
+
82
+ const Description = ({
83
+ title,
84
+ isRequired,
85
+ description,
86
+ }: Pick<TicketDescriptionProps, 'title' | 'isRequired' | 'description'>) => (
87
+ <div className='description-content'>
88
+ <div className='d-flex flex-column'>
89
+ <div className='product-title'>
90
+ {title} {isRequired && <span>*</span>}
91
+ </div>
92
+
93
+ {!!description && (
94
+ <TipTapEditor
95
+ viewMode
96
+ disabled
97
+ content={description}
98
+ editorStyle={{ backgroundColor: 'transparent' }}
99
+ hideEmptyEditor
100
+ />
101
+ )}
102
+ </div>
103
+ </div>
104
+ )
@@ -6,7 +6,7 @@
6
6
 
7
7
  &__wrapper {
8
8
  height: var(--description-wrapper-height);
9
- margin-bottom: 1rem;
9
+ margin-bottom: 0.5rem;
10
10
 
11
11
  &-children {
12
12
  display: flex;
@@ -30,6 +30,7 @@ export interface TipTapEditorProps {
30
30
  editorStyle?: React.CSSProperties
31
31
  className?: string
32
32
  id?: string
33
+ hideEmptyEditor?: boolean
33
34
  }
34
35
 
35
36
  const DEFAULT_CONTENT = '<p></p>'
@@ -65,6 +66,7 @@ export function TipTapEditor({
65
66
  editorStyle,
66
67
  className,
67
68
  id,
69
+ hideEmptyEditor = false,
68
70
  }: TipTapEditorProps) {
69
71
  const editor = useEditor(
70
72
  {
@@ -103,7 +105,12 @@ export function TipTapEditor({
103
105
  disabled && 'editor-disabled',
104
106
  className,
105
107
  )}
106
- style={editorStyle}
108
+ style={{
109
+ ...editorStyle,
110
+ ...(hideEmptyEditor
111
+ ? { display: editor?.isEmpty ? 'none' : 'block' }
112
+ : {}),
113
+ }}
107
114
  editor={editor}
108
115
  />
109
116
  </div>