pragmate-ui/dynamic-list/dynamic-list.amd.js

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/components", "framer-motion", "pragmate-ui/icons"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.useDynamicListContext = _exports.hmr = _exports.__beyond_pkg = _exports.Provider = _exports.List = _exports.Header = _exports.DynamicItem = _exports.DraggableList = _exports.AddDynamicItem = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.1/dynamic-list"
    },
    "type": "code"
  }, _amd_module.uri).package();
  ;
  __pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['pragmate-ui/components', dependency_3], ['framer-motion', dependency_4], ['pragmate-ui/icons', dependency_5]]);
  brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/dynamic-list');
  const ims = new Map();

  /*************************************
  INTERNAL MODULE: ./components/add-item
  *************************************/

  ims.set('./components/add-item', {
    hash: 3769438584,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.AddDynamicItem = AddDynamicItem;
      var _react = require("react");
      var _components = require("pragmate-ui/components");
      var _context = require("../context");
      /*bundle */
      function AddDynamicItem() {
        const {
          addItem
        } = (0, _context.useDynamicListContext)();
        return _react.default.createElement(_components.Button, {
          variant: 'primary',
          onClick: addItem
        }, "Add");
      }
    }
  });

  /*******************************************
  INTERNAL MODULE: ./components/dragabble-list
  *******************************************/

  ims.set('./components/dragabble-list', {
    hash: 3835674000,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.DraggableList = DraggableList;
      var _react = require("react");
      var _framerMotion = require("framer-motion");
      var _context = require("../context");
      /* bundle */
      function DraggableList({
        children,
        className = ''
      }) {
        const {
          values,
          setValues
        } = (0, _context.useDynamicListContext)();
        return _react.default.createElement(_framerMotion.Reorder.Group, {
          className: className,
          values: values,
          onReorder: values => {
            setValues(values);
          }
        }, children);
      }
    }
  });

  /***********************************
  INTERNAL MODULE: ./components/header
  ***********************************/

  ims.set('./components/header', {
    hash: 3832436420,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Header = Header;
      var _react = require("react");
      var _context = require("../context");
      var _components = require("pragmate-ui/components");
      /*bundle */
      function Header({
        children
      }) {
        const {
          addItem
        } = (0, _context.useDynamicListContext)();
        return _react.default.createElement("header", {
          className: 'pui-dynamic-list__header'
        }, _react.default.createElement(_components.Button, {
          variant: 'primary',
          onClick: addItem
        }, "Add"), children);
      }
    }
  });

  /*********************************
  INTERNAL MODULE: ./components/item
  *********************************/

  ims.set('./components/item', {
    hash: 639523093,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.DynamicItem = DynamicItem;
      var _react = require("react");
      var _context = require("../context");
      var _icons = require("pragmate-ui/icons");
      /*bundle */
      function DynamicItem(props) {
        const {
          children,
          index,
          identifier
        } = props;
        const {
          removeItem,
          draggable,
          Item,
          registerRef
        } = (0, _context.useDynamicListContext)();
        const onRemove = () => removeItem(identifier.id);
        const attrs = {
          className: 'pui-dynamic-list__item',
          ...(draggable ? {
            value: props.identifier
          } : {})
        };
        const body = _react.default.createElement(Item, {
          ...props
        }, _react.default.createElement("div", {
          className: 'item__content'
        }, children), _react.default.createElement("section", {
          className: 'item__actions'
        }, _react.default.createElement(_icons.IconButton, {
          icon: 'delete',
          onClick: onRemove
        })));
        const register = element => registerRef(index, element);
        return _react.default.createElement("div", {
          ...attrs,
          key: index,
          ref: register
        }, body);
      }
    }
  });

  /*********************************
  INTERNAL MODULE: ./components/list
  *********************************/

  ims.set('./components/list', {
    hash: 2727787293,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.List = List;
      var _react = require("react");
      var _context = require("../context");
      var _item = require("./item");
      /*bundle*/
      function List({
        className
      }) {
        const {
          name,
          values,
          setValues
        } = (0, _context.useDynamicListContext)();
        const attrs = {
          className: `pui-dynamic-list ${className}`
        };
        const handleChange = (index, value) => {
          const newValue = [...values];
          newValue[index] = value;
          setValues(newValue);
        };
        const output = values.map((item, index) => {
          const setValue = value => handleChange(index, value);
          return _react.default.createElement(_item.DynamicItem, {
            value: item,
            key: `${name}.${index}`,
            index: index,
            identifier: item,
            setValue: setValue
          }, item);
        });
        const Container = 'div';
        return _react.default.createElement(Container, {
          ...attrs
        }, output);
      }
    }
  });

  /*************************
  INTERNAL MODULE: ./context
  *************************/

  ims.set('./context', {
    hash: 2545632455,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.useDynamicListContext = exports.DynamicListContext = void 0;
      var _react = require("react");
      const DynamicListContext = exports.DynamicListContext = _react.default.createContext({});
      /*bundle*/
      const useDynamicListContext = () => _react.default.useContext(DynamicListContext);
      exports.useDynamicListContext = useDynamicListContext;
    }
  });

  /*****************************
  INTERNAL MODULE: ./definitions
  *****************************/

  ims.set('./definitions', {
    hash: 733921901,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
    }
  });

  /**************************
  INTERNAL MODULE: ./provider
  **************************/

  ims.set('./provider', {
    hash: 811037713,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Provider = Provider;
      var _react = require("react");
      var _context = require("./context");
      /*bundle */
      function Provider({
        name,
        onChange,
        draggable,
        children,
        value,
        Item,
        specs,
        className
      }) {
        if (value && !Array.isArray(value)) {
          console.warn('Warning: value prop must be an array or undefined. Received', value);
        }
        const getDefaultValue = () => '';
        if (!value?.length) value = [getDefaultValue()];
        const [items, setItems] = _react.default.useState([...value]);
        const [isDraggable, setIsDraggable] = _react.default.useState(draggable);
        const refs = (0, _react.useRef)([]);
        _react.default.useEffect(() => {
          setItems(value);
        }, [value.length]);
        const providerData = {
          addItem: () => {
            const newValue = [...items, getDefaultValue()];
            setItems(newValue);
          },
          draggable: isDraggable,
          refs,
          specs: specs ?? {},
          toggleDraggable: () => setIsDraggable(!isDraggable),
          removeItem: index => {
            const newItems = items.filter((_, i) => i !== index);
            setItems(newItems);
            const target = {
              name,
              value: newItems
            };
            onChange?.({
              target,
              currentTarget: target
            });
            return newItems;
          },
          name,
          setItems,
          values: items,
          registerRef: (index, ref) => {
            refs.current[index] = ref;
          },
          setValue: (index, value) => {
            const newItems = [...items];
            newItems[index] = value;
            setItems(newItems);
          },
          setValues: value => {
            setItems(value);
            const target = {
              name,
              value
            };
            onChange?.({
              target,
              currentTarget: target
            });
          },
          getDefaultValue,
          items: items,
          Item
        };
        return _react.default.createElement(_context.DynamicListContext.Provider, {
          value: providerData
        }, _react.default.createElement("div", {
          className: className
        }, children));
      }
    }
  });
  __pkg.exports.descriptor = [{
    "im": "./components/add-item",
    "from": "AddDynamicItem",
    "name": "AddDynamicItem"
  }, {
    "im": "./components/dragabble-list",
    "from": "DraggableList",
    "name": "DraggableList"
  }, {
    "im": "./components/header",
    "from": "Header",
    "name": "Header"
  }, {
    "im": "./components/item",
    "from": "DynamicItem",
    "name": "DynamicItem"
  }, {
    "im": "./components/list",
    "from": "List",
    "name": "List"
  }, {
    "im": "./context",
    "from": "useDynamicListContext",
    "name": "useDynamicListContext"
  }, {
    "im": "./provider",
    "from": "Provider",
    "name": "Provider"
  }];
  let AddDynamicItem = _exports.AddDynamicItem = void 0,
    DraggableList = _exports.DraggableList = void 0,
    Header = _exports.Header = void 0,
    DynamicItem = _exports.DynamicItem = void 0,
    List = _exports.List = void 0,
    useDynamicListContext = _exports.useDynamicListContext = void 0,
    Provider = _exports.Provider = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'AddDynamicItem') && (_exports.AddDynamicItem = AddDynamicItem = require ? require('./components/add-item').AddDynamicItem : value);
    (require || prop === 'DraggableList') && (_exports.DraggableList = DraggableList = require ? require('./components/dragabble-list').DraggableList : value);
    (require || prop === 'Header') && (_exports.Header = Header = require ? require('./components/header').Header : value);
    (require || prop === 'DynamicItem') && (_exports.DynamicItem = DynamicItem = require ? require('./components/item').DynamicItem : value);
    (require || prop === 'List') && (_exports.List = List = require ? require('./components/list').List : value);
    (require || prop === 'useDynamicListContext') && (_exports.useDynamicListContext = useDynamicListContext = require ? require('./context').useDynamicListContext : value);
    (require || prop === 'Provider') && (_exports.Provider = Provider = require ? require('./provider').Provider : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=dynamic-list.amd.js.map