@limetech/lime-elements 37.61.1 → 37.61.2

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.
@@ -5,13 +5,24 @@ export class CollapsibleItemTemplate extends React.Component {
5
5
  constructor(props) {
6
6
  super(props);
7
7
  this.props = props;
8
+ this.state = {
9
+ isOpen: false,
10
+ };
11
+ this.handleOpen = () => {
12
+ this.setState({
13
+ isOpen: true,
14
+ });
15
+ };
8
16
  this.handleAction = this.handleAction.bind(this);
9
17
  this.isDeepEmpty = this.isDeepEmpty.bind(this);
10
- this.isOpen = this.isDeepEmpty(props.data);
18
+ this.setState({
19
+ isOpen: this.isDeepEmpty(props.data),
20
+ });
11
21
  }
12
22
  componentDidMount() {
13
23
  const section = this.refs.section;
14
24
  section.addEventListener('action', this.handleAction);
25
+ section.addEventListener('open', this.handleOpen);
15
26
  this.setActions(section);
16
27
  }
17
28
  componentDidUpdate() {
@@ -21,15 +32,20 @@ export class CollapsibleItemTemplate extends React.Component {
21
32
  componentWillUnmount() {
22
33
  const section = this.refs.section;
23
34
  section.removeEventListener('action', this.handleAction);
35
+ section.removeEventListener('open', this.handleOpen);
24
36
  }
25
37
  render() {
26
38
  const { data, schema, formSchema } = this.props;
39
+ let children;
40
+ if (this.state.isOpen) {
41
+ children = this.props.item.children;
42
+ }
27
43
  return React.createElement('limel-collapsible-section', {
28
44
  header: findTitle(data, schema, formSchema) || 'New item',
29
45
  class: 'limel-form-array-item--object',
30
46
  ref: 'section',
31
- 'is-open': this.isOpen,
32
- }, this.props.item.children);
47
+ 'is-open': this.state.isOpen,
48
+ }, children);
33
49
  }
34
50
  setActions(element) {
35
51
  const { item, index } = this.props;
@@ -1 +1 @@
1
- {"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../../collapsible-section/action';\nimport React from 'react';\nimport { findTitle } from './common';\nimport { ArrayFieldItem, Runnable } from './types';\nimport { isEmpty } from 'lodash-es';\nimport { JSONSchema7 } from 'json-schema';\n\ninterface CollapsibleItemProps {\n /**\n * Data from reach-jsonschema-form\n */\n item: ArrayFieldItem;\n\n /**\n * The index of the field in the array\n */\n index: number;\n\n /**\n * The value of the field\n */\n data: any;\n\n /**\n * Schema for the field\n */\n schema: JSONSchema7;\n\n /**\n * Schema for the entire form\n */\n formSchema: JSONSchema7;\n}\n\nexport class CollapsibleItemTemplate extends React.Component {\n public refs: { section: any };\n private isOpen: boolean;\n\n constructor(public props: CollapsibleItemProps) {\n super(props);\n this.handleAction = this.handleAction.bind(this);\n this.isDeepEmpty = this.isDeepEmpty.bind(this);\n\n this.isOpen = this.isDeepEmpty(props.data);\n }\n\n public componentDidMount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.addEventListener('action', this.handleAction);\n\n this.setActions(section);\n }\n\n public componentDidUpdate() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n this.setActions(section);\n }\n\n public componentWillUnmount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.removeEventListener('action', this.handleAction);\n }\n\n public render() {\n const { data, schema, formSchema } = this.props;\n\n return React.createElement(\n 'limel-collapsible-section',\n {\n header: findTitle(data, schema, formSchema) || 'New item',\n class: 'limel-form-array-item--object',\n ref: 'section',\n 'is-open': this.isOpen,\n },\n this.props.item.children,\n );\n }\n\n private setActions(element: HTMLLimelCollapsibleSectionElement) {\n const { item, index } = this.props;\n const actions: Array<Action & Runnable> = [\n {\n id: 'down',\n icon: 'down_arrow',\n disabled: !item.hasMoveDown,\n run: item.onReorderClick(index, index + 1),\n },\n {\n id: 'up',\n icon: 'up_arrow',\n disabled: !item.hasMoveUp,\n run: item.onReorderClick(index, index - 1),\n },\n {\n id: 'remove',\n icon: 'trash',\n disabled: !item.hasRemove,\n run: item.onDropIndexClick(index),\n },\n ];\n\n element.actions = actions;\n }\n\n private handleAction(event: CustomEvent<Action & Runnable>) {\n event.stopPropagation();\n event.detail.run(event);\n }\n\n private isDeepEmpty(data) {\n if (typeof data !== 'object') {\n return false;\n }\n\n if (isEmpty(data)) {\n return true;\n }\n\n return Object.values(data).every(this.isDeepEmpty);\n }\n}\n"]}
1
+ {"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../../collapsible-section/action';\nimport React from 'react';\nimport { findTitle } from './common';\nimport { ArrayFieldItem, Runnable } from './types';\nimport { isEmpty } from 'lodash-es';\nimport { JSONSchema7 } from 'json-schema';\n\ninterface CollapsibleItemProps {\n /**\n * Data from reach-jsonschema-form\n */\n item: ArrayFieldItem;\n\n /**\n * The index of the field in the array\n */\n index: number;\n\n /**\n * The value of the field\n */\n data: any;\n\n /**\n * Schema for the field\n */\n schema: JSONSchema7;\n\n /**\n * Schema for the entire form\n */\n formSchema: JSONSchema7;\n}\n\nexport class CollapsibleItemTemplate extends React.Component {\n public refs: { section: any };\n state = {\n isOpen: false,\n };\n\n constructor(public props: CollapsibleItemProps) {\n super(props);\n this.handleAction = this.handleAction.bind(this);\n this.isDeepEmpty = this.isDeepEmpty.bind(this);\n\n this.setState({\n isOpen: this.isDeepEmpty(props.data),\n });\n }\n\n public componentDidMount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.addEventListener('action', this.handleAction);\n section.addEventListener('open', this.handleOpen);\n\n this.setActions(section);\n }\n\n public componentDidUpdate() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n this.setActions(section);\n }\n\n public componentWillUnmount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.removeEventListener('action', this.handleAction);\n section.removeEventListener('open', this.handleOpen);\n }\n\n public render() {\n const { data, schema, formSchema } = this.props;\n let children: any;\n if (this.state.isOpen) {\n children = this.props.item.children;\n }\n\n return React.createElement(\n 'limel-collapsible-section',\n {\n header: findTitle(data, schema, formSchema) || 'New item',\n class: 'limel-form-array-item--object',\n ref: 'section',\n 'is-open': this.state.isOpen,\n },\n children,\n );\n }\n\n private setActions(element: HTMLLimelCollapsibleSectionElement) {\n const { item, index } = this.props;\n const actions: Array<Action & Runnable> = [\n {\n id: 'down',\n icon: 'down_arrow',\n disabled: !item.hasMoveDown,\n run: item.onReorderClick(index, index + 1),\n },\n {\n id: 'up',\n icon: 'up_arrow',\n disabled: !item.hasMoveUp,\n run: item.onReorderClick(index, index - 1),\n },\n {\n id: 'remove',\n icon: 'trash',\n disabled: !item.hasRemove,\n run: item.onDropIndexClick(index),\n },\n ];\n\n element.actions = actions;\n }\n\n private handleAction(event: CustomEvent<Action & Runnable>) {\n event.stopPropagation();\n event.detail.run(event);\n }\n\n private handleOpen = () => {\n this.setState({\n isOpen: true,\n });\n };\n\n private isDeepEmpty(data) {\n if (typeof data !== 'object') {\n return false;\n }\n\n if (isEmpty(data)) {\n return true;\n }\n\n return Object.values(data).every(this.isDeepEmpty);\n }\n}\n"]}
@@ -23710,13 +23710,24 @@ class CollapsibleItemTemplate extends react.Component {
23710
23710
  constructor(props) {
23711
23711
  super(props);
23712
23712
  this.props = props;
23713
+ this.state = {
23714
+ isOpen: false,
23715
+ };
23716
+ this.handleOpen = () => {
23717
+ this.setState({
23718
+ isOpen: true,
23719
+ });
23720
+ };
23713
23721
  this.handleAction = this.handleAction.bind(this);
23714
23722
  this.isDeepEmpty = this.isDeepEmpty.bind(this);
23715
- this.isOpen = this.isDeepEmpty(props.data);
23723
+ this.setState({
23724
+ isOpen: this.isDeepEmpty(props.data),
23725
+ });
23716
23726
  }
23717
23727
  componentDidMount() {
23718
23728
  const section = this.refs.section;
23719
23729
  section.addEventListener('action', this.handleAction);
23730
+ section.addEventListener('open', this.handleOpen);
23720
23731
  this.setActions(section);
23721
23732
  }
23722
23733
  componentDidUpdate() {
@@ -23726,15 +23737,20 @@ class CollapsibleItemTemplate extends react.Component {
23726
23737
  componentWillUnmount() {
23727
23738
  const section = this.refs.section;
23728
23739
  section.removeEventListener('action', this.handleAction);
23740
+ section.removeEventListener('open', this.handleOpen);
23729
23741
  }
23730
23742
  render() {
23731
23743
  const { data, schema, formSchema } = this.props;
23744
+ let children;
23745
+ if (this.state.isOpen) {
23746
+ children = this.props.item.children;
23747
+ }
23732
23748
  return react.createElement('limel-collapsible-section', {
23733
23749
  header: findTitle(data, schema, formSchema) || 'New item',
23734
23750
  class: 'limel-form-array-item--object',
23735
23751
  ref: 'section',
23736
- 'is-open': this.isOpen,
23737
- }, this.props.item.children);
23752
+ 'is-open': this.state.isOpen,
23753
+ }, children);
23738
23754
  }
23739
23755
  setActions(element) {
23740
23756
  const { item, index } = this.props;